/* FREE SAILING — the club board.

   Layout only. Every colour, radius, shadow and easing below is a token that
   already exists in site.css; nothing new is defined and no :root value is
   changed. A dashboard is not a new brand, it is the same one doing work.

   The board is a two-column grid: a rail that stays put on a desktop and
   becomes a drawer under 1000px, and a card field that is a plain auto-fill
   grid so a card can be added or hidden without any column arithmetic.
*/

.dash{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  align-items:start;
  max-width:1560px; margin:0 auto;
}

/* ------------------------------------------------------------------ rail */
.rail{
  position:sticky; top:var(--hd);
  height:calc(100vh - var(--hd));
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--navy-deep); color:#D6E2F6;
  display:flex; flex-direction:column;
  padding:18px 0 0;
}
.rail-who{ padding:0 18px 16px; border-bottom:1px solid rgba(255,255,255,.12); }
.rail-who-name{ color:#fff; font-weight:700; font-size:15.5px; line-height:1.2; }
.rail-who-where{ font-size:12.5px; color:#9FB6DC; margin-top:3px; }

.rail-list{ list-style:none; margin:0; padding:10px 10px 20px; flex:1 1 auto; }
.rail-list li{ margin:1px 0; }
.rail-a{
  display:block; padding:8px 12px; border-radius:var(--r-s);
  color:#C9D9F2; font-size:14px; font-weight:500; text-decoration:none;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.rail-a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.rail-a.is-on{ background:var(--navy); color:#fff; font-weight:700; }
.rail-sub{ list-style:none; margin:2px 0 6px; padding:0 0 0 12px;
  border-left:1px solid rgba(255,255,255,.14); }
.rail-a-sub{ font-size:13px; padding:6px 12px; color:#A9C0E4; }
.rail-ft{
  padding:14px 18px 18px; font-size:12px; color:#8FA7D2;
  border-top:1px solid rgba(255,255,255,.12);
}

.rail-open{ display:none; }

/* ----------------------------------------------------------------- board */
.board{ padding:26px 26px 60px; min-width:0; }
.board-hd{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.board-hd h1{ font-size:clamp(24px,3vw,32px); }
.board-sub{ color:var(--ink-40); font-size:14px; margin-top:5px; }
.board-hd .btn-line{ margin-left:auto; }
.btn-line{
  display:inline-block; border:1px solid var(--line); background:var(--white);
  color:var(--navy); border-radius:999px; padding:9px 16px;
  font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-line:hover{ border-color:var(--cyan); box-shadow:var(--shadow-1); text-decoration:none; }
.board-ft{ margin-top:34px; font-size:12.5px; color:var(--ink-25); }

/* --------------------------------------------------------- quick actions */
.quick{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.qa{
  border:1px solid var(--line); background:var(--white); border-radius:999px;
  padding:10px 18px; cursor:pointer; box-shadow:var(--shadow-1);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.qa:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:var(--cyan); }
.qa-t{ font-size:14px; font-weight:700; color:var(--navy); }
.qa-wsd{ background:linear-gradient(180deg,var(--orange),var(--orange-deep)); border-color:transparent; }
.qa-wsd .qa-t{ color:#fff; }

/* ----------------------------------------------------------------- cards */
.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  align-items:start;
}
.dcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-1); padding:18px; min-width:0;
}
.dcard.wide{ grid-column:span 2; }
.dcard-hd{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.dcard-hd h2{ font-size:16.5px; }
.dcard-hd .more{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--cyan-text); }
.dcard .lede{ font-size:13.5px; color:var(--ink-60); margin-bottom:12px; }
.dcard .empty{ font-size:13.5px; color:var(--ink-40); }

/* rows inside a card */
.drow{ display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; border-top:1px solid var(--line-2); }
.drow:first-child{ border-top:0; }
.drow-main{ min-width:0; flex:1 1 auto; }
.drow-t{ font-size:14px; font-weight:700; color:var(--ink); }
.drow-s{ font-size:12.5px; color:var(--ink-40); margin-top:2px; }
.drow-side{ flex:0 0 auto; text-align:right; }

.dfig{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:12px; }
.dfig div{ min-width:64px; }
.dfig b{ display:block; font-size:24px; line-height:1.05; color:var(--navy); }
.dfig span{ font-size:11.5px; color:var(--ink-40); }

.dchips{ display:flex; flex-wrap:wrap; gap:6px; }

/* named milestones — a list of things done and not yet done, never a number */
.mile{ list-style:none; margin:0; padding:0; }
.mile li{ display:flex; gap:9px; align-items:flex-start; padding:6px 0; font-size:13.5px; }
.mile .tick{ flex:0 0 auto; width:17px; height:17px; border-radius:50%;
  border:1.5px solid var(--line); margin-top:1px; }
.mile .done .tick{ background:var(--teal); border-color:var(--teal); }
.mile .done{ color:var(--ink-60); }
.mile .next{ color:var(--ink); font-weight:600; }

.bar{ height:7px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--cyan); border-radius:99px; }

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .dcard.wide{ grid-column:span 1; }
}
@media (max-width:1000px){
  .dash{ display:block; }
  .rail{
    position:fixed; top:var(--hd); left:0; width:264px; z-index:55;
    transform:translateX(-100%); transition:transform .22s var(--ease);
    box-shadow:var(--shadow-3);
  }
  .rail.open{ transform:translateX(0); }
  .rail-open{
    display:inline-flex; align-items:center; gap:9px; margin:16px 0 0 18px;
    border:1px solid var(--line); background:var(--white); border-radius:999px;
    padding:9px 16px; font-size:13.5px; font-weight:700; color:var(--navy); cursor:pointer;
  }
  .rail-open-bars{ display:inline-block; width:15px; }
  .rail-open-bars i{ display:block; height:2px; background:var(--navy); margin:3px 0; border-radius:2px; }
  .board{ padding:16px 18px 56px; }
}
@media (max-width:520px){
  .cards{ grid-template-columns:1fr; }
  .board{ padding:14px 14px 48px; }
  .qa{ padding:9px 14px; }
}

/* ===========================================================================
   THE GLANCE — everything a club needs to know before it scrolls.

   Four figures across the top, then four instruments under them. It sits above
   the eighteen cards and it answers four questions in one look: what is coming
   up, what needs filling, is anybody new coming, and are we ready.

   Sized so the whole of it is inside the first screen on a laptop. That is a
   measured claim, not a hope — the harness asserts its lower edge lands above
   900px at 1440×900 and fails the run if it does not.

   Motion below is many small eased moves, never one large one, and every group
   of them carries its own reduced-motion answer directly underneath it.
   =========================================================================== */

.glance{ margin:0 0 22px; }

/* ------------------------------------------------------------- the figures */
.glance-figs{
  display:grid; gap:12px; margin-bottom:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.gfig{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px 14px; box-shadow:var(--shadow-1); min-width:0;
  transition:box-shadow .26s var(--ease), border-color .26s var(--ease),
             transform .26s var(--ease);
}
.gfig:hover{ box-shadow:var(--shadow-2); border-color:var(--line); transform:translateY(-1px); }
.gfig-k{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-40); font-weight:700;
  transition:color .22s var(--ease);
}
.gfig:hover .gfig-k{ color:var(--ink-60); }
.gfig-v{
  display:flex; align-items:baseline; gap:5px; margin-top:5px;
  font-size:29px; line-height:1; font-weight:700; color:var(--navy);
  letter-spacing:-.02em;
}
.gfig-v small{ font-size:13px; font-weight:600; color:var(--ink-40); letter-spacing:0; }
.gfig-s{
  font-size:12.5px; color:var(--ink-40); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .22s var(--ease);
}
.gfig:hover .gfig-s{ color:var(--ink-60); }
.gfig.is-live .gfig-v{ color:var(--orange-text); }
.gfig-rule{
  height:2px; margin-top:11px; border-radius:2px; background:var(--line-2);
  overflow:hidden;
}
.gfig-rule i{
  display:block; height:100%; width:100%; background:var(--cyan);
  transform-origin:left center; transform:scaleX(0);
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.gfig.on .gfig-rule i{ transform:scaleX(1); }
.gfig.t-teal .gfig-rule i{ background:var(--teal); }
.gfig.t-orange .gfig-rule i{ background:var(--orange); }
.gfig.t-navy .gfig-rule i{ background:var(--navy); }

@media (prefers-reduced-motion:reduce){
  .gfig,.gfig-k,.gfig-s{ transition:none; }
  .gfig:hover{ transform:none; }
  .gfig-rule i{ transition:none; transform:scaleX(1); }
}

/* --------------------------------------------------------- the instruments */
.glance-inst{
  display:grid; gap:14px;
  grid-template-columns:1.28fr 1fr 1.02fr .86fr;
  align-items:stretch;
}
.gt{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-1); padding:15px 16px 16px; min-width:0;
  display:flex; flex-direction:column;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gt:hover{ box-shadow:var(--shadow-2); border-color:var(--line); }
.gt-hd{ display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
.gt-hd h2{ font-size:14.5px; letter-spacing:-.01em; }
.gt-hd .gt-note{
  margin-left:auto; font-size:11.5px; color:var(--ink-40); font-weight:600;
  transition:color .22s var(--ease);
}
.gt:hover .gt-hd .gt-note{ color:var(--cyan-text); }
.gt-body{ flex:1 1 auto; min-width:0; }
.gt-ft{
  margin-top:11px; padding-top:10px; border-top:1px solid var(--line-2);
  font-size:12px; color:var(--ink-40);
}

@media (prefers-reduced-motion:reduce){
  .gt,.gt-hd .gt-note{ transition:none; }
}

/* ------------------------------------------------ rings, donuts, the middle */
.inst-ring,.inst-donut{
  position:relative; width:114px; max-width:100%; flex:0 0 auto;
  transition:transform .34s cubic-bezier(.76,0,.24,1);
}
.gt:hover .inst-ring,.gt:hover .inst-donut{ transform:scale(1.022); }
.inst-ring-svg,.inst-donut-svg{ display:block; width:100%; height:auto; }
.inst-track{ stroke:var(--line-2); }
.inst-fill{ stroke:var(--cyan); transition:stroke .3s var(--ease); }
.inst-fill.t-teal{ stroke:var(--teal); }
.inst-fill.t-orange{ stroke:var(--orange); }
.inst-fill.t-navy{ stroke:var(--navy); }
.inst-fill.t-pale{ stroke:#B9D3EA; }

.inst-mid{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.inst-mid b{
  font-size:27px; line-height:1; font-weight:700; color:var(--navy);
  letter-spacing:-.03em;
  transition:color .3s var(--ease);
}
.inst-mid i{ font-style:normal; font-size:11px; color:var(--ink-40); margin-top:3px; }
.gt:hover .inst-mid b{ color:var(--cyan-text); }

@media (prefers-reduced-motion:reduce){
  .inst-ring,.inst-donut,.inst-fill,.inst-mid b{ transition:none; }
  .gt:hover .inst-ring,.gt:hover .inst-donut{ transform:none; }
}

/* ------------------------------------------------------------------- lines */
.inst-spark{ display:block; width:100%; }
.inst-spark-svg{ display:block; width:100%; height:58px; }
.inst-line{ stroke:var(--cyan); transition:stroke .3s var(--ease); }
.inst-line.t-teal{ stroke:var(--teal); }
.inst-line.t-orange{ stroke:var(--orange); }
.inst-area{ fill:rgba(2,162,238,.11); transition:fill .3s var(--ease); }
.inst-area.t-teal{ fill:rgba(1,185,186,.11); }
.inst-area.t-orange{ fill:rgba(249,138,87,.13); }
.inst-dot{ fill:var(--cyan); transition:fill .3s var(--ease); }
.inst-dot.t-teal{ fill:var(--teal); }
.inst-dot.t-orange{ fill:var(--orange); }

.inst-bars-svg{ display:block; width:100%; height:54px; }
.inst-bar{ fill:var(--cyan); transition:fill .3s var(--ease); }
.inst-bar.t-teal{ fill:var(--teal); }

@media (prefers-reduced-motion:reduce){
  .inst-line,.inst-area,.inst-dot,.inst-bar{ transition:none; }
}

/* ------------------------------------------------------------------ meters */
.mrow{ padding:8px 0; border-top:1px solid var(--line-2); }
.mrow:first-child{ border-top:0; padding-top:0; }
.mrow-hd{ display:flex; align-items:baseline; gap:8px; }
.mrow-t{
  font-size:13.5px; font-weight:700; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .22s var(--ease);
}
.mrow:hover .mrow-t{ color:var(--navy); }
.mrow-n{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink-40); flex:0 0 auto;
  transition:color .22s var(--ease); }
.mrow:hover .mrow-n{ color:var(--cyan-text); }
.inst-meter{ display:block; margin-top:6px; }
.inst-meter-track{
  display:block; height:7px; border-radius:99px; background:var(--line-2); overflow:hidden;
}
.inst-meter-track i{
  display:block; height:100%; width:100%; border-radius:99px; background:var(--cyan);
  transform-origin:left center; transform:scaleX(0);
  transition:background .3s var(--ease);
}
.mrow.t-teal .inst-meter-track i{ background:var(--teal); }
.mrow.t-orange .inst-meter-track i{ background:var(--orange); }
.mrow-s{ font-size:11.5px; color:var(--ink-40); margin-top:5px;
  transition:color .22s var(--ease); }
.mrow:hover .mrow-s{ color:var(--ink-60); }

@media (prefers-reduced-motion:reduce){
  .mrow-t,.mrow-n,.mrow-s,.inst-meter-track i{ transition:none; }
}

/* ------------------------------------------------------------- month grid */
.inst-month{ display:block; }
.im-hd{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.im-name{ font-size:13px; font-weight:700; color:var(--ink); flex:1 1 auto; text-align:center; }
.im-step{
  flex:0 0 auto; width:24px; height:24px; line-height:1; border-radius:50%;
  border:1px solid var(--line); background:var(--white); color:var(--navy);
  font-size:15px; cursor:pointer; padding:0;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             color .2s var(--ease), transform .2s cubic-bezier(.76,0,.24,1);
}
.im-step:hover{ border-color:var(--cyan); background:var(--line-2); transform:scale(1.08); }
.im-step:active{ transform:scale(.94); }

.im-days,.im-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.im-days span{
  text-align:center; font-size:10px; font-weight:700; color:var(--ink-25);
  padding-bottom:3px; letter-spacing:.04em;
}
.im-c{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; min-height:22px; border-radius:var(--r-s);
  font-size:11.5px; color:var(--ink-60); font-variant-numeric:tabular-nums;
  transition:background .2s var(--ease), color .2s var(--ease),
             box-shadow .2s var(--ease), transform .2s cubic-bezier(.76,0,.24,1);
}
.im-c.im-x{ visibility:hidden; }
.im-c.has{ cursor:pointer; font-weight:700; color:var(--navy); background:var(--line-2); }
.im-c.has:hover{ background:#DCEBF7; transform:translateY(-1px); }
.im-c.now{ box-shadow:inset 0 0 0 1.5px var(--cyan); }
.im-c.on{ background:var(--navy); color:#fff; }
.im-c.on .im-dot{ background:var(--hl); }
.im-c:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px; }
.im-dot{
  position:absolute; bottom:3px; left:50%; width:3.5px; height:3.5px; margin-left:-1.75px;
  border-radius:50%; background:var(--orange);
  transition:background .2s var(--ease), transform .24s cubic-bezier(.76,0,.24,1);
}
.im-c.has:hover .im-dot{ transform:scale(1.5); }
.im-said{
  margin-top:9px; font-size:12px; color:var(--ink-60); min-height:17px;
  transition:color .22s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .im-step,.im-c,.im-dot,.im-said{ transition:none; }
  .im-step:hover,.im-c.has:hover,.im-c.has:hover .im-dot{ transform:none; }
}

/* --------------------------------------------------- named steps, listed */
.gsteps{ list-style:none; margin:9px 0 0; padding:0; }
.gsteps li{
  display:flex; gap:7px; align-items:flex-start; padding:3px 0; font-size:11.5px;
  color:var(--ink-40); line-height:1.3;
  transition:color .22s var(--ease);
}
.gsteps li.done{ color:var(--ink-60); }
.gsteps li:hover{ color:var(--ink); }
.gsteps .gtick{
  flex:0 0 auto; width:12px; height:12px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white);
  transition:background .28s cubic-bezier(.76,0,.24,1),
             border-color .28s cubic-bezier(.76,0,.24,1),
             transform .28s cubic-bezier(.76,0,.24,1);
}
.gsteps li.done .gtick{ background:var(--teal); border-color:var(--teal); transform:scale(1.04); }
.gsteps li.t-cyan.done .gtick{ background:var(--cyan); border-color:var(--cyan); }
.gsteps button{
  border:0; background:none; padding:0; text-align:left; cursor:pointer;
  font-size:11.5px; color:inherit; line-height:1.3;
  transition:color .2s var(--ease);
}
.gsteps button:hover{ color:var(--cyan-text); text-decoration:underline; }
.gsteps button:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:3px; }

@media (prefers-reduced-motion:reduce){
  .gsteps li,.gsteps .gtick,.gsteps button{ transition:none; }
  .gsteps li.done .gtick{ transform:none; }
}

/* --------------------------------------------------------- cards, arriving */
.dcard{
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease);
}
.dcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px); }
.drow{ transition:background .2s var(--ease); border-radius:var(--r-s); }
.drow:hover{ background:var(--line-2); }
.dcard-hd .more{ transition:color .2s var(--ease), transform .2s var(--ease); }
.dcard-hd .more:hover{ color:var(--navy); transform:translateX(2px); }
.mile .tick{ transition:background .28s cubic-bezier(.76,0,.24,1),
             border-color .28s cubic-bezier(.76,0,.24,1); }
.mile li{ transition:color .2s var(--ease); }
.mile li:hover{ color:var(--ink); }
.bar i{ transition:width .7s cubic-bezier(.76,0,.24,1); }
.rail-open{ transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.rail-open:hover{ border-color:var(--cyan); box-shadow:var(--shadow-1); }
.qa:active{ transform:translateY(0) scale(.985); }
.qa-t{ transition:color .2s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .dcard,.drow,.dcard-hd .more,.mile .tick,.mile li,.bar i,.rail-open,.qa-t{ transition:none; }
  .dcard:hover,.dcard-hd .more:hover,.qa:active{ transform:none; }
}

/* --------------------------------------------------------------- narrower */
@media (max-width:1280px){
  .glance-inst{ grid-template-columns:1.2fr 1fr; }
}
@media (max-width:860px){
  .glance-figs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:660px){
  .glance-inst{ grid-template-columns:1fr; }
  .gfig-v{ font-size:25px; }
}

/* ------------------------------------------- the counted rule, in segments
   Five named milestones, five bars. This is the same rule the counted ring
   follows, at figure size: a count of named things is drawn as parts you can
   count, never as one continuous track. */
.gfig-segs{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; margin-top:11px; }
.gfig-segs i{
  display:block; height:4px; border-radius:2px; background:var(--line-2);
  transform:scaleY(.6); transform-origin:center;
  transition:background .34s cubic-bezier(.76,0,.24,1),
             transform .34s cubic-bezier(.76,0,.24,1);
}
.gfig-segs i.on{ background:var(--navy); transform:scaleY(1); }

/* ------------------------------------------------------ tile compositions */
.gt-pair{ display:flex; gap:14px; align-items:center; }
.gt-donut{ flex:0 0 auto; width:96px; }
.gt-pair-r{ flex:1 1 auto; min-width:0; }
.gt-pair-r .gfig-v{ font-size:25px; margin-top:3px; }
.gt-spark{ display:block; margin-top:6px; }
.gt-ringwrap{ display:flex; justify-content:center; }
.gt-ring{ width:104px; }

.mrow-add{
  flex:0 0 auto; width:22px; height:22px; margin-left:8px; padding:0; line-height:1;
  border-radius:50%; border:1px solid var(--line); background:var(--white);
  color:var(--navy); font-size:14px; font-weight:700; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             color .2s var(--ease), transform .2s cubic-bezier(.76,0,.24,1),
             opacity .2s var(--ease);
}
.mrow-add:hover{ border-color:var(--cyan); background:var(--line-2); transform:scale(1.1); }
.mrow-add:active{ transform:scale(.9); }
.mrow-add:disabled{ opacity:.34; cursor:default; }
.mrow-add:disabled:hover{ border-color:var(--line); background:var(--white); transform:none; }
.mrow-add:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .gfig-segs i,.mrow-add{ transition:none; }
  .gfig-segs i.on{ transform:scaleY(1); }
  .mrow-add:hover,.mrow-add:active{ transform:none; }
}

/* ------------------------------------------------------- the phone ordering
   On a laptop the board reads header, verbs, figures, instruments. On a phone
   the verbs are three wrapped rows and they were pushing the first figure
   433px down the page — you opened your own board and saw five buttons.

   So on a phone the figures come first: you see the state of the club, then
   the things you can do about it. `display:contents` lets the two halves of
   the glance take their own places in the board's order without either of them
   moving in the markup — and `[hidden]` has to win over it explicitly, or the
   glance would refuse to stand aside when the rail filters the board. */
@media (max-width:660px){
  .board{ display:flex; flex-direction:column; }
  .board-hd{ order:1; }
  .glance{ display:contents; }
  .glance-figs{ order:2; margin-bottom:18px; }
  .quick{ order:3; }
  .glance-inst{ order:4; margin-bottom:22px; }
  .cards{ order:5; }
  .board-ft{ order:6; }
  .glance[hidden]{ display:none; }
  .glance[hidden] .glance-figs,
  .glance[hidden] .glance-inst{ display:none; }
}

/* ------------------------------------------- sub-headings inside a tile, and
   a calendar that does not decide the height of the whole row.

   The month grid was sizing its cells to their own width, so on a wide tile it
   grew to 400px and left the three tiles beside it two hundred pixels of empty
   white. Cells now have a height of their own. */
.gt-sub{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-25); font-weight:700; margin-bottom:6px;
}
.gt-sub-2{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line-2); }
.mrow-flat{ border-top:0; padding:6px 0; }
.mrow-flat .chip{ margin-left:auto; flex:0 0 auto; }

.im-c{ aspect-ratio:auto; height:27px; min-height:0; }
.im-days span{ padding-bottom:2px; }
.im-said{ min-height:15px; margin-top:7px; }

/* ------------------------------------------------- weight where it belongs
   The four tiles are one height, which is what makes them read as a panel
   rather than four cards that happen to be adjacent. What was wrong was not
   the equal height, it was that two of the instruments were drawn small enough
   to leave a hundred and fifty pixels of white under them. The ring and the
   donut are the two hero readouts of their tiles, so they are now sized like
   it, and the line under the intake figure gets the room it was short of. */
.gt-ring{ width:138px; }
.gt-donut{ width:116px; }
.gt-pair{ align-items:flex-start; }
.gt-pair-r .gfig-v{ font-size:27px; }
.gt-spark .inst-spark-svg{ height:70px; }
.gt-ringwrap{ margin:4px 0 12px; }
.gsteps li{ padding:4px 0; font-size:12px; }

/* A crew call's own name is the useful half of the line; two lines of it beats
   one line with the end cut off. */
.mrow-flat .mrow-t{ white-space:normal; overflow:visible; line-height:1.25; }
.mrow-flat .mrow-hd{ align-items:flex-start; gap:10px; }

/* --------------------------------------------- the water tile, restructured */
.gt-pair-r .dfig{ margin:6px 0 0; gap:16px; }
.gt-pair-r .dfig b{ font-size:21px; }
.gt-intake{ font-size:26px; margin-bottom:2px; }
.gt-spark .inst-spark-svg{ height:76px; }

/* ------------------------------------------------ dash-club-intelligence.js
   The funnel bars and the want/barrier columns — the two elements on that
   file's cards with no reasonable default rendering (an <i> with only an
   inline width and no display/background is invisible; two <div>s with no
   flex just stack). Deliberately minimal, matching this file's own existing
   restraint elsewhere rather than adding a new visual language. */
.fn-funnel{ display:flex; flex-direction:column; gap:7px; }
.fn-row{ display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:10px; }
.fn-lb{ font-size:12.5px; color:var(--ink-60); text-transform:capitalize; }
.fn-bar{ display:block; height:9px; border-radius:5px; background:var(--line-2); overflow:hidden; }
.fn-bar i{ display:block; height:100%; background:var(--cyan); border-radius:5px; }
.fn-n{ font-size:13px; text-align:right; }

.wb-cols{ display:flex; gap:24px; flex-wrap:wrap; }
.wb-cols > div{ flex:1 1 200px; min-width:180px; }
.wb-cols h4{ font-size:12px; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink-40); margin:0 0 8px; }
.wb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.wb-list li{ font-size:13.5px; }
.wb-list b{ color:var(--navy); margin-right:6px; }
.wb-stop b{ color:#B4472B; }

.ci-ask{ display:flex; gap:8px; }
.ci-ask input{ flex:1; min-width:0; font:inherit; font-size:13.5px; padding:9px 13px;
  border:1px solid var(--line); border-radius:999px; background:#fff; }
.ci-ask input:focus{ outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,128,175,.13); }

/* A milestone we have NOT checked yet is not a milestone the organisation has
   failed. Added 2026-09-01 with the fix that derives these from real facts:
   until fs_org_contacts / fs_events / fs_opportunities answer, the step is
   unknown, and it must not wear ".next"'s "here is your homework" weight. */
.mile .unknown{ color:var(--ink-25); }
.mile .unknown .tick{ border-style:dashed; }

/* ─────────────────────────────────────────────── the organisation shell bar.
   Added with org-shell.js. Two links where there had been one: "View public
   page" is this organisation's Free Sailing page, "Visit website" is their own
   site. paintPublicLink() used to overwrite the first with the second and label
   it "Their own site" — third-person copy shown to the people whose site it is,
   and no way back to their own public page from their own dashboard. */
.org-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.org-bell { position:relative; padding-left:12px; padding-right:12px; }
.org-bell-n {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:#8A1B2B; color:#fff; font-size:10.5px; font-weight:700;
  line-height:17px; text-align:center;
}
/* A rail badge counts things waiting for a person. Never a KPI. */
.rail-n {
  float:right; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--line-2,#EEF3F9); color:var(--ink-60); font-size:11px; font-weight:700;
  line-height:18px; text-align:center;
}
.rail-a.is-on .rail-n { background:var(--hl,#1F5FD0); color:#fff; }