/* ==========================================================================
   Monarch Interactive: client portal
   Same tokens and the same look as the public site's styles.css. No framework
   and no JavaScript. Change --accent or --display here and every page follows.
   ========================================================================== */
:root {
  --ground: #F4F4EF;
  --panel: #E7E9E1;
  --paper: #FFFFFF;
  --ink: #151A17;
  --ink-2: #2F3632;
  --muted: #4A524D;
  --rule: #C9CDC4;
  --on-dark-2: #DADDD4;
  --accent: #F26B1D;

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  /* The page grows with the screen: 1160px on a laptop, up to 1680px on a wide
     monitor. Staff screens stay at 1160px, see .staff further down. */
  --wrap: clamp(1160px, 86vw, 1680px);
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(36px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, dt { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[id] { scroll-margin-top: 24px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.stack { display: flex; flex-direction: column; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: var(--gutter); top: -120px; z-index: 10;
  background: var(--ink); color: var(--ground); padding: 10px 16px; font-weight: 600;
}
.skip:focus { top: 10px; }

/* ------------------------------ type ---------------------------------- */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(42px, 6.6vw, 88px); line-height: 1; position: relative; z-index: 0; }
.h2 { font-size: clamp(34px, 4.8vw, 60px); }
.h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.02em; }
.lead { font-size: 19px; color: var(--ink-2); max-width: 640px; }
.label { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.label--muted { color: var(--muted); }
.hl { background: var(--accent); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Sits the highlight behind the line above it, so it never covers a descender. */
.h1 .hl { position: relative; z-index: -1; }
.eyebrow { background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 12px; }
.hero__sub { max-width: 620px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
.fine { font-size: 16px; color: var(--muted); }
.fine--ruled { border-top: 1px solid var(--rule); padding-top: 18px; }

/* ----------------------------- buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 30px; border: 0; border-radius: 3px;
  background: var(--ink); color: var(--ground);
  font-weight: 700; font-size: 18px; text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn--lift { box-shadow: 6px 6px 0 var(--accent); }
.btn--lift:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--accent); }
.btn--small { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; }
.btn:not(.btn--lift):hover { background: #000000; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.text-link:hover { text-decoration-color: var(--accent); }

.card {
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(22px, 3vw, 34px);
}
.tag { display: inline-block; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); padding: 5px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }

/* ------------------------------ header --------------------------------- */
.site-header { border-bottom: 2px solid var(--ink); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 22px; }
/* The logo is a drawing, not type: logo.svg holds the M speech block and both
   words as outlines. It is the same drawing as logo.svg on the public site,
   so if the logo changes, replace both files. */
.logo { flex: none; display: block; }
.logo img { display: block; width: auto; height: 50px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-underline-offset: 5px; }
.site-nav__who { font-size: 16px; color: var(--muted); }
.site-footer { border-top: 2px solid var(--ink); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 26px; font-size: 15px; color: var(--muted); }
.site-footer a { text-underline-offset: 4px; }

.notice { margin-top: 20px; background: var(--paper); border: 2px solid var(--ink); padding: 12px 16px; font-weight: 600; }
.notice--error { background: var(--accent); }

/* --------------------------- section heads ----------------------------- */
.section__head { gap: 12px; margin-bottom: 32px; align-items: center; text-align: center; }
.section__head .h2 { max-width: 940px; }

/* ------------------------- sign in, set password ----------------------- */
.entry { padding-block: clamp(48px, 7vw, 88px); }
.entry__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.entry__lead { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.entry__form { flex: 1 1 380px; max-width: 460px; min-width: 0; margin: 0 8px 8px 0; display: flex; flex-direction: column; gap: 20px; }
.entry__title { font-size: 34px; letter-spacing: -0.02em; }
.entry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 4px 8px 4px 0; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--ground); border: 2px solid var(--ink); border-radius: 0;
  font-size: 17px;
}
.input--area { min-height: 104px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.input::placeholder { color: var(--muted); opacity: 1; }

/* ---------------------- progress page: where it stands ----------------- */
.status { padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px); }
.status__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; }
.status__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.status__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.facts { background: var(--ink); color: var(--ground); }
.facts__inner { display: flex; flex-wrap: wrap; gap: 22px 32px; padding-block: 28px; }
.fact { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.fact dt { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-2); }
.fact dt::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); }
.fact dd { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }

.staffbar { background: var(--accent); border-bottom: 2px solid var(--ink); font-weight: 600; }
.staffbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 12px; }

/* ------------------- waiting on the client: send, approve --------------- */
/* What we need from them and what is waiting for their approval sit side by
   side as cards of the same kind, above the steps. */
.section--approve { padding-bottom: 0; }
.approve-list { max-width: 980px; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 28px; align-items: stretch; }
.approve { min-width: 0; margin: 0 8px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.approve--need { border-left-width: 12px; border-left-color: var(--accent); }
.approve__head { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.approve__head .tag { text-transform: uppercase; }
.approve__detail { font-size: 18px; color: var(--ink-2); }
.approve__form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 6px 8px 0 0; }

/* -------------------------------- the steps ---------------------------- */
.psteps { max-width: 980px; margin-inline: auto; }
.pstep { display: flex; gap: clamp(14px, 2.4vw, 28px); }
.pstep__rail { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; }
.pstep__num {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--paper);
  font-family: var(--display); font-weight: 800; font-size: 20px;
}
.pstep--done .pstep__num { background: var(--ink); color: var(--ground); }
.pstep--now .pstep__num { background: var(--accent); }
.pstep__line { width: 2px; flex: 1 1 auto; min-height: 20px; background: var(--rule); }
.pstep__line--done { background: var(--ink); }
.pstep__body { flex: 1 1 0; min-width: 0; padding: 8px 0 36px; }
.pstep__body--now { padding: 0 8px 44px 0; }
.pstep__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.pstep__name { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.pstep__text { margin-top: 8px; max-width: 640px; color: var(--ink-2); }
.pstep:last-child .pstep__body { padding-bottom: 0; }
.pstep:last-child .pstep__body--now { padding-bottom: 8px; }

.now-card { display: flex; flex-direction: column; gap: 24px; }
.now-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.now-card__name { font-size: clamp(32px, 4vw, 46px); line-height: 1.03; letter-spacing: -0.025em; }
.now-card__lead { max-width: 660px; font-size: 18px; color: var(--ink-2); }
.now-card__note { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--ink-2); }
.cols { display: flex; flex-wrap: wrap; gap: 24px 28px; }
.col { flex: 1 1 190px; border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ticks { display: flex; flex-direction: column; gap: 8px; }
.ticks li { display: flex; gap: 12px; }
.ticks li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.5em; border: 1.5px solid var(--ink); background: var(--paper); }
.ticks--done li::before { background: var(--ink); }
.ticks--now li::before { background: var(--accent); }
.ticks--todo { color: var(--ink-2); }

