/* Direction: campus help desk — warm paper, ink blue, a friendly grotesque display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f6f2e9;
  --surface: #fbf9f5;
  --surface-2: #eae6df;
  --border: #d4d2cc;
  --border-strong: #aeadac;
  --ink: #1a1f2e;
  --muted: #616266;
  --accent: #2c4fd1;
  --accent-hover: #2543b2;
  --accent-ink: #ffffff;
  --accent-text: #2342b0;
  --accent-strong: #2c4fd1;
  --accent-soft: #dadbe6;
  --accent-border: #9ba9de;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe4d4;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eedfce;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efd8d0;
  --danger-strong: #b91c1c;
  --chart-1: #2c4fd1;
  --chart-2: #b440b7;
  --chart-3: #901216;
  --chart-4: #916e02;
  --chart-5: #045e1e;
  --chart-6: #078693;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --x-urgent: #b42318;
  --x-hi: #c2410c;
  --x-prog: #a16207;
  --x-normal: #0e7490;
  --x-low: #64748b;
  --x-ok: #1a7f4b;
  --x-wait: #7c3aed;
  --x-band: #121a33;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030712;
  --surface: #1c202a;
  --surface-2: #10131e;
  --border: #262a33;
  --border-strong: #4f5159;
  --ink: #f6f2e9;
  --muted: #959493;
  --accent: #2c4fd1;
  --accent-hover: #4c69d8;
  --accent-ink: #ffffff;
  --accent-text: #748be1;
  --accent-strong: #6881de;
  --accent-soft: #0c173c;
  --accent-border: #152768;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #07221b;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a1810;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2b0c14;
  --danger-strong: #cd5c5c;
  --chart-1: #3b63e6;
  --chart-2: #c855cb;
  --chart-3: #e03937;
  --chart-4: #a6800e;
  --chart-5: #189a3a;
  --chart-6: #149aa9;
}

.tag{--c:var(--x-low);display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.15rem .65rem;font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 62%,var(--ink))}
.tag::before{content:"";width:.45rem;height:.45rem;border-radius:99px;background:var(--c)}
.st-open{--c:var(--accent)}
.st-in_progress{--c:var(--x-prog)}
.st-waiting{--c:var(--x-wait)}
.st-resolved{--c:var(--x-ok)}
.pr-low{--c:var(--x-low)}
.pr-normal{--c:var(--x-normal)}
.pr-high{--c:var(--x-hi)}
.pr-urgent{--c:var(--x-urgent)}
.text-urgent{color:color-mix(in srgb,var(--x-urgent) 65%,var(--ink))}
.field-error{font-size:.85rem;color:color-mix(in srgb,var(--x-urgent) 65%,var(--ink))}

.band{background:var(--x-band);color:var(--x-on-photo)}
.band-link{display:inline-flex;align-items:center;gap:.4rem;border-radius:10px;padding:.4rem .7rem;font-size:.875rem;color:var(--x-on-photo);opacity:.85;transition:background .15s,opacity .15s}
.band-link:hover{background:rgba(255,255,255,.12);opacity:1}
.band-link:focus-visible{outline:2px solid var(--x-on-photo);outline-offset:2px}
.band .divide-white\/15 > * + *{border-color:rgba(255,255,255,.15)}

.stub{position:relative;border:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);border-radius:22px;background:var(--surface);padding:1.75rem;transform:rotate(-2deg);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--ink) 55%,transparent);animation:stub-in .9s cubic-bezier(.2,.8,.2,1) both}
.stub::before,.stub::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:99px;background:var(--canvas);border:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.stub::before{left:-12px;transform:translateY(-50%)}
.stub::after{right:-12px;transform:translateY(-50%)}
@keyframes stub-in{from{transform:translateY(24px) rotate(2deg)}to{transform:rotate(-2deg)}}
html.reduced-motion .stub{animation:none}

.step-no{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:700}

.steps{display:flex;gap:.4rem;list-style:none;padding:0;margin:0}
.steps li{flex:1;position:relative;padding-top:1.1rem;font-size:.8rem;color:var(--muted)}
.steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:99px;background:var(--border)}
.steps li[data-done="true"]{color:var(--ink);font-weight:500}
.steps li[data-done="true"]::before{background:var(--accent)}

.chip{cursor:pointer;transition:background .15s,color .15s}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.msg{border:1px solid var(--border);border-radius:16px;padding:.9rem 1.1rem;background:var(--surface)}
.msg-agent{background:var(--accent-soft);border-color:transparent}
.msg-note{border-style:dashed;background:color-mix(in srgb,var(--x-prog) 10%,transparent)}
.msg-meta{font-size:.78rem;color:var(--muted);margin-bottom:.25rem;font-weight:500}
.msg-system{text-align:center;font-size:.8rem;color:var(--muted)}

summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-text)}
.faq-item[open]{border-color:var(--accent)}