/* =========================================================
   3KONA app — shared components
   Requires app-theme.css (tokens only — no raw colours here). Every page uses THESE classes so a
   control looks + behaves identically everywhere.
   ========================================================= */

/* ---- utilities ---- */
.hidden{display:none!important}          /* canonical utility; wins over any page display rule */
.u-mono{font-family:var(--mono)}
.u-muted{color:var(--muted)}
.u-right{text-align:right}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:14px;line-height:1;border-radius:var(--radius);padding:10px 16px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap;text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.btn-primary{background:var(--accent);color:var(--on-accent);font-weight:700}
.btn-primary:hover{background:var(--accent-press)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--muted);background:var(--soft)}
.btn-danger{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.btn-danger:hover{background:color-mix(in srgb,var(--warn) 24%,transparent)}
.btn-ghost.btn-danger{background:transparent;border-color:var(--line-2)}
.btn svg{width:15px;height:15px;flex:none}
.btn-sm{padding:7px 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- form fields ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.field label .u{color:var(--accent);font-family:var(--mono);font-size:10px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);padding:10px 12px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--bg)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.7}
.field input:disabled{color:var(--muted);cursor:not-allowed}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .hint{font-size:11px;color:var(--muted);margin-top:4px}
.field .err{font-size:11px;color:var(--warn);margin-top:4px}

/* native selects — one consistent chevron everywhere */
select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}

/* ---- combobox (searchable pick-or-type) ---- */
.cbx{position:relative}
.cbx>input{padding-right:30px}
.cbx-chev{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);display:flex;cursor:pointer;transition:transform .12s}
.cbx-chev svg{width:14px;height:14px}
.cbx.open .cbx-chev{transform:translateY(-50%) rotate(180deg)}
.cbx-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-pop);max-height:230px;overflow:auto;padding:4px}
.cbx-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--ink);cursor:pointer}
.cbx-opt:hover,.cbx-opt.hl{background:var(--accent-soft)}
.cbx-opt.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cbx-meta{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.cbx-add{color:var(--accent);font-weight:600;border-top:1px solid var(--line);margin-top:2px}
.cbx-add svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.cbx-empty{padding:10px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---- pills (single-select chips) ---- */
.pill{border:1.5px solid var(--line-2);background:var(--bg);border-radius:var(--radius);padding:8px 14px;font-weight:600;font-size:13px;color:var(--ink-2);cursor:pointer;font-family:var(--sans)}
.pill:hover{border-color:var(--muted)}
.pill.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ---- eyebrow (mono kicker above a title) ---- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- cards ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow)}
.cardrow{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;background:var(--soft)}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);background:var(--soft);color:var(--ink-2)}
.badge.accent{background:var(--accent-soft);color:var(--accent)}
.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}

/* ---- tabs ---- */
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{padding:9px 2px;font:inherit;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink-2)}
.tab.sel{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- modal ---- */
.modal-ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:var(--overlay);padding:20px}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);color:var(--ink);padding:22px;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal-h{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:14px}
.modal-x{border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}

/* ---- toasts ---- */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{display:flex;align-items:flex-start;gap:9px;background:var(--card);border:1px solid var(--line-2);border-left:3px solid var(--muted);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:11px 13px;font-size:13px;color:var(--ink);animation:toastin .18s ease}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--accent)}
@keyframes toastin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================= app shell (sidebar + topbar) ================= */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
@media(max-width:820px){.app{grid-template-columns:64px 1fr}}
.side{background:var(--dark);border-right:1px solid var(--line);color:var(--ink-2);display:flex;flex-direction:column;padding:16px 12px;gap:4px;position:sticky;top:0;height:100vh}
.side .logo{display:flex;align-items:center;padding:8px 10px 16px;text-decoration:none}
.side .logo img{display:block;width:124px;height:auto}
.wordmark{display:block;width:124px;height:auto}
.navi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);font-weight:600;font-size:14px;line-height:20px;cursor:pointer;text-decoration:none;color:var(--ink-2)}
.navi svg{width:18px;height:18px;flex:none}
.navi:hover{background:var(--soft);color:var(--ink)}
.navi.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.navi .lbl{white-space:nowrap}
@media(max-width:820px){.side .logo{padding:8px 0 16px;justify-content:center}.side .logo img{width:40px}.navi .lbl{display:none}}
.side .spacer{flex:1}
.side .small{font-size:11px;color:var(--muted);padding:8px 12px}
@media(max-width:820px){.side .small{display:none}}
.shellmain{display:flex;flex-direction:column;min-width:0}
.shellbar{min-height:64px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 22px;position:sticky;top:0;z-index:30}
.shellbar .grow{flex:1}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb b{color:var(--ink);font-weight:700}
.crumb b:not(:empty)::after{content:" / ";color:var(--muted);font-weight:400}
@media(max-width:560px){.shellbar{flex-wrap:wrap;gap:8px;padding:10px 14px}.shellbar .wide-only{display:none}}
.acctwrap{position:relative}
.acct{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:2px;font:inherit;color:var(--ink)}
.acct .av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:12px;font-weight:700;overflow:hidden}
.acct .av img{width:100%;height:100%;object-fit:cover}
.acctchev{width:13px;height:13px;color:var(--muted)}
.acctmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:6px}
.amhdr{font-size:11px;color:var(--muted);padding:6px 10px 4px}
.amhdr b{color:var(--ink)}
.amitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);padding:9px 10px;border-radius:8px;text-decoration:none}
.amitem:hover{background:var(--soft)}
.amitem svg{width:16px;height:16px;color:var(--muted)}
.side a.small{text-decoration:none;border-radius:8px}
.side a.small:hover{color:var(--accent)}

/* ---- page body: one container + one header for every shell page ---- */
.content{width:100%;max-width:1320px;margin:0 auto;padding:var(--gutter) var(--gutter) 64px;display:flex;flex-direction:column;gap:18px}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vhead-t{min-width:0;flex:1 1 280px}
.vhead h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin:6px 0 0;line-height:1.15;overflow-wrap:anywhere}
.vhead .sub{color:var(--muted);font-size:13.5px;margin:6px 0 0;max-width:72ch;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.vhead .sub a{text-decoration:none}
.vhead .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- notices: plan state, setup gaps, anything the shell says out loud ---- */
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:var(--radius-lg);background:var(--accent-soft);border:1px solid var(--accent-line);font-size:13.5px;color:var(--ink)}
.banner.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.banner .grow{flex:1 1 220px}
.banner svg{width:18px;height:18px;flex:none;color:var(--accent)}
.banner.warn svg{color:var(--warn)}
/* The shell's own plan strip, above the page content on every console page. */
.planbar{width:100%;max-width:1320px;margin:var(--gutter) auto -6px;padding:0 var(--gutter)}