@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Planer — component stylesheet. All values come from tokens.css (tokens.json). */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased}
.pl{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:20px}
.pl-num,.pl-time,.pl-clock{font-variant-numeric:tabular-nums}
.pl-time{font-size:17px;line-height:22px;font-weight:700}
.pl-label{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-muted{color:var(--muted)}
.pl-h1{font-size:22px;line-height:28px;font-weight:700;margin:0}
.pl-h2{font-size:16px;line-height:22px;font-weight:600;margin:0}
.pl-sm{font-size:13px;line-height:18px}
.pl-row{display:flex;align-items:center;gap:var(--space-2)}
.pl-col{display:flex;flex-direction:column;gap:var(--space-2)}
.pl-grow{flex:1;min-width:0}
.pl-wrap{flex-wrap:wrap}
.pl-sep{color:var(--muted);padding:0 2px}
.pl-ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.pl-ico.lg{width:20px;height:20px}
.pl-ico.xl{width:28px;height:28px}
.pl-ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Focus: solid 2px accent ring, 2px gap in page colour */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Logo ---------- */
.pl-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.pl-logo-tile{width:30px;height:30px;border-radius:var(--radius-control);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.02em}
.pl-logo-client{height:30px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-control);display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--text);background:var(--surface2)}

/* ---------- Card / panel ---------- */
.pl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4)}
.pl-card.flush{padding:0}
.pl-card-h{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.pl-card-b{padding:var(--space-4)}
.pl-inset{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-control);padding:var(--space-3)}
.pl-divider{height:1px;background:var(--border);border:0;margin:var(--space-3) 0}

/* ---------- Buttons ---------- */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 14px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface2);color:var(--text);font:600 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.pl-btn:hover{border-color:var(--muted)}
.pl-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pl-btn.primary:hover,.pl-btn.primary:active{background:var(--accent2);border-color:var(--accent2)}
.pl-btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.pl-btn.ghost:hover{color:var(--text);background:var(--surface2)}
.pl-btn.danger{background:var(--red-tint);border-color:var(--red);color:var(--red-ink)}
.pl-btn.warn{background:var(--yellow-tint);border-color:var(--yellow);color:var(--yellow-ink)}
.pl-btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--radius-badge)}
.pl-btn.icon{width:var(--control-h);padding:0}
.pl-btn.sm.icon{width:28px}
.pl-btn.touch{height:var(--touch-h)}
.pl-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Badge ---------- */
.pl-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--radius-badge);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.02em;white-space:nowrap;background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.pl-badge.accent{background:var(--accent-tint-strong);color:var(--accent-text);border-color:transparent}
.pl-badge.ok{background:var(--green-tint);color:var(--green-ink);border-color:transparent}
.pl-badge.warn{background:var(--yellow-tint);color:var(--yellow-ink);border-color:transparent}
.pl-badge.err{background:var(--red-tint);color:var(--red-ink);border-color:transparent}
.pl-badge.live{background:var(--red);color:var(--on-red);border-color:transparent}
.pl-badge.solid{background:var(--accent);color:var(--on-accent);border-color:transparent}
.pl-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:currentColor;flex:none;display:inline-block}
/* segment type badge: coloured dot + label */
.pl-type{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 6px;border-radius:var(--radius-badge);background:var(--surface2);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text);white-space:nowrap}
.pl-type::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--t,var(--muted))}
.pl-type.talk{--t:var(--type-talk)}.pl-type.panel{--t:var(--type-panel)}.pl-type.video{--t:var(--type-video)}
.pl-type.break{--t:var(--type-break)}.pl-type.tech{--t:var(--type-tech)}.pl-type.live{--t:var(--type-live)}

/* ---------- Fields ---------- */
.pl-field{display:flex;flex-direction:column;gap:6px}
.pl-input{height:var(--control-h);padding:0 12px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface2);color:var(--text);font:400 14px/1 var(--font-sans);width:100%;display:flex;align-items:center;gap:8px}
.pl-input:focus,.pl-input.focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pl-input.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
textarea.pl-input{height:auto;padding:10px 12px;line-height:20px;resize:vertical}
.pl-input .pl-ico{color:var(--muted)}
.pl-check{display:flex;align-items:center;gap:10px;padding:8px 0}
.pl-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--muted);display:grid;place-items:center;flex:none}
.pl-box.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pl-box.on .pl-ico{width:12px;height:12px;stroke-width:3}
.pl-switch{width:34px;height:20px;border-radius:var(--radius-pill);background:var(--surface2);border:1px solid var(--border);position:relative;flex:none}
.pl-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted)}
.pl-switch.on{background:var(--accent);border-color:var(--accent)}
.pl-switch.on::after{left:16px;background:var(--on-accent)}

