/* ================================================================
   ROLE CHANGE, THE FOUR SURFACES
   ----------------------------------------------------------------
   Source: "Role Change Surfaces.dc.html" in the Claude Design project
   (0bb3830f-415b-45ee-b74e-52897df39676), read 2026-07-29. The verbatim <style>
   block is banked at design-source/Role Change Surfaces.style.css.

   The design's own description of what it is:

     "One appointment produces four moments. The countdown card they live with,
      the interstitial on the day it takes effect, the welcome panel the first
      time they sign in afterwards, and the record Human Resources keeps."

   ── WHY EVERY VALUE HERE IS A LITERAL ───────────────────────────────
   The design states its colours as literals (#f0c832, rgba(242,247,238,.88))
   because it is one self-contained page on the #0c1109 ground the other eleven
   design pages share. These four surfaces do NOT get a page of their own: they
   are embedded into my-hub.html, hr-head.html and, for the interstitial, on top
   of whatever page the colleague happens to load. Those pages carry different
   token sets.

   So the literals are kept rather than mapped onto any one page's tokens. A card
   that inherited My Hub's tokens and the same card that inherited the HR board's
   would be two different cards, and the design is emphatic that this is ONE
   moment seen from four places.

   Everything is scoped under a `.rsw-` prefix, so nothing here reaches the pages
   that host it.

   ── WHAT IS NOT PORTED ──────────────────────────────────────────────
   The design page's own chrome: the four-way tab strip, the -3..30 day slider,
   the page heading and the toast. Those exist so a reader of the design can step
   through the four surfaces and scrub the date. In the portal each surface
   appears at the one moment it belongs to, and the day is whatever day it is.
   Porting the slider would let a colleague pretend their appointment is next
   week. See tests/dc-role-switch-fidelity.test.mjs, which pins that.
   ================================================================ */

/* ── The design's keyframes, kept under their own names ───────────────
   Prefixed because these load onto pages that already have animations, and a
   bare `fadeIn` would collide. */
