/* FREE SAILING — org-ui.css. Drawers, modals, popovers, toasts.
   The visual half of the vocabulary in org-ui.js. Uses the tokens dash.css and
   site.css already define — no new palette, because the dashboard's look is the
   part of this product that was already right. */

.ui-locked { overflow: hidden; }

/* ------------------------------------------------------------------- scrims */
.ui-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(2, 22, 56, .34);
  opacity: 0; transition: opacity .18s ease;
  -webkit-backdrop-filter: saturate(120%) blur(1px);
  backdrop-filter: saturate(120%) blur(1px);
}
.ui-scrim.is-open { opacity: 1; }
/* A popover's catcher must not dim the page — the anchor has to stay readable,
   because the menu is about the thing you can still see. */
.ui-scrim-pop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ------------------------------------------------------------------- shared */
.ui-drawer, .ui-modal {
  position: fixed; z-index: 901; display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  box-shadow: 0 18px 60px rgba(2, 22, 56, .22);
}
.ui-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.ui-title { font-size: 17px; line-height: 1.25; margin: 0; font-weight: 700; }
.ui-sub { margin: 5px 0 0; font-size: 13px; color: var(--ink-60); }
.ui-sub a { color: inherit; }
.ui-x {
  margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; line-height: 1;
  font-size: 22px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink-60); cursor: pointer;
}
.ui-x:hover { color: var(--ink); border-color: var(--ink-25); }
.ui-body { padding: 18px 20px; overflow: auto; flex: 1 1 auto; }
.ui-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg, #FBFCFE);
}
.ui-foot .btn { min-width: 96px; }

/* ------------------------------------------------------------------- drawer.
   Right-hand panel on a desktop, bottom sheet on a phone — the same object,
   because a 420px side panel on a 375px screen is a modal that lies. */
.ui-drawer {
  top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  transform: translateX(100%); transition: transform .2s ease;
  border-left: 1px solid var(--line);
}
.ui-drawer.is-open { transform: none; }
@media (max-width: 640px) {
  .ui-drawer {
    top: auto; left: 0; right: 0; width: auto; max-height: 88vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0; transform: translateY(100%);
  }
  .ui-drawer.is-open { transform: none; }
}

