/* ============================================================================
   PNA Audit staff site — layered on assets/style.css (Folio).

   The internal site is staff documentation, not a shop: no hero pitch, no calls to
   action. What it gets instead of selling is presence — a desk-head that opens each
   page like a file cover, panels with drawn rules, numbered office notes, and a
   footer that signs off. Every token comes from style.css, so dark mode and
   reduced motion are inherited, not reimplemented.

   Mobile first, like style.css: every rule that adds columns is a min-width query.
   ============================================================================ */

/* ── The internal strip ─────────────────────────────────────────────────────
   A slim navy band above the masthead. It scrolls away while the masthead
   stays; its job is done the moment it has been seen. The oxide dot is the
   one drop of the accent colour, marking "internal" the way a stamp would. */
.internal-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px max(20px, calc((100% - 1200px) / 2 + 20px));
  background: var(--navy-2); color: color-mix(in srgb, var(--navy-ink) 82%, transparent);
  font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.internal-strip-right { display: inline-flex; align-items: center; gap: 7px; }
.internal-strip-right::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--oxide) 78%, var(--navy-ink));
}
@media (max-width: 519px) { .internal-strip span:last-child { display: none; } }

/* ── The desk head ──────────────────────────────────────────────────────────
   Each page opens like a file cover: kicker, a serif title with real weight,
   a measured lede, and the ruled-paper wash the commercial hero uses — here
   it reads as a working document's front sheet rather than a billboard. */
.desk-head {
  position: relative; overflow: hidden;
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(860px 320px at 14% -10%, color-mix(in srgb, var(--oxide) 6%, transparent), transparent 60%),
    radial-gradient(720px 300px at 88% -6%, color-mix(in srgb, var(--navy) 7%, transparent), transparent 58%),
    repeating-linear-gradient(to bottom, transparent 0 31px,
      color-mix(in srgb, var(--rule-2) 32%, transparent) 31px 32px);
}
.desk-head::before {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--oxide));
  opacity: .85;
}
.desk-head > * { position: relative; }
@media (min-width: 760px) { .desk-head { padding: 64px 0 44px; } }

.desk-head h1 {
  font: 700 clamp(27px, 4vw, 40px)/1.12 var(--serif); font-variation-settings: "opsz" 60;
  letter-spacing: -.02em; margin: 10px 0 14px; text-wrap: balance; color: var(--ink);
}
.desk-head .desk-lede {
  max-width: 74ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0;
}
.desk-head .factbar { margin-top: 18px; }

/* ── Panels ─────────────────────────────────────────────────────────────────
   The working objects: a card with a drawn head-bar, used for the build panel
   and any other boxed working area. The head bar is the ledger idea kept, with
   the elevation and radius brought in line with the commercial cards. */
.ledger {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--navy); border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
}
.ledger-head {
  padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
  font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.ledger-head .ic { width: 16px; height: 16px; color: var(--navy); }
.ledger-body { padding: 20px 18px; }
@media (min-width: 600px) { .ledger-body { padding: 24px 22px; } }

/* The two working panels of the key desk, side by side where there is room.
   The build panel is slightly the elder: it is the reason most people came. */
.desk-panels { display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .desk-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; } }

/* ── Build facts ────────────────────────────────────────────────────────────
   The current build's vitals, set like a stamp block: label over value, ruled. */
.buildfacts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; margin: 16px 0 0;
}
.buildfacts div {
  background: var(--surface-2); padding: 12px 10px 10px; text-align: center;
}
.buildfacts b {
  display: block; font: 700 17px/1.2 var(--serif); letter-spacing: -.02em; color: var(--navy);
}
.buildfacts span {
  font: 600 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Quick links ────────────────────────────────────────────────────────────
   The three places a new machine's setter-upper needs, as quiet cards that
   answer with one click. Ghost rules, not buttons. */
.quicklinks { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 700px) { .quicklinks { grid-template-columns: repeat(3, 1fr); } }
.quicklinks a {
  display: flex; gap: 13px; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--lift-1); padding: 16px;
  transition: transform .22s var(--ease), box-shadow var(--t), border-color var(--t);
}
.quicklinks a:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--rule-2); }
.quicklinks .fic { margin: 0; flex: none; }
.quicklinks b { display: block; font: 600 15px/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.quicklinks span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }

/* ── Seat pips ──────────────────────────────────────────────────────────────
   One pip per allowed device, filled while a computer holds a seat. A glance
   answers "how many machines is this key on", which is the question the firm
   actually asks about a licence. */
.pips { display: inline-flex; gap: 6px; vertical-align: middle; }
.pips i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: transparent;
}
.pips i.on { background: var(--navy); border-color: var(--navy); }
.pips i.hot { background: var(--warn); border-color: var(--warn); }

/* ── Licence meta row ───────────────────────────────────────────────────────
   The quiet facts under a keyplate: issued to, seats, expiry. */
.licmeta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13.5px; color: var(--ink-3);
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--rule);
}
.licmeta span { display: inline-flex; align-items: center; gap: 7px; }
.licmeta .ic { width: 15px; height: 15px; }

/* ── Portal sign-in aside ───────────────────────────────────────────────────
   The "how this works" panel beside the email form. */
.signin-aside {
  border-left: 3px solid var(--navy);
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 16px 18px; margin-top: 22px;
  font-size: 14.5px; color: var(--ink-2);
}
.signin-aside p { margin: 0 0 10px; }
.signin-aside p:last-child { margin-bottom: 0; }
.signin-aside ol { margin: 0; padding-left: 20px; }
.signin-aside li { margin-bottom: 6px; }
.signin-aside li::marker { color: var(--oxide); }

/* ── Office notes ───────────────────────────────────────────────────────────
   The index page's housekeeping, as numbered cards: a plate with the note's
   number, the heading in ink, the rest in the working voice. Two columns
   where there is room, one on a phone. */
.office-grid { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 800px) { .office-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
.office-grid .note-card {
  position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--lift-1); padding: 18px 18px 16px 58px;
}
.office-grid .note-card::before {
  counter-increment: note; content: counter(note, decimal-leading-zero);
  position: absolute; left: 14px; top: 16px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--navy);
  border: 1px solid var(--navy); border-radius: var(--r);
  font: 700 11.5px/1 var(--mono);
}
.office-notes { counter-reset: note; list-style: none; margin: 0; padding: 0; }
.office-notes li { margin: 0; }
.office-grid b, .office-grid strong {
  display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; margin-bottom: 4px;
}
.office-grid p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.62; }

/* ── Section rhythm ─────────────────────────────────────────────────────────
   Internal pages repeat one beat: a small caps heading over a rule, then the
   working content. Keeps three pages written by different hands in step. */
.desk-sec { padding-block: 34px 6px; }
.desk-sec > .wrap > .sec-head, .sec-head {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px;
}
.sec-head h2 {
  font: 700 clamp(20px, 2.6vw, 26px)/1.2 var(--serif); font-variation-settings: "opsz" 40;
  letter-spacing: -.018em; margin: 0; color: var(--ink);
}
.sec-head::after {
  content: ""; flex: 1; height: 1px; align-self: center;
  background: linear-gradient(90deg, var(--rule-2), transparent);
}
.sec-head .ic { width: 18px; height: 18px; color: var(--oxide); flex: none; align-self: center; }

/* ── Slim footer ─────────────────────────────────────────────────────────────
   An internal tool signs off; it does not summarise itself again. One quiet
   band, bound to the page by the same oxide hairline the commercial footer
   wears, so the two sites read as one product. */
.staff-foot { margin-top: 76px; border-top: 3px solid var(--oxide); background: var(--surface); }
.staff-foot-in {
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  align-items: flex-start; justify-content: space-between;
  padding-block: 28px 22px;
}
.staff-foot-brand { display: flex; gap: 14px; align-items: flex-start; max-width: 64ch; }
.staff-foot-brand .brand-mark { color: var(--ink-3); flex: none; margin-top: 2px; }
.staff-foot-brand p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.staff-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 14px; }
.staff-foot-nav a { color: var(--ink-2); text-decoration: none; }
.staff-foot-nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.staff-foot-nav span {
  font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 10px;
}
.staff-foot-rule {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-block: 12px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-3);
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .internal-strip, .staff-foot { display: none !important; }
  .desk-head { background: none; border-bottom: 1px solid #999; }
  .desk-head::before { display: none; }
}