/* wae. — the reaction band, the timeline strip and the why? card.
 *
 * ONE canonical copy, shared by the web app (app/static/index.html) and the Chrome side panel.
 * Both surfaces show the same moment in the same shapes, so they must not drift apart.
 *
 * The extension cannot link this over the network — MV3 forbids remote code — so
 * scripts/sync_shared.py copies it to extension/shared/ and tests/test_shared_sync.py fails
 * if the two ever diverge. Edit this file, never the copy.
 *
 * .watchband and .timeline default to display:none; each surface turns on what it shows.
 */

  :root {
    --bg: #FBF8F3; --surface: #FFFFFF; --ink: #1A1814; --muted: #7A746A; --faint: #A9A295;
    --line: #E9E3D8; --accent: #E4572E; --accent-deep: #B8401F; --accent-soft: #FDEBE4;
    --text: #1A1A1A;        /* body text */
    --text2: #5F5F5F;        /* secondary: 5.8:1 on the cream background */
    --serif: 'Instrument Serif', Georgia, serif;   /* the "wae." wordmark ONLY */
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kr: 'Noto Sans KR', 'Inter', system-ui, sans-serif;  /* Hangul, so it never falls back oddly */
  }

  /* the band: empty most of the time, one moment at a time, no scrolling */
  /* the band is always present — the video always has a last moment and a next one */
  .watchband { display: none; align-items: center; justify-content: space-between; gap: 14px;
               height: 72px; padding: 0 16px; border: 1.5px solid var(--line); background: var(--surface); }
  .watchband .wleft { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .watchband .wrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .watchband .wtag { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text);
                     min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     transition: opacity .3s ease; }
  .watchband .wen { font-size: 13px; color: var(--text2); line-height: 1.35;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .3s ease; }
  /* idle: the moment that just passed stays, faded, still openable */
  .watchband.idle .wtag, .watchband.idle .wen { opacity: .5; }
  .watchband.before .wtag { font-weight: 500; color: var(--text2); }
  .watchband .wnext { flex: 0 0 auto; font-size: 13px; color: var(--text2); white-space: nowrap;
                      font-variant-numeric: tabular-nums; }
  .watchband .whychip { flex: 0 0 auto; border: 1.5px solid var(--accent); color: var(--accent-deep);
                        background: transparent; border-radius: 999px; font: 600 13px var(--sans);
                        height: 30px; padding: 0 13px; cursor: pointer; }
  .watchband .whychip:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

  /* every tagged moment, on the full duration, under the player */
  .timeline { display: none; position: relative; align-items: center; height: 18px; }
  .timeline .track { position: relative; height: 3px; width: 100%; background: var(--line); }
  .timeline .track button { position: absolute; top: 50%; width: 11px; height: 11px; padding: 0;
                            margin: -5.5px 0 0 -5.5px; border-radius: 50%; cursor: pointer;
                            border: 1.5px solid var(--accent); background: var(--bg);
                            box-shadow: 0 0 0 3px var(--bg); transition: transform .12s ease; }
  /* the stretch that has not been annotated yet — faint, so the strip reads as 'more coming'
     rather than as 'this is all there is' */
  .timeline .track .pending { position: absolute; top: 0; bottom: 0; right: 0;
                              background: var(--line); opacity: .55; }
  .timeline .track button.passed { background: var(--accent); }
  .timeline .track button.review { border-style: dashed; }
  .timeline .track button:hover { transform: scale(1.35); }
  .timeline .tip { position: absolute; bottom: 20px; padding: 5px 9px; background: var(--ink); color: var(--bg);
                   font-size: 12px; font-weight: 500; border-radius: 4px; white-space: nowrap;
                   pointer-events: none; opacity: 0; transform: translateX(-50%); transition: opacity .12s ease;
                   max-width: 320px; overflow: hidden; text-overflow: ellipsis; z-index: 5; }
  .timeline .tip.show { opacity: 1; }

  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 560px; margin: 0 auto;
           background: var(--surface); border: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(26,24,20,.18);
           padding: 14px 22px 22px; transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
           max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
  .sheet.open { transform: translateY(0); }
  .sheet .handle { width: 36px; height: 4px; border-radius: 999px; background: var(--line); align-self: center; }
  .sheet .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .sheet .label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
  .sheet .term { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .sheet .term .r { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
  .sheet .term .k { font-family: var(--kr); font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--text2); }
  .sheet .lit { font-size: 13px; color: var(--text2); font-style: normal; }
  .sheet .quotes { display: flex; flex-direction: column; gap: 10px; }
  .sheet .quote { border-left: 3px solid var(--line); padding-left: 12px; }
  .sheet .quote .q { font-family: var(--kr); font-size: 15px; line-height: 1.5; color: var(--text); }
  .sheet .quote .g { font-size: 13px; line-height: 1.45; color: var(--text2); margin-top: 2px; }
  /* Reads as a control, not as a stray glyph: in Live this is the card's only visible way out,
     and Esc alone is not an affordance. 44px touch target, kept. */
  .sheet .close { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center;
                  justify-content: center; margin: -8px -8px 0 0; cursor: pointer;
                  border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface);
                  color: var(--text2); }
  .sheet .close:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .sheet .close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sheet .headline { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--text); text-wrap: pretty; }
  .sheet .rows { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
  .sheet .row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
  .sheet .row .l { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); padding-top: 5px; }
  .sheet .row .t { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .sheet .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; color: var(--text2); }