/* =============================================================================
   screens.css — ONLY genuinely screen-local rules.

   The test for whether something belongs here: would a second screen ever want
   it? If yes it is a component and it lives in components.css. What is left is
   the login page (which is a whole different shell), the report document, and
   a handful of one-screen arrangements.

   Loaded last, so a screen rule can win a tie against a component rule without
   !important. Do not use that to restyle components — add a modifier instead.
   ========================================================================= */

/* =============================================================================
   Login — its own shell, no rail, no content column
   ========================================================================= */

.login-body{
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  padding:max(var(--sp-5),env(safe-area-inset-top))
          max(var(--sp-4),env(safe-area-inset-right))
          max(var(--sp-5),env(safe-area-inset-bottom))
          max(var(--sp-4),env(safe-area-inset-left));
  background:
    radial-gradient(900px 520px at 50% -18%, var(--cyan-weak), transparent 70%),
    var(--ink);
}

.login-card{
  width:min(420px,100%);
  padding:var(--sp-8) var(--sp-7);
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-2);
  text-align:center;
}
.login-card h1{
  font-size:var(--fs-h1);
  margin-block:var(--sp-4) var(--sp-2);
}
.login-card > p{ color:var(--text-2); font-size:var(--fs-sm); }
.login-card form{
  display:grid;
  gap:var(--sp-3);
  margin-block:var(--sp-5) var(--sp-2);
  text-align:start;
}
.login-card .brand{ justify-content:center; }

.login__divider{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-block:var(--sp-5);
  color:var(--text-3); font-size:var(--fs-xs);
}
.login__divider::before,.login__divider::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
}

/* The collapsed local-admin form. The Discord button is the primary path; this
   stays folded so it does not read as an equal option. */
.admin-login{ margin-block-start:var(--sp-4); text-align:start; }
.admin-login summary{
  text-align:center;
  color:var(--text-3);
  font-size:var(--fs-xs);
  padding:var(--sp-1);
  border-radius:var(--r-chip);
}
.admin-login summary:hover{ color:var(--text-2); }
.admin-login form{ margin-block-start:var(--sp-3); }

/* =============================================================================
   Dashboard
   ========================================================================= */

.dash__hello{
  font-size:var(--fs-sm);
  color:var(--text-2);
}
/* The balance card leads the screen: one big number, one meter, one line of
   context. Everything else on the dashboard is secondary to it. */
.dash__balance .metric__num{ font-size:var(--fs-hero); }
.dash__balance .card__body{ padding-block-end:var(--sp-4); }

/* =============================================================================
   Approvals
   ========================================================================= */

.approvals__group{ margin-block-start:var(--sp-6); }
.approvals__group > .kicker{ display:block; margin-block-end:var(--sp-3); }
/* The intake card sits above both queues and is visually the form, not a row. */
.approvals__new{ margin-block-end:var(--sp-6); }
.approvals__new .toolbar{ margin-block-end:0; }

/* =============================================================================
   Reports — a document, not a panel. On screen it gets a card; in print
   base.css strips the card and this stays a plain typeset page.
   ========================================================================= */

.report{
  padding:var(--sp-7) var(--sp-8);
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  line-height:var(--lh-loose);
  color:var(--text);
}
.report > *:first-child{ margin-block-start:0; }
.report h1{
  font-size:var(--fs-h1);
  margin-block:var(--sp-5) var(--sp-3);
  padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line);
}
.report h2{ font-size:var(--fs-h2); margin-block:var(--sp-6) var(--sp-2); }
.report h3{ font-size:var(--fs-h3); margin-block:var(--sp-5) var(--sp-2); }
.report p{ margin-block:var(--sp-3); }
.report ul,.report ol{ margin-block:var(--sp-3); padding-inline-start:1.4em; }
.report li + li{ margin-block-start:var(--sp-1); }
.report table{
  width:100%;
  border-collapse:collapse;
  margin-block:var(--sp-4);
  font-size:var(--fs-sm);
}
.report th,.report td{
  border:1px solid var(--line);
  padding:var(--sp-2) var(--sp-3);
  text-align:start;
  vertical-align:top;
}
.report th{
  background:var(--surface-2);
  color:var(--text-2);
  font-weight:var(--fw-semi);
  white-space:nowrap;
}
.report td:not(:first-child){
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums lining-nums;
}
.report strong{ color:var(--text); }
.report hr{ margin-block:var(--sp-6); }
.report__meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  color:var(--text-3); font-size:var(--fs-xs);
  margin-block-end:var(--sp-5);
}

