/* Masar — refinement layer.
 *
 * Loaded after masar.css. Every rule here either raises fidelity or fixes a legibility
 * problem; none change layout, so existing markup keeps working. Kept in its own file so the
 * design decisions are reviewable in isolation from the base system.
 */

:root{
  /* Type scale on a 1.25 ratio, fluid at the top so headings breathe on wide screens. */
  --t-xs:11.5px; --t-sm:13px; --t-md:14.5px; --t-lg:17px;
  --t-xl:clamp(21px,2.2vw,26px); --t-2xl:clamp(27px,3.4vw,38px);

  /* Spacing rhythm — every gap should be one of these. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  /* Layered elevation. One large shadow reads as a drop-shadow; a tight contact shadow
     stacked under a wide ambient one is what actually reads as depth. */
  --e-1:0 1px 1px rgba(23,18,43,.04), 0 2px 6px -2px rgba(23,18,43,.08);
  --e-2:0 1px 2px rgba(23,18,43,.05), 0 8px 20px -8px rgba(23,18,43,.14);
  --e-3:0 2px 4px rgba(23,18,43,.06), 0 18px 40px -16px rgba(23,18,43,.22);
  --ring:0 0 0 1px rgba(var(--glow),.14);

  --ease:cubic-bezier(.22,1,.36,1);   /* decelerating — reads responsive, not floaty */
}
:root[data-theme="dark"]{
  --e-1:0 1px 1px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
  --e-2:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -8px rgba(0,0,0,.6);
  --e-3:0 2px 6px rgba(0,0,0,.55), 0 20px 46px -18px rgba(0,0,0,.75);
  --ring:0 0 0 1px rgba(var(--glow),.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --e-1:0 1px 1px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
    --e-2:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -8px rgba(0,0,0,.6);
    --e-3:0 2px 6px rgba(0,0,0,.55), 0 20px 46px -18px rgba(0,0,0,.75);
    --ring:0 0 0 1px rgba(var(--glow),.22);
  }
}

/* Optical typography. Tabular figures wherever numbers are compared down a column. */
body{font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
table,.stat .n,.emp-stat,.rec-pct,.today-pill b{font-variant-numeric:tabular-nums}
.score-ring i{font-variant-numeric:tabular-nums}
h1{font-size:var(--t-2xl);line-height:1.12;letter-spacing:-.022em}
h2{font-size:var(--t-xl);line-height:1.2;letter-spacing:-.015em}
h3{letter-spacing:.13em}
.note{font-size:var(--t-md);line-height:1.62;color:var(--text-2);max-width:74ch}
.hint{font-size:var(--t-sm);line-height:1.55;color:var(--text-3)}

/* Cards: quieter at rest, deliberate on hover. A 4px lift on every card made a dense
   page feel unstable; 2px with a tightening ring reads as precision. */
.spot{box-shadow:var(--e-1);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease)}
.spot:hover{transform:translateY(-2px);box-shadow:var(--e-3),var(--ring)}

/* Buttons — tighter, with a real pressed state. */
.btn{border-radius:11px;box-shadow:var(--e-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--e-2),0 8px 22px -12px rgba(var(--glow),.7)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--e-1);transition-duration:.06s}
.btn.ghost{box-shadow:none;background:color-mix(in srgb,var(--card) 92%,transparent)}
.btn.ghost:hover{background:color-mix(in srgb,var(--stk) 7%,var(--card));box-shadow:var(--e-1)}
.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;filter:saturate(.5)}

/* Tables are the densest surface in the product, so they earn the most care:
   sticky header, hairline rules, hover wash, generous row padding. */
.tablewrap{border-radius:14px;box-shadow:var(--e-1);overflow:auto;scrollbar-width:thin}
table{border-collapse:separate;border-spacing:0;width:100%}
thead th{position:sticky;top:0;z-index:3;
  background:color-mix(in srgb,var(--card) 94%,var(--paper));
  backdrop-filter:saturate(1.6) blur(8px);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;text-align:start;
  padding:13px 16px;border-bottom:1px solid var(--line)}
tbody td{padding:15px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:var(--t-md)}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:color-mix(in srgb,var(--stk) 4%,transparent)}
tbody tr:last-child td{border-bottom:none}

