/* Yuna's "Swiss" tokens (supreme-court-of-aglend, desktop set 2026-10-27): every colour, face and radius comes from these. */
:root {
  --yuna_bg: #ffffff;
  --yuna_ink: #0a0a0a;
  --yuna_deep: #0a0a0a;
  --yuna_acc: #e3120b;
  --yuna_card: #f3f3f3;
  --yuna_line: #e2e2e2;
  --yuna_muted: #4d4d4d;
  --yuna_strong: #0a0a0a;
  --yuna_on_deep: #ffffff;
  --yuna_on_acc: #ffffff;
  --yuna_head: 'Instrument Sans', system-ui, sans-serif;
  --yuna_body: 'Instrument Sans', system-ui, sans-serif;
  --yuna_hw: 600;
  --yuna_ls: -.045em;
  --yuna_r: 0px;
}
/* No rubber-band (Tom 2026-10-27: "Remove rubber band scrolling."): the page never bounces past its top or bottom,
   at any width; the page colour sits on html too so no off-colour edge shows. Inner scrollers below use contain. */
html, body { margin: 0; overscroll-behavior: none; }
html { background: var(--yuna_bg); }
* { box-sizing: border-box; }
body { background: var(--yuna_bg); color: var(--yuna_ink); font-family: var(--yuna_body); }
[hidden] { display: none !important; }

/* ── Shell (desktop only) ─────────────────────────────────────────────── */
.yuna_app { background: var(--yuna_bg); color: var(--yuna_ink); font: 14px/1.4 var(--yuna_body); display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
  width: 100%; min-height: 100vh; }
/* Desktop (Tom 2026-10-27): from 1100 px wide this is the full-screen desktop design, unchanged. Below it the
   page goes fluid (1099 px and down), drawer + top bar at 899 px and down, phone at 760 px; see the end of the file.
   No min-width floor (tablet build, 2026-10-27): it never bound at desktop widths, and a 1100 px window with a
   classic scrollbar has only ~1085 px of room, so the old 1100 px floor scrolled the page sideways. */
body { overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; }
/* Phone-only parts of the shell: never shown on a desktop window. */
.yuna_mbar, .yuna_mclose, .yuna_scrim { display: none; }
.yuna_compose { display: contents; }
.yuna_ban { background: var(--yuna_acc); color: var(--yuna_on_acc); font-weight: 600; padding: 11px 32px; font-size: 14px; }
.yuna_bar { display: flex; align-items: center; gap: 24px; padding: 16px 32px 0; }
.yuna_bar > b { font: var(--yuna_hw) 18px var(--yuna_head); color: var(--yuna_strong); letter-spacing: var(--yuna_ls); flex: none; }
.yuna_bar small { color: var(--yuna_muted); font-size: 14px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Nav (option B, 2026-10-27, Tom's pick): a fixed left column a tone step darker than the page; sections stay open.
   Plain links, no pill; the active page is a solid ink block. */
.yuna_nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.yuna_nav a { color: var(--yuna_muted); text-decoration: none; padding: 9px 12px; font: 500 15px var(--yuna_body); white-space: nowrap; }
.yuna_nav a:hover { color: var(--yuna_strong); }
.yuna_nav a.yuna_on { color: var(--yuna_strong); font-weight: 700; }
.yuna_nav a.yuna_navact { background: var(--yuna_acc); color: var(--yuna_on_acc); font-weight: 700; padding: 10px 16px; }
.yuna_nav a.yuna_navact.yuna_on { background: var(--yuna_deep); color: var(--yuna_on_deep); }
.yuna_app.yuna_sidenav { display: grid; grid-template-columns: 236px 1fr; grid-template-rows: auto 1fr; }
.yuna_sidenav .yuna_ban { grid-column: 1 / -1; }
.yuna_sidenav .yuna_bar { grid-column: 1; flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 16px 20px; background: var(--yuna_card);
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.yuna_sidenav .yuna_bar > b { padding: 0 12px; font-size: 20px; }
.yuna_sidenav .yuna_nav { flex-direction: column; align-items: stretch; gap: 2px; flex: 1; }
.yuna_sidenav .yuna_nav a { padding: 9px 12px; border: 0; color: var(--yuna_strong); }
.yuna_sidenav .yuna_nav a:hover { background: var(--yuna_line); }
.yuna_sidenav .yuna_nav a.yuna_on { background: var(--yuna_deep); color: var(--yuna_on_deep); }
.yuna_sidenav .yuna_nav a.yuna_navact { margin: 0 0 14px; text-align: center; color: var(--yuna_on_acc); padding: 12px 16px; }
.yuna_sidenav .yuna_nav a.yuna_navact.yuna_on { background: var(--yuna_deep); }
.yuna_app .yuna_nav a.yuna_navact:not(.yuna_on):hover { background: var(--yuna_acc); color: var(--yuna_on_acc); filter: brightness(1.08); }
.yuna_sec { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.yuna_sec h2 { margin: 0 0 4px; padding: 0 12px; font: 600 13px var(--yuna_body); letter-spacing: 0; color: var(--yuna_acc); }  /* Tom 2026-10-27: section names red so they read as labels, not buttons */
.yuna_navfoot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; }
.yuna_bar > small { margin-left: 8px; }
.yuna_sidenav .yuna_bar > small { margin: 0; padding: 0 12px; white-space: normal; }
.yuna_sidenav .yuna_main { grid-column: 2; min-width: 0; }
.yuna_main { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 24px 32px 40px; min-height: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, tr:focus-visible, li:focus-visible, .yuna_seg label:focus-within { outline: 3px solid var(--yuna_acc); outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1 { margin: 0; font: var(--yuna_hw) 44px/1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
h1.xl { font-size: 64px; line-height: .98; max-width: 760px; }
h1.l { font-size: 48px; }
h1.xxl { font-size: 52px; margin-top: 10px; }
.yuna_sub { margin: 8px 0 16px; color: var(--yuna_muted); max-width: 620px; }
.yuna_cap { margin: 0 0 10px; font: 700 13px var(--yuna_body); color: var(--yuna_muted); text-transform: uppercase; letter-spacing: .06em; }
.yuna_meta { color: var(--yuna_muted); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.small { font-size: 12.5px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.yuna_btn { display: inline-block; background: var(--yuna_acc); color: var(--yuna_on_acc); font: 700 14px var(--yuna_body); padding: 12px 18px; border-radius: var(--yuna_r); border: 0; text-decoration: none; cursor: pointer; text-align: left; white-space: nowrap; }
.yuna_btn.big { font-size: 15px; padding: 13px 20px; }
.yuna_btn:hover { filter: brightness(1.08); }
.yuna_ghost { display: inline-block; background: transparent; border: 1.5px solid var(--yuna_strong); color: var(--yuna_strong); font: 700 14px var(--yuna_body); padding: 10.5px 18px; border-radius: var(--yuna_r); text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap; }
.yuna_ghost.plain { border: 0; background: var(--yuna_bg); padding: 12px 20px; font-size: 15px; }
.yuna_btn:disabled, .yuna_ghost:disabled { opacity: .45; cursor: default; filter: none; }
.btn3 { background: none; border: 0; padding: 0; color: var(--yuna_strong); font: 600 14px var(--yuna_body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.yuna_back { color: var(--yuna_muted); text-decoration: none; font-weight: 700; }
.yuna_back.box { color: var(--yuna_strong); border: 1.5px solid var(--yuna_strong); padding: 9px 14px; white-space: nowrap; }
.yuna_link { color: var(--yuna_strong); font-weight: 600; text-underline-offset: 3px; }

/* ── Tags ─────────────────────────────────────────────────────────────── */
.yuna_tag { display: inline-block; padding: 3px 8px; border-radius: var(--yuna_r); background: color-mix(in srgb, var(--yuna_ink) 10%, transparent); color: var(--yuna_ink); font-weight: 700; font-size: 12px; white-space: nowrap; }
.yuna_tag.yuna_flag { background: var(--yuna_acc); color: var(--yuna_on_acc); }
.yuna_tag.deep { background: var(--yuna_deep); color: var(--yuna_on_deep); font-size: 14px; padding: 5px 12px; }

/* ── Home (home-desktop) ──────────────────────────────────────────────── */
.yuna_top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.yuna_top p { margin: 12px 0 0; color: var(--yuna_muted); font-size: 16px; max-width: 560px; line-height: 1.5; }
.home .yuna_main, .yuna_main.home { gap: 20px; padding-top: 26px; }
.yuna_list { display: flex; flex-direction: column; gap: 10px; }
.yuna_row { background: var(--yuna_card); border-radius: var(--yuna_r); display: grid; grid-template-columns: 230px 160px 1fr 250px; gap: 40px; align-items: center; padding: 0 32px; min-height: 132px; font-size: 14px; animation: yuna_rise .5s both; }
.yuna_row:nth-child(2) { animation-delay: .07s; } .yuna_row:nth-child(3) { animation-delay: .14s; } .yuna_row:nth-child(4) { animation-delay: .21s; } .yuna_row:nth-child(5) { animation-delay: .28s; }
.yuna_row h2 { margin: 0; font: var(--yuna_hw) 28px/1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.yuna_who span { display: block; margin-top: 8px; color: var(--yuna_muted); }
.yuna_score { font: var(--yuna_hw) 76px/.9 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.yuna_score small { display: block; font: 500 12px var(--yuna_body); letter-spacing: 0; color: var(--yuna_muted); margin-top: 8px; }
.yuna_strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 56px; }
.yuna_strip i { display: block; background: var(--yuna_strong); border-radius: 1px; min-height: 5px; }
.yuna_strip i.s0 { opacity: .25; height: 5px; } .yuna_strip i.s1 { height: 14px; } .yuna_strip i.s2 { height: 28px; } .yuna_strip i.s3 { height: 42px; }
.yuna_info { display: flex; flex-direction: column; gap: 6px; color: var(--yuna_muted); }
.yuna_st { align-self: flex-start; padding: 5px 10px; border-radius: var(--yuna_r); font-weight: 700; color: var(--yuna_on_deep); background: var(--yuna_deep); }
.yuna_rev { background: color-mix(in srgb, var(--yuna_acc) 14%, var(--yuna_card)); }
.yuna_rev .yuna_st { background: var(--yuna_acc); color: var(--yuna_on_acc); }
.yuna_ok .yuna_st, .yuna_ex .yuna_st { background: color-mix(in srgb, var(--yuna_ink) 10%, transparent); color: var(--yuna_ink); }
.yuna_how { color: var(--yuna_strong); font-weight: 600; text-underline-offset: 3px; }
@keyframes yuna_rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yuna_row { animation: none; } }

/* ── Master-detail (feedback / appeals / hearings) ────────────────────── */
.split { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: start; }
.split.s400 { grid-template-columns: 1fr 400px; }
.split.left { grid-template-columns: 380px 1fr; }
.split.form { grid-template-columns: 560px 1fr; gap: 88px; padding: 8px 32px 0; }
table.q { width: 100%; border-collapse: collapse; background: var(--yuna_card); border-radius: var(--yuna_r); overflow: hidden; }
table.q th { text-align: left; font-size: 12px; color: var(--yuna_muted); padding: 10px 14px; font-weight: 700; }
table.q td { padding: 12px 14px; border-top: 1px solid var(--yuna_line); vertical-align: top; }
table.q tbody tr { cursor: pointer; }
table.q tbody tr:hover td { background: color-mix(in srgb, var(--yuna_ink) 4%, var(--yuna_card)); }
table.q tr.yuna_sel td { background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); }
table.q tr.yuna_sel td:first-child { box-shadow: inset 4px 0 0 var(--yuna_strong); }
table.q td.empty { color: var(--yuna_muted); cursor: default; }
.yuna_panel { background: var(--yuna_card); border-radius: var(--yuna_r); padding: 22px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.yuna_panel h3 { margin: 0; font: var(--yuna_hw) 26px/1.1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.yuna_panel p { margin: 0; }
.yuna_quote { border-left: 4px solid var(--yuna_strong); padding-left: 14px; font-size: 15px; }
.yuna_evid { background: var(--yuna_bg); border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.yuna_evid > b { font-size: 12px; color: var(--yuna_muted); text-transform: uppercase; letter-spacing: .06em; }
.yuna_evid ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.yuna_acts { display: flex; flex-direction: column; gap: 8px; }
.yuna_acts.row { flex-direction: row; align-items: center; gap: 10px; }
.yuna_hint { font-size: 13px; color: var(--yuna_ink); background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); border-radius: var(--yuna_r); padding: 10px 12px; margin: 0; }
.yuna_hint.bare { background: none; padding: 0; color: var(--yuna_muted); }
.yuna_orig { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--yuna_line); border-bottom: 1px solid var(--yuna_line); }
.yuna_orig > b { font-size: 22px; color: var(--yuna_strong); }
.yuna_kv { display: flex; flex-direction: column; }
.yuna_kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--yuna_line); }
.yuna_kv > div > span:first-child { color: var(--yuna_ink); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.yuna_lbl { display: block; font-weight: 700; margin-bottom: 6px; color: var(--yuna_strong); }
.yuna_field, input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); background: var(--yuna_bg); color: var(--yuna_ink); font: 14px var(--yuna_body); }
textarea { min-height: 72px; resize: vertical; line-height: 1.4; }
.yuna_field.static { display: flex; align-items: center; background: var(--yuna_bg); }
.yuna_in { background: var(--yuna_card); font-size: 15px; padding: 10px 13px; }
textarea.yuna_in { min-height: 70px; resize: none; line-height: 1.35; }
.yuna_form { display: flex; flex-direction: column; gap: 12px; }
.yuna_f { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.yuna_f > span, .yuna_f > legend { font-weight: 700; color: var(--yuna_strong); font-size: 13px; padding: 0; }
.yuna_f > legend { margin-bottom: 8px; }
.yuna_f em { font-style: normal; font-weight: 400; color: var(--yuna_muted); }
.yuna_seg { display: flex; gap: 8px; flex-wrap: wrap; }
.yuna_seg label { flex: 1; min-width: 90px; text-align: center; border: 1.5px solid var(--yuna_line); background: var(--yuna_card); border-radius: var(--yuna_r); padding: 9px; font-weight: 600; cursor: pointer; position: relative; }
.yuna_seg label.on-bg { background: var(--yuna_bg); }
.yuna_seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.yuna_seg label:has(input:checked) { background: var(--yuna_deep); color: var(--yuna_on_deep); border-color: var(--yuna_deep); }
.ck { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.ck input { width: auto; min-height: 0; }
.msg { font-size: 13.5px; min-height: 1em; margin: 0; }
.msg:empty { display: none; }
.msg.bad { color: var(--yuna_acc); font-weight: 600; }
.yuna_count { display: flex; justify-content: space-between; color: var(--yuna_muted); font-size: 13px; }

/* File feedback (feedback-scoring-desktop) */
.yuna_side { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.yuna_steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.yuna_steps li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--yuna_line); }
.yuna_steps li:last-child { border-bottom: 1px solid var(--yuna_line); }
.yuna_steps b.yuna_num { font: var(--yuna_hw) 28px/1 var(--yuna_head); color: var(--yuna_strong); }
.yuna_steps strong { color: var(--yuna_strong); display: block; margin-bottom: 2px; }
.yuna_steps span { color: var(--yuna_muted); }
.yuna_note { background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); border-radius: var(--yuna_r); padding: 14px 16px; margin: 0; }
.yuna_filedas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.yuna_filedas small { color: var(--yuna_muted); }

/* Schedule hearing (schedule-hearing-desktop) */
.yuna_sched { background: var(--yuna_card); border-radius: var(--yuna_r); padding: 24px; display: flex; flex-direction: column; gap: 18px; font-size: 15px; }
.yuna_sched .yuna_field, .yuna_sched input, .yuna_sched select, .yuna_sched textarea { border: 0; min-height: 48px; font-size: 15px; }
.yuna_sched textarea { min-height: 84px; resize: none; }
.yuna_case { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px; background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); border-radius: var(--yuna_r); }
.yuna_case b { font-size: 22px; color: var(--yuna_strong); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.yuna_panel.tlp { padding: 24px; font-size: 15px; }
.yuna_panel.tlp h3 { font-size: 32px; line-height: 1.05; }
.yuna_tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.yuna_tl li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.yuna_tl b { color: var(--yuna_strong); }

/* Ongoing hearing (hearings-desktop) */
.yuna_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.yuna_head .yuna_sub { margin-bottom: 0; max-width: 620px; }
.yuna_origbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--yuna_card); border-radius: var(--yuna_r); padding: 12px 20px; }
.yuna_origbar b.yuna_n { font: var(--yuna_hw) 32px/1 var(--yuna_head); color: var(--yuna_strong); }
.yuna_sides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.yuna_card { background: var(--yuna_card); border-radius: var(--yuna_r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.yuna_card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--yuna_line); padding-bottom: 10px; }
.yuna_role { font: 700 12px var(--yuna_body); text-transform: uppercase; letter-spacing: .06em; color: var(--yuna_muted); }
.yuna_card h2, .yuna_room h2 { margin: 2px 0 0; font: var(--yuna_hw) 24px/1.1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.yuna_ev { border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); padding: 10px 12px; background: var(--yuna_bg); display: flex; flex-direction: column; gap: 4px; }
.yuna_ev small { color: var(--yuna_muted); }
.yuna_ev p { margin: 0; }
.yuna_empty { border: 1.5px dashed var(--yuna_line); border-radius: var(--yuna_r); padding: 14px; color: var(--yuna_muted); }
.yuna_dec { align-self: center; width: 760px; background: var(--yuna_card); border-radius: var(--yuna_r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--yuna_strong); }
.yuna_dec h3 { margin: 0; font: var(--yuna_hw) 22px/1.1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); text-align: center; }
.yuna_dec textarea { min-height: 56px; }
.yuna_dec .yuna_acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.yuna_dec .yuna_btn, .yuna_dec .yuna_ghost { text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 11px 12px; }
.yuna_dec small { font-weight: 400; font-size: 12px; }
.yuna_foot { text-align: center; color: var(--yuna_muted); font-size: 13px; margin: 0; }

/* Submitter: your hearings (hearing-evidence-desktop) and hearing room (hearing-room-submitter) */
.yuna_items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.yuna_item { background: var(--yuna_card); border-radius: var(--yuna_r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.yuna_item.yuna_sel { box-shadow: inset 4px 0 0 var(--yuna_strong); }
.yuna_item.yuna_lock { color: var(--yuna_muted); }
.yuna_item b { color: var(--yuna_strong); font-size: 16px; }
.yuna_item .yuna_tag { align-self: flex-start; margin-top: 4px; }
.yuna_items + .yuna_cap { margin-top: 20px; }
.yuna_panel.ev { padding: 24px; }
.yuna_panel.ev h3 { font-size: 28px; }
.yuna_panel .yuna_head { align-items: flex-start; gap: 20px; }
.yuna_clock { text-align: right; flex: none; }
.yuna_clock strong { display: block; font: var(--yuna_hw) 44px/1 var(--yuna_head); color: var(--yuna_strong); letter-spacing: var(--yuna_ls); }
.yuna_clock span { color: var(--yuna_muted); font-size: 13px; }
.yuna_filed { border-top: 1px solid var(--yuna_line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.yuna_filed p, .yuna_evrow p { margin: 0; background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); border-radius: var(--yuna_r); padding: 10px 12px; }
.yuna_strongarea { border: 1.5px solid var(--yuna_strong); height: 150px; resize: none; line-height: 1.45; padding: 12px; }
.yuna_strongarea.short { height: 84px; }
.yuna_top .yuna_sub { margin-bottom: 0; max-width: 640px; }
.yuna_live { background: var(--yuna_deep); color: var(--yuna_on_deep); border-radius: var(--yuna_r); padding: 14px 20px; min-width: 300px; }
.yuna_live strong { display: block; font: var(--yuna_hw) 32px/1 var(--yuna_head); letter-spacing: var(--yuna_ls); }
.yuna_live span { font-size: 13px; }
.yuna_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.yuna_room { background: var(--yuna_card); border-radius: var(--yuna_r); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.yuna_room .yuna_tag { align-self: flex-start; }
.yuna_evrow { display: flex; flex-direction: column; gap: 6px; }
.yuna_evrow b { color: var(--yuna_strong); }
.yuna_req { box-shadow: inset 4px 0 0 var(--yuna_acc); background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); border-radius: var(--yuna_r); padding: 12px 14px; }
.yuna_req b { display: block; color: var(--yuna_strong); margin-bottom: 4px; }

/* ── Older pages (cases, case detail, ledger, settings) in the same language ── */
.card { background: var(--yuna_card); padding: 16px 20px; border-radius: var(--yuna_r); font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font: var(--yuna_hw) 20px/1.1 var(--yuna_head); letter-spacing: -.02em; color: var(--yuna_strong); }
.card p { margin: 0; }
.card.alert { background: color-mix(in srgb, var(--yuna_acc) 14%, var(--yuna_card)); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--yuna_muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
form.f { display: flex; flex-direction: column; gap: 10px; }
label.fl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hist { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: var(--yuna_muted); display: flex; flex-direction: column; gap: 4px; }
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lines .card .big { font: var(--yuna_hw) 64px/.9 var(--yuna_head); letter-spacing: var(--yuna_ls); }
.lines .card.hot { background: color-mix(in srgb, var(--yuna_acc) 14%, var(--yuna_card)); }
.chips { display: flex; gap: 4px; padding: 4px; background: var(--yuna_card); border-radius: 999px; align-self: flex-start; }
.chips button { font: 600 14px var(--yuna_body); padding: 7px 12px; border: 0; border-radius: 999px; background: none; color: var(--yuna_muted); cursor: pointer; }
.chips button.on { background: var(--yuna_deep); color: var(--yuna_on_deep); font-weight: 700; }
.token { font: 500 12px ui-monospace, monospace; background: var(--yuna_bg); border: 1px solid var(--yuna_line); padding: 8px; overflow-wrap: anywhere; user-select: all; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--yuna_line); vertical-align: top; }
table.t th { font-size: 12px; color: var(--yuna_muted); }
table.t td.n, table.t th.n { text-align: right; white-space: nowrap; }
.signin { width: 440px; margin: 0 auto; padding: 72px 0 40px; display: flex; flex-direction: column; gap: 14px; }
.signin .chips { background: none; padding: 0; gap: 16px; }
.signin .chips button { padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--yuna_strong); }

/* Add violation (add-violation-desktop) */
.split.entry { grid-template-columns: 1fr 360px; gap: 48px; }
.yuna_form.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.yuna_form.two .w { grid-column: 1 / -1; }
.yuna_form.two .yuna_seg { flex-wrap: nowrap; }
.yuna_form.two .yuna_seg label { min-width: 0; }
.yuna_form.two input:disabled { opacity: .55; }
.yuna_pick { border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); background: var(--yuna_card); overflow: hidden; }
.yuna_pick > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 13px; border-top: 1px solid var(--yuna_line); cursor: pointer; }
.yuna_pick > div:first-child { border-top: 0; }
.yuna_pick small { color: var(--yuna_muted); white-space: nowrap; }
.yuna_pick .yuna_cur { background: color-mix(in srgb, var(--yuna_ink) 8%, var(--yuna_card)); font-weight: 700; box-shadow: inset 4px 0 var(--yuna_strong); }
.yuna_count.right { justify-content: flex-end; font-size: 12px; }
.yuna_count.bad { color: var(--yuna_acc); font-weight: 600; }
.yuna_card.ef { padding: 22px; gap: 0; }
.yuna_card.ef .yuna_cap { margin-bottom: 12px; }
.yuna_card.ef p { margin: 10px 0 0; color: var(--yuna_muted); }
.yuna_card.ef .yuna_tag { align-self: flex-start; margin-top: 10px; }
.yuna_big { font: var(--yuna_hw) 64px/.9 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.yuna_arrow { font: 700 16px var(--yuna_body); margin: 0 8px; color: var(--yuna_muted); }
.yuna_last { margin: 0; padding: 0; list-style: none; }
.yuna_last li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--yuna_line); }

/* Agent view (agent-mcp-view-desktop) */
.split.mcpv .yuna_sub { margin-bottom: 12px; }
.pickrow { margin-bottom: 16px; flex-wrap: wrap; }
table.q.ro tbody tr { cursor: default; }
table.q.ro tbody tr:hover td { background: none; }
table.q.tools td:first-child { width: 200px; }
.yuna_cap.gap { margin-top: 22px; }
.yuna_code { font: 13px/1.5 ui-monospace, Menlo, monospace; background: var(--yuna_bg); border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.yuna_form.two .r1 { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.yuna_card.ef h2.yuna_cap { font: 700 13px var(--yuna_body); letter-spacing: .06em; margin: 0 0 12px; color: var(--yuna_muted); }
table.q.ro:not(.tools) td:nth-child(-n+2) { white-space: nowrap; }
/* Code of Conduct (no design supplied: built from the pages above) */
.coc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coc_md, .coc_note, .coc .yuna_req { max-width: 80ch; }
.coc .yuna_sub { margin-bottom: 4px; }
.coc_note { margin: 0; }
.coc_sec { border-top: 1.5px solid var(--yuna_strong); padding-top: 14px; margin-top: 14px; }
.coc_sec h2 { margin: 0 0 10px; font: var(--yuna_hw) 28px/1.1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.coc_md { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.coc_md > :first-child { margin-top: 0; }
.coc_md p, .coc_md ul, .coc_md ol { margin: 0 0 10px; }
.coc_md ul, .coc_md ol { padding-left: 22px; }
.coc_md li { margin-bottom: 4px; }
.coc_md h3, .coc_md h4, .coc_md h5 { margin: 16px 0 6px; font: 700 17px/1.25 var(--yuna_head); color: var(--yuna_strong); }
.coc_md h4, .coc_md h5 { font-size: 15px; }
.coc_md code { font-size: 13px; background: var(--yuna_card); padding: 1px 4px; }
.yuna_panel .coc_md { font-size: 14px; max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.coc_hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.coc_hist li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--yuna_line); }
.coc_hist li:last-child { border-bottom: 1px solid var(--yuna_line); }
.coc_hist li.yuna_sel { background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); box-shadow: inset 4px 0 0 var(--yuna_strong); }
.coc_hist a { color: var(--yuna_strong); text-decoration: none; }
.coc_hist a b { text-decoration: underline; text-underline-offset: 3px; }
.coc_hist span { color: var(--yuna_muted); font-size: 13px; }
textarea.coc_area { min-height: 180px; line-height: 1.45; }
/* Code of Conduct per agent: the agent dropdown (picker.js) sits above the agent's name; each option
   carries the agent's own latest version. */
.coc_pickdd { width: 360px; max-width: 100%; margin: 0 0 6px; }
.coc_who h2 { margin: 10px 0 0; font: var(--yuna_hw) 32px/1.1 var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
.coc_who h2 span { color: var(--yuna_muted); font-size: 20px; }
fieldset .yuna_acts.row { margin-top: 8px; }
.yuna_top.ord { margin-bottom: 24px; }

/* Agent picker (picker.js; Tom 2026-10-27: "Agents selection should be dropdown (own built design) instead of
   displaying them all"). Closed: one field like .yuna_in with a chevron. Open: a panel under it with a search box
   and its own scroll, so the page never grows with the roster. Flat: a 1px line on the open panel, no shadow. */
.vc_dd { position: relative; width: 100%; min-width: 0; }
.vc_dd_btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 13px;
  border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); background: var(--yuna_card); color: var(--yuna_ink); font: 15px var(--yuna_body); text-align: left; cursor: pointer; }
.vc_dd_btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc_dd_btn.ph > span { color: var(--yuna_muted); }
.vc_dd_btn::after { content: ''; flex: none; width: 7px; height: 7px; border: solid var(--yuna_strong); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.vc_dd_btn:hover, .vc_dd_btn[aria-expanded="true"] { border-color: var(--yuna_strong); }
.vc_dd_btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.vc_dd_btn[aria-invalid="true"] { border-color: var(--yuna_acc); }
.vc_dd_panel { position: absolute; z-index: 15; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; display: flex; flex-direction: column;
  background: var(--yuna_bg); border: 1px solid var(--yuna_strong); border-radius: var(--yuna_r); }
.vc_dd_q { margin: 8px; min-height: 40px; padding: 8px 11px; border: 1.5px solid var(--yuna_line); border-radius: var(--yuna_r); background: var(--yuna_card); color: var(--yuna_ink); font: 14px var(--yuna_body); }
.vc_dd_q:focus-visible { outline-offset: 0; }
.vc_dd_list { list-style: none; margin: 0; padding: 0 0 6px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.vc_dd_list li { display: flex; align-items: center; gap: 10px; padding: 8px 13px; cursor: pointer; }
.vc_dd_list li.vc_act { background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); }
.vc_dd_t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vc_dd_t b { font-weight: 600; color: var(--yuna_strong); }
.vc_dd_t small { font-size: 12.5px; color: var(--yuna_muted); overflow-wrap: anywhere; }
.vc_dd_list li[aria-selected="true"] .vc_dd_t b { font-weight: 700; }
.vc_dd_ck { flex: none; width: 14px; font-weight: 700; color: var(--yuna_strong); }
.vc_dd_list li[aria-selected="true"] .vc_dd_ck::before { content: '✓'; }
.vc_dd_list input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--yuna_ink); pointer-events: none; }
.vc_dd_none { margin: 0; padding: 4px 13px 12px; color: var(--yuna_muted); }
.pickrow .vc_dd { width: 320px; flex: none; }

/* Health (2026-10-27): 24 hourly bars per agent. Dark = a report that hour, pale = none,
   outlined = the current hour, still open. */
.split.s360 { grid-template-columns: 1fr 360px; }
table.q.hl td { vertical-align: middle; }
table.q.hl td:nth-child(3) { white-space: nowrap; }
td.hnote { white-space: pre-wrap; overflow-wrap: break-word; min-width: 160px; }
table.q.hl td:last-child { width: 180px; }
.hstrip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 22px; width: 180px; }
.hstrip i { display: block; background: color-mix(in srgb, var(--yuna_ink) 12%, transparent); }
.hstrip i.reported { background: var(--yuna_strong); }
.hstrip i.open { background: none; box-shadow: inset 0 0 0 1px var(--yuna_line); }

/* Open floor (both hearing rooms): the running record under the evidence */
.yuna_floor .yuna_tag { flex: none; }
.yuna_flog { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }

/* Nav counts (Tom 2026-10-27: "it should be at the last end of the button, with red bg."). His call overrides
   the no-pill nav rule for this one element: label left, count on a small badge at the far right of the row.
   Red = something there waits on you; grey = merely open. On the active (ink) row the grey badge goes translucent. */
.yuna_nav a[data-tab] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yuna_nav a.yuna_navact { display: block; }
.yuna_cnt { margin-left: auto; flex: none; min-width: 22px; padding: 0 6px; border-radius: 3px; text-align: center;
  font: 700 12px/20px var(--yuna_body); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--yuna_ink) 13%, var(--yuna_card)); color: var(--yuna_strong); }
