/* RH-WEB-DESIGN-02 — DESIGN team shared theme additions.
   Load AFTER the page's own stylesheet (student.css / pilot_auth.css /
   pilot_portal.css / pilot_guest.css / future team CSS). Additive only:
   does not redefine --bg,--sf,--tx,--mu,--ac,--on,--acb,--ok,--okb,--er,
   --erb,--wn,--wnb,--bd. Existing page palettes and layout remain owned
   by each consumer. The licensed, unmodified local font is shared here. */

@font-face{
  font-family:Rahyar;
  src:url("phase2_fonts/DejaVuSans.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Match the actual component roots; never change their display/layout. */
.rh-dashboard,.rh-activity,#pilot,#portal,#pg-app,.rh-report-sample{
  font-family:Rahyar,Tahoma,Arial,sans-serif;
}

:root{
  --rh-accent-teal:#09685c;
  --rh-accent-teal-b:#dcf3ef;
  --rh-accent-teal-on:#ffffff;
  --rh-space-1:4px;--rh-space-2:8px;--rh-space-3:12px;--rh-space-4:16px;--rh-space-5:24px;--rh-space-6:32px;
  --rh-radius-card:16px;
  --rh-radius-control:12px;
  --rh-control-min:48px;
  --rh-nav-height:64px;
  --rh-content-max:1200px;
  --rh-reading-max:720px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --rh-accent-teal:#55d6c3;
    --rh-accent-teal-b:#113531;
    --rh-accent-teal-on:#07201c;
  }
}
:root[data-theme="dark"]{
  --rh-accent-teal:#55d6c3;
  --rh-accent-teal-b:#113531;
  --rh-accent-teal-on:#07201c;
}

/* ---------- icons (sprite: /student-assets/phase2_icons.svg) ---------- */
.rh-icon{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.rh-icon--sm{width:18px;height:18px}
.rh-icon--lg{width:32px;height:32px}

/* ---------- cards ---------- */
.rh-card{
  background:var(--sf);
  border:1px solid var(--bd);
  border-radius:var(--rh-radius-card);
  padding:var(--rh-space-4);
  margin:var(--rh-space-3) 0;
  display:flex;flex-direction:column;gap:var(--rh-space-2);
  min-width:0;
}
.rh-card__eyebrow{font-size:13px;font-weight:700;color:var(--ac);margin:0}
.rh-card__title{font-size:17px;font-weight:700;margin:0}
.rh-card__body{color:var(--mu);font-size:14px;margin:0}
.rh-card__actions{display:flex;flex-direction:column;gap:var(--rh-space-2);margin-top:var(--rh-space-2)}

/* activity card: one clear emphasised row, used for tonight's mission / an exam */
.rh-card--activity{
  border-inline-start:4px solid var(--ac);
  padding-inline-start:calc(var(--rh-space-4) - 3px);
}
/* stat card: compact, numeric, centred — for points/progress summaries */
.rh-card--stat{
  text-align:center;
  align-items:center;
}
.rh-card--stat .rh-card__value{font-size:28px;font-weight:800;margin:0;line-height:1.2}
/* intro card: calmer, tinted background — for "about this section" framing */
.rh-card--intro{
  background:var(--acb);
  border-color:transparent;
}

/* ---------- buttons: one primary action per card, secondary links are quiet ---------- */
.rh-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--rh-space-2);
  width:100%;min-height:var(--rh-control-min);
  padding:8px var(--rh-space-4);
  border-radius:var(--rh-radius-control);
  border:1px solid var(--ac);
  background:var(--ac);color:var(--on);
  font:inherit;font-weight:700;
  cursor:pointer;text-align:center;text-decoration:none;
}
.rh-button:disabled,.rh-button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.rh-button--secondary{
  background:transparent;color:var(--ac);
  border-color:var(--bd);font-weight:600;
}
.rh-button--quiet{
  width:auto;min-height:44px;padding:0 var(--rh-space-2);
  background:none;border:0;color:var(--ac);font-weight:400;
  text-decoration:underline;
}
.rh-button--pending{position:relative;color:transparent !important}
.rh-button--pending::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  color:var(--on);
  animation:rh-spin .8s linear infinite;
}
@media(prefers-reduced-motion:reduce){.rh-button--pending::after{animation:none}}
@keyframes rh-spin{to{transform:rotate(360deg)}}

