/* Capacity Planner — agoodun.com
   Brand tokens, type stack and component shapes follow BRAND.md and the
   other agoodun.com apps, so this sits alongside them without redoing
   the look per app. */

:root {
  --color-primary: #ce0f69;
  --color-secondary-teal: #009ca6;
  --color-secondary-purple: #68478d;
  --color-tertiary-gold: #ffb81c;
  --color-tertiary-black: #000000;

  /* Under / at / over. Three states, one colour each, used identically on
     a person's week and on a client's project allowance — the same
     question is being asked in both places. Over borrows the brand pink
     because it is the only state that needs someone to do something. */
  --state-under: var(--color-secondary-teal);
  --state-at: #b07400; /* the gold, darkened to hold up as text */
  --state-over: var(--color-primary);

  --state-under-soft: rgba(0, 156, 166, 0.1);
  --state-at-soft: rgba(255, 184, 28, 0.18);
  --state-over-soft: rgba(206, 15, 105, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Several classes below set `display`, which has equal specificity to
   the UA [hidden] rule and would silently win by source order — leaving
   "hidden" elements visible. Force it explicitly. */
[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f4f5f7;
  color: var(--color-tertiary-black);
}

a {
  color: inherit;
}

/* ---------------------------------------------------------------------
   App shell / nav
   --------------------------------------------------------------------- */

.app-shell {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app-shell.wide {
  max-width: 900px;
}

.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.nav-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nav-app-name {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: #f4f5f7;
  color: var(--color-tertiary-black);
}

.nav-link.active {
  color: var(--color-primary);
  background: rgba(206, 15, 105, 0.08);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-email {
  font-size: 0.8rem;
  color: #6b7280;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-logout {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-logout:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */

.card {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.card.accent {
  border-top: 6px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary-teal),
    var(--color-secondary-purple),
    var(--color-tertiary-gold)
  );
  border-image-slice: 1;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-title {
  margin-bottom: 4px;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

h2 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.4;
}

.status {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
  padding: 40px 0;
}

.status.error {
  color: var(--color-primary);
}

.section-heading {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   Headline stats
   --------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 10px;
  background: #f9fafb;
  min-width: 0;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat-value.positive {
  color: var(--color-secondary-teal);
}

.stat-value.negative {
  color: var(--color-primary);
}

/* Hours sold with nobody on them: not wrong, but not finished either. */
.stat-value.warning {
  color: var(--state-at);
}

.stat-note {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
}

/* ---------------------------------------------------------------------
   Capacity view — one card per person
   --------------------------------------------------------------------- */

.staff-list,
.client-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staff-card {
  padding: 24px 28px;
  border-left: 6px solid #e5e7eb;
}

/* The state is carried by the card's own edge as well as by the pill, so
   scanning down a long list reads as a column of colour rather than as a
   column of words that have to be read one by one. */
.staff-card.state-under { border-left-color: var(--state-under); }
.staff-card.state-at { border-left-color: var(--color-tertiary-gold); }
.staff-card.state-over { border-left-color: var(--state-over); }

.staff-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.staff-identity h2 {
  margin-bottom: 2px;
}

.staff-meta {
  font-size: 0.82rem;
  color: #6b7280;
}

.staff-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.staff-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.staff-allocated {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.staff-of {
  font-size: 0.85rem;
  color: #6b7280;
}

.state-over .staff-allocated { color: var(--state-over); }
.state-at .staff-allocated { color: var(--state-at); }

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill-under {
  color: var(--state-under);
  background: var(--state-under-soft);
}

.pill-at {
  color: var(--state-at);
  background: var(--state-at-soft);
}

.pill-over {
  color: var(--state-over);
  background: var(--state-over-soft);
}

/* On a client, the pill answers "is all this work spoken for?" — so it
   takes the client colours, not the person ones. */
.pill-todo {
  color: var(--state-at);
  background: var(--state-at-soft);
}

.pill-done {
  color: var(--state-under);
  background: var(--state-under-soft);
}

/* Not a state, an absence: a client nobody has put figures against yet. */
.pill-none {
  color: #6b7280;
  background: #f4f5f7;
}

/* The meter is scaled to whichever is bigger, capacity or allocation, so
   an overbooked week runs visibly past the capacity line instead of just
   filling the track like a full one. */
.meter {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: #e5e7eb;
  overflow: visible;
  margin-bottom: 18px;
}

.meter-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--state-under);
  transition: width 0.2s ease;
}

.state-at .meter-fill { background: var(--color-tertiary-gold); }
.state-over .meter-fill { background: var(--state-over); }

.meter-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--color-tertiary-black);
}

.meter-marker span {
  position: absolute;
  top: 16px;
  left: 0;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

.state-over .meter {
  margin-bottom: 30px;
}

.line-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #f0f1f3;
  font-size: 0.88rem;
}

.line:last-child {
  border-bottom: none;
}

.line-client {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #374151;
}

.line-label-project {
  color: #6b7280;
}

.line-hours {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.line-hours .unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
}

.staff-none {
  font-size: 0.88rem;
  color: #6b7280;
}

/* ---------------------------------------------------------------------
   Somebody wearing two hats on one client
   --------------------------------------------------------------------- */
/* The one thing in this app that is easiest to miss and most expensive to
   miss: the same person covering two of a client's three tiers. Two people
   sharing one tier is ordinary; one person across two tiers is not. It is
   said three ways — a banner naming them, a colour down the edge of each
   row they hold, and a chip on each of those rows naming the others. */

.hat-purple {
  --hat-colour: var(--color-secondary-purple);
  --hat-soft: rgba(104, 71, 141, 0.08);
}

.hat-teal {
  --hat-colour: var(--color-secondary-teal);
  --hat-soft: rgba(0, 156, 166, 0.08);
}

.hat-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.hat-banner-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hat-colour);
  background: var(--hat-soft);
}

.hat-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-top: 3px;
  flex-shrink: 0;
  background: var(--hat-colour);
}

