/* Ono Student Union elections: shared interface system */

:root{
  --navy-950:#0c2c39;
  --navy-900:#144659;
  --navy-800:#1b5468;
  --navy-700:#296a7d;
  --teal-600:#307681;
  --teal-700:#255f6c;
  --teal-400:#2d8194;
  --teal-100:#d4e8eb;
  --teal-50:#edf6f7;
  --sage-50:#f3f7f6;
  --sage-100:#e7efec;
  --sage-200:#d3e6e3;
  --line:#d4dfdc;
  --line-2:#b7c7c3;
  --ink:#152a33;
  --ink-2:#41565d;
  --ink-3:#566a71;
  --paper:#ffffff;
  --coral:#e54f2b;
  --coral-ink:#b43a1b;
  --coral-50:#fdeee9;
  --coral-100:#f7cdbf;
  --chip:#c9d6d2;

  --font:'Alef','Arial Hebrew',Arial,sans-serif;

  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem; --fs-16:1rem;
  --fs-19:1.1875rem; --fs-23:1.4375rem; --fs-28:1.75rem; --fs-34:2.125rem; --fs-44:2.75rem;

  --r-card:14px; --r-ctl:10px; --r-btn:8px; --r-pill:999px;
  --elev-card:0 1px 2px rgba(12,44,57,.10), 0 16px 32px -14px rgba(12,44,57,.40);
  --elev-over:0 2px 6px rgba(12,44,57,.12), 0 28px 64px -20px rgba(12,44,57,.48);
  --ease-out:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}

