/* 健康關懷 · 心律量測
   Warm printed-pamphlet aesthetic: rice-paper ground, deep ink, a single persimmon
   accent. Sized for volunteers in their seventies, working one-handed on a phone or
   a tablet, often standing, often outdoors. */

@layer base, layout, components, steps;

@layer base {
  :root {
    --paper:       oklch(0.972 0.012 82);
    --paper-deep:  oklch(0.945 0.017 80);
    --ink:         oklch(0.265 0.022 265);
    --ink-soft:    oklch(0.455 0.020 265);
    --ink-faint:   oklch(0.615 0.016 80);
    --rule:        oklch(0.875 0.018 80);

    --persimmon:      oklch(0.585 0.155 42);
    --persimmon-deep: oklch(0.480 0.145 40);
    --persimmon-wash: oklch(0.945 0.035 55);
    --jade:           oklch(0.520 0.085 162);
    --jade-wash:      oklch(0.945 0.030 165);

    --serif: "Noto Serif TC", "Songti TC", "PingFang TC", "Microsoft JhengHei", serif;
    --sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

    /* generous, because these are read at arm's length by older eyes */
    --step-0: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
    --step-1: clamp(1.1rem, 1.02rem + 0.45vw, 1.4rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.8vw, 1.95rem);
    --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.8rem);
    --step-4: clamp(2.6rem, 2.0rem + 2.6vw, 4.2rem);

    --gap-xs: 0.4rem;
    --gap-s:  0.8rem;
    --gap-m:  1.5rem;
    --gap-l:  2.6rem;
    --gap-xl: 4rem;

    --edge: clamp(1rem, 4vw, 3rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }
  html, body { height: 100%; }

  body {
    margin: 0;
    background: var(--paper);
    /* faint ledger ruling, the way a printed form would be set */
    background-image: repeating-linear-gradient(
      to bottom, transparent 0 39px,
      color-mix(in oklch, var(--rule) 45%, transparent) 39px 40px);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-1);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* a mis-swipe mid-measurement should not reload the page */
    overscroll-behavior-y: contain;
  }

  h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0; }
  h1 { font-size: var(--step-3); letter-spacing: 0.02em; }
  h2 { font-size: var(--step-2); }
  p  { margin: 0 0 var(--gap-s); }
  b, strong { font-weight: 700; }

  :focus-visible {
    outline: 3px solid var(--persimmon);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  .shell {
    min-height: 100%;
    min-height: 100dvh;          /* keeps the action bar clear of mobile browser chrome */
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .masthead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gap-xs) var(--gap-m);
    padding: clamp(0.7rem, 2vw, 1.4rem) var(--edge);
    padding-top: max(0.7rem, env(safe-area-inset-top));
    border-bottom: 1px solid var(--rule);
    background: color-mix(in oklch, var(--paper) 88%, var(--paper-deep));
  }
  .masthead .mark {
    font-family: var(--serif);
    font-size: var(--step-2);
    letter-spacing: 0.06em;
  }
  .masthead .mark em { font-style: normal; color: var(--persimmon); }
  .masthead .sub {
    font-size: var(--step-0);
    color: var(--ink-faint);
    letter-spacing: 0.1em;
  }
  .masthead .spacer { margin-left: auto; }

  .stage {
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.2rem, 4vw, 3.5rem) var(--edge);
    align-items: start;
    max-width: 1500px;
    width: 100%;
    margin-inline: auto;
  }

  .actionbar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--gap-s);
    align-items: center;
    padding: clamp(0.7rem, 2vw, 1.2rem) var(--edge);
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: color-mix(in oklch, var(--paper) 92%, var(--paper-deep));
  }
  .actionbar .hint {
    font-size: var(--step-0);
    color: var(--ink-faint);
    max-width: 46ch;
  }
  .actionbar .grow { margin-left: auto; }

  /* Phones are not a shrunken desktop. The rail turns into one progress line, the
     hint moves above the controls so it can never squeeze them, and the primary
     action takes the full width so it can be hit without looking. */
  @media (max-width: 900px) {
    .stage { grid-template-columns: 1fr; gap: var(--gap-m); }
  }

  @media (max-width: 640px) {
    .masthead { gap: 0 var(--gap-s); }
    .masthead .mark { font-size: var(--step-1); }
    .masthead .spacer { display: none; }
    .masthead .sub { width: 100%; }

    .actionbar {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "hint hint" "back next";
      gap: var(--gap-xs) var(--gap-s);
    }
    .actionbar .hint { grid-area: hint; max-width: none; }
    .actionbar .grow { display: none; }
    .actionbar #btnBack { grid-area: back; }
    .actionbar #btnNext { grid-area: next; width: 100%; }
  }
}

