/* ============================================================================
   DaisyOne springboard — STUB shell (tablet-first, Navy Luxe)
   Source of truth for my.daisyone.app + hq.daisyone.app stub surfaces.
   Core Navy Luxe tokens are inlined below so the stub is self-contained;
   PRODUCTION should instead <link> the canon: /_brand/tokens.css
   (= _CANON/brand/tokens.css v2). Keep these values in sync until then.
   ============================================================================ */
:root{
  --deep:#122c4f; --deep-2:#1b3a66; --mid:#5b88b2; --tint:#e2e9f1;
  --page:#fbf9e4; --card:#ffffff; --text:#14171f; --muted:#5b6473; --line:#e7e3d3;
  --metal:#b9bcc2;
  --gold:linear-gradient(135deg,#f3e6bd,#d9bd77 28%,#b9974e 52%,#e9d6a0 78%,#c6a75e);
  --gold-solid:#d7be80; --on-gold:#14171f;
  --on-deep:#ffffff; --on-deep-muted:#c8d0dc;
  --focus-ring:0 0 0 2px rgba(18,44,79,0.55);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--page); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- top chrome (navy bar) ---- */
.sb-chrome{
  display:flex; align-items:center; gap:14px;
  background:var(--deep); color:var(--on-deep);
  padding:12px 18px; box-shadow:0 1px 0 var(--deep-2);
  position:sticky; top:0; z-index:10;
}
.sb-door{ /* Comm door, top-left per jny pattern */
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid var(--deep-2);
  color:var(--on-deep); text-decoration:none; font-size:19px; cursor:pointer;
}
.sb-door:hover{background:rgba(255,255,255,.16)}
.sb-brand{display:flex; align-items:baseline; gap:9px; font-weight:800; letter-spacing:.2px; font-size:18px}
.sb-brand b{ background:var(--gold); -webkit-background-clip:text; background-clip:text; color:transparent }
.sb-badge{
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:8px; background:var(--gold); color:var(--on-gold);
}
.sb-spacer{flex:1}
.sb-expand{ /* web / expand affordance — the PRO 'open the bigger surface' button */
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:var(--on-deep); text-decoration:none; padding:8px 12px; border-radius:9px;
  border:1px solid var(--deep-2); background:rgba(255,255,255,.06);
}
.sb-expand:hover{background:rgba(255,255,255,.14)}
.sb-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--mid); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  border:2px solid var(--gold-solid);
}

/* ---- stub auth banner (honest: not really gated yet) ---- */
.sb-stub{
  background:#fff6da; color:#5a4a17; border-bottom:1px solid #e7d9a8;
  font-size:12.5px; padding:7px 18px; text-align:center;
}
.sb-stub b{font-weight:800}

/* ---- canvas ---- */
.sb-canvas{max-width:1180px; margin:0 auto; padding:26px 22px 60px}
.sb-greeting{margin:6px 2px 20px}
.sb-greeting h1{margin:0 0 4px; font-size:24px; letter-spacing:-.3px}
.sb-greeting p{margin:0; color:var(--muted); font-size:14px}

/* tablet-first tile grid: large, touch-sized, roomy */
.sb-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:11px; padding:20px 12px 16px; min-height:138px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  text-decoration:none; color:var(--text); cursor:pointer;
  box-shadow:0 1px 2px rgba(20,23,31,.05), 0 16px 36px -26px rgba(20,30,55,.45);
  transition:transform .08s ease, box-shadow .12s ease;
}
.tile:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(20,23,31,.07),0 22px 44px -24px rgba(20,30,55,.5)}
.tile:focus-visible{outline:none; box-shadow:var(--focus-ring),0 16px 36px -26px rgba(20,30,55,.45)}
.tile .ico{
  width:62px; height:62px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:30px; background:var(--deep); color:var(--on-deep);
}
.tile .ico.gold{background:var(--gold); color:var(--on-gold)}
.tile .ico.mid{background:var(--tint); color:var(--deep)}
.tile .lbl{font-size:13.5px; font-weight:700; text-align:center; line-height:1.2}
.tile .sub{font-size:11px; color:var(--muted); text-align:center; margin-top:-4px}

/* a folder tile = 2x2 mini icon grid (per jny folder model) */
.tile.folder .ico{background:var(--tint); display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:9px; font-size:0}
.tile.folder .ico i{background:var(--deep); border-radius:5px; width:100%; height:100%; display:block; opacity:.9}
.tile.folder .ico i:nth-child(2){background:var(--mid)}
.tile.folder .ico i:nth-child(3){background:var(--gold-solid)}
.tile.folder .ico i:nth-child(4){background:var(--deep-2)}

.sb-section{margin:30px 2px 12px; font-size:11.5px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--muted)}

.sb-foot{max-width:1180px; margin:0 auto; padding:8px 22px 40px; color:var(--muted); font-size:11.5px}

@media (max-width:560px){ /* phone fallback — daisyone phone really gets its own subdomain */
  .sb-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:13px}
  .tile{min-height:118px; padding:16px 8px 12px}
  .tile .ico{width:52px;height:52px;font-size:25px}
}