/* Stoic Agent Hub — app layout on top of stoic.css tokens.
   Layout: fixed navy sidebar (desktop) / top bar + drawer (phone); content on a deep-navy canvas with raised panels. */
body.hub-page { background: var(--navy-deep); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.72rem; letter-spacing: 0.1em; }
.btn svg { width: 14px; height: 14px; }
.eyebrow-gold { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.32em; color: var(--gold); }

/* Gate */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px max(18px, env(safe-area-inset-right, 0px)) 32px max(18px, env(safe-area-inset-left, 0px));
  background: radial-gradient(120% 80% at 50% 0%, var(--navy-raised), var(--navy-deep) 70%); }
.gate-card { width: min(100%, 400px); display: grid; gap: 18px; justify-items: stretch; text-align: center; }
.gate-mark { width: 84px; height: 76px; color: var(--cream); justify-self: center; }
.gate-head { display: grid; gap: 8px; }
.gate-head h1 { font-size: 2.2rem; }
.gate-head p:last-child { color: var(--mist); font-size: 0.95rem; }
.gate-input { min-height: 54px; background: var(--navy); border: 1px solid var(--navy-line); color: var(--cream); border-radius: var(--radius); padding: 0 16px; font: inherit; font-size: 1rem; text-align: center; letter-spacing: 0.08em; }
.gate-input::placeholder { color: var(--mist-dim); letter-spacing: 0; }
.gate-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 82, .2); }
.gate-err { color: #E7A291; font-size: var(--t-sm); }
.gate-back { color: var(--mist); font-size: var(--t-sm); }

/* Shell */
.hub { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.hub-top { display: none; }
.hub-side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--navy); border-right: 1px solid var(--navy-line); display: flex; flex-direction: column; gap: 22px; padding: 26px 18px 22px; }
.hub-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.hub-brand svg { width: 38px; height: 34px; color: var(--cream); flex: none; }
.hub-brand span { display: grid; line-height: 1; }
.hub-brand b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.16em; }
.hub-brand small { font-family: var(--display); font-size: 0.56rem; letter-spacing: 0.36em; color: var(--gold); margin-top: 5px; }
.side-brand { padding: 0 8px 18px; border-bottom: 1px solid var(--navy-line); }
.side-nav { display: grid; gap: 2px; }
.side-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); padding: 16px 12px 6px; }
.side-label:first-child { padding-top: 0; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 4px; color: var(--mist); text-decoration: none; font-size: 0.95rem; font-weight: 500; position: relative; transition: background-color .15s, color .15s; }
.side-nav a svg { width: 18px; height: 18px; flex: none; }
.side-nav a:hover { background: var(--navy-raised); color: var(--cream); }
.side-nav a[aria-current="page"] { background: var(--navy-raised); color: var(--cream); }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: var(--gold); }
.side-nav a[aria-current="page"] svg { color: var(--gold); }
.side-foot { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid var(--navy-line); padding-top: 16px; }
.side-foot a, .side-foot button { background: none; border: 0; text-align: left; font: inherit; font-size: var(--t-sm); color: var(--mist-dim); padding: 8px 12px; text-decoration: none; cursor: pointer; border-radius: 4px; }
.side-foot a:hover, .side-foot button:hover { color: var(--cream); background: var(--navy-raised); }
.hub-scrim { position: fixed; inset: 0; background: rgba(3, 8, 16, .6); z-index: 40; }

.hub-main { min-width: 0; padding: 40px clamp(20px, 4vw, 56px) 48px; outline: none; }
.view { max-width: 1120px; display: grid; gap: 24px; }
.view-head { display: grid; gap: 8px; padding-bottom: 6px; }
.view-head h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.view-head p { color: var(--mist); max-width: 64ch; }
.today { font-size: var(--t-sm); color: var(--gold); font-weight: 600; letter-spacing: 0.04em; }
.block-title { font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); margin-top: 12px; }
.hub-foot { max-width: 1120px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--navy-line); color: var(--mist-dim); font-size: var(--t-xs); }

@media (max-width: 980px) {
  .hub { grid-template-columns: 1fr; }
  .hub-top { display: flex; align-items: center; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; min-height: 60px;
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    background: rgba(10, 26, 47, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--navy-line); }
  .hub-menu { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--navy-line); border-radius: 4px; color: var(--cream); cursor: pointer; }
  .hub-menu svg { width: 22px; height: 22px; }
  .hub-top .hub-brand svg { width: 30px; height: 27px; }
  .hub-top .hub-brand b { font-size: 1rem; }
  .hub-side { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: min(84vw, 300px); height: auto; transform: translateX(-102%); transition: transform .25s ease;
    padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-left: max(18px, env(safe-area-inset-left, 0px)); }
  .hub-side.is-open { transform: none; box-shadow: 20px 0 50px rgba(0, 0, 0, .45); }
  .hub-main { padding: 26px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .hub-side { transition: none; } }