/* Badges — tinted ground rather than flat colour on colour. */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;line-height:1}
.badge.go{background:var(--go-bg);color:var(--go);border-color:color-mix(in srgb,var(--go) 26%,transparent)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.badge.stop{background:var(--stop-bg);color:var(--stop);border-color:color-mix(in srgb,var(--stop) 26%,transparent)}
.badge.stk{background:color-mix(in srgb,var(--stk) 12%,transparent);color:var(--stk);
  border-color:color-mix(in srgb,var(--stk) 28%,transparent)}
.badge.mut{background:color-mix(in srgb,var(--text-3) 10%,transparent);color:var(--text-2);border-color:var(--line)}

/* A visible focus ring is an accessibility requirement, not a flourish. */
input,select,textarea{border-radius:10px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--stk);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--stk) 18%,transparent)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:.8}

/* Sidebar navigation — the active item should be unmistakable. */
.nav-item{border-radius:11px;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.nav-item:hover{background:color-mix(in srgb,var(--stk) 8%,transparent);transform:translateX(2px)}
.nav-item[aria-current="page"],.nav-item.active{
  background:color-mix(in srgb,var(--stk) 13%,transparent);color:var(--stk);font-weight:600;
  box-shadow:inset 2px 0 0 var(--stk)}
[dir="rtl"] .nav-item:hover{transform:translateX(-2px)}
[dir="rtl"] .nav-item[aria-current="page"],[dir="rtl"] .nav-item.active{box-shadow:inset -2px 0 0 var(--stk)}

/* The match-score ring is the product's signature object — give it presence. */
.score-ring{box-shadow:var(--e-1);transition:transform .28s var(--ease)}
.scorebtn:hover .score-ring{transform:scale(1.06)}
.score-ring i{font-size:14px;font-weight:700;letter-spacing:-.02em}

/* Requirement breakdown bars */
.mf-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text-3) 16%,transparent)}
.mf-bar i{border-radius:99px}

/* Skeleton shimmer for anything still loading. */
@keyframes masar-shimmer{100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,
    color-mix(in srgb,var(--text-3) 9%,transparent) 25%,
    color-mix(in srgb,var(--text-3) 16%,transparent) 37%,
    color-mix(in srgb,var(--text-3) 9%,transparent) 63%);
  background-size:200% 100%;animation:masar-shimmer 1.4s linear infinite;
  border-radius:8px;color:transparent}

/* A blank table is a bug you can see. */
.empty-state{text-align:center;padding:var(--s-7) var(--s-5);color:var(--text-3)}
.empty-state h3{color:var(--text-2);font-family:var(--display);font-size:var(--t-lg);
  text-transform:none;letter-spacing:normal;margin-bottom:var(--s-2)}

/* Respect the user's motion preference — non-negotiable. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .spot:hover,.btn:hover,.nav-item:hover{transform:none}
}

/* Arabic deserves a face designed for it, not a Latin fallback with wide tracking.
 * That is now IBM Plex Sans Arabic, self-hosted and set in theme.css for BOTH scripts —
 * one family covering Latin and Arabic with matched weights, so the two sides of the product
 * finally look like the same product. This block previously re-declared Noto here and, because
 * premium.css loads last, silently overrode the whole type system. */
[dir="rtl"] .badge,[dir="rtl"] h3,[dir="rtl"] label,[dir="rtl"] thead th{letter-spacing:0}
[dir="rtl"] body{line-height:1.75}

/* ============================================================================
   Component polish — applied on top of the new foundation in theme.css.
   Each block fixes something the audit flagged, not decoration for its own sake.
   ============================================================================ */

/* Cards had border + shadow + white background all at once, which is the generic
   look. Lead with the surface and a hairline; reserve elevation for hover, so depth
   means "you can act on this" rather than being ambient noise. */
