/* =============================================================
   LAYOUT · dossier  —  أبو محمد · Abu Mohammed
   -------------------------------------------------------------
   Loaded AFTER theme.css, which is loaded after the engine. This
   file changes WHERE THINGS ARE, not what colour they are:

     · the header is two rows — a utility strip over a full-width
       row of divided navigation links
     · the hero is a dark banner that runs edge to edge, with the
       photo small and the figures as a bordered data strip
     · section titles stay centred, but are NUMBERED and sit above
       a rule that spans the page
     · a CV reads as a record table: a bordered date cell in a
       gutter, a heavy rule over every entry, responsibilities in
       two columns
     · research reads as an index: numbered, striped, bordered rows
     · almost everything is a box — this look is built out of
       borders and alternating fills

   Compare people/shaima/layout.css, which does the opposite on
   purpose: a side rail, hanging numerals, and hairlines instead of
   boxes.

   THE PREFIX: every rule is html[data-layout="dossier"] — the
   value comes from site.json → look.layout.
   ============================================================= */

html[data-layout="dossier"] {
  --gutter-w: 132px;      /* the date column in the record tables */
  --rule-strong: 2px;     /* the heavy rule this look leans on */
}

/* =============================================================
   1 · A TWO-ROW HEADER
   -------------------------------------------------------------
   Row 1: the brand and the language/theme controls.
   Row 2: the navigation, spanning the full width, links divided
          by vertical rules like the tab bar of a records system.
   The engine's markup is a single flex row; wrapping it and giving
   the link list a full-width flex basis is what splits it in two.
   ============================================================= */
/* ---- THE TAB STRIP APPEARS FROM 1101px, NOT 1301px ----
   The engine hides .nav-links below 1301px and hands over to the burger.
   That number was measured for a header carrying the brand, TEN links and
   three action buttons all competing for one row.

   This layout is not that. The tabs get a row of their OWN here
   (flex-basis: 100%, order: 3), so they never compete with the brand or the
   buttons for width — and this site carries eight entries, not ten, because
   five routes are hidden. Measured with all eight rendered: they fit with no
   clipping and no spill at every width down to 880px, in both languages.

   Holding the old 1301px meant a 1280-wide laptop — an ordinary size — got
   the burger, and the strip only appeared if the reader zoomed out to 90%.
   1101px keeps a wide margin over the point where a tab starts to collapse
   (~1024px) and covers 1280, 1366, 1440 and up, plus a tablet in landscape. */
@media (min-width: 1101px) {
  html[data-layout="dossier"] .nav-links { display: flex; }
  html[data-layout="dossier"] .burger { display: none; }
}

/* ---- BELOW 1101px THE HEADER MUST STILL HAVE A WAY IN ----
   person.js sets actionsInNavRow, so main.js MOVES .nav-actions — the
   language toggle, the theme toggle and the burger — inside .nav-links, to
   sit at the end of the tab strip. The engine then hides .nav-links below
   1300px and expects its own .burger to take over… but the burger is now a
   CHILD of the thing being hidden, so it disappears with it.

   The result, measured at 1000px on the live site: the header rendered the
   monogram and NOTHING else. No tabs, no burger, no language toggle. Every
   width below 1101px — a non-maximised laptop window, any tablet, every
   phone — had no navigation at all; only the footer links could reach a
   section. Found 2026-09-13 while auditing the site for the assessors who
   had already withheld his grade for not finding his research pages. This
   predates the flatNav change (verified: the rendering at 1000px is
   byte-identical with flatNav on and off).

   So below the strip's breakpoint, keep .nav-links as a plain container so
   the relocated actions survive, and hide only the tabs inside it. */
@media (max-width: 1100px) {
  html[data-layout="dossier"] .nav-links {
    display: flex;
    flex-basis: auto;
    order: 0;
    margin-inline-start: auto;
    gap: 6px;
    border: 0;
    background: none;
  }
  /* the tabs themselves are what the burger replaces */
  html[data-layout="dossier"] .nav-links > a,
  html[data-layout="dossier"] .nav-links > .nav-group { display: none; }

  /* …leaving the actions, which are the whole point of keeping it */
  html[data-layout="dossier"] .nav-links > .nav-actions.in-nav-row {
    display: flex;
    padding-block: 0;
    border: 0;
  }
  html[data-layout="dossier"] .burger { display: grid; }
}