.hat-banner-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #374151;
}

.hat-banner-text strong {
  color: var(--color-tertiary-black);
}

.hat-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hat-colour, var(--color-secondary-purple));
  background: var(--hat-soft, rgba(104, 71, 141, 0.08));
  border: 1px solid var(--hat-colour, var(--color-secondary-purple));
}

.assign-hat,
.line-hat {
  border-left: 4px solid var(--hat-colour);
  background: var(--hat-soft);
  padding-left: 12px;
}

/* ---------------------------------------------------------------------
   Client view
   --------------------------------------------------------------------- */

.client-card {
  padding: 28px;
}

.client-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.client-meta {
  font-size: 0.82rem;
  color: #6b7280;
}

.client-section + .client-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #f0f1f3;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-head .section-heading {
  margin-bottom: 0;
}

.section-empty {
  font-size: 0.88rem;
  color: #6b7280;
  padding: 10px 0;
}

/* The one shape used wherever hours are being filled against an agreed
   figure — a tier, a whole retainer, a project allowance. Same question
   every time, so it looks the same every time. */
.fill-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #f9fafb;
}

/* Careful: "under" means the opposite thing here from what it means on a
   person's card. A person under capacity has room, which is fine and
   teal. Hours under-staffed are hours nobody is doing, which needs
   attention and is gold. The tier borders below follow the same rule, so
   gold always means "this needs somebody" wherever it appears against a
   client. */
.fill-line.state-under { background: var(--state-at-soft); }
.fill-line.state-at { background: var(--state-under-soft); }
.fill-line.state-over { background: var(--state-over-soft); }

.fill-figure {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fill-note {
  font-size: 0.82rem;
  color: #6b7280;
}

.state-under .fill-note { color: var(--state-at); font-weight: 600; }
.state-at .fill-note { color: var(--state-under); font-weight: 600; }
.state-over .fill-note { color: var(--state-over); font-weight: 600; }

/* Said only when the split and the agreed total disagree, so it reads as
   a thing that needs attention rather than as furniture. */
.split-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--state-at);
  padding: 0 4px 12px;
}

.split-note.split-over {
  color: var(--state-over);
}

/* ---------------------------------------------------------------------
   Tiers
   --------------------------------------------------------------------- */
/* A tier is a budget with people against it, so it's a block rather than
   a row: the budget and what's still short belong at the top of it, and
   the people belong underneath. */

.tier-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tier {
  border: 1px solid #f0f1f3;
  border-left: 4px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
}

.tier.state-under { border-left-color: var(--color-tertiary-gold); }
.tier.state-at { border-left-color: var(--state-under); }
.tier.state-over { border-left-color: var(--state-over); }

.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tier-role {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  flex: 0 0 82px;
}

.tier-figure {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tier-note {
  font-weight: 400;
  color: #6b7280;
}

.state-under .tier-note { color: var(--state-at); font-weight: 600; }
.state-over .tier-note { color: var(--state-over); font-weight: 600; }

.tier-empty {
  font-size: 0.85rem;
  color: #6b7280;
  padding: 8px 0 2px;
}

.assign-list {
  list-style: none;
  margin-top: 8px;
}

.assign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.assign-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  min-width: 0;
}

