/* ---------------------------------------------------------------
   KidBD - the v2 skin for dashboard.html

   Siavash, 2026-09-08: "make this like the dashboard exactly."

   WHAT IS LEFT IN HERE, AND WHY IT IS SMALLER THAN IT WAS.
   Round 41 shipped this file as a skin over the round-14 party table:
   it restated the objects, the lock, the board and the table's grid in
   Dashboard v2's paper, shadows and radii without moving a node. Round
   42 stopped skinning the table and REBUILT it - the five sections,
   the tiles and every paint*() that fills them are dashboard.html's own
   markup and dashboard.html's own stylesheet now. Everything in this
   file that described the table has therefore gone: it would be a
   second, older opinion about the same boxes, and the ID selectors in
   it outranked the class selectors in the page.

   What stays is what round 42 did NOT rebuild, and it is all chrome
   around the table rather than the table:

   1. THE TOP STRIP IS A PILL, not a full-width bar.
   2. THE SHEET IS A ROUTE. The panel that slid in over the table is a
      full page with a back arrow, which is what the comp draws for the
      planner, the game maker and the launcher. openSheet() is not
      touched: the element, its ids, the focus move, the history entry
      and Escape all still work, because the only thing that changes is
      where the box is and how it arrives.
   3. ONE ACTION COLOUR with the lift on it, ink on it, never white.
   4. FOCUS IS A HALO. Never an outline, on any state - the borderless
      law. A control that already casts the sticker shadow keeps it in
      the same declaration, or focusing it would take its shadow away.
   5. THE PHONE. The gutter, the strip wrap and the safe area.

   Every colour below is a token already declared in dashboard.html's
   :root. Nothing here is a new value and nothing here is a rim.
   Nexus V22 / Kavalsia Inc.
   --------------------------------------------------------------- */

/* ---- the top strip, as a pill ---- */
header.strip{ background:transparent;box-shadow:none;padding:16px 0 0 }
.stripbar{
  max-width:1240px;
  margin-inline:auto;
  background:var(--su);
  border-radius:999px;
  padding:9px 9px 9px 18px;
  box-shadow:var(--sh-sm);
  gap:12px;
}
.stripbar .swi{ border-radius:999px;background:var(--bg);min-height:48px;padding:7px 16px 7px 8px }
.stripbar .swi:hover{ background:var(--ln) }
.stripbar .acctchip{
  background:var(--cta);
  color:var(--cta-ink);
  border-radius:999px;
  min-height:48px;
  padding-inline:20px;
  box-shadow:var(--sh-sm);
  font-weight:700;
}
.stripbar .acctchip:hover{ background:var(--cta-hi) }

/* ---- controls ----
   One action colour, ink on it. `.btn.plain` stays the quiet ink pill and
   `.alt` the cream one; only their geometry moves to v2's. */
.btn{
  border-radius:999px;
  min-height:48px;
  box-shadow:var(--sh-sm);
  font-weight:700;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s cubic-bezier(.2,.8,.3,1),background .15s;
}
.btn:hover,
#t-build .btn:hover,
#t-plan .btn:hover{ transform:translate(-2px,-2px);box-shadow:var(--sh) }
.btn:active,
#t-build .btn:active,
#t-plan .btn:active{ transform:translate(2px,3px);box-shadow:2px 2px 0 var(--ink) }
.btn.tiny{ min-height:48px;border-radius:999px }
.btn.quiet,.btn.plain.quiet{ box-shadow:none }
.btn.quiet:hover{ transform:none;box-shadow:none;background:var(--ln) }
/* On the dark slab the shadow is cast in black by the page's own rule; this
   file must not put --ink back under it. */
#o-tv .btn:hover{ box-shadow:6px 8px 0 #000 }
#o-tv .btn.plain:hover{ box-shadow:none }

/* ---- cards and chips inside the sheets ---- */
#sheet .card{
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  background:var(--su);
  position:relative;
  isolation:isolate;
}
#sheet .card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-image:radial-gradient(var(--dot-cream) 1.4px,transparent 1.4px);
  background-size:var(--dot-size) var(--dot-size);
}
.chips button,.chip,.stat{ border-radius:999px }

/* ---- focus, the halo ---- */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--bg),0 0 0 7px var(--grape);
  border-radius:16px;
}
.btn:focus-visible{ box-shadow:var(--sh-sm),0 0 0 3px var(--bg),0 0 0 7px var(--grape) }
/* The three tile shapes cast the sticker shadow at rest, so the halo has to
   carry it or focusing one flattens it. On the dark slab the halo's inner
   ring is the slab, not the page. */
.job:focus-visible,
.tile:focus-visible,
.strip:focus-visible,
button.count-when:focus-visible{
  box-shadow:var(--sh-sm),0 0 0 3px var(--bg),0 0 0 7px var(--grape);
}
#o-tv :focus-visible{ box-shadow:0 0 0 3px var(--p-tv-screen),0 0 0 7px var(--sun) }
#o-tv .btn:focus-visible{ box-shadow:4px 5px 0 #000,0 0 0 3px var(--p-tv-screen),0 0 0 7px var(--sun) }

/* =================================================================
   THE SHEET IS A ROUTE
   A tool used to slide in over the table as a panel. Everything in it
   is a full working surface - the planner carries six tools and dense
   two-column forms - and a panel is a place you glance at, not a place
   you work. The scrim goes with it: there is nothing behind a route to
   dim.
   ================================================================= */
.scrim{ display:none !important }

@media(min-width:901px){
  .sheet,
  .sheet.wide{
    top:0; right:0; bottom:0; left:0;
    width:auto;
    border-radius:0;
    background:var(--bg);
    box-shadow:none;
    transform:translateY(14px);
    opacity:0;
    transition:transform .26s cubic-bezier(.16,1,.3,1),opacity .2s linear;
  }
  .sheet.on{ transform:none;opacity:1 }
}
@media(max-width:900px){
  .sheet{ top:0;border-radius:0;box-shadow:none;transform:translateY(14px);opacity:0 }
  .sheet.on{ transform:none;opacity:1 }
}

/* The head is the route's header, on the table's own gutter rather than the
   panel's. It keeps the ink-on-paper separation dashboard.html chose (a --su
   head over a --bg body) so nothing here needs a rim or a line. */
.sheet-top{
  padding:11px max(clamp(16px,4vw,44px),calc((100% - 1240px) / 2));
  background:var(--su);
  box-shadow:var(--sh-sm);
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}
.sheet-top > *{ max-width:1240px }
.sheet-top h2{ font-size:clamp(19px,2.4vw,26px);font-family:var(--disp);justify-self:start }
.sheet-body{
  padding:clamp(14px,1.8vw,20px) max(clamp(16px,4vw,44px),calc((100% - 1240px) / 2))
          calc(60px + env(safe-area-inset-bottom,0px));
}

/* The X becomes a back arrow, because a route is somewhere you came from and
   not a thing laid over what you were doing. Its aria-label already says
   "go back to the table", which was written for the panel and happens to be
   exactly right for this. */
.sheet-x{ border-radius:999px;background:var(--bg);box-shadow:var(--sh-sm) }
.sheet-x:hover{ background:var(--sun);transform:translate(-2px,-2px);box-shadow:var(--sh) }
.sheet-x svg{ display:none }
.sheet-x::before{
  content:"";
  width:22px;height:22px;
  background:currentColor;
  -webkit-mask:no-repeat center/22px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m11 6-6 6 6 6"/></svg>');
  mask:no-repeat center/22px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m11 6-6 6 6 6"/></svg>');
}

@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover,.btn:active{ transition:none;transform:none }
  .sheet,.sheet.wide{ transition:none }
  .sheet-x:hover{ transform:none }
}

