/* THE ROOM'S CHROME, DEFINED ONCE.
   Both consumers load this file: the app through a <link> in the layout, and
   the project pages through a <link> in their own document. Before this file
   existed the project pages carried their own copy with the colours hardcoded,
   which is why they drifted from every other page.
   Palette: 06 Marketing Center/01 Brand Guidelines. */

@import url('/fonts/fonts.css');

:root {
  --amber: #ce905e;
  --gold: #ce905e;
  --gold-2: #dead6b;
  --charcoal: #383838;
  --cream: #f5ede3;
  --header: #383838;
  --nav: #2a2a2a;
  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-2: rgba(255, 255, 255, 0.74);
  --on-dark-3: rgba(255, 255, 255, 0.62);

  /* The one band, so a full-height page can subtract it. */
  --chrome-h: 68px;
}
@media (max-width: 600px) {
  :root { --chrome-h: 60px; }
}

/* ================= THE HEADER =================
   One band, on every page, and the only thing in the room that pins.

   Three columns with equal outer tracks: the navigation sits at the centre of
   the window whatever the brand or the account block are doing on either side.
   Flex put it wherever those two left room, so it moved from page to page. */

.rh {
  background: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 0 18px;
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
  font-family: 'Alexandria', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
[dir='rtl'] .rh {
  font-family: 'Tajawal', 'Alexandria', -apple-system, Tahoma, sans-serif;
}

/* ---------- left: the brand ---------- */

.rh-brand {
  justify-self: start;
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; min-width: 0;
}
.rh-logo { height: 34px; width: auto; display: block; }
.rh-brand .rh-sub {
  font-size: 10.5px; color: var(--on-dark-3); letter-spacing: 0.3px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
  padding-inline-start: 11px; white-space: nowrap;
}
.rh-brand:hover .rh-sub { color: var(--gold); }

/* ---------- centre: where you came from, where you are, where you go ------- */

/* THE BUTTONS DO NOT MOVE.
   Five fixed columns: previous name, back, current title, on, next name. The
   title column is the width of the longest title in the room, so the two
   buttons land on the same pixel on every page and a reader can click straight
   through the pack without re-aiming. */
.rh-mid {
  justify-self: center;
  min-width: 0;
  display: grid;
  grid-template-columns: 180px 34px 272px 34px 180px;
  align-items: center;
  gap: 10px;
}

.rh-side {
  min-width: 0;
  font-size: 12px; line-height: 1.3;
  color: var(--on-dark-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-side.start { text-align: end; }
.rh-side.end { text-align: start; }
.rh-side a { color: inherit; text-decoration: none; }
.rh-side a:hover { color: var(--gold); text-decoration: none; }

.rh-cur {
  min-width: 0; text-align: center;
  font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-cur .sub {
  display: block; font-size: 10.5px; font-weight: 400;
  color: var(--on-dark-3); margin-top: 1px;
}

.rh-arrow {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.88);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 18px; line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
a.rh-arrow:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(206, 144, 94, 0.14); text-decoration: none;
}
span.rh-arrow { opacity: 0.22; }

/* ---------- right: the account ---------- */

.rh-acts {
  justify-self: end;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.rh-who { text-align: end; line-height: 1.3; min-width: 0; }
.rh-who .n {
  font-size: 12.5px; color: var(--on-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-who .r { font-size: 10.5px; color: var(--on-dark-3); }
.rh-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.rh-btn {
  background: none; border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--on-dark-2); border-radius: 20px;
  padding: 6px 13px; font-size: 11.5px; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.rh-btn:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }

/* ---------- the avatar menu ----------
   The tab bar was an admin toolbar wearing the costume of reader navigation: a
   guest saw two links in a full band. Everything in it now hangs off the
   avatar. Built on <details> so it needs no client JavaScript. */

.rh-menu { position: relative; flex-shrink: 0; }
.rh-menu > summary { list-style: none; cursor: pointer; }
.rh-menu > summary::-webkit-details-marker { display: none; }
.rh-menu > summary::marker { content: ''; }
.rh-menu > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
.rh-menu[open] > summary { box-shadow: 0 0 0 2px rgba(206, 144, 94, 0.55); border-radius: 50%; }

.rh-pop {
  position: absolute;
  inset-block-start: calc(100% + 9px);
  inset-inline-end: 0;
  min-width: 216px;
  background: #fff;
  border: 0.5px solid rgba(56, 56, 56, 0.14);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(31, 29, 27, 0.2);
  padding: 6px;
  z-index: 300;
  animation: rhpop 0.14s ease;
}
@keyframes rhpop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.rh-pop-who {
  padding: 9px 11px 10px;
  border-bottom: 1px solid rgba(56, 56, 56, 0.08);
  margin-bottom: 5px;
}
.rh-pop-who .n { font-size: 13px; font-weight: 600; color: #1f1d1b; }
.rh-pop-who .e { font-size: 11.5px; color: #7a7570; margin-top: 1px; word-break: break-all; }

.rh-pop a,
.rh-pop button {
  display: block; width: 100%; text-align: start;
  padding: 8px 11px; border-radius: 8px;
  font-size: 13px; color: #1f1d1b; text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: background 0.12s;
}
.rh-pop a:hover, .rh-pop button:hover { background: #fbf3ea; text-decoration: none; }
.rh-pop .sep { height: 1px; background: rgba(56, 56, 56, 0.08); margin: 5px 4px; }
.rh-pop .lbl {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #a09a92; padding: 8px 11px 4px; font-weight: 600;
}
.rh-pop .out { color: #b3261e; }
.rh-pop .out:hover { background: #fdeceb; }

/* ---------- mobile ----------
   The neighbour names drop first, then the account name and the stage line.
   The avatar and the arrows never drop: a reader must always know who they are
   signed in as, be able to get out, and be able to move on. */

/* The columns collapse in step with what is hidden, so the buttons stay put
   at every width rather than jumping when a neighbour name disappears. */
@media (max-width: 1180px) {
  .rh-mid { grid-template-columns: 130px 34px 272px 34px 130px; }
}
@media (max-width: 980px) {
  .rh-side { display: none; }
  .rh-who { display: none; }
  .rh-mid { grid-template-columns: 34px 272px 34px; }
}
@media (max-width: 760px) {
  .rh-mid { grid-template-columns: 34px minmax(0, 1fr) 34px; }
}
@media (max-width: 600px) {
  .rh { min-height: 60px; padding: 0 12px; gap: 6px; }
  .rh-logo { height: 27px; }
  .rh-brand .rh-sub { display: none; }
  .rh-mid { gap: 8px; }
  /* ⛔ On a phone the centre is the two arrows and nothing else. The page title
     is the longest string in the band, and a long one pushed the outer tracks
     until the logo and the language button ran into each other. Every page the
     header appears on prints its own title immediately below, so nothing is
     lost by dropping it here. */
  .rh-cur { display: none; }
  /* Title gone, so the grid is just the two buttons, still centred. */
  .rh-mid { grid-template-columns: 34px 34px; gap: 14px; justify-content: center; }
  .rh-arrow { width: 32px; height: 32px; font-size: 17px; }
  .rh-btn { padding: 5px 10px; font-size: 11px; }
  .rh-av { width: 28px; height: 28px; font-size: 10px; }
}

/* ================= NOTHING ELSE PINS =================
   The written sections keep their step bar, it just scrolls with the page. */

.snav { position: static !important; top: auto !important; }

/* ================= THE EVIDENCE TABLE, ON PROJECT PAGES TOO =================
   The written sections have always carried this. The project pages carried
   nothing, so a reader had to notice a dotted underline in the prose to reach a
   document. Same table, same View and Download.
   The 1120px and 18px match the models' own .wrap, so the card lines up with
   the cards above it rather than sitting 2px inside them. */

.pev { max-width: 1120px; margin: 14px auto 0; padding: 0 18px; }
.pev-in {
  background: #fff;
  border: 0.5px solid rgba(56, 56, 56, 0.1);
  border-radius: 12px;
  padding: 15px 18px 16px;
}
.pev .ct {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: #7a7570; margin-bottom: 11px;
}
.pev .scroll-x { overflow-x: auto; }

.pev table.evt {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px;
  border: 1px solid #e4dcd0; border-radius: 9px; overflow: hidden; background: #fff;
}
.pev .evt th {
  background: #efe7dc; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  color: #7a7570; font-weight: 700; padding: 7px 10px; text-align: start;
}
.pev .evt td { padding: 8px 10px; border-top: 1px solid #f0e9df; vertical-align: middle; }
.pev .evt tr:hover td { background: #fdf9f4; }
.pev .evt-code {
  font-size: 11px; font-weight: 700; color: #7a4a18;
  font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%;
}
.pev .evt-name { font-size: 12.5px; font-weight: 500; display: block; color: #1f1d1b; }
.pev .evt-type { white-space: nowrap; width: 1%; }
.pev .evt-kind {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px; padding: 2px 6px;
  border-radius: 4px; background: #efe7dc; color: #55524e;
}
.pev .evt-size { font-size: 10px; color: #a09a92; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.pev .evt-act { white-space: nowrap; width: 1%; text-align: end; }
.pev .evt-view, .pev .evt-dl {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 11px; border-radius: 12px; text-decoration: none; transition: all 0.12s;
}
.pev .evt-view { border: 1px solid #e0d7ca; color: #383838; background: #fff; }
.pev .evt-view:hover { background: #fbf3ea; border-color: #ce905e; color: #7a4a18; }
.pev .evt-dl { border: 1px solid transparent; color: #7a7570; margin-inline-start: 4px; }
.pev .evt-dl:hover { color: #7a4a18; background: #fbf3ea; }

/* ---------- the pair at the foot ---------- */

.pmove {
  max-width: 1120px; margin: 14px auto 40px; padding: 0 18px;
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'Alexandria', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
.pmove a {
  display: inline-block; padding: 9px 16px; border-radius: 20px;
  font-size: 12.5px; text-decoration: none;
  border: 1px solid rgba(56, 56, 56, 0.18); color: #55524e; background: #fff;
}
.pmove a:hover { border-color: #ce905e; color: #7a4a18; }
.pmove a.on { background: #383838; border-color: #383838; color: #fff; }
.pmove a.on:hover { background: #2a2a2a; color: #fff; }
@media (max-width: 600px) {
  .pmove { flex-direction: column; }
  .pmove a { text-align: center; }
}

/* The chevron, and the half of them that face the other way. In Arabic both
   turn, because the page reads the other way round. */
/* The chevron is drawn pointing left. Each arrow points at the section it
   goes to, so in English back points left and on points right, and in Arabic
   both turn round: 11 < 10 > 9, because Arabic counts up leftwards.
   The rule that turned .flip svg as well as .rh-arrow svg turned the forward
   arrow twice, so both ended up facing the same way. */
.rh-arrow svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.rh-arrow .flip { display: block; transform: rotate(180deg); }

[dir='rtl'] .rh-arrow svg { transform: rotate(180deg); }   /* back points right */
[dir='rtl'] .rh-arrow .flip { transform: none; }
[dir='rtl'] .rh-arrow .flip svg { transform: none; }       /* on points left */