/* ==========================================================================
   Bryder Group, the sign-in screens in the Ribbon look.
   /staff/, /staff/home/, /portal/, /auth/reset/ and /auth/callback/ load
   ribbon.css and then this file. Nothing else loads it.

   Visual only. The markup these rules style is read by auth.js, reset.js,
   session.js and the inline page scripts, so its ids, classes, data-
   attributes and field names are untouched; this file only changes how it
   looks. The states the scripts set are all styled here and must stay
   obvious: [hidden], data-state="error" / "success", aria-busy and disabled.
   /staff/help/ has its own file, ribbon-help.css.
   ========================================================================== */

/* The scripts show and hide things with the hidden attribute. Nothing in
   here may ever beat it. */
[hidden] { display: none !important; }

.auth-page { --paper-2: #E7ECEA; --accent-bright: var(--ink-3); --err: #B3261E; --err-ink: #8A1C14; --err-bg: #FCECEA; }

/* ---- the slim header ------------------------------------------------------- */
.auth-page .hdr { position: absolute; }
.auth-nav { display: flex; align-items: center; gap: 8px; }
.auth-nav__link { padding: 10px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; font-variation-settings: "wght" 520, "wdth" 100; }
.auth-nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-nav .btn[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px rgba(32, 182, 157, 0.35); }
@media (max-width: 400px) { .auth-nav__link { display: none; } }

/* ---- sign-in layout: the reason on the left, the form on a sheet ----------- */
.auth {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(40px, 6vw, 120px); align-items: center;
  max-width: var(--maxw); margin: 0 auto; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--hdr) + clamp(32px, 5vw, 72px)) var(--pad) clamp(48px, 6vw, 96px);
}
.auth__aside, .auth__main { position: relative; z-index: 1; min-width: 0; }
.auth-ribbon {
  position: absolute; z-index: 0; pointer-events: none;
  right: max(-60px, calc((100vw - var(--maxw)) / 2 - 60px)); top: calc(var(--hdr) + 10px);
  width: clamp(300px, 36vw, 600px); height: auto;
  filter: drop-shadow(10px 22px 18px rgba(11, 63, 52, 0.16));
}
@media (prefers-reduced-motion: no-preference) { .auth-ribbon { animation: ph-in 1.4s var(--ease) both; } }
@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 56px; min-height: 0; }
  .auth__main { order: -1; } /* on a narrow screen the form comes first */
  .auth-ribbon { width: 260px; right: -70px; top: calc(var(--hdr) + 4px); }
}
@media (max-width: 639px) { .auth-ribbon { display: none; } }
/* The client sign-in (26 Oct 2026) has its form first in the page, so the H1
   is read first; on a wide screen the aside still sits on the left. */
@media (min-width: 1024px) { .auth--form-first .auth__aside { order: -1; } }

.auth__aside { display: grid; gap: 36px; align-content: start; }
.auth__aside .h-lg { font-size: clamp(34px, 3.8vw, 64px); max-width: 14ch; }
.auth__aside .eyebrow { margin-bottom: 20px; }
.auth__aside p { color: var(--soft); max-width: 46ch; font-size: 17px; }

.auth__card {
  background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 1px rgba(11, 63, 52, 0.04), 0 40px 80px -46px rgba(11, 63, 52, 0.4);
  padding: clamp(26px, 3.6vw, 52px);
}
.auth__card .eyebrow { margin-bottom: 18px; }
.auth__card h1 {
  font-size: clamp(44px, 4.8vw, 76px); line-height: 0.92; letter-spacing: -0.04em;
  font-weight: 800; font-variation-settings: "wght" 800, "wdth" 100;
}
.auth__card .lede { margin-top: 16px; max-width: 32ch; font-size: clamp(18px, 1.5vw, 22px); }

/* ---- the form: the same fields, buttons and focus as the home contact form -- */
.auth__form { display: grid; gap: 20px; margin-top: 30px; }
.field { position: relative; display: grid; gap: 8px; }
.field label { font-size: 14px; font-variation-settings: "wght" 600, "wdth" 100; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__aside { font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(16, 122, 104, 0.45); }
.field__aside:hover { color: var(--ink); text-decoration-color: var(--ink); }
.field input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid rgba(11, 63, 52, 0.28); border-radius: 4px; background: #FAFBFB; color: var(--ink);
  font: inherit; font-size: 16px; font-variation-settings: "wght" 420, "wdth" 100;
  transition: border-color 0.2s, background-color 0.2s;
}
.field input::placeholder { color: #6B817C; opacity: 1; }
.field input:hover { border-color: rgba(11, 63, 52, 0.5); }
.field input:focus { border-color: var(--ink); background: #fff; }
.field--password input { padding-right: 84px; }
.pw-toggle {
  position: absolute; right: 6px; bottom: 6px; height: 40px; min-width: 64px; padding: 0 12px;
  border: 0; border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13px; font-variation-settings: "wght" 640, "wdth" 104;
}
.pw-toggle:hover { background: var(--paper-2); }

.auth__submit { width: 100%; min-height: 54px; margin-top: 4px; font-size: 16px; }
.btn:disabled, .btn[aria-busy="true"] { cursor: progress; opacity: 0.72; }
.btn:disabled::before { transform: translateX(-101%); }
/* while a request is out the button carries a small ring, spinning only when motion is welcome */
.auth__submit[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
}
@media (prefers-reduced-motion: no-preference) { .auth__submit[aria-busy="true"]::after { animation: auth-spin 0.8s linear infinite; } }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth__or { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); font-variation-settings: "wght" 600, "wdth" 112; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn--provider { width: 100%; min-height: 52px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 63, 52, 0.3); }
.btn--provider::before { background: var(--paper-2); }
.btn--provider:hover { color: var(--ink); }

.auth__meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--soft); }
.auth__meta a, .auth__aside a:not(.tile):not(.aside-link), .auth-page main p a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- what the scripts say: neutral while working, then error or success ---- */
.auth__status {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 4px;
  background: var(--paper-2); color: var(--ink);
  font-size: 15px; line-height: 1.45;
}
.auth__status::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ink-3); }
.auth__status[data-state="error"] { background: var(--err-bg); color: var(--err-ink); box-shadow: inset 4px 0 0 var(--err); font-variation-settings: "wght" 520, "wdth" 100; }
.auth__status[data-state="error"]::before { background: var(--err); }
.auth__status[data-state="success"] { background: #E3F4EF; color: var(--ink); box-shadow: inset 4px 0 0 var(--teal); }
.auth__status[data-state="success"]::before { background: var(--teal); }
.auth__card > .auth__status { margin-top: 24px; }

/* ---- quick links on /staff/ ------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 16px; background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line-2), 0 20px 40px -30px rgba(11, 63, 52, 0.35);
  color: var(--ink); text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tile:hover { box-shadow: 0 0 0 1px var(--line), 0 26px 46px -28px rgba(11, 63, 52, 0.45); }
@media (prefers-reduced-motion: no-preference) { .tile:hover { transform: translateY(-2px); } }
.tile__icon { flex: none; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.tile__title { display: block; font-size: 15px; line-height: 1.25; font-variation-settings: "wght" 640, "wdth" 100; }
.tile__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--soft); }
.aside-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 999px; text-decoration: none;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: "wght" 600, "wdth" 112;
}
.aside-link:hover { background: var(--ink); color: #fff; }
@media (max-width: 479px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---- the reassurance list on /portal/ and /auth/reset/ ---------------------- */
.auth__points { display: grid; gap: 22px; }
.auth__point { display: flex; gap: 16px; align-items: flex-start; }
.auth__point > svg { flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: #EAF5F2; color: var(--ink-3); }
.auth__point dt { font-size: 17px; font-variation-settings: "wght" 660, "wdth" 100; }
.auth__point dd { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 44ch; }

/* ---- /staff/home/ ---------------------------------------------------------- */
.auth-page .hdr ~ main > .section:first-child { padding-top: calc(var(--hdr) + clamp(48px, 7vw, 112px)); }
.auth-page .facts.facts--2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px; padding: 0; background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -38px rgba(11, 63, 52, 0.28);
}
.auth-page .fact { padding: 18px 22px; min-width: 0; }
.auth-page .fact + .fact { box-shadow: inset 1px 0 0 var(--line-2); }
.auth-page .fact dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: "wght" 600, "wdth" 112; color: var(--soft); }
.auth-page .fact dd { margin-top: 8px; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; font-variation-settings: "wght" 560, "wdth" 100; }
@media (max-width: 479px) { .auth-page .facts.facts--2 { grid-template-columns: minmax(0, 1fr); } .auth-page .fact + .fact { box-shadow: inset 0 1px 0 var(--line-2); } }