@media (min-width: 1101px) {
  html[data-layout="dossier"] .nav { height: auto; }
  html[data-layout="dossier"] .nav-inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }
  html[data-layout="dossier"] .nav .brand { padding-block: 12px; }
  html[data-layout="dossier"] .nav-actions { padding-block: 12px; }

  /* One even tab per route, spanning the whole bar — the reason the row
     exists is to read as a record system's tab strip, and a huddle of
     links at one end does not. */
  html[data-layout="dossier"] .nav-links {
    flex-basis: 100%;
    order: 3;
    gap: 0;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
  }
  html[data-layout="dossier"] .nav-links > a,
  html[data-layout="dossier"] .nav-links > .nav-group {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  html[data-layout="dossier"] .nav-links a {
    padding: 12px 10px;
    border-radius: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, .1);
    font-size: .86rem;
    letter-spacing: .01em;
    text-align: center;
    justify-content: center;
  }
  html[data-layout="dossier"] .nav-links a.active::after { bottom: 0; inset-inline: 0; }

  /* The grouped "Research" trigger is one of those tabs. */
  html[data-layout="dossier"] .nav-group { align-self: stretch; }
  html[data-layout="dossier"] .nav-group-btn {
    inline-size: 100%;
    block-size: 100%;
    padding: 12px 10px;
    border-radius: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, .1);
    font-size: .86rem;
    justify-content: center;
  }
  html[data-layout="dossier"] .nav-group-menu {
    top: 100%;
    border-radius: 0;
    border-block-start: var(--rule-strong) solid var(--gold);
  }
  html[data-layout="dossier"] .nav-group .nav-group-menu a { border-radius: 0; }
}

/* =============================================================
   2 · HERO — a full-bleed dark banner
   -------------------------------------------------------------
   The engine's hero sits on the page background. Here it is a slab:
   Executive Navy edge to edge, ivory type on it, and the figures
   turned into a bordered strip inside the banner rather than chips
   floating over the photo.
   ============================================================= */
html[data-layout="dossier"] .hero {
  padding-block: 54px 54px;
  background: var(--navy-900);
  border-block-end: 1px solid var(--gold);
  color: var(--on-brand);
}
/* The engine paints its washes in ::before; on a slab they only muddy it. */
html[data-layout="dossier"] .hero::before {
  background:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 76px 76px,
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 76px 76px;
  mask-image: none;
}
html[data-layout="dossier"] .hero h1 { color: var(--on-brand); }
html[data-layout="dossier"] .hero .role { color: var(--gold-soft); }
html[data-layout="dossier"] .hero-position { color: rgba(255, 255, 255, .78); }
html[data-layout="dossier"] .hero .lead { color: rgba(255, 255, 255, .78); }
html[data-layout="dossier"] .hero-badge {
  background: transparent;
  border-color: rgba(248, 247, 244, .3);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
}
html[data-layout="dossier"] .hero-orcid {
  background: transparent;
  border-color: rgba(248, 247, 244, .3);
  color: var(--on-brand);
}
/* §08 specifies the primary button as a Navy ground with light text —
   which is invisible on the Navy banner. The compliant reading on a
   brand slab is that same button inverted: the ivory ground, the Navy
   text. Gold is NOT used here: §03 caps it at a touch and does not let
   it carry an interactive state on its own. */
html[data-layout="dossier"] .hero-cta .btn-primary {
  background: var(--on-brand);
  color: var(--navy-900);
  border-color: var(--on-brand);
}
html[data-layout="dossier"] .hero-cta .btn-primary:hover {
  background: transparent;
  color: var(--on-brand);
}
html[data-layout="dossier"] .hero-cta .btn-ghost {
  background: transparent;
  border-color: rgba(248, 247, 244, .45);
  color: var(--on-brand);
}
html[data-layout="dossier"] .hero-cta .btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: transparent;
}

@media (min-width: 961px) {
  /* The portrait track is 295px, not 250px, and the 45px matters.
     .hero-portrait below carries a 44px padding-inline-start and a 1px
     divider, while .portrait-ring is a fixed 250px — so the column needs
     250 + 44 + 1 to hold it. At 250px the ring overflowed the column by
     45px on its outer side at EVERY width; it simply was not visible until
     the container's own margin shrank, and between 961px and 1200px the
     photograph ended up touching the edge of the window. */
  html[data-layout="dossier"] .hero-grid {
    grid-template-columns: minmax(0, 1fr) 295px;
    gap: 44px;
    align-items: center;
  }
  /* No photograph supplied — the banner runs full width rather than
     holding 250px open for a portrait that is not coming. */
  html[data-layout="dossier"] .hero-grid.no-portrait {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-layout="dossier"] .hero-portrait {
    border-inline-start: 1px solid rgba(255, 255, 255, .16);
    padding-inline-start: 44px;
  }
}
html[data-layout="dossier"] .portrait-ring { inline-size: min(250px, 70vw); }
html[data-layout="dossier"] .portrait-ring::after { border-color: var(--gold); }
html[data-layout="dossier"] .portrait-inner { background: rgba(255, 255, 255, .06); }

