/* ================================================================
   MY DESK: the Claude Design layout, ported
   ----------------------------------------------------------------
   Source: "My Desk.dc.html" in the design project, read 2026-07-28. The
   verbatim <style> block is kept at design-source/My Desk.style.css so this port
   can be compared against it both ways.

   Loads AFTER css/my-desk.css, so the design wins on everything it defines
   while the existing desk keeps working.

   ── THE ONE THING TO UNDERSTAND BEFORE READING FURTHER ──────────────
   The design and the portal do not agree about what this page IS, and no amount
   of styling reconciles that on its own.

   The portal's My Desk is a LEFT RAIL WITH NINE TABS: policy review, VMEM
   probation, rota access, performance records, weekly report access, shift
   handoff access, applications, internal roles. Each tab is a panel of its own.

   The design has no rail and no tabs. It is ONE scrolling page, and it is
   organised by who the work is waiting on:

       greeting          who you are, and the single oldest thing waiting
       four KPI tiles    each one a question about your attention
       band one          Waiting on you        nothing moves until you act
       band two          Moving without you    in flight, with somebody else
       band three        The organisation      standing facts, then every desk

   Band three ends with "Your desks", a grid of twelve tiles, and "Not built
   yet", a grid of seven. So the design does not remove the nine desks; it stops
   them being the navigation and makes them a destination inside the third band.

   THIS FILE PORTS THE LAYOUT LANGUAGE, which is shared whichever way the IA
   question is settled: the grids and their exact breakpoints, the greeting, the
   KPI tile, the band headers, the attention and in-flight rows, the standing
   panel, and the two tile grids. The IA change itself is a markup decision and
   is deliberately not forced here.
   ================================================================ */

/* Namespaced so they cannot collide with css/my-desk.css or any shared file
   that already defines wgIn, cvIn or scIn. */
