/* Saywell Studio, on top of the dashboard's stylesheets (app.css, app-extra.css): the same tokens and parts. */
.st-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; }
.st-head .select-wrap select { min-width: 200px; }

/* On phones and tablets: the sections as a row of tabs under the top bar (the side menu shows from 960px). */
.st-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px max(16px, env(safe-area-inset-left, 0px)) 10px; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs button { flex: none; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .9375rem; cursor: pointer; min-height: 40px; }
.st-tabs button[aria-current="page"] { background: var(--dusk); border-color: var(--dusk); color: var(--on-dusk); }
@media (min-width: 960px) { .st-tabs { display: none; } }
.nav button .count { margin-left: auto; }

/* Headline numbers. */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.card.st-kpi { padding: 18px 20px; gap: 4px; text-align: left; font: inherit; color: inherit; }
button.card.st-kpi { cursor: pointer; transition: box-shadow .15s, transform .15s; }
button.card.st-kpi:hover { box-shadow: var(--shadow-lg); }
button.card.st-kpi:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.st-kpi b { font: 700 1.75rem/1.15 var(--display); letter-spacing: -0.01em; }
.st-kpi .note { font-size: .875rem; }

/* Filters. */
.st-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-filters > div { display: flex; flex-wrap: wrap; gap: 8px; }
.st-filters .select-wrap { margin-left: auto; }
.st-filters .select-wrap select { min-width: 220px; min-height: 42px; }
.st-filter { border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .9375rem; cursor: pointer; min-height: 40px; }
.st-filter[aria-pressed="true"] { background: var(--dusk-soft); border-color: var(--dusk); color: var(--dusk); }
.st-filter:focus-visible, .st-tabs button:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }

/* Rows that open something. */
.st-click { cursor: pointer; }
.st-click:hover .t { color: var(--dusk); }
.st-rows .t .count { margin-left: 6px; vertical-align: 2px; }
.list li.empty { display: block; }
.list li.empty .t { color: var(--muted); font-weight: 400; }

/* The founding spots: each week's 5. */
.st-cohorts { display: grid; gap: 14px; }
.st-cohort { display: grid; gap: 8px; }
.st-cohort > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.st-cohort .note { font-size: .875rem; }
.st-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.st-slot { min-height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); font: 700 .8125rem/1.2 var(--sans); padding: 6px 8px; text-align: left; cursor: pointer; min-width: 0; }
.st-slot span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-slot.free { border-style: dashed; background: none; cursor: default; }
.st-slot.reserved { background: var(--marigold-soft); border-color: var(--marigold); color: var(--on-marigold-soft); }
.st-slot.deposit, .st-slot.onboarding, .st-slot.building { background: var(--dusk-soft); border-color: var(--dusk); color: var(--dusk); }
.st-slot.live { background: var(--fern-soft); border-color: var(--fern); color: var(--fern); }
.st-slot:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }

/* Tables. */
.st-table td { vertical-align: top; }
.st-table td .chip { white-space: nowrap; }
.st-table td.empty { color: var(--muted); }
.st-ref { display: block; font-size: .8125rem; margin-top: 4px; overflow-wrap: anywhere; }
.st-table .link-btn { text-align: left; }

/* AI spend month by month. */
.st-bars { display: grid; gap: 10px; }
.st-bar { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 12px; font-size: .9375rem; }
.st-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.st-bar-track { height: 12px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.st-bar-track i { display: block; height: 100%; background: var(--dusk); border-radius: 999px; }

/* What Anthropic billed, next to our record. */
.st-anth { display: grid; gap: 14px; min-width: 0; }
.st-anth > p { margin: 0; }
.st-anth > .table-wrap { max-width: 100%; overflow-x: auto; position: relative; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 20px; margin: 0; }
.st-stats > div { display: grid; gap: 4px; align-content: start; }
.st-stats dd { margin: 0; font: 700 1.5rem/1.2 var(--display); letter-spacing: -0.01em; }
.st-stats dd span { display: block; margin-top: 4px; font: 400 .875rem/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.st-anth-h { font: 700 1.0625rem/1.3 var(--display); margin: 6px 0 0; }

/* A client, a request or an agreement, in the sheet. */
.st-client-head { display: grid; gap: 10px; justify-items: start; }
.st-client-head .row { display: flex; flex-wrap: wrap; gap: 8px; }
.st-sec { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.st-sec h3 { font: 700 1.125rem/1.3 var(--display); margin: 0; }
.st-sec p { margin: 0; }
.st-role { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: 6px; vertical-align: 2px; }
.st-log .t { font-weight: 400; font-size: 1rem; }
.st-detail { color: var(--muted); }
.st-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-error pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunken); border-radius: var(--r-md); padding: 12px 14px; margin: 0; font: 400 .875rem/1.5 var(--mono); color: var(--brick); }
.st-bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.st-danger[data-armed] { border-color: var(--brick); color: var(--brick); }
.st-doc { display: grid; }
.card.st-edit { box-shadow: none; background: var(--sunken); }

/* Forms. */
.st-two, .st-three { display: grid; gap: 14px; }
@media (min-width: 640px) { .st-two { grid-template-columns: 1fr 1fr; } .st-three { grid-template-columns: 1fr 1fr 160px; } }
.st-check { display: flex; align-items: center; gap: 10px; font-weight: 700; min-height: 40px; cursor: pointer; }
.st-check input { width: 20px; height: 20px; accent-color: var(--dusk); }
.st-inline { padding: 14px; border-radius: var(--r-md); background: var(--sunken); }
.form .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form .row .grow { flex: 1; }
.form input[type="email"] { width: 100%; }

@media (max-width: 640px) {
  .st-filters .select-wrap { margin-left: 0; width: 100%; }
  .st-filters .select-wrap select { width: 100%; }
  .st-bar { grid-template-columns: 6.5em minmax(0, 1fr) 4.5em; font-size: .875rem; }
  .st-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .st-slot { font-size: .75rem; padding: 6px 5px; }
  .st-kpi b { font-size: 1.5rem; }
}
/* A wide table scrolls inside its card on a phone, instead of widening the page. */
.view > .card, .view .card { min-width: 0; }
.card > .table-wrap { max-width: 100%; overflow-x: auto; position: relative; } /* keeps the hidden column labels (.sr) inside */