.spot {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Anything genuinely clickable lifts. Anything informational does not — so the
   cursor is honest about what will happen. */
.spot.is-clickable, .stat.is-clickable, .rec-row, .card-link {
  cursor: pointer;
}
.spot.is-clickable:hover, .stat.is-clickable:hover, .rec-row:hover, .card-link:hover {
  border-color: rgba(var(--glow), .40);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.spot.is-clickable:active, .stat.is-clickable:active { transform: translateY(0); }

/* Status badges: six semantics, each with its own hue AND its own word. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}
.badge.new       { color: var(--st-new);       background: var(--st-new-bg);       border-color: color-mix(in srgb, var(--st-new) 22%, transparent); }
.badge.progress,
.badge.stk       { color: var(--st-progress);  background: var(--st-progress-bg);  border-color: color-mix(in srgb, var(--st-progress) 22%, transparent); }
.badge.go,
.badge.done      { color: var(--st-done);      background: var(--st-done-bg);      border-color: color-mix(in srgb, var(--st-done) 24%, transparent); }
.badge.warn,
.badge.wait      { color: var(--st-wait);      background: var(--st-wait-bg);      border-color: color-mix(in srgb, var(--st-wait) 26%, transparent); }
.badge.stop,
.badge.fail      { color: var(--st-fail);      background: var(--st-fail-bg);      border-color: color-mix(in srgb, var(--st-fail) 24%, transparent); }
.badge.interview { color: var(--st-interview); background: var(--st-interview-bg); border-color: color-mix(in srgb, var(--st-interview) 24%, transparent); }
.badge.mut,
.badge.idle      { color: var(--st-idle);      background: var(--st-idle-bg);      border-color: color-mix(in srgb, var(--st-idle) 20%, transparent); }

/* Primary and secondary buttons were too close in weight to tell apart at a glance. */
.btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  border-radius: var(--radius-sm); padding: 10px 18px;
  background: var(--stk); color: #fff; border: 1px solid var(--stk);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--stk-deep); border-color: var(--stk-deep); box-shadow: var(--shadow); }
.btn.ghost {
  background: var(--card); color: var(--text); border-color: var(--line); box-shadow: none;
}
.btn.ghost:hover { background: var(--card-sunk); border-color: var(--text-3); }
.btn:disabled, .btn[disabled] {
  opacity: 1; background: var(--card-sunk); color: var(--text-3);
  border-color: var(--line); box-shadow: none; cursor: not-allowed;
}

/* Sortable headers gave no hint they were interactive — the arrow only appeared
   after you had already guessed. Show a dimmed one at rest. */
.sortth { cursor: pointer; user-select: none; }
.sortth::after {
  content: "↕"; margin-inline-start: 6px; opacity: .35; font-size: 11px;
  transition: opacity .15s ease;
}
.sortth:hover { color: var(--stk); }
.sortth:hover::after { opacity: .8; }
.sortth[data-active]::after { content: none; }
.sortar { color: var(--stk); font-size: 11px; margin-inline-start: 6px; }

/* Tables: readable rows, honest hover, sunk header. */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
thead th {
  background: var(--card-sunk); color: var(--text-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: start;
}
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: var(--card-sunk); }

/* Inputs: visible affordance, and a focus ring that matches everything else. */
input, select, textarea {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--stk); box-shadow: var(--ring);
}

/* Icon-only controls need a name — they had none. */
.iconbtn { position: relative; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; inset-inline-start: 50%; transform: translateX(-50%) translateY(4px);
  bottom: calc(100% + 8px); white-space: nowrap;
  background: var(--text); color: var(--card);
  font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 7px;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  z-index: var(--z-overlay); box-shadow: var(--shadow);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Empty states: a blank table read as broken. */
.empty-state {
  text-align: center; padding: 44px 24px; color: var(--text-2);
}
.empty-state .es-icon {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px;
  background: var(--stk-soft); color: var(--stk);
  display: grid; place-items: center; font-size: 20px;
}
.empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }

/* Skeletons instead of spinners, so loading keeps the page's shape. */
.skeleton {
  background: linear-gradient(90deg, var(--card-sunk) 25%, var(--line-soft) 37%, var(--card-sunk) 63%);
  background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--radius-sm);
}
@keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ---------------------------------------------------------------------------
   Type scale. Lives here because premium.css loads last — masar.css still sets
   h1{font-weight:400} from the old serif-display era and would otherwise win.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); }
h1 {
  font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
  font-size: clamp(30px, 5vw, 54px);
}
h2 { font-weight: 700; letter-spacing: -.022em; line-height: 1.18; font-size: clamp(21px, 2.6vw, 30px); }
h3 { font-weight: 700; letter-spacing: -.015em; line-height: 1.3;  font-size: 17px; }

/* Arabic: negative tracking breaks the joins, and the script needs more leading. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.32; font-weight: 700; }
[dir="rtl"] h2 { line-height: 1.4; }

/* Body copy should not run past a comfortable measure. */
.note, .hint, p { max-width: 68ch; }
[dir="rtl"] .note, [dir="rtl"] .hint, [dir="rtl"] p { max-width: 62ch; }

/* Buttons: the old style was uppercase mono with wide tracking, which fought the
   new type system and read as shouting in Arabic (where caps do not exist). */
.btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; border-radius: var(--radius-sm);
}
.btn.sm { font-size: 12.5px; padding: 8px 14px; }
[dir="rtl"] .btn { letter-spacing: 0; }

/* Same for field labels. */
label { font-family: var(--sans); font-size: 12.5px; font-weight: 600;
        letter-spacing: 0; text-transform: none; }