/* ============================================================
   shell.css — the chrome both shells wear: rail, mobile app bar, working area,
   view header, banner.

   IT IS ONE FILE BECAUSE THERE IS ONE CHROME. §6.1 sketches this skin living in
   public/admin/css/admin.css and again in public/editor/css/editor.css, and
   that is the one place the spec's layout would have produced a duplicate: the
   two shells render the same rail from the same renderShell(), so a rule edited
   in one copy and not the other is a rail that is 268px wide on one host and
   264px on the other, with nothing to catch it. The per-shell files stay — they
   are where the rail's GROUPS, the brand and the builder's own three-pane grid
   belong — but the skin itself is here.

   Load order in a shell's index.html:
     shared/css/kit.css   tokens + components   (this file needs its tokens)
     shared/css/shell.css this file
     <shell>/css/*.css    that shell's own layout

   Nothing here is themeable. There is one palette, ink. No data-dtheme
   selector, no picker, no localStorage key — they went with the six palettes.
   ============================================================ */

/* ============================================================
   Shell: rail, mobile bar, working area, view header
   ============================================================ */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail-w); z-index:60;
  display:flex; flex-direction:column;
  background:var(--rail-bg); color:var(--rail-ink);
}
.rail-brand{
  display:flex; align-items:center; gap:11px;
  padding:18px; margin:10px 10px 4px; border-radius:12px;
  background:color-mix(in srgb, var(--canvas) 10%, transparent);
  text-decoration:none; color:var(--rail-ink);
}
.rail-brand:hover{ text-decoration:none }
.rail-brand img{ width:30px; height:auto; flex:none }
.rail-brand b{ display:block; font-family:var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:.02em; line-height:1.15 }
.rail-brand em{
  display:block; font-family:var(--font-display); font-style:normal;
  font-size:.58rem; letter-spacing:.14em; margin-top:2px;
  color:color-mix(in srgb, var(--rail-ink) 78%, transparent);
}

.rail-scroll{ flex:1; overflow-y:auto; padding:10px 10px 16px; scrollbar-width:thin; overscroll-behavior:contain }
.rail-block + .rail-block{ margin-top:0 }
/* The site sets these micro-labels at 52% of the rail ink. At .62rem that only
   reached about 3:1 on the pale panels this file used to carry, so every muted
   label on a pale surface here bottoms out at 78% — size and tracking still
   read them as secondary. */
.rail-label{
  margin:16px 0 6px; padding-left:10px;
  font-family:var(--font-display); font-weight:500; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--rail-ink) 78%, transparent);
}
.rail-block:first-child .rail-label{ margin-top:4px }
.rail-group{ display:flex; flex-direction:column; gap:1px }
.rail-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:9px;
  font-family:var(--font-display); font-size:.9rem; font-weight:500; letter-spacing:.03em;
  line-height:1.3; color:var(--rail-ink); text-decoration:none; text-align:left; width:100%;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.rail-item:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent); text-decoration:none }
.rail-item > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail-ico{ width:20px; height:20px; opacity:.7 }
.rail-ico svg{ width:20px; height:20px }
.rail-out{ width:14px; height:14px; opacity:0; flex:none; transition:opacity .16s var(--ease) }
.rail-out svg{ width:14px; height:14px }
.rail-item:hover .rail-out{ opacity:.5 }
/* The site fills the active pill with --canvas; at .9rem that is only 3.6:1 on
   the mid-tone palettes, so the admin drops to --canvas-3 — same component,
   one step deeper, and legible in all six themes. */
.rail-item.on{ background:var(--canvas-3); color:var(--on-canvas) }
.rail-item.on:hover{ background:var(--canvas-3) }
.rail-item.on .rail-ico{ opacity:1 }
/* a count or badge a view drops into the row must not stretch like the label */
.rail-item .rail-n{
  flex:none; font-family:var(--font-mono); font-size:.68rem; letter-spacing:0;
  padding:1px 6px; border-radius:999px;
  background:color-mix(in srgb, var(--rail-ink) 9%, transparent);
  color:color-mix(in srgb, var(--rail-ink) 90%, transparent);
}
.rail-item.on .rail-n{ background:color-mix(in srgb, var(--on-canvas) 18%, transparent); color:var(--on-canvas) }

.rail-foot{
  padding:10px; display:flex; flex-direction:column; gap:4px;
  border-top:1px solid color-mix(in srgb, var(--rail-ink) 14%, transparent);
}
.rail-user{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:10px;
  color:var(--rail-ink); text-decoration:none;
  background:color-mix(in srgb, var(--canvas) 9%, transparent);
}
.rail-user:hover{ background:color-mix(in srgb, var(--canvas) 15%, transparent); text-decoration:none }
.rail-user .rail-ico{ opacity:1 }
.rail-user > span{ flex:1; min-width:0; line-height:1.25 }
.rail-user b{ display:block; font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail-user em{
  display:block; font-family:var(--font-display); font-style:normal; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--rail-ink) 78%, transparent);
}
.rail-signout{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border-radius:10px; text-align:left;
  font-family:var(--font-display); font-size:.86rem; font-weight:500; letter-spacing:.04em;
  color:var(--rail-ink);
  transition:background .16s var(--ease);
}
.rail-signout:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent) }
.rail-signout .rail-ico{ opacity:.7 }

