/*
 * Sit Log. System fonts; sizes in rem so they follow the reader's text size.
 * Spacing on a 4px rhythm. Home and rating follow the device's light or dark setting;
 * the sit screen is always black.
 */
:root {
  color-scheme: light dark;
  --bg: #141210;
  --raise: #1d1b18;
  --chosen: #2c2925;
  --rule: #34302b;
  --edge: #7a7266;       /* control borders: 3:1 or better against the page */
  --fg: #ede6da;
  --mut: #b0a798;        /* secondary text: 7:1 or better */
  --ph: #9a9184;         /* placeholder */
  --pull: #e3a857;
  --lost: #9db0d0;
  --ok: #9db58a;
  --err: #f0a090;
  --track: #221f1b;
  --field: #0f0e0c;
  --head: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf8f4;
    --raise: #f1ede5;
    --chosen: #e6e0d4;
    --rule: #ddd6ca;
    --edge: #857b6d;
    --fg: #1f1c18;
    --mut: #504940;
    --ph: #6b6358;
    --pull: #94560a;
    --lost: #3d5f8f;
    --ok: #46702f;
    --err: #a3241c;
    --track: #ebe6dd;
    --field: #ffffff;
  }
}
/* the rating screen comes straight after the black sit screen, so it stays dark whatever the device setting */
/* on the dark screens around a sit, the main button is outlined rather than a bright block */
html.dim button.primary { background: var(--chosen); color: var(--fg); border-color: var(--fg); }
html.dim {
  color-scheme: dark;
  --bg: #000;
  --raise: #141210;
  --chosen: #2c2925;
  --rule: #34302b;
  --edge: #7a7266;
  --fg: #ede6da;
  --mut: #b0a798;
  --ph: #9a9184;
  --pull: #e3a857;
  --lost: #9db0d0;
  --ok: #9db58a;
  --err: #f0a090;
  --track: #221f1b;
  --field: #0f0e0c;
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }   /* follows iOS Larger Text */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--sans);
  line-height: 1.5;
  max-width: 38rem;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 1.5rem) 1.25rem calc(env(safe-area-inset-bottom) + 3rem);
}
h1, h2 { font-family: var(--head); font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 1rem; }
p { margin: 0 0 0.5rem; max-width: 34rem; }
a { color: var(--fg); text-underline-offset: 3px; }
.mut { color: var(--mut); }
.small { font-size: 0.875rem; }
.help { margin-top: 1rem; }
.hide { display: none !important; }
[hidden] { display: none !important; }
.kbd-only { display: none; }
@media (pointer: fine) { .kbd-only { display: block; } }
.status { min-height: 1.25rem; font-size: 0.875rem; color: var(--err); margin-top: 0.5rem; }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
h1:focus, h2:focus { outline: none; }

button {
  font: inherit;
  color: var(--fg);
  background: var(--raise);
  border: 1px solid var(--edge);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.75rem;
  cursor: pointer;
}
button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 650; }
button.quiet { background: none; border-color: transparent; color: var(--mut); }
button.link { background: none; border: 0; padding: 0.5rem 0; text-decoration: underline; text-underline-offset: 3px; }
.big { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 1.125rem; margin-top: 0.75rem; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.blocklink { display: flex; align-items: center; min-height: 2.75rem; margin-top: 0.5rem; }

.durs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.durs button, .clar button { padding: 0.5rem 0.25rem; }
[role="radio"][aria-checked="true"] { border: 2px solid var(--fg); background: var(--chosen); font-weight: 650; }
.clar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.clar button { font-size: 1.125rem; }

details > summary { cursor: pointer; min-height: 2.75rem; padding: 0.5rem 0; }
.settings { margin-top: 0.75rem; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.5rem 0; font-size: 1rem; color: var(--fg); }
.check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: 0.125rem; flex: none; accent-color: var(--fg); }

/* summary and charts */
.sumline { margin: 0 0 0.5rem; }
.charts { display: grid; gap: 1rem; margin-top: 1rem; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5rem; font-size: 0.875rem; color: var(--mut); margin-bottom: 0.25rem; }
.chart-head b { color: var(--fg); font-weight: 600; }
.chart svg { display: block; width: 100%; height: 4rem; overflow: visible; }

/* svg colors come from classes, so they follow light and dark */
.s-pull { stroke: var(--pull); } .f-pull { fill: var(--pull); }
.s-lost { stroke: var(--lost); } .f-lost { fill: var(--lost); }
.s-ok { stroke: var(--ok); } .f-ok { fill: var(--ok); }
.s-mut { stroke: var(--mut); } .s-rule { stroke: var(--rule); } .f-track { fill: var(--track); }

