/* Hosted layer: sign-in gate, offline banner, touch navigation, focus states, empty states and the
   390x844 mobile contract. Loaded AFTER css/app.css so it only adds and overrides — the owner's
   approved dark visual identity (colours, type, panels) is untouched. */

/* ---------------------------------------------------------------- sign-in gate */
.auth-gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:460px;padding:34px}
.auth-brand{padding:0 0 22px}
.auth-blurb{color:#9da6b2;font-size:13px;line-height:1.6;margin:0 0 10px}
.auth-field{display:flex;flex-direction:column;gap:8px;color:#8e98a4;font-size:11px;margin:14px 0}
.auth-field input{background:#0b0f14;color:#fff;border:1px solid #303844;border-radius:10px;
  padding:11px 12px;width:100%;min-height:44px;outline:0}
.auth-field input:focus{border-color:rgba(255,107,24,.55);box-shadow:0 0 0 3px rgba(255,107,24,.12)}
.auth-actions{display:grid;gap:9px;margin-top:18px}
.auth-foot{font-size:11px;margin:16px 0 0}

/* ---------------------------------------------------------------- offline + shell */
.offline-banner{position:fixed;left:0;right:0;top:0;z-index:1200;background:#ffb24a;color:#1a1206;
  font-weight:800;font-size:12px;letter-spacing:.02em;padding:10px 16px;text-align:center}
body.is-offline .topbar{top:38px}
.hosted-note{color:#4b5560}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:29}
.empty-state{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px dashed #2b323d;
  border-radius:14px;color:#8b95a1;font-size:12px;line-height:1.55;background:rgba(255,255,255,.012)}
.empty-state b{color:#e8ebef;font-size:13px}

/* Long names must wrap inside their card, never overflow the card or the page. */
.term-card h3,.project-card h3,.queue-item strong,.selected-chip{overflow-wrap:anywhere;word-break:break-word}
.term-cat,.project-company{overflow-wrap:anywhere}
.term-card,.project-card{min-width:0}
.term-grid,.project-grid,.discovery-list,.dashboard-grid{min-width:0}
.ai-output,.coach-content{overflow-wrap:anywhere}

/* Visible focus for keyboard users on every control, including the ported nav buttons. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #ff8b3d;outline-offset:2px;border-radius:8px}

/* Touch contract: every interactive control is at least 44x44 CSS px. */
button,.primary-btn,.secondary-btn,.ghost-btn,.icon-btn,.nav-item,.rate,.mini-rate button,
.term-actions button,.modal-close,.file-label,.link-btn,.prompt-chips button,.concept-option,
.bottom-nav button{min-height:44px;min-width:44px}
.term-actions button{width:44px;height:44px}
.icon-btn{width:44px;height:44px}
.nav-item{padding:12px 14px}
input,select,textarea{min-height:44px}
textarea{min-height:64px}
.rate{padding:14px 10px}
.settings-actions{display:flex;flex-wrap:wrap;gap:10px}
.inline-check{display:flex;align-items:center;gap:10px;min-height:44px}
.inline-check input{min-height:0;min-width:24px;width:24px;height:24px}
label.role-check{min-height:44px;display:flex;align-items:center;gap:10px}

/* Bottom touch navigation replaces the fixed sidebar below 900px. */
.bottom-nav{display:none}

/* Provider readout on Settings (replaces the retired per-user Ollama credential surface). */
.provider-readout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.provider-readout>div{border:1px solid #252d36;border-radius:11px;background:#0f141a;padding:11px 12px}
.provider-readout span{display:block;font-size:9px;letter-spacing:.15em;color:#6d7783;font-weight:900}
.provider-readout strong{display:block;margin-top:6px;font-size:13px;color:#e6eaee;overflow-wrap:anywhere}

/* ---------------------------------------------------------------- <=900px: drawer + bottom nav */
@media (max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(84vw,320px);height:100dvh;
    transform:translateX(-105%);transition:transform .22s ease;z-index:40;overflow-y:auto}
  .sidebar.open{transform:translateX(0)}
  .page{padding:18px 16px 96px}
  .main{padding-bottom:0}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:35;background:rgba(8,10,13,.97);border-top:1px solid #242a34;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
  .bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:transparent;border:0;color:#8b95a1;font-size:9px;font-weight:800;letter-spacing:.04em;
    padding:6px 2px;border-radius:10px;min-height:44px}
  .bottom-nav button span{font-size:16px;line-height:1}
  .bottom-nav button.active{color:#ff8b3d;background:rgba(255,107,24,.1)}
  .topbar{height:auto;padding:14px 16px;gap:10px}
  .mobile-menu{display:grid;place-items:center;width:44px;height:44px;margin-right:2px}
  .topbar h1{font-size:19px}
  .top-actions{gap:8px}
  .top-actions .ghost-btn{min-height:44px}
  .avatar{width:44px;height:44px}
  .hero-panel{padding:24px}
  .provider-readout{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- 390x844 mobile contract */
@media (max-width:620px){
  html,body{max-width:100%;overflow-x:hidden}
  .page{padding:14px 14px 96px}
  .hero-copy h2,.discover-hero h2,.projects-head h2{font-size:30px;letter-spacing:-.03em}
  .metric-stack{grid-template-columns:1fr 1fr;gap:10px}
  .metric-card{min-height:118px;padding:16px}
  .metric-card strong{font-size:30px}
  .term-card h3{font-size:17px}
  .flash-question h2{font-size:34px}
  .self-rate{grid-template-columns:1fr 1fr}
  .toolbar-panel{grid-template-columns:1fr;padding:12px}
  .priority-row{grid-template-columns:1fr 46px}
  .priority-row .bar{grid-column:1/-1;grid-row:2}
  .topbar h1{font-size:18px}
  .eyebrow{font-size:9px}
  .coach-thread{min-height:320px;height:auto}
  .auth-card{padding:22px}
  .provider-readout{grid-template-columns:1fr}
  .modal{padding:16px}
  .flash-answer{grid-template-columns:1fr}
  .flash-notes-section{grid-column:1/-1}
  .study-layout,.interview-grid,.coach-layout,.connect-layout,.settings-grid,.discover-grid{grid-template-columns:1fr}
  .settings-actions{flex-direction:column;align-items:stretch}
  .settings-actions>*{width:100%;justify-content:center}
}

/* 120-character-name adversarial case must stay inside the card at any width. */
.term-card h3.long-name{font-size:15px;line-height:1.3}

/* Checkboxes and radios: a 44x44 touch target with a 24x24 visual box.
   The bare inputs measured 13-24 px wide, which fails the 44 px touch contract even though the
   surrounding label was tall enough. The box is drawn with pseudo-elements so the glyph stays small. */
input[type="checkbox"],input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  padding:0!important;background:transparent!important;border:0!important;position:relative;
  cursor:pointer;flex:0 0 auto}
input[type="checkbox"]::before,input[type="radio"]::before{
  content:'';position:absolute;left:10px;top:10px;width:24px;height:24px;
  border:1px solid #3c4753;border-radius:6px;background:#0b0f14;box-sizing:border-box}
input[type="radio"]::before{border-radius:50%}
input[type="checkbox"]:checked::before,input[type="radio"]:checked::before{
  background:var(--orange,#ff6b18);border-color:var(--orange,#ff6b18)}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:17px;top:15px;width:11px;height:6px;
  border-left:2px solid #10141a;border-bottom:2px solid #10141a;transform:rotate(-45deg)}
input[type="radio"]:checked::after{
  content:'';position:absolute;left:19px;top:19px;width:6px;height:6px;border-radius:50%;
  background:#10141a}