/* The figures strip: bordered cells inside the banner. */
html[data-layout="dossier"] .float-chip {
  background: transparent;
  border: 1px solid rgba(248, 247, 244, .24);
  border-inline-start-width: 2px;
  border-inline-start-color: var(--gold);
  color: var(--on-brand);
}
html[data-layout="dossier"] .float-chip .fi {
  background: transparent;
  border-color: rgba(248, 247, 244, .3);
  color: var(--gold-soft);
}
html[data-layout="dossier"] .float-chip span { color: rgba(248, 247, 244, .7); }

/* =============================================================
   3 · STATS — a light band under the dark banner
   -------------------------------------------------------------
   The theme paints this band dark. Under a dark hero that would be
   one long slab, so the layout flips it back to light and gives it
   hard borders instead.
   ============================================================= */
html[data-layout="dossier"] .stats {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  border-block-start: none;
}
html[data-layout="dossier"] .stat .num { color: var(--accent); }
html[data-layout="dossier"] .stat .num .suffix { color: var(--gold); }
html[data-layout="dossier"] .stat .lbl {
  color: var(--text-soft);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: var(--eyebrow-case);
}
@media (min-width: 961px) {
  html[data-layout="dossier"] .stat { border-inline-start: 1px solid var(--border); }
  html[data-layout="dossier"] .stat:first-child { border-inline-start: none; }
}

/* =============================================================
   4 · SECTION TITLES — numbered, over a full-width rule
   -------------------------------------------------------------
   Counters are per-list rather than per-page: a hidden page is out
   of the box tree, so a document-wide counter would only ever see
   the visible one. Numbering therefore goes on the ROWS below,
   where it earns its keep, and the heading gets the rule.
   ============================================================= */
html[data-layout="dossier"] .section { padding-block: 60px; }
html[data-layout="dossier"] .section > .container > .section-head:first-child {
  margin-bottom: 36px;
  padding-block-end: 24px;
  border-block-end: 1px solid var(--border);
}
html[data-layout="dossier"] .section-head .rule { margin-block-start: 14px; }
html[data-layout="dossier"] .section-head-sub {
  margin-block: 46px 24px;
  padding-block-end: 14px;
  border-block-end: var(--rule-strong) solid var(--accent);
  text-align: start;
}
html[data-layout="dossier"] .section-head-sub .rule { display: none; }

/* =============================================================
   5 · THE CV — a record table
   -------------------------------------------------------------
   Every entry: a heavy rule across the top, a bordered date cell
   in the gutter, the role beside it, and the responsibilities in
   two columns. Entries are numbered with a CSS counter, which the
   engine's markup does not carry.
   ============================================================= */
html[data-layout="dossier"] .tl-card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-layout="dossier"] .tl-card::before { display: none; }
html[data-layout="dossier"] .timeline {
  padding-inline-start: 0;
  counter-reset: rec;
}
html[data-layout="dossier"] .timeline::before { display: none; }
html[data-layout="dossier"] .tl-dot { display: none; }

html[data-layout="dossier"] .tl-item {
  counter-increment: rec;
  margin-bottom: 0;
  padding: 24px 0 28px;
  border-block-start: var(--rule-strong) solid var(--text);
}
html[data-layout="dossier"] .tl-item + .tl-item { border-block-start-color: var(--border); }

@media (min-width: 820px) {
  html[data-layout="dossier"] .tl-head {
    display: grid;
    grid-template-columns: var(--gutter-w) minmax(0, 1fr);
    column-gap: 26px;
    align-items: start;
  }
  html[data-layout="dossier"] .tl-head > h3 { grid-column: 2; grid-row: 1; }
  html[data-layout="dossier"] .tl-period { grid-column: 1; grid-row: 1; }
  html[data-layout="dossier"] .tl-org,
  html[data-layout="dossier"] .tl-intro,
  html[data-layout="dossier"] .tl-points,
  html[data-layout="dossier"] .tl-note,
  html[data-layout="dossier"] .tl-item > .cert-btn {
    margin-inline-start: calc(var(--gutter-w) + 26px);
  }
  /* The record number, set in the gutter under the date. */
  html[data-layout="dossier"] .tl-head::before {
    content: counter(rec, decimal-leading-zero);
    grid-column: 1;
    grid-row: 2;
    margin-block-start: 8px;
    font-family: var(--ff-num);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--accent) 40%, transparent);
  }
  /* Responsibilities read as a two-column list, not a long ladder. */
  html[data-layout="dossier"] .tl-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
}
html[data-layout="dossier"] .tl-period {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-inline-start: var(--rule-strong) solid var(--accent);
  border-radius: 0;
  background: var(--surface-2);
  white-space: normal;
  /* The date sits in a fixed gutter with the record number directly beneath
     it. A long value used to wrap out of the badge and print over that
     number; now it is held inside the gutter and breaks cleanly instead. */
  max-width: var(--gutter-w);
  overflow-wrap: anywhere;
}
/* the "current" role is marked by its gold edge and its heading colour
   — see theme.css §03. No fill: the manual does not allow one. */
