/* DV42 · the history tape — a frosted glass card in the calculator's glass language: translucent, a hairline of
   light on its edge, a soft shadow under it. Its inks come from style.css (--display-ink and friends), so it follows
   html[data-tone]; graphite is dark glass. Every value has a fallback, so the panel also works without style.css.
   It fits every screen by itself (the same two queries are SHEET_QUERY / SIDE_QUERY in history.js):
     phones, portrait          a bottom sheet over a scrim, up to 70 % of the height, its list scrolls inside
     phones, landscape         a side sheet on the right, full height
     tablets, laptops, desks   docked in its container (put that beside the calculator); its height is capped at the
                               calculator's (--ch-dock-h, measured from mount's `anchor` option)

   1 tokens     2 the card and its motion     3 head and empty state     4 the rows     5 sheets     6 tones
   7 reduced motion */

/* ---- 1. tokens ---- */
.ch-panel {
  --ch-ink: var(--display-ink, #1D1E23);
  --ch-ink-muted: color-mix(in srgb, var(--ch-ink) 58%, transparent);
  --ch-glass: rgb(255 255 255 / .46);
  --ch-glass-deep: rgb(255 255 255 / .22);
  --ch-edge: rgb(255 255 255 / .78);
  --ch-rule: rgb(29 30 35 / .08);
  --ch-row-hover: rgb(255 255 255 / .38);
  --ch-row-press: rgb(255 255 255 / .6);
  --ch-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 30px 60px -28px rgb(30 30 60 / .38), 0 8px 20px -12px rgb(30 30 60 / .2);
  --ch-focus: var(--focus, #6B47FF);
  --ch-radius: 28px;
  --ch-pad: 18px;
  --ch-max-h: var(--ch-dock-h, min(62vh, 520px));
  --ch-dock-w: 100%;
  --ch-sheet-h: 70dvh;
  --ch-side-w: min(380px, 48vw);
  --ch-scrim: rgb(20 20 30 / .28);
  --ch-font-display: var(--font-display, 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif);
  --ch-font-body: var(--font-body, 'Inter', ui-sans-serif, system-ui, sans-serif);
  --ch-ease: cubic-bezier(.2, .8, .2, 1);
  --ch-in: 320ms;
  --ch-out: 200ms;
}

/* ---- 2. the card and its motion (transform and opacity only) ---- */
.ch-panel {
  position: relative; display: flex; flex-direction: column; width: var(--ch-dock-w); max-width: 100%; max-height: var(--ch-max-h); min-height: 0;
  border-radius: var(--ch-radius); color: var(--ch-ink); font-family: var(--ch-font-body);
  background: linear-gradient(180deg, var(--ch-glass), var(--ch-glass-deep));
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: var(--ch-shadow), inset 0 0 0 1px var(--ch-edge);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: 50% 100%; visibility: hidden; pointer-events: none;
  transition: opacity var(--ch-out) ease, transform var(--ch-out) var(--ch-ease), visibility 0s linear var(--ch-out);
}
.ch-panel[data-open="true"] {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--ch-in) ease, transform var(--ch-in) var(--ch-ease), visibility 0s;
}
.ch-panel:focus { outline: none; }
.ch-panel:focus-visible { outline: 2px solid var(--ch-focus); outline-offset: 3px; }

/* ---- 3. head and empty state ---- */
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--ch-pad) var(--ch-pad) 10px calc(var(--ch-pad) + 4px);
  border-bottom: 1px solid var(--ch-rule); }
.ch-title { margin: 0; font: 600 15px/1.2 var(--ch-font-display); letter-spacing: -.005em; }
.ch-tools { display: flex; align-items: center; gap: 6px; }
.ch-clear { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 13px/1 var(--ch-font-body); color: var(--ch-ink);
  background: var(--ch-row-hover); box-shadow: inset 0 0 0 1px var(--ch-rule); cursor: pointer; transition: opacity .15s, background-color .15s; }
.ch-clear:hover { background: var(--ch-row-press); }
.ch-clear:disabled { opacity: .4; cursor: default; }
.ch-clear:focus-visible, .ch-close:focus-visible { outline: 2px solid var(--ch-focus); outline-offset: 2px; }
.ch-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--ch-ink);
  background: transparent; cursor: pointer; transition: background-color .15s; }
