/* reminder.hankelsner.tech — house look: light default, dark via [data-theme],
   trust-blue accent. Every colour comes from /shared/hankelsner-ui-tokens.css;
   nothing here hardcodes a hex that would break the dark switch. */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` ATTRIBUTE must always win.
   The browser hides [hidden] with a UA rule of the lowest possible priority, so
   ANY author rule that sets `display` on the same element silently un-hides it.
   That is not theoretical: `.modal { display: grid }` and `.banner { display:
   flex }` beat it, so the modal's full-screen scrim sat over the whole page
   from first paint -- the page looked washed out, an empty modal card floated
   over the textarea, and the overlay swallowed every click. One global rule
   instead of remembering it per component, because this app toggles `hidden` on
   26 elements and the next one added would have hit the same trap. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
h2 { font-size: 1.12rem; }
p { margin: 0 0 .8rem; }
code { font-family: var(--mono); font-size: .9em; background: var(--inset);
       padding: .1em .35em; border-radius: 5px; }
.dim { color: var(--dim); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--surface);
  padding: .6rem 1rem; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(.8rem, 3vw, 2rem);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink); }
.brand-text { font-weight: 650; letter-spacing: -.02em; }
.brand-dim { color: var(--dim); font-weight: 450; }
@media (max-width: 560px) { .brand-dim { display: none; } }
.topbar-right { display: flex; align-items: center; gap: .5rem; }
.whoami { color: var(--dim); font-size: .9rem; }
.icon-btn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer; font-size: 1rem;
}
.icon-btn:hover { border-color: var(--line-2); }

/* ---- layout ---- */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
       padding: clamp(1rem, 3vw, 2rem); }
.view { animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1rem, 2.4vw, 1.4rem); box-shadow: var(--shadow); margin-bottom: 1rem;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .6rem; }
.card-danger { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }

/* ---- hero / landing ---- */
.hero { text-align: center; padding: clamp(1rem, 5vw, 3rem) 0 1.4rem; }
.lede { color: var(--ink-2); font-size: 1.06rem; max-width: 46rem; margin: 0 auto; }
.try-card { max-width: 46rem; margin: 0 auto 1.6rem; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
       gap: 1rem; margin: 2rem 0; }
.how-step { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.1rem; }
.how-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .85rem;
  margin-bottom: .5rem; }
.how-step p { color: var(--ink-2); font-size: .94rem; margin: 0; }
.cta-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }

/* ---- forms ---- */
.form-card { max-width: 27rem; margin: clamp(1rem, 5vh, 3rem) auto; }
.sub { color: var(--ink-2); font-size: .94rem; }
.field-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2);
  margin: .85rem 0 .3rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .6rem .7rem;
}
textarea { resize: vertical; font-family: inherit; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
input[type="time"] { width: auto; min-width: 8rem; }
.row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; }
.row-tight { margin-top: .3rem; }
.hint { color: var(--dim); font-size: .86rem; }
.form-error, .form-ok {
  border-radius: var(--r-sm); padding: .55rem .7rem; font-size: .9rem; margin: .8rem 0 0;
}
.form-error { background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.form-ok { background: var(--ok-soft); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.alt { margin: 1rem 0 0; font-size: .92rem; color: var(--dim); text-align: center; }

/* ---- buttons ---- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--r-sm);
  padding: .58rem 1rem; border: 1px solid transparent; transition: filter .12s, border-color .12s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.btn-danger { background: var(--warn); color: #fff; }
.btn-block { width: 100%; margin-top: 1rem; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.02rem; }
.btn-sm { padding: .32rem .7rem; font-size: .85rem; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline; }

/* ---- proposal table ---- */
.proposal { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.prop-item {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: start;
  padding: .7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); margin-bottom: .55rem;
}
.prop-label { font-weight: 600; }
.prop-when { color: var(--ink-2); font-size: .9rem; }
.prop-times { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.time-chip {
  font-family: var(--mono); font-size: .84rem; background: var(--accent-soft);
  color: var(--accent); border-radius: var(--r-pill); padding: .12rem .55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.prop-rate { color: var(--dim); font-size: .82rem; white-space: nowrap; }
/* Informational, NOT an error: "merged 2 identical entries for ketorolac" is
   the parser telling you it did the right thing. In warn-red it read as a
   failure on a screen whose whole job is to be trusted with dose times. */
.prop-note { color: var(--accent); font-size: .86rem; margin-top: .3rem;
  background: var(--accent-soft); border-radius: var(--r-sm); padding: .3rem .55rem;
  display: inline-block; }
.prop-actions { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

/* ---- reminder list ---- */
.rem-list { display: flex; flex-direction: column; gap: .55rem; }
.rem {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem .85rem;
  background: var(--surface-2);
}
.rem.off { opacity: .55; }
.rem-label { font-weight: 600; }
.rem-when { color: var(--ink-2); font-size: .9rem; }
.rem-next { color: var(--dim); font-size: .84rem; }
.rem-tools { display: flex; gap: .35rem; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
.empty { color: var(--dim); text-align: center; padding: 1.4rem 0; }

/* ---- banners, pills, log, toast ---- */
.banner {
  border-radius: var(--r-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .95rem;
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
}
.banner-warn { background: var(--warn-soft); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill { font-size: .82rem; color: var(--ink-2); background: var(--inset);
  border-radius: var(--r-pill); padding: .15rem .7rem; border: 1px solid var(--line); }
.log { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.log-row { display: flex; gap: .6rem; align-items: baseline; padding: .35rem .1rem;
  border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: 0; }
.log-when { font-family: var(--mono); font-size: .82rem; color: var(--dim); white-space: nowrap; }
.log-what { flex: 1; min-width: 0; }
.log-tag { font-size: .76rem; border-radius: var(--r-pill); padding: .05rem .5rem; }
.log-ok { background: var(--ok-soft); color: var(--ok); }
.log-no { background: var(--warn-soft); color: var(--warn); }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .65rem 1.1rem;
  border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: 60; font-size: .93rem;
  max-width: min(92vw, 34rem);
}

/* ---- modal ---- */
.modal { position: fixed; inset: 0; background: rgba(10,18,28,.55); z-index: 40;
  display: grid; place-items: center; padding: 1rem; }
.modal-card { background: var(--surface); border-radius: var(--r); padding: 1.3rem;
  width: min(30rem, 100%); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }

/* ---- phone box ---- */
.phone-state { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-no { background: var(--warn); }
.phone-num { font-family: var(--mono); }
.code-input { font-family: var(--mono); font-size: 1.3rem; letter-spacing: .3em;
  text-align: center; }

.foot { text-align: center; color: var(--dim); font-size: .86rem;
  padding: 1.4rem 1rem 2rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }