/* FREE SAILING — org-club.css. The club operating centre: what needs attention,
   the month, sessions, volunteers, members, and the analytics surface that hosts
   the real intelligence cards instead of replacing them.

   NO NEW PALETTE. Every colour here is a token dash.css and site.css already
   define. The dashboard's look was never the problem; what it looked like was
   finished because a failed read and an empty list wore the same face.

   ONE DEFECT FIXED HERE THAT BELONGS TO THE WHOLE OPERATOR PRODUCT, and it is
   named rather than quietly patched. `.btn-primary` is written in org-ui.js,
   org-events.js, org-opportunities.js, org-beginners.js, org-page.js and
   org-inbox.js — the Publish button, Send invitation, Invite them, Save changes,
   every main verb in the product — and it is DEFINED NOWHERE. site.css has
   .btn-orange, .btn-navy, .btn-cyan, .btn-ghost, .btn-clear and .btn-sm; there
   is no .btn-primary in any stylesheet in this estate. So `.btn` applied on its
   own: transparent background, transparent border, inherited colour. The most
   important control on every workspace has been rendering as unstyled text.
   Defined here because this is the stylesheet this lane owns; it is one rule and
   it belongs in site.css beside its siblings the moment anybody may edit that
   file. */

/* --------------------------------------------------------- the missing verb */
/* .btn-primary now lives in site.css beside .btn, which is where a class
   thirteen files write belongs. Removed from here rather than left as a
   duplicate that would win or lose by load order. */
/* ===========================================================================
   NEEDS ATTENTION — the front door.

   Every row here is a count of things WAITING FOR A PERSON, with somewhere to
   go. Nothing on this surface is a KPI: if it cannot be acted on it is not a
   row, and if a read failed it says so in its own words rather than counting to
   zero. That distinction is the whole point of the board.
   ========================================================================= */
.at-list { border-top: 1px solid var(--line); margin: 0 0 26px; }
.at-i {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line-2);
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.at-i:hover { background: var(--line-2); }
.at-i:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.at-n {
  flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.at-i.is-quiet .at-n { background: var(--line-2); color: var(--ink-40); }
.at-i.is-urgent .at-n { background: #B03A21; }
.at-b { flex: 1 1 auto; min-width: 0; }
/* Both are spans inside a button, so both need saying: an inline title runs
   straight into its own explanation and the row reads as one long sentence. */
.at-t { display: block; font-size: 15px; font-weight: 700; }
.at-s { display: block; font-size: 13px; color: var(--ink-60); margin-top: 3px;
  line-height: 1.45; max-width: 76ch; }
.at-go { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--cyan-text); }

/* A fault is not an empty list and must never be able to look like one. */
.at-fault, .ws-fault {
  border: 1px solid #F0C9BE; background: #FFF6F3; border-radius: 12px;
  padding: 14px 16px; margin: 0 0 18px;
}
.at-fault b, .ws-fault b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.at-fault p, .ws-fault p { margin: 0; font-size: 13px; color: var(--ink-60); line-height: 1.5; }

/* ===========================================================================
   THE MONTH — the BUILD 03b grid, given somewhere to go.

   The grid itself is FS.inst.month from dash-instruments.js, unchanged and not
   rebuilt: weeks start on Monday, today carries a ring, a marked day can be
   picked. It was drawn at card size, so the only thing done here is give it the
   room a workspace has, and add the one thing it never had — a day you click
   opens what is actually on it.
   ========================================================================= */
.cal-wrap { display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 30px; }
.cal-grid { flex: 1 1 380px; max-width: 520px; }
.cal-side { flex: 1 1 300px; min-width: 0; }

.cal-grid .inst-month .im-name { font-size: 16px; }
.cal-grid .inst-month .im-c { font-size: 14px; min-height: 44px; border-radius: 9px; }
.cal-grid .inst-month .im-days span { font-size: 11.5px; }
/* The instrument writes the day's contents into .im-said as a joined string.
   In a workspace the day opens a real panel instead, so the strip underneath
   would say the same thing twice, one of them without any actions on it. */
.cal-grid .inst-month .im-said { display: none; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0;
  font-size: 12.5px; color: var(--ink-40); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key { width: 10px; height: 10px; border-radius: 999px; background: var(--cyan); }
.cal-key.is-now { background: none; box-shadow: inset 0 0 0 2px var(--cyan); }

.cal-quiet { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--pale); }
.cal-quiet h3 { font-size: 15px; margin: 0 0 4px; }
.cal-quiet p { font-size: 13px; color: var(--ink-60); margin: 0 0 12px; line-height: 1.5; max-width: 58ch; }
.cal-months { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; }
.cal-m {
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-40);
}
.cal-m.is-empty { background: #FFEDE8; border-color: #FFD3C7; color: #B03A21; }

/* ===========================================================================
   SESSIONS — a taster is an object, not a row in a list.

   Capacity, who is instructing it, which boats it is using, and which of those
   three is missing. The three unfilled things are the only reason this surface
   exists, so they are what the row leads with.
   ========================================================================= */
.ses-row { display: block; width: 100%; }
.ses-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.ses-tag {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-60); border: 1px solid transparent;
}
.ses-tag.is-need { background: #FFEDE8; color: #B03A21; border-color: #FFD3C7; }
.ses-tag.is-set { background: #E4F8F7; color: #016F70; border-color: #BEEBEA; }
.ses-cap { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 320px; }
.ses-cap .an-bar { flex: 1 1 auto; margin: 0; }
.ses-cap b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-60); }

.pick { list-style: none; margin: 10px 0 0; padding: 0; }
.pick li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.pick li:first-child { border-top: 0; }
.pick .lbl { flex: 1 1 auto; font-size: 14px; }
.pick .btn { flex: 0 0 auto; }
.pick-new { display: flex; gap: 8px; margin-top: 14px; }
.pick-new input {
  flex: 1 1 auto; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 14px;
}

/* ===========================================================================
   VOLUNTEERS — roles across events, and the ones nobody is doing.
   ========================================================================= */
.vol-ev { margin: 0 0 26px; }
.vol-ev h3 { font-size: 15px; margin: 0 0 2px; }
.vol-ev .ws-sub { margin: 0 0 8px; }
.vol-who { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vol-p {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-60);
}

/* ===========================================================================
   ANALYTICS — the real cards, hosted, in an order that makes them a page.

   These sections hold the ACTUAL card renderers registered by
   dash-club-realdemand.js, dash-club-supply-coverage.js, dash-club-demand.js
   and dash-club-intelligence.js. They keep the .dcard class so every style
   those renderers were written against still applies, and they are stacked full
   width rather than tiled, because a question with an answer under it is a page
   and eleven tiles are a wall.
   ========================================================================= */
.an-sec { margin: 0 0 36px; }
.an-sec > h2 { font-size: 18px; margin: 0 0 3px; }
.an-sec > .ws-sub { margin: 0 0 16px; }
.ws .dcard { margin: 0 0 14px; }
.ws .dcard:last-child { margin-bottom: 0; }
.an-ceiling {
  border-left: 3px solid var(--cyan); background: var(--pale);
  padding: 13px 16px; border-radius: 0 10px 10px 0; margin: 0 0 28px;
}
.an-ceiling b { display: block; font-size: 14px; margin-bottom: 4px; }
.an-ceiling p { margin: 0; font-size: 13px; color: var(--ink-60); line-height: 1.55; max-width: 66ch; }

@media (max-width: 720px) {
  .cal-wrap { gap: 22px; }
  .at-i { padding: 13px 2px; }
  .at-go { display: none; }
}