/* history */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.list li:first-child { border-top: 0; }
.sit-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0 0.75rem; }
.sit-row > div { flex: 1 1 12rem; }
.sit-when { font-weight: 600; }
.sit-counts { color: var(--mut); }
.sit-counts .p { color: var(--pull); }
.sit-counts .l { color: var(--lost); }
.del { background: none; border: 1px solid transparent; color: var(--mut); font-size: 0.875rem; min-width: 2.75rem; flex: none; }
.note { font-size: 0.875rem; color: var(--mut); margin: 0.5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.strip-wrap { margin: 0.5rem 0 0.25rem; }
.strip { display: block; width: 100%; height: 1.125rem; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 0.5rem; }
.key { display: inline-block; width: 3px; height: 0.875rem; vertical-align: middle; }
.key-p { background: var(--pull); height: 0.5rem; }
.key-l { background: var(--lost); width: 5px; }
.key-m { width: 0; border-left: 1px dashed var(--mut); }

/* forms */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.field { margin-top: 0.75rem; }
label { display: block; font-size: 0.875rem; color: var(--mut); margin-bottom: 0.25rem; }
input, textarea {
  font: inherit;
  width: 100%;
  background: var(--field);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
}
textarea { min-height: 4.5rem; resize: vertical; }
::placeholder { color: var(--ph); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--err); }
.err { color: var(--err); font-size: 0.875rem; margin: 0.25rem 0 0; }
.err:empty { display: none; }

/* sit screen: always black, laid out as a column so nothing overlaps at large text sizes */
#sitView {
  position: fixed; inset: 0; z-index: 10; outline: none;
  display: flex; flex-direction: column;
  background: #000; color: #8a857c;
  padding: calc(env(safe-area-inset-top) + 0.75rem) min(1rem, 4vw) calc(env(safe-area-inset-bottom) + 1rem);
  touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow-y: auto; overscroll-behavior: contain;
}
#sitView.tall { touch-action: pan-y pinch-zoom; } /* large text on a short screen: scroll rather than overlap */
#flash { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
#zoneLine { position: fixed; left: 0; right: 0; top: 50%; border-top: 1px dashed #3a3631; pointer-events: none; }
#sitTop { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: min(1rem, 4vw); flex: none; pointer-events: none; }
#sitTop button { pointer-events: auto; }
#sitView button { background: #0d0d0d; border-color: #333; color: #8a857c; font-size: 1rem; padding: 0.5rem min(1rem, 4vw); }
#sitView :focus-visible { outline-color: #8a857c; }
.hold { position: relative; overflow: hidden; min-width: min(5.5rem, 30vw); }
.hold .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #7a6038; }
.hold .lbl { position: relative; }
.hold.held .lbl { color: #f4efe6; } /* readable over the fill while held */
.prompt {
  position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 4.25rem);
  background: #0d0d0d; border: 1px solid #333; border-radius: 0.75rem; padding: 1rem;
  color: #8a857c; width: min(18rem, calc(100vw - 2rem)); text-align: left;
}
.prompt.at-right { right: 1rem; }
.prompt.at-left { left: 1rem; }
.prompt p { margin: 0 0 0.75rem; }
.prompt .row button { flex: 1; }
.zone-label { flex: none; text-align: center; font-size: 0.875rem; color: #7d786f; padding: 0.5rem 0; }
#sitMid {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; color: #7d786f; position: relative; z-index: 1;
}
#clock { font-size: min(2.75rem, 16vw); font-variant-numeric: tabular-nums; color: #6e6a63; font-weight: 300; padding: 0 0.5rem; }
#clock.done { color: #8a7a5a; }
#sitHelp { font-size: 0.9375rem; margin-top: 1rem; line-height: 1.5; max-width: 22rem; transition: opacity 2s; }
#sitView.zones #clock, #sitView.zones #sitHelp { background: #000; } /* keep the zone line from crossing text */
#sitNotice { flex: none; min-height: 1.5em; margin: 0 auto 0.5rem; text-align: center; font-size: 0.9375rem; color: #8a857c; max-width: 24rem; position: relative; z-index: 1; }
#sitMark { flex: none; margin: 0; max-width: none; min-height: 1.5em; text-align: center; font-size: 0.9375rem; color: #7d786f; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#sitMark.peek { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#kbButtons { position: absolute; left: 1rem; bottom: calc(env(safe-area-inset-bottom) + 3.5rem); display: flex; gap: 0.5rem; z-index: 3; }
.sr-focusable { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-focusable:focus, .sr-focusable:focus-visible { position: static; width: auto; height: auto; margin: 0; padding: 0.5rem 1rem; clip: auto; overflow: visible; border: 1px solid #333; }
#resumeCover {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: #000; color: #8a857c; text-align: center; padding: 2rem; font-size: 1.0625rem;
}

/* toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 1rem);
  z-index: 20; background: var(--chosen); color: var(--fg); border: 1px solid var(--edge); border-radius: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem; display: flex; gap: 0.75rem; align-items: center; width: max-content; max-width: 92vw;
}

button.link.inline { display: inline; min-height: 0; padding: 0; font: inherit; color: var(--fg); }
body.toasting { padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); }
#rTrim, #clarClear { display: block; margin: 0 0 0.5rem; min-height: 2.75rem; }
#rTrim.hide, #clarClear.hide { display: none; }

@media (max-width: 22rem) {
  .durs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #flash, #sitHelp, #sitMark { transition: none; }
}
@media (min-width: 40rem) {
  .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}