@keyframes rsw-in    { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes rsw-cv    { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes rsw-modal { from { transform:translateY(18px) scale(.985); opacity:0 } to { transform:none; opacity:1 } }
@keyframes rsw-fade  { from { opacity:0 } to { opacity:1 } }
@keyframes rsw-ring  { from { transform:scale(.8); opacity:0 } to { transform:none; opacity:1 } }
@keyframes rsw-scan  { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }

.rsw-cin  { font-family:'Cinzel', serif; }
.rsw-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }

/* Every surface sets its own font, because the interstitial in particular lands
   on pages whose body font is not DM Sans. */
.rsw-card, .rsw-welcome, .rsw-inter, .rsw-hr-row {
  font-family:'DM Sans', system-ui, sans-serif;
  color:#f2f7ee;
  box-sizing:border-box;
}
.rsw-card *, .rsw-welcome *, .rsw-inter *, .rsw-hr-row * { box-sizing:border-box; }

/* ── Grids, and the design's single breakpoint ────────────────────────
   The design collapses .g2 and .g3 at 900px and stacks .rowstack at 640px. */
.rsw-g2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.rsw-g3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
/* A grid item defaults to min-width:auto, so one long department name would
   inflate a track and push the host page sideways. This trap has now clipped
   three pages on this work. */
.rsw-g2 > *, .rsw-g3 > * { min-width:0; }
@media (max-width:900px) {
  .rsw-g2, .rsw-g3 { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .rsw-rowstack { flex-direction:column !important; align-items:stretch !important; }
}

/* ── Buttons, shared by the card, the welcome panel and the interstitial ── */
.rsw-btn, .rsw-btn2 {
  min-height:48px; padding:0 18px; border-radius:12px;
  font-family:'DM Sans', system-ui, sans-serif; cursor:pointer;
  transition:background .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1),
             color .25s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1);
}
.rsw-btn {
  border:1px solid rgba(240,200,50,.34);
  background:linear-gradient(135deg,#f0c832,#f7d94e);
  color:#0c1109; font-size:14.5px; font-weight:700;
}
.rsw-btn2 {
  border:1px solid rgba(255,255,255,.21);
  background:rgba(255,255,255,.05);
  color:#f2f7ee; font-size:14px;
}
.rsw-btn:not(:disabled):active, .rsw-btn2:not(:disabled):active { transform:translateY(1px); }
.rsw-btn2:hover { border-color:rgba(240,200,50,.34); }
.rsw-card :focus-visible, .rsw-inter :focus-visible, .rsw-welcome :focus-visible {
  outline:2px solid #f0c832; outline-offset:2px; border-radius:8px;
}

/* The gold hairline that sweeps across the top of every gold-bordered surface. */
.rsw-scan {
  position:absolute; left:0; right:0; top:0; height:1.5px;
  background:linear-gradient(90deg,transparent,#f0c832,transparent);
  background-size:200% 100%;
  animation:rsw-scan 5.5s linear infinite;
}

.rsw-eyebrow {
  font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase;
  color:rgba(242,247,238,.88);
}
.rsw-eyebrow-gold { color:#f0c832; }

/* ════════════════════════════════════════════════════════════════════
   SURFACE 1: the countdown card, on My Hub, above everything else
   ════════════════════════════════════════════════════════════════════ */
.rsw-card {
  position:relative; overflow:hidden;
  border:1px solid rgba(240,200,50,.45); border-radius:18px; padding:24px;
  background:linear-gradient(160deg, rgba(212,175,55,.18), rgba(255,255,255,.03) 46%, rgba(255,255,255,.10)),
             linear-gradient(320deg, rgba(4,80,30,.28), transparent 62%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 14px 40px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rsw-in .5s cubic-bezier(.16,1,.3,1) both;
}
.rsw-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rsw-card-main { flex:1 1 320px; min-width:0; }
.rsw-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 11px; border:1px solid rgba(240,200,50,.5); border-radius:999px;
  background:rgba(212,175,55,.14);
  font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:#f0c832;
}
.rsw-h {
  margin:13px 0 0; font-size:25px; line-height:1.22; font-weight:700;
  text-wrap:pretty; overflow-wrap:anywhere;
}
.rsw-p {
  margin:10px 0 0; max-width:56ch; font-size:14.5px; line-height:1.62;
  color:rgba(242,247,238,.88); text-wrap:pretty;
}

/* The ring. A conic gradient rather than an SVG arc, as the design has it: the
   filled proportion is a single custom property the script sets. */
.rsw-ring-wrap { flex:0 0 auto; width:154px; text-align:center; animation:rsw-ring .5s cubic-bezier(.16,1,.3,1) .1s both; }
.rsw-ring {
  position:relative; width:154px; height:154px; border-radius:50%;
  background:conic-gradient(#f0c832 var(--rsw-arc, 2%), rgba(255,255,255,.10) 0);
  display:flex; align-items:center; justify-content:center;
}
.rsw-ring-in {
  width:126px; height:126px; border-radius:50%;
  background:#111a0e; border:1px solid rgba(240,200,50,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* The size is set inline by the script, because "Today" needs less room than a
   two-digit count and the design changes it with the value. */
.rsw-ring-n { line-height:1; font-weight:700; color:#f0c832; }
.rsw-ring-l {
  margin-top:6px; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase;
  color:rgba(242,247,238,.88);
}

/* The three tiles: post today, post from the date, reporting to. */
.rsw-tile {
  padding:13px 14px; border:1px solid rgba(255,255,255,.16); border-radius:12px;
  background:rgba(255,255,255,.04); min-width:0;
}
/* The middle tile is the one that is changing, so it carries the gold. */
.rsw-tile.is-new { border-color:rgba(240,200,50,.4); background:rgba(212,175,55,.10); }
.rsw-tile-k { font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.rsw-tile.is-new .rsw-tile-k { color:#f0c832; }
.rsw-tile-v { margin-top:6px; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.rsw-tile.is-new .rsw-tile-v { font-weight:600; color:#f0c832; }
.rsw-tile-s { margin-top:4px; font-size:11px; color:rgba(242,247,238,.62); overflow-wrap:anywhere; }
.rsw-tile.is-new .rsw-tile-s { color:rgba(242,247,238,.88); }

/* The blue reassurance note, which is the same treatment in three of the four
   surfaces. Blue rather than gold: it is information, not an action. */
.rsw-note {
  display:flex; align-items:flex-start; gap:11px;
  margin-top:16px; padding:13px 14px;
  border:1px solid rgba(85,136,255,.4); border-radius:12px; background:rgba(85,136,255,.08);
}
.rsw-note > i { margin-top:3px; font-size:12px; color:#5588ff; flex:0 0 auto; }
.rsw-note-t { min-width:0; font-size:13.5px; line-height:1.55; color:rgba(242,247,238,.88); text-wrap:pretty; }

.rsw-actions { display:flex; gap:10px; margin-top:18px; }
.rsw-actions > .rsw-btn { flex:1 1 auto; }
.rsw-actions > .rsw-btn2 { flex:0 0 auto; }

/* The two panels under the card: what is ready, what changes on the day. */
.rsw-panel {
  padding:16px; border:1px solid rgba(255,255,255,.20); border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
  min-width:0;
}
.rsw-panel-list { display:flex; flex-direction:column; gap:9px; margin-top:11px; }
.rsw-line {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; line-height:1.5; color:rgba(242,247,238,.88); text-wrap:pretty;
}
.rsw-line > i { margin-top:3px; width:14px; flex:0 0 auto; font-size:11px; }
.rsw-line-ok > i { color:#4cd657; }
.rsw-line-wait > i { color:#f0c832; }
.rsw-line-arrow > i { font-size:10px; color:#f0c832; }

/* ════════════════════════════════════════════════════════════════════
   SURFACE 3: the interstitial, on the day
   ════════════════════════════════════════════════════════════════════ */
.rsw-inter {
  position:fixed; inset:0; z-index:800;
  background:rgba(4,10,6,.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:rsw-fade .3s cubic-bezier(.16,1,.3,1) both;
}
.rsw-inter-card {
  width:100%; max-width:min(620px, calc(100vw - 24px));
  max-height:calc(100dvh - 40px); overflow-y:auto;
  padding:30px 28px; border-radius:18px;
  border:1px solid rgba(240,200,50,.45);
  background:linear-gradient(165deg,#1a2616,#111a0e);
  position:relative; text-align:center;
  animation:rsw-modal .34s cubic-bezier(.16,1,.3,1) both;
}
/* The design states calc(100vh - 40px). dvh is used instead because vh does not
   subtract a mobile browser's own chrome, and this card is the one thing on the
   page a colleague MUST be able to reach the bottom of to dismiss. */
.rsw-seal {
  width:76px; height:76px; margin:0 auto; border-radius:50%;
  border:1.5px solid rgba(240,200,50,.5); background:rgba(212,175,55,.14);
  display:flex; align-items:center; justify-content:center;
  animation:rsw-ring .45s cubic-bezier(.16,1,.3,1) .06s both;
}
.rsw-seal > i { font-size:28px; color:#f0c832; }
.rsw-inter-h { margin:12px 0 0; font-size:27px; line-height:1.22; font-weight:700; text-wrap:pretty; }
.rsw-inter-p {
  margin:12px auto 0; max-width:50ch; font-size:14.5px; line-height:1.64;
  color:rgba(242,247,238,.88); text-wrap:pretty;
}

/* The before-and-after table. */
.rsw-diff { margin-top:22px; border:1px solid rgba(255,255,255,.20); border-radius:14px; overflow:hidden; text-align:left; }
.rsw-diff-h, .rsw-diff-r { display:grid; grid-template-columns:1fr 1.15fr 1.15fr; gap:10px; }
.rsw-diff-h {
  padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(242,247,238,.88);
}
.rsw-diff-r { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(212,175,55,.06); }
.rsw-diff-r:last-child { border-bottom:0; }
.rsw-diff-k { font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.rsw-diff-f { font-size:13px; line-height:1.4; color:rgba(242,247,238,.62); word-break:break-word; }
.rsw-diff-t { font-size:13px; line-height:1.4; font-weight:600; color:#f0c832; word-break:break-word; }
/* Three columns of 13px text do not fit a phone. The design has no rule for
   this, because a design page is read at 1080px. */
@media (max-width:560px) {
  .rsw-diff-h { display:none; }
  .rsw-diff-r { grid-template-columns:1fr; gap:4px; }
  .rsw-diff-f::before { content:'Until today: '; color:rgba(242,247,238,.45); }
  .rsw-diff-t::before { content:'From today: '; color:rgba(242,247,238,.45); font-weight:400; }
}

.rsw-inter .rsw-note { text-align:left; }
.rsw-ack { width:100%; min-height:52px; margin-top:22px; border-radius:13px; font-size:15px; }
.rsw-foot {
  margin-top:11px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(242,247,238,.62);
}

/* ════════════════════════════════════════════════════════════════════
   SURFACE 4: the welcome panel, on the first sign in afterwards
   ════════════════════════════════════════════════════════════════════ */
.rsw-welcome {
  position:relative; overflow:hidden;
  border:1px solid rgba(240,200,50,.45); border-radius:18px; padding:26px;
  background:linear-gradient(160deg, rgba(212,175,55,.16), rgba(255,255,255,.03) 46%, rgba(255,255,255,.10)),
             linear-gradient(320deg, rgba(4,80,30,.26), transparent 62%);
  animation:rsw-in .5s cubic-bezier(.16,1,.3,1) both;
}
.rsw-welcome-h { margin:11px 0 0; font-size:26px; line-height:1.22; font-weight:700; text-wrap:pretty; }
.rsw-welcome-p {
  margin:11px 0 0; max-width:62ch; font-size:14.5px; line-height:1.64;
  color:rgba(242,247,238,.88); text-wrap:pretty;
}
.rsw-new {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px; border:1px solid rgba(255,255,255,.18); border-radius:13px;
  background:rgba(255,255,255,.04); min-width:0;
}
.rsw-new-ic {
  width:34px; height:34px; flex:0 0 auto; border-radius:9px;
  background:rgba(212,175,55,.14); border:1px solid rgba(240,200,50,.34);
  display:flex; align-items:center; justify-content:center;
}
.rsw-new-ic > i { font-size:12.5px; color:#f0c832; }
.rsw-new-t { font-size:14px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.rsw-new-d { margin-top:4px; font-size:13px; line-height:1.5; color:rgba(242,247,238,.88); text-wrap:pretty; }

.rsw-start { margin-top:18px; padding:15px 16px; border:1px solid rgba(85,136,255,.4); border-radius:13px; background:rgba(85,136,255,.08); }
.rsw-start-k { font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:#5588ff; }
.rsw-step { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; line-height:1.55; color:rgba(242,247,238,.88); }
.rsw-step-n {
  width:20px; height:20px; margin-top:1px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(85,136,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#5588ff;
}

/* ════════════════════════════════════════════════════════════════════
   SURFACE 2: the record Human Resources keeps
   ════════════════════════════════════════════════════════════════════ */
.rsw-hr-intro {
  border:1px solid rgba(240,200,50,.34); border-radius:16px; padding:18px;
  background:linear-gradient(160deg, rgba(212,175,55,.14), rgba(255,255,255,.03) 46%, rgba(255,255,255,.10));
}
.rsw-hr-intro-p {
  margin:9px 0 0; max-width:76ch; font-size:14px; line-height:1.62;
  color:rgba(242,247,238,.88); text-wrap:pretty;
}
.rsw-hr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.rsw-hr-title { font-size:18px; font-weight:600; }
.rsw-hr-count { font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.rsw-hr-list { display:flex; flex-direction:column; gap:11px; margin-top:12px; }

.rsw-hr-row {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.20); border-radius:14px; padding:16px 18px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
}
/* A change that has not happened yet is the one somebody still has to act on,
   so it carries the gold. */
.rsw-hr-row[data-state="scheduled"] {
  border-color:rgba(240,200,50,.4);
  background:linear-gradient(160deg, rgba(212,175,55,.12), rgba(255,255,255,.03) 46%, rgba(255,255,255,.09));
}
.rsw-hr-row[data-state="cancelled"] { opacity:.62; }
.rsw-hr-top { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.rsw-hr-av {
  width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f0c832,#f7d94e);
  color:#0c1109; font-size:13.5px; font-weight:600;
}
.rsw-hr-main { flex:1 1 260px; min-width:0; }
.rsw-hr-nm { font-size:15px; font-weight:600; line-height:1.3; word-break:break-word; }
.rsw-hr-ln { margin-top:5px; font-size:13.5px; line-height:1.5; color:rgba(242,247,238,.88); text-wrap:pretty; }
.rsw-hr-mt {
  margin-top:6px; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(242,247,238,.62); overflow-wrap:anywhere;
}
.rsw-hr-side { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.rsw-chip {
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(76,214,87,.4); background:rgba(76,214,87,.10); color:#4cd657;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; white-space:nowrap;
}
.rsw-chip.is-soon { border-color:rgba(240,200,50,.45); background:rgba(212,175,55,.14); color:#f0c832; }
.rsw-chip.is-off { border-color:rgba(255,255,255,.21); background:rgba(255,255,255,.05); color:rgba(242,247,238,.62); }
.rsw-hr-date { font-size:11px; color:rgba(242,247,238,.88); white-space:nowrap; }

.rsw-hr-pending {
  display:flex; align-items:center; gap:10px; margin-top:13px; padding:11px 13px;
  border:1px solid rgba(240,200,50,.4); border-radius:11px; background:rgba(212,175,55,.10);
}
.rsw-hr-pending > i { font-size:12px; color:#f0c832; flex:0 0 auto; }
.rsw-hr-pending-t { flex:1 1 auto; min-width:0; font-size:13px; line-height:1.45; color:rgba(242,247,238,.88); }

.rsw-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:34px 20px; text-align:center;
  border:1px solid rgba(255,255,255,.20); border-radius:14px;
  background:rgba(255,255,255,.03);
}
.rsw-empty > i { font-size:20px; color:#4cd657; }
.rsw-empty-t { font-size:13.5px; color:rgba(242,247,238,.62); max-width:44ch; }

/* ── Motion ──────────────────────────────────────────────────────────
   Four surfaces that all slide and one that sweeps a hairline forever. The
   design has no reduced-motion branch; a portal shown to everybody needs one. */
@media (prefers-reduced-motion:reduce) {
  .rsw-card, .rsw-welcome, .rsw-inter, .rsw-inter-card, .rsw-ring-wrap, .rsw-seal { animation:none; }
  .rsw-scan { animation:none; opacity:.5; }
}