.report-charts{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--sp-4);
  margin-block:var(--sp-5) var(--sp-6);
}
.report-chart{
  margin:0;
  padding:var(--sp-3);
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.report-chart img{
  display:block;
  width:100%;
  height:auto;
  border-radius:calc(var(--r-card) - 2px);
  background:#2B2D31;
}
.report-chart figcaption{
  margin-block-start:var(--sp-2);
  font-size:var(--fs-xs);
  color:var(--text-3);
  text-transform:capitalize;
}

@media print{
  /* a printed report wants the numbers, not the table chrome */
  .report th{ background:transparent; }
  .report h1{ font-size:18pt; }
  .report h2{ font-size:14pt; }
}

/* =============================================================================
   Admin — dense by nature; everything here is a table or a paired control
   ========================================================================= */

.admin__section + .admin__section{ margin-block-start:var(--sp-7); }
.admin__grant{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) 0;
  border-block-end:1px solid var(--line);
}
.admin__grant:last-child{ border-block-end:0; }
/* An access link is a secret with a 15-minute life (ACCESS_LINK_TTL_S).
   It is displayed to be copied once, never to be read at a glance. */
.admin__link{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-data);
  font-size:var(--fs-xs);
  word-break:break-all;
  padding:var(--sp-2) var(--sp-3);
  background:var(--code-bg);
  border-radius:var(--r-chip-lg);
}

/* =============================================================================
   Chats — the empty state is the screen most people see first
   ========================================================================= */

.chat__empty{
  max-width:var(--thread-max);
  margin-inline:auto;
  padding:10vh var(--sp-5) var(--sp-6);
  text-align:center;
}
.chat__empty h2,
.chat__empty .empty__title{
  font-size:var(--fs-hero);
  letter-spacing:var(--ls-tight);
  margin-block-end:var(--sp-2);
}
.chat__empty p{ color:var(--text-2); }

@media (max-width:820px){
  .report{ padding:var(--sp-5) var(--sp-4); }
  .login-card{ padding:var(--sp-7) var(--sp-5); }
  .chat__empty{ padding-block-start:6vh; }
}

/* =============================================================================
   Actions — every Discord function in plain words (screens/commands.js)
   ========================================================================= */

.act-search{ position:relative; margin-block-end:var(--sp-5); }
.act-search__ico{
  position:absolute; inset-block:0; inset-inline-start:var(--sp-4);
  display:flex; align-items:center; color:var(--text-3); pointer-events:none;
}
#actSearch.act-search__input{ min-height:52px; padding-inline-start:calc(var(--sp-4) * 2 + 18px); font-size:var(--fs-body); border-radius:var(--r-btn); }

.act-layout{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 420px);
  gap:var(--sp-5); align-items:start;
}
.act-catalog{ display:grid; gap:var(--sp-6); min-width:0; }
.act-group{ display:grid; gap:var(--sp-3); }
.act-group__title{
  font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-2);
  margin:0; display:flex; align-items:center; gap:var(--sp-2);
}
.act-group--discord > summary{ cursor:pointer; list-style:none; }
.act-group--discord > summary::-webkit-details-marker{ display:none; }
.act-group--discord > summary::before{ content:"▸"; color:var(--text-3); }
.act-group--discord[open] > summary::before{ content:"▾"; }
.act-group--discord .act-tiles{ margin-block-start:var(--sp-3); }

.act-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-3); }
.act-tile{
  appearance:none; display:flex; gap:var(--sp-3); align-items:flex-start; text-align:start;
  padding:var(--sp-4); min-height:84px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface-1); color:var(--text); font:inherit; cursor:pointer;
  box-shadow:var(--shadow-1); transition:border-color .15s, transform .15s, background .15s;
}
.act-tile:hover{ border-color:var(--cyan-line); transform:translateY(-1px); }
.act-tile:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.act-tile.is-active{ border-color:var(--cyan); background:var(--cyan-weak); }
.act-tile--muted{ opacity:.75; }
.act-tile__ico,.act-panel__ico{
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--r-btn); background:var(--cyan-weak); color:var(--link);
}
.act-tile__text{ display:grid; gap:2px; min-width:0; }
.act-tile__title{ font-weight:var(--fw-semi); line-height:var(--lh-snug); }
.act-tile__blurb{ font-size:var(--fs-sm); color:var(--text-2); line-height:var(--lh-snug); }
.act-none{ color:var(--text-2); }

