/* COS-0078 phone action page · HIA style: Arial, Navy #2D3047, Orange #E8612D, Maroon #8B2332 · light + dark · mobile first (390 px) */
:root {
  --navy: #2D3047; --orange: #E8612D; --maroon: #8B2332;
  --bg: #f4f5f9; --card: #fff; --text: #1d2033; --muted: #5a6080; --line: #dde0ea; --chip: #eceef5;
  --ok: #1d7f53; --warn: #a86400; --bad: #b3263a; --focus: #E8612D;
  --gold: #a87e00; --silver: #6f7988; --bronze: #9a5a32;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #10121c; --card: #191c2c; --text: #e7e9f3; --muted: #a0a6c2; --line: #2c3150; --chip: #262a42;
    --ok: #4cc38a; --warn: #f0b04a; --bad: #ff7083; --gold: #e6b422; --silver: #b4bcc8; --bronze: #d08a5c; }
}
:root[data-theme="dark"] { --bg: #10121c; --card: #191c2c; --text: #e7e9f3; --muted: #a0a6c2; --line: #2c3150; --chip: #262a42;
  --ok: #4cc38a; --warn: #f0b04a; --bad: #ff7083; --gold: #e6b422; --silver: #b4bcc8; --bronze: #d08a5c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 Arial, Helvetica, sans-serif; }
button, select, textarea, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

header.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
header.top h1 { flex: 1; margin: 0; font-size: 17px; }
header.top h1 span { color: var(--orange); }
.ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 10px; min-width: 40px; min-height: 40px; }

.banner { background: var(--bad); color: #fff; padding: 10px 14px; font-weight: bold; }
.banner.warn { background: var(--warn); }
main { max-width: 860px; margin: 0 auto; padding: 10px 12px 60px; }
.asof { color: var(--muted); font-size: 13px; margin: 4px 2px 10px; }
h2 { font-size: 17px; margin: 22px 2px 8px; color: var(--text); }
h2 .count { display: inline-block; min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 13px; text-align: center; }
h3 { font-size: 15px; margin: 0; }
h3.gap { margin-top: 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.foot { color: var(--muted); font-size: 12px; text-align: center; margin-top: 30px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.card.need { border-left: 5px solid var(--orange); }
.card.blocker { border-left: 5px solid var(--maroon); }
.card.flash { box-shadow: 0 0 0 3px var(--orange); }
.card .head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card .id { font-weight: bold; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--chip); font-size: 12px; }
.chip.lane { font-weight: bold; }
.chip.block { background: var(--maroon); color: #fff; }
.chip.lanewait { background: var(--orange); color: #fff; }
.chip.conf { border: 1px solid var(--line); background: transparent; }
.chip.ok { background: var(--ok); color: #fff; }
.chip.warn { background: var(--warn); color: #fff; }
.chip.bad { background: var(--bad); color: #fff; }
.title { margin: 6px 0 4px; font-size: 15px; font-weight: bold; }
.why { margin: 2px 0; }
.rec { margin: 6px 0; padding: 8px 10px; background: var(--chip); border-radius: 10px; }
.rec b { color: var(--orange); }
details.more { margin: 6px 0; }
details.more > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; min-height: 32px; }
details.more ul { margin: 4px 0 0; padding-left: 18px; }
details.more li { margin: 4px 0; font-size: 14px; }
.opt-list li b { color: var(--text); }

.controls { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; display: grid; gap: 8px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
button.primary, button.secondary, button.opt, button.discuss, button.mic, button.send { min-height: 44px; border-radius: 10px; padding: 8px 12px; cursor: pointer; text-align: left; }
button.primary { background: var(--orange); border: 1px solid var(--orange); color: #fff; font-weight: bold; }
button.secondary { background: transparent; border: 1px solid var(--line); }
button.opt { background: var(--card); border: 1px solid var(--navy); width: 100%; }
:root[data-theme="dark"] button.opt { border-color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.opt { border-color: var(--muted); } }
button.discuss { background: transparent; border: 1px dashed var(--muted); }
button.send { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
button[disabled] { opacity: .5; cursor: not-allowed; }
select.pick { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--navy); background: var(--card); padding: 8px; }
.textbox { display: grid; gap: 6px; }
.textbox textarea { width: 100%; min-height: 76px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); padding: 8px; resize: vertical; }
.textbox .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button.mic { background: var(--card); border: 1px solid var(--line); }
button.mic.on { background: var(--bad); border-color: var(--bad); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lang button { border: 0; background: transparent; min-height: 40px; padding: 6px 10px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.hint { font-size: 13px; color: var(--muted); }
.hint.nomic { color: var(--warn); }

.status { margin-top: 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.step { padding: 3px 8px; border-radius: 999px; background: var(--chip); }
.step.done { background: var(--ok); color: #fff; }
.step.wait { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.tile b { display: block; font-size: 22px; }
.tile span { color: var(--muted); font-size: 12px; }
.tile.need b { color: var(--orange); }
.tile.bad b { color: var(--bad); }
table.lanes { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lanes th, table.lanes td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.medal { display: inline-block; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: bold; }
.medal.Gold { background: var(--gold); } .medal.Silver { background: var(--silver); } .medal.Bronze { background: var(--bronze); } .medal.None, .medal.none { background: var(--bad); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.empty { color: var(--muted); padding: 8px 2px; }
.subhead { font-size: 14px; color: var(--muted); margin: 14px 2px 4px; font-weight: bold; }

dialog { border: 0; border-radius: 16px; padding: 16px; width: min(94vw, 520px); background: var(--card); color: var(--text); }
dialog::backdrop { background: rgba(10, 12, 24, .55); }
dialog blockquote { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--orange); background: var(--chip); border-radius: 6px; white-space: pre-wrap; max-height: 40vh; overflow: auto; }
dialog blockquote:empty { display: none; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 20; max-width: 92vw; }

@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  button.opt { width: auto; }
  .opts { display: flex; flex-wrap: wrap; gap: 8px; }
}