/* =========================================================================
   One palette, loaded first by every page.

   Why this file exists
   --------------------
   There used to be three token sets that disagreed. main.css was indigo and
   violet, event.css was its own five-colour semantic system, and admin.css
   redefined both under `.adm-body` as near-black zinc. The same button was a
   different colour depending on which shell you happened to be in, which is
   exactly what a person noticed going from the attendance screen to the
   console and not being able to tell it was the same product.

   The palette is "Azure & Amber": an institutional navy carrying the work, and
   a warm amber used sparingly for the thing you are meant to look at. Both are
   lifted from the Ignite landing design rather than invented here.

   Two conventions worth keeping:

   * Tints come from color-mix(), not from a 50-900 ramp. One accent token
     produces every tint of itself, so there is nothing to keep in step.
   * Shadows are tinted with the brand, never black. It is the cheapest way to
     stop a mostly-white layout reading as grey, and it costs one token.

   The floor shell that made that worst - its own template, its own stylesheet
   loaded on its own, its own component family - is gone. Every role now uses
   the console, with the rail filtered to what that person can open.
   ========================================================================= */

:root {
  /* three background levels, not two */
  --canvas:        #f2f6fd;
  --surface:       #ffffff;
  --surface-2:     #e4ecf8;

  /* two text weights */
  --ink:           #0b2447;
  --ink-soft:      #2a4a73;
  --ink-faint:     #5b7299;

  /* two border weights - strong is for inputs and anything interactive */
  --line:          #ccd9ee;
  --line-strong:   #9fb6dc;

  /* the navy that carries the work */
  --primary:       #1c478f;
  --primary-d:     #123163;
  --primary-ink:   #ffffff;

  /* the warm spark, used sparingly and never as a large fill */
  --accent:        #ea6a1e;
  --accent-ink:    #0b2447;

  /* the inverted scope: rails, CTA bands, the console's own chrome */
  /* the rail navy Campus+ uses, so the two products look related */
  --deep-a:        #1e2842;
  --deep-b:        #26314f;
  --deep-ink:      #ffffff;
  --deep-soft:     #afc5e8;

  --ring:          #1c478f;
  --brand-grad:    linear-gradient(135deg, #1c478f 0%, #ea6a1e 120%);

  /* Four semantic states, each a soft triple plus a saturated version. The
     soft triple is for chips and banners; the saturated one is for a 3px bar
     or a single number, never a large surface. */
  --ok-bg:      #ebfef4;  --ok-line:      #d3fce5;  --ok-ink:      #047857;  --ok:      #10b981;
  --info-bg:    #f0f8ff;  --info-line:    #d7e3fd;  --info-ink:    #1189dd;  --info:    #3b82f6;
  --warn-bg:    #fffcf0;  --warn-line:    #fcf3d7;  --warn-ink:    #b45309;  --warn:    #f59e0b;
  --bad-bg:     #fff0f0;  --bad-line:     #ffe0e0;  --bad-ink:     #b91c1c;  --bad:     #ef4444;

  --radius:        14px;
  --radius-md:     10px;
  --radius-sm:     8px;
  --radius-pill:   999px;

  /* tinted with the brand, not black */
  --shadow-sm:     0 1px 2px rgba(18, 49, 99, .06), 0 2px 8px -4px rgba(18, 49, 99, .10);
  --shadow:        0 10px 24px -10px rgba(18, 49, 99, .28);
  --shadow-lg:     0 26px 50px -30px rgba(18, 49, 99, .45);
}

/* =========================================================================
   Toasts - shared by base.html and admin_base.html.

   One implementation instead of the three that existed, each with a different
   set of variants and none of them dismissable.
   ========================================================================= */

.toasts {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* the gaps must not eat clicks on whatever is underneath */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 260px;
  max-width: 380px;
  padding: 12px 34px 12px 13px;
  border: 1px solid var(--info-line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  animation: toast-in .2s ease-out;
}

.toast-ic { flex: 0 0 auto; display: flex; margin-top: 1px; }
.toast-ic svg { width: 16px; height: 16px; }
.toast-body { flex: 1 1 auto; min-width: 0; font-weight: 500; }

.toast-x {
  position: absolute;
  right: 6px;
  top: 5px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 2px 5px;
  opacity: .55;
  cursor: pointer;
  border-radius: 6px;
}
.toast-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.toast--success { background: var(--ok-bg);   border-color: var(--ok-line);   border-left-color: var(--ok);   color: var(--ok-ink); }
.toast--error   { background: var(--bad-bg);  border-color: var(--bad-line);  border-left-color: var(--bad);  color: var(--bad-ink); }
.toast--warning { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: var(--warn-ink); }
.toast--info,
.toast--debug   { background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); color: var(--info-ink); }

.toast.is-going { opacity: 0; transform: translateX(10px); transition: opacity .2s, transform .2s; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* On a phone the stack spans the width, because a 380px card pinned to the
   right of a 360px screen is a card with its text cut off. */
@media (max-width: 560px) {
  .toasts { top: 8px; left: 8px; right: 8px; }
  .toast { min-width: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-going { transition: none; }
}

/* The Hardware / Software tag on a problem statement.

   Defined here rather than in one shell's stylesheet because it has to look
   the same to a student browsing problems, a reviewer scoring a team and an
   admin reading the board - the track is the same fact on all three pages.

   Hardware takes the warm accent and software the navy: the two are told apart
   at a glance across a page of otherwise identical rows, which is the whole
   job of the tag. */
.trk {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
}
.trk-hardware {
  color: #9a4510;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 35%, #fff);
}
.trk-software {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  border-color: color-mix(in srgb, var(--primary) 25%, #fff);
}