/* -------------------------------------------------------------------- modal */
.ui-modal {
  top: 50%; left: 50%; width: min(520px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  transform: translate(-50%, -46%); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  border-radius: var(--r, 14px); border: 1px solid var(--line);
}
.ui-modal.is-open { transform: translate(-50%, -50%); opacity: 1; }
@media (max-width: 640px) {
  .ui-modal { width: calc(100vw - 20px); }
  .ui-foot { flex-direction: column-reverse; }
  .ui-foot .btn { width: 100%; }
}

/* ------------------------------------------------------------------ popover */
.ui-pop {
  position: fixed; z-index: 902; min-width: 232px; max-width: min(340px, calc(100vw - 16px));
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 22, 56, .18);
  padding: 6px; opacity: 0; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease;
  max-height: min(70vh, 520px); overflow: auto;
}
.ui-pop.is-open { opacity: 1; transform: none; }
.ui-pop-t {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-40); padding: 8px 10px 6px;
}
.ui-pop hr { border: 0; border-top: 1px solid var(--line-2); margin: 6px 4px; }
.ui-pop-i {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 9px 10px;
  font: inherit; color: var(--ink);
}
.ui-pop-i:hover, .ui-pop-i:focus-visible { background: var(--line-2, #EEF3F9); outline: none; }
.ui-pop-l { display: block; font-size: 14px; font-weight: 600; }
.ui-pop-n { display: block; font-size: 12.5px; color: var(--ink-40); margin-top: 1px; }

/* ------------------------------------------------------------------- toasts */
.ui-toasts {
  position: fixed; z-index: 950; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.ui-toast {
  background: var(--ink, #0B1F3A); color: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(2, 22, 56, .28);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.ui-toast.is-open { opacity: 1; transform: none; }
.ui-toast-bad { background: #8A1B2B; }

/* --------------------------------------------------- shared workspace atoms.
   A workspace is not a card. These are the pieces every one of them needs, kept
   here so ten workspaces cannot invent ten spellings of "a row with a status
   and an action". */
.ws { max-width: 1080px; }
.ws-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ws-head h1 { font-size: 24px; margin: 0; }
.ws-head .ws-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ws-sub { color: var(--ink-40); font-size: 14px; margin: 4px 0 18px; }

.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; flex-wrap: wrap; }
.ws-tab {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  padding: 9px 12px; color: var(--ink-60); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ws-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--hl, #1F5FD0); }
.ws-tab .n {
  display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700;
  background: var(--line-2, #EEF3F9); color: var(--ink-60);
  border-radius: 999px; padding: 1px 7px;
}
.ws-tab.is-on .n { background: var(--hl, #1F5FD0); color: #fff; }

.ws-stats { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 20px; }
.ws-stat b { display: block; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ws-stat span { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-40); }

.ws-rows { border-top: 1px solid var(--line); }
.ws-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--line-2);
  width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.ws-row:hover { background: var(--line-2, #F5F8FC); }
.ws-row.is-unread .ws-row-t::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--hl, #1F5FD0); margin-right: 7px; vertical-align: middle;
}
.ws-row-main { flex: 1 1 auto; min-width: 0; }
.ws-row-t { font-size: 14.5px; font-weight: 700; }
.ws-row-s { font-size: 13px; color: var(--ink-60); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row-r { flex: 0 0 auto; text-align: right; font-size: 12.5px; color: var(--ink-40); }

.ws-pill {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 9px;
  background: var(--line-2, #EEF3F9); color: var(--ink-60);
}
.ws-pill-live { background: #E4F3E8; color: #1C6B33; }
.ws-pill-draft { background: #F1F1F4; color: #5A5A66; }
.ws-pill-need { background: #FCEDE6; color: #9A4318; }
.ws-pill-done { background: #E7EEFB; color: #1F4FA8; }
/* Same coral the public site already uses for a cancelled event
   (site.css .chip.coral) — one colour for "cancelled" everywhere it is
   rendered, not a second dashboard-only meaning for the same fact. */
.ws-pill-cancel { background: #FFEDE8; color: #B03A21; }

.ws-empty { padding: 26px 0 6px; }
.ws-empty b { display: block; font-size: 15px; margin-bottom: 5px; }
.ws-empty p { font-size: 13.5px; color: var(--ink-60); margin: 0 0 14px; max-width: 52ch; }

/* A checklist that is a control, not a picture of progress. */
.ws-check { list-style: none; margin: 0; padding: 0; }
.ws-check li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 14px;
}
.ws-check .tick { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px;
  border: 1.5px solid var(--line); display: inline-block; }
.ws-check .is-done .tick { background: #1C6B33; border-color: #1C6B33; }
.ws-check .is-done .lbl { color: var(--ink-60); }
.ws-check .lbl { flex: 1 1 auto; }
.ws-check .btn { flex: 0 0 auto; }

.btn-danger { background: #8A1B2B; border-color: #8A1B2B; color: #fff; }

/* ─────────────────────────────────────────────────────────── conversation.
   A thread reads as a conversation, not as a table of rows — the sides sit
   apart so you can see at a glance who said what without reading a label. */
.cv { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.cv-m { max-width:86%; }
.cv-them { align-self:flex-start; }
.cv-us { align-self:flex-end; text-align:right; }
.cv-b {
  display:inline-block; padding:10px 13px; border-radius:14px; font-size:14px;
  line-height:1.45; background:var(--line-2,#EEF3F9); color:var(--ink);
  text-align:left;
}
.cv-us .cv-b { background:var(--hl,#1F5FD0); color:#fff; }
.cv-w { font-size:11.5px; color:var(--ink-40); margin-top:4px; }
.cv-f textarea {
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font:inherit; font-size:14px; resize:vertical; background:var(--white); color:var(--ink);
}
.cv-fa { display:flex; gap:8px; margin-top:10px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ───────────────────────────────────────────────────────── the event composer.
   A form with sections, because the questions a visitor asks come in an order
   and the composer should ask them in that order. Not a modal with a title and
   a date. */
.ev-f fieldset { border:0; padding:0; margin:0 0 26px; }
.ev-f legend {
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40);
  padding:0 0 10px; border-bottom:1px solid var(--line); width:100%; margin-bottom:14px;
}
.ev-f label { display:block; font-size:13px; font-weight:600; margin:0 0 5px; }
.ev-f input[type=text], .ev-f input[type=date], .ev-f input[type=time],
.ev-f input[type=number], .ev-f select, .ev-f textarea {
  width:100%; max-width:520px; border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; font:inherit; font-size:14.5px; background:var(--white); color:var(--ink);
  margin-bottom:14px;
}
.ev-f textarea { max-width:640px; resize:vertical; }
.ev-2 { display:flex; gap:14px; flex-wrap:wrap; }
.ev-2 > div { flex:1 1 180px; }
.ev-c { display:flex; align-items:center; gap:9px; font-weight:500; margin-bottom:9px; }
.ev-c input { width:auto; margin:0; }
.ev-h { font-size:12.5px; color:var(--ink-40); max-width:56ch; margin:-4px 0 0; line-height:1.5; }
.ev-foot {
  position:sticky; bottom:0; display:flex; gap:9px; flex-wrap:wrap;
  padding:14px 0; border-top:1px solid var(--line); background:var(--white);
}
.ev-pv h3 { margin:6px 0 4px; font-size:19px; }
.ev-pv-w { font-size:13.5px; color:var(--ink-60); margin:0 0 12px; }
.ev-pv-f { list-style:none; padding:0; margin:14px 0; font-size:13.5px; }
.ev-pv-f li { padding:7px 0; border-top:1px solid var(--line-2); color:var(--ink-60); }
.btn-sm { padding:5px 11px; font-size:13px; }

/* ────────────────────────────────────────────────────────────────── analytics.
   No sparklines. A line with no scale is a shape, and we do not hold a time
   series for most of these yet — so the only chart here is a funnel, where each
   bar is a named count and the drop between two of them is the thing to act on. */
.an-b { margin:0 0 34px; }
.an-b h2 { font-size:17px; margin:0 0 4px; }
.an-facts { list-style:none; padding:0; margin:6px 0 0; }
.an-facts li { padding:9px 0; border-top:1px solid var(--line-2); font-size:14.5px; }
.an-facts li:first-child { border-top:1px solid var(--line); }
.an-facts b { font-variant-numeric:tabular-nums; }
.an-said { margin:14px 0 0; font-size:14.5px; }
.an-note { font-size:13px; color:var(--ink-60); }
.an-funnel { border-top:1px solid var(--line); }
.an-f-row {
  display:flex; align-items:center; gap:14px; padding:10px 4px;
  border-bottom:1px solid var(--line-2);
}
.an-f-row[role=button] { cursor:pointer; }
.an-f-row[role=button]:hover { background:var(--line-2,#F5F8FC); }
.an-f-l { flex:0 0 96px; font-size:13.5px; font-weight:600; }
.an-f-bar { flex:1 1 auto; position:relative; height:22px; display:flex; align-items:center; gap:9px; }
.an-f-bar i { display:block; height:22px; border-radius:5px; background:var(--hl,#1F5FD0); min-width:3px; }
.an-f-bar b { font-size:14px; font-variant-numeric:tabular-nums; }
.an-f-d { flex:0 0 auto; font-size:12.5px; color:var(--ink-40); text-align:right; }
.an-bar { height:6px; border-radius:999px; background:var(--line-2,#EEF3F9); margin-top:7px; max-width:320px; }
.an-bar i { display:block; height:6px; border-radius:999px; background:var(--hl,#1F5FD0); }
@media (max-width:620px){ .an-f-l{flex-basis:74px} .an-f-d{display:none} }

/* Below the line the live payload cannot carry. Visibly a different register
   from the facts above it, without being an apology. */
.an-notyet {
  margin-top:16px; padding:13px 15px; border-radius:10px;
  border:1px dashed var(--line); background:var(--line-2,#F5F8FC);
}
.an-notyet b { display:block; font-size:14px; margin-bottom:5px; }
.an-notyet p { margin:0; font-size:12.5px; color:var(--ink-60); line-height:1.5; max-width:60ch; }

/* ── THE FIRST SCREEN'S OWN HEADINGS ─────────────────────────────────────────
   The Dashboard is no longer every card there is in load order; it is four
   groups in the order somebody running the place works through them. These are
   the four. They live in the card grid, so they have to span it — a heading
   that takes one column reads as a card with no body. */
.cards > .dsec{
  grid-column:1/-1;
  margin:14px 0 -4px;
  font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:none;
  color:var(--ink-40);
}
.cards > .dsec:first-child{ margin-top:0; }

a.gfig { text-decoration: none; color: inherit; display: block; }
a.gfig:hover { text-decoration: none; color: inherit; }