html[data-layout="dossier"] .tl-period.current { border-inline-start-color: var(--gold); }
html[data-layout="dossier"] .tl-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: var(--rule-strong) solid var(--gold);
  border-radius: 0;
}

/* Training: bordered cells in a grid, not a loose row of pills. */
html[data-layout="dossier"] .chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--border);
  border-inline-start: 1px solid var(--border);
}
html[data-layout="dossier"] .chip {
  border: none;
  border-block-end: 1px solid var(--border);
  border-inline-end: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  padding: 16px 18px;
  align-items: flex-start;
}

/* =============================================================
   6 · ABOUT — a three-column dossier sheet
   ============================================================= */
@media (min-width: 900px) {
  html[data-layout="dossier"] .about-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--border);
  }
  html[data-layout="dossier"] .about-grid > .card {
    border: none;
    border-radius: 0;
    padding: 30px 32px;
  }
  html[data-layout="dossier"] .about-grid > .card + .card {
    border-inline-start: 1px solid var(--border);
    background: var(--surface-2);
  }
}
html[data-layout="dossier"] .about-grid > .card::before { display: none; }
html[data-layout="dossier"] .card-title {
  padding-block-end: 12px;
  margin-block-end: 18px;
  border-block-end: 1px solid var(--border);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: var(--eyebrow-case);
}
html[data-layout="dossier"] .card-title .ci { inline-size: 30px; block-size: 30px; }
html[data-layout="dossier"] .card-title .ci svg { inline-size: 16px; block-size: 16px; }

/* The personal-details card as a striped table. */
html[data-layout="dossier"] .facts { gap: 0; }
html[data-layout="dossier"] .fact {
  gap: 0;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
html[data-layout="dossier"] .fact:nth-child(odd) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-layout="dossier"] .fact .fi { display: none; }
html[data-layout="dossier"] .fact .fx {
  display: grid;
  /* The LABEL is the fixed side and the VALUE is the one that flexes.
     It used to be the other way round — `minmax(0, 1fr) auto` — which let a
     long value take all the width it wanted and crushed the label to nothing:
     «سنوات الخبرة» rendered as «سنو» and «التخصص» as «التخص», with the value
     printing over the top of both. This is the "format the table" note of
     2026-08-23. The floor is wide enough for the longest label in either
     language; the value wraps instead. */
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
  gap: 14px;
  inline-size: 100%;
  align-items: baseline;
}
html[data-layout="dossier"] .fact .fx b { text-align: end; }
html[data-layout="dossier"] .fact .fx small { line-height: 1.35; }

/* =============================================================
   7 · SKILLS — a dense instrument panel (the bars stay)
   ============================================================= */
@media (min-width: 900px) {
  html[data-layout="dossier"] #page-skills .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
  }
  html[data-layout="dossier"] #page-skills .grid-3 > .card {
    border: none;
    border-block-end: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
    padding: 26px 28px;
  }
}
html[data-layout="dossier"] .skill {
  margin-bottom: 0;
  padding: 10px 8px;
}
html[data-layout="dossier"] .skill:nth-child(even) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-layout="dossier"] .skill .top { font-size: .92rem; }

/* =============================================================
   8 · RESEARCH — a numbered index
   ============================================================= */
html[data-layout="dossier"] #page-publications .grid-2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-start: 1px solid var(--border);
}
html[data-layout="dossier"] .pub-group { margin-block-end: 40px; }
html[data-layout="dossier"] .pub-group-t {
  border-block-end: var(--rule-strong) solid var(--accent);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: var(--eyebrow-case);
}
html[data-layout="dossier"] .pub {
  padding: 18px 16px;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  align-items: flex-start;
}
html[data-layout="dossier"] .pub::before { display: none; }
html[data-layout="dossier"] .pub:nth-child(even) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-layout="dossier"] .pub:hover { background: var(--surface-2); }
html[data-layout="dossier"] .pub .pn {
  inline-size: 38px; block-size: 38px;
  border-radius: 0;
  font-size: .9rem;
}
html[data-layout="dossier"] .pub h3 { font-size: 1rem; font-weight: 600; }