/* ---------- status / badges ---------- */
.rh-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:99px;font-size:13px;font-weight:700;
  background:var(--wnb);color:var(--wn);
}
.rh-status--ok{background:var(--okb);color:var(--ok)}
.rh-status--accent{background:var(--acb);color:var(--ac)}
.rh-status--teal{background:var(--rh-accent-teal-b);color:var(--rh-accent-teal)}
.rh-status--error{background:var(--erb);color:var(--er)}
/* never rely on colour alone: warning/error status always carries an icon or text label */
.rh-status .rh-icon{width:16px;height:16px}

/* ---------- empty / error states (not colour-only; icon + heading + text) ---------- */
.rh-empty,.rh-error{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--rh-space-2);
  padding:var(--rh-space-5) var(--rh-space-4);
  border-radius:var(--rh-radius-card);
  background:var(--sf);border:1px dashed var(--bd);
  color:var(--mu);
}
.rh-error{border-style:solid;border-color:var(--erb);background:var(--erb);color:var(--er)}
.rh-empty .rh-icon,.rh-error .rh-icon{width:32px;height:32px}
.rh-empty__title,.rh-error__title{font-weight:700;color:var(--tx);margin:0}
.rh-error .rh-error__title{color:var(--er)}

/* ---------- loading skeleton (no real animation required; reduced-motion safe) ---------- */
.rh-skeleton{
  height:64px;border-radius:var(--rh-radius-control);
  background:linear-gradient(90deg,var(--bd) 25%,var(--sf) 37%,var(--bd) 63%);
  background-size:400% 100%;
  margin:var(--rh-space-3) 0;
  animation:rh-skeleton-wave 1.6s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .rh-skeleton{animation:none;background:var(--bd);opacity:.6}
}
@keyframes rh-skeleton-wave{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- focus & touch target baseline (reinforces existing :focus-visible rule) ---------- */
.rh-button,.rh-card__actions a,.rh-card__actions button{min-height:var(--rh-control-min)}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

/* ---------- layout helpers shared by DESIGN-aware pages ---------- */
.rh-content{max-width:var(--rh-content-max);margin:0 auto}
.rh-reading{max-width:var(--rh-reading-max);margin:0 auto}

/* Dashboard owns its .rh-grid and navigation layout. Do not turn the
   .rh-dashboard body into a grid: header/main would become grid cells. */

/* Teal on component roots follows their local success palette. A root-level
   value cannot override a custom property declared by a consumer itself. */
.rh-dashboard,.rh-activity,#pg-app{
  --rh-accent-teal:var(--ok);
  --rh-accent-teal-b:var(--okb);
}

/* Namespace-specific palette rules above have higher specificity than generic
   helpers. These modifiers intentionally follow the local consumer tokens. */
.rh-dashboard .rh-status--teal,.rh-activity .rh-status--teal{
  color:var(--rh-accent-teal);background:var(--rh-accent-teal-b);
}
.rh-dashboard .rh-status--ok{color:var(--ok);background:var(--okb)}
.rh-dashboard .rh-status--error{color:var(--er);background:var(--erb)}

/* Pending pseudo-elements and disabled controls must win against consumer
   component rules too. Preserve the spinner shape while stopping all motion. */
@media(prefers-reduced-motion:reduce){
  .rh-dashboard .rh-button--pending::after,
  .rh-activity .rh-button--pending::after{animation:none}
}

/* bidi: Latin numbers/ids/timestamps inside Persian copy */
.rh-ltr{direction:ltr;unicode-bidi:isolate;text-align:left}

/* Standalone ACTIVITY root: fill the viewport without a global body reset.
   Its own flex/main/nav rules keep ownership of the internal layout. */
body:has(> .rh-activity){margin:0}
.rh-activity{min-height:100vh;min-height:100dvh}

/* DASHBOARD uses p.rh-empty for ordinary metadata as well as empty copy.
   A shared illustrated empty-state box must not frame every metadata line. */
.rh-dashboard p.rh-empty{
  display:block;text-align:inherit;align-items:normal;
  background:transparent;border:0;border-radius:0;
}

/* Manager integration: five destinations also remain visible on account pages. */
#portal>nav a{display:flex;flex-direction:column;align-items:center;gap:4px}
#pilot:has(+.rh-account-nav){padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.rh-account-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;gap:4px;padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:var(--sf);border-top:1px solid var(--bd);z-index:10;font-family:Rahyar,Tahoma,sans-serif}
.rh-account-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:52px;min-height:48px;color:var(--mu);font-size:12px;text-decoration:none}
.rh-account-nav [aria-current]{color:var(--ac);background:var(--acb);border-radius:12px}