.ch-close:hover { background: var(--ch-row-hover); }
.ch-close svg { width: 18px; height: 18px; }
.ch-empty { margin: 0; padding: 44px var(--ch-pad) 48px; text-align: center; font: 400 15px/1.4 var(--ch-font-body); color: var(--ch-ink-muted); }
.ch-empty[hidden], .ch-list[hidden] { display: none; }
.ch-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 4. the rows: the expression muted and wrapping, the result large and right-aligned ---- */
.ch-list { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 6px 8px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ch-item + .ch-item { border-top: 1px solid var(--ch-rule); }
.ch-row { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 16px;
  background: transparent; color: inherit; text-align: right; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; transition: background-color .15s, transform .15s var(--ch-ease); }
.ch-row:hover { background: var(--ch-row-hover); }
.ch-row.is-pressing, .ch-row:active { background: var(--ch-row-press); transform: scale(.985); }
.ch-row:focus { outline: none; }
.ch-row:focus-visible { outline: 2px solid var(--ch-focus); outline-offset: -2px; }
.ch-expr { max-width: 100%; font: 400 14px/1.35 var(--ch-font-display); color: var(--ch-ink-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ch-value { max-width: 100%; font: 300 26px/1.15 var(--ch-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ch-row.is-new { animation: ch-arrive var(--ch-in) var(--ch-ease); }
@keyframes ch-arrive { from { opacity: 0; transform: translateY(-8px); } }

/* ---- 5. sheets: phones get a bottom sheet (portrait) or a side sheet (landscape) over a scrim ---- */
.ch-scrim { display: none; }
@media (max-width: 719px), (max-height: 500px) and (orientation: landscape) {
  .ch-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: var(--ch-scrim); opacity: 0; visibility: hidden;
    transition: opacity var(--ch-out) ease, visibility 0s linear var(--ch-out); }
  .ch-scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity var(--ch-in) ease, visibility 0s; }
  .ch-panel { position: fixed; z-index: 61; --ch-glass: rgb(255 255 255 / .72); --ch-glass-deep: rgb(255 255 255 / .58); }
}
@media (max-width: 719px) {
  .ch-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: var(--ch-sheet-h); border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(104%); transform-origin: 50% 100%; }
  /* the grabber: a hint that this is a sheet */
  .ch-panel::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px;
    background: currentColor; opacity: .22; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* comes after the bottom sheet on purpose: a small phone on its side (568 × 320) matches both */
  .ch-panel { top: 0; right: 0; bottom: 0; left: auto; width: var(--ch-side-w); max-height: none; height: 100dvh;
    border-radius: var(--ch-radius) 0 0 var(--ch-radius); padding-bottom: 0; padding-right: env(safe-area-inset-right);
    transform: translateX(104%); transform-origin: 100% 50%; }
  .ch-panel::before { display: none; }
}

/* ---- 6. tones: graphite is dark glass; amber's ink is umber (from style.css) ---- */
:root[data-tone="graphite"] .ch-panel, .ch-panel[data-tone="graphite"] {
  --ch-ink: var(--graphite-100, #E9EAEE);
  --ch-glass: rgb(44 46 54 / .62);
  --ch-glass-deep: rgb(22 23 27 / .5);
  --ch-edge: rgb(255 255 255 / .14);
  --ch-rule: rgb(255 255 255 / .08);
  --ch-row-hover: rgb(255 255 255 / .06);
  --ch-row-press: rgb(255 255 255 / .12);
  --ch-scrim: rgb(0 0 0 / .45);
  --ch-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 30px 60px -24px rgb(0 0 0 / .7), 0 8px 20px -12px rgb(0 0 0 / .5);
}
:root[data-tone="amber"] .ch-panel, .ch-panel[data-tone="amber"] {
  --ch-ink: var(--umber-900, #2B1E10);
  --ch-glass: rgb(255 248 236 / .5);
  --ch-glass-deep: rgb(255 236 206 / .24);
  --ch-rule: rgb(43 30 16 / .09);
}
.ch-panel[data-tone="classic"], .ch-panel[data-tone="crystal"] { --ch-ink: var(--ink-900, #1D1E23); }

@media (max-width: 719px), (max-height: 500px) and (orientation: landscape) {
  :root[data-tone="graphite"] .ch-panel, .ch-panel[data-tone="graphite"] { --ch-glass: rgb(40 42 50 / .86); --ch-glass-deep: rgb(24 25 30 / .8); }
  :root[data-tone="amber"] .ch-panel, .ch-panel[data-tone="amber"] { --ch-glass: rgb(255 248 236 / .8); --ch-glass-deep: rgb(255 238 214 / .66); }
}

/* ---- 7. reduced motion: no slide, no scale; a short fade keeps the change visible ---- */
@media (prefers-reduced-motion: reduce) {
  .ch-panel, .ch-panel[data-open="true"], .ch-scrim { transform: none; transition-duration: 1ms, 1ms, 0s; }
  .ch-row { transition: none; }
  .ch-row.is-pressing, .ch-row:active { transform: none; }
  .ch-row.is-new { animation: none; }
}