/* mobile app bar: hamburger + brand, replaces the rail below 1080px */
.mbar{ display:none }
.mbar-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--rail-ink) }
.mbar-brand img{ width:24px; height:auto }
.mbar-brand b{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.04em }
.rail-toggle{
  display:none; width:40px; height:40px; flex:none;
  border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--rail-ink); place-items:center;
}
.rail-toggle:hover{ background:color-mix(in srgb, var(--canvas) 12%, transparent) }
.rail-toggle svg{ width:22px; height:22px; fill:currentColor }
.rail-scrim{ display:none }

.work{
  margin-left:var(--rail-w);
  min-height:100dvh;
  display:flex; flex-direction:column;
  position:relative; isolation:isolate;
}
/* the site's fine technical grid, at a quarter of the strength */
.work::before{
  content:""; position:fixed; inset:0 0 0 var(--rail-w); z-index:-1; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--on-canvas) 5%, transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb, var(--on-canvas) 5%, transparent) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 76%);
}

/* #banner sits above #view inside .work and scrolls away; the view header
   below it is what stays pinned. */
#banner:not(:empty){ padding:var(--gut) var(--gut) 0 }

.view{ display:flex; flex-direction:column; gap:16px; padding-bottom:104px; min-width:0 }
/* the header band runs the full width of the working area, so the gutter lives
   on the siblings rather than on .view itself */
.view > :not(.view-head){ margin-inline:var(--gut); min-width:0 }
.view-head{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-height:var(--head-h); padding:11px var(--gut);
  background:var(--canvas-3); color:var(--on-canvas);
  border-bottom:1px solid color-mix(in srgb, var(--on-canvas) 14%, transparent);
}
.view-head > div:first-child{ margin-right:auto; min-width:0 }
.view-title{ font-size:1.26rem; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis }
.view-sub{ margin:1px 0 0; font-size:.8rem; line-height:1.35; color:var(--ink-2) }
.view-head .btn-ghost{ background:var(--tint); border-color:var(--line) }

.boot,.fatal{ display:grid; place-items:center; padding:64px var(--gut); min-height:60dvh }

.banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-radius:var(--r);
  background:var(--danger); color:var(--danger-ink);
  box-shadow:var(--shadow);
}
.banner-warn{ background:var(--warn) }
.banner-ico{ width:22px; height:22px; flex:none }
.banner-ico svg{ width:22px; height:22px }
.banner-body{ flex:1; min-width:220px }
.banner-body b{ font-family:var(--font-display); font-weight:500; letter-spacing:.03em; font-size:1rem }
.banner-body p{ margin:2px 0 0; font-size:.86rem }
.banner a:not(.btn){ color:var(--danger-ink); text-decoration:underline }
/* the banner's own action arrives as .btn.btn-danger — red on red, so it flips */
.banner .btn{ background:var(--danger-ink); color:var(--danger); border-color:transparent }
.banner .btn:hover{ filter:brightness(.94) }
.banner-warn .btn{ color:var(--warn) }

/* ============================================================
   Responsive — the rail slides behind the hamburger as the site's does.
   The components' half of these breakpoints is in kit.css.
   ============================================================ */
@media (max-width:1080px){
  .work{ margin-left:0; padding-top:var(--mbar-h) }
  .work::before{ inset:0 }
  .rail{
    top:var(--mbar-h);
    transform:translateX(-100%);
    transition:transform .34s var(--ease);
    box-shadow:0 0 60px rgba(0,0,0,.4);
  }
  .rail.open{ transform:translateX(0) }
  .rail-toggle{ display:grid }
  .mbar{
    display:flex; align-items:center; gap:6px;
    position:fixed; inset:0 0 auto 0; height:var(--mbar-h); z-index:70; padding:0 10px;
    background:var(--rail-bg); color:var(--rail-ink);
    box-shadow:0 2px 14px -4px rgba(0,0,0,.35);
  }
  .rail-scrim{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease);
  }
  .rail.open ~ .rail-scrim{ opacity:1; pointer-events:auto }
  .view-head{ top:var(--mbar-h) }
}
@media (min-width:1081px){
  .rail{ transform:none }
}
@media (max-width:720px){
  .view-head{ gap:10px }
  .view-title{ font-size:1.12rem }
}

@media print{
  .rail,.mbar,.view-head,.rail-scrim{ display:none !important }
  .work{ margin-left:0; padding-top:0 }
}