:root { --bg:#0a0a0a; --fg:#cfcfcf; --dim:#666; --accent:#ffb000; --panel:#0e0e0e; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-weight:600; margin:0 0 .5em; }
h1 { font-size:1.4em; }
h2 { font-size:1.1em; color:var(--accent); }
input,select,textarea,button { font:inherit; background:#000; color:var(--fg); border:1px solid #444; padding:.35em .5em; border-radius:0; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); }
button, .btn { cursor:pointer; background:#000; border:1px solid var(--accent); color:var(--accent); padding:.3em .7em; }
button:hover, .btn:hover { background:var(--accent); color:#000; }
.btn-ghost { border-color:#444; color:var(--fg); }
.btn-ghost:hover { background:#222; color:var(--fg); }
.btn-danger { border-color:#c44; color:#c44; }
.btn-danger:hover { background:#c44; color:#000; }
label { display:block; margin:.4em 0 .1em; color:var(--dim); }
.row { display:flex; gap:1em; flex-wrap:wrap; align-items:flex-end; }
.checkbox-group { display:flex; gap:.6em; flex-wrap:wrap; align-items:center; color:var(--dim); }
.checkbox-group label { display:inline-flex; align-items:center; gap:.2em; margin:0; color:var(--fg); }
/* The date field can't use a wrapping <label> — label-forwarding would
   re-focus the pointer-events:none input and defeat icon-only. Mimic the
   inline caption+control layout of the sibling <label> fields instead. */
/* Log view toggle + calendar */
.viewtoggle { display:inline-flex; }
.cal { max-width:520px; }
.cal-head { display:flex; align-items:center; gap:.6em; margin:.5em 0; }
.cal-head strong { min-width:9em; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow { text-align:center; color:var(--dim); font-size:.85em; padding:.2em 0; }
.cal-day { display:flex; flex-direction:column; gap:1px; min-height:4.5em; padding:.25em; border:1px solid #222; text-decoration:none; overflow:hidden; }
.cal-day:hover { text-decoration:none; }
.cal-pad { border-color:transparent; }
.cal-num { font-size:.8em; }
.cal-empty { color:var(--dim); }
.cal-empty:hover { border-color:#444; background:#141414; }
.cal-entry { color:#000; }
.cal-entry:hover { outline:1px solid var(--fg); }
.cal-entry .cal-num { font-weight:700; }
.cal-wo { font-size:.68em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-today { outline:2px solid var(--accent); outline-offset:-2px; }
.date-field { margin:.4em 0 .1em; }
.field-caption { color:var(--dim); }
.date-picker-group { display:inline-flex; vertical-align:middle; }
/* Text is display-only — the value is changed only via the icon button's
   picker (pointer-events:none blocks clicking into the date segments, the
   native indicator is hidden since we supply our own). */
.date-picker-group input { pointer-events:none; }
/* Only drop the input's right border when the icon button is there to close
   the edge (new entries) — on existing entries the button is hidden, so the
   input must keep its own right border. */
.date-picker-group:has(button) input { border-right:none; }
.date-picker-group input::-webkit-calendar-picker-indicator { display:none; }
.date-picker-group button { padding:.35em .5em; border-color:#444; }
.date-picker-group button:hover { background:#222; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1em; }
@media (max-width:680px) { .grid2 { grid-template-columns:1fr; } }
.nav { display:flex; gap:1em; align-items:center; flex-wrap:wrap; padding:.5em 1em; border-bottom:1px solid #333; background:#060606; }
.nav .brand { font-weight:700; color:var(--accent); }
.nav a { color:var(--fg); }
.nav a.active { color:var(--accent); }
.nav .right { margin-left:auto; font-size:.85em; color:var(--dim); }
main { padding:1em; max-width:960px; margin:0 auto; }
.card { background:var(--panel); border:1px solid #333; box-shadow:inset 0 0 0 1px #000; padding:.8em; margin-bottom:1em; }
table { border-collapse:collapse; width:100%; }
th,td { text-align:left; padding:.3em .5em; border-bottom:1px solid #222; vertical-align:top; }
th { color:var(--accent); font-weight:600; }
.muted { color:var(--dim); }
.flash { border:1px solid var(--accent); padding:.5em .8em; margin:.5em 0; color:var(--accent); }
.flag { color:#c44; }
.servlet { margin:1em 0; }
.workout-block, .exercise-block { border-left:2px solid #333; padding-left:.8em; margin:.5em 0; }
hr { border:0; border-top:1px solid #222; margin:1em 0; }
pre, code { background:#000; }
.metric { display:inline-block; min-width:5em; }
.htmx-swapping main { opacity:0; transition:opacity 80ms; }