.yuna_cnt.yuna_act { background: var(--yuna_acc); color: var(--yuna_on_acc); }
.yuna_nav a.yuna_on .yuna_cnt:not(.yuna_act) { background: color-mix(in srgb, var(--yuna_on_deep) 22%, var(--yuna_deep)); color: var(--yuna_on_deep); }

/* Hearing guidelines page */
.yuna_guide { max-width: 860px; }
.yuna_guide h2 { font: var(--yuna_hw) 20px var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); margin: 28px 0 4px; }

/* Arguments floor guidelines: on the guidelines page (own block) and on the floor itself (collapsible) */
.yuna_guide h3 { font: 700 15px var(--yuna_body); color: var(--yuna_strong); margin: 22px 0 2px; }
.yuna_floorguide { border-top: 3px solid var(--yuna_ink); margin-top: 32px; padding-top: 4px; }
.yuna_rules { margin: 8px 0 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; color: var(--yuna_ink); }
.yuna_rules li { padding-left: 4px; }
.yuna_rules li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.yuna_fguide { border: 1.5px solid var(--yuna_line); background: var(--yuna_bg); padding: 10px 14px; margin: 10px 0 12px; }
.yuna_fguide summary { cursor: pointer; font-weight: 700; color: var(--yuna_strong); }
.yuna_fguide[open] summary { margin-bottom: 4px; }
.yuna_fguide .yuna_meta { margin: 10px 0 0; }

