/* Shared DIAM brand tokens — oasis / brass palette for login, office, register, my, and future pages.
   Colors + status; spacing --s-1…--s-6; radii --r / --r-lg; elevation --sh*; focus --ring; type --text*.
   Pages may override surfaces, lines, radii, or shadows locally (e.g. office modern layer). Do not treat
   brass/gold as a status color — use --warn / --info / --ok / --bad for meaning. */
:root{
  /* surfaces & ink */
  --bg:#EEF4F3; --surface:#FFFFFF; --surface-2:#F7FAF9;
  --line:#E2E9E7; --line-2:#EDF2F1;
  --ink:#16201C; --ink-soft:#5C6B65; --ink-faint:#6B7873;
  /* brand */
  --oasis:#0D3B34; --oasis-2:#12564C; --teal:#0F8A7A; --teal-soft:#E3F3F0;
  --brass:#C7A24C; --brass-deep:#A9863A; --brass-soft:#FAF3E3; --parchment:#F5F0E6;
  /* status */
  --ok:#2EA555; --ok-soft:#E8F6ED; --err:#C6432B; --err-soft:#FBEDEA; --bad:#C6432B; --bad-soft:#FBEDEA;
  --warn:#B45309; --warn-soft:#FEF3C7;
  --info:#2C6FB5; --info-soft:#E9F1FA;
  /* spacing scale (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  /* radius */
  --r:10px; --r-lg:14px;
  /* elevation — baseline; office enterprise/modern layers may refine */
  /* 1.10: brand-tinted ambient shadows (oasis hue) — depth without hard grey borders; cheap for low-end phones (no blur filters) */
  --sh:0 1px 2px rgba(13,59,52,.06),0 8px 24px -12px rgba(13,59,52,.14);
  --sh-2:0 2px 6px rgba(13,59,52,.08),0 18px 40px -18px rgba(13,59,52,.18);
  --sh-card:0 1px 2px rgba(13,59,52,.05),0 6px 18px -8px rgba(13,59,52,.12);
  /* focus ring (teal wash) */
  --ring:0 0 0 3px rgba(15,138,122,.22);
  /* type (conservative) */
  --text-sm:.84rem; --text:.95rem; --text-lg:1.1rem;
  /* shared chrome */
  --sb:248px;
  /* live status — traffic lights, shared by Office, My Files, registration and the employer portal */
  --go:#12B000; --stop:#E10600; --wait:#F5A000;
  --go-soft:#E5F8E0; --stop-soft:#FFE4E0; --wait-soft:#FFF3D6;
}

/* Slide switch: a track and a knob. Off is red, on is green.
   .bad flips that, for a blocker that is on when the problem is present.
   The real control stays a checkbox, so existing save handlers keep working. */
.diam-sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;line-height:1.35;max-width:100%;vertical-align:middle}
.diam-sw input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;min-width:0!important;margin:0!important;padding:0!important;pointer-events:none;border:0!important}
.diam-sw-ui{width:56px;height:32px;border-radius:999px;background:var(--stop);position:relative;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px rgba(225,6,0,.2);transition:background .16s ease,box-shadow .16s ease}
.diam-sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .16s ease}
.diam-sw:has(input:checked) .diam-sw-ui{background:var(--go);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px rgba(18,176,0,.24)}
.diam-sw:has(input:checked) .diam-sw-ui::after{transform:translateX(24px)}
.diam-sw.bad .diam-sw-ui{background:var(--go);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px rgba(18,176,0,.24)}
.diam-sw.bad:has(input:checked) .diam-sw-ui{background:var(--stop);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px rgba(225,6,0,.24)}
.diam-sw:has(input:focus-visible) .diam-sw-ui{outline:3px solid var(--teal,#0F8A7A);outline-offset:3px}
.diam-sw:has(input:disabled){cursor:not-allowed;opacity:.55}
.diam-sw-tx{min-width:0}
.diam-lite{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--stop);box-shadow:0 0 0 3px rgba(225,6,0,.24);vertical-align:middle}
.diam-lite.on{background:var(--go);box-shadow:0 0 0 3px rgba(18,176,0,.3)}
.diam-lite.wait{background:var(--wait);box-shadow:0 0 0 3px rgba(245,160,0,.34)}
.diam-lite.off{background:var(--stop);box-shadow:0 0 0 3px rgba(225,6,0,.24)}
.diam-sw .diam-lite{background:var(--stop);box-shadow:0 0 0 3px rgba(225,6,0,.24)}
.diam-sw:has(input:checked) .diam-lite{background:var(--go);box-shadow:0 0 0 3px rgba(18,176,0,.3)}
.diam-sw.bad .diam-lite{background:var(--go);box-shadow:0 0 0 3px rgba(18,176,0,.3)}
.diam-sw.bad:has(input:checked) .diam-lite{background:var(--stop);box-shadow:0 0 0 3px rgba(225,6,0,.24)}
@media (prefers-reduced-motion:reduce){.diam-sw-ui,.diam-sw-ui::after{transition:none}}