.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }
.card.action {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start;
  padding: 22px 24px; text-decoration: none; color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card.action:hover { box-shadow: 0 0 0 1px var(--line), 0 34px 60px -36px rgba(11, 63, 52, 0.45); }
@media (prefers-reduced-motion: no-preference) { .card.action:hover { transform: translateY(-2px); } }
.card.action:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.action__icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #EAF5F2; color: var(--ink-3); }
.card.action h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.015em; font-variation-settings: "wght" 700, "wdth" 100; }
.card.action p { margin-top: 6px; font-size: 15px; }
.action__out { grid-column: 2; margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-variation-settings: "wght" 600, "wdth" 110; color: var(--soft); overflow-wrap: anywhere; }
/* These pages do not load ribbon-ui.js, so motion follows the media query directly. */
@media (prefers-reduced-motion: reduce) {
  .tile, .card.action, .btn, .btn::before, .btn .arr, .field input { transition: none; }
}

/* the header's own buttons on /staff/home/ */
.auth-actions { display: flex; align-items: center; gap: 8px; }

/* ---- /auth/callback/ ------------------------------------------------------- */
.auth-page .wrap--narrow {
  max-width: 560px; margin-top: clamp(40px, 10vh, 120px);
  background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -46px rgba(11, 63, 52, 0.4);
}
.auth-page .wrap--narrow .brand__logo--light { display: none; }
.auth-page .wrap--narrow .brand__logo--dark { height: 40px; width: auto; }
.auth-page .wrap--narrow .h-md { margin-top: 32px; }
.auth-page .wrap--narrow .btn-row .btn { min-width: 200px; }

/* ---- the slim footer on /staff/home/ --------------------------------------- */
.auth-ftr { border-top: 1px solid var(--line); }
.auth-ftr .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 26px; padding-bottom: 32px; font-size: 14px; color: var(--soft); }
.auth-ftr a { color: inherit; text-underline-offset: 3px; }


/* ---- calm-look fixes for the signed-in pages (18 Oct 2026) ------------------ */
/* calm.css has no screen-reader utility, so since 15 Oct the hidden words in
   the portal's stage tracker (", done") and its Open links showed on screen. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* calm.css lays .facts rows out as label | value, which squeezed the two
   boxes on /staff/home/; stack them. And the header buttons sit at the right. */
.auth-page .facts.facts--2 { gap: 0; }
.auth-page .facts.facts--2 > .fact { display: block; border-top: 0; }
.auth-page .hdr-in > .auth-actions { margin-left: auto; }
.mt-1 { margin-top: 8px; }

/* ---- /portal/home/: the client dashboard (18 Oct 2026) ----------------------
   A centred page the width of the rest of bryder.co.nz (--maxw, 1200px):
   projects and the change form in a main column, the account, notifications
   and contact cards in a side column from 960px up. One column on a phone,
   with the projects first. Same tokens, type and buttons as calm.css. */

/* The header belongs to the page here rather than floating over a hero:
   logo on the left, buttons on the right, a hairline under it, and it stays
   at the top while the page scrolls. */
body.portal-dash { background: var(--paper); }
body.portal-dash .hdr {
  position: sticky; top: 0;
  background: rgba(246, 247, 245, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
}
.portal-dash .auth-actions { gap: 10px; }
@media (max-width: 380px) { .portal-dash .auth-actions .btn--ghost { display: none; } }

.pd { padding-bottom: clamp(48px, 6vw, 88px); }
.pd-hero { padding: clamp(28px, 4vw, 52px) 0 clamp(22px, 2.6vw, 32px); }
.pd-hero .eyebrow { margin-bottom: 10px; }
.pd-title { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.024em; }
.pd-lede { margin-top: 10px; max-width: 60ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--soft); }

.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.pd-main, .pd-side, .pd-projects { display: grid; gap: 24px; min-width: 0; align-content: start; }
.pd-side { gap: 20px; }
.pd-projects:empty { display: none; }
@media (min-width: 640px) and (max-width: 959px) {
  .pd-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 32px; }
}
@media (min-width: 1200px) { .pd-grid { gap: 40px; } }