/* ---------- browser surfaces ---------- */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scrollbar-color:var(--line-2) transparent;}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--sage-50); line-height:1.6; -webkit-font-smoothing:antialiased;}
::selection{background:var(--sage-200); color:var(--navy-900);}
input,textarea{caret-color:var(--teal-600);}
:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px;}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px;}
button{font-family:inherit;}
table,.num{font-variant-numeric:tabular-nums;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- icons ---------- */
.u-ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.u-ic--sm{width:15px; height:15px;}
.u-ic--lg{width:22px; height:22px;}

/* diamond marker, from the union mark */
.u-dia{display:inline-block; width:8px; height:8px; flex:none; background:currentColor; transform:rotate(45deg); border-radius:1.5px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:var(--r-btn);
  font:700 var(--fs-15)/1 var(--font); white-space:nowrap; text-decoration:none; cursor:pointer;
  background:var(--paper); color:var(--navy-900); border:1px solid var(--line-2);
  transition:background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover{background:var(--sage-100); border-color:var(--navy-700);}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--teal-600); border-color:var(--teal-600); color:#fff;}
.btn-primary:hover{background:var(--teal-700); border-color:var(--teal-700);}
.btn-ghost{background:transparent;}
.btn-quiet{background:transparent; border-color:transparent; color:var(--teal-700); padding:0 10px;}
.btn-quiet:hover{background:var(--teal-50); border-color:transparent;}
.btn-danger{background:var(--paper); border-color:var(--coral-100); color:var(--coral-ink);}
.btn-danger:hover{background:var(--coral-50); border-color:var(--coral);}
.btn-sm{min-height:34px; padding:0 15px; font-size:var(--fs-13);}
.btn-block{width:100%;}
.btn .u-ic{width:16px; height:16px;}

/* ---------- form controls (zero specificity so pages can refine) ---------- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select, textarea){
  font:inherit; font-size:var(--fs-15); line-height:1.3; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r-ctl); padding:10px 13px; min-height:44px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):hover{border-color:var(--navy-700);}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):focus-visible{outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(48,118,129,.22);}
:where(input, textarea)::placeholder{color:var(--ink-3); opacity:1;}
:where(input:disabled, select:disabled, textarea:disabled){background:var(--sage-100); color:var(--ink-3); cursor:not-allowed;}
:where(textarea){min-height:90px; resize:vertical;}
:where(select){
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-inline-start:13px; padding-inline-end:38px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23144659' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 13px center; background-size:14px;
}
:where(input[type=checkbox], input[type=radio]){accent-color:var(--teal-600); width:18px; height:18px; margin:0; cursor:pointer;}
:where(input[type=file]){font:inherit; font-size:var(--fs-13); color:var(--ink-2);}
:where(input[type=file])::file-selector-button{
  font:700 var(--fs-13)/1 var(--font); color:var(--navy-900); background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r-btn); padding:9px 14px; margin-inline-end:10px; cursor:pointer;
}
:where(input[type=file])::file-selector-button:hover{background:var(--sage-100);}

/* ---------- small labels ---------- */
.u-tag{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:var(--fs-12); font-weight:700; white-space:nowrap; background:var(--sage-100); color:var(--ink-2); border:1px solid var(--line);}
.u-tag--teal{background:var(--teal-50); color:var(--teal-700); border-color:var(--teal-100);}
.u-tag--caution{background:var(--coral-50); color:var(--coral-ink); border-color:var(--coral-100);}

/* appendix / clause code block: the procedure's own numbering as identifier */
.u-code{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 6px; flex:none;
  border:1.5px solid var(--navy-900); border-radius:8px; color:var(--navy-900);
  font:700 var(--fs-16)/1 var(--font);
}
.u-code small{display:block; font-size:9px; font-weight:700; letter-spacing:.02em; margin-bottom:1px;}

/* ---------- election phase: named state, shape plus text, never color alone ---------- */
.u-phase{display:inline-flex; align-items:center; gap:9px; min-height:32px; padding:0 14px; border-radius:var(--r-pill); font-size:var(--fs-13); font-weight:700; border:1px solid; white-space:nowrap;}
.u-phase::before{content:""; width:9px; height:9px; transform:rotate(45deg); border-radius:1.5px; border:1.5px solid currentColor; background:currentColor; flex:none;}
.u-phase[data-phase="closed"]{color:var(--coral-ink); background:var(--coral-50); border-color:var(--coral-100);}
.u-phase[data-phase="closed"]::before{background:transparent;}

/* test / caution pattern */
.u-hatch{background-image:repeating-linear-gradient(135deg, var(--coral-50) 0 7px, #fff 7px 14px);}
.u-caution-banner{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; font-size:var(--fs-13); font-weight:700; color:var(--coral-ink);
  border-bottom:1px solid var(--coral-100);
  background-image:repeating-linear-gradient(135deg, var(--coral-50) 0 7px, #fff 7px 14px);
}

/* ---------- tables ---------- */
.u-table{width:100%; border-collapse:collapse; background:var(--paper); font-size:var(--fs-14);}
.u-table th{background:var(--sage-100); color:var(--ink-2); font-size:var(--fs-12); font-weight:700; text-align:start; padding:10px 14px; white-space:nowrap; border-bottom:1px solid var(--line);}
.u-table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:start; vertical-align:middle;}
.u-table tbody tr:last-child td{border-bottom:none;}
.u-table tbody tr{transition:background-color .12s;}
.u-table tbody tr:hover{background-color:var(--sage-50);}

/* ---------- dialogs and toasts ---------- */
dialog.u-dialog{border:none; padding:0; border-radius:var(--r-card); box-shadow:var(--elev-over); color:var(--ink); background:var(--paper); max-height:88vh;}
dialog.u-dialog::backdrop{background:rgba(12,44,57,.52);}
.u-toast{
  position:fixed; bottom:22px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; z-index:90;
  background:var(--navy-950); color:#fff; padding:12px 18px; border-radius:var(--r-ctl); font-size:var(--fs-13); font-weight:700;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.u-toast.show{opacity:1; transform:none;}

/* ============================================================
   THE UNION CARD: ID-1 proportion, the one elevated object
   ============================================================ */
.ucard{
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; aspect-ratio:85.6/53.98; container-type:inline-size;
  border-radius:var(--r-card); background:var(--paper); color:var(--navy-900);
  box-shadow:var(--elev-card);
  display:grid; grid-template-rows:19% 1fr 21%;
  font-family:var(--font); line-height:1.15; user-select:none; -webkit-user-select:none;
}
.ucard::before{content:""; position:absolute; inset:0; z-index:-1; background:url(/guilloche.svg) center/cover no-repeat; opacity:.26;}
.ucard-band{
  display:flex; align-items:center; gap:3cqw; padding:0 5cqw;
  background:var(--teal-600); color:#fff; font-size:4.1cqw; font-weight:700;
}
.ucard-mark{
  width:6.6cqw; height:6.6cqw; border-radius:1.6cqw; background:#fff url(/logo.avif) right center/auto 100% no-repeat; flex:none;
}
.ucard-band .ucard-kind{margin-inline-start:auto; font-weight:400; opacity:.92; font-size:max(11px, 3.4cqw);}
.ucard-body{display:grid; grid-template-columns:24cqw 1fr; gap:4.5cqw; padding:4.5cqw 5cqw 0; align-items:start; min-height:0;}
.ucard-photo{
  width:24cqw; aspect-ratio:3/4; border-radius:2cqw; overflow:hidden; background:var(--sage-100);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--navy-700);
  font-size:9cqw; font-weight:700; letter-spacing:.02em;
}
.ucard-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 4%; transform:scale(1.9); transform-origin:50% 12%;}
.ucard-photo .u-ic{width:11cqw; height:11cqw; stroke-width:1.4;}
.ucard-fields{display:flex; flex-direction:column; gap:1.5cqw; min-width:0; padding-top:.4cqw; padding-inline-end:15cqw;}
.ucard-label{font-size:max(11px, 2.7cqw); color:var(--ink-3); font-weight:700;}
.ucard-name{
  font-size:5.8cqw; font-weight:700; color:var(--navy-900); line-height:1.1; overflow-wrap:anywhere; border-radius:.8cqw;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ucard-name.is-empty{color:var(--ink-3); font-weight:400;}
.ucard-line{font-size:max(11px, 3.5cqw); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:.8cqw;}
.ucard-line b{color:var(--navy-900);}
.ucard-chip{
  position:absolute; inset-inline-end:5cqw; top:27cqw; width:12cqw; height:9cqw;
  background:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cg fill='none' stroke='%23255f6c' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1' y='1' width='46' height='34' rx='7'/%3E%3Crect x='17' y='9' width='14' height='18' rx='3'/%3E%3Cpath d='M1 12h16M1 24h16M31 12h16M31 24h16M24 1v8M24 27v8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85;
}
.ucard-foot{
  display:flex; align-items:center; justify-content:space-between; gap:3cqw; padding:0 5cqw;
  border-top:1px solid rgba(20,70,89,.14); background:rgba(255,255,255,.72);
}
.ucard-no{font-size:4.6cqw; font-weight:700; letter-spacing:.14em; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; color:var(--navy-900);}
.ucard-no.is-pending{color:var(--ink-3); letter-spacing:.02em; font-size:max(11px, 3.3cqw); direction:rtl;}
.ucard-role{display:inline-flex; align-items:center; gap:1.6cqw; font-size:max(11px, 3.4cqw); font-weight:700; color:var(--teal-700);}
.ucard-role .u-dia{width:1.8cqw; height:1.8cqw;}
.ucard-stamp{
  position:absolute; inset-inline-start:17cqw; top:25cqw; width:30cqw; height:30cqw; z-index:2; pointer-events:none;
  color:var(--teal-700); opacity:0; transform:rotate(-12deg) scale(1.3); mix-blend-mode:multiply;
}
.ucard-stamp svg{width:100%; height:100%; display:block;}
.ucard.is-issued .ucard-stamp{animation:ucard-stamp .6s var(--ease-out) .35s both;}
@keyframes ucard-stamp{
  0%{opacity:0; transform:rotate(-12deg) scale(1.34); filter:blur(3px);}
  55%{opacity:.92; filter:blur(0);}
  100%{opacity:.88; transform:rotate(-12deg) scale(1);}
}
.ucard-line.is-updated,.ucard-name.is-updated{animation:ucard-ink .5s ease-out;}
.ucard-sig{height:10cqw; max-width:34cqw; object-fit:contain; mix-blend-mode:multiply; opacity:.92;}
.ucard-no{white-space:nowrap;}
.ucard-foot:has(.ucard-sig) .ucard-role{display:none;}
@keyframes ucard-ink{from{background:rgba(48,118,129,.20);} to{background:transparent;}}

/* variants: committee credential and temporary pass use a navy band */
.ucard--navy .ucard-band{background:var(--navy-900);}
.ucard--compact{grid-template-rows:22% 1fr 22%;}

@media (prefers-reduced-motion:reduce){
  .ucard.is-issued .ucard-stamp{animation:none; opacity:.88; transform:rotate(-12deg);}
  .ucard-line.is-updated,.ucard-name.is-updated{animation:none;}
  .btn,.u-toast{transition:none;}
}
.ucard-line.is-empty{color:var(--ink-3);}
.ucard-photo{font-variant-numeric:normal;}