/* Home */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; text-decoration: none; color: var(--cream); transition: border-color .15s, background-color .15s; min-width: 0; }
.quick-card svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.quick-card span { display: grid; gap: 2px; min-width: 0; }
.quick-card b { font-weight: 600; font-size: 0.98rem; }
.quick-card small { color: var(--mist-dim); font-size: var(--t-xs); }
.quick-card:hover { border-color: var(--gold); }
.quick-card.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.quick-card.primary svg { color: var(--navy); }
.quick-card.primary small { color: rgba(10, 26, 47, .72); }
.quick-card.primary:hover { background: var(--gold-hi); }
@media (max-width: 1100px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .quick { grid-template-columns: 1fr; } }

.platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.platform { background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.platform-top { display: grid; gap: 10px; }
.platform h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }
.platform > p { color: var(--mist); font-size: 0.92rem; line-height: 1.55; }
.platform .btn { justify-self: start; margin-top: 2px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-hi); border: 1px solid rgba(200, 162, 82, .35); border-radius: 999px; padding: 3px 9px; }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); color: var(--mist); background: var(--navy-raised); padding: 8px 10px; border-radius: 4px; }
.note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--gold); }

/* Shared */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; background: var(--navy); border: 1px solid var(--navy-line); border-left: 3px solid var(--gold); border-radius: 6px; padding: 16px 18px; }
.banner > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.banner b { font-weight: 600; }
.banner span { color: var(--mist); font-size: 0.92rem; }
.banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mist-dim); pointer-events: none; }
.search input { width: 100%; min-height: 46px; padding: 0 14px 0 42px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; color: var(--cream); font: inherit; font-size: 0.95rem; }
.search input:focus { outline: none; border-color: var(--gold); }
.count { color: var(--mist-dim); font-size: var(--t-sm); }
.empty { color: var(--mist); padding: 24px 0; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; background: none; border: 1px solid var(--navy-line); border-radius: 4px; color: var(--mist); cursor: pointer; flex: none; }
.icon-btn svg { width: 15px; height: 15px; grid-area: 1 / 1; }
.icon-btn[data-copy] svg:last-child { opacity: 0; }
.icon-btn:hover { color: var(--cream); border-color: var(--mist-dim); }
.icon-btn.done { color: var(--gold); border-color: var(--gold); }
.icon-btn.done svg:first-child { opacity: 0; }
.icon-btn.done svg:last-child { opacity: 1; }