.act-panel{ position:sticky; top:var(--sp-4); display:grid; gap:var(--sp-4); min-width:0; }
.act-panel__head{ display:flex; gap:var(--sp-3); align-items:center; margin-block-end:var(--sp-4); }
.act-panel__title{ font-size:var(--fs-h3); margin:0; }
.act-panel__blurb{ margin:2px 0 0; color:var(--text-2); font-size:var(--fs-sm); }
.act-panel__foot{ color:var(--text-2); font-size:var(--fs-sm); margin:var(--sp-3) 0 0; }
.act-panel__links{ margin-block-end:var(--sp-3); }
.act-welcome__title{ font-size:var(--fs-h3); font-weight:var(--fw-semi); margin:0 0 var(--sp-1); }
.act-welcome p{ color:var(--text-2); }

.act-form{ display:grid; gap:var(--sp-4); }
.act-req{ color:var(--bad-fg); margin-inline-start:2px; }
.leave-form--stack{ display:grid; gap:var(--sp-3); }
.leave-form__grid{ display:grid; gap:var(--sp-3); }

.act-thread{ display:grid; gap:var(--sp-3); }
.act-thread:not(:empty){ margin-block-start:var(--sp-4); }
.act-you{ display:flex; justify-content:flex-end; }
.act-you > span{
  max-width:85%; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-chip-lg);
  background:var(--surface-3); font-size:var(--fs-sm);
}
.act-answer{
  padding:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-chip-lg);
  background:var(--surface-2); min-width:0; overflow-wrap:anywhere;
}
.act-answer--note{ display:flex; gap:var(--sp-2); align-items:center; color:var(--text-2); font-size:var(--fs-sm); }
.act-answer__title{ font-weight:var(--fw-semi); margin:0 0 var(--sp-2); }
.act-answer__body > *:first-child{ margin-block-start:0; }
.act-answer__body > *:last-child{ margin-block-end:0; }
.act-answer__fields{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 0; }
.act-answer__fields > div{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:var(--sp-3); }
.act-answer__fields dt{ font-weight:var(--fw-medium); }
.act-answer__fields dd{ margin:0; color:var(--text-2); }
.act-answer__fields p{ margin:0; }
.act-answer__opts{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-block-start:var(--sp-3); }
.act-answer__hint{ color:var(--text-2); font-size:var(--fs-sm); margin:var(--sp-2) 0 0; display:flex; gap:var(--sp-2); align-items:center; }
.act-working{ display:flex; gap:var(--sp-2); align-items:center; color:var(--text-2); font-size:var(--fs-sm); }
.act-dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--cyan); animation:act-pulse 1s ease-in-out infinite; }
@keyframes act-pulse{ 50%{ opacity:.3; } }
@media (prefers-reduced-motion: reduce){ .act-dot{ animation:none; } .act-tile{ transition:none; } }

.act-step{ display:grid; gap:var(--sp-2); margin-block-start:var(--sp-4); padding-block-start:var(--sp-4); border-block-start:1px solid var(--line); }
.act-step[hidden]{ display:none; }
.act-step > .btn{ justify-self:start; }
.act-step__row{ display:flex; gap:var(--sp-2); }
.act-step__row .field__input{ flex:1 1 auto; min-width:0; }
.act-ask{ display:grid; gap:var(--sp-2); padding:var(--sp-4); }
.act-earlier{ display:grid; gap:var(--sp-2); }
.act-earlier[hidden]{ display:none; }
.act-earlier .kicker{ margin:0; }
.act-earlier__item{ border:1px solid var(--line); border-radius:var(--r-chip-lg); padding:var(--sp-2) var(--sp-3); background:var(--surface-1); }
.act-earlier__item > summary{ cursor:pointer; font-size:var(--fs-sm); color:var(--text-2); }

@media (max-width:900px){
  .act-layout{ grid-template-columns:minmax(0, 1fr); }
  .act-panel{ position:static; }
  .act-tiles{ grid-template-columns:minmax(0, 1fr); }
  .act-tile{ min-height:0; }
}