/* Log it (log.js): six large buttons, one inline form at a time. A chosen option is filled with the accent and the radio is announced, so state is never
   color alone; in forced-colors mode it takes the system highlight. Control borders use --muted so they stay visible. */
html { scroll-padding-bottom: 9rem; } /* keeps a focused field clear of the sticky Save row */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.kbtn { box-sizing: border-box; min-height: 56px; padding: 0 .75rem; font: 600 1.0625rem var(--font); color: var(--accent); background: var(--surface);
  border: 1.5px solid var(--accent); border-radius: 12px; cursor: pointer; }
.kbtn[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.btn:disabled, .kbtn:disabled { opacity: .55; cursor: default; }
.btn.sm { min-width: 3.5rem; } .btn.quick { width: 100%; margin-top: .5rem; }
.kbtn .dr { display: block; font-size: .8125rem; font-weight: 400; } /* "Draft": this form holds something that was typed or chosen */
.lform { margin-top: .75rem; display: flex; flex-direction: column; gap: 1.25rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem; }
.lform h3 { font-size: 1.125rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.lform h3:focus { outline: 0; } /* focus lands here to start the form; it is a heading, not a field */
.fs { border: 0; margin: 0; padding: 0; min-width: 0; } .fs legend { padding: 0; margin-bottom: .375rem; font-weight: 600; }
.trow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .fs .small { margin-top: .375rem; }
.fld { display: flex; flex-direction: column; gap: .375rem; } .fld label { font-weight: 600; }
.ctl { box-sizing: border-box; min-height: 44px; padding: 0 .625rem; font: 400 1rem var(--font); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--muted); border-radius: 10px; }
.fld .ctl { width: 100%; } textarea.ctl { padding-block: .5rem; resize: vertical; line-height: 1.4; }
.opts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
.opts.num { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .opts.wide { grid-template-columns: minmax(0, 1fr); }
.opt { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 44px; padding: .25rem .5rem;
  text-align: center; font-weight: 600; color: var(--ink); background: var(--bg); border: 1.5px solid var(--muted); border-radius: 10px; cursor: pointer; }
.opts.wide .opt { justify-content: flex-start; text-align: left; padding-inline: .75rem; }
.opt .on { flex: none; min-width: 1.25rem; font: 700 1.0625rem var(--mono); }
.opt.skip { grid-column: 1 / -1; font-weight: 400; color: var(--muted); }
.sr:checked + .opt { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
  outline: 2px solid transparent; outline-offset: -5px; } /* the transparent outline shows as a ring in forced-colors mode */
.sr:checked + .opt.skip { background: var(--soft-bg); border-color: var(--ink); outline-color: var(--ink); color: var(--ink); font-weight: 400; }
/* "Not sure" chosen by default stays quiet but still shows a dark border and inner ring, so it reads as selected */
.sr:focus-visible + .opt { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) {
  .sr:checked + .opt, .sr:checked + .opt.skip { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
}
.bar { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: .5rem; margin: 0 -1rem -1rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--surface);
  border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.btns { display: flex; gap: .5rem; } .btns .btn { flex: 1 1 0; min-height: 48px; }
.say { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: 8px; font-size: .9375rem; font-weight: 600; } .say:empty { margin: 0; padding: 0; }
.bar .say { margin: 0; } .say .hint { margin-top: .25rem; font-weight: 400; }
/* the link is 44 px tall to tap (padding) but reads inline (negative margin) */
.say a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; font-weight: 600; color: inherit; text-decoration: underline; }
.time-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.time-fields .fld:first-child { grid-column: 1 / -1; }
.ctl { max-width: 100%; min-width: 0; } select.ctl { min-height: 48px; }
textarea { min-height: 6rem; } .bar { bottom: 4.75rem; } .btns { flex-wrap: wrap; }
.btn { min-width: 44px; padding: .625rem .875rem; } .lform { width: auto; }
summary { min-height: 44px; box-sizing: border-box; }
@media (max-width: 350px) { .row { flex-wrap: wrap; } .row .chip { max-width: 100%; } }
/* Forms scroll with the page. A floating save row must never cover a field. */
.bar { position: static; bottom: auto; }
/* Stack controls when text grows beyond the available column width. */
.kinds { grid-template-columns: repeat(auto-fit, minmax(min(100%,9rem),1fr)); }
.time-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%,5rem),1fr)); }
.btns .btn { flex-basis: 8.5rem; }
.ctl { min-height: 2.75rem; } select.ctl { min-height: 3rem; }