/* RISC-V Lab Questions – layout modelled on translate.google.com: mode chips, a tabbed card with
   two side-by-side panels, a tinted result panel and round action buttons. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --result: #f5f5f5;
  --ink: #202124;
  --muted: #5f6368;
  --line: #dadce0;
  --hover: #f1f3f4;
  --blue: #1a73e8;
  --blue-ink: #1967d2;
  --blue-tint: #e8f0fe;
  --code-bg: #f8f9fa;
  --chip-on-line: #d2e3fc;
  --tag-int: #e6f4ea; --tag-int-ink: #137333;
  --tag-adv: #fce8e6; --tag-adv-ink: #c5221f;
  --ans-bg: #fce8e6; --ans-bg-hover: #fad2cf; --ans-ink: #c5221f; --ans-line: #f6aea9;
  --tag-core: #e8f0fe; --tag-core-ink: #1967d2;
  --term-bg: #ffffff; --term-frame: #e9e9e9; --term-line: #9e9e9e;
  --shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #202124; --surface: #202124; --result: #303134; --ink: #e8eaed; --muted: #9aa0a6;
  --line: #5f6368; --hover: #303134; --blue: #8ab4f8; --blue-ink: #8ab4f8; --blue-tint: #394457;
  --code-bg: #2a2b2e; --chip-on-line: #394457;
  --tag-int: #1e3a2a; --tag-int-ink: #81c995; --tag-adv: #3c2020; --tag-adv-ink: #f28b82;
  --ans-bg: #3c2020; --ans-bg-hover: #4d2626; --ans-ink: #f28b82; --ans-line: #8c3b37;
  --tag-core: #394457; --tag-core-ink: #8ab4f8;
  --term-bg: #17181a; --term-frame: #3c4043; --term-line: #5f6368;
  --shadow: 0 1px 3px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #202124; --surface: #202124; --result: #303134; --ink: #e8eaed; --muted: #9aa0a6;
    --line: #5f6368; --hover: #303134; --blue: #8ab4f8; --blue-ink: #8ab4f8; --blue-tint: #394457;
    --code-bg: #2a2b2e; --chip-on-line: #394457;
    --tag-int: #1e3a2a; --tag-int-ink: #81c995; --tag-adv: #3c2020; --tag-adv-ink: #f28b82;
    --ans-bg: #3c2020; --ans-bg-hover: #4d2626; --ans-ink: #f28b82; --ans-line: #8c3b37;
    --tag-core: #394457; --tag-core-ink: #8ab4f8;
    --term-bg: #17181a; --term-frame: #3c4043; --term-line: #5f6368;
    --shadow: 0 1px 3px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
button { font: inherit; color: inherit; }
code, pre, .mono { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* App bar */
.appbar {
  height: 64px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 24px;
  border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5;
}
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: var(--hover); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; padding-left: 4px; min-width: 0; }
.mark { width: 32px; height: 32px; border-radius: 8px; background: var(--blue); display: grid; place-items: center; flex: none; }
.mark svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
:root[data-theme="dark"] .mark svg { stroke: #202124; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark svg { stroke: #202124; } }
.brand-name { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 16px 24px 40px; }

/* Mode chips (like Text / Images / Documents / Websites) */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--blue-ink);
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--hover); }
.chip[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--chip-on-line); }
.chip .n { color: var(--muted); font-weight: 400; font-size: 13px; }