/* ══ Desktop windows 1100–1399 px and landscape tablets (tablet build, 2026-10-27) ══════════════════════════
   The desktop layout's fixed side panels (440/400/360 px) beside a table had no room at these widths, so the
   page scrolled sideways. Same layout, but the list column may shrink and its cells wrap. Nothing here
   reaches 1400 px and up, so the 1440/1920 desktop is untouched. */
@media (min-width: 1100px) and (max-width: 1399px) {
  .split { grid-template-columns: minmax(0, 1fr) 440px; }
  .split.s400 { grid-template-columns: minmax(0, 1fr) 400px; }
  .split.s360 { grid-template-columns: minmax(0, 1fr) 360px; }
  .split.left { grid-template-columns: 380px minmax(0, 1fr); }
  .split.entry { grid-template-columns: minmax(0, 1fr) 360px; }
  .yuna_form.two .r1 { grid-template-columns: minmax(0, 1fr) 300px; }
  .yuna_btn, .yuna_ghost, .yuna_tag, .yuna_pick small, table.q.ro:not(.tools) td:nth-child(-n+2), table.q.hl td:nth-child(3) { white-space: normal; }
  table.q td, table.t td, .yuna_kv b { overflow-wrap: break-word; }
  td.hnote { min-width: 0; }
  table.q.tools td:first-child { width: 160px; }
  table.q.hl td:last-child, .hstrip { width: 150px; }
  .pickrow .vc_dd { width: 280px; flex: 0 1 280px; }
}
/* 1100–1279: the side panels narrow and the Overview rows tighten so the list keeps a usable width. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .split, .split.s400 { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
  .split.s360, .split.entry { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .yuna_row { grid-template-columns: 200px 140px minmax(0, 1fr) 220px; gap: 28px; padding: 0 24px; }
}
/* Landscape tablets (iPad Air 1180, iPad Pro 1366): the sidebar narrows to the tablet width for more page. */
@media (min-width: 1100px) and (max-width: 1399px) and (hover: none) and (pointer: coarse) {
  .yuna_app.yuna_sidenav { grid-template-columns: 208px minmax(0, 1fr); }
  .yuna_main { padding: 24px 24px 40px; }
}