.pd-card {
  min-width: 0; padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--sheet);
  box-shadow: 0 1px 2px rgba(18, 32, 28, 0.04), 0 18px 40px -32px rgba(18, 32, 28, 0.25);
}
.pd-card--side { padding: 22px 24px; }
.pd-card > .eyebrow { margin-bottom: 8px; }
.pd-h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.pd-sub { margin-top: 10px; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--soft); }
.pd-k { font-size: 13px; line-height: 1.3; font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* the account card: labels above values, and an email only breaks at the @
   (portal-home.js puts a break chance there) or, failing that, where it must */
.pd-facts { display: grid; gap: 16px; margin-top: 16px; }
.pd-facts dt { font-size: 13px; color: var(--soft); }
.pd-facts dd { margin-top: 2px; font-size: 17px; line-height: 1.35; font-weight: 560; color: var(--ink); overflow-wrap: break-word; }
.pd-staffnote { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #FFF4D6; color: #5A3E00; font-size: 14px; line-height: 1.5; }

/* Need a hand? */
/* The client page while it loads, and if it can't (26 Oct 2026). */
.pd-wait { padding: clamp(28px, 4vw, 52px) 0 48px; }
.pd-wait[hidden] { display: none; }
.pd-wait__line { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 17px; color: var(--soft); }
.pd-wait__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) { .pd-wait__dot { animation: pd-pulse 1.2s ease-in-out infinite; } }
@keyframes pd-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.pd-wait--error .pd-card { max-width: 640px; }
.pd-wait__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 20px 0 0; color: var(--soft); }
.pd-wait__btns a { color: var(--ink); }
/* Finished projects: a closed group that keeps everything. A heading with
   its button inside (aria-expanded), so the heading stays a heading. */