/* Card with tabs */
.card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; align-items: center; border-bottom: 1px solid var(--line); min-height: 48px; }
.tabs-side { display: flex; align-items: stretch; min-width: 0; padding: 0 8px; gap: 4px; }
.tabs-right { justify-content: flex-start; }
.tab {
  border: 0; background: transparent; color: var(--muted); font-weight: 500; padding: 0 16px; height: 48px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"], .tab-picker { color: var(--blue-ink); border-bottom-color: var(--blue); }
.tab-picker .chev { width: 18px; height: 18px; transition: transform .15s; }
.tab-picker[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tab-meta { display: flex; align-items: center; gap: 6px; padding-left: 4px; min-width: 0; overflow: hidden; }
.round {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.round:hover { background: var(--hover); }
.round:disabled { opacity: .35; cursor: default; background: transparent; }

.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tag.lab { background: var(--hover); color: var(--muted); }
.tag.Intermediate { background: var(--tag-int); color: var(--tag-int-ink); }
.tag.Advanced { background: var(--tag-adv); color: var(--tag-adv-ink); }

/* Picker (like the language list) */
.picker { border-bottom: 1px solid var(--line); padding: 8px 8px 16px; }
.search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; color: var(--muted); border-bottom: 1px solid var(--line); margin: 0 -8px 8px; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; min-width: 0; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 8px; max-height: 60vh; overflow: auto; }
.pick {
  display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; border-radius: 4px;
  padding: 7px 10px; cursor: pointer; color: var(--ink); min-height: 40px;
}
.pick:hover { background: var(--hover); }
.pick .num { width: 28px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.pick .t { flex: 1; min-width: 0; }
.pick .lv { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pick .lv.Intermediate { background: var(--tag-int-ink); }
.pick .lv.Advanced { background: var(--tag-adv-ink); }
.pick[aria-current="true"] { background: var(--blue-tint); color: var(--blue-ink); }
.pick[aria-current="true"] .num { color: var(--blue-ink); }
.picker-empty { color: var(--muted); padding: 16px 10px; }

/* Two panels */
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel { padding: 20px 24px 24px; min-height: 420px; min-width: 0; }
.panel.result { background: var(--result); border-left: 1px solid var(--line); border-radius: 0 0 8px 0; }

.q-title { font-size: 22px; line-height: 1.3; font-weight: 400; margin: 0 0 4px; }
.q-sub { color: var(--muted); margin: 0 0 14px; }
.q-intro { font-size: 15px; margin: 0 0 10px; }
.parts { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: p; }
.parts li { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; }
.parts li:last-child { border-bottom: 1px solid var(--line); }
.parts .letter { font-weight: 500; color: var(--blue-ink); }
.parts .pts { color: var(--muted); font-size: 12px; white-space: nowrap; padding-top: 3px; }
.parts tt, .q-intro tt, .hint tt { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .9em; background: var(--code-bg); padding: 0 3px; border-radius: 3px; }
.parts .center { display: block; margin-top: 2px; }

.box { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.box-head { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 6px; min-height: 40px; }
.box-head .label { padding: 0 10px; font-weight: 500; color: var(--muted); }
.box pre { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.55; overflow-x: auto; background: var(--code-bg); }
.box pre.prose { font-family: Roboto, system-ui, sans-serif; font-size: 14px; }
/* C code: monospace with syntax colours */
.box pre.code-c { font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6; tab-size: 4; padding: 14px 16px; }
.code-c .c-kw { color: #1967d2; font-weight: 500; }
.code-c .c-ty { color: #137333; font-weight: 500; }
.code-c .c-num { color: #b06000; }
.code-c .c-str { color: #c5221f; }
.code-c .c-com { color: #5f6368; font-style: italic; }
.code-c .c-fn { color: #8430ce; }
:root[data-theme="dark"] .code-c .c-kw { color: #8ab4f8; } :root[data-theme="dark"] .code-c .c-ty { color: #81c995; }
:root[data-theme="dark"] .code-c .c-num { color: #fdd663; } :root[data-theme="dark"] .code-c .c-str { color: #f28b82; }
:root[data-theme="dark"] .code-c .c-com { color: #9aa0a6; } :root[data-theme="dark"] .code-c .c-fn { color: #d7aefb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-c .c-kw { color: #8ab4f8; } :root:not([data-theme="light"]) .code-c .c-ty { color: #81c995; }
  :root:not([data-theme="light"]) .code-c .c-num { color: #fdd663; } :root:not([data-theme="light"]) .code-c .c-str { color: #f28b82; }
  :root:not([data-theme="light"]) .code-c .c-com { color: #9aa0a6; } :root:not([data-theme="light"]) .code-c .c-fn { color: #d7aefb; }
}
/* instruction / data format diagrams */
.box-fmt { padding: 14px 14px 12px; background: var(--code-bg); overflow-x: auto; }
.bitfmt { min-width: 300px; }
.bf-row { display: flex; gap: 3px; }
.bf-lab { flex: 0 0 44px; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); align-self: center; text-align: right; padding-right: 6px; }
.bf-cell { min-width: 0; display: flex; }
.bf-num { justify-content: space-between; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--muted); padding: 0 3px 3px; }
.bf-num i { font-style: normal; }
.bf-num i:only-child { margin: 0 auto; }
.bf-f { flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 52px; border-radius: 6px; padding: 0 4px; border: 1px solid transparent; }
.bf-f b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bf-f small { font-size: 10.5px; opacity: .75; }
.bf-c0 { background: #e8f0fe; color: #1967d2; border-color: #d2e3fc; }
.bf-c1 { background: #e6f4ea; color: #137333; border-color: #ceead6; }
.bf-c2 { background: #fef7e0; color: #b06000; border-color: #feefc3; }
.bf-c3 { background: #f3e8fd; color: #8430ce; border-color: #e9d2fd; }
.bf-c4 { background: #fce8e6; color: #c5221f; border-color: #fad2cf; }
.bf-c5 { background: #e4f7fb; color: #007b83; border-color: #cbf0f8; }
:root[data-theme="dark"] .bf-f { background: #303134; border-color: #5f6368; }
:root[data-theme="dark"] .bf-c0 { color: #8ab4f8; } :root[data-theme="dark"] .bf-c1 { color: #81c995; }
:root[data-theme="dark"] .bf-c2 { color: #fdd663; } :root[data-theme="dark"] .bf-c3 { color: #d7aefb; }
:root[data-theme="dark"] .bf-c4 { color: #f28b82; } :root[data-theme="dark"] .bf-c5 { color: #78d9ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bf-f { background: #303134; border-color: #5f6368; }
  :root:not([data-theme="light"]) .bf-c0 { color: #8ab4f8; } :root:not([data-theme="light"]) .bf-c1 { color: #81c995; }
  :root:not([data-theme="light"]) .bf-c2 { color: #fdd663; } :root:not([data-theme="light"]) .bf-c3 { color: #d7aefb; }
  :root:not([data-theme="light"]) .bf-c4 { color: #f28b82; } :root:not([data-theme="light"]) .bf-c5 { color: #78d9ec; }
}
.bf-ex { margin-top: 6px; }
.bf-ex .bf-cell { justify-content: center; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 12px; padding: 4px 2px; border-bottom: 1px dashed var(--line); overflow: hidden; white-space: nowrap; }
.bf-any { color: var(--muted); }
.bf-cap { margin: 10px 0 0 50px; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--ink); }
.hint { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.hint b { color: var(--ink); font-weight: 500; }

.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.q-head .q-title { margin: 0; }

/* Result side */
.result-tabs { display: none; }
.r-label { font-size: 12px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.term { border: 3px double var(--term-line); background: var(--term-frame); padding: 3px; border-radius: 2px; }
.term-screen {
  background: var(--term-bg); border: 1px solid var(--term-line); min-height: 180px; padding: 6px 8px;
  font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.term-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; font-size: 12px; color: var(--muted); }
.term-btn { border: 1px solid var(--term-line); background: var(--term-bg); padding: 0 18px; color: var(--ink); }
.term-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* RVS MEMORY window */
.mem-label { margin-top: 24px; }
.mem-screen {
  background: var(--term-bg); border: 1px solid var(--term-line); max-height: 300px; overflow: auto;
  font-family: "Roboto Mono", "Courier New", ui-monospace, monospace; font-size: 11px; line-height: 1.5;
}
/* Slim pill scrollbars (like Claude Code's) for the memory window and the solution listing.
   Each keeps its own strip, so nothing jumps or gets covered; the pill shows when the box
   appears and while it is scrolled or hovered, and hides 1 s later (.sb is set by app.js). */
.mem-screen::-webkit-scrollbar, .solution::-webkit-scrollbar { width: 10px; height: 10px; }
.mem-screen::-webkit-scrollbar-track, .mem-screen::-webkit-scrollbar-corner,
.solution::-webkit-scrollbar-track, .solution::-webkit-scrollbar-corner { background: transparent; }
.mem-screen::-webkit-scrollbar-thumb, .solution::-webkit-scrollbar-thumb {
  background-color: transparent; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.mem-screen.sb::-webkit-scrollbar-thumb, .solution.sb::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, .45); }
.mem-screen.sb::-webkit-scrollbar-thumb:hover, .solution.sb::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, .75); }
@supports not selector(::-webkit-scrollbar) {
  .mem-screen, .solution { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .mem-screen.sb, .solution.sb { scrollbar-color: rgba(128, 128, 128, .55) transparent; }
}
.mem-screen table { border-collapse: collapse; white-space: pre; min-width: 100%; }
.mem-screen th { text-align: left; font-weight: 400; padding: 0 8px 0 6px; position: sticky; top: 0; background: var(--term-bg); }
.mem-screen thead th { padding-top: 4px; padding-bottom: 2px; }
.mem-screen td { padding: 0 8px 0 6px; }
.mem-screen td:last-child, .mem-screen th:last-child { padding-right: 8px; }
.mem-screen tr.chg td { background: var(--blue-tint); color: var(--blue-ink); }
.mem-bar { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.mem-bar .term-btn { margin-right: 6px; }
.mem-bar .spacer { flex: 1; }
.col-toggle {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink);
  font-size: 12px; padding: 2px 6px; border-radius: 3px; cursor: pointer;
}
.col-toggle:hover { background: var(--hover); }
.col-toggle .box-mark {
  width: 12px; height: 12px; border: 1px solid var(--term-line); background: var(--term-bg); position: relative; flex: none;
}
.col-toggle[aria-checked="true"] .box-mark::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
  border: solid var(--ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.mem-screen table.no-hex .c-hex, .mem-screen table.no-int .c-int,
.mem-screen table.no-flp .c-flp, .mem-screen table.no-txt .c-txt { display: none; }

.reveal { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 360px; gap: 16px; color: var(--muted); }
.reveal svg.big { width: 48px; height: 48px; stroke-width: 1.4; color: var(--muted); }
.reveal p { margin: 0; max-width: 320px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--blue-ink); font-weight: 500; white-space: nowrap;
  text-decoration: none; font-size: 14px;
}
.btn:hover { background: var(--blue-tint); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; padding: 0 24px; }
:root[data-theme="dark"] .btn.primary { color: #202124; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #202124; } }
.btn.primary:hover { box-shadow: var(--shadow); background: var(--blue); }

/* the Answer tabs and the Show answer button are light red */
.tab[data-tab="ans"] {
  align-self: center; height: 34px; margin-left: auto; margin-right: 8px; padding: 0 20px; border-radius: 999px;
  border: 0; background: var(--ans-bg); color: var(--ans-ink);
}
.tab[data-tab="ans"]:hover { background: var(--ans-bg-hover); }
.tab[data-tab="ans"][aria-selected="true"] { background: var(--ans-bg-hover); font-weight: 600; }
#showAns.btn.primary { background: var(--ans-bg); border-color: var(--ans-line); color: var(--ans-ink); }
#showAns.btn.primary:hover { background: var(--ans-bg-hover); }
.btn svg.i { width: 18px; height: 18px; }

.ans-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ans-head .r-label { margin: 0; flex: 1; }
.solution { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; overflow-x: auto; max-height: 520px; }
.solution .c { color: var(--muted); }
.solution .l { color: var(--blue-ink); }
.tests { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tests-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 0 6px; scrollbar-width: none; }
.tests-tabs::-webkit-scrollbar { display: none; }
.tests-tabs .seg { flex: none; border: 0; background: transparent; color: var(--muted); font-weight: 500; height: 40px; padding: 0 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tests-tabs .seg:hover { background: var(--hover); }
.tests-tabs .seg[aria-selected="true"] { color: var(--blue-ink); border-bottom-color: var(--blue); }
.tests-body { padding: 12px 14px 14px; }
.tests-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.tests-in span, .tests-out-label { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; }
.tests-in span { margin-right: 4px; }
.tests-in code { background: var(--blue-tint); color: var(--blue-ink); border-radius: 4px; padding: 2px 8px; font-size: 13px; }
.tests-out-label { margin: 0 0 6px; }
.tests-out { background: var(--code-bg); border-radius: 6px; padding: 8px 10px; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Round action buttons under the card (like History / Saved / Contribute) */
.actions { display: flex; justify-content: center; gap: 40px; margin: 0 0 16px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 500; }
.round.big { width: 56px; height: 56px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.action:hover .round.big { background: var(--hover); }
.action:disabled { opacity: .4; cursor: default; }


.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: #323232; color: #fff;
  padding: 12px 20px; border-radius: 4px; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s;
  max-width: calc(100% - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Narrow screens: panels stack, like the mobile Translate page */
@media (max-width: 900px) {
  /* chip row scrolls sideways instead of wrapping; the edges fade where more chips are hidden */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-left: -24px; margin-right: -24px; padding: 0 24px 4px; scroll-padding: 0 24px; scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips { justify-content: flex-start; }
  .chips .chip { flex: none; }
  .chips .chip:first-child { margin-left: auto; }
  .chips .chip:last-child { margin-right: auto; }
  .chips.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .chips.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
  .chips.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
  .panels { grid-template-columns: 1fr; }
  .panel.result { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
  .panel { min-height: 0; }
  .tabs { grid-template-columns: 1fr; }
  .tabs-right { display: none; }
  .result-tabs { display: flex; margin: -20px -24px 16px; padding: 0 8px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .wrap { padding: 8px 16px 32px; }
  .appbar { padding: 0 4px 0 16px; height: 56px; }
  .brand-name { font-size: 20px; }
  .chips { margin: 4px -16px 12px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .panel { padding: 16px; }
  .result-tabs { margin: -16px -16px 16px; }
  .tab { padding: 0 12px; }
  .tab-meta .tag.lab { display: none; }
  .q-title { font-size: 20px; }
  .parts li { grid-template-columns: 22px 1fr; }
  .parts .pts { grid-column: 2; padding-top: 0; }
  .actions { gap: 28px; margin-bottom: 12px; }
  .bitfmt { min-width: 430px; }
  .bf-lab { flex-basis: 36px; }
  .bf-cap { margin-left: 42px; }
  .round.big { width: 48px; height: 48px; }
  .picker-grid { grid-template-columns: 1fr; max-height: 55vh; }
}
@media print {
  .appbar, .chips, .tabs, .actions, .picker, .toast, #copyLink, #ansView { display: none !important; }
  .card { box-shadow: none; border: 0; }
  .panels { grid-template-columns: 1fr; }
  .panel.result { background: none; border: 0; }
}