/* Carriers */
.carriers { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.carrier { background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.carrier-head { display: flex; align-items: center; gap: 12px; }
.mono-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: var(--navy-raised); border: 1px solid var(--navy-line); font-family: var(--display); font-weight: 600; color: var(--gold); font-size: 0.95rem; }
.carrier h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }
.phones { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--navy-line); }
.phones li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--navy-line); }
.ph-label { font-size: var(--t-sm); color: var(--mist); min-width: 0; }
.ph-num { font-variant-numeric: tabular-nums; color: var(--cream); font-weight: 600; text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.ph-num:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.phones .ph-none { display: block; color: var(--mist-dim); font-size: var(--t-sm); }

/* Scripts & rows */
.scripts { display: grid; gap: 10px; }
.script { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 14px 16px; }
.script-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.script h3 { font-family: var(--body); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; }
.script p { color: var(--mist-dim); font-size: var(--t-sm); }
.script-actions { display: flex; gap: 8px; }
.doc-tile { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: var(--navy-raised); color: var(--gold); flex: none; }
.doc-tile svg { width: 18px; height: 18px; }
.drive-link { justify-self: start; font-size: var(--t-sm); }
.rows { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; text-decoration: none; color: var(--cream); transition: border-color .15s; }
.row:hover { border-color: var(--gold); }
.row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.row-text b { font-weight: 600; font-size: 0.98rem; }
.row-text small { color: var(--mist-dim); font-size: var(--t-xs); }
.row > svg:last-child { width: 16px; height: 16px; color: var(--mist-dim); flex: none; }

/* Licensing */
.tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-btn { font: inherit; font-size: var(--t-xs); font-weight: 600; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--navy-line); background: var(--navy); color: var(--mist); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tier-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, transparent); }
.tier-btn[data-tier="all"]::before { display: none; }
.tier-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--cream); background: var(--navy-raised); }
.t1 { --tc: #6FB08B; } .t2 { --tc: #C8A252; } .t3 { --tc: #D98A4E; } .t4 { --tc: #D2675A; }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; padding-bottom: 76px; }
.state { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: var(--navy); border: 1px solid var(--navy-line); border-left: 3px solid var(--tc); border-radius: 4px; color: var(--cream); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.state b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mist); }
.state:hover { background: var(--navy-raised); }
.state[aria-pressed="true"] { background: var(--navy-raised); border-color: var(--gold); border-left-color: var(--tc); box-shadow: inset 0 0 0 1px var(--gold); }
.state[aria-pressed="true"] b { color: var(--gold-hi); }
.estimate { position: sticky; bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 16px; justify-self: start; background: var(--cream); color: var(--navy); border-radius: 999px; padding: 10px 12px 10px 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); margin-top: -64px; }
.estimate span { font-size: var(--t-sm); font-weight: 500; }
.estimate b { font-family: var(--display); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.estimate .link-btn { color: var(--navy); padding: 6px 10px; }

/* Comp */
.comp { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.comp-side { display: grid; gap: 12px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 20px; }
.comp-intro { color: var(--mist); font-size: var(--t-sm); }
.comp-list { list-style: none; display: grid; gap: 0; }
.comp-list li { padding: 10px 0; border-bottom: 1px solid var(--navy-line); font-weight: 500; }
.comp-side .fine { color: var(--mist-dim); }
.comp-fig { margin: 0; display: grid; gap: 12px; justify-items: start; }
.comp-fig img { width: 100%; border-radius: 6px; border: 1px solid var(--navy-line); background: var(--navy); }
@media (max-width: 860px) { .comp { grid-template-columns: 1fr; } }

/* My carrier info */
.privacy { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--mist); background: var(--navy); border: 1px dashed var(--navy-line); border-radius: 6px; padding: 12px 14px; }
.privacy svg { width: 16px; height: 16px; flex: none; color: var(--gold); margin-top: 2px; }
.mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mine-card { background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.mine-card h3 { font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.mine-card label { display: grid; gap: 4px; }
.mine-card label > span { font-size: 0.72rem; color: var(--mist-dim); font-weight: 600; letter-spacing: 0.04em; }
.mine-card input, .link-form input { min-height: 40px; background: var(--navy-deep); border: 1px solid var(--navy-line); border-radius: 4px; color: var(--cream); padding: 0 10px; font: inherit; font-size: 0.92rem; width: 100%; }
.mine-card input:focus, .link-form input:focus { outline: none; border-color: var(--gold); }
.mine-name input { font-weight: 600; }
.mine-card .link-btn { justify-self: start; color: var(--mist-dim); padding: 4px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copied { font-size: var(--t-sm); color: var(--gold-hi); }

/* My links */
.link-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 18px; align-items: end; }
.link-form label { display: grid; gap: 6px; min-width: 0; }
.link-form label > span { font-size: var(--t-xs); font-weight: 600; color: var(--mist); }
.link-form label i { font-style: normal; color: var(--mist-dim); font-weight: 400; }
.link-form .wide { grid-column: 1 / -1; }
.link-form .btn { justify-self: start; }
.link-form .gate-err { grid-column: 1 / -1; }
@media (max-width: 560px) { .link-form { grid-template-columns: 1fr; } }
.my-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.my-link { display: flex; align-items: center; gap: 10px; background: var(--navy); border: 1px solid var(--navy-line); border-radius: 6px; padding: 12px 12px 12px 16px; }
.my-link a { display: grid; gap: 2px; flex: 1; min-width: 0; text-decoration: none; color: var(--cream); }
.my-link b { font-weight: 600; }
.my-link small { color: var(--mist-dim); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-link a:hover b { color: var(--gold-hi); }

/* Shared access passwords (decrypted after sign-in) */
.secret { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--navy-raised); border-radius: 4px; padding: 8px 10px; font-size: var(--t-xs); color: var(--mist); }
.secret > svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.secret code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--cream); background: var(--navy-deep); padding: 3px 8px; border-radius: 3px; }
.secret .icon-btn { width: 30px; height: 30px; margin-left: auto; }
.secret > span { flex: 1 1 calc(100% - 30px); }