/* ══ Narrow windows, 761–1099 px (Tom 2026-10-27, mobile request) ═════════════════════════════
   The desktop layout without its 1100 px floor: sidebar kept, a little narrower; every two-column
   page stacks into one column, so nothing needs a sideways scroll. */
@media (max-width: 1099px) {
  .yuna_app.yuna_sidenav { grid-template-columns: 208px minmax(0, 1fr); }
  .yuna_ban { padding: 11px 24px; }
  .yuna_main { padding: 24px 24px 40px; }
  h1.xl { font-size: 52px; }
  .split, .split.s400, .split.s360, .split.left, .split.entry, .split.form, .split.mcpv { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split.form { padding: 0; }
  .cols2, .yuna_form.two .r1 { grid-template-columns: minmax(0, 1fr); }
  .yuna_top, .yuna_head { flex-wrap: wrap; }
  .yuna_row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; padding: 20px 24px; min-height: 0; }
  .yuna_row .yuna_strip, .yuna_row .yuna_info { grid-column: 1 / -1; }
  .yuna_dec { width: 100%; max-width: 760px; }
  .yuna_dec .yuna_acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yuna_live { min-width: 0; }
  .yuna_btn, .yuna_ghost, .yuna_tag, .yuna_pick small, table.q.ro:not(.tools) td:nth-child(-n+2), table.q.hl td:nth-child(3) { white-space: normal; }
  table.q td, table.t td, .yuna_kv b { overflow-wrap: break-word; }
  td.hnote { min-width: 0; }
}