.pd-finished { margin-top: 8px; }
.pd-finished__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pd-finished__sum { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pd-finished__sum:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.pd-finished__name { min-width: 0; }
.pd-finished__n { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--soft); white-space: nowrap; }
.pd-finished__word { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pd-finished__list { margin-top: 16px; }
.pd-finished__list[hidden] { display: none; }
/* On hold: the Next box, in amber. */
.pp-hold { background: #FFF4E0; box-shadow: inset 4px 0 0 #D98E04; }
.pp-hold .pp-next__k { color: #7A4B00; }
.pp-older { margin-top: 14px; }
/* Need a hand? starts with Jack himself, and Your information says where
   things are kept (26 Oct 2026). */
.pd-person { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pd-person__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #EAF5F2; }
.pd-person__text { margin: 0; line-height: 1.35; }
.pd-person__text strong { display: block; font-size: 16px; font-weight: 650; color: var(--ink); }
.pd-person__text span:not(.sr-only) { display: block; font-size: 14px; color: var(--soft); }
.pd-info__list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pd-info__more { margin: 12px 0 0; font-size: 14px; }
.pd-info__more a, .pd-info__list a { color: var(--ink); text-underline-offset: 3px; }
.pd-links { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.pd-links li + li { border-top: 1px solid var(--line-2); }
.pd-links a { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.pd-links a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pd-links__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #EAF5F2; color: var(--ink-3); }
.pd-links strong { display: block; font-size: 15px; font-weight: 600; }
.pd-links__sub { display: block; font-size: 14px; color: var(--soft); overflow-wrap: break-word; }

/* Jack's status (portal-status.js, 25 Oct 2026). The dot is in the Bryder
   greens, and every status has its own shape as well as its colour, so it
   never rests on colour alone (the words are always beside it too):
   available a solid teal dot, busy deep green with a bar across, away mint
   with a teal ring, offline an empty grey ring. The white ring keeps it
   clear on the dark hero on staff home as well as on white. */
.ps-dot {
  position: relative; flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: #02B1A0; box-shadow: 0 0 0 2px #fff;
}
.ps-dot[data-state="busy"] { background: #024946; }
.ps-dot[data-state="busy"]::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 2px; border-radius: 1px; background: #fff; }
.ps-dot[data-state="away"] { background: #B3E4D8; box-shadow: inset 0 0 0 2px #02B1A0, 0 0 0 2px #fff; }
.ps-dot[data-state="offline"] { background: #fff; box-shadow: inset 0 0 0 2px #8A9A95, 0 0 0 2px #fff; }

/* In Need a hand?, above Email Jack. */
.pd-jack { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #EAF5F2; }
.pd-jack .ps-dot { margin-top: 5px; }
.pd-jack__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; }
.pd-jack__text strong { font-weight: 600; }
.pd-jack__note { color: var(--ink); }
.pd-jack__active {
  display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px;
  background: #fff; color: #024946; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: 1px;
}

/* To-dos (portal-todos.js, 26 Oct 2026): the client page, the staff Clients
   page and the private link page share these. */
.pt-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pt-item { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.pt-item.is-done { background: var(--paper); }
.pt-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.pt-tick { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #024946; cursor: pointer; }
.pt-tick:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pt-title { flex: 1 1 14rem; min-width: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; cursor: pointer; }
strong.pt-title { cursor: auto; }
.pt-item.is-done .pt-title { color: var(--soft); text-decoration: line-through; text-decoration-color: rgba(18, 32, 28, 0.35); }
.pt-meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.pt-details { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pt-item--tick > .pt-meta, .pt-item--tick > .pt-details { padding-left: 34px; }
.pt-link { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pt-late { background: #FFF4D6; color: #5A3E00; }
.pt-state {
  flex: none; display: inline-flex; align-items: center; min-width: 52px; justify-content: center; padding: 3px 10px; border-radius: 999px;
  background: #B3E4D8; color: #024946; font-size: 12px; font-weight: 640; line-height: 1.5;
}
.pt-state[data-done="yes"] { background: #024946; color: #fff; }
.pt-done > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink-3); padding: 6px 0; }
.pt-done > .pt-list { margin-top: 8px; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pt-del { color: #8A2B12; }
.pt-formholder:empty, .pt-linkbox:empty { display: none; }
.pt-form { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--paper); max-width: none; }
.pt-form .btn { min-width: 0; }
.pt-made { display: grid; gap: 6px; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #EAF5F2; }
.pt-url { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.pt-history > summary { cursor: pointer; font-size: 14px; color: var(--ink-3); }
.pt-history__list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--soft); }
/* the private link page */
.pt-page__wrap { max-width: 720px; padding-block: clamp(28px, 5vw, 56px); display: grid; gap: 16px; }
.pt-page__title { margin-top: 6px; font-size: clamp(28px, 4vw, 40px); overflow-wrap: anywhere; }
.pt-business { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.pt-page .pt-meta { margin-top: 10px; }
.pt-page .pt-details { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--paper); }
.pt-page__done { display: grid; gap: 14px; margin-top: 22px; justify-items: start; }
.pt-page__done .field { width: 100%; max-width: 26rem; }
.pt-donebadge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ink); }
.pt-page__foot { text-align: center; }
@media (max-width: 479px) {
  .pt-item--tick > .pt-meta, .pt-item--tick > .pt-details { padding-left: 0; }
}

/* ---- a project card ---- */
.pp-muted { font-size: 14px; color: var(--soft); }
.pp-h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 640; }
.pp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.pp-head .eyebrow { margin-bottom: 8px; }
.pp-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: #E3F4EF; color: var(--ink); font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.pp-pill--sm { padding: 4px 10px; font-size: 12px; }
.pp-pill--ok { background: var(--ink-3); color: #fff; }

/* the stage tracker: a line of five steps, filled up to where the job is */
.pp-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; list-style: none; }
.pp-stage { position: relative; display: grid; justify-items: start; gap: 10px; padding-top: 2px; color: var(--soft); }
.pp-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); }
.pp-stage:first-child::before { left: 11px; }
.pp-stage:last-child::before { right: auto; width: 11px; }
.pp-stage.is-done::before { background: var(--ink-3); }
.pp-stage.is-now::before { background: linear-gradient(90deg, var(--ink-3) 0 11px, var(--line) 11px); }
.pp-stage__dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--line); }
.pp-stage.is-done .pp-stage__dot { background: var(--ink-3); box-shadow: none; }
.pp-stage.is-done .pp-stage__dot::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.pp-stage.is-now .pp-stage__dot { background: var(--teal); box-shadow: 0 0 0 5px rgba(22, 185, 165, 0.22); }
.pp-stage__label { font-size: 15px; line-height: 1.25; font-weight: 520; }
.pp-stage.is-done .pp-stage__label, .pp-stage.is-now .pp-stage__label { color: var(--ink); }
.pp-stage.is-now .pp-stage__label { font-weight: 700; }
/* On hold (26 Oct 2026): the stage it was paused in, amber with a pause
   mark, and "On hold" under its name. */
.pp-stage.is-held::before { background: linear-gradient(90deg, var(--ink-3) 0 11px, var(--line) 11px); }
.pp-stage.is-held .pp-stage__dot { background: #FFF4E0; box-shadow: inset 0 0 0 2px #D98E04; }
.pp-stage.is-held .pp-stage__dot::after { content: ""; position: absolute; left: 7px; top: 6px; width: 8px; height: 10px; box-sizing: border-box; border-left: 3px solid #7A4B00; border-right: 3px solid #7A4B00; }
.pp-stage.is-held .pp-stage__label { color: var(--ink); font-weight: 700; }
.pp-stage__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #7A4B00; }
@media (max-width: 559px) {
  .pp-stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-stage { grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 14px; padding: 0 0 16px; }
  .pp-stage::before { left: 10px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pp-stage:first-child::before { left: 10px; top: 11px; }
  .pp-stage:last-child::before { width: 2px; bottom: auto; height: 11px; }
  .pp-stage.is-now::before, .pp-stage.is-held::before { background: linear-gradient(180deg, var(--ink-3) 0 11px, var(--line) 11px); }
}

.pp-summary { margin-top: 28px; max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--soft); }
.pp-next { display: grid; gap: 4px; margin-top: 18px; padding: 14px 18px; border-radius: 10px; background: var(--paper); box-shadow: inset 4px 0 0 var(--teal); }
.pp-next__k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 680; color: var(--ink-3); }
.pp-next p { font-size: 16px; line-height: 1.5; color: var(--ink); }

/* the preview and live-site strips: what to open, the password, the button */
.pp-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; padding: 18px 20px; border-radius: 12px; background: #EAF5F2; box-shadow: inset 0 0 0 1px #CFE6E0; }
.pp-card__text { display: grid; gap: 2px; flex: 1 1 160px; min-width: 0; }
.pp-card__k { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 660; color: var(--ink-3); }
.pp-card .pp-muted { margin: 0; }
.pp-card__url { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.pp-card__btn { flex: none; }
/* the preview strip: what it is and how long it's open on one line, then the
   password on the left and the button on the right, at any width */
.pp-card--preview .pp-card__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1 1 100%; }
.pp-card--preview .pp-card__btn { margin-left: auto; }
.pp-pw { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.pp-pw__k { font-size: 13px; color: var(--soft); }
.pp-pw__v { min-width: 0; font: 600 16px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.pp-pw__copy { min-height: 34px; padding: 0 12px; }
@media (max-width: 559px) {
  .pp-card { display: grid; }
  .pp-pw { display: flex; }
  .pp-pw__v { flex: 1; }
  .pp-card__btn { width: 100%; }
}

/* each part of the card below the summary, under a hairline */
.pp-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-2); }

.pp-docs, .pp-updates, .pp-list { margin-left: 0; padding: 0; list-style: none; }
.pp-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.pp-doc:first-child { border-top: 1px solid var(--line-2); }
.pp-doc:last-child, .pp-file:last-child, .pp-req:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-doc .pp-pill { grid-column: 3; justify-self: end; }
.pp-doc__open { grid-column: 4; justify-self: end; }
.pp-doc__main { display: grid; gap: 2px; min-width: 0; }
.pp-doc__kind { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 620; color: var(--soft); }
.pp-doc__label { font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pp-doc__meta { font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-doc__open { font-size: 14px; font-weight: 640; color: var(--ink); text-underline-offset: 4px; }
/* Quotes and invoices (26 Oct 2026): the pill and the due line by tone
   (portal-money.js), View and pay in the accent, and the No GST line. */
.pp-pill[data-tone="bad"] { background: var(--err-bg); color: var(--err-ink); }
.pp-pill[data-tone="soon"] { background: #FFF1D6; color: #6B4200; }
.pp-pill[data-tone="quiet"] { background: var(--paper-2); color: var(--soft); }
.pp-doc__due { font-weight: 600; color: var(--ink); }
.pp-doc__due[data-tone="soon"] { color: #8A5300; }
.pp-doc__due[data-tone="bad"] { color: var(--err-ink); }
.pp-doc__due[data-tone="ok"] { color: var(--ink-3); }
.pp-doc__pay { padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; white-space: nowrap; }
.pp-doc__pay:hover { text-decoration: underline; }
.pp-nogst { margin-top: 12px; font-size: 14px; }
/* The staff controls on each row (staff-docs.js). */
.sd-doc { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.sd-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sd-tools .btn { min-width: 0; }
.sd-msg { grid-column: 1 / -1; margin: 0; }
.sd-paid, .sd-edit { grid-column: 1 / -1; margin-top: 6px; padding: 14px 16px; border-radius: 10px; background: var(--paper); }
.sd-paid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sd-paid .field { margin: 0; }
.sd-update .sd-tools { margin-top: 8px; }
.sd-update .sd-edit { margin-top: 8px; }
@media (max-width: 559px) {
  .pp-doc { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-doc__meta { grid-column: 1; }
  .pp-doc .pp-pill { grid-column: 2; grid-row: 1; }
  .pp-doc__open { grid-column: 2; justify-self: end; }
}

.pp-updates { position: relative; display: grid; gap: 18px; padding-left: 22px; }
.pp-updates::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.pp-update { position: relative; display: grid; gap: 4px; }
.pp-update::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--ink-3); }
.pp-update__when { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.pp-update p { max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--ink); white-space: pre-line; }

/* files: the drop box has one plain button; dragging is a bonus on a computer */
.pp-drop { display: grid; justify-items: start; gap: 10px; padding: 20px 22px; border: 1.5px dashed rgba(18, 32, 28, 0.25); border-radius: var(--r); background: var(--paper); transition: border-color 0.2s, background-color 0.2s; }
.pp-drop.is-over { border-color: var(--teal); background: #E3F4EF; }
.pp-drop[aria-busy="true"] { opacity: 0.75; }
.pp-drop__icon { color: var(--ink-3); }
.pp-drop__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pp-drop__drag { font-size: 15px; color: var(--soft); }
.pp-drop .pp-muted { margin: 0; }
@media (hover: none), (pointer: coarse) { .pp-drop__drag { display: none; } }
/* on a phone the one button is big and easy to hit */
@media (max-width: 559px) {
  .pp-drop { justify-items: stretch; }
  .pp-drop__row .btn { width: 100%; min-height: 48px; font-size: 16px; }
}
.pp-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink); cursor: pointer; }
.pp-check input, .pp-choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink-3); }

.pp-uploads { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pp-uploads:empty { display: none; }
.pp-up { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 8px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.pp-up__name { font-size: 15px; font-weight: 560; color: var(--ink); overflow-wrap: anywhere; }
.pp-up__state { font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-up__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.pp-up__fill { display: block; width: 0; height: 100%; background: var(--teal); transition: width 0.2s linear; }
.pp-up__msg { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--err-ink); }
.pp-up[data-state="error"] { background: var(--err-bg); box-shadow: inset 4px 0 0 var(--err); }
.pp-up[data-state="error"] .pp-up__state { color: var(--err-ink); font-weight: 600; }
.pp-up[data-state="done"] .pp-up__state { color: var(--ink-3); font-weight: 600; }

/* the files box (portal-files.js): a heading with New folder and the
   grid/list switch, the drop box, the path when inside a folder, then the
   folders and files as tiles (or rows in the list view) */
.pp-files__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pp-files__head .pp-h3:focus { outline: none; }
.pp-files__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pp-tool:hover { border-color: var(--ink); }
.pp-tool svg { color: var(--ink-3); }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.pp-seg__btn { display: grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--soft); cursor: pointer; }
.pp-seg__btn:hover { color: var(--ink); }
.pp-seg__btn[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(18, 32, 28, 0.16); }
.pp-tool:focus-visible, .pp-seg__btn:focus-visible, .pp-item__open:focus-visible, .pp-item__more:focus-visible, .pp-crumbs__link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pp-drop__where { margin: 0; font-size: 14px; color: var(--ink); }
.pp-files.is-moving .pp-drop { opacity: 0.6; }

/* where you are, when inside a folder; each step back is also a place to drop things */
.pp-crumbs { margin-top: 18px; }
.pp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pp-crumbs li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pp-crumbs li + li::before { content: "/"; color: var(--soft); opacity: 0.6; }
.pp-crumbs__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.pp-crumbs__link:hover { background: var(--paper); }
.pp-crumbs__link.is-target { background: #E3F4EF; box-shadow: 0 0 0 2px var(--teal); }
.pp-crumbs__now { padding: 4px 8px; font-size: 15px; font-weight: 640; color: var(--ink); overflow-wrap: anywhere; }
.pp-crumbs__now:focus { outline: none; }

.pp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.pp-items:empty { display: none; }
.pp-files__none { margin-top: 14px; }
.pp-item { position: relative; min-width: 0; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.15s; }
.pp-item:hover { box-shadow: 0 0 0 1px rgba(18, 32, 28, 0.3), 0 10px 22px -16px rgba(18, 32, 28, 0.45); }
.pp-item.is-target { background: #E3F4EF; box-shadow: 0 0 0 2px var(--teal); }
.pp-item.is-dragging { opacity: 0.45; }
.pp-item__open { display: grid; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pp-item__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px 12px 0 0; background: #EEF2F1; color: var(--ink-3); }
.pp-item__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-item__thumb[data-fit="contain"] img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.pp-item__thumb[data-kind="pdf"] img { object-position: top; }
/* a page preview reads as a sheet of paper, not a picture */
.pp-item__thumb[data-kind="pdf"].has-img { background: #fff; box-shadow: inset 0 -1px 0 var(--line-2); }
.pp-item__thumb.has-img .pp-item__icon { visibility: hidden; }
.pp-item__icon { display: grid; justify-items: center; gap: 6px; }
.pp-item__ext { font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; }
.pp-item__thumb--folder { background: #E3F4EF; color: var(--ink-3); }
.pp-item__thumb--folder svg { fill: rgba(22, 185, 165, 0.22); }
.pp-item__thumb[data-kind="pdf"] { background: #FCECEA; color: #A3261C; }
.pp-item__thumb[data-kind="doc"] { background: #E8EEFB; color: #1F4FB8; }
.pp-item__thumb[data-kind="sheet"] { background: #E5F4EA; color: #17773C; }
.pp-item__thumb[data-kind="slides"] { background: #FCEEE4; color: #B2490F; }
.pp-item__thumb[data-kind="zip"] { background: #FFF4D6; color: #6B5100; }
.pp-item__thumb[data-kind="design"] { background: #F1EBFD; color: #6532C9; }
.pp-item__thumb[data-kind="audio"], .pp-item__thumb[data-kind="video"] { background: #E8ECF1; color: #34465A; }
.pp-item__play { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(12, 20, 17, 0.72); color: #fff; }
.pp-item__text { display: grid; gap: 2px; min-width: 0; padding: 10px 46px 12px 12px; }
.pp-item__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pp-item__meta { font-size: 13px; color: var(--soft); }
.pp-item__more { position: absolute; right: 6px; bottom: 8px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; }
.pp-item__more:hover, .pp-item__more[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }

/* the list view: one row each, a small preview on the left */
.pp-items--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pp-items--list .pp-item { border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; box-shadow: none; }
.pp-items--list .pp-item:first-child { border-top: 1px solid var(--line-2); }
.pp-items--list .pp-item:hover { background: var(--paper); box-shadow: none; }
.pp-items--list .pp-item.is-target { background: #E3F4EF; box-shadow: inset 0 0 0 2px var(--teal); }
.pp-items--list .pp-item__open { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 52px 10px 6px; border-radius: 0; }
.pp-items--list .pp-item__thumb { width: 52px; height: 52px; aspect-ratio: auto; border-radius: 8px; }
.pp-items--list .pp-item__thumb[data-fit="contain"] img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.pp-items--list .pp-item__icon svg { width: 24px; height: 24px; }
.pp-items--list .pp-item__ext { font-size: 9px; }
.pp-items--list .pp-item__play { right: 3px; bottom: 3px; width: 20px; height: 20px; }
.pp-items--list .pp-item__play svg { width: 11px; height: 11px; }
.pp-items--list .pp-item__text { padding: 0; }
.pp-items--list .pp-item__name { -webkit-line-clamp: 3; }
.pp-items--list .pp-item__more { top: 50%; right: 4px; bottom: auto; transform: translateY(-50%); }
/* Select: tick boxes on file tiles and a bar with what to do with them */
.pp-tool[aria-pressed="true"] { border-color: var(--ink); background: #E3F4EF; }
.pp-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #E3F4EF; box-shadow: inset 0 0 0 1px rgba(22, 185, 165, 0.35); }
.pp-selbar__count { margin-right: auto; font-size: 14px; font-weight: 600; color: var(--ink); }
.pp-item__pick { position: absolute; top: 8px; left: 8px; z-index: 2; display: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(18, 32, 28, 0.35); cursor: pointer; }
.pp-item__pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink-3); cursor: pointer; }
.pp-files.is-selecting .pp-item[data-item-type="file"] .pp-item__pick { display: grid; }
.pp-item.is-picked { box-shadow: 0 0 0 2px var(--teal); }
.pp-items--list .pp-item__pick { top: 50%; left: 6px; transform: translateY(-50%); }
.pp-files.is-selecting .pp-items--list .pp-item[data-item-type="file"] .pp-item__open { padding-left: 46px; }
.pp-items--list .pp-item.is-picked { background: #E3F4EF; box-shadow: none; }
/* Finding (21 Oct 2026): the search and sort, with the Select bar under
   them, stick under the page header while the files scroll past. Keyboard
   focus scrolls clear of them (--pp-bar-h comes from portal-files.js). */
.pp-files__bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; display: grid; gap: 10px; margin-top: 6px; padding: 8px 0; background: var(--sheet); }
.portal-dash .pp-files__bar { top: calc(var(--hdr) + 1px); }
.pp-files__bar.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 16px -14px rgba(18, 32, 28, 0.3); }
/* too tall to keep in view (Select on a phone): it scrolls with the files */
.pp-files__bar.is-loose { position: relative; top: auto; }
.pp-files__bar .pp-selbar { margin-top: 0; }
.pp-files__bar:not([hidden]) + .pp-items { margin-top: 8px; }
.pp-files .pp-item { scroll-margin-top: calc(var(--pp-bar-h, 0px) + 8px); }
.pp-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
.pp-find__search { position: relative; display: block; min-width: 0; }
.pp-find__search svg { position: absolute; left: 12px; top: 50%; color: var(--soft); transform: translateY(-50%); pointer-events: none; }
.pp-find__search input { width: 100%; min-height: 42px; margin: 0; padding: 8px 10px 8px 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 16px; }
.pp-find__search input::placeholder { color: var(--soft); opacity: 0.85; }
.pp-find__search input:hover, .pp-find__sort select:hover { border-color: rgba(18, 32, 28, 0.4); }
.pp-find__search input:focus-visible, .pp-find__sort select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--ink-3); }
.pp-find__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--soft); }
.pp-find__sort select { min-height: 42px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.pp-find__found { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.pp-find__count { margin: 0; font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; }
.pp-find__count:not(:empty) { margin-top: 8px; }
.pp-find__clear { min-height: 32px; margin-top: 8px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-find__clear:hover { background: var(--paper); }
.pp-find__clear:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pp-item__where { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.pp-totop { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 12px 28px -12px rgba(18, 32, 28, 0.6); cursor: pointer; }
.pp-totop:hover { background: var(--ink-3); }
.pp-totop:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 559px) {
  .pp-find__sortlabel { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pp-find__sort select { max-width: 9.5rem; }
}
@media (max-width: 559px) {
  .pp-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pp-items--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-item__text { padding: 8px 42px 10px 10px; }
  .pp-item__name { font-size: 14px; }
  .pp-item__more { right: 3px; bottom: 6px; }
}

/* the menu from a tile's ... button */
.pp-menu { position: absolute; z-index: 60; min-width: 210px; padding: 6px; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -16px rgba(18, 32, 28, 0.42); }
.pp-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 540; text-align: left; cursor: pointer; }
.pp-menu__item svg { flex: none; color: var(--soft); }
.pp-menu__item:hover, .pp-menu__item:focus { background: var(--paper); outline: none; }
.pp-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); }
.pp-menu__item--danger, .pp-menu__item--danger svg { color: var(--err-ink); }

/* small questions: new folder, rename, move, remove */
.pp-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--sheet); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(12, 20, 17, 0.5); }
.pp-dialog::backdrop { background: rgba(12, 22, 19, 0.5); }
.pp-dialog__form { display: grid; gap: 16px; padding: 24px; }
.pp-dialog__title { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 640; overflow-wrap: anywhere; text-wrap: balance; }
.pp-dialog__text { font-size: 15px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.pp-dialog .field { margin: 0; }
.pp-dialog__inputrow { display: flex; align-items: center; gap: 8px; }
.pp-dialog__inputrow input { flex: 1; min-width: 0; }
.pp-dialog__suffix { flex: none; font-size: 15px; font-weight: 600; color: var(--soft); }
.pp-dialog__tree { display: grid; gap: 2px; max-height: min(50vh, 360px); overflow: auto; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.pp-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); cursor: pointer; }
.pp-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink-3); }
.pp-pick svg { flex: none; color: var(--ink-3); }
.pp-pick__name { min-width: 0; overflow-wrap: anywhere; }
.pp-pick__note { margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--soft); white-space: nowrap; }
.pp-pick:hover { background: var(--paper); }
.pp-pick:has(input:checked) { background: #EAF5F2; box-shadow: inset 0 0 0 2px var(--ink-3); }
.pp-pick:has(input:disabled) { color: var(--soft); cursor: default; background: none; }
.pp-pick:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 1px; }
.pp-dialog__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pp-dialog .btn--danger { background: var(--err); border-color: var(--err); color: #fff; }
.pp-dialog .btn--danger:hover { background: var(--err-ink); border-color: var(--err-ink); }
@media (max-width: 559px) {
  .pp-dialog__btns .btn { flex: 1 1 auto; }
}

/* the viewer: photos, PDFs and videos, full screen */
.pp-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0D1411; color: #fff; overflow: hidden; }
.pp-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pp-viewer::backdrop { background: #0D1411; }
.pp-viewer__bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.pp-viewer__title { flex: 1; min-width: 0; }
.pp-viewer__name { font-size: 16px; line-height: 1.3; font-weight: 620; overflow-wrap: anywhere; }
.pp-viewer__meta { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, 0.68); }
.pp-viewer__btn { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pp-viewer__btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.pp-viewer__btn--icon { justify-content: center; width: 42px; padding: 0; }
.pp-viewer__btn:focus-visible, .pp-viewer__nav:focus-visible { outline: 2px solid #7FE3D3; outline-offset: 2px; }
.pp-viewer__stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.pp-viewer__stage[data-kind="pdf"] { place-items: start center; }
.pp-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.pp-viewer__img.is-low { width: min(100%, 900px); filter: blur(1px); }
.pp-viewer__video { max-width: 100%; max-height: 100%; border-radius: 4px; background: #000; }
.pp-viewer__pages { display: grid; gap: 16px; width: min(900px, 100%); }
.pp-page { width: 100%; max-width: 100%; border-radius: 2px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.pp-page canvas { display: block; width: 100%; height: 100%; }
.pp-viewer__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; transform: translateY(-50%); }
.pp-viewer__nav:hover { background: rgba(0, 0, 0, 0.8); }
.pp-viewer__nav--prev { left: 12px; }
.pp-viewer__nav--next { right: 12px; }
.pp-viewer__note { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 3; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 14px; line-height: 1.45; text-align: center; transform: translateX(-50%); }
@media (max-width: 559px) {
  .pp-viewer__btn span { display: none; }
  .pp-viewer__btn { justify-content: center; width: 42px; padding: 0; }
  .pp-viewer__stage { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pp-viewer__nav { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; transform: none; }
}

/* staff only, on each project: share a new preview */
.pp-staff { margin-top: 32px; border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.pp-staff > summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 620; color: var(--ink); cursor: pointer; list-style: none; }
.pp-staff > summary::-webkit-details-marker { display: none; }
.pp-staff > summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 17px; line-height: 1; transition: transform 0.2s; }
.pp-staff[open] > summary::before { transform: rotate(45deg); }
.pp-staff__tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #FFF4D6; color: #5A3E00; font-size: 12px; font-weight: 600; }
.pp-staff__form { max-width: none; padding: 0 20px 22px; }
.pp-staff__form .pp-muted { margin: 0; }
.pp-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 559px) { .pp-row2 { grid-template-columns: minmax(0, 1fr); } }

/* the change form and the list of requests, one under the other */
.pp-requests { display: grid; gap: 32px; margin-top: 24px; }
/* On a phone, Send request is full width like Save (26 Oct 2026). */
@media (max-width: 479px) { .pp-requests .pp-form .btn { justify-self: stretch; width: 100%; min-width: 0; } }
.pp-requests__list { padding-top: 28px; border-top: 1px solid var(--line-2); }
.pp-form { display: grid; gap: 20px; max-width: 40rem; }
.pp-form .btn { justify-self: start; min-width: 180px; }
.field textarea, .field select {
  width: 100%; padding: 12px 16px;
  border: 1px solid rgba(11, 63, 52, 0.28); border-radius: 4px; background: #FAFBFB; color: var(--ink);
  font: inherit; font-size: 16px; font-variation-settings: "wght" 420, "wdth" 100;
  transition: border-color 0.2s, background-color 0.2s;
}
.field select { min-height: 52px; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.pp-staff__form .field textarea { min-height: 96px; }
.field textarea::placeholder { color: #6B817C; opacity: 1; }
.field textarea:hover, .field select:hover { border-color: rgba(11, 63, 52, 0.5); }
.field textarea:focus, .field select:focus { border-color: var(--ink); background: #fff; }
.pp-list { display: grid; gap: 0; }
.pp-req { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.pp-req:first-child { border-top: 1px solid var(--line-2); }
.pp-req__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-req__subject { font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* how a client hears about new things, in the side column */
.pd-notify { gap: 16px; margin-top: 14px; }
.pd-notify .btn { justify-self: stretch; min-width: 0; }
.pp-choices { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pp-choices legend { margin-bottom: 12px; padding: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.pp-choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pp-choice input { margin-top: 1px; }
.pp-choice strong { display: block; font-size: 15px; font-weight: 620; color: var(--ink); }
.pp-choice__to { display: block; overflow-wrap: break-word; }
.pp-choice:has(input:checked) { background: #EAF5F2; box-shadow: 0 0 0 2px var(--ink-3); }
.pp-choice:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---- the staff Clients page (/staff/clients/, staff-clients.js) ---------- */
.sc-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.sc-hero .btn { flex: none; }
.sc-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; font-weight: 620; color: var(--ink-3); text-underline-offset: 3px; }
.sc-back::before { content: "\2190"; font-family: system-ui, sans-serif; }
.sc-banner { margin: 0 0 20px; }
.sc-listhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.sc-search { flex: 1 1 280px; max-width: 440px; }
.sc-search input { width: 100%; }
.sc-list { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.sc-client a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 10px; border-top: 1px solid var(--line-2); border-radius: 8px; color: inherit; text-decoration: none; }
.sc-client:last-child a { border-bottom: 1px solid var(--line-2); }
.sc-client a:hover { background: var(--paper); }
.sc-client a:hover .sc-client__name { text-decoration: underline; text-underline-offset: 3px; }
.sc-client a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sc-client__name { font-size: 17px; font-weight: 640; color: var(--ink); overflow-wrap: anywhere; }
.sc-client__sub { grid-column: 1 / -1; font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.sc-client__right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.sc-client__logins { font-size: 13px; color: var(--soft); white-space: nowrap; }
.sc-client__seen { font-size: 13px; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* on a phone the stage, logins and last in fold under each other rather
   than squeezing the name */
@media (max-width: 559px) { .sc-client a { grid-template-columns: minmax(0, 1fr) fit-content(45%); } }
.sc-pill--quiet { background: var(--paper-2); color: var(--soft); }
.sc-pill--bad { background: var(--err-bg); color: var(--err-ink); }
.sc-none { margin-top: 18px; }

.sc-form { max-width: none; }
.sc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sc-fields > legend { grid-column: 1 / -1; margin-bottom: 14px; padding: 0; }
.sc-fields + .sc-fields { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.sc-wide { grid-column: 1 / -1; }
.sc-form .field textarea { min-height: 96px; }
.sc-form--side { gap: 14px; }
.sc-form--side .btn { justify-self: stretch; min-width: 0; }
.sc-form--side .field textarea { min-height: 120px; }
.sc-formtitle { margin: 0; font-size: 15px; font-weight: 640; color: var(--ink); }
.sc-invite { align-items: flex-start; }
.sc-invite input { margin-top: 2px; }
@media (max-width: 559px) {
  .sc-fields { grid-template-columns: minmax(0, 1fr); }
  .sc-hide-sm { display: none; }
}

.sc-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-cardhead .pp-tool { min-height: 36px; padding: 6px 12px; }
.pd-facts .sc-empty { font-weight: 400; color: var(--soft); }
.pd-facts dd a { color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pd-k .pp-staff__tag { margin-left: 8px; letter-spacing: 0; text-transform: none; vertical-align: 2px; }

.sc-people { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.sc-people li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.sc-people li:last-child { border-bottom: 1px solid var(--line-2); }
.sc-people strong { font-size: 15px; font-weight: 620; color: var(--ink); overflow-wrap: anywhere; }
.sc-people__sub { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.sc-people__seen { color: var(--ink); }

.sc-count { margin: 6px 0 0; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.sc-count[data-state="error"] { color: var(--err-ink); font-weight: 600; }
.sc-history > summary, .sc-adddoc > summary, .sc-req__more > summary { min-height: 40px; padding: 8px 0; font-size: 15px; font-weight: 620; color: var(--ink-3); cursor: pointer; }
.sc-history__list { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.sc-history__list li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.sc-history__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sc-history__when { font-size: 13px; color: var(--soft); }
.sc-history__list p { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }

.sc-addproject { padding: 18px 22px; }
.sc-project__form { margin-top: 24px; gap: 18px; }
.sc-project__form .btn { justify-self: start; }
.sc-update { gap: 10px; }
.sc-update .field textarea { min-height: 72px; }
.sc-update .btn { justify-self: start; min-width: 0; }

.sc-req .pp-req__top { flex-wrap: wrap; }
.sc-req__status { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; }
.sc-req__msgs { display: grid; gap: 12px; padding: 4px 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.sc-req__msgs strong { font-size: 13px; font-weight: 600; color: var(--soft); }

/* ---- deleting clients (19 Oct 2026) ----------------------------------------
   Delete client sits alone at the bottom of a client's page, in a red-edged
   card. Deleted clients is its own view (#deleted), each row with Restore and
   Delete for good. */
.sc-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-hero__btns .btn { flex: none; }
.sc-listfoot { margin: 18px 0 0; font-size: 15px; }
.sc-listfoot a { color: var(--ink-3); font-weight: 620; text-underline-offset: 3px; }
.btn--danger-line { background: transparent; color: var(--err-ink); border-color: rgba(179, 38, 30, 0.45); }
.btn--danger-line:hover { background: var(--err-bg); border-color: var(--err); color: var(--err-ink); }
.btn--danger-line:focus-visible { outline: 2px solid var(--err); outline-offset: 3px; }
.sc-danger { margin-top: 40px; border-color: rgba(179, 38, 30, 0.3); box-shadow: inset 4px 0 0 var(--err), 0 1px 2px rgba(18, 32, 28, 0.04); }
.sc-danger .pp-muted { max-width: 60ch; }
.sc-gonecard { margin-bottom: 24px; box-shadow: inset 4px 0 0 var(--err), 0 1px 2px rgba(18, 32, 28, 0.04); }
.sc-gonecard .pp-muted { max-width: 60ch; }
.sc-list--gone { margin-top: 0; }
.sc-goner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 10px; border-top: 1px solid var(--line-2); }
.sc-goner:last-child { border-bottom: 1px solid var(--line-2); }
.sc-goner__text { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; }
.sc-goner__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-banner:focus { outline: none; }
@media (max-width: 559px) {
  .sc-goner__btns { width: 100%; }
  .sc-goner__btns .btn { flex: 1 1 auto; }
}

/* ---- passwords (portal-secrets.js, 21 Oct 2026) ----------------------------
   The Passwords box on the client page and on each client in the staff
   Clients page: one calm line about how it is kept, the form, then the list
   under a hairline (the same shape as Ask for a change). A revealed password
   sits in a mono box with Copy and Hide, and a countdown under it. */
.ps-lock { display: flex; align-items: flex-start; gap: 10px; max-width: 62ch; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #EAF5F2; color: var(--ink); font-size: 14px; line-height: 1.5; }
.ps-lock svg { flex: none; margin-top: 1px; color: var(--ink-3); }
.ps-grid { display: grid; gap: 32px; margin-top: 24px; }
.ps-formwrap, .ps-listwrap { min-width: 0; }
.ps-listwrap { padding-top: 28px; border-top: 1px solid var(--line-2); }
.ps-form { gap: 18px; }
.ps-form .field textarea { min-height: 72px; }
.ps-hint { margin: 0; font-size: 13px; }
/* drawn as dots until Show, without being a password box (see the script) */
.ps-masked:not(.is-shown) { -webkit-text-security: disc; }
.ps-once { min-height: 0; }
.ps-off { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); }
/* its own list classes, so nothing that looks for the change requests
   (.pp-req) ever picks these up */
.ps-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ps-item { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.ps-item:first-child { border-top: 1px solid var(--line-2); }
.ps-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ps-item__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-item__label { font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ps-item__meta, .ps-item__state { margin: 0; overflow-wrap: anywhere; }
.ps-item.is-ended .ps-item__label { color: var(--soft); }
.ps-pill--waiting { background: #FFF4D6; color: #5A3E00; }
.ps-pill--viewed { background: var(--ink-3); color: #fff; }
.ps-pill--expired, .ps-pill--revoked { background: var(--paper-2); color: var(--soft); }
.ps-item__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ps-item__btns .btn { min-width: 0; }
.ps-item__status { margin-top: 6px; }
.ps-reveal { display: grid; gap: 8px; margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: #EAF5F2; box-shadow: inset 0 0 0 1px #CFE6E0; }
.ps-reveal__k { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 660; color: var(--ink-3); }
.ps-reveal__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ps-reveal__v { flex: 1 1 220px; min-width: 0; padding: 8px 12px; border-radius: 8px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); font: 600 16px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.ps-reveal__note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.ps-reveal__warn { margin: 0; font-size: 14px; font-weight: 600; color: #5A3E00; }
.ps-reveal__timer { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .ps-form .btn { width: 100%; }
  .ps-reveal__line .btn, .ps-reveal__line .pp-tool { flex: 1 1 auto; justify-content: center; }
}

/* ---- the All files page (/staff/files/, staff-files.js) --------------------
   The search, then the filters in a grid that folds to two columns on a
   phone, then the files as the same tiles (or rows) as the files box, each
   with where it lives and who shared it. */
.sf-find { display: grid; gap: 16px; }
.sf-search { max-width: 520px; }
.sf-search input { width: 100%; }
.sf-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; }
.sf-filters .field { min-width: 0; }
.sf-filters select { min-height: 46px; padding: 10px 12px; font-size: 15px; }
.sf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 4px; }
.sf-bar__start, .sf-bar__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sf-count { margin: 0; font-variant-numeric: tabular-nums; }
.sf-items { margin-top: 20px; }
.sf-where { font-size: 13px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.sf-item .pp-item__meta { overflow-wrap: anywhere; }
.sf-tag { justify-self: start; margin-top: 4px; }
.sf-more { display: flex; justify-content: center; margin-top: 20px; }
.sf-more .btn:empty { display: none; }
.pp-check:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 559px) {
  .sf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .sf-bar { align-items: flex-start; }
  .sf-more .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-drop, .pp-up__fill, .pp-staff > summary::before, .field textarea, .field select, .pp-item { transition: none; }
}