/* =============================================================
   9 · PROPOSAL · JOURNEY — bordered, numbered panels
   ============================================================= */
html[data-layout="dossier"] .prop-list {
  gap: 0;
  border-block-start: 1px solid var(--border);
}
html[data-layout="dossier"] .prop-item {
  border: none;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 16px;
  padding-inline-start: 0;
}
html[data-layout="dossier"] .prop-item:nth-child(even) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html[data-layout="dossier"] .prop-item:hover { box-shadow: none; background: var(--surface-2); }
html[data-layout="dossier"] .prop-n {
  border-radius: 0;
  inline-size: 3rem; block-size: 2.4rem;
}

html[data-layout="dossier"] .jr-card {
  border: 1px solid var(--border);
  border-block-start: var(--rule-strong) solid var(--accent);
  border-radius: 0;
  padding: 0;
  margin-block-end: 18px;
}
html[data-layout="dossier"] .jr-head {
  margin: 0;
  padding: 16px 20px;
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
  align-items: center;
}
html[data-layout="dossier"] .jr-body { padding: 20px; margin: 0; }
html[data-layout="dossier"] .jr-card > .cert-btn { margin: 0 20px 20px; }

/* =============================================================
   10 · COMMUNITY · CONTACT — bordered cells
   ============================================================= */
@media (min-width: 760px) {
  html[data-layout="dossier"] #page-community .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
  }
  html[data-layout="dossier"] #page-community .grid-3 > .comm-card {
    border: none;
    border-block-end: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
    padding: 26px 28px;
  }
  html[data-layout="dossier"] .contact-grid {
    gap: 0;
    border-block-start: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
  }
  html[data-layout="dossier"] .contact-grid > .contact-card {
    border: none;
    border-block-end: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
    padding: 24px 26px;
  }
}
html[data-layout="dossier"] .comm-card::before,
html[data-layout="dossier"] .contact-card::before { display: none; }
html[data-layout="dossier"] .contact-card:hover { background: var(--surface-2); }

/* =============================================================
   11 · CALL TO ACTION · FOOTER · EMPTY STATES
   ============================================================= */
html[data-layout="dossier"] .cta-band {
  border-radius: 0;
  border-block-start: var(--rule-strong) solid var(--gold);
  margin-block-start: 52px;
  padding: 44px 32px;
}
html[data-layout="dossier"] .sec-next {
  border-block-start: 1px solid var(--border);
  padding-block-start: 22px;
}

html[data-layout="dossier"] .cms-empty {
  border-style: solid;
  border-radius: 0;
  border-block-start-width: var(--rule-strong);
  border-block-start-color: var(--accent);
  background: var(--surface-2);
}

html[data-layout="dossier"] .footer-inner {
  align-items: flex-start;
  padding-block-end: 24px;
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
html[data-layout="dossier"] .footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 30px;
}
@media (min-width: 900px) {
  html[data-layout="dossier"] .footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================================================
   12 · SMALL SCREENS
   ============================================================= */
@media (max-width: 819px) {
  html[data-layout="dossier"] .tl-head { display: flex; }
  html[data-layout="dossier"] .tl-points { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   13 · LOOSE ENDS
   ============================================================= */

/* In dark mode the Navy banner and the Charcoal page ground are close
   enough that the hero stops reading as a banner. Lifting it uses the
   ramp's next step up — still Executive Navy, not a colour from
   outside §02. */
html[data-layout="dossier"][data-theme="dark"] .hero { background: #12305C; }

/* The theme draws a 3px accent bar across the top of a .card on hover.
   Wherever this layout has already turned cards into table cells or
   panels with their own header strip, that bar lands in the wrong
   place — so it is switched off there. */
html[data-layout="dossier"] #page-skills .grid-3 > .card::before,
html[data-layout="dossier"] .jr-card::before,
html[data-layout="dossier"] .dl-card::before,
html[data-layout="dossier"] .blog-card::before { display: none; }

/* Documents, blog posts and file cards: bordered cells, like the rest. */
@media (min-width: 760px) {
  html[data-layout="dossier"] .dl-grid,
  html[data-layout="dossier"] .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block-start: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
  }
  html[data-layout="dossier"] .dl-grid > .dl-card,
  html[data-layout="dossier"] .blog-grid > .blog-card {
    border: none;
    border-block-end: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
  }
}
html[data-layout="dossier"] .dl-cat { border-block-end: var(--rule-strong) solid var(--accent); }
html[data-layout="dossier"] .cert-row { text-align: center; }


/* =============================================================
   14 · REVIEW FIXES  (audit of the full page matrix, 2026-08-22)
   -------------------------------------------------------------
   Eight reviewers read all 13 pages in both languages and both
   colour schemes. Everything below is a defect they named, kept in
   its own section so it is obvious what was a considered decision
   and what was a correction.
   ============================================================= */

@media (min-width: 1101px) {
  /* --- The tab row was not evenly divided: the "Research" cell came
     out ~15% narrower than the nine plain links, so the divider grid
     was visibly irregular. A grid with equal auto-columns cannot get
     this wrong the way `flex: 1 1 0` did. -------------------------- */
  html[data-layout="dossier"] .nav-links {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  html[data-layout="dossier"] .nav-links > a,
  html[data-layout="dossier"] .nav-links > .nav-group { flex: none; }

  /* --- The grouped "Research" tab was dark green on the dark green
     bar — the engine tints that trigger with --accent mixed into
     --text, which is a DARK text colour. Unreadable exactly on the
     three pages the tab leads to. ------------------------------- */
  html[data-layout="dossier"] .nav-group.is-active > .nav-group-btn,
  html[data-layout="dossier"] .nav-group:has(.nav-group-menu a.active) > .nav-group-btn,
  html[data-layout="dossier"] .nav-group.is-open > .nav-group-btn,
  html[data-layout="dossier"] .nav-group-btn[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
  }
  /* …and give that tab the same active marker the plain tabs get. */
  html[data-layout="dossier"] .nav-group.is-active > .nav-group-btn,
  html[data-layout="dossier"] .nav-group:has(.nav-group-menu a.active) > .nav-group-btn {
    box-shadow: inset 0 -3px 0 var(--gold);
  }

  /* --- The brand strapline was ellipsised mid-word while the strip
     beside it was empty: the engine truncates it to 26ch for a
     one-row header this layout does not have. ------------------- */
  html[data-layout="dossier"] .nav .brand .btxt small {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  /* --- Header, content and footer each measured differently, so
     nothing lined up down the page edges. One container width. -- */
  html[data-layout="dossier"] .nav .container { max-width: var(--maxw); }
}

/* --- "A heavy rule over each entry" only held for the first record;
   02 and 03 got a pale hairline, so the record table stopped reading
   as a table after row one. ------------------------------------- */
html[data-layout="dossier"] .tl-item,
html[data-layout="dossier"] .tl-item + .tl-item {
  border-block-start: var(--rule-strong) solid color-mix(in srgb, var(--accent) 55%, var(--border));
}
html[data-layout="dossier"] .tl-item:first-child { border-block-start-color: var(--text); }

/* --- The record numbers the whole layout is built around were at
   about 2.2:1 against the page. They are a label now, not a ghost —
   and they are positioned out of the flow, because occupying a grid
   row inside .tl-head was pushing an ~80px void between every job
   title and its own employer line. ----------------------------- */
html[data-layout="dossier"] .tl-item { position: relative; }
@media (min-width: 820px) {
  html[data-layout="dossier"] .tl-head::before {
    position: absolute;
    inset-block-start: 62px;
    inset-inline-start: 0;
    margin: 0;
    color: var(--muted);
    font-size: 1.5rem;
  }
  html[data-layout="dossier"] .tl-head { display: grid; grid-template-rows: auto; }
}

/* --- Three cards in a two-column bordered grid left an open L with
   a borderless notch. The last card spans the row when the count is
   odd, so the frame always closes — whatever the count. --------- */
@media (min-width: 900px) {
  html[data-layout="dossier"] #page-skills .grid-3 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  html[data-layout="dossier"] #page-community .grid-3 > .comm-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-layout="dossier"] .contact-grid > .contact-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- The About sheet's two columns did not run to the same depth, so
   the tinted column stopped short of the card's own bottom edge. -- */
@media (min-width: 900px) {
  html[data-layout="dossier"] .about-grid { align-items: stretch; }
}

/* --- In dark mode the "light shelf" under the banner came out DARKER
   than the banner, inverting the tonal step the layout is built on. */
html[data-layout="dossier"][data-theme="dark"] .stats { background: var(--surface-2); }

/* --- The two figure cells were narrower than their own labels, so
   every caption wrapped onto two lines and the pair stopped matching.
   Stacked, they fit and they align with the frame above. -------- */
@media (min-width: 961px) {
  /* The ring keeps an EXPLICIT width here.
     This block used to say `inline-size: auto`, written while he had no
     photograph, and it had therefore never been exercised with one. The
     engine gives .portrait-ring `width: min(340px, 74vw)`; `auto` replaced
     that, and because .hero-portrait is a grid item with justify-self:
     center it shrink-wraps its content — so `auto` resolved against a
     .portrait-inner that is itself sized as 100% of the ring. The ring
     came out 24px square and the loaded image painted into a 0x0 box.
     `grid-template-columns` was inert too: the element computes to
     display:block, so it was never a grid. */
  html[data-layout="dossier"] .hero-portrait { gap: 10px; }
  html[data-layout="dossier"] .portrait-ring { margin-bottom: 22px; }
}

/* --- The proposal index's number badge was flush on (and covering)
   the row border, and stretched out of square. ----------------- */
html[data-layout="dossier"] .prop-item { padding-inline: 16px; }
html[data-layout="dossier"] .prop-n { inline-size: 2.6rem; block-size: 2.6rem; }

/* --- A soft blurred glow sat in the corner of the CTA band —
   the only blur on an otherwise flat, hard-edged site. --------- */
html[data-layout="dossier"] .cta-band::before { display: none; }

/* --- The subsection heading was a large start-aligned display line
   where every other label on this site is small, boxed and upper. - */
html[data-layout="dossier"] .section-head-sub h2 {
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: var(--eyebrow-case);
  color: var(--text-soft);
}

/* --- The footer stranded its link columns at one end with a wide
   dead gap before the brand. ----------------------------------- */
html[data-layout="dossier"] .footer-inner { gap: 36px; }
html[data-layout="dossier"] .footer-links { flex: 1 1 480px; }


/* =============================================================
   15 · THE SHARED ATOMS
   -------------------------------------------------------------
   The side-by-side review found that the chrome of the two sites was
   genuinely different but the reusable atoms underneath were the same
   component recoloured. Most of the un-sharing was done on the other
   site (people/shaima/layout.css §15) — deliberately, so this one
   keeps the engine's own vocabulary and the difference lands as a
   difference of components rather than of palette.

   The three below are the ones worth changing HERE, because they are
   the places where this look can say something the other cannot.
   ============================================================= */

/* --- The next-page control was the same bordered pill on both sites,
   sitting in the same slot with the same icon+label+arrow. Here it
   becomes the full-width footer of the record: label at one end, the
   arrow at the other, like the pagination of a report. ----------- */
html[data-layout="dossier"] .sec-next {
  border-block-start: var(--rule-strong) solid var(--text);
  padding-block-start: 0;
  margin-block-start: 40px;
}
html[data-layout="dossier"] .sec-next .btn {
  flex: 1 1 100%;
  justify-content: space-between;
  border: none;
  border-radius: 0;
  padding: 16px 4px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: var(--eyebrow-case);
}
html[data-layout="dossier"] .sec-next .btn:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  transform: none;
}

/* --- The page-header stack ended with a short accent dash on both
   sites — the clearest single fingerprint of one builder. Here the
   header closes with a full-width rule instead, which it already had,
   so the dash is redundant. -------------------------------------- */
html[data-layout="dossier"] .section-head .rule { display: none; }
html[data-layout="dossier"] .section-head .eyebrow { margin-block-end: 14px; }


/* =============================================================
   16 · BRAND MANUAL RECONCILIATION
   -------------------------------------------------------------
   The layout was written before the brand guide arrived. These are
   the places where its choices had to give way to a rule in the
   manual rather than to a preference.
   ============================================================= */

/* §05: the footer carries the same wordmark, ivory on Navy — the
   manual's second permitted placement — and no tile. */
html[data-layout="dossier"] .footer .brand .mono { display: none; }
html[data-layout="dossier"] .footer .brand .btxt {
  font-family: var(--ff-display);
  padding-block-end: 7px;
  border-block-end: 1px solid var(--gold);
}

/* §09: "خط ذهبي رفيع كعنصر توقيع بصري متكرر" — a THIN gold line as the
   repeating visual signature. The layout had three pixels. */
html[data-layout="dossier"] .footer { border-top: 1px solid var(--gold); }

/* §03: gold may not carry an interactive state on its own, and may not
   be a fill. The active tab keeps its gold rule — a rule is permitted,
   and the tab also turns ivory, so the state is carried twice — but the
   rule comes down to the manual's weight. */
@media (min-width: 1101px) {
  html[data-layout="dossier"] .nav-links a.active::after { height: 2px; }
  html[data-layout="dossier"] .nav-group.is-active > .nav-group-btn,
  html[data-layout="dossier"] .nav-group:has(.nav-group-menu a.active) > .nav-group-btn {
    box-shadow: inset 0 -2px 0 var(--gold);
  }
}

/* §08: "بدون ظلال زخرفية — تصميم مسطّح بالكامل". The layout still put a
   shadow under the scrolled header. */
html[data-layout="dossier"] .nav.scrolled { box-shadow: none; }

/* §02/§10: the record rules were tinted with the accent; with Navy as
   the accent that is already inside the palette, but the emphasis order
   the manual implies is Charcoal for structure, gold for the one thing
   that matters. The current record keeps the gold. */
html[data-layout="dossier"] .tl-item,
html[data-layout="dossier"] .tl-item + .tl-item {
  border-block-start: 2px solid var(--border);
}
html[data-layout="dossier"] .tl-item:first-child { border-block-start-color: var(--navy-900); }
html[data-layout="dossier"] .tl-item:has(.tl-period.current) { border-block-start-color: var(--gold); }

/* §06: the record number is a figure, not a filled badge. */
@media (min-width: 820px) {
  html[data-layout="dossier"] .tl-head::before {
    color: var(--muted);
    font-family: var(--ff-num);
    font-weight: 500;
  }
}

/* §08: the "success" tint the engine washes over a hovered index row was
   a colour outside the palette. Platinum Grey does the same job. */
html[data-layout="dossier"] .pub:hover,
html[data-layout="dossier"] .prop-item:hover,
html[data-layout="dossier"] .contact-card:hover { background: var(--surface-2); }
html[data-layout="dossier"] .pub:nth-child(even),
html[data-layout="dossier"] .prop-item:nth-child(even),
html[data-layout="dossier"] .fact:nth-child(odd),
html[data-layout="dossier"] .skill:nth-child(even) { background: var(--bg-alt); }

/* §04: the section number and the boxed eyebrow are labels, so they take
   the text face, not the Kufi display face which is for headings only. */
html[data-layout="dossier"] .section-head .eyebrow { font-family: var(--ff); }


/* --- 01 · The header brand carries the NAME only ------------------
   Asked for 2026-08-23: the role line under «ناصر البادي» in the header is
   gone. The engine already treats it as optional — it hides `.btxt small`
   below 1420px — so this only extends that to every width. The role still
   appears where a reader looks for it: the hero, the footer and the <title>. */
html[data-layout="dossier"] .nav .brand .btxt small { display: none; }

/* --- 02 · Those controls now sit in the footer -------------------
   main.js moves the element itself (see placeNavActions), so it arrives
   carrying the header's styling; this gives it the footer's. */
html[data-layout="dossier"] .nav-actions.in-footer {
  display: flex;
  gap: 8px;
  margin-block-start: 14px;
  justify-content: center;
}
html[data-layout="dossier"] .footer-bottom { text-align: center; }

/* --- 02 · The language and theme controls, at the end of the tab row ---
   main.js moves the element itself into .nav-links (placeNavActions), so it
   becomes one more cell in the strip. `flex: 0` keeps it from being sized as
   an even tab like the routes are — it is a pair of buttons, not a section. */
html[data-layout="dossier"] .nav-links > .nav-actions.in-nav-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px;
  border-inline-end: none;
}
html[data-layout="dossier"] .nav-actions.in-nav-row .icon-btn { border-color: rgba(255,255,255,.22); }

/* --- 01 · A monogram-only header ---------------------------------
   He asked on 2026-08-23 for «ناصر البادي» to come out of the header, and
   his name is already the page's <h1> immediately below it, so the header
   was repeating itself. But theme.css §executive hides the monogram in the
   nav — that rule assumed the wordmark was carrying the identity — so
   removing the name left the header carrying nothing at all. The mark comes
   back in the name's place. */
html[data-layout="dossier"] .nav .brand .mono { display: grid; }
html[data-layout="dossier"] .nav .brand { gap: 0; }

/* ---- ROUTES HE DOES NOT PUBLISH MUST NOT PRINT EITHER ----
   site.json hides "blog" and "media" from the navigation, and showFilesPage
   is false, so #blog, #media and #downloads are unreachable on screen and
   still carry their "coming soon" placeholder text. The engine's print rule
   forces EVERY .page visible so the whole site prints — which dragged those
   three unfinished sections onto paper, including the Files page promising
   documents that are not there.

   Found 2026-09-13 auditing for the assessors. A printed portfolio that ends
   in three empty "coming soon" pages reads as unfinished work.

   ⚠ If he ever publishes blog/media/downloads, take them OUT of this rule as
   well as out of site.json's hidePages — otherwise they will be live on
   screen and silently missing from print. */
@media print {
  html[data-layout="dossier"] #page-blog,
  html[data-layout="dossier"] #page-media,
  html[data-layout="dossier"] #page-downloads { display: none !important; }
}