/* ══ Portrait tablets, 761–899 px, and phones (Tom 2026-10-27: "Optimise it for tablet") ═══════════════
   At ~800 px a persistent sidebar would leave ~530 px for the page, too narrow for the tables, so portrait
   tablets get the phone's top bar + Menu drawer and the page keeps the whole width (~720 px): tables stay
   real tables, two-column pages stack (narrow block above), hearing evidence stacks. */
@media (max-width: 899px) {
  .yuna_app, .yuna_app.yuna_sidenav { display: block; min-height: 100vh; min-height: 100dvh; }
  .yuna_ban { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .yuna_mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20;
    background: var(--yuna_card); border-bottom: 1px solid var(--yuna_line);
    padding: calc(6px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 6px max(24px, env(safe-area-inset-left)); }
  .yuna_mbar > b { font: var(--yuna_hw) 20px var(--yuna_head); letter-spacing: var(--yuna_ls); color: var(--yuna_strong); }
  .yuna_menu, .yuna_mclose { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; cursor: pointer;
    border: 1.5px solid var(--yuna_strong); border-radius: var(--yuna_r); background: var(--yuna_bg); color: var(--yuna_strong); font: 700 15px var(--yuna_body); }
  .yuna_menu .yuna_cnt { margin-left: 0; }
  .yuna_sidenav .yuna_bar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(320px, 86vw); height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--yuna_line);
    padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 16px;
    transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .yuna_open .yuna_bar { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
  .yuna_sidenav .yuna_bar > b { min-height: 44px; display: flex; align-items: center; padding-right: 96px; }
  .yuna_mclose { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .yuna_sidenav .yuna_nav a { min-height: 44px; font-size: 16px; }
  .yuna_sidenav .yuna_bar > small { font-size: 14px; }
  .yuna_scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--yuna_ink) 45%, transparent); }
  .yuna_open .yuna_scrim { display: block; }
  html.yuna_lock, html.yuna_lock body { overflow: hidden; }
  .yuna_main { padding: 20px max(24px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .yuna_panel { scroll-margin-top: 68px; }
  .yuna_sides, .yuna_grid { grid-template-columns: minmax(0, 1fr); }
}
/* Tablets held upright but wider than 899 px (iPad Pro 12.9 portrait): sidebar stays, evidence stacks. */
@media (min-width: 900px) and (max-width: 1099px) and (orientation: portrait) {
  .yuna_sides, .yuna_grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Touch tablets, 761 px and up (Tom 2026-10-27: "Optimise it for tablet") ══════════════════════════════
   Keyed on the pointer, not the width, so a desktop window with a mouse never changes: every control at
   least 44 px tall, form text 16 px (no iOS zoom), the agent dropdown sized for a finger, decision buttons
   roomier, and the Arguments floor composer pinned to the bottom of the floor card so it stays above the
   on-screen keyboard (the viewport resizes with the keyboard: interactive-widget=resizes-content). */
@media (min-width: 761px) and (hover: none) and (pointer: coarse) {
  .yuna_btn, .yuna_ghost, .yuna_back.box { min-height: 44px; }
  .yuna_sidenav .yuna_nav a { min-height: 44px; }
  .btn3, .yuna_back, .yuna_how, .coc_hist a { display: inline-flex; align-items: center; min-height: 44px; }
  .yuna_main > .yuna_link, .yuna_panel > .yuna_link, .yuna_room > .yuna_link, .card > .yuna_link, .yuna_acts > .yuna_link { display: inline-flex; align-items: center; min-height: 44px; }
  .chips button { min-height: 44px; padding: 0 16px; }
  .yuna_seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .ck { min-height: 44px; font-size: 15px; }
  .ck input { width: 22px; height: 22px; flex: none; }
  .yuna_fguide summary { padding: 12px 0; }
  .yuna_app .yuna_in { min-height: 44px; }
  .yuna_pick > div { min-height: 44px; align-items: center; }
  .yuna_app input, .yuna_app select, .yuna_app textarea { font-size: 16px; }
  .vc_dd_btn { min-height: 48px; }
  .vc_dd_q { min-height: 44px; font-size: 16px; }
  .vc_dd_list { max-height: min(400px, 45vh); }
  .vc_dd_list li { min-height: 48px; }
  .vc_dd_list input[type=checkbox] { width: 20px; height: 20px; }
  .yuna_dec .yuna_btn, .yuna_dec .yuna_ghost { min-height: 56px; justify-content: center; }
  .yuna_compose .yuna_acts .yuna_btn { min-height: 48px; }
  /* Text links set inside a sentence keep their line; the padding only enlarges what a finger can hit. */
  .yuna_link { padding: 14px 0; }
}

/* Portrait touch tablets: the Arguments floor composer stays pinned to the bottom of the screen while the floor
   is in view, so it sits right above the on-screen keyboard. Landscape leaves it in place (pinned, it would
   cover the floor on a short screen); the browser brings the focused field above the keyboard there. */
@media (min-width: 761px) and (max-width: 899px) and (hover: none) and (pointer: coarse) {
  .yuna_compose { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; z-index: 5; margin: 4px -20px -18px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--yuna_card); border-top: 1px solid var(--yuna_line); }
}

/* ══ Phones, 760 px and down ═══════════════════════════════════════════════════════════════════
   A top bar (name + Menu) over one column. Menu opens the desktop sidebar itself as a drawer from
   the right: same items, red section names, count badges at the far right. Menu carries the red
   "needs you" total. Tables become stacked cards. Inputs are 16 px (no iOS zoom); touch targets 44 px. */
@media (max-width: 760px) {
  .yuna_ban { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .yuna_mbar { padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); }

  /* One column */
  .yuna_main { padding: 18px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 16px; }
  h1 { font-size: 32px; line-height: 1.05; }
  h1.xl { font-size: 36px; line-height: 1.02; }
  h1.l, h1.xxl { font-size: 32px; }
  h1.xxl { margin-top: 6px; }
  .yuna_sub { margin: 6px 0 10px; }
  .yuna_top, .yuna_head { flex-direction: column; align-items: stretch; gap: 14px; }
  .yuna_top p { font-size: 15px; }
  .yuna_head .yuna_back.box { align-self: flex-start; }
  .split, .split.s400, .split.s360, .split.left, .split.entry, .split.form, .split.mcpv { gap: 20px; }
  .yuna_sides, .yuna_grid, .lines, .row2, .row3, .yuna_form.two, .cards { grid-template-columns: minmax(0, 1fr); }
  .yuna_form.two .w { grid-column: auto; }
  .yuna_row { padding: 16px; gap: 12px 16px; }
  .yuna_row h2 { font-size: 24px; }
  .yuna_score { font-size: 48px; text-align: right; }
  .yuna_strip { height: 44px; gap: 4px; }
  .yuna_panel, .yuna_panel.ev, .yuna_panel.tlp, .yuna_sched, .yuna_room, .yuna_card, .yuna_card.ef, .yuna_dec { padding: 16px; }
  .yuna_panel { scroll-margin-top: 68px; }
  .yuna_panel h3, .yuna_panel.ev h3 { font-size: 22px; }
  .yuna_panel.tlp h3 { font-size: 26px; }
  .yuna_clock { text-align: left; }
  .yuna_clock strong { font-size: 34px; }
  .yuna_origbar { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .yuna_case { flex-direction: column; }
  .yuna_live { padding: 12px 16px; }
  .yuna_big { font-size: 44px; }
  .lines .card .big { font-size: 52px; }
  .yuna_kv > div { flex-wrap: wrap; }
  .yuna_kv > div > b { margin-left: auto; text-align: right; min-width: 0; }
  .coc_sec h2 { font-size: 24px; }
  .coc_who h2 { font-size: 26px; }
  .yuna_panel .coc_md { max-height: none; }
  .signin { width: 100%; padding: 32px 0 24px; }

  /* Touch targets */
  .yuna_btn, .yuna_ghost { min-height: 44px; }
  .yuna_acts .yuna_btn, .yuna_acts .yuna_ghost, .yuna_top > .yuna_btn, .signin .yuna_btn { width: 100%; text-align: center; }
  .yuna_acts.row { flex-wrap: wrap; }
  .yuna_dec .yuna_acts { grid-template-columns: minmax(0, 1fr); }
  .btn3, .yuna_back { display: inline-flex; align-items: center; min-height: 44px; }
  .yuna_main > .yuna_link, .yuna_panel > .yuna_link, .yuna_room > .yuna_link, .card > .yuna_link, .yuna_acts > .yuna_link { display: inline-flex; align-items: center; min-height: 44px; }
  .chips { flex-wrap: wrap; }
  .chips button { min-height: 44px; padding: 0 14px; }
  .yuna_seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .yuna_form.two .yuna_seg { flex-wrap: wrap; }
  .yuna_form.two .yuna_seg label { min-width: 90px; }
  .ck { min-height: 44px; font-size: 15px; }
  .ck input { width: 22px; height: 22px; flex: none; }
  .yuna_fguide summary { padding: 12px 0; }
  .yuna_how, .coc_hist a { display: inline-flex; align-items: center; min-height: 44px; }
  .yuna_app .yuna_in { min-height: 44px; }
  .yuna_pick > div { min-height: 44px; flex-wrap: wrap; align-items: center; }
  .pickrow .vc_dd, .coc_pickdd { width: 100%; flex: 1 1 100%; }
  .vc_dd_panel { min-width: 0; }
  .vc_dd_list { max-height: min(320px, 50vh); }
  .vc_dd_list li { min-height: 44px; }
  .vc_dd_q { min-height: 44px; font-size: 16px; }

  /* Forms: 16 px text so iOS does not zoom in */
  .yuna_app input, .yuna_app select, .yuna_app textarea { font-size: 16px; }

  /* Tables become stacked cards; each cell is labelled with its column (app.js labelTables) */
  table.q, table.q tbody, table.q tr, table.q td, table.t, table.t tbody, table.t tr, table.t td { display: block; }
  table.q thead, table.t thead { display: none; }
  table.q { background: none; }
  table.q tbody { display: flex; flex-direction: column; gap: 8px; }
  table.q tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--yuna_card); }
  table.q td, table.t td { padding: 0; border: 0; }
  table.q.tools td:first-child, table.q.hl td:last-child { width: auto; }
  table.q tbody tr:hover td, table.q tr.yuna_sel td { background: none; }
  table.q tr.yuna_sel { background: color-mix(in srgb, var(--yuna_ink) 7%, var(--yuna_card)); box-shadow: inset 4px 0 0 var(--yuna_strong); }
  table.q tr.yuna_sel td:first-child { box-shadow: none; }
  table.t tr { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--yuna_line); }
  table.t td.n { text-align: left; }
  td[data-label]::before { content: attr(data-label); margin-right: 8px; font: 700 11.5px var(--yuna_body); letter-spacing: .06em; text-transform: uppercase; color: var(--yuna_muted); }
  .hstrip { max-width: 100%; }

  /* Card headers: the status tag drops under the title on the narrowest phones instead of pushing past the edge */
  .yuna_card > header { flex-wrap: wrap; }
  .yuna_floor .yuna_tag { flex: 0 1 auto; }

  /* Arguments floor: the composer stays at the bottom of the screen while the floor is in view */
  .yuna_flog { max-height: 55vh; }
  .yuna_compose { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; z-index: 5; margin: 4px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--yuna_card); border-top: 1px solid var(--yuna_line); }
  .yuna_count { flex-wrap: wrap; gap: 2px 12px; }
  .yuna_count > span:last-child { flex: none; font-weight: 700; color: var(--yuna_strong); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .yuna_app .yuna_bar { transition: none; }
}

/* ══ Safety net (tablet build, 2026-10-27; Tom: "prevent horizontal scrolling") ══════════════════════════
   Last on purpose: every known cause of sideways scrolling is fixed above (no page floor, long unbroken
   strings get break points in app.js, tables wrap, side panels shrink). This only stops an unforeseen
   overflow from dragging the whole page sideways; clip (not hidden) keeps the sticky sidebar and top bar
   working. Wide content that needs it (a code block) scrolls inside its own box, never the page. */
html, body { overflow-x: clip; }