@layer components {
  /* the journey rail — the one piece of the interface people remember */
  .rail { list-style: none; margin: 0; padding: 0; position: relative; }
  .rail::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 1.6rem;
    bottom: 1.6rem;
    width: 2px;
    background: var(--rule);
  }
  .rail li {
    position: relative;
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    gap: var(--gap-s);
    align-items: center;
    padding: 0.55rem 0;
    color: var(--ink-faint);
    font-size: var(--step-0);
  }
  .rail .num {
    width: 2.7rem; height: 2.7rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--rule);
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--ink-faint);
    transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
                color 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .rail li[data-state="done"] { color: var(--ink-soft); }
  .rail li[data-state="done"] .num {
    background: var(--jade-wash);
    border-color: var(--jade);
    color: var(--jade);
  }
  .rail li[data-state="now"] { color: var(--ink); font-weight: 700; }
  .rail li[data-state="now"] .num {
    background: var(--persimmon);
    border-color: var(--persimmon);
    color: var(--paper);
    transform: scale(1.12);
  }

  @media (max-width: 900px) {
    /* one horizontal line of steps; every number stays visible so progress is always
       readable, and only the current step is named */
    .rail {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
      padding-bottom: var(--gap-xs);
    }
    .rail::before {
      left: 1rem; right: 1rem; top: 50%; bottom: auto;
      height: 2px; width: auto;
      transform: translateY(-50%);
    }
    .rail li { grid-template-columns: auto; padding: 0; gap: 0; }
    .rail .num { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
    .rail li .label { display: none; }
    .rail li[data-state="now"] { display: flex; align-items: center; gap: var(--gap-xs); }
    .rail li[data-state="now"] .label {
      display: block;
      white-space: nowrap;
      background: var(--paper);
      padding-inline: var(--gap-xs);
    }
  }

  .btn {
    font-family: var(--sans);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.8em 1.6em;
    min-height: 64px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    touch-action: manipulation;          /* drop the double-tap zoom delay */
    transition: background 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease), transform 0.12s var(--ease);
  }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .btn-go {
    background: var(--persimmon);
    color: var(--paper);
    box-shadow: 0 1px 0 var(--persimmon-deep);
  }
  .btn-go:hover:not(:disabled) { background: var(--persimmon-deep); }

  .btn-quiet {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--rule);
  }
  .btn-quiet:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }

  .btn-text {
    background: none; border: none;
    min-height: 44px;
    padding: 0.4em 0.2em;
    color: var(--ink-soft);
    font-size: var(--step-0);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .note {
    font-size: var(--step-0);
    color: var(--ink-faint);
    line-height: 1.7;
  }

  .alarm {
    border-left: 5px solid var(--persimmon);
    background: var(--persimmon-wash);
    padding: var(--gap-s) var(--gap-m);
    margin-bottom: var(--gap-m);
    font-size: var(--step-0);
  }
  .alarm.good { border-left-color: var(--jade); background: var(--jade-wash); }
}

@layer steps {
  .panel { display: none; max-width: 62ch; }
  .panel-wide { max-width: 82ch; }
  .panel[data-active] {
    display: block;
    animation: rise 0.5s var(--ease) both;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  .panel > .kicker {
    font-size: var(--step-0);
    letter-spacing: 0.26em;
    color: var(--persimmon);
    margin-bottom: var(--gap-xs);
  }
  .panel > h1 { margin-bottom: var(--gap-s); }
  .panel > .lede {
    font-size: var(--step-2);
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: var(--gap-l);
    max-width: 34ch;
  }

  /* numbered operating instructions, mirroring the printed deck */
  ol.howto { counter-reset: s; list-style: none; margin: 0 0 var(--gap-l); padding: 0; }
  ol.howto li {
    counter-increment: s;
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: var(--gap-s);
    padding: var(--gap-s) 0;
    border-top: 1px solid var(--rule);
  }
  ol.howto li:last-child { border-bottom: 1px solid var(--rule); }
  ol.howto li::before {
    content: counter(s);
    font-family: var(--serif);
    font-size: var(--step-2);
    color: var(--persimmon);
    line-height: 1;
  }

  /* measuring */
  .pulse-stage { display: grid; place-items: center; padding: var(--gap-xl) 0; }
  .pulse {
    width: clamp(140px, 42vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--persimmon);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: var(--step-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--persimmon);
    position: relative;
  }
  .pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid var(--persimmon);
    animation: breathe 3.4s var(--ease) infinite;
  }
  @keyframes breathe {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  /* result */
  .headline { display: flex; align-items: baseline; gap: var(--gap-s); margin-bottom: var(--gap-s); }
  .headline .big {
    font-family: var(--serif);
    font-size: var(--step-4);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .headline .unit { font-size: var(--step-1); color: var(--ink-faint); }

  .strip {
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 4px;
    margin-bottom: var(--gap-s);
  }
  .strip svg { display: block; width: 100%; height: clamp(96px, 22vw, 140px); }
  .strip .caption {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
  }

  .tally {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m) var(--gap-l);
    padding: var(--gap-m) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--gap-m);
  }
  .tally div { min-width: 6rem; }
  .tally dt { font-size: var(--step-0); color: var(--ink-faint); letter-spacing: 0.1em; }
  .tally dd {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--step-3);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 640px) {
    .tally { gap: var(--gap-s) var(--gap-m); }
    .tally div { min-width: 5rem; }
    .tally dd { font-size: var(--step-2); }
  }
}