/* =================================================================
   THE PHONE
   Siavash, 2026-09-08: "more tight and compact but not overwhelming,
   100% mobile optimised."

   Compaction is vertical rhythm, never hit area: every control keeps
   its 48px floor and the type scale is untouched below heading rank.
   ================================================================= */
@media(max-width:700px){
  .shell{ padding-inline:14px }
  header.strip{ padding:10px 0 0 }
  .stripbar{ padding:8px 8px 8px 14px;gap:8px;border-radius:26px;flex-wrap:wrap }
  .stripbar .swi{ flex:1 1 auto;min-width:0 }
  /* min-width:0 let this shrink to 47px wide at 390, which is under the
     48px floor in the axis nobody checks by eye. The floor is BOTH axes. */
  .stripbar .acctchip{ flex:0 0 auto;min-width:48px;padding-inline:15px;justify-content:center }

  /* the countdown is still the largest thing on the screen; it is not
     still 112px, because at 390 that is four characters of gold and no
     room for the date under it */
  .count,.noon{ min-height:0;padding:20px 18px;gap:16px }
  .count .n{ font-size:56px }
  .count .w{ font-size:19px }
  .count .msg{ font-size:24px }
  /* one job per row: two 236px tiles on a 390px screen shrink the figure
     past reading size before the row wraps */
  .jobs-row{ grid-template-columns:minmax(0,1fr) }
  .job{ min-height:78px;padding:15px;gap:12px }
  .job .tx b{ font-size:26px }
  .tile{ padding:20px;gap:14px }
  .tile .sq{ width:50px;height:50px;border-radius:16px }
  .tile .big{ font-size:38px }
  .secline{ margin:6px 0 10px;gap:8px }
  .secline h2{ font-size:18px }
  #o-tv{ padding:20px 18px }
  .table{ gap:12px }

  .sheet-top{ padding:10px 14px }
  .sheet-body{ padding:14px 14px calc(40px + env(safe-area-inset-bottom,0px)) }
}
@media(max-width:430px){
  /* Siavash, 2026-09-09: "proper spacing, not overlay."

     This block used to end the bar by DELETING it. Under 430 the account
     button lost its label and became a 48px disc, and the party's second line
     had already gone at 520 up in dashboard.html, so the smaller the phone the
     less the bar said: at 390 it read as a mark, a name, and an unlabelled key.
     Measured before this change - .stripbar had 262px of content box for
     children asking 48 + 144 + 48 with 30px of gaps, which is 270. The bar was
     8px short and it paid for those 8px in words.

     It has had `flex-wrap:wrap` since 700 and never used it, because
     `flex:0 0 auto` on the button kept the row just inside its width. So the
     row was always one row by accident. Now the button takes a line of its own
     and spends the width it has on the sentence it is meant to say, and the
     party line gets its second row back for the same reason: there is space
     for it once the bar stops trying to be one row.

     Two rows, both spaced, nothing clipped and nothing on top of anything.
     Nothing here is a fixed width, so a longer party name stretches the layout
     it already has rather than finding a breakpoint that guessed wrong. */
  .stripbar{ gap:10px }
  .stripbar .acctchip{ flex:1 1 100%;width:100%;padding-inline:20px }
  .stripbar .acctchip .plabel{ display:inline }
  .stripbar .swi .lb i{ display:block }
  .foot{ padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)) }
}

/* air between the top strip and the first band: the pill and the countdown
   were sharing the strip's own 16px, which read as the table hanging off the
   header rather than sitting under it */
.table{ margin-top:clamp(10px,1.4vw,18px) }

/* 2026-09-09. #safety is ABOVE .table, so on any load where it paints it is
   the first band and the rule above never reaches it - measured, its top was
   the header's bottom to the pixel at both 1440 and 390, and at phone widths
   header.strip drops its bottom padding entirely, so the pill's offset shadow
   was landing inside the notice. It gets the table's own gap, and it keeps
   .table's on top of that when both are on screen: the two are separate bands
   and they are spaced like separate bands. */
#safety{ margin-top:clamp(10px,1.4vw,18px) }