/* ---------- Stepper ---------- */
.pl-stepper{display:inline-flex;align-items:center;gap:12px}
.pl-stepper button{width:32px;height:32px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface2);color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0}
.pl-stepper button:hover{border-color:var(--accent);color:var(--accent-text)}
.pl-stepper .v{min-width:44px;text-align:center;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.pl-stepper.touch button{width:44px;height:44px}

/* ---------- Segmented tabs (pill) ---------- */
.pl-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--surface2);border:1px solid var(--border)}
.pl-seg button,.pl-seg a{height:28px;padding:0 14px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--muted);font:600 13px/1 var(--font-sans);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none}
.pl-seg button:hover{color:var(--text)}
.pl-seg .on{background:var(--accent);color:var(--on-accent)}
.pl-seg .on .pl-sub{color:var(--on-accent);opacity:.75}
.pl-seg .pl-sub{font-weight:500;color:var(--muted);font-size:12px}

/* ---------- Slider ---------- */
.pl-slider{position:relative;height:20px;display:flex;align-items:center}
.pl-slider .track{height:4px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);width:100%;position:relative}
.pl-slider .fill{position:absolute;left:0;top:-1px;bottom:-1px;border-radius:2px;background:var(--accent)}
.pl-slider .thumb{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}

/* ---------- Selection card ---------- */
.pl-pick{display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);cursor:pointer;text-align:left;color:var(--text);font-family:var(--font-sans)}
.pl-pick:hover{border-color:var(--muted)}
.pl-pick.on{border-color:var(--accent);background:var(--accent-tint)}
.pl-pick .t{font-weight:600;font-size:14px}
.pl-pick .d{font-size:13px;line-height:18px;color:var(--muted)}

/* ---------- Summary line ---------- */
.pl-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.pl-summary > span + span::before{content:"·";color:var(--muted);margin-right:8px}
.pl-summary b{font-weight:600}

/* ---------- Progress ---------- */
.pl-bar{height:8px;border-radius:var(--radius-pill);background:var(--surface2);border:1px solid var(--border);overflow:hidden;position:relative}
.pl-bar > i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:var(--radius-pill)}
.pl-bar > i.warn{background:var(--yellow)}.pl-bar > i.err{background:var(--red)}.pl-bar > i.ok{background:var(--green)}

