/* VHF/DSC simulator: page layout, radio drawing, LCD screens, prompts and results */
.wrap{max-width:1440px;margin:0 auto;padding-inline:16px;padding-block:calc(env(safe-area-inset-top,0px) + 18px) 60px;display:grid;gap:18px}
header.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.eyebrow{font:600 .75rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
header.top h1{font-size:clamp(2rem,5vw,2.8rem);text-transform:uppercase;letter-spacing:.01em}
.vessel{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.vessel label{display:grid;gap:3px;font:600 .72rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vessel input{border:1px solid var(--line);background:var(--paper);padding:7px 10px;border-radius:6px;width:150px;font:500 .95rem var(--f-body);text-transform:none;letter-spacing:0}
.vessel input#mmsi{font-family:var(--f-mono);width:130px}

.level{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.level .lt{font:600 .72rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lvl{border:1px solid var(--line);background:var(--paper);padding:6px 14px;border-radius:8px;font:600 .88rem var(--f-body)}
.lvl[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.level small{color:var(--muted);font-size:.82rem}
.dsec{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.dsec h4{margin:0;font:600 1rem var(--f-body);color:var(--sea)}
.dsec details{font-size:.85rem}
.pttmsg{font-size:.85rem;color:var(--muted);text-align:center;margin:0}
.compose{background:var(--paper);border:1px solid var(--line);padding:14px 16px;display:grid;gap:10px}
.compose h4,.results h4.rt{margin:0;font:600 .72rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.results{background:var(--paper);border:1px solid var(--line);padding:16px 18px;display:grid;gap:10px}
.scenbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.modes{display:flex;flex-wrap:wrap;gap:8px}
.mode{border:1px solid var(--line);background:var(--paper);padding:8px 14px;border-radius:999px;font:600 .9rem var(--f-body);display:inline-flex;align-items:center;gap:8px}
.mode i{width:9px;height:9px;border-radius:50%;display:inline-block}
.mode[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);grid-template-areas:'radio col' 'side col';gap:18px 22px;align-items:start}
.col{grid-area:col}

/* Radio */
/* ---- radio: drawn panel with live buttons laid over it ---- */
.radio{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:10px;grid-area:radio;min-width:0}
.side{grid-area:side;display:grid;gap:10px;align-content:start;min-width:0}
.stage{position:relative;width:100%;aspect-ratio:880/490;container-type:inline-size;border-radius:12px;overflow:hidden;border:1px solid var(--line);user-select:none;-webkit-user-select:none}
.art{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage>button,.stage>.dist,.stage>.lcd{position:absolute}
/* LCD: amber backlit, navy serif text, sizes relative to the LCD itself */
.lcd{container-type:size;background:#f0a64a;color:#13246e;font-family:"Times New Roman",Times,Georgia,serif;font-weight:700;overflow:hidden;border-radius:2px;box-shadow:inset 0 0 6px rgba(80,40,0,.35)}
.lcd.off{background:#9a9d9d;box-shadow:inset 0 0 10px rgba(0,0,0,.45)}
.lcd.off>*{display:none}
.lcd.alarm{animation:lcdalarm .5s steps(1) infinite}
@keyframes lcdalarm{50%{background:#ffcf8a}}
@media (prefers-reduced-motion:reduce){.lcd.alarm{animation:none}}
.lcd .scr{position:absolute;inset:0;font-size:5.5cqw;line-height:1.15}
.lcd .ab{position:absolute;white-space:nowrap}
.lcd .big{font-size:30cqw;line-height:.86;font-weight:400;letter-spacing:-.02em}
.lcd .sm{font-size:5cqw;font-weight:400;color:#2d2d2d}
.lcd .xs{font-size:4.6cqw}
.lcd .sel{color:#b4290f}
.lcd .dim{color:#2d2d2d;font-weight:400}
.lcd .tri{position:absolute;width:0;height:0;border-left:3.6cqw solid transparent;border-right:3.6cqw solid transparent}
.lcd .tri.u{border-bottom:6cqw solid #d4521c} .lcd .tri.d{border-top:6cqw solid #d4521c}
.lcd .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1.5cqh}
.lcd .ctr b{font-size:7.4cqw;color:#3a2a20}
.lcd .ctr.navy b{color:#13246e}
.lcd .box{display:inline-block;background:#fff;color:#13246e;border:.5cqw solid #333;min-width:9cqw;height:13cqh;vertical-align:middle;text-align:center;line-height:13cqh;font-size:6cqw;padding:0 .8cqw}
.lcd .box.cur{outline:.8cqw solid #b4290f}
.lcd .rows{position:absolute;left:4%;right:4%;top:5%;font-size:4.5cqw;line-height:1.25;font-weight:400}
.lcd .rows div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd .tx{color:#b4290f;animation:txb 1s steps(1) infinite}
@keyframes txb{50%{opacity:0}}
/* keypad keys: off-white caps, navy italic legends */
.rk{width:4.9%;height:5.7%;border:0;border-radius:22%/34%;background:linear-gradient(180deg,#fdfdfd,#d3d6db);box-shadow:0 .25cqw .25cqw rgba(0,0,0,.6),inset 0 -.2cqw .3cqw rgba(0,0,0,.18);color:#1d2a7a;font:italic 700 1.62cqw/1 Arial,Helvetica,sans-serif;padding:0;display:grid;place-items:center;cursor:pointer}
.rk:active,.rk.pressed{transform:translateY(.15cqw);box-shadow:0 .1cqw .15cqw rgba(0,0,0,.6)}
.rk .arr{color:#1756d6;font-style:normal;font-size:2.3cqw;line-height:1}
.rk.k16 span{background:#e3141c;color:#1b3fd0;padding:.15cqw .9cqw;font-style:normal;font-size:1.75cqw;border-radius:.2cqw}
.stage>.rk[data-k="menu"]{width:5.1%}
/* distress: hinged red cover over a light button */
.dist{background:#3c3c40;border-radius:.6cqw;box-shadow:inset 0 0 .6cqw #000}
.dist .push{position:absolute;left:22%;right:22%;top:3%;height:30%;background:#b3221a;color:#fff;font:700 .95cqw/1.05 Arial,sans-serif;text-align:center;display:grid;place-content:center;border-radius:.2cqw}
.dist .dbtn{position:absolute;left:14%;right:14%;top:35%;bottom:7%;border:.25cqw solid #a01c14;border-radius:.6cqw;background:linear-gradient(180deg,#f2f2f2,#cfcfcf);padding:0;cursor:pointer;touch-action:none;overflow:hidden}
.dist .dbtn i{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff5a4a,#c40d0d 70%);box-shadow:0 0 0 .25cqw #2aa1a1}
.dist .dbtn .fill{position:absolute;left:0;bottom:0;width:100%;height:0;background:rgba(255,40,30,.35)}
.dist .cover{position:absolute;inset:4% 6%;border:0;border-radius:.6cqw;background:linear-gradient(170deg,rgba(225,40,30,.97),rgba(150,18,12,.97));color:#fff;font:700 1.05cqw/1.2 Arial,sans-serif;cursor:pointer;transform-origin:top center;transition:transform .25s,opacity .25s;box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.35)}
.dist.open .cover{transform:perspective(40cqw) rotateX(-80deg);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dist .cover{transition:none}}
/* knobs */
.knob{width:5.9%;aspect-ratio:1;height:auto;border-radius:50%;border:.3cqw solid #050505;background:radial-gradient(circle at 38% 32%,#4b4b4f,#19191b 62%,#050506);color:#f2f2f2;font:italic 700 1.7cqw/1 Arial,Helvetica,sans-serif;padding:0;cursor:pointer;box-shadow:0 .4cqw .6cqw rgba(0,0,0,.6)}
.knob.lit{color:#ffc061;text-shadow:0 0 .6cqw rgba(255,180,60,.8)}
/* handset buttons */
.mk{width:2.7%;height:6.4%;border:.2cqw solid #111;border-radius:.9cqw;background:linear-gradient(180deg,#5a5a5e,#2b2b2e);padding:0;cursor:pointer;box-shadow:0 .2cqw .3cqw rgba(0,0,0,.6)}
.mk.hl{width:3.5%;height:4.6%}
.mk:active{transform:translateY(.12cqw)}
.pttside{position:absolute;left:73.6%;top:15%;width:1.9%;height:24%;border:.2cqw solid #000;border-radius:.6cqw;background:linear-gradient(90deg,#4c4c50,#222);color:#ddd;font:700 .95cqw Arial,sans-serif;writing-mode:vertical-rl;padding:0;cursor:pointer}
.pttside.live{background:#c8261f;color:#fff}
.doc{display:flex;align-items:center;gap:.7cqw;background:transparent;border:0;color:#f0f0f0;font:400 1.35cqw "Times New Roman",serif;cursor:pointer;padding:.3cqw}
.doc span{text-decoration:underline;text-underline-offset:.3cqw}
.doc .ib{width:1.4cqw;height:2cqw;background:#d61c1c;border-left:.35cqw solid #7a0c0c;border-radius:.15cqw}
.doc .idoc{width:1.6cqw;height:2cqw;background:linear-gradient(#bfe6ff 0 0) center/70% 12% no-repeat,#fff;border:.15cqw solid #4a8bd6;transform:rotate(-12deg)}
/* zoomed controls for small screens */
.zoom{display:none;background:#1a1a1c;border-radius:14px;padding:10px;gap:10px}
.zoom .lcd{position:relative;width:100%;aspect-ratio:219/96;border:6px solid #060607;border-radius:10px}
.zkeys{display:grid;grid-template-columns:repeat(4,1fr) 64px;grid-template-rows:44px 44px;gap:8px}
.zkeys .rk{width:auto;height:auto;font-size:15px;border-radius:9px;box-shadow:0 2px 2px rgba(0,0,0,.6)}
.zkeys .rk .arr{font-size:18px}
.zkeys .rk.k16 span{font-size:15px;padding:1px 8px}
.zkeys .dist{position:relative;grid-column:5;grid-row:1/3}
.zkeys .dist .push{font-size:8px}
.zkeys .dist .cover{font-size:9px}
.zrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zrow .knob{width:48px;font-size:13px;border-width:2px}
.zrow .zl{margin-left:auto;font:600 .75rem var(--f-body);color:#aaa;text-transform:uppercase;letter-spacing:.08em}
.mkz{border:1px solid #000;border-radius:9px;background:linear-gradient(180deg,#5a5a5e,#2b2b2e);color:#eee;font:700 .8rem Arial,sans-serif;padding:10px 10px}
.pttbar{display:flex;justify-content:center}
.ptt{display:grid;place-items:center;gap:2px;border:0;border-radius:14px;padding:12px 18px;background:var(--accent);color:#fff;font:700 1.1rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,.35);min-width:220px}
.ptt:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.ptt.live{background:var(--bad);animation:pulse 1.2s infinite}
.ptt small{font:500 .7rem var(--f-body);letter-spacing:0;text-transform:none;opacity:.9}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(200,38,31,.25)}}
@media (prefers-reduced-motion:reduce){.ptt.live{animation:none}}
.rbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rbtn{border:1px solid var(--line);border-radius:10px;padding:8px 4px;background:var(--paper);color:var(--ink);font:600 .78rem var(--f-body)}
.rbtn[aria-pressed="false"]{color:var(--muted)}
.docdlg{max-width:min(640px,92vw);border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:18px}
.docdlg::backdrop{background:rgba(0,0,0,.45)}
.dlgbody{display:grid;gap:8px;font-size:.9rem;max-height:65vh;overflow:auto;margin-bottom:12px}
.dlgbody h3{font-size:1.3rem;color:var(--sea)}
.dlgbody table{border-collapse:collapse;width:100%}
.dlgbody td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.dlgbody td:first-child{font-family:var(--f-mono);font-weight:600;white-space:nowrap}
.howto{font-size:.85rem;background:var(--bg);border-radius:8px;padding:10px 12px 10px 28px;margin:0;display:grid;gap:4px}
.radiochk{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.radiochk li{display:flex;gap:8px;font-size:.92rem}
.radiochk li b{width:18px;font-family:var(--f-mono)}
.radiochk li.ok b{color:var(--ok)} .radiochk li.no b{color:var(--bad)} .radiochk li.wait b{color:var(--muted)}
.rnote{font-size:.8rem;color:var(--muted);line-height:1.4}
.rset{display:grid;gap:8px;font-size:.8rem}
.rset label{display:grid;gap:4px}
.rset{color:var(--muted)}
.rset select{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.rset .chk{display:flex;gap:8px;align-items:center}
.checks li.tog{cursor:pointer}
.checks li.self b{color:var(--sea)}
.fixnote{font-size:.85rem;color:var(--muted)}

/* Right column */
.col{display:grid;gap:16px;min-width:0}
.scen{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--accent);padding:16px 18px;display:grid;gap:10px}
.scen h2{font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}
.facts span b{font-family:var(--f-mono);font-weight:600}
.facts .k{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-right:6px}

.log{background:var(--paper);border:1px solid var(--line);padding:14px 16px;display:grid;gap:10px;max-height:340px;overflow:auto}
.log:empty::before{content:"Radio log. Transmissions will appear here.";color:var(--muted);font-size:.9rem}
.msg{display:grid;gap:2px;max-width:88%}
.msg .who{font:600 .7rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.msg p{font-family:var(--f-mono);font-size:.86rem;padding:8px 11px;border-radius:10px;background:var(--sea-soft);white-space:pre-wrap}
.msg.me{justify-self:end}
.msg.me .who{text-align:right}
.msg.me p{background:var(--accent-soft)}
.msg.sys p{background:transparent;border:1px dashed var(--line);font-family:var(--f-body)}

.task{background:var(--paper);border:1px solid var(--line);padding:18px;display:grid;gap:14px}
.task h3{font-size:1.3rem;color:var(--sea)}
.task .q{font-size:1rem}
.opts{display:grid;gap:8px}
.opt{text-align:left;border:1px solid var(--line);background:var(--bg);padding:10px 14px;border-radius:8px}
.opt:hover{border-color:var(--sea)}
.opt.right{background:var(--ok-soft);border-color:var(--ok)}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad)}
.explain{font-size:.9rem;padding:10px 12px;border-radius:8px;background:var(--sea-soft)}
textarea{width:100%;min-height:120px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 12px;font:.92rem/1.5 var(--f-mono);resize:vertical}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:1px solid var(--line);background:var(--paper);padding:8px 14px;border-radius:8px;font:600 .9rem var(--f-body)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.ghost{background:transparent}
.hint{font:.85rem/1.6 var(--f-mono);background:var(--hi);padding:10px 12px;border-radius:8px;white-space:pre-wrap}
.checks{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.92rem;align-items:start}
.checks li b{font:700 .95rem var(--f-mono);text-align:center;border-radius:4px}
.checks li.ok b{color:var(--ok)}
.checks li.no b{color:var(--bad)}
.checks li small{display:block;color:var(--muted);font-size:.82rem}
.score{font:700 1.1rem var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.score.good{color:var(--ok)} .score.poor{color:var(--bad)}
.model{font:.86rem/1.6 var(--f-mono);background:var(--bg);border-left:3px solid var(--sea);padding:10px 12px;white-space:pre-wrap}
.done{display:grid;gap:10px;text-align:center;padding:10px}
.done .big{font:700 3rem var(--f-display);color:var(--accent)}
.foot{font-size:.8rem;color:var(--muted)}
.voicewarn{font-size:.85rem;background:var(--accent-soft);padding:10px 12px;border-radius:8px}

@media (max-width:900px){
  .main{grid-template-columns:1fr;grid-template-areas:none}
  .radio,.col,.side{display:contents}
  .scen{order:1} .task{order:2} .stage{order:3} .zoom{order:4} .pttbar{order:5} .compose{order:6} .log{order:7} .results{order:8} .rbtns{order:9} .rset{order:10} .rnote{order:11} .foot{order:12}
}
@media (max-width:700px){ .zoom{display:grid} .stage{display:none} }
.zdocs{display:flex;gap:14px;justify-content:center}
.zdocs .doc{font-size:.85rem;gap:6px}
.zdocs .doc .ib{width:10px;height:14px;border-left-width:3px}
.zdocs .doc .idoc{width:11px;height:14px}
a.eyebrow.suite{text-decoration:none}

/* ---- Master GMDSS theme (Sail la Vie look) applied to the simulator ---- */
.eyebrow{font-family:var(--font-display);color:var(--ink-muted)}
a.eyebrow.suite{color:var(--teal)}
header.top h1{font-family:var(--font-display);font-weight:700;text-transform:none;letter-spacing:-.01em;color:var(--heading)}
.scen h2{text-transform:none;letter-spacing:-.01em;font-weight:700;color:var(--heading)}
.scen,.task,.compose,.results,.log{border-radius:var(--radius-md);box-shadow:var(--shadow)}
.scen{border-left:6px solid var(--accent)}
.stage{border-radius:var(--radius-md);box-shadow:var(--shadow)}
.task h3{color:var(--teal);font-family:var(--font-display);font-weight:700}
.mode{border-radius:999px;background:var(--surface-ivory)}
.mode[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.lvl{border-radius:999px;background:var(--surface-ivory)}
.lvl[aria-pressed="true"]{background:var(--btn-primary);border-color:transparent;color:#fff}
.btn{border-radius:999px;padding:9px 16px;background:var(--surface-ivory);font-family:var(--font-body)}
.btn.primary{background:var(--btn-primary);color:#fff;border-color:transparent;box-shadow:0 12px 24px -10px rgba(22,50,79,.5)}
.btn.ghost{background:transparent}
.opt{border-radius:var(--radius-sm);background:var(--bg-elevated)}
.rbtn{border-radius:999px;background:var(--surface-ivory)}
.vessel input,.rset select,textarea{border-radius:var(--radius-sm)!important;background:var(--bg-elevated)}
.ptt{border-radius:999px;background:linear-gradient(90deg,var(--coral),var(--sunset-orange));box-shadow:0 12px 24px -10px rgba(194,51,72,.55);font-family:var(--font-display);letter-spacing:.06em}
.ptt.live{background:var(--coral-deep)}
.score{font-family:var(--font-display);letter-spacing:.02em}
.done .big{font-family:var(--font-wordmark);font-style:italic;color:var(--heading)}
.msg p{border-radius:14px;background:var(--pastel-blue)}
.msg.me p{background:var(--pastel-rose)}
.model{border-left-color:var(--teal);border-radius:8px}
.hint{background:var(--pastel-cream)}
.explain{border-radius:var(--radius-sm)}
.docdlg{border-radius:var(--radius-md)}
.dlgbody h3{color:var(--teal)}

.vessel{gap:10px 14px}
.vessel label{gap:6px}
.level{margin-top:2px}
.scen{gap:12px}