.assign-hours {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Running total under the three split fields, so the arithmetic happens
   while you type rather than after you save. */
.split-running {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--state-at);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--state-at-soft);
  margin-top: 4px;
}

.split-running.ok {
  color: var(--state-under);
  background: var(--state-under-soft);
}

.split-running.over {
  color: var(--state-over);
  background: var(--state-over-soft);
}


.alloc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.alloc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid #f0f1f3;
  font-size: 0.9rem;
}

.alloc-row:last-child {
  border-bottom: none;
}

.alloc-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alloc-hours {
  font-variant-numeric: tabular-nums;
  color: #374151;
  white-space: nowrap;
}

.fixed-person {
  padding: 12px 14px;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Lists (Clients & Staff)
   --------------------------------------------------------------------- */

.list-card + .list-card {
  margin-top: 20px;
}

.list-add {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.list-add .text-input {
  flex: 1;
  min-width: 140px;
}

/* Wide enough that "Retained hrs/wk" isn't clipped to "Retained hrs/wl" —
   the unit is the part of the placeholder that's actually load-bearing. */
.list-add .hours-input {
  flex: 0 0 168px;
  min-width: 150px;
}

.item-list {
  list-style: none;
  margin-top: 12px;
}

.item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f1f3;
}

.item-row:last-child {
  border-bottom: none;
}

.item-name {
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 0.82rem;
  color: #6b7280;
  white-space: nowrap;
}

.list-empty {
  font-size: 0.9rem;
  color: #6b7280;
  padding: 20px 0;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
  background: var(--color-primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  text-decoration: none;
}

.btn-primary:hover {
  box-shadow: 0 0 0 3px rgba(206, 15, 105, 0.12);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-tertiary-black);
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
}

.btn-secondary.small {
  padding: 7px 12px;
  font-size: 0.82rem;
}

.btn-text {
  display: inline-block;
  padding: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  text-decoration: none;
}

.btn-text:hover {
  color: var(--color-tertiary-black);
}

.btn-text.danger:hover {
  color: var(--color-primary);
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-row.centred {
  justify-content: center;
  margin-top: 16px;
}

.modal-actions {
  margin-top: 20px;
  align-items: center;
}

.btn-primary.danger {
  background: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.input-group {
  margin-bottom: 20px;
}

.input-group:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

.field-hint {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.4;
}

.text-input,
.text-select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-tertiary-black);
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.text-input:focus,
.text-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(206, 15, 105, 0.12);
}

.text-select {
  cursor: pointer;
}

.form-error {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------------------------------------------------------------------
   Auth gate
   --------------------------------------------------------------------- */

.auth-landing {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 40px auto;
}

.hero-copy {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.hero-copy h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.hero-tagline {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 22px;
}

.hero-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.hero-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.4;
}

.hero-features li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--color-secondary-teal);
  font-weight: 700;
}

.auth-shell {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Empty states
   --------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
}

.empty-state p {
  font-size: 0.9rem;
  margin-top: 6px;
}

/* ---------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.modal-card h2 {
  margin-bottom: 6px;
}

.modal-card .subtitle {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   Explainer
   --------------------------------------------------------------------- */

.explainer {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.explainer summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-tertiary-black);
}

.explainer summary::-webkit-details-marker {
  display: none;
}

.explainer summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.explainer summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.explainer[open] summary::after {
  transform: rotate(-135deg);
}

.explainer[open] summary {
  border-bottom: 1px solid #f0f1f3;
}

.explainer-content {
  padding: 4px 24px 24px;
}

.explainer-content h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-top: 18px;
  margin-bottom: 6px;
}

.explainer-content h2:first-child {
  margin-top: 0;
}

.explainer-content p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #374151;
}

/* ---------------------------------------------------------------------
   Powered by
   --------------------------------------------------------------------- */

.powered-by a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #6b7280;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.powered-by a:hover {
  color: var(--color-tertiary-black);
}

.powered-by-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.powered-by strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    padding: 16px;
  }

  .card {
    padding: 22px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* A title beside a button is a title squeezed into half the width once
     the screen is a phone's. Stack them instead. */
  .card-header,
  .staff-head,
  .client-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .staff-figures {
    align-items: flex-start;
    text-align: left;
  }

  /* Three narrow columns of numbers stop being readable before they stop
     fitting, so an assignment becomes a block rather than shrinking. */
  .assign-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .assign-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .tier-role {
    flex: 1 0 100%;
  }

  .line {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
  }

  .line-label {
    grid-column: 1;
  }

  .line-hours {
    grid-row: 1;
    grid-column: 2;
  }

  .item-row,
  .alloc-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .item-meta {
    grid-column: 1 / -1;
    white-space: normal;
  }
}