/* ------------------------------ meeting notes -------------------------- */
/* The date square sits on the same rail as the step numbers above it. */
.section--notes { padding-top: 0; }
.mnotes { max-width: 980px; margin-inline: auto; display: flex; flex-direction: column; gap: 36px; }
.mnote { display: flex; align-items: flex-start; gap: clamp(14px, 2.4vw, 28px); }
.mnote__date {
  flex: 0 0 56px; min-height: 56px; padding: 7px 0 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--ink); color: var(--ground); border: 2px solid var(--ink);
}
.mnote__day { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.mnote__month { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.mnote__card { flex: 1 1 0; min-width: 0; margin: 0 8px 8px 0; display: flex; flex-direction: column; gap: 22px; }
.mnote__head { display: flex; flex-direction: column; gap: 10px; }
.mnote__title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -0.025em; }
.mnote__who { color: var(--ink-2); }
.mnote__wholabel { font-weight: 700; color: var(--ink); margin-right: 6px; }
.mnote__part { display: flex; flex-direction: column; gap: 10px; }
.mnote__text { max-width: 700px; font-size: 18px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.mnote .ticks li { overflow-wrap: anywhere; }

/* -------------------------- updates and comments ----------------------- */
.feed { background: var(--panel); border-block: 1px solid var(--rule); }
.feed__inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.feed__empty { text-align: center; color: var(--muted); }
.composer { margin: 0 8px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.post { background: var(--paper); border: 2px solid var(--ink); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.post__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.post__name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.post__when { font-size: 15px; color: var(--muted); }
.post__body { color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
/* What the client says is set in the serif italic, the way the public site
   quotes customers. What we say is set plain. */
.post--client { background: var(--ground); }
.post--client .post__body { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.3; color: var(--ink); }

/* -------------------------------- on record ---------------------------- */
.records { display: flex; flex-wrap: wrap; gap: 20px 24px; }
.record { flex: 1 1 220px; border: 2px solid var(--ink); background: var(--paper); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.record--accent { background: var(--accent); }
.record__mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ground); font-family: var(--display); font-weight: 800; font-size: 15px; }
.record__title { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }
.record p { font-size: 16px; color: var(--ink-2); }
.record--accent p { color: var(--ink); }
.record a { margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--muted); text-underline-offset: 4px; }

/* ------------------------------ pick lists ----------------------------- */
.picklist { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 2px solid var(--ink); background: var(--paper); text-decoration: none; transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.pick:hover { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.pick__name { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.pick__go { font-weight: 600; }

/* ------------------------------ staff screens -------------------------- */
.section--staff { padding-block: clamp(36px, 5vw, 56px); }
.staff-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }

/* Staff home: one card per client. The strip along the bottom of each job
   says who is waiting on whom, in words as well as colour. */
.clients-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 36px; }
.staff-head--flush { margin-bottom: 0; }
.quickadd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.quickadd .field { gap: 6px; }
.label--small { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.input--compact { width: 250px; max-width: 100%; min-height: 48px; padding: 0 14px; background: var(--paper); font-size: 16px; }
.btn--tiny { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; flex: none; }

.clientcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 28px; }
.clientcard { min-width: 0; display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); }
.clientcard--needs { box-shadow: 8px 8px 0 var(--ink); }
.clientcard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding: 24px 26px 0; }
.clientcard__name { font-size: 32px; line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.clientcard__name a { text-decoration: none; }
.clientcard__name a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.clientcard__people { font-size: 15px; font-weight: 600; text-underline-offset: 4px; }

.job { flex: 1 1 auto; display: flex; flex-direction: column; }
.job + .job { border-top: 2px solid var(--ink); }
.job__body { flex: 1 1 auto; padding: 16px 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.job__step { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.job__count { display: flex; align-items: baseline; gap: 10px; }
.job__num { font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.job__of { font-size: 15px; font-weight: 600; color: var(--muted); }
.job__where { display: flex; flex-direction: column; gap: 8px; }
.job__stepname { font-weight: 600; }
.job__line { font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.meter { display: flex; gap: 4px; }
.meter__seg { width: 22px; height: 12px; border: 2px solid var(--ink); background: var(--paper); }
.meter__seg--done { background: var(--ink); }
.meter__seg--now { background: var(--accent); }
.job__foot { border-top: 2px solid var(--ink); padding: 14px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; background: var(--ground); }
.job__foot--needs { background: var(--accent); }
.job__foot--waiting { background: var(--panel); }
.job__status { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.job__foot--clear .job__status { font-weight: 400; color: var(--muted); }
.job__label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* ==========================================================================
   Staff screens: the tool the two of us work in.
   Same colours and typefaces as the client's page, a different job. Nothing
   here is on show. No panels, no shadows, no poster headings: sections are
   named in the left margin and separated by a rule, fields are lines to fill
   in, and the only orange is something that needs one of us.
   ========================================================================== */
.staff { --wrap: 1160px; }
.staff .site-header__inner { padding-block: 10px; }
.staff .logo img { height: 38px; }
.staff .site-nav { gap: 4px 20px; }
.staff .site-nav a { min-height: 34px; font-size: 15px; }
.staff .site-nav__who { font-size: 14px; }
.staff .site-nav .btn--small { min-height: 32px; padding: 0 12px; font-size: 14px; }
.staff .notice { margin-top: 14px; padding: 8px 12px; font-size: 15px; border-width: 1px; }
.staff .site-footer__inner { padding-block: 14px; font-size: 13px; }

.tool { --line: 34px; --field: #FBFBF8; padding-block: 26px 72px; font-size: 15px; line-height: 1.45; }
.tool a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tool a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tool :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.t-dim { color: var(--muted); }
.t-help { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--muted); }
.t-mark { display: inline-block; padding: 0 6px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }

/* Page head: where you are, what it is called, what you can do. */
.t-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; padding-bottom: 14px; }
.t-head__grow { flex: 1 1 420px; min-width: 0; }
.t-crumb { margin-bottom: 2px; font-size: 13px; color: var(--muted); }
.t-title { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.t-facts { display: flex; flex-wrap: wrap; gap: 4px 28px; max-width: 900px; padding-bottom: 18px; font-weight: 600; }
.t-facts .t-dim { margin-right: 4px; font-weight: 400; }
.t-lede { max-width: 780px; padding-bottom: 18px; color: var(--ink-2); }

/* A section: its name in the margin, its content beside it. */
.t-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 36px; padding: 18px 0 26px; border-top: 1px solid var(--ink); }
.t-sec__side { align-self: start; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.t-sec__name { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.t-sec__body { min-width: 0; }
.t-sec__body:not(.t-fields) { display: flex; flex-direction: column; gap: 14px; }

/* Fields are lines to fill in. */
.t-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 22px; align-items: start; }
.t-f { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.t-f--2 { grid-column: span 2; }
.t-f--3 { grid-column: span 3; }
.t-f--6 { grid-column: span 6; }
.t-f--8 { grid-column: span 8; }
.t-f--12 { grid-column: 1 / -1; }
.t-f > .t-btn { align-self: flex-start; }
.t-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.t-label .t-help { margin-left: 4px; }
.t-in {
  width: 100%; height: var(--line); padding: 0 8px;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: var(--field); font-size: 15px;
}
.t-in:hover { background: var(--paper); }
.t-in:focus-visible, .t-sheet:focus-visible { outline: 0; background: var(--paper); box-shadow: 0 2px 0 var(--accent); }
.t-in::placeholder, .t-sheet::placeholder { color: var(--muted); opacity: 0.7; }
.t-in--date { width: 160px; }
.t-in--select { width: auto; max-width: 100%; padding-right: 4px; }
.t-in--mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.t-in--title { height: 42px; padding: 0 8px; margin-left: -8px; width: calc(100% + 8px); background: transparent; border-bottom-color: transparent; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.t-in--title:hover { border-bottom-color: var(--ink); }
/* On a wording page the grey text is the standard wording, not something typed. */
.t-in--std::placeholder { font-style: italic; opacity: 0.85; }

/* A sheet is somewhere to write more than a line. White goes to the client. */
.t-sheet {
  display: block; width: 100%; min-height: 150px; padding: 10px 12px;
  border: 1px solid var(--rule); border-bottom-color: var(--ink); border-radius: 0;
  background: var(--paper); font-size: 15px; line-height: 1.55; resize: vertical;
  field-sizing: content;
}
.t-sheet--short { min-height: 58px; }
.t-sheet--tall { min-height: 260px; }
.t-sheet--private { background: var(--panel); border-color: var(--rule); border-bottom-color: var(--ink); }

.t-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--line); padding: 0 14px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--ground);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.t-btn:hover { background: #000000; }
.t-btn--quiet { background: transparent; color: var(--ink); }
.t-btn--quiet:hover { background: var(--paper); }
.t-btn--mini { height: 28px; padding: 0 10px; font-size: 13px; }
/* The loud one: orange with a hard shadow.
   For the single button on a row that takes you somewhere else. */
.t-btn--pop {
  margin: 0 3px 3px 0; border-width: 2px; background: var(--accent); color: var(--ink);
  font-weight: 700; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.t-btn--pop:hover { background: var(--accent); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

/* A row of fields with its button on the end. */
.t-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.t-inline > .t-f { flex: 0 0 auto; }
.t-inline > .t-f--grow { flex: 1 1 240px; }

/* Lists: one line each, ruled. */
.t-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.t-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.t-row__when { flex: 0 0 96px; color: var(--muted); }
.t-row__main { flex: 0 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.t-row__meta { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--muted); }
.t-row__act { margin-left: auto; align-self: center; display: flex; flex-wrap: wrap; gap: 8px; }

.t-post { padding-left: 12px; border-left: 3px solid var(--rule); }
.t-post--client { border-left-color: var(--accent); }
.t-post__meta { font-size: 13px; color: var(--muted); }
.t-post__meta b { margin-right: 4px; font-weight: 700; color: var(--ink); }
.t-post__body { max-width: 760px; white-space: pre-line; overflow-wrap: anywhere; }

.t-reads { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 12px; border-top: 1px solid var(--rule); }
.t-reads b { font-weight: 600; color: var(--ink-2); }

.t-callout { margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--ink); border-left: 4px solid var(--accent); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }

/* Steps: the road, small. */
.t-steps { display: flex; flex-direction: column; }
.t-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; }
.t-step__rail { display: flex; flex-direction: column; align-items: center; }
.t-step__num {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: var(--paper);
  font-family: var(--display); font-weight: 800; font-size: 13px;
}
.t-step__num--end { width: 14px; height: 14px; margin-top: 7px; }
.t-step--done .t-step__num { background: var(--ink); color: var(--ground); }
.t-step--now .t-step__num { background: var(--accent); }
.t-step__line { flex: 1 1 auto; width: 1px; min-height: 8px; background: var(--rule); }
.t-step--done .t-step__line { background: var(--ink); }
.t-step__body { min-width: 0; padding-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.t-step:last-child .t-step__body { padding-bottom: 0; }
.t-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 28px; }
.t-step__name { font-size: 16px; font-weight: 700; }
.t-step__date { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.t-step__date .t-in { width: 200px; height: 28px; font-size: 14px; }
.t-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.t-item__label { flex: 1 1 240px; min-width: 0; }
.t-item .t-in { height: 28px; font-size: 14px; }
.t-item--add .t-in:not(:focus):not(:hover) { background: transparent; border-bottom-color: var(--rule); }

/* Writing a meeting note. */
.t-head--note { align-items: center; }
.t-meta { padding: 14px 0 18px; border-top: 1px solid var(--ink); }
.t-note { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px 36px; padding-top: 16px; border-top: 1px solid var(--ink); }
.t-note__col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.t-colname { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.t-colname .t-help { margin-left: 6px; font-family: var(--body); letter-spacing: 0; }
.t-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.t-pair > .t-f { grid-column: auto; }
.t-f--fill { flex: 1 1 auto; }
.t-f--fill .t-sheet { flex: 1 1 auto; min-height: 220px; }
.t-savebar {
  position: sticky; bottom: 0; z-index: 2; margin-top: 22px; padding: 12px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: var(--ground); border-top: 1px solid var(--ink);
}
.t-delete { margin-top: 28px; justify-content: flex-end; align-items: center; color: var(--muted); font-size: 13px; }
.t-check { display: inline-flex; align-items: center; gap: 8px; }
.t-check input { width: 16px; height: 16px; accent-color: var(--ink); }
.t-saveline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: var(--line); }

/* Writing a note together (note.js). Each box saves as it is typed, so the
   "Save draft" button and its warning go. A box the other one of us is typing
   in is marked with their name and cannot be typed in until they leave it. */
.tool [hidden] { display: none !important; }
.tool .notice { margin: 0 0 14px; }
.t-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.is-live [data-nolive] { display: none; }
.t-who { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.t-who::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--ink); }
.t-label.has-who .t-help { display: none; }
.t-here::before { content: "\00B7"; margin: 0 7px; }
.t-in.is-held, .t-sheet.is-held, .t-in.is-held:hover {
  background: transparent; color: var(--ink-2); cursor: not-allowed;
  border-color: var(--ink); border-style: dashed; box-shadow: none;
}
.t-in--select.is-held { opacity: 1; }
/* Words that could not be saved because the other one of us got there first.
   Orange, because one of us has to decide what happens to them. */
.t-kept { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ink); border-left: 4px solid var(--accent); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.t-kept__why { font-size: 13px; font-weight: 600; }
.t-kept__text { margin: 0; max-height: 200px; overflow: auto; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-kept__do { display: flex; flex-wrap: wrap; gap: 8px; }
.t-in[aria-invalid="true"] { box-shadow: 0 2px 0 var(--accent); }

/* The one place the client's look appears on a staff screen: a preview of
   exactly what they will be shown. */
.t-preview { max-width: 860px; padding-top: 20px; border-top: 1px solid var(--ink); }
.t-preview--flush { padding-top: 0; border-top: 0; }
.t-note--published .mnote__card { margin-bottom: 8px; }

@media (max-width: 860px) {
  .t-sec { grid-template-columns: minmax(0, 1fr); }
  .t-sec__side { position: static; }
  .t-note { grid-template-columns: minmax(0, 1fr); }
  .t-step__date { margin-left: 0; flex: 1 1 100%; }
  .t-step__date .t-in { flex: 1 1 auto; width: auto; }
}
@media (max-width: 620px) {
  .t-fields > .t-f { grid-column: 1 / -1; }
  .t-pair { grid-template-columns: minmax(0, 1fr); }
  .t-title, .t-in--title { font-size: 24px; }
  .t-row__when { flex-basis: auto; }
}

/* ==========================================================================
   Wide screens: the client's page uses the width instead of sitting in a
   centred column. Each section's heading moves into the left margin, under
   the first of the four facts, and its content runs across the other three.
   Below 1700px none of this applies and the headings stay centred on top.
   ========================================================================== */
@media (min-width: 1700px) {
  .split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .split > * { grid-column: 2 / -1; min-width: 0; }
  .split > .section__head { grid-column: 1; position: sticky; top: 28px; margin-bottom: 0; align-items: flex-start; text-align: left; }
  .split > .section__head .h2 { font-size: clamp(44px, 2.9vw, 56px); text-wrap: wrap; }
  .split > .section__head .lead { font-size: 18px; }

  .facts__inner { flex-wrap: nowrap; }
  .fact { flex: 1 1 0; min-width: 0; }

  .split > .mnotes, #steps .psteps { max-width: none; margin-inline: 0; }
  .split > .feed__inner { max-width: none; margin-inline: 0; }
  .post__body { max-width: 860px; }
  .split > .feed__inner .feed__empty { text-align: left; }
  .approve-list { max-width: none; margin-inline: 0; }
  .approve__detail, .approve__form .fine { max-width: 720px; }
  .now-card__lead { max-width: 760px; font-size: 19px; }
  .mnote__text { max-width: 820px; }
}

@media (max-width: 620px) {
  .site-nav__who { display: none; }
  .fact { flex-basis: 140px; }
  .fact dd { font-size: 24px; }
  .pstep__rail { flex-basis: 44px; }
  .pstep__num { width: 44px; height: 44px; font-size: 16px; }
  .pstep__name { font-size: 26px; }
  .mnote__date { flex-basis: 44px; min-height: 44px; }
  .mnote__day { font-size: 18px; }
  .mnote__month { font-size: 10px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Pages a client sees: a calmer type scale.
   The sizes further up were drawn for the public site's poster look. On a
   working page they shout, most of all on a wide monitor. Everything a client
   reads is set smaller here, and the page stops growing past 1400px. Staff
   screens are left exactly as they were.
   ========================================================================== */
body:not(.staff) { --wrap: clamp(1160px, 80vw, 1400px); font-size: 16px; }
body:not(.staff) .h1 { font-size: clamp(32px, 4vw, 52px); }
body:not(.staff) .h2 { font-size: clamp(26px, 3vw, 36px); }
body:not(.staff) .h3 { font-size: clamp(21px, 2vw, 26px); }
body:not(.staff) .lead { font-size: 17px; }
body:not(.staff) .label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
body:not(.staff) .hero__sub { font-size: 17px; }
body:not(.staff) .fine { font-size: 14px; }
body:not(.staff) .eyebrow { padding: 5px 10px; font-size: 12px; }
body:not(.staff) .tag { padding: 4px 9px; font-size: 11px; }
body:not(.staff) .btn { min-height: 46px; padding: 0 22px; font-size: 16px; }
body:not(.staff) .btn--small { min-height: 40px; padding: 0 18px; font-size: 15px; }
body:not(.staff) .text-link { min-height: 40px; font-size: 15px; }
body:not(.staff) .card { padding: clamp(18px, 2.2vw, 26px); box-shadow: 6px 6px 0 var(--ink); }
body:not(.staff) .input { min-height: 46px; font-size: 16px; }
body:not(.staff) .input--area { min-height: 92px; }
body:not(.staff) .site-header__inner { padding-block: 16px; }
body:not(.staff) .logo img { width: auto; height: 42px; }
body:not(.staff) .site-nav a, body:not(.staff) .site-nav__who { font-size: 15px; }
body:not(.staff) .status { padding-block: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px); }
body:not(.staff) .status__main { gap: 14px; }
body:not(.staff) .facts__inner { gap: 16px 32px; padding-block: 20px; }
body:not(.staff) .fact dt { font-size: 11px; }
body:not(.staff) .fact dt::before { width: 8px; height: 8px; }
body:not(.staff) .fact dd { font-size: 21px; }
body:not(.staff) .approve__detail { font-size: 16px; }
body:not(.staff) .pstep__rail { flex-basis: 42px; }
body:not(.staff) .pstep__num { width: 42px; height: 42px; font-size: 15px; }
body:not(.staff) .pstep__body { padding-top: 9px; padding-bottom: 22px; }
body:not(.staff) .pstep__body--now { padding-top: 0; padding-bottom: 28px; }
body:not(.staff) .pstep__name { font-size: 21px; }
body:not(.staff) .now-card { gap: 18px; }
body:not(.staff) .now-card__name { font-size: clamp(24px, 2.2vw, 30px); }
body:not(.staff) .now-card__lead, body:not(.staff) .mnote__text { font-size: 16px; }
body:not(.staff) .now-card__note { font-size: 17px; }
body:not(.staff) .mnote__title { font-size: clamp(22px, 2.2vw, 28px); }
body:not(.staff) .post { padding: 16px 18px; gap: 6px; }
body:not(.staff) .post__name { font-size: 16px; }
body:not(.staff) .post__when { font-size: 13px; }
body:not(.staff) .post--client .post__body { font-size: 18px; }
body:not(.staff) .record__title { font-size: 17px; }
body:not(.staff) .record p { font-size: 15px; }
body:not(.staff) .entry__title { font-size: 26px; }
body:not(.staff) .pick__name { font-size: 20px; }
@media (min-width: 1700px) {
  body:not(.staff) .split > .section__head .h2 { font-size: clamp(28px, 1.9vw, 34px); }
}
@media (max-width: 620px) {
  body:not(.staff) .fact dd { font-size: 19px; }
  body:not(.staff) .pstep__rail { flex-basis: 38px; }
  body:not(.staff) .pstep__num { width: 38px; height: 38px; font-size: 14px; }
  body:not(.staff) .pstep__body { padding-top: 8px; }
  body:not(.staff) .pstep__body--now { padding-top: 0; }
  body:not(.staff) .pstep__name { font-size: 19px; }
}

@media print {
  .site-nav, .composer, .staffbar, .skip, .status__actions, .mnotes__foot { display: none !important; }
  .card { box-shadow: none; }
}

/* ==========================================================================
   A project's staff page (staff_project.html, job.go).

   At rest there is nothing to type into: the five steps as a road, three
   lists saying whose move each open thing is, and one button. Everything
   that changes the client's page is in a popout, and each popout shows the
   piece of the client's page it changes.

   Colour means one thing throughout. Orange needs one of us. Grey is waiting
   on the client. Black is done, or on record.
   ========================================================================== */
.jobpage { --them: #D3D7CC; font-size: 16px; line-height: 1.45; }
/* The page beside its Actions panel. */
.j-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.j-main { min-width: 0; padding-block: 34px 64px; }
.j-main > .wrap { padding-inline: clamp(20px, 2.4vw, 40px); }
.jobpage a { text-underline-offset: 3px; }

.j-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.j-crumb { margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.j-title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.2vw, 46px); line-height: 1.02; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.j-head__do { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-weight: 600; }

/* The orange button. One per screen: the thing to press next. */
.j-go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 0 6px 6px 0; padding: 0 26px;
  border: 2px solid var(--ink); border-radius: 2px; background: var(--accent); color: var(--ink);
  font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: 6px 6px 0 var(--ink); cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.j-go:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.j-btn {
  flex: none; min-height: 48px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--ground); font-size: 15px; font-weight: 700; cursor: pointer;
}
.j-btn:hover { background: #000000; }
.j-link { padding: 0; border: 0; background: transparent; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.j-link:hover, .jobpage a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ------------------------------- the road -------------------------------- */
.j-road { position: relative; margin-top: 36px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.j-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--ink); }
.j-tile {
  position: relative; flex: 1 1 124px; min-width: 0; min-height: 150px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.j-tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.j-tile__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.j-tile__main { display: flex; flex-direction: column; gap: 4px; }
.j-tile__name { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.72vw, 22px); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.j-tile__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 20px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.j-tile--done { background: var(--ink); color: var(--ground); }
.j-tile--done .j-tile__kicker, .j-tile--done .j-tile__line { color: var(--on-dark-2); }
.j-tile--done:hover { box-shadow: 4px 4px 0 var(--accent); }
.j-tile--now { flex: 1.8 1 204px; margin: -8px 8px 8px 0; padding: 16px 20px; background: var(--accent); box-shadow: 8px 8px 0 var(--ink); }
.j-tile--now:hover { box-shadow: 10px 10px 0 var(--ink); }
.j-tile--now .j-tile__kicker { color: var(--ink); }
.j-tile--now .j-tile__main { gap: 8px; }
.j-tile--now .j-tile__name { font-size: 32px; line-height: 1; letter-spacing: -0.03em; }
.j-tile--now .j-tile__line { color: var(--ink); font-weight: 600; }
.j-tile--launch { flex: 0 1 112px; padding: 16px 12px; border-style: dashed; background: var(--ground); }
.j-tile--launched { border-style: solid; background: var(--ink); color: var(--ground); }
.j-tile--launched .j-tile__kicker, .j-tile--launched .j-tile__line { color: var(--on-dark-2); }
.j-tile__date { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.015em; }

.j-squares { display: inline-flex; gap: 4px; }
.j-sq { flex: none; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--paper); }
.j-sq--done { background: var(--ink); }
.j-sq--now { background: var(--accent); }
.j-sq--them { background: var(--them); }
.j-tile--now .j-sq--now { background: var(--paper); }
.j-tile--now .j-sq--todo { background: transparent; }

/* ------------------------------ whose move ------------------------------- */
.j-cols { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 28px; align-items: start; }
.j-col { min-width: 0; container-type: inline-size; }
.j-col__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 14px; }
.j-col__head h2 { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.j-col__head a { flex: none; font-size: 14px; font-weight: 600; }
.j-col__head--you { background: var(--accent); }
.j-col__head--them { background: var(--them); }
.j-col__head--rec { background: var(--ink); color: var(--ground); }
.j-count { flex: none; min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ground); font-family: var(--display); font-weight: 800; font-size: 15px; }
.j-row { display: flex; align-items: center; gap: 12px; padding: 0 2px; border-bottom: 1px solid var(--rule); }
.j-row__main { flex: 1 1 auto; min-width: 0; display: block; padding: 14px 0 13px; text-decoration: none; }
a.j-row__main:hover .j-row__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* The small buttons at the end of a line: remind, edit, delete. Quiet until
   pointed at, so a list of lines still reads as a list. */
.j-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.j-act {
  flex: none; min-width: 32px; height: 32px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
}
.j-act--remind { padding: 0 10px 0 8px; }
/* In a tight column the word gives way and the bell stands for it. */
@container (max-width: 318px) {
  .j-act--remind { padding: 0 7px; }
  .j-act__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.j-act:hover, .j-act:focus-visible { border-color: var(--ink); background: var(--accent); text-decoration: none; }
.j-act--drop:hover, .j-act--drop:focus-visible { background: var(--ink); color: var(--paper); }
.j-col__head--rec ~ .j-row .j-act, .j-log .j-act { background: transparent; }
.j-col__head--rec ~ .j-row .j-act:hover, .j-log .j-act:hover { background: var(--accent); }
.j-col__head--rec ~ .j-row .j-act--drop:hover, .j-log .j-act--drop:hover { background: var(--ink); }
.j-row__title { display: block; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.j-row__title .t-mark { margin-left: 4px; vertical-align: 2px; }
.j-row__sub { display: block; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; color: var(--muted); }
.j-empty { padding: 14px 2px; font-size: 15px; color: var(--muted); }
.j-foot { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--muted); }
.j-foot b { font-weight: 600; color: var(--ink-2); }

/* -------------------------------- popouts -------------------------------- */
/* A popout shows only while the address ends in its name. */
.j-pop { display: none; position: fixed; inset: 0; z-index: 20; }
.j-pop:target { display: block; }
html:has(.j-pop:target) { overflow: hidden; }
.j-pop__shade { position: absolute; inset: 0; background: rgba(21, 26, 23, 0.62); cursor: default; }
.j-sheet {
  position: absolute; top: max(16px, 9vh); left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100% - 44px)); max-height: calc(100vh - max(16px, 9vh) - 28px); overflow: auto;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
}
.j-sheet--small { width: min(560px, calc(100% - 44px)); padding: 26px 30px 28px; }
.j-sheet--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.j-sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.j-sheet__title { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.02; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.j-sheet__title--big { font-size: 38px; line-height: 1; }
.j-sheet__form { min-width: 0; padding: 26px 30px 28px; display: flex; flex-direction: column; }
.j-sheet__form .j-sheet__title { margin-bottom: 22px; }
.j-sheet__form > .j-fields { flex: 1 1 auto; }
.j-sheet__page { min-width: 0; padding: 26px 26px 28px; background: var(--panel); border-left: 3px solid var(--ink); display: flex; flex-direction: column; }
.j-sheet__pagetop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.j-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.j-kicker--top { margin-bottom: 14px; color: var(--muted); }
.j-x { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.j-x:hover { background: var(--accent); }

/* ------------------------------- actions --------------------------------- */
/* The Actions panel: what can be done to the client's page, by name, docked
   down the right-hand side. It stays in view as the page scrolls. */
.j-rail { width: 272px; background: var(--panel); border-left: 3px solid var(--ink); }
.j-rail__in { position: sticky; top: 0; max-height: 100vh; overflow: auto; padding: 26px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.j-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.j-rail__title { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.025em; }
.j-rail__fold { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.j-rail__fold:hover { background: var(--accent); }
.j-rail__list { display: flex; flex-direction: column; gap: 10px; }
.j-rail__item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 72px; padding: 11px 12px;
  border: 2px solid var(--ink); background: var(--paper); text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.j-rail__item:hover, .j-rail__item:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); text-decoration: none; }
.j-rail__pic { display: flex; align-items: center; justify-content: center; width: 48px; height: 36px; }
.j-rail__pic .j-pic { flex: none; transform: scale(0.66); }
.j-rail__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.j-rail__name { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.12; letter-spacing: -0.015em; }
.j-rail__does { font-size: 13px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.j-rail__short { display: none; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; }
/* Folded down: a strip of pictures, each with one word under it. */
.j-rail--narrow { width: 96px; }
.j-rail--narrow .j-rail__in { padding: 26px 10px 28px; }
.j-rail--narrow .j-rail__top { justify-content: center; }
.j-rail--narrow .j-rail__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.j-rail--narrow .j-rail__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; min-height: 0; padding: 8px 2px 8px; }
.j-rail--narrow .j-rail__text { display: none; }
.j-rail--narrow .j-rail__short { display: block; }
/* A small drawing of what each action does to the client's page. */
.j-pic { display: flex; align-items: center; height: 46px; }
.j-pic--say { width: 62px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 78%, 36% 78%, 0 100%); }
.j-pic--step span:nth-child(1) { width: 30px; height: 30px; background: var(--ink); }
.j-pic--step span:nth-child(2) { width: 18px; height: 4px; background: var(--ink); }
.j-pic--step span:nth-child(3) { width: 40px; height: 40px; border: 2px solid var(--ink); background: var(--accent); box-shadow: 4px 4px 0 var(--ink); }
.j-pic--stamp { padding-left: 4px; }
.j-pic--stamp span { width: 60px; height: 38px; border: 2px solid var(--ink); background: var(--accent); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-6deg); }
.j-pic--card span { position: relative; width: 62px; height: 42px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
.j-pic--card span::after { content: ""; position: absolute; left: 6px; bottom: 6px; width: 30px; height: 10px; background: var(--ink); }
.j-pic--note { align-items: flex-start; gap: 6px; }
.j-pic--note span:nth-child(1) { width: 30px; height: 30px; background: var(--ink); }
.j-pic--note span:nth-child(2) { width: 34px; height: 27px; margin-top: 3px; background: linear-gradient(var(--ink) 0 5px, transparent 5px 11px, var(--ink) 11px 16px, transparent 16px 22px, var(--ink) 22px 27px); clip-path: polygon(0 0, 100% 0, 100% 40%, 76% 40%, 76% 60%, 88% 60%, 88% 100%, 0 100%); }
.j-pic--date span { position: relative; width: 46px; height: 44px; border: 2px solid var(--ink); border-top-width: 12px; background: var(--paper); }
.j-pic--date span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent); }

/* Boxes to type in. Only popouts have them. */
.j-fields { display: flex; flex-direction: column; gap: 16px; }
.j-fields--ruled { padding-top: 22px; border-top: 1px solid var(--rule); }
.j-f { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.j-f > label, .j-f > legend { padding: 0; font-size: 14px; font-weight: 700; }
.j-f--set > legend { margin-bottom: 6px; }
.j-in {
  width: 100%; min-height: 50px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--ground); font-size: 18px;
}
.j-in--paper { background: var(--paper); }
.j-in--area { display: block; min-height: 150px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.j-in--date { width: 220px; max-width: 100%; }
.j-in::placeholder { color: var(--muted); opacity: 0.75; }
.j-in:focus-visible { outline: 0; background: var(--paper); box-shadow: 4px 4px 0 var(--accent); }
.j-inline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.j-inline > .j-in { flex: 1 1 200px; width: auto; }
.j-lead { font-size: 17px; color: var(--ink-2); }
.j-note { font-size: 14px; color: var(--ink-2); }
.j-do { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.j-do > a, .j-do > .j-link { margin-bottom: 6px; font-size: 16px; font-weight: 600; }

/* The rounds of changes: none, one, two. */
.j-seg { display: flex; }
.j-seg__opt { position: relative; margin-left: -2px; cursor: pointer; }
.j-seg__opt:first-child { margin-left: 0; }
.j-seg__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.j-seg__opt span { min-width: 64px; height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); background: var(--paper); font-family: var(--display); font-size: 20px; font-weight: 800; }
.j-seg__opt input:checked + span { background: var(--ink); color: var(--ground); }
.j-seg__opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* What the client's page will show. Each one is drawn the way their page
   draws it, smaller. */
.j-preview { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.j-pv-post { background: var(--paper); border: 2px solid var(--ink); padding: 14px 16px; overflow-wrap: anywhere; }
.j-pv-post__meta { margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.j-pv-post__meta b { margin-right: 6px; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.j-pv-post__body { font-size: 15px; color: var(--ink-2); white-space: pre-line; }
.j-pv-post--client { background: var(--ground); }
.j-pv-edited, .post__edited { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.j-pv-edited { margin-left: 6px; }
/* The thing a popout is about to delete, withdraw or send a reminder for. */
.j-quote { padding-left: 14px; border-left: 4px solid var(--accent); font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.j-quote--long { max-height: 190px; overflow: auto; font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.45; letter-spacing: 0; white-space: pre-line; color: var(--ink-2); }
/* A reminder email, shown as it will arrive. */
.j-pv-mail { background: var(--paper); border: 2px solid var(--ink); overflow-wrap: anywhere; }
.j-pv-mail__subject { padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 700; line-height: 1.3; }
.j-pv-mail__body { padding: 14px 16px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
.j-pv-post--client .j-pv-post__body { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--ink); }
.j-pv-card { margin: 0 8px 8px 0; background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.j-pv-card__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.j-pv-card__title { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; }
.j-pv-card__detail { font-size: 15px; color: var(--ink-2); }
.j-pv-card__detail:empty { display: none; }
.j-pv-card--need { border-left-width: 10px; border-left-color: var(--accent); }
.j-pv-card__head { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.j-pv-due { background: var(--accent); border: 2px solid var(--ink); padding: 2px 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.j-pv-due:has([data-show]:empty) { display: none; }
.j-pv-btn { display: inline-flex; align-items: center; min-height: 40px; margin: 4px 5px 5px 0; padding: 0 18px; background: var(--ink); color: var(--ground); box-shadow: 5px 5px 0 var(--accent); font-size: 14px; font-weight: 700; }
.j-pv-band { background: var(--ink); color: var(--ground); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.j-pv-band__label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-2); }
.j-pv-band__label::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--accent); }
.j-pv-band__value { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.j-pv-meet { display: flex; align-items: flex-start; gap: 14px; }
.j-pv-meet__date { flex: none; width: 52px; min-height: 52px; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--ink); color: var(--ground); }
.j-pv-meet__day { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.j-pv-meet__month { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.j-pv-meet__title { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: anywhere; }

/* A step, and the whole log, slide in from the right. */
.j-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(540px, 100%); overflow: auto; background: var(--ground); border-left: 3px solid var(--ink); display: flex; flex-direction: column; }
.j-drawer__head { flex: none; padding: 24px 28px 26px; background: var(--paper); border-bottom: 3px solid var(--ink); }
.j-drawer__head .j-kicker { margin-top: 6px; color: var(--muted); }
.j-drawer__head--now { background: var(--accent); }
.j-drawer__head--now .j-kicker { color: var(--ink); }
.j-drawer__head--done { background: var(--ink); color: var(--ground); border-bottom-color: var(--ink); }
.j-drawer__head--done .j-kicker { color: var(--on-dark-2); }
.j-drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.j-drawer__title { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 46px); line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.j-drawer__body { flex: 1 1 auto; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 24px; }
.j-drawer__foot { margin-top: auto; padding-top: 8px; }
.j-group__name { margin-bottom: 10px; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.j-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.j-chip { display: inline-flex; max-width: 100%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.j-chip form { display: flex; min-width: 0; }
.j-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.j-chip__move { min-height: 40px; padding: 4px 6px 4px 14px; font-size: 16px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.j-chip__x { width: 34px; display: flex; align-items: center; justify-content: center; opacity: 0.6; }
.j-chip__x:hover { opacity: 1; }
.j-chip__move:hover { text-decoration: underline; text-underline-offset: 3px; }
.j-chip--done { background: var(--ink); color: var(--ground); }
.j-chip--now { background: var(--accent); }

.j-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.j-legend span { display: inline-flex; align-items: center; gap: 7px; }
.j-legend .j-sq, .j-log .j-sq, .j-group .j-sq { width: 13px; height: 13px; }
.j-log { display: flex; flex-direction: column; }
.j-log__item { display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; gap: 0 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.j-log__item .j-acts { align-self: start; }
.j-log__item .j-sq { margin-top: 6px; }
.j-log__title { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.j-log__sub { font-size: 14px; color: var(--muted); }
.j-log__body { margin-top: 6px; font-size: 15px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .j-road::before { display: none; }
  .j-tile--now { margin: 0 8px 8px 0; }
  .j-sheet { top: 12px; width: calc(100% - 32px); max-height: calc(100vh - 36px); box-shadow: 8px 8px 0 var(--ink); }
  .j-sheet--split { grid-template-columns: minmax(0, 1fr); }
  .j-sheet__page { border-left: 0; border-top: 3px solid var(--ink); }
  .j-sheet__form, .j-sheet__page, .j-sheet--small { padding: 20px; }
  .j-sheet__title { font-size: 28px; }
  .j-drawer__head, .j-drawer__body { padding-inline: 20px; }
  .j-act { min-width: 40px; height: 40px; }
}
/* On a screen too small for the page and an opened-out panel side by side,
   the panel is the strip whatever was chosen, and has no fold button. */
@media (max-width: 1180px) {
  .j-rail { width: 96px; }
  .j-rail .j-rail__in { padding: 26px 10px 28px; }
  .j-rail .j-rail__top { display: none; }
  .j-rail .j-rail__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; min-height: 0; padding: 8px 2px 8px; }
  .j-rail .j-rail__text { display: none; }
  .j-rail .j-rail__short { display: block; }
}
/* A narrow screen has no room for a panel beside the page at all, so the
   actions become a bar along the bottom. */
@media (max-width: 900px) {
  .j-frame { grid-template-columns: minmax(0, 1fr); }
  .j-rail, .j-rail--narrow { position: sticky; bottom: 0; z-index: 5; width: auto; border-left: 0; border-top: 3px solid var(--ink); }
  .j-rail .j-rail__in { position: static; max-height: none; overflow: visible; padding: 6px 6px 8px; }
  .j-rail .j-rail__list { flex-direction: row; gap: 4px; }
  .j-rail .j-rail__item { flex: 1 1 0; min-width: 0; gap: 2px; padding: 6px 1px 5px; border-width: 1px; }
  .j-rail .j-rail__item:hover { transform: none; box-shadow: none; background: var(--accent); }
  .j-rail .j-rail__pic { width: 44px; height: 32px; }
  .j-rail .j-rail__pic .j-pic { transform: scale(0.58); }
  .j-rail .j-rail__short { font-size: 11px; }
}
@media print {
  .j-pop, .j-go { display: none !important; }
}

/* ==========================================================================
   Hours (hours.go, staff_hours.html, staff_hours_week.html).

   A week is a grid: projects down the side, the seven days across, hours in
   the boxes. Same colours as the rest of the staff side: orange needs one of
   us, grey is waiting on the other one, black is approved.
   ========================================================================== */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 2px; padding: 0 5px;
  background: var(--accent); border: 1.5px solid var(--ink); color: var(--ink);
  font-size: 12px; font-weight: 800; line-height: 1; vertical-align: 1px; text-decoration: none;
}
.t-mark--grey { background: var(--panel); }
.t-mark--black { background: var(--ink); color: var(--ground); }
.h-num { color: var(--ink); }
.h-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.h-weeknav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 600; }
.h-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The grid. Scrolls sideways on its own on a narrow screen. */
.h-scroll { overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
.h-grid { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; }
.h-grid th, .h-grid td { padding: 0; text-align: left; vertical-align: middle; }
.h-grid thead th {
  padding: 8px 6px; border-bottom: 2px solid var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.h-grid thead th b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.h-grid__corner { width: 26%; }
.h-grid thead .h-grid__day { text-align: right; padding-right: 13px; }
.h-grid thead .h-grid__wk { width: 112px; }
.h-grid thead .is-today { color: var(--ink); box-shadow: inset 0 -5px 0 var(--accent); }
.h-grid thead .is-bad, .h-grid__daysum.is-bad { background: var(--accent); color: var(--ink); }
.h-grid tbody th { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule); }
.h-row__client { display: block; font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.h-row__proj { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.h-own { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 16px; vertical-align: 2px; }
.h-grid__box { padding: 7px 5px; border-bottom: 1px solid var(--rule); }
.h-grid__box.is-today { background: rgba(242, 107, 29, 0.07); }
.h-cell {
  width: 100%; height: 40px; padding: 0 8px; border: 1px solid transparent; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: var(--field); font-family: var(--display); font-weight: 700; font-size: 18px; text-align: right;
}
.h-cell:placeholder-shown, .h-cell[value=""] { border-bottom-color: var(--rule); }
.h-cell:hover { background: var(--paper); }
.h-cell:focus-visible { outline: 0; border-color: var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--accent); }
.h-cell.is-bad, .h-cell[aria-invalid="true"] { border: 2px solid var(--accent); background: #FFF1E8; }
.h-val { display: block; padding: 8px; text-align: right; font-family: var(--display); font-weight: 700; font-size: 18px; }
.h-grid__wk { padding: 10px 0 10px 8px; border-bottom: 1px solid var(--rule); text-align: right !important; font-family: var(--display); font-weight: 800; font-size: 20px; }
thead .h-grid__wk { font-family: var(--body); font-size: 12px; }
.h-grid__none { padding: 18px 0 !important; border-bottom: 1px solid var(--rule); color: var(--muted); }
.h-grid tfoot th, .h-grid tfoot td { padding: 12px 6px; }
.h-grid__foot { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.h-grid__daysum { text-align: right !important; padding-right: 13px !important; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink-2); }
.h-grid__all { text-align: right !important; padding-right: 0 !important; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }

.h-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.h-add__pick { min-width: 280px; border-bottom-style: dashed; background: transparent; font-weight: 600; }

/* The week's note: what was done. */
.h-summary { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 36px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
.h-summary__side { display: flex; flex-direction: column; gap: 6px; }
.h-summary__body { min-width: 0; max-width: 860px; }
.h-summary__text { white-space: pre-line; overflow-wrap: anywhere; }
.t-sheet.is-bad { border: 2px solid var(--accent); }
.h-savebar { justify-content: flex-start; }
.h-state [data-saved].is-bad { color: var(--ink); font-weight: 600; }
.h-state [data-saved].is-bad::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--accent); }
.h-form.is-live [data-nolive] { display: none; }

.h-back { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
.h-back .t-f--grow { flex: 1 1 360px; }

/* The Hours screen. */
.h-cols { --them: #D3D7CC; margin-top: 18px; }
.h-line__hours { flex: none; font-family: var(--display); font-weight: 800; font-size: 20px; }
.h-more { padding: 12px 2px; font-size: 14px; font-weight: 600; }
.h-todate { margin-top: 44px; }
.h-todate__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.h-todate__head h2 { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.h-sums { width: 100%; min-width: 560px; border-collapse: collapse; }
.h-sums th, .h-sums td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.h-sums thead th { padding-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.h-sums .h-sums__n { width: 120px; text-align: right; }
.h-sums td.h-sums__n { font-size: 16px; font-weight: 600; }
.h-sums td.h-sums__all { font-family: var(--display); font-weight: 800; font-size: 20px; }

@media (max-width: 860px) {
  .h-summary { grid-template-columns: minmax(0, 1fr); }
  .h-add__pick { min-width: 0; flex: 1 1 100%; }
}

/* ----------------------- the client's page: hours ----------------------- */
.hours { max-width: 980px; margin-inline: auto; }
.hours__totals { display: flex; flex-wrap: wrap; gap: 14px 44px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.hours__total { display: flex; flex-direction: column; gap: 4px; }
.hours__total dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hours__total dd { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.hours__h { font-size: 18px; letter-spacing: 0; }
.hours__key { flex: none; width: 11px; height: 11px; }
.hours__key--0 { background: var(--ink); }
.hours__key--1 { background: #9AA396; }
.hours__key--2 { background: var(--accent); }
.hours__weeks { display: flex; flex-direction: column; }
.hours__week { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(150px, auto) 64px; gap: 6px 18px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.hours__start { font-weight: 700; }
.hours__bar { display: block; width: 100%; height: 14px; }
.hours__seg--0 { fill: var(--ink); }
.hours__seg--1 { fill: #9AA396; }
.hours__seg--2 { fill: var(--accent); }
.hours__who { font-size: 14px; color: var(--ink-2); }
.hours__sum { font-family: var(--display); font-weight: 800; font-size: 20px; text-align: right; }
@media (min-width: 1700px) {
  .split > .hours { max-width: none; margin-inline: 0; }
}
@media (max-width: 620px) {
  .hours__week { grid-template-columns: minmax(0, 1fr) auto; }
  .hours__bar { grid-column: 1 / -1; grid-row: 2; }
  .hours__who { grid-column: 1 / -1; grid-row: 3; }
  .hours__sum { grid-column: 2; grid-row: 1; }
  .hours__total dd { font-size: 28px; }
}

/* ==========================================================================
   Billing (billing_*.go; billing.html, staff_billing.html, staff_invoice.html,
   staff_invoice_new.html, staff_client_billing.html, staff_settings.html).

   Staff screens use the working-tool look above, and the same three columns
   as a project's page: orange needs one of us, grey is waiting on the
   client, black is done. The client's Billing page uses the calm client
   look: what is due, how to pay it, then every invoice.

   Nothing here is written into a page: the content security policy refuses
   inline styles, so the GST meter is drawn with SVG, like the hours bars.
   ========================================================================== */

/* -------------------------- staff: the Billing page ---------------------- */
.b-facts { gap: 4px 28px; }
.b-facts > div { display: flex; gap: 6px; }
.b-facts dt { font-weight: 400; }
.b-cols { --them: #D3D7CC; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; align-items: start; }
.b-gap { margin-top: 44px; }
.b-item { padding: 13px 2px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.b-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-item__who { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.b-item__who a { text-decoration: none; }
.b-item__who a:hover { text-decoration: underline; }
.b-item__amount { flex: none; font-family: var(--display); font-weight: 800; font-size: 17px; }
.b-item__what { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.b-item__what b { color: var(--ink); }
.b-item__what a { color: var(--ink-2); }
.b-item__do { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.b-item__do form { display: contents; }
.b-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.b-btn:hover { border-color: var(--ink); }
.b-btn--ink { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.b-btn--ink:hover { background: #000000; }
.b-btn--pop { margin: 0 3px 3px 0; border: 2px solid var(--ink); background: var(--accent); box-shadow: 3px 3px 0 var(--ink); transition: transform 150ms ease, box-shadow 150ms ease; }
.b-btn--pop:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.b-empty { padding: 14px 2px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.b-sum { font-family: var(--display); font-weight: 800; }

/* The GST meter: one bar per test, each to $75,000. */
.b-meter { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.b-meter__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.b-meter__name { font-weight: 700; }
.b-meter__sum { font-family: var(--display); font-weight: 800; font-size: 17px; }
.b-meter__bar { display: block; width: 100%; height: 16px; background: var(--paper); border: 1px solid var(--ink); }
.b-meter__0 { fill: var(--ink); }
.b-meter__1 { fill: #6E776F; }
.b-meter__2 { fill: #B9BFB3; }
.b-keys { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--ink-2); }
.b-keys li { display: flex; align-items: center; gap: 6px; }
.b-key { flex: none; width: 10px; height: 10px; }
.b-key--0 { background: var(--ink); }
.b-key--1 { background: #6E776F; }
.b-key--2 { background: #B9BFB3; border: 1px solid #6E776F; }

.b-price { display: inline-flex; align-items: center; gap: 6px; }
.b-price__in { width: 120px; height: 28px; font-size: 14px; }
.b-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 28px; }
.b-how dd { font-weight: 600; }

/* -------------------------------- Settings -------------------------------- */
.b-fieldset { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.b-fieldset > legend { margin-bottom: 8px; }
.b-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.b-num { width: 58px; height: 30px; text-align: right; }
/* A box typed into inside a checkbox's or radio's label, not the box itself. */
.t-check input.b-num { width: 58px; height: 30px; }
.t-check input.t-in--date { width: 170px; height: 30px; margin: 0 0 4px; }
.b-check { align-items: flex-start; margin-top: 4px; }
.b-check input { margin-top: 2px; }
.b-value { height: var(--line); display: flex; align-items: center; font-weight: 700; }
.b-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.b-bank { margin-top: 30px; }
.b-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), max-content)); gap: 6px 32px; }
.b-dl dt { font-size: 13px; color: var(--muted); }
.b-dl dd { font-weight: 700; }
.b-bankform { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.b-bankform .t-fields { align-self: stretch; }
.b-warn { padding: 10px 12px; border: 1px solid var(--ink); border-left: 4px solid var(--accent); background: var(--paper); font-size: 14px; }

/* ------------------------------ one invoice ------------------------------- */
.b-invoice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 0 36px; align-items: start; }
.b-invoice__form { min-width: 0; }
.b-invoice__preview { position: sticky; top: 12px; margin-top: 18px; padding: 18px; background: var(--panel); border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.b-mail__to { padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.b-mail__note { margin-top: 2px; }
.b-attach { margin: 0 16px 16px; padding: 10px 12px; border: 1px solid var(--ink); display: flex; align-items: center; gap: 12px; text-decoration: none; }
.b-attach:hover { background: var(--ground); }
.b-attach__icon { flex: none; width: 30px; height: 38px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; background: var(--accent); border: 1.5px solid var(--ink); font-size: 9px; font-weight: 800; }
.b-lines { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.b-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.b-line__text { flex: 1 1 280px; width: auto; }
/* A line wraps to show all of what the invoice will say. Typing Enter is
   saved as a space: an invoice line is one line. */
textarea.b-line__text { height: auto; min-height: var(--line); padding: 6px 8px; line-height: 1.4; resize: vertical; field-sizing: content; }
.b-line__amount { flex: 0 0 130px; width: 130px; text-align: right; font-weight: 700; }
.b-line__drop { flex: none; font-size: 13px; color: var(--muted); }
.b-line--new .t-in:not(:focus):not(:hover) { background: transparent; border-bottom-style: dashed; }
.b-line__sent { font-weight: 600; }
.b-total { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.b-total p { display: flex; gap: 18px; }
.b-total__sum { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.b-total__sum span { align-self: center; font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.b-sendbar { gap: 10px 22px; }
.b-sendbar .j-go { margin-bottom: 6px; }
.j-go:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: 6px 6px 0 var(--ink); }
.b-paid { border-left-color: var(--ink); }
.b-list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.b-reason { width: 180px; height: 28px; font-size: 14px; }
.b-addplan { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.b-addplan .t-fields { align-self: stretch; }
.j-hint { font-weight: 400; color: var(--muted); }
select.j-in { padding-right: 8px; }

@media (max-width: 960px) {
  .b-invoice { grid-template-columns: minmax(0, 1fr); }
  .b-invoice__preview { position: static; }
}

/* ------------------------- the client's Billing page ---------------------- */
.bill-due { max-width: 980px; margin: 0 auto; gap: 20px; }
.bill-due__head { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; }
.bill-due__what { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bill-due__amount { font-size: clamp(32px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.03em; }
.bill-due .cols { align-self: stretch; }
.bill-bank { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 16px; }
.bill-bank dt { color: var(--muted); }
.bill-bank dd { font-weight: 600; overflow-wrap: anywhere; }
.bill-bank .hl { padding: 0 5px; font-weight: 700; }
.bill-pay { padding: 2px 8px 6px 0; }
.bill-due__foot { align-self: stretch; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.bill-due__foot .fine { flex: 1 1 380px; max-width: 520px; }
.bill-list { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.bill-list__head { text-align: center; }
.bill-rows { display: flex; flex-direction: column; gap: 12px; }
.bill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 14px 20px; background: var(--paper); border: 2px solid var(--ink); }
.bill-row__what { flex: 1 1 260px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.bill-row__num { margin-right: 6px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.bill-row__when { flex: 0 0 150px; font-size: 14px; color: var(--muted); }
.bill-row__amount { flex: 0 0 110px; text-align: right; font-family: var(--display); font-weight: 800; font-size: 18px; }
.bill-row__state { flex: 0 0 230px; }
.bill-row__pdf { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 5px; }
.bill-tag { display: inline-block; padding: 3px 8px; border: 2px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bill-tag--orange { background: var(--accent); }
.bill-tag--black { background: var(--ink); color: var(--ground); }
.bill-tag--grey { background: var(--panel); }
@media (max-width: 620px) {
  .bill-row__when, .bill-row__state { flex-basis: auto; }
  .bill-row__amount { flex-basis: auto; text-align: left; }
  .bill-bank { grid-template-columns: 110px minmax(0, 1fr); }
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }