/* Tajawal is bundled locally so the approved dashboard typography does not
   depend on the active WordPress theme or a third-party font request. */
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/tajawal/tajawal-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/tajawal/tajawal-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/tajawal/tajawal-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/tajawal/tajawal-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/tajawal/tajawal-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/tajawal/tajawal-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/tajawal/tajawal-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/tajawal/tajawal-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 900; src: url("../fonts/tajawal/tajawal-arabic-900-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-display: swap; font-weight: 900; src: url("../fonts/tajawal/tajawal-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ========================================================================== 
   PREP4STEP Design System
   --------------------------------------------------------------------------
   The single source of truth for the platform's visual language. Every other
   stylesheet declares this file as a dependency, so tokens always load first
   and cascade order never depends on enqueue order.

   Identity: deep emerald ground, warm cream type, gold as the accent reserved
   for the student's own achievement. Green signals correctness and progress;
   gold signals value and attainment; coral is used only for genuine problems.

   Structure
     1. Tokens
     2. Reset and page shell
     3. Typography
     4. Buttons
     5. Cards and surfaces
     6. Badges, chips, pills
     7. Data display: meters, bars, stats, trends
     8. Header and navigation
     9. States: empty, loading, alerts, gates
    10. Forms
    11. Utilities
    12. Motion, focus, print, responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.see-app,
.see-shell {
  /* Ground — deep emerald through near-black */
  --see-bg: #001010;
  --see-bg-soft: #041817;
  --see-surface: #062322;
  --see-surface-2: #0a2b28;
  --see-surface-3: #123734;
  --see-surface-deep: #021616;

  /* Lines */
  --see-line: rgba(255, 255, 255, 0.09);
  --see-line-strong: rgba(255, 255, 255, 0.16);
  --see-line-gold: rgba(216, 166, 58, 0.28);

  /* Type — warm cream, not clinical white */
  --see-text: #f6f2e9;
  --see-text-soft: #d9e2dd;
  --see-muted: #a6b4b0;
  --see-muted-2: #788a86;

  /* Emerald / progress */
  --see-green: #12b96a;
  --see-green-bright: #1bd17c;
  --see-green-dim: rgba(18, 185, 106, 0.14);
  --see-green-line: rgba(18, 185, 106, 0.34);

  /* Gold / attainment */
  --see-gold: #d8a63a;
  --see-gold-bright: #f2ad1d;
  --see-gold-dim: rgba(216, 166, 58, 0.14);
  --see-gold-line: rgba(216, 166, 58, 0.32);

  /* Signal */
  --see-danger: #ff747d;
  --see-danger-dim: rgba(255, 116, 125, 0.14);
  --see-warn: #e6b94e;
  --see-warn-dim: rgba(230, 185, 78, 0.14);
  --see-info: #6ec6c0;
  --see-info-dim: rgba(110, 198, 192, 0.14);

  /* Spacing — 4px base, named by step not by pixel */
  --see-s1: 4px;
  --see-s2: 8px;
  --see-s3: 12px;
  --see-s4: 16px;
  --see-s5: 20px;
  --see-s6: 24px;
  --see-s7: 32px;
  --see-s8: 40px;
  --see-s9: 56px;
  --see-s10: 72px;
  --see-s11: 96px;

  /* Radii */
  --see-r-sm: 10px;
  --see-r: 16px;
  --see-r-lg: 22px;
  --see-r-xl: 28px;
  --see-r-pill: 999px;

  /* Elevation — low-contrast, large-radius; depth without murk */
  --see-e1: 0 2px 8px rgba(0, 0, 0, 0.18);
  --see-e2: 0 10px 30px rgba(0, 0, 0, 0.24);
  --see-e3: 0 22px 60px rgba(0, 0, 0, 0.34);

  /* Type scale */
  --see-font: "Tajawal", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --see-font-num: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --see-t-xs: 0.75rem;
  --see-t-sm: 0.85rem;
  --see-t-base: 0.95rem;
  --see-t-md: 1.05rem;
  --see-t-lg: 1.25rem;
  --see-t-xl: 1.6rem;
  --see-t-2xl: 2.1rem;
  --see-t-3xl: 2.8rem;
  --see-t-4xl: 3.6rem;

  /* Layout */
  --see-shell-max: 1320px;
  --see-shell-gutter: var(--see-s6);

  /* Motion — short, purposeful, never decorative */
  --see-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --see-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --see-dur-fast: 120ms;
  --see-dur: 200ms;
  --see-dur-slow: 320ms;
}

/* --------------------------------------------------------------------------
   2. Reset and page shell
   -------------------------------------------------------------------------- */

body.see-app {
  background: var(--see-bg);
  color: var(--see-text);
  font-family: var(--see-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * Themes wrap page content in a narrow container. The platform owns the full
 * viewport width, so constrained wrappers are neutralised while the shell
 * keeps its own intentional gutters.
 *
 * Block themes are the harder case: they constrain via layout classes and the
 * global content-size custom properties, which clamp *direct children* of the
 * content wrapper. Without the .is-layout-constrained rules below, the
 * dashboard showcase renders at the theme's ~600px reading measure instead of
 * the full container, which makes the product preview look small and detached.
 */
body.see-app .entry-content,
body.see-app .site-main,
body.see-app .content-area,
body.see-app .wp-block-post-content,
body.see-app .wp-site-blocks,
body.see-app main {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.see-app .is-layout-constrained > *,
body.see-app .is-layout-flow > *,
body.see-app .wp-block-group,
body.see-app .wp-block-group__inner-container {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Neutralise the theme's global measure for our subtree only. */
body.see-app .see-shell {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
}

/* No PREP4STEP screen may scroll the page sideways. */
body.see-app {
  overflow-x: hidden;
}

/*
 * Provisioned pages render their own headings. Block themes emit the page
 * title as a separate block ahead of the content, which showed a second
 * "اللوحة الذكية" above the platform header.
 */
body.see-app .entry-header,
body.see-app .page-title,
body.see-app .entry-title,
body.see-app .wp-block-post-title,
body.see-app header.wp-block-template-part {
  display: none !important;
}

.see-shell {
  background: var(--see-bg);
  color: var(--see-text);
  font-family: var(--see-font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.see-shell *,
.see-shell *::before,
.see-shell *::after {
  box-sizing: border-box;
}

.see-shell__main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--see-shell-max);
  margin-inline: auto;
  padding: var(--see-s8) var(--see-shell-gutter) var(--see-s11);
}

.see-shell__main--wide {
  max-width: none;
  padding-inline: 0;
}

.see-container {
  width: 100%;
  max-width: var(--see-shell-max);
  margin-inline: auto;
  padding-inline: var(--see-shell-gutter);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.see-shell h1,
.see-shell h2,
.see-shell h3,
.see-shell h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--see-text);
}

.see-shell p {
  margin: 0;
  line-height: 1.75;
  color: var(--see-text-soft);
}

.see-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--see-s2);
  font-size: var(--see-t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--see-gold);
}

.see-title-xl { font-size: clamp(2rem, 4.4vw, var(--see-t-4xl)); }
.see-title-lg { font-size: clamp(1.6rem, 3vw, var(--see-t-2xl)); }
.see-title-md { font-size: var(--see-t-xl); }
.see-title-sm { font-size: var(--see-t-lg); }

.see-lead {
  font-size: var(--see-t-md);
  color: var(--see-text-soft);
  max-width: 62ch;
}

.see-muted { color: var(--see-muted); }
.see-small { font-size: var(--see-t-sm); }

/* Latin content inside Arabic UI keeps its own direction and numerals. */
.see-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--see-font-num);
}

.see-num {
  font-family: var(--see-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.see-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--see-s4);
  margin-bottom: var(--see-s6);
}

.see-section-head p {
  margin-top: var(--see-s2);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.see-btn {
  --btn-bg: transparent;
  --btn-fg: var(--see-text);
  --btn-bd: var(--see-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--see-s2);
  min-height: 46px;
  padding: 0 var(--see-s6);
  border: 1px solid var(--btn-bd);
  border-radius: var(--see-r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--see-t-base);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--see-dur-fast) var(--see-ease),
              background-color var(--see-dur) var(--see-ease),
              border-color var(--see-dur) var(--see-ease),
              box-shadow var(--see-dur) var(--see-ease);
}

.see-btn:hover { transform: translateY(-1px); }
.see-btn:active { transform: translateY(0); }

.see-btn--gold {
  --btn-bg: linear-gradient(135deg, var(--see-gold-bright), var(--see-gold));
  --btn-fg: #1a1206;
  --btn-bd: transparent;
  box-shadow: 0 8px 24px rgba(216, 166, 58, 0.22);
}
.see-btn--gold:hover { box-shadow: 0 12px 32px rgba(216, 166, 58, 0.32); }

.see-btn--green {
  --btn-bg: var(--see-green);
  --btn-fg: #04180f;
  --btn-bd: transparent;
  box-shadow: 0 8px 24px rgba(18, 185, 106, 0.22);
}
.see-btn--green:hover { --btn-bg: var(--see-green-bright); }

.see-btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.04);
  --btn-fg: var(--see-text);
  --btn-bd: var(--see-line-strong);
}
.see-btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.09); }

.see-btn--quiet {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--see-muted);
}
.see-btn--quiet:hover { --btn-fg: var(--see-text); }

.see-btn--danger {
  --btn-bg: var(--see-danger-dim);
  --btn-fg: var(--see-danger);
  --btn-bd: rgba(255, 116, 125, 0.3);
}

.see-btn--sm { min-height: 38px; padding: 0 var(--see-s4); font-size: var(--see-t-sm); }
.see-btn--lg { min-height: 56px; padding: 0 var(--see-s8); font-size: var(--see-t-md); }
.see-btn--block { width: 100%; }

.see-btn[disabled],
.see-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.see-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--see-s3);
}

/* --------------------------------------------------------------------------
   5. Cards and surfaces
   -------------------------------------------------------------------------- */

.see-card {
  position: relative;
  background: linear-gradient(160deg, var(--see-surface), var(--see-surface-deep));
  border: 1px solid var(--see-line);
  border-radius: var(--see-r-lg);
  padding: var(--see-s6);
  box-shadow: var(--see-e1);
}

.see-card--flat { background: var(--see-surface); box-shadow: none; }
.see-card--raised { box-shadow: var(--see-e2); }
.see-card--pad-lg { padding: var(--see-s8); }
.see-card--pad-sm { padding: var(--see-s4); }

/* Interactive cards get affordance without becoming noisy. */
.see-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--see-dur) var(--see-ease),
              border-color var(--see-dur) var(--see-ease),
              box-shadow var(--see-dur) var(--see-ease);
}
.see-card--link:hover {
  transform: translateY(-3px);
  border-color: var(--see-line-gold);
  box-shadow: var(--see-e2);
}

/* Accent rail communicates category at a glance. */
.see-card--railed::before {
  content: "";
  position: absolute;
  inset-block: var(--see-s6);
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--see-r-pill);
  background: var(--rail, var(--see-green));
}

.see-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--see-s4);
  margin-bottom: var(--see-s4);
}

.see-card__title {
  font-size: var(--see-t-md);
  font-weight: 800;
}

.see-card__sub {
  margin-top: var(--see-s1);
  font-size: var(--see-t-sm);
  color: var(--see-muted);
}

.see-grid {
  display: grid;
  gap: var(--see-s5);
}
.see-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.see-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.see-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.see-divider {
  height: 1px;
  border: 0;
  margin: var(--see-s6) 0;
  background: var(--see-line);
}

/* --------------------------------------------------------------------------
   6. Badges, chips, pills
   -------------------------------------------------------------------------- */

.see-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--see-s2);
  padding: 5px var(--see-s3);
  border-radius: var(--see-r-pill);
  border: 1px solid var(--see-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--see-t-xs);
  font-weight: 700;
  color: var(--see-text-soft);
  white-space: nowrap;
}

.see-badge--green { background: var(--see-green-dim); border-color: var(--see-green-line); color: var(--see-green-bright); }
.see-badge--gold { background: var(--see-gold-dim); border-color: var(--see-gold-line); color: var(--see-gold-bright); }
.see-badge--danger { background: var(--see-danger-dim); border-color: rgba(255, 116, 125, 0.3); color: var(--see-danger); }
.see-badge--warn { background: var(--see-warn-dim); border-color: rgba(230, 185, 78, 0.3); color: var(--see-warn); }
.see-badge--info { background: var(--see-info-dim); border-color: rgba(110, 198, 192, 0.3); color: var(--see-info); }

.see-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.see-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--see-s2);
}

/* --------------------------------------------------------------------------
   7. Data display
   -------------------------------------------------------------------------- */

/* --- Progress ring -------------------------------------------------------- */

.see-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring-size, 132px);
  height: var(--ring-size, 132px);
  flex: none;
}

.see-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* RTL must not mirror the ring: progress always fills clockwise from top. */
.see-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: var(--ring-stroke, 9);
}

.see-ring__value {
  fill: none;
  stroke: var(--ring-color, var(--see-green));
  stroke-width: var(--ring-stroke, 9);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--see-dur-slow) var(--see-ease-out);
}

.see-ring__label {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.1;
}

.see-ring__num {
  font-family: var(--see-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--ring-num, 1.9rem);
  font-weight: 800;
  color: var(--see-text);
  direction: ltr;
}

.see-ring__unit {
  font-size: var(--see-t-xs);
  color: var(--see-muted);
  font-weight: 700;
}

.see-ring--sm { --ring-size: 84px; --ring-stroke: 7; --ring-num: 1.25rem; }
.see-ring--lg { --ring-size: 190px; --ring-stroke: 11; --ring-num: 3rem; }

/* --- Progress bar --------------------------------------------------------- */

.see-bar {
  height: 8px;
  border-radius: var(--see-r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.see-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--bar-color, var(--see-green));
  transition: width var(--see-dur-slow) var(--see-ease-out);
}

.see-bar--tall { height: 12px; }

.see-bar-row {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr auto;
  align-items: center;
  gap: var(--see-s3);
}

.see-bar-row__label { font-size: var(--see-t-sm); font-weight: 700; color: var(--see-text-soft); }
.see-bar-row__value { font-size: var(--see-t-sm); font-weight: 800; font-family: var(--see-font-num); direction: ltr; }

/* --- Stat tile ------------------------------------------------------------ */

.see-stat {
  display: flex;
  flex-direction: column;
  gap: var(--see-s2);
  padding: var(--see-s5);
  border-radius: var(--see-r);
  border: 1px solid var(--see-line);
  background: rgba(255, 255, 255, 0.025);
}

.see-stat__label {
  font-size: var(--see-t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--see-muted);
}

.see-stat__value {
  font-family: var(--see-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--see-t-2xl);
  font-weight: 800;
  line-height: 1;
  direction: ltr;
  color: var(--see-text);
}

.see-stat__foot { font-size: var(--see-t-xs); color: var(--see-muted-2); }

/* --- Trend indicator ------------------------------------------------------ */

.see-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--see-t-sm);
  font-weight: 800;
  font-family: var(--see-font-num);
  direction: ltr;
}

.see-trend--up { color: var(--see-green-bright); }
.see-trend--down { color: var(--see-danger); }
.see-trend--flat { color: var(--see-muted); }

.see-trend__icon { width: 14px; height: 14px; flex: none; }

/* --- Chart scaffolding ---------------------------------------------------- */

.see-chart {
  position: relative;
  width: 100%;
}

.see-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.see-chart__grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.see-chart__axis { fill: var(--see-muted-2); font-size: 11px; font-family: var(--see-font-num); }
.see-chart__line { fill: none; stroke: var(--see-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.see-chart__area { fill: url(#see-area-grad); }
.see-chart__dot { fill: var(--see-bg); stroke: var(--see-green); stroke-width: 2.5; }
.see-chart__dot--last { fill: var(--see-gold-bright); stroke: var(--see-gold-bright); }

/* Text alternative for any chart, always present for assistive tech. */
.see-chart__alt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   8. Header and navigation
   -------------------------------------------------------------------------- */

.see-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--see-s5);
  width: 100%;
  max-width: var(--see-shell-max);
  margin-inline: auto;
  padding: var(--see-s3) var(--see-shell-gutter);
  background: rgba(2, 22, 22, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--see-line);
  font-family: var(--see-font);
}

.see-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--see-text);
  direction: ltr;
  flex: none;
}

/*
 * PREP4STEP brand mark is a self-contained inline vector traced from the
 * approved logo artwork. No raster image, media-library URL, or external
 * asset is required, so it remains crisp on high-density desktop/mobile
 * displays and ships with the plugin itself.
 */
.see-header__mark {
  width: 46px;
  height: 54px;
  flex: none;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.24));
}
.see-header__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.see-header__mark path { stroke: none; }

.see-header__wordmark { display: block; line-height: 1; }
.see-header__wordmark strong {
  display: inline-block;
  direction: ltr;
  color: #fff7e7;
  font-family: var(--see-font-num);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.see-header__four {
  color: #f0c65e;
  text-shadow: 0 0 16px rgba(232, 183, 65, 0.14);
}

.see-header__nav {
  display: flex;
  align-items: center;
  gap: var(--see-s1);
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.see-header__nav::-webkit-scrollbar { display: none; }

.see-header__link {
  padding: var(--see-s2) var(--see-s4);
  border-radius: var(--see-r-pill);
  font-size: var(--see-t-sm);
  font-weight: 700;
  color: var(--see-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--see-dur) var(--see-ease), background-color var(--see-dur) var(--see-ease);
}
.see-header__link:hover { color: var(--see-text); background: rgba(255, 255, 255, 0.05); }
.see-header__link.is-active { color: var(--see-text); background: var(--see-green-dim); }

.see-header__auth { display: flex; gap: var(--see-s2); flex: none; }

.see-header__account { position: relative; flex: none; }

.see-header__account summary {
  display: flex;
  align-items: center;
  gap: var(--see-s2);
  padding: 5px var(--see-s3) 5px 5px;
  border: 1px solid var(--see-line);
  border-radius: var(--see-r-pill);
  cursor: pointer;
  list-style: none;
}
.see-header__account summary::-webkit-details-marker { display: none; }
.see-header__account summary:hover { border-color: var(--see-line-gold); }

.see-header__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--see-gold-bright), var(--see-gold));
  color: #1a1206;
  font-weight: 800;
  flex: none;
}

.see-header__account-copy { display: flex; flex-direction: column; line-height: 1.15; }
.see-header__account-copy small { font-size: 0.65rem; color: var(--see-muted-2); }
.see-header__account-copy span { font-size: var(--see-t-sm); font-weight: 700; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.see-header__chevron { width: 14px; height: 14px; color: var(--see-muted); transition: transform var(--see-dur) var(--see-ease); }
.see-header__account[open] .see-header__chevron { transform: rotate(180deg); }

.see-header__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--see-s2));
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: var(--see-s2);
  background: var(--see-surface-2);
  border: 1px solid var(--see-line-strong);
  border-radius: var(--see-r);
  box-shadow: var(--see-e3);
  z-index: 50;
}

.see-header__menu a {
  padding: var(--see-s3);
  border-radius: var(--see-r-sm);
  font-size: var(--see-t-sm);
  font-weight: 700;
  color: var(--see-text-soft);
  text-decoration: none;
}
.see-header__menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--see-text); }
.see-header__menu a.is-active { color: var(--see-green-bright); }
.see-header__menu hr { height: 1px; border: 0; margin: var(--see-s2) 0; background: var(--see-line); }
.see-header__logout { color: var(--see-danger) !important; }

/* The account menu is a details element; only the desktop nav collapses. */
@media (max-width: 900px) {
  .see-header__nav { display: none; }
  .see-header__mark { width: 40px; height: 47px; }
  .see-header__wordmark strong { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   9. States
   -------------------------------------------------------------------------- */

.see-empty {
  display: grid;
  justify-items: center;
  gap: var(--see-s3);
  padding: var(--see-s9) var(--see-s6);
  text-align: center;
  border: 1px dashed var(--see-line-strong);
  border-radius: var(--see-r-lg);
  background: rgba(255, 255, 255, 0.015);
}

.see-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--see-green-dim);
  color: var(--see-green-bright);
}
.see-empty__icon svg { width: 26px; height: 26px; }

.see-empty__title { font-size: var(--see-t-md); font-weight: 800; }
.see-empty__copy { max-width: 48ch; color: var(--see-muted); font-size: var(--see-t-sm); }

.see-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--see-s3);
  padding: var(--see-s4);
  border-radius: var(--see-r);
  border: 1px solid var(--see-line);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--see-t-sm);
  color: var(--see-text-soft);
}
.see-alert__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.see-alert--success { background: var(--see-green-dim); border-color: var(--see-green-line); color: var(--see-green-bright); }
.see-alert--danger { background: var(--see-danger-dim); border-color: rgba(255, 116, 125, 0.3); color: var(--see-danger); }
.see-alert--warn { background: var(--see-warn-dim); border-color: rgba(230, 185, 78, 0.3); color: var(--see-warn); }
.see-alert--info { background: var(--see-info-dim); border-color: rgba(110, 198, 192, 0.3); color: var(--see-info); }

/* Skeleton loading — communicates shape, never spins pointlessly. */
.see-skeleton {
  border-radius: var(--see-r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: see-shimmer 1.4s ease infinite;
}
@keyframes see-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.see-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--see-s4);
  max-width: 560px;
  margin: var(--see-s10) auto;
  padding: var(--see-s9) var(--see-s7);
  text-align: center;
  border: 1px solid var(--see-line);
  border-radius: var(--see-r-xl);
  background: linear-gradient(160deg, var(--see-surface), var(--see-surface-deep));
  box-shadow: var(--see-e2);
}
.see-gate__eyebrow { font-size: var(--see-t-xs); font-weight: 800; letter-spacing: 0.18em; color: var(--see-gold); }
.see-gate__title { font-size: var(--see-t-xl); }
.see-gate__copy { color: var(--see-muted); }
.see-gate__actions { display: flex; flex-wrap: wrap; gap: var(--see-s3); justify-content: center; margin-top: var(--see-s2); }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.see-field { display: flex; flex-direction: column; gap: var(--see-s2); }

.see-label { font-size: var(--see-t-sm); font-weight: 700; color: var(--see-text-soft); }

.see-input,
.see-select {
  min-height: 46px;
  padding: 0 var(--see-s4);
  border: 1px solid var(--see-line-strong);
  border-radius: var(--see-r-sm);
  background: rgba(0, 0, 0, 0.28);
  color: var(--see-text);
  font-family: inherit;
  font-size: var(--see-t-base);
}
.see-input:focus,
.see-select:focus { border-color: var(--see-green); outline: none; }

.see-hint { font-size: var(--see-t-xs); color: var(--see-muted-2); }
.see-error { font-size: var(--see-t-xs); color: var(--see-danger); font-weight: 700; }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.see-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.see-stack { display: flex; flex-direction: column; }
.see-stack--2 { gap: var(--see-s2); }
.see-stack--3 { gap: var(--see-s3); }
.see-stack--4 { gap: var(--see-s4); }
.see-stack--6 { gap: var(--see-s6); }
.see-stack--8 { gap: var(--see-s8); }

.see-row { display: flex; align-items: center; gap: var(--see-s3); }
.see-row--between { justify-content: space-between; }
.see-row--wrap { flex-wrap: wrap; }

.see-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   12. Motion, focus, print, responsive
   -------------------------------------------------------------------------- */

/* One visible, high-contrast focus treatment for the whole platform. */
.see-shell :focus-visible,
body.see-app :focus-visible {
  outline: 2px solid var(--see-gold-bright);
  outline-offset: 2px;
  border-radius: var(--see-r-sm);
}

/* Never remove focus for keyboard users; only suppress the mouse-click ring. */
.see-shell :focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .see-shell *,
  body.see-app * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .see-btn:hover,
  .see-card--link:hover { transform: none; }
}

@media (max-width: 1080px) {
  .see-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .see-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .see-app,
  .see-shell { --see-shell-gutter: var(--see-s4); }

  .see-shell__main { padding-block: var(--see-s6) var(--see-s9); }

  .see-grid--2,
  .see-grid--3,
  .see-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .see-card { padding: var(--see-s5); border-radius: var(--see-r); }
  .see-card--pad-lg { padding: var(--see-s6); }

  /* Touch targets stay at or above the 44px minimum on small screens. */
  .see-btn { min-height: 48px; }
  .see-btn--sm { min-height: 44px; }

  /*
   * Grid and flex children default to min-width:auto, so an item with a long
   * unbreakable run or a generous max-width can grow past its container and
   * push the layout sideways. Opting them back to 0 keeps every card's
   * contents inside the card.
   */
  .see-shell .see-grid > *,
  .see-gate > *,
  .see-final__card > *,
  .see-stack > * {
    min-width: 0;
    max-width: 100%;
  }

  .see-header { padding-block: var(--see-s2); gap: var(--see-s3); }
  .see-header__account-copy { display: none; }
  .see-bar-row { grid-template-columns: 1fr auto; }
  .see-bar-row .see-bar { grid-column: 1 / -1; order: 3; }
}

@media print {
  .see-header,
  .see-btn { display: none !important; }
  .see-shell { background: #fff; color: #000; }
}

/* ==========================================================================
   4.4.23 — the unified PREP4STEP header

   The platform used to carry two navigations: this header, plus a second tab
   strip inside the dashboard. There is now one. These rules give that single
   header the weight it needs to carry the whole platform: a balanced three
   part composition (brand · navigation rail · account), a navigation rail
   that reads as one object, and an active state that is unmistakable.

   Colours, radii and type all come from the existing design tokens, so this
   is the same brand, more carefully arranged.
   ========================================================================== */

.see-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--see-s5);
  padding-block: calc(var(--see-s3) + 2px);
  background:
    linear-gradient(180deg, rgba(6, 40, 37, .92), rgba(2, 22, 22, .88));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      rgba(216, 166, 58, 0) 0%,
      rgba(216, 166, 58, .34) 22%,
      rgba(216, 166, 58, .5) 50%,
      rgba(216, 166, 58, .34) 78%,
      rgba(216, 166, 58, 0) 100%) 1;
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .9);
}

/* --- brand ------------------------------------------------------------- */

.see-header__brand {
  border-radius: var(--see-r-pill);
  padding-inline: 2px;
  transition: opacity var(--see-dur) var(--see-ease);
}

.see-header__brand:hover { opacity: .88; }

.see-header__brand:focus-visible {
  outline: 2px solid var(--see-gold);
  outline-offset: 4px;
}

/* --- the navigation rail ----------------------------------------------- */

.see-header__nav {
  justify-self: center;
  margin-inline-start: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--see-r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 1px 0 rgba(0, 0, 0, .28);
  max-width: 100%;
}

.see-header__link {
  position: relative;
  padding: 9px var(--see-s4);
  letter-spacing: -0.01em;
  transition:
    color var(--see-dur) var(--see-ease),
    background-color var(--see-dur) var(--see-ease),
    box-shadow var(--see-dur) var(--see-ease);
}

.see-header__link:hover {
  color: var(--see-text);
  background: rgba(255, 255, 255, .07);
}

.see-header__link:focus-visible {
  outline: 2px solid var(--see-gold);
  outline-offset: 2px;
}

/* The current area: an emerald pill with a gold hairline and a quiet glow,
   plus a small gold marker so the state does not rely on colour alone. */
.see-header__link.is-active {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(27, 209, 124, .26), rgba(18, 185, 106, .16));
  box-shadow:
    inset 0 0 0 1px var(--see-gold-line),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 6px 18px -8px rgba(27, 209, 124, .5);
}

.see-header__link.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 34%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      rgba(240, 198, 94, 0), var(--see-gold-bright), rgba(240, 198, 94, 0));
}

/* --- account control, cut from the same material ----------------------- */

.see-header__account summary {
  border-radius: var(--see-r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition:
    border-color var(--see-dur) var(--see-ease),
    background-color var(--see-dur) var(--see-ease);
}

.see-header__account summary:hover {
  border-color: var(--see-line-gold);
  background: rgba(255, 255, 255, .07);
}

.see-header__account summary:focus-visible {
  outline: 2px solid var(--see-gold);
  outline-offset: 2px;
}

.see-header__avatar {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 4px 10px -4px rgba(0, 0, 0, .6);
}

.see-header__menu-link.is-active {
  color: var(--see-text);
  background: var(--see-green-dim);
  box-shadow: inset 0 0 0 1px var(--see-gold-line);
}

/* One active state everywhere. The contact screen used to tint its own
   current link gold; the unified header keeps a single treatment on every
   page so the navigation never looks like two different components. */
body .see-header .see-header__nav .see-header__link.is-active {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(27, 209, 124, .26), rgba(18, 185, 106, .16));
}

/* --- the dashboard's old second nav is gone ---------------------------- */

.see-dash__tabs { display: none !important; }

/* --- compact screens ---------------------------------------------------
   The rail is no longer hidden below 900px. It moves to a full-width row of
   its own under the brand, still scrollable, so every destination stays one
   tap away instead of being buried in the account menu.
   -------------------------------------------------------------------- */

@media (max-width: 900px) {
  .see-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: 10px;
  }

  .see-header__nav {
    display: flex;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-start;
    order: 3;
    /* fade the rail's edges so a scrolled list reads as continuing */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .see-header__link { padding-inline: var(--see-s3); }
}

@media (max-width: 520px) {
  .see-header { column-gap: var(--see-s3); }
  .see-header__link { font-size: 0.82rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .see-header__brand,
  .see-header__link,
  .see-header__account summary { transition: none; }
}


/* ==========================================================================
   No underlines
   --------------------------------------------------------------------------
   Underlined text reads as unstyled prose next to the platform's pills, cards
   and buttons, and the active WordPress theme underlines every link by
   default - which is why the navigation arrived underlined even though each
   component already set `text-decoration: none`. A link here is marked by
   colour, weight and its surface instead, so the decoration is switched off
   once, for everything the plugin renders.

   Reach: `body.see-app` is added to every platform page - dashboard, skills,
   practice, contact, account, sign-in and every mapped exam - and the two
   container selectors cover the shell and header wherever they are printed on
   their own. Nothing outside the plugin is touched.

   `!important` is the point of the rule: without it the theme's own link
   styling wins on specificity and the underline comes back. It is applied to
   every element rather than to `a` alone so a theme cannot underline a heading
   or a summary either. No line-through or overline exists anywhere in the
   plugin, so nothing meaningful is lost - and no exam question in the bank
   relies on underlined text.
   ========================================================================== */

body.see-app,
body.see-app *,
body.see-app *::before,
body.see-app *::after,
.see-shell,
.see-shell *,
.see-shell *::before,
.see-shell *::after,
.see-header,
.see-header *,
.see-header *::before,
.see-header *::after {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
}

/* Unified PREP4STEP header: shared by the homepage and student screens. */
.see-header.see-header--unified {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:20px; width:100%; max-width:none; min-height:84px;
  margin:0; padding:14px max(24px,calc((100% - 1440px)/2));
  position:sticky; top:0; z-index:100; box-sizing:border-box;
  background:#061d1b; border:0; border-bottom:1px solid rgba(219,183,95,.18);
  border-image:none; box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-family:var(--see-font); line-height:1.5;
}
body.admin-bar .see-header.see-header--unified { top:32px; }
.see-header--unified .see-header__brand { display:flex; padding:0; border-radius:4px; width:186px; flex:none; }
.see-header--unified .see-header__logo { display:block; width:100%; height:auto; max-height:62px; object-fit:contain; border:0; border-radius:0; box-shadow:none; margin:0; }
.see-header--unified .see-header__nav { display:flex; align-items:center; justify-content:center; justify-self:stretch; gap:3px; padding:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; max-width:none; mask-image:none; -webkit-mask-image:none; }
.see-header--unified .see-header__link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 12px; margin:0; border-radius:8px; font-size:14px; font-weight:700; line-height:1.5; white-space:nowrap; color:#c2d0cb; box-shadow:none; letter-spacing:0; }
.see-header--unified .see-header__link:hover { color:#fff; background:rgba(255,255,255,.05); }
body .see-header--unified .see-header__nav .see-header__link.is-active { color:#efd28b; background:rgba(222,184,98,.09); box-shadow:none; }
.see-header--unified .see-header__link.is-active::after { display:none; }
.see-header--unified .see-header__auth { align-items:center; gap:10px; justify-self:end; }
.see-header--unified .see-header__auth .see-btn { min-height:44px; padding:10px 15px; border-radius:8px; font-size:13px; white-space:nowrap; box-shadow:none; }
.see-header--unified .see-header__account { justify-self:end; }
.see-header--unified .see-header__account summary { min-height:46px; padding:7px 12px; border-radius:10px; background:rgba(255,255,255,.03); box-shadow:none; border:1px solid rgba(255,255,255,.12); }
.see-header--unified .see-header__account-copy small { display:none; }
.see-header--unified .see-header__account-copy span { max-width:12ch; font-size:13px; }
.see-header--unified .see-header__avatar { width:30px; height:30px; font-size:13px; box-shadow:none; }
.see-header--unified .see-header__menu { z-index:102; border-radius:12px; }
.see-header--unified .see-header__mobile { display:none; position:static; margin:0; }
.see-header--unified .see-header__mobile summary { list-style:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; color:#e7eee9; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:transparent; cursor:pointer; }
.see-header--unified .see-header__mobile summary::-webkit-details-marker { display:none; }
.see-header--unified .see-header__mobile[open] summary { color:#efd28b; border-color:#9b834e; }
.see-header--unified .see-header__mobile-panel { position:absolute; top:calc(100% + 8px); inset-inline:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:calc(100dvh - 150px); overflow:auto; padding:14px; background:#092521; border:1px solid rgba(219,183,95,.24); border-radius:14px; box-shadow:0 20px 44px rgba(0,0,0,.32); }
.see-header--unified .see-header__mobile-panel a { display:flex; align-items:center; padding:13px 14px; border-radius:8px; color:#d9e4df; font-size:14px; font-weight:700; min-height:46px; }
.see-header--unified .see-header__mobile-panel a:hover { background:rgba(255,255,255,.05); }
.see-header--unified .see-header__mobile-panel a.is-active { background:rgba(222,184,98,.12); color:#efd28b; }
.see-header--unified .see-header__mobile-login { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.1); margin-top:6px; }
/* 4.12.0: a signed-in student without full access sees «احصل على الوصول الكامل» beside the account menu. */
.see-header--unified .see-header__member { display:flex; align-items:center; gap:10px; justify-self:end; flex:none; }
.see-header--unified .see-header__member .see-header__cta { min-height:44px; padding:10px 15px; border-radius:8px; font-size:13px; white-space:nowrap; box-shadow:none; }
.see-header--unified .see-header__mobile-panel a.see-header__mobile-cta { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.1); margin-top:6px; color:#efd28b; }
.see-header--unified a:focus-visible,.see-header--unified summary:focus-visible { outline:2px solid #efd28b; outline-offset:3px; }
@media (max-width:767px) {
 .see-header.see-header--unified { grid-template-columns:minmax(0,1fr) auto auto; gap:18px; padding-inline:24px; min-height:88px; }
 .see-header--unified .see-header__nav { display:none; }
 .see-header--unified .see-header__mobile { display:block; }
 .see-header--unified .see-header__brand { width:174px; }
}
@media (max-width:782px) { body.admin-bar .see-header.see-header--unified { top:46px; } }
@media (max-width:600px) {
 .see-header.see-header--unified { min-height:76px; padding:12px 16px; gap:10px; }
 body.admin-bar .see-header.see-header--unified { position:relative; top:0; }
 .see-header--unified .see-header__brand { width:150px; }
 .see-header--unified .see-header__auth { display:none; }
 .see-header--unified .see-header__member .see-header__cta { display:none; }
 .see-header--unified .see-header__mobile { grid-column:3; }
 .see-header--unified .see-header__account-copy,.see-header--unified .see-header__chevron { display:none; }
 .see-header--unified .see-header__account summary { padding:6px; min-height:44px; }
}
@media print { .see-header.see-header--unified { display:none; } }

/* One crisp logo lockup, with no tagline, on every branded surface. */
.see-brand { display:inline-flex; align-items:baseline; gap:1.5px; direction:ltr; white-space:nowrap; color:#f4f3e8; font-family:Arial,Helvetica,sans-serif; font-size:28px; font-weight:800; line-height:1; }
.see-brand__mark { display:block; width:.472em; height:.73em; flex:none; }
.see-brand__mark svg { display:block; width:100%; height:100%; }
.see-brand__wordmark { display:block; line-height:1; }
.see-brand__wordmark strong { display:block; margin:0; padding:0; font-family:Arial,Helvetica,sans-serif; font-size:inherit; font-weight:800; letter-spacing:.4px; line-height:1; color:#f4f3e8; }
.see-brand__four { color:#e7ba4d; }
.see-header--unified .see-header__brand { width:186px; height:46px; }
.site-footer__brand .see-brand { transform:none; }
.site-footer__brand { width:auto; }
@media (min-width:768px) and (max-width:1179px) {
 .see-header.see-header--unified { grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; padding:12px 24px 8px; }
 .see-header--unified .see-header__brand { grid-column:1; grid-row:1; }
 .see-header--unified .see-header__account,.see-header--unified .see-header__auth,.see-header--unified .see-header__member { grid-column:2; grid-row:1; }
 .see-header--unified .see-header__nav { display:flex; grid-column:1 / -1; grid-row:2; order:3; width:100%; justify-content:center; border-top:1px solid rgba(255,255,255,.07); padding-top:6px; }
 .see-header--unified .see-header__link { padding:9px 14px; font-size:14px; }
 .see-header--unified .see-header__mobile { display:none; }
}
@media (max-width:767px) {
 .see-header--unified .see-header__mobile-panel { max-width:420px; inset-inline-start:auto; inset-inline-end:16px; width:calc(100% - 32px); box-sizing:border-box; }
 .see-header--unified .see-header__brand { width:174px; }
}
@media (max-width:600px) {
 .see-header--unified .see-header__brand { width:150px; height:40px; }
 .see-header--unified .see-brand { gap:1.5px; font-size:23px; }
 .see-header--unified .see-brand__mark { width:.472em; height:.73em; }
 .see-header--unified .see-brand__wordmark strong { font-size:inherit; letter-spacing:.2px; }
}