/* Owner shell — desktop first.
   The owner works on a computer (decided 14 Aug), so this build assumes a
   wide screen with a mouse: a permanent rail, multi-column boards, and
   tables that show many rows at once. It still degrades to a tablet, but it
   is not squeezed into a phone layout the way the customer build is. */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(circle at 88% -4%,rgba(185,120,0,.13),transparent 30rem),var(--ffz-bg);
  color:var(--ffz-text);
  font-family:var(--ffz-font);
  font-size:14px;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ffz-gold-light);outline-offset:3px}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
del{color:var(--ffz-muted)}

.app{display:grid;grid-template-columns:var(--ffz-rail) minmax(0,1fr);min-height:100vh}
/* .app sets its own display, so the hidden attribute needs an explicit win —
   without this the console stays laid out and tabbable behind the login. */
.app[hidden]{display:none}
.app.is-collapsed{grid-template-columns:var(--ffz-rail-collapsed) minmax(0,1fr)}

/* ---- left rail ---------------------------------------------------- */
.rail{
  position:sticky;top:0;height:100vh;overflow:auto;z-index:5;
  display:flex;flex-direction:column;gap:var(--ffz-gap);
  padding:18px 14px;
  border-right:1px solid rgba(255,189,22,.22);
  background:linear-gradient(180deg,#0c0b08 0,#050505 55%,#090704 100%);
}
.rail-brand{display:flex;align-items:center;gap:11px;min-height:52px;padding:0 4px}
.rail-brand img{width:44px;height:44px;object-fit:contain}
.rail-brand strong{display:block;font-size:14px;letter-spacing:.03em}
.rail-brand small{display:block;color:var(--ffz-gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

.rail-toggle{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;
  width:100%;min-height:46px;padding:5px 10px;
  border:1px solid #343434;border-radius:12px;
  background:#080808;color:var(--ffz-muted);
  font-weight:600;font-size:12px;text-align:left;
}
.rail-toggle i{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #5f4710;border-radius:10px;
  color:var(--ffz-gold-light);font-style:normal;line-height:0;
}
.rail-toggle svg{transition:transform .16s}
.app.is-collapsed .rail-toggle svg{transform:rotate(180deg)}
.rail-label{margin:2px 8px 0;color:#736d63;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* Ten destinations have to fit without scrolling on a laptop, so rows are a
   little tighter than the coach build (48px, not 56px). */
.nav{display:grid;gap:4px}
.nav button{
  position:relative;
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;min-height:48px;padding:7px 10px;
  border:1px solid transparent;border-radius:12px;
  background:transparent;color:#d6d2c9;
  font-weight:600;font-size:14px;text-align:left;
}
.nav button i{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #383838;border-radius:10px;
  color:#bbb;font-style:normal;line-height:0;
}
.nav button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a count of things waiting on the owner, right in the rail */
.nav .pill{
  flex:none;min-width:22px;padding:1px 7px;
  border-radius:var(--ffz-radius-pill);
  background:var(--ffz-gold);color:#171107;
  font-size:10px;font-weight:700;text-align:center;
}
.nav button.is-active{
  border-color:#a97608;background:var(--ffz-surface-gold);color:var(--ffz-gold-light);
  box-shadow:inset 4px 0 var(--ffz-gold);
}
.nav button.is-active i{border-color:#76550d;color:var(--ffz-gold-light)}

.rail-who{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding:9px;
  border:1px solid var(--ffz-line);border-radius:12px;background:#080808;
}
.rail-who .avatar{
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  border:1px solid var(--ffz-line-gold);border-radius:50%;
  background:var(--ffz-surface-gold);color:var(--ffz-gold-light);
  font-size:13px;font-weight:700;
}
.rail-who b{display:block;font-size:12px}
.rail-who small{display:block;color:var(--ffz-muted);font-size:10px}

.app.is-collapsed .rail{padding-inline:9px}
.app.is-collapsed .rail-brand strong,
.app.is-collapsed .rail-brand small,
.app.is-collapsed .rail-toggle span,
.app.is-collapsed .rail-label,
.app.is-collapsed .rail-who div,
.app.is-collapsed .nav button span,
.app.is-collapsed .nav .pill{display:none}
.app.is-collapsed .rail-brand,
.app.is-collapsed .rail-who{justify-content:center}
.app.is-collapsed .rail-toggle,
.app.is-collapsed .nav button{grid-template-columns:1fr;justify-items:center}

/* ---- main column --------------------------------------------------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;gap:12px;
  padding:12px 22px;
  border-bottom:1px solid var(--ffz-line);
  background:rgba(2,2,2,.93);
}
.topbar-title{min-width:0}
.topbar-title b{display:block;font-size:16px}
.topbar-title small{display:block;color:var(--ffz-muted);font-size:11px}
.topbar-spacer{flex:1}
.topbar-range{
  display:flex;align-items:center;gap:8px;
  padding:7px 13px;min-height:40px;
  border:1px solid var(--ffz-line);border-radius:var(--ffz-radius-pill);
  background:var(--ffz-surface);color:var(--ffz-muted);font-size:12px;
}
.topbar-range b{color:var(--ffz-text)}

/* Boards are capped so text lines stay readable on a 27" monitor, but the
   cap is generous — the owner came here for density. */
.screen{flex:1;min-width:0;padding:20px 22px 40px}
.screen-inner{max-width:1520px;margin:0 auto}

.stack{display:grid;gap:14px}
.stack>*,.grid-2>*,.grid-3>*,.grid-4>*,.split>*,.split-wide>*{min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* decisions on the left, context on the right */
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.split-wide{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start}

@media (max-width:1300px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .split,.split-wide,.grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}
  .screen{padding:16px 14px 40px}
}

/* Tablet fallback: this build is not designed for a phone, but the shell must
   not break if the owner opens it on one. */
@media (max-width:680px){
  .app,.app.is-collapsed{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;border-top:1px solid rgba(255,189,22,.22);
    overflow-x:auto;z-index:30;
  }
  .rail-brand,.rail-toggle,.rail-label,.rail-who{display:none}
  .nav{grid-auto-flow:column;grid-auto-columns:72px;gap:4px}
  .nav button{grid-template-columns:1fr;justify-items:center;gap:3px;min-height:56px;padding:6px 2px}
  .nav button.is-active{box-shadow:inset 0 3px var(--ffz-gold)}
  .nav button span{display:block;font-size:9px;text-align:center}
  .nav .pill{position:absolute;top:4px;right:12px}
  .screen{padding-bottom:80px}
}