/* ---------- App shell ---------- */
.pl-app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100%;background:var(--bg)}
.pl-app.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.pl-side{grid-row:1/3;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px 10px;gap:2px}
.pl-side .pl-logo{padding:2px 6px 14px}
.pl-nav{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--radius-control);color:var(--muted);font-weight:500;font-size:13px;text-decoration:none;white-space:nowrap}
.pl-nav:hover{background:var(--surface2);color:var(--text)}
.pl-nav.on{background:var(--accent-tint-strong);color:var(--text)}
.pl-nav.on .pl-ico{color:var(--accent-text)}
.pl-nav .pl-badge{margin-left:auto}
.pl-side .pl-label{padding:14px 10px 6px}
.pl-top{background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-5)}
.pl-main{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.pl-topclock{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;font-weight:700;font-size:17px}
.pl-topclock small{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em}
.pl-pagehead{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ---------- Tables ---------- */
.pl-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;line-height:18px}
.pl-table th{position:sticky;top:0;background:var(--surface2);text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.pl-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;background:var(--surface)}
.pl-table tr:last-child td{border-bottom:0}
.pl-table tr.sel td{background:var(--accent-tint)}
.pl-table td.num,.pl-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.pl-table .pl-time{font-size:15px}

/* ---------- Rundown ---------- */
.pl-rd td{padding:8px 10px}
.pl-rd tr.onair td{background:var(--red-tint)}
.pl-rd tr.onair td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.pl-rd tr.done td{color:var(--muted)}
.pl-rd tr.done .pl-time{color:var(--muted)}
.pl-rd tr.edit td.editing{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--accent)}
.pl-rd .cue{font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.pl-rd .inp{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-variant-numeric:tabular-nums}
.pl-rd .chips{display:flex;flex-wrap:wrap;gap:4px}
.pl-rd .seg-t{font-weight:600}
.pl-rd .seg-s{color:var(--muted);font-size:12px}
.pl-gap td,.pl-ovl td{padding:0 !important;border-bottom:1px solid var(--border)}
.pl-flag{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;font-size:12px;font-weight:600}
.pl-gap .pl-flag{background:var(--yellow-tint);color:var(--yellow-ink)}
.pl-ovl .pl-flag{background:var(--red-tint);color:var(--red-ink)}
.pl-flag .pl-btn:first-of-type{margin-left:auto}
.nw{white-space:nowrap}
.pl-track{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:0 6px;height:18px;border-radius:var(--radius-badge);background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.pl-breakout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.pl-breakout > div{background:var(--surface);padding:8px 10px}

/* ---------- Avatars ---------- */
.pl-av{width:24px;height:24px;border-radius:50%;background:var(--border);border:1px solid var(--border);display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:var(--text);flex:none}
.pl-avs{display:inline-flex}.pl-avs .pl-av{margin-left:-6px;border-color:var(--surface)}.pl-avs .pl-av:first-child{margin-left:0}

/* ---------- Toast ---------- */
.pl-toast{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 14px;max-width:420px}
.pl-toast.info{border-color:var(--accent)}
.pl-toast.err{border-color:var(--red)}
.pl-diff{font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.pl-diff del{color:var(--red-ink);text-decoration:line-through}
.pl-diff ins{color:var(--green-ink);text-decoration:none}

/* ---------- Status pills (vMix) ---------- */
.pl-stat{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pl-stat.ok{color:var(--green-ink);border-color:transparent;background:var(--green-tint)}
.pl-stat.rec,.pl-stat.live{color:var(--on-red);background:var(--red);border-color:var(--red)}
.pl-stat.err{color:var(--red-ink);background:var(--red-tint);border-color:var(--red)}
.pl-tally{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:var(--radius-badge);font-size:12px;font-weight:800;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums}
.pl-tally.pgm{background:var(--red);border-color:var(--red);color:var(--on-red)}
.pl-tally.pvw{background:var(--green-tint);border-color:var(--green);color:var(--green-ink)}

/* ---------- LIVE ---------- */
.pl-live{background:var(--bg);color:var(--text);display:grid;gap:var(--space-4);padding:var(--space-5);font-variant-numeric:tabular-nums}
.pl-clock{font-size:96px;line-height:1;font-weight:800;letter-spacing:-.02em}
.pl-clock.lg{font-size:44px;letter-spacing:-.01em}
.pl-onair{display:flex;align-items:center;gap:16px;background:var(--red);color:var(--on-red);border-radius:var(--radius-card);padding:14px 20px;font-weight:800;font-size:22px}
.pl-onair .tag{font-size:13px;letter-spacing:.12em;padding:4px 10px;border:2px solid var(--on-red);border-radius:var(--radius-badge)}
.pl-next{border:1px solid var(--accent);background:var(--accent-tint);border-radius:var(--radius-card);padding:14px 20px}
.pl-livebtn{height:var(--live-btn-h);border-radius:var(--radius-control-lg);border:1px solid var(--border);background:var(--surface2);color:var(--text);font:800 20px/1 var(--font-sans);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.pl-livebtn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pl-livebtn.warn{background:var(--yellow-tint);border-color:var(--yellow);color:var(--yellow-ink)}
.over{color:var(--red-ink)}.under{color:var(--green-ink)}

/* ---------- Misc ---------- */
.pl-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}
.pl-kv dt{color:var(--muted)}.pl-kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.pl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px;border:1px dashed var(--border);border-radius:var(--radius-card);background:var(--surface)}
.pl-empty .ic{width:48px;height:48px;border-radius:var(--radius-card);background:var(--surface2);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent-text)}
.pl-skel{background:var(--surface2);border-radius:var(--radius-badge);height:12px;animation:pl-pulse 1.4s ease-in-out infinite}
@keyframes pl-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.pl-skel{animation:none}}
.pl-mask{letter-spacing:.12em;font-variant-numeric:tabular-nums}
.pl-map{position:relative;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface2);overflow:hidden}
.pl-mapgrid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:24px 24px;opacity:.6}
.pl-pin{position:absolute;width:28px;height:28px;margin:-28px 0 0 -14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);border:3px solid var(--bg)}
.pl-a4{background:#ffffff;color:#13151a;aspect-ratio:210/297;border-radius:4px;padding:28px;font-size:10px;line-height:14px}
.pl-a4 .pl-label{color:#5b6472;font-size:8px;line-height:11px}
.pl-a4 table{width:100%;border-collapse:collapse}
.pl-a4 td,.pl-a4 th{border-bottom:1px solid #d8dce3;padding:4px 4px;text-align:left;font-variant-numeric:tabular-nums}
.pl-a4 th{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#5b6472}
.pl-phone{width:375px;border:1px solid var(--border);border-radius:28px;background:var(--bg);overflow:hidden;flex:none}
.pl-phone-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pl-guestbar{display:flex;align-items:center;gap:8px;height:34px;padding:0 var(--space-5);background:var(--accent-tint-strong);color:var(--accent-text);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}