@import url('passport.css?v=2');

/* ============================================================
   XƯỞNG NGÔN NGỮ — editorial desk, worksheets and review marks
   The inherited selectors preserve application wiring; everything visible
   is restyled away from the previous travel metaphor.
   ============================================================ */

:root {
  --workshop-charcoal:#202524;
  --workshop-dark:#171b1a;
  --workshop-paper:#f1eee5;
  --workshop-paper-2:#e4dfd2;
  --workshop-ink:#243a35;
  --workshop-orange:#d45b35;
  --workshop-mustard:#d5ae52;
  --workshop-green:#4b735e;
  --passport-navy:var(--workshop-charcoal);
  --passport-deep:var(--workshop-dark);
  --passport-cream:var(--workshop-paper);
  --passport-cream-2:var(--workshop-paper-2);
  --passport-red:var(--workshop-orange);
  --passport-gold:var(--workshop-mustard);
  --passport-ink:var(--workshop-ink);
  --passport-green:var(--workshop-green);
}

body {
  background-color:var(--workshop-dark) !important;
  background-image:
    linear-gradient(rgba(213,174,82,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(213,174,82,.022) 1px,transparent 1px) !important;
  background-size:24px 24px !important;
}
.sidebar { background:#141817 !important; }
.sidebar-logo-icon { border-radius:3px !important; transform:rotate(-3deg); box-shadow:3px 3px 0 rgba(213,174,82,.16) !important; }
.sidebar-logo-name { font-family:'Be Vietnam Pro',sans-serif !important; font-weight:800 !important; }

.passport-dashboard { background:var(--workshop-charcoal); }
.passport-hero { grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr); }
.passport-hero::before {
  width:540px; height:540px; right:-130px; top:-230px; border-radius:0;
  border:0; box-shadow:none;
  background:repeating-linear-gradient(-45deg,transparent 0 30px,rgba(213,174,82,.035) 30px 31px);
  transform:rotate(8deg);
}
.passport-hero::after { content:'VOCABHUB  /  WORKING DRAFT  /  2026'; }
.passport-hero h1 { max-width:720px; }
.passport-hero h1 em { color:var(--workshop-mustard); text-decoration:underline; text-decoration-thickness:5px; text-underline-offset:8px; }
.passport-kicker { color:var(--workshop-mustard); }
.passport-kicker i { background:var(--workshop-mustard); }
.passport-cta { background:var(--workshop-orange); border-color:#ec7953; box-shadow:7px 7px 0 #101312; }

/* Worksheet stack */
.passport-book { aspect-ratio:.79; transform:rotate(1.3deg); filter:drop-shadow(18px 24px 24px rgba(0,0,0,.42)); }
.passport-book::before {
  inset:18px -16px -16px 15px; border-radius:2px; background:var(--workshop-paper-2);
  transform:rotate(2deg); box-shadow:0 0 0 1px rgba(36,58,53,.18);
}
.passport-book-spine {
  z-index:4; left:50%; top:-16px; bottom:auto; width:116px; height:36px; transform:translateX(-50%);
  border:1px solid #94917f; border-radius:7px 7px 3px 3px; background:#b7b3a5;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08),0 4px 7px rgba(0,0,0,.22);
}
.passport-book-spine::before { content:''; position:absolute; left:26px; right:26px; top:8px; height:7px; border-radius:5px; background:#74756d; }
.passport-book-page {
  padding:45px 38px 34px; border:0; border-radius:2px; color:var(--workshop-ink); background:
    linear-gradient(90deg,transparent 0 49px,rgba(212,91,53,.2) 49px 50px,transparent 50px),
    repeating-linear-gradient(0deg,var(--workshop-paper) 0 31px,rgba(36,58,53,.1) 31px 32px);
  box-shadow:0 0 0 1px rgba(36,58,53,.25),inset 0 0 55px rgba(91,72,34,.04);
}
.passport-book-page::before { inset:19px; border:1px dashed rgba(36,58,53,.23); border-radius:0; }
.passport-book-page::after { content:'Aa'; right:20px; bottom:25px; color:rgba(36,58,53,.045); font:800 190px 'Be Vietnam Pro'; }
.passport-book-heading { color:var(--workshop-ink); border-bottom:2px solid var(--workshop-ink); padding-bottom:10px; }
.passport-emblem {
  width:142px; height:94px; margin:60px auto 38px; border:0; border-radius:0; color:var(--workshop-orange);
  box-shadow:none; transform:rotate(-2deg);
}
.passport-emblem::before { content:''; position:absolute; inset:0; border:3px solid currentColor; box-shadow:inset 0 0 0 5px var(--workshop-paper),inset 0 0 0 7px currentColor; }
.passport-emblem span { font:800 52px 'Be Vietnam Pro'; }
.passport-emblem i { width:170px; background:rgba(212,91,53,.25); }
.passport-identity { color:var(--workshop-ink); }
.passport-identity span,.passport-identity small { color:rgba(36,58,53,.65); }
.passport-identity strong { color:var(--workshop-ink); font-size:2rem; }
.passport-live-stamp {
  right:28px; bottom:70px; width:150px; height:75px; border:4px double var(--workshop-orange); border-radius:2px;
  color:var(--workshop-orange); transform:rotate(-7deg); background:rgba(241,238,229,.65);
}
.passport-live-stamp::before { top:23px; }.passport-live-stamp::after { bottom:21px; }
.passport-mrz { left:38px; right:38px; bottom:26px; color:rgba(36,58,53,.55); white-space:normal; }

/* Work queue instead of a departure board */
.passport-departures { background:#151918; }
.departure-legend { color:rgba(241,238,229,.55); }
.departure-board { border:0; border-radius:2px; background:transparent; box-shadow:none; }
.departure-board-head,.departure-row { grid-template-columns:105px minmax(260px,1fr) 115px 155px; }
.departure-board-head { color:rgba(36,58,53,.62); background:var(--workshop-paper-2); border:1px solid rgba(36,58,53,.22); }
.departure-row {
  min-height:82px; margin-top:6px; border:1px solid rgba(213,174,82,.17); border-left:5px solid var(--workshop-mustard);
  border-radius:2px; color:var(--workshop-paper); background:#222827;
}
.departure-row:hover { background:#2a312f; border-left-color:var(--workshop-orange); }
.departure-row > span:first-child { color:var(--workshop-mustard); }
.departure-row > span:last-child { color:var(--workshop-mustard); border-radius:2px; }
.departure-row.departure-arriving { animation:work-item-in .42s ease var(--departure-delay,0ms) both; transform-origin:center; }
@keyframes work-item-in { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:translateX(0)} }

.passport-vitals { background:var(--workshop-paper); }
.passport-journey { background:var(--workshop-charcoal); }
.passport-gates { gap:9px; }
.passport-gate {
  min-height:230px; border-radius:2px; background:#252c2a; border-color:rgba(213,174,82,.19);
  border-top:4px solid rgba(213,174,82,.4);
}
.passport-gate::after { font-family:'Be Vietnam Pro'; }
.passport-gate.done { background:#203328; border-color:rgba(75,115,94,.75); }
.passport-gate.current { border-color:var(--workshop-mustard); background:#2d2d25; }
.passport-gate-stamp { width:68px; height:30px; border:2px solid currentColor; border-radius:2px; transform:rotate(-5deg); }
.passport-gate.current .passport-gate-stamp { color:var(--workshop-orange); }

.passport-utilities { background:#151918; }
.passport-paper-panel { border-radius:2px; background:var(--workshop-paper); }
.passport-paper-panel::before { border-style:dashed; }
.passport-tool-grid button { border-radius:2px; }
.passport-calendar-panel { border-radius:2px; background:#222827; }

/* Rectangular editorial approval mark */
.passport-stamp-overlay > div {
  width:min(340px,80vw); aspect-ratio:2.05; border:8px double var(--workshop-orange); border-radius:2px;
  color:var(--workshop-orange); background:rgba(241,238,229,.96); transform:scale(1.7) rotate(-10deg);
}
.passport-stamp-overlay.stamping > div { animation:workshop-approval 1.25s cubic-bezier(.2,.85,.24,1.15) both; }
@keyframes workshop-approval { 0%{transform:scale(1.7) rotate(-10deg);filter:blur(2px)} 20%{transform:scale(.92) rotate(-4deg);filter:blur(0)} 29%{transform:scale(1.02) rotate(-5deg)} 38%{transform:translateX(2px) rotate(-4deg)} 72%,100%{transform:scale(1) rotate(-5deg)} }

@media (max-width:680px) {
  .departure-row { border-left-width:3px; }
  .passport-book-page { padding-left:34px; }
}
@media (max-width:420px) {
  .passport-book-page { padding:38px 22px 28px 31px; }
  .passport-live-stamp { width:125px; height:64px; right:15px; bottom:61px; }
  .passport-mrz { left:31px; right:22px; }
}