@keyframes mdcWgIn   { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes mdcCvIn   { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes mdcScIn   { from { transform:translateY(12px) scale(.96); opacity:0 } to { transform:none; opacity:1 } }
@keyframes mdcBlink  { 0%,100% { opacity:1 } 50% { opacity:.3 } }
@keyframes mdcMdScan   { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }

/* ── The reading column ────────────────────────────────────────────────
   1400px, wider than Internal Opportunities' 1180 because this page carries a
   four across tile grid rather than a two across board. */
.mdc-main { max-width:1400px; margin:0 auto; padding:22px 20px 70px; }

/* ── The greeting ─────────────────────────────────────────────────────
   The one place on the page with the gold wash and the scan line, because it is
   the only place that addresses the reader directly. */
.mdc-greeting {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.20); border-radius:18px; padding:24px 26px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10)),
    linear-gradient(320deg, rgba(212,175,55,.12), transparent 60%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
  animation:mdcWgIn .5s cubic-bezier(.16,1,.3,1) .04s both;
}
.mdc-scan {
  position:absolute; left:0; right:0; top:0; height:1.5px;
  background:linear-gradient(90deg, transparent, #f0c832, transparent);
  background-size:200% 100%; animation:mdcMdScan 5.5s linear infinite;
}
.mdc-greeting-row { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.mdc-greeting-main { flex:1 1 380px; min-width:0; }
.mdc-eyebrow { font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:2.6px; text-transform:uppercase; color:#f0c832; }
.mdc-h1 { font-family:'Cinzel', serif; margin:9px 0 0; font-size:28px; line-height:1.18;
  font-weight:700; text-wrap:pretty; }
.mdc-lede { margin:11px 0 0; max-width:58ch; font-size:14.5px; line-height:1.6;
  color:rgba(242,247,238,.88); text-wrap:pretty; }

/* ── The four KPI tiles ───────────────────────────────────────────────
   Each one is a question about the reader's attention, which is why the value
   carries a per tile size: a count sets in 30px, a duration in 26px. */
.md-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:16px; }
.mdc-kpi {
  position:relative; overflow:hidden; text-align:left;
  border:1px solid rgba(255,255,255,.20); border-radius:15px; padding:16px;
  background:rgba(255,255,255,.05); color:#f2f7ee; cursor:pointer;
  animation:mdcScIn .45s cubic-bezier(.16,1,.3,1) both;
}
.mdc-kpi-head { display:flex; align-items:center; gap:9px; }
.mdc-kpi-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:1.8px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.mdc-kpi-v { font-family:'Cinzel', serif; margin-top:10px; font-size:30px; line-height:1.1; font-weight:700; }
.mdc-kpi-v[data-size="sm"] { font-size:26px; }
.mdc-kpi-s { margin-top:5px; font-size:13px; line-height:1.45;
  color:rgba(242,247,238,.88); text-wrap:pretty; }
/* One tone per question, as the design assigns them. */
.mdc-kpi[data-tone="gold"]  { border-color:rgba(240,200,50,.4);  background:rgba(212,175,55,.12); }
.mdc-kpi[data-tone="gold"]  .mdc-kpi-v, .mdc-kpi[data-tone="gold"] > .mdc-kpi-head > i  { color:#f0c832; }
.mdc-kpi[data-tone="amber"] { border-color:rgba(245,158,11,.4);  background:rgba(245,158,11,.10); }
.mdc-kpi[data-tone="amber"] .mdc-kpi-v, .mdc-kpi[data-tone="amber"] > .mdc-kpi-head > i { color:#f59e0b; }
.mdc-kpi[data-tone="red"]   { border-color:rgba(255,72,72,.45);  background:rgba(255,72,72,.10); }
.mdc-kpi[data-tone="red"]   .mdc-kpi-v, .mdc-kpi[data-tone="red"] > .mdc-kpi-head > i   { color:#ff4848; }
.mdc-kpi[data-tone="green"] { border-color:rgba(76,214,87,.4);   background:rgba(76,214,87,.08); }
.mdc-kpi[data-tone="green"] .mdc-kpi-v, .mdc-kpi[data-tone="green"] > .mdc-kpi-head > i { color:#4cd657; }
.mdc-kpi[data-tone="blue"]  { border-color:rgba(85,136,255,.4);  background:rgba(85,136,255,.10); }
.mdc-kpi[data-tone="blue"]  .mdc-kpi-v, .mdc-kpi[data-tone="blue"] > .mdc-kpi-head > i  { color:#5588ff; }

/* ── The three bands ──────────────────────────────────────────────────
   Staggered entrances, 0 / .04s / .08s, so the page settles top to bottom once
   rather than three sections arriving at random. */
.mdc-band            { animation:mdcCvIn .38s cubic-bezier(.16,1,.3,1) both; }
.mdc-band-attention  { margin-top:22px; }
.mdc-band-inflight   { margin-top:26px; animation-delay:.04s; }
.mdc-band-org        { margin-top:26px; animation-delay:.08s; }
.mdc-band-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mdc-band-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:2.4px; text-transform:uppercase; }
.mdc-band-attention .mdc-band-k { color:#f0c832; }
.mdc-band-inflight  .mdc-band-k { color:#5588ff; }
.mdc-band-org       .mdc-band-k { color:rgba(242,247,238,.88); }
.mdc-band-h { font-family:'Cinzel', serif; margin:7px 0 0; font-size:21px; font-weight:700; }
.mdc-band-lede { margin:6px 0 0; max-width:64ch; font-size:13.5px; line-height:1.55;
  color:rgba(242,247,238,.88); text-wrap:pretty; }
/* ── THE COUNT WAS RUNNING INTO THE HEADING ────────────────────────────
   Reported 2026-07-28: "The texts 1 in flight seems like flowing into the label."

   .mdc-band-head is a flex row: the heading block on the left, the count on the
   right. Neither carried a shrink rule, so the two competed for the same space.
   The heading's lede is capped at 64ch and pushed outward, and the count, having
   no white-space rule, wrapped and closed the gap between them until they read
   as one run of text.

   flex:0 0 auto and nowrap keep the count intact, and min-width:0 on the heading
   block lets IT give way instead, which is the right way round: a heading may
   wrap, a two word count should not. The design also carries hidexs on this
   element, so on the narrowest screens it leaves the row rather than fighting
   for it at all. ── */
.mdc-band-count {
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px;
  letter-spacing:1.8px; text-transform:uppercase; color:rgba(242,247,238,.88);
  flex:0 0 auto;
  white-space:nowrap;
  /* Lifted off the baseline so it aligns with the eyebrow rather than the h2,
     which is where the design's baseline alignment puts it. */
  padding-left:12px;
}
.mdc-band-head > div:first-child { min-width:0; flex:1 1 auto; }

/* Band one. Gold normally, red once it is past a service standard, and the
   ageing is on the row rather than hidden in a tooltip. */
.mdc-attention-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.mdc-attention {
  position:relative; overflow:hidden;
  border:1px solid rgba(240,200,50,.4); border-radius:14px; padding:16px 18px;
  background:linear-gradient(160deg, rgba(212,175,55,.12), rgba(255,255,255,.03) 46%, rgba(255,255,255,.09));
}
.mdc-attention[data-overdue="true"] { border-color:rgba(255,72,72,.45); background:rgba(255,72,72,.09); }
.mdc-attention-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mdc-disc { width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(135deg,#f0c832,#f7d94e);
  display:flex; align-items:center; justify-content:center; }
.mdc-disc > i { font-size:13px; color:#fff; }
.mdc-attention[data-overdue="true"] .mdc-disc { background:linear-gradient(135deg,#ff4848,#ff7a7a); }
.mdc-attention-main { flex:1 1 260px; min-width:0; }
.mdc-attention-line { font-size:15px; font-weight:600; line-height:1.35; word-break:break-word; text-wrap:pretty; }
.mdc-attention-age { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:5px;
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.mdc-attention[data-age="due"]  .mdc-attention-age { color:#f59e0b; }
.mdc-attention[data-age="over"] .mdc-attention-age { color:#ff4848; }
.mdc-overdue {
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px;
  border:1px solid rgba(255,72,72,.45); border-radius:11px; background:rgba(255,72,72,.10);
}
.mdc-overdue > i { font-size:11.5px; color:#ff4848; }
.mdc-overdue > span { font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:#ff4848; }
/* An empty band one is GOOD news, so it is green rather than the usual grey. */
.mdc-empty-good {
  display:flex; flex-direction:column; align-items:center; gap:11px; padding:44px 20px;
  border:1px dashed rgba(76,214,87,.4); border-radius:16px; background:rgba(76,214,87,.06);
  text-align:center;
}
.mdc-empty-good > i { font-size:24px; color:#4cd657; }
.mdc-empty-good > div { font-size:14.5px; color:#f2f7ee; max-width:44ch; }

/* Band two. Quieter, two across, and it carries no action: it is here so the
   reader knows the work exists, not so they do anything about it. */
.mdc-inflight {
  display:flex; align-items:flex-start; gap:13px; padding:15px 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:13px;
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 42%, rgba(255,255,255,.07));
}
.mdc-inflight-ic { width:34px; height:34px; flex:0 0 auto; border-radius:9px;
  border:1px solid rgba(85,136,255,.4); background:rgba(85,136,255,.10);
  display:flex; align-items:center; justify-content:center; }
.mdc-inflight-ic > i { font-size:12px; color:#5588ff; }
.mdc-inflight-line { font-size:14px; line-height:1.4; font-weight:600; word-break:break-word; }
.mdc-inflight-with { margin-top:5px; font-size:13px; line-height:1.5;
  color:rgba(242,247,238,.88); text-wrap:pretty; }
.mdc-inflight-meta { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:6px;
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(242,247,238,.62); }

/* Band three. The standing panel is gold bordered because it is the only part of
   the page that is about the organisation rather than about the reader. */
.mdc-standing {
  padding:18px; border:1px solid rgba(240,200,50,.34); border-radius:15px;
  background:linear-gradient(160deg, rgba(212,175,55,.13), rgba(255,255,255,.03) 46%, rgba(255,255,255,.09));
}
.mdc-standing-row { display:flex; align-items:baseline; gap:12px; }
.mdc-standing-v { font-family:'Cinzel', serif; flex:0 0 auto; min-width:38px;
  font-size:22px; font-weight:700; }
.mdc-standing-t { flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.5;
  color:rgba(242,247,238,.88); text-wrap:pretty; }
.mdc-activity {
  padding:18px; border:1px solid rgba(255,255,255,.20); border-radius:15px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
}
.mdc-live-dot { width:7px; height:7px; border-radius:50%; background:#4cd657;
  animation:mdcBlink 2.4s infinite; }
.mdc-activity-t { font-size:13.5px; line-height:1.45; color:rgba(242,247,238,.88); text-wrap:pretty; }
.mdc-activity-w { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(242,247,238,.62); }

/* ── The two tile grids ───────────────────────────────────────────────
   "Your desks" is four across, "Not built yet" is three, and the second is
   dashed so an unbuilt desk can never be mistaken for one you can open. */
.md-mods { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:12px; }
.mdc-module {
  position:relative; overflow:hidden; display:flex; flex-direction:column; 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));
  color:#f2f7ee; text-decoration:none;
}
.mdc-module-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mdc-module-ic { width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  border:1px solid rgba(240,200,50,.34); background:rgba(212,175,55,.12);
  display:flex; align-items:center; justify-content:center; }
.mdc-module-ic > i { font-size:13.5px; color:#f0c832; }
.mdc-module-badge { font-family:'IBM Plex Mono', ui-monospace, monospace; padding:3px 9px;
  border:1px solid rgba(240,200,50,.34); border-radius:999px;
  background:rgba(212,175,55,.16); font-size:10.5px; color:#f0c832; }
.mdc-module-t { font-family:'Cinzel', serif; margin-top:12px; font-size:15.5px;
  font-weight:600; line-height:1.3; word-break:break-word; }
.mdc-module-b { margin-top:5px; font-size:12.5px; line-height:1.45;
  color:rgba(242,247,238,.88); text-wrap:pretty; }

.md-soon-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; margin-top:12px; }
.mdc-soon {
  display:flex; align-items:center; gap:12px; padding:14px 15px;
  border:1px dashed rgba(255,255,255,.21); border-radius:13px; background:rgba(255,255,255,.02);
}
.mdc-soon-ic { width:32px; height:32px; flex:0 0 auto; border-radius:9px;
  border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.mdc-soon-ic > i { font-size:12px; color:rgba(242,247,238,.62); }
.mdc-soon-t { font-size:13.5px; font-weight:600; line-height:1.35;
  color:rgba(242,247,238,.88); word-break:break-word; }
.mdc-soon-n { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(242,247,238,.62); }

.mdc-section-k { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:22px;
  font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(242,247,238,.88); }
.mdc-section-k[data-quiet="1"] { color:rgba(242,247,238,.62); }

.g2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE: the design's own three breakpoints, 1180 / 900 / 620
   Note the module grid steps 4 -> 3 -> 2 -> 1 while the KPI strip goes
   4 -> 2 -> 1, so they are NOT the same ladder and cannot share a rule.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px) {
  .md-mods { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px) {
  .md-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .md-mods, .md-soon-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .g2 { grid-template-columns:1fr; }
  .hidesm { display:none !important; }
}
@media (max-width:620px) {
  .md-kpis, .md-mods, .md-soon-grid { grid-template-columns:1fr; }
  .hidexs { display:none !important; }
  .mdc-greeting-row, .mdc-band-head { flex-direction:column !important; align-items:stretch !important; }
  .mdc-h1 { font-size:23px; }
  .mdc-greeting { padding:20px; }
  .mdc-main { padding:18px 14px 60px; }
}
/* Below the design's range. The narrowest phone in service is 320px. */
@media (max-width:380px) {
  .mdc-kpi-v { font-size:26px; }
  .mdc-kpi-v[data-size="sm"] { font-size:22px; }
}

/* ── THE PAGE WAS SHRINKING, AND THIS IS WHY ───────────────────────────
   Reported 2026-07-28: "MY DESK is shrinking."

   css/my-desk.css sets the suite to THREE grid tracks:

       .md-suite{ grid-template-columns:248px minmax(0,1fr) 320px !important }

   The rail was hidden with u-hide, which is display:none, and display:none
   REMOVES AN ELEMENT AS A GRID ITEM rather than leaving an empty track. So
   <main> was promoted into the first track and rendered 248px wide: the rail's
   width, holding the entire desk.

   Hiding a grid item never leaves its track behind for the next child. With the
   rail gone the suite is one column, and every child spans it. The !important is
   required only because the rule it corrects carries one.
   ── */
.md-wrap.md-suite {
  grid-template-columns:minmax(0,1fr) !important;
  min-height:auto;
  /* #hdr is position:fixed, and the suite sets padding:0 !important, so without
     this the greeting starts underneath the header. */
  padding-top:var(--hdh, 64px) !important;
}
.md-suite > main.md-main {
  grid-column:1 / -1;
  /* A grid item defaults to min-width:auto, so one wide table inside would
     inflate the track and push the page sideways. */
  min-width:0;
  padding:0;
}

/* ── u-hide DOES NOT WIN HERE, AND THAT IS WHY THE PAGE DID NOT FIT ────
   Reported 2026-07-28: "The page is not fitted, overflowing on both side of the
   screen."

   The rail and the old hero were marked u-hide, and u-hide is

       .u-hide { display: none; }        one class, NO !important

   while css/my-desk.css carries

       .md-suite .md-hero     { display:flex !important; ... }
       .md-suite .md-nav      { display:flex !important; ... }
       .md-suite .md-nav-item { display:flex !important; ... }

   Two classes AND !important, so every one of them beats u-hide. The rail and
   the superseded hero were still rendering the whole time. In the single column
   grid they stacked above the desk, and the rail's own 248px layout pushed the
   page out of shape.

   These win on both counts: three classes or a child combinator, plus
   !important. They are written against the SUITE so they cannot leak to another
   page that still wants its rail. ── */
.md-wrap.md-suite > aside.md-rail,
.md-wrap.md-suite .md-rail,
.md-wrap.md-suite .md-rail .md-nav,
.md-wrap.md-suite .md-rail .md-nav-item { display:none !important; }

.md-wrap.md-suite > main .md-hero,
.md-wrap.md-suite .md-hero { display:none !important; }

.md-wrap.md-suite #md-kpis-legacy { display:none !important; }

/* Nothing in the desk may exceed the viewport. The suite is full bleed by
   design, so the reading column owns the gutters and the body must not be able
   to scroll sideways. */
.md-wrap.md-suite { max-width:100%; overflow-x:clip; }
/* THE READING COLUMN (corrected 2026-07-29).
   This said `max-width:100%`, which on a wide monitor means no bound at all: the
   desk ran the full width of the display and a line of body text crossed the
   whole screen. A max-width:1560px rule was added to css/my-desk.css to fix
   that, and lost, because this selector carries two classes and a child
   combinator and this file loads afterwards. So the desk stayed unbounded and
   the VP reported it as "no fitting".

   1560px is the bound "Internal Recruitment Console.dc.html" puts on its own
   content. .md-main itself is padding:0 (see .md-suite > main.md-main above, which
   the overview's full bleed bands rely on), so the gutters are given to the
   sub-page views instead, just below. */
.md-wrap.md-suite > main.md-main {
  max-width:1560px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.mdc-main { width:100%; box-sizing:border-box; }

/* ── THE BACKGROUND STOPPED HALFWAY DOWN THE PAGE ──────────────────────
   Reported 2026-07-28: "there is also a background colour that is like half the
   page, instead of the whole page."

   css/my-desk.css sets, in this order:

       html, body { height:100%; background:var(--base) }      #172213, lighter
       body       { background: <gold wash> , var(--void) !important }   #0c1109

   A body background propagates to the canvas ONLY when html has none. html has
   one here, so body's dark ground painted the BODY BOX alone, and height:100%
   makes that box exactly one viewport tall. Everything below the first screen
   showed html's lighter #172213 instead. The taller the desk, the more of it.

   The ground goes on html so it covers the whole canvas however long the page
   is, and body may then grow past the viewport. ── */
html {
  /* THE SAME GROUND AS EVERY OTHER PORTED PAGE, byte for byte from
     css/dc-base.css: a green wash from the top right, a gold one from the bottom
     left, over near-black.

     This first read the OLD page's ambient wash, which is gold only and has no
     green in it at all, so this desk sat on a different ground from Internal
     Opportunities and the Recruitment Console beside it. The design uses one
     ground on all thirteen of its pages and that is the point of it. */
  background:
    radial-gradient(140% 90% at 85% -10%, rgba(4,80,30,.30), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(240,200,50,.07), transparent 55%),
    #0c1109 !important;
  background-attachment:fixed;
  min-height:100%;
}
body {
  /* Was height:100%, which capped the body box at one viewport and left the
     ground stopping at the fold. */
  height:auto !important;
  min-height:100%;
  /* The ground is on html now, so the body must not paint a second one over it.
     css/my-desk.css sets its own gold-only wash on body with !important, which
     is what this overrides. */
  background:transparent !important;
}

/* ── QUICK ACTIONS AND THE AUDIT TRAIL, INSIDE THE DESK ────────────────
   Reported 2026-07-28: "this now stand on its own ... it is suppose to fill the
   screen."

   It did stand on its own, because it WAS on its own: .md-sec was the suite's
   third column and sat outside <main> entirely. Once the suite collapsed to one
   column it became a sibling of the desk rather than part of it, so it read as a
   loose block under the page however it was styled.

   It now lives inside band three, in .mdc-main, so it takes the desk's own
   column and its own width with no placement rules of its own. What is left here
   is only what it needs to stop behaving like a column: it was sticky, it had a
   left border, and it was a flex column. ── */
.mdc-main aside.md-sec {
  position:static;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  align-items:start;
  margin-top:22px;
  padding:0;
  border-left:0;
  background:none;
}
.mdc-main aside.md-sec .md-sec-block {
  border:1px solid rgba(255,255,255,.20); border-radius:15px; padding:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
}
/* The audit trail is the wider of the two, so it takes the whole row beneath. */
.mdc-main aside.md-sec .md-sec-block.md-audit { grid-column:1 / -1; margin:0; }
.mdc-main aside.md-sec .md-sec-h {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9.5px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(242,247,238,.88); margin-bottom:13px;
}
.mdc-main aside.md-sec .md-qa { grid-template-columns:repeat(2, minmax(0,1fr)); }
/* The table carries min-width:620px, so it must scroll inside its own block
   rather than widening the document. */
.mdc-main aside.md-sec .md-audit-scroll {
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
}
@media (max-width:900px) {
  .mdc-main aside.md-sec { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .mdc-main aside.md-sec .md-qa { grid-template-columns:1fr; }
}

/* ── THE QUICK LINKS WERE A DIFFERENT COLOUR FROM EVERY OTHER TILE ─────
   Reported 2026-07-28: "the colour of that particular quick link section still
   does not match the rest of the other sections."

   The block around them was right; the tiles inside it were not.
   css/my-desk.css styles them from the OLD page's palette:

       .md-qa a        { background:rgba(255,255,255,.03); border:1px solid var(--border) }
       .md-audit-scroll{ background:var(--panel) }        /* rgba(255,255,255,.10) */

   Both are FLAT fills, and --border is gold tinted, whereas every tile in the
   design is the same three stop glass gradient over a plain white border:

       linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%,
                       rgba(255,255,255,.08))
       border:1px solid rgba(255,255,255,.20)

   A flat .03 fill next to that gradient reads as a darker, duller panel, which
   is exactly what stood out. These give the quick links and the audit box the
   same surface as the desk tiles above them, so the whole of band three is one
   material. ── */
.mdc-main aside.md-sec .md-qa a {
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  padding:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
  color:#f2f7ee;
  font-family:'Cinzel', serif;
  font-size:14px;
  font-weight:600;
  /* The design's one hover treatment, the same as .lift. */
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1),
             box-shadow .25s cubic-bezier(.16,1,.3,1);
}
.mdc-main aside.md-sec .md-qa a:hover {
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.3);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5), 0 0 30px -16px rgba(212,175,55,.3);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
}
/* The icon disc, matching the module tiles' own. */
.mdc-main aside.md-sec .md-qa a i {
  width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  border:1px solid rgba(240,200,50,.34); background:rgba(212,175,55,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; color:#f0c832;
}
/* The audit box is a surface, not a panel of its own: the block already provides
   the material, so the table sits directly on it. */
.mdc-main aside.md-sec .md-audit-scroll {
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.mdc-main aside.md-sec .md-audit-table thead th {
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(242,247,238,.88);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9.5px; letter-spacing:1.8px; font-weight:400;
}
.mdc-main aside.md-sec .md-audit-table tbody td {
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(242,247,238,.88);
  font-size:13px;
}

/* ── SECTIONS NOT DISPLAYING ON MOBILE ─────────────────────────────────
   Reported 2026-07-28: "some sections don't display on mobile."

   Not hidden. CLIPPED. Every grid on this desk uses minmax(0,1fr), so the TRACK
   can shrink, but a GRID ITEM still defaults to min-width:auto and is therefore
   sized to its own min-content. css/my-desk.css sets

       .md-audit-table { min-width:620px }
       .md-sec-block   { min-width:240px }   (at 1100px and below)

   so those items refused to go below 620px and 240px. The row then grew wider
   than the phone, and css/my-desk.css clips it:

       @media(max-width:760px){ html, body{ overflow-x:hidden } }

   Overflow plus a clip is content that is simply not on screen, with no
   scrollbar to reveal it, which is exactly "does not display".

   min-width:0 on every grid item lets each one shrink to its track. Anything
   that genuinely cannot shrink, the audit table, scrolls inside its own box
   instead of widening the page. This is the same trap that clipped this desk at
   320px earlier, so it is fixed for every grid here rather than one of them. ── */
.md-kpis > *,
.md-mods > *,
.md-soon-grid > *,
.g2 > *,
.mdc-main aside.md-sec > * { min-width:0; }

/* And it must beat the 1100px rule that sets min-width:240px on these. */
.mdc-main aside.md-sec > .md-sec-block { min-width:0 !important; }

/* The one thing that cannot shrink gets its own scroll box. */
.mdc-main aside.md-sec .md-audit-scroll { min-width:0; }

/* Long words in a tile must wrap rather than push the track wider: a role title
   like "Chief Operating Officer / Head of Operations (Volunteer)" is one long
   token to a layout engine. */
.mdc-attention-line, .mdc-inflight-line, .mdc-module-t, .mdc-soon-t,
.mdc-standing-t, .mdc-kpi-s { overflow-wrap:anywhere; }

/* ════════════════════════════════════════════════════════════════════
   INTERNAL APPLICATIONS: the chrome, raised to the board's standard
   ────────────────────────────────────────────────────────────────────
   The VP, 2026-07-29: "internal applications is nothing compared to the
   internal opportunity page".

   The cards were rebuilt earlier today from the Claude Design's own card. The
   surrounding chrome was not: the stat tiles, the filter row and the search
   field were still the flat 2026-07 treatment, so the surface read as two
   different pages stacked on each other.

   These values are css/dc-internal-jobs.css's, which are the design's: the same
   glass gradient, the same 16px radius, the same Cinzel figures, the same
   IBM Plex Mono eyebrow, the same 44px control height and 12px radius on the
   inputs. Written as literals because css/my-desk.css's tokens resolve to the
   same colours and this way the two pages cannot drift apart.

   Loads after css/my-desk.css, so it wins where the two disagree.
   ════════════════════════════════════════════════════════════════════ */

/* ── The four figures ────────────────────────────────────────────────
   The board's .ij-kpi: glass, 16px, and the count in Cinzel. */
#view-applications .mdi-stat {
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 16px;
  padding: 17px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .09));
  animation: scIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
#view-applications .mdi-stat:nth-child(1) { animation-delay: .06s; }
#view-applications .mdi-stat:nth-child(2) { animation-delay: .10s; }
#view-applications .mdi-stat:nth-child(3) { animation-delay: .14s; }
#view-applications .mdi-stat:nth-child(4) { animation-delay: .18s; }
/* The figure first and large, the label under it, which is the board's order.
   It was label-then-figure here, at 24px. */
#view-applications .mdi-stat-v {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
#view-applications .mdi-stat-k {
  margin-top: 7px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(242, 247, 238, .88);
}

/* ── The filter row and the search field ─────────────────────────────
   The board's segmented control: a padded track holding the options, rather
   than five loose outlined buttons. */
#view-applications .mdi-bar {
  gap: 10px;
  margin-top: 14px;
}
#view-applications .mdi-filters {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#view-applications .mdi-filters::-webkit-scrollbar { display: none; }
#view-applications .mdi-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(242, 247, 238, .88);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s cubic-bezier(.16, 1, .3, 1), color .2s cubic-bezier(.16, 1, .3, 1),
              border-color .2s cubic-bezier(.16, 1, .3, 1);
}
#view-applications .mdi-filter:hover {
  background: rgba(255, 255, 255, .06);
  color: #f2f7ee;
  border-color: transparent;
}
#view-applications .mdi-filter.is-on {
  background: rgba(212, 175, 55, .16);
  border-color: rgba(240, 200, 50, .34);
  color: #f2f7ee;
  font-weight: 400;
}
#view-applications .mdi-search {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #f2f7ee;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
}
#view-applications .mdi-search:focus { border-color: rgba(240, 200, 50, .34); }

/* ── The empty state ─────────────────────────────────────────────────
   The board's own: centred, its icon above the sentence, on glass. */
#view-applications .mdi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 44px 22px;
  margin-top: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 247, 238, .62);
  animation: cvIn .38s cubic-bezier(.16, 1, .3, 1) both;
}
#view-applications .mdi-empty > i { font-size: 22px; color: rgba(240, 200, 50, .55); }
#view-applications .mdi-empty strong { color: #f2f7ee; font-weight: 600; }

/* ── THE SUB-PAGES HAD NO GUTTERS  (2026-07-29) ──────────────────────
   Measured in Chrome: main.md-main computes to padding:0, because
   `.md-suite > main.md-main` sets it so and the overview's full bleed bands
   rely on that. The bands live inside .mdc-main, which carries its own
   22px/20px/70px. But every SUB-PAGE view is a SIBLING of .mdc-main, not a
   child, so the views got no padding at all and their content sat flush against
   both edges of the display. That is the "no fitting" the VP reported on the
   Internal Applications page.

   The same padding .mdc-main uses, so a sub-page and the overview have the same
   gutters, and the reading column above bounds them both at 1560px. */
.md-suite > main.md-main > .md-view { padding: 22px 20px 70px; }
@media (max-width: 640px) {
  .md-suite > main.md-main > .md-view { padding: 18px 14px 56px; }
}

/* ── A visually hidden label was VISIBLE  (2026-07-29) ───────────────
   my-desk.html marks the search field's label `u-visually-hidden`, and no
   stylesheet the page loads defined that class, so "Search applications"
   rendered as plain visible text beside the filter row. The same omission that
   broke the Internal Opportunities header, found by the same check once it was
   extended to cover ids as well as classes.

   The label must stay in the DOM for screen readers; it just must not be seen. */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}