/* Clauseworks brand (SPEC §7): Fraunces display + Manrope UI, warm paper base,
   deep navy structure, report RAG colours. Calm, editorial, document-led. */

:root {
  --paper:   #f4efe6;   /* warm paper base            */
  --paper-2: #fbf8f2;   /* cards / raised surfaces     */
  --navy:    #16263f;   /* deep navy — headings, nav   */
  --navy-2:  #24395a;
  --ink:     #23211c;   /* body text                   */
  --muted:   #5b5446;   /* secondary text (AA on paper)*/
  --line:    #e2dac9;   /* hairlines / borders         */

  --green:   #2e7d5b;   /* RAG green  */
  --amber:   #9a5f12;   /* RAG amber (AA text)         */
  --red:     #b23a38;   /* RAG red    */

  --radius: 10px;
  --maxw: 1040px;
  --shadow: 0 1px 2px rgba(22,38,63,.06), 0 6px 20px rgba(22,38,63,.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: var(--navy);
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 .5em;
}
h1 { font-size: 2.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

a { color: var(--navy-2); }
a:hover { color: var(--navy); }

p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
small { font-size: .85rem; }

/* Accessible focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--navy-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main { padding: 2.5rem 0 4rem; }

/* Header / nav */
.site-header {
  background: var(--navy);
  color: #f3efe6;
  border-bottom: 3px solid var(--navy-2);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 1rem;
}
.brand {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.35rem;
  color: #fbf8f2; text-decoration: none; letter-spacing: -.01em;
}
.brand span { color: #c9b487; }
.nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.nav a { color: #e7e0d2; text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: #fff; text-decoration: underline; }
.nav form { margin: 0; }
.nav .who { color: #b9c0cc; font-weight: 500; }
/* Log out is a form button, so it does not inherit .nav a. Without this it keeps
   .btn-link's navy — near-invisible on the navy header. */
.nav .btn-link { color: #e7e0d2; font-weight: 600; font-size: .95rem; cursor: pointer; }
.nav .btn-link:hover { color: #fff; text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-block; cursor: pointer; border: 1px solid transparent;
  border-radius: var(--radius); padding: .6rem 1.1rem; font: inherit;
  font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-link { background: none; border: none; color: var(--navy-2); padding: 0; font-weight: 700; }
/* Row actions inside a table. Same colours as a page-level button so the
   language is one thing, smaller so a table of them does not read as a wall. */
.btn-sm { padding: .34rem .7rem; font-size: .85rem; }

/* Cards */
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 1rem; }
@media (min-width: 680px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}

/* Forms */
.form { max-width: 520px; }
.form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #cdc4b2; border-radius: 8px;
  padding: .6rem .7rem;
}
textarea { resize: vertical; }
.help { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.errorlist { color: var(--red); list-style: none; padding: 0; margin: .3rem 0 0; font-size: .9rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; }

/* Project-access checkboxes on the invite form.
   The global `label { display: block }` and `input { width: 100% }` above are
   written for text inputs; applied to a checkbox list they stretch the box
   across the row and push the project name onto a line of its own, so the list
   reads as a column of headings rather than a set of choices. Django gives the
   widget's container the field's auto id, so scope the row layout to that.
   row-reverse puts the checkbox on the right while the input stays first in the
   DOM, where the label's `for` and the tab order both expect it. */
#id_project_ids > div + div { border-top: 1px solid var(--line); }
#id_project_ids label {
  display: flex; flex-direction: row-reverse; justify-content: space-between;
  align-items: center; gap: 1rem; cursor: pointer;
  margin: 0; padding: .6rem .1rem;
  font-weight: 500; color: var(--ink);
}
#id_project_ids label:hover { color: var(--navy); }
#id_project_ids input[type="checkbox"] {
  flex: none; width: 1.1rem; height: 1.1rem;
  margin: 0; padding: 0; accent-color: var(--navy);
}

/* Drop zone (reference library upload). The file input stays the single source
   of truth — a drop assigns to it — so native validation still applies. */
.dropzone {
  border: 1px dashed #cdc4b2; border-radius: 8px; background: #fff;
  padding: .8rem; transition: border-color .12s ease, background .12s ease;
}
.dropzone.is-over { border-color: var(--navy-2); background: var(--paper-2); }
.dropzone input[type="file"] { border: 0; padding: 0; background: transparent; }
.dropzone-hint { margin: .45rem 0 0; font-size: .85rem; }
.dropzone-name { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; color: var(--navy); }

/* Auth split panel */
.auth-wrap { max-width: 460px; margin: 1rem auto; }
.auth-wrap .card { padding: 2rem; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.msg { padding: .7rem 1rem; border-radius: 8px; border: 1px solid; font-weight: 600; }
.msg.success { background: #e9f3ee; border-color: #bfe0cf; color: #1f5e44; }
.msg.error   { background: #f6e7e7; border-color: #e6c2c1; color: #8f2c2a; }
.msg.info, .msg.warning { background: #f4ecdd; border-color: #e4d3ad; color: #6b521c; }

/* RAG badges (report colours reused in the UI) */
.rag { display: inline-block; padding: .15rem .6rem; border-radius: 999px;
       font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.rag-green { background: #e3f0e9; color: var(--green); border: 1px solid #bfe0cf; }
.rag-amber { background: #f6ecda; color: var(--amber); border: 1px solid #e7d3a8; }
.rag-red   { background: #f6e3e2; color: var(--red);   border: 1px solid #e6c2c1; }
.rag-none  { background: #efe9dc; color: var(--muted); border: 1px solid var(--line); }

/* Review progress — an indeterminate bar, because we genuinely cannot say how
   far through a review is. A bar that claims a percentage it does not know is
   worse than one that only says "still working". Reviews take minutes, not
   seconds, so the page has to keep visibly moving or it reads as hung. */
.progress { height: 8px; border-radius: 999px; background: #e7dfd0;
            border: 1px solid var(--line); overflow: hidden; margin: .9rem 0 .5rem; }
.progress-bar { height: 100%; width: 34%; border-radius: 999px;
                background: linear-gradient(90deg, var(--navy-2), var(--amber));
                animation: progress-slide 2.1s ease-in-out infinite; }
@keyframes progress-slide {
  0%   { margin-left: -34%; }
  100% { margin-left: 100%; }
}
/* Respect a user who has asked for less motion: hold a steady bar instead. */
@media (prefers-reduced-motion: reduce) {
  .progress-bar { animation: none; width: 100%; opacity: .55; }
}
.progress-note { color: var(--muted); font-size: .92rem; margin: 0;
                 transition: opacity .35s ease; }
.progress-note.fading { opacity: 0; }

/* Status pills */
.pill { display: inline-block; padding: .12rem .55rem; border-radius: 6px;
        font-size: .78rem; font-weight: 700; background: #efe9dc; color: var(--muted);
        border: 1px solid var(--line); }

/* Tables */
/* A card holding a table scrolls the TABLE sideways on a narrow window rather
   than the whole page. The Team page's row actions became buttons rather than
   text links (2 Sep 2026), which is wider — without this the body scrolls
   horizontally and the header goes with it. */
.card:has(> table) { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Project list rows */
.project-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.project-meta { color: var(--muted); font-size: .9rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer .container { padding-top: 1.5rem; padding-bottom: 2.5rem; }

/* Hero (landing) */
.hero { padding: 3.5rem 0 1rem; }
.hero h1 { font-size: 2.7rem; max-width: 16ch; }
.hero p.lede { font-size: 1.2rem; color: var(--muted); max-width: 56ch; }
.hero .cta { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* Marketing pages (About/FAQ/Pricing/Trust): one consistent font (Manrope) and
   uniform heading sizes, with H1 kept larger. Scoped so the app UI is unaffected. */
.marketing h2, .marketing h3, .marketing h4 {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -.01em;
}
.marketing h2, .marketing h3, .marketing h4 { font-size: 1.45rem; font-weight: 700; }
.marketing h2 { margin-top: 2rem; }
.marketing .card h2, .marketing .card h3 { margin-top: 0; }
.diff-cards .card { display: flex; flex-direction: column; }
.diff-icon { width: 34px; height: 34px; color: var(--navy-2); margin-bottom: .5rem; flex: none; }

/* Homepage sections */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800;
  color: var(--navy-2); margin: 0 0 .5rem; }
/* Two-column hero: copy left, the RAG report screenshot right (fills the space,
   shows the product immediately). Stacks on mobile with full-width CTAs. */
.home-hero { display: grid; gap: 2rem; align-items: center; max-width: none; }
.home-hero .hero-copy { max-width: 46ch; }
.home-hero .hero-copy h1 { max-width: none; }
.home-hero .lede { max-width: none; }
.hero-shot { margin: 0; }
.hero-shot img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(22, 38, 63, .14); }
.hero-shot figcaption { color: var(--muted); font-size: .82rem; margin-top: .5rem; text-align: center; }
.hero-note { margin-top: 1rem; color: var(--muted); font-size: 1.02rem; }
@media (min-width: 820px) {
  .home-hero { grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 560px) {
  .home-hero .cta { flex-direction: column; align-items: stretch; }
  .home-hero .cta .btn { width: 100%; text-align: center; }
}
.nav-login { color: var(--muted); font-weight: 500; }        /* de-emphasised, still keyboard-focusable */
.band { margin: 2.5rem auto 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); max-width: 62ch; }
.card.feature { border: 1px solid var(--navy-2); box-shadow: 0 1px 0 var(--line); }

/* Trust strip: 5 inline items + a right link; wraps to 2 rows on mobile, never squashes */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; justify-content: center;
  margin: 1.6rem 0 0; padding: .85rem 1.1rem; background: #f3efe4; border: 1px solid var(--line);
  border-radius: 12px; font-size: .9rem; color: var(--navy); font-weight: 700; text-align: center;
}
.trust-strip span { position: relative; padding-left: 1.15rem; }
.trust-strip span::before { content: "✓"; position: absolute; left: 0; color: var(--navy-2); font-weight: 800; }
.trust-strip-link { font-weight: 700; margin-left: auto; }

.pull-out { font-size: 1.35rem; font-weight: 700; color: var(--navy); line-height: 1.35;
  margin: 1.2rem 0 0; max-width: none; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.step { position: relative; padding-left: 3rem; }
.step-n { position: absolute; left: 0; top: -.15rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; }
.step h3 { margin: .1rem 0 .3rem; }
.closing-line { font-weight: 700; color: var(--navy); margin-top: 1.4rem; }
.roadmap-note { color: var(--muted); font-size: .92rem; margin-top: .4rem; }

.about .hero h1 { max-width: 24ch; }
.about-quote { max-width: 64ch; }

/* Roadmap storyboard (About page): vertical timeline */
.roadmap-section { margin-top: 2.5rem; }
.roadmap { list-style: none; margin: 1.3rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--line); }
.roadmap-item { position: relative; padding-bottom: 1.4rem; }
.roadmap-item:last-child { padding-bottom: 0; }
.roadmap-item::before { content: ""; position: absolute; left: -1.9rem; top: .35rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--navy-2); }
.roadmap-item.now::before { background: var(--navy-2); }
.rm-phase { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: var(--navy-2); }
.roadmap-item h3 { margin: .1rem 0 .3rem; }
.roadmap-item p { color: var(--muted); margin: 0; max-width: 62ch; }
.shot-row { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.img-slot { margin: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  border: 2px dashed #c3b9a3; border-radius: 10px; background: #faf7ef; color: var(--muted); }
.img-slot figcaption { font-size: .85rem; }
.img-slot small { color: #8a8272; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 2px 10px rgba(22, 38, 63, .10); }
.shot figcaption { font-size: .85rem; color: var(--muted); margin-top: .45rem; text-align: center; }
.shot-zoom { display: block; cursor: zoom-in; }
.shot-zoom:focus-visible { outline: 3px solid var(--navy-2); outline-offset: 3px; border-radius: 10px; }
/* Lightbox (progressive enhancement). [hidden] must win over display:flex. */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(16, 38, 63, .88);
  display: flex; align-items: center; justify-content: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }
.lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: transparent; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; }
.headshot { max-width: 240px; margin: 0; }
.headshot img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); }

/* What makes it different: card 1 full width, then 3 beneath */
.diff-lead { margin-top: 1rem; }
.diff-others { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1.1rem; }

/* Proof */
.proof { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.proof-body { max-width: 65ch; }
.pull-quote { border-left: 3px solid var(--navy-2); padding: .2rem 0 .2rem 1rem; margin: 1.2rem 0; }
.pull-quote p { font-size: 1.1rem; color: var(--navy); }
.pull-quote footer { color: var(--muted); font-weight: 700; margin-top: .4rem; }
.chips { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { font-size: .8rem; font-weight: 700; color: var(--navy); background: #efe9dc;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; }

/* Security bullets */
.sec-bullets { margin: 1rem 0 1.25rem 1.1rem; max-width: 68ch; }
.sec-bullets li { margin: .5rem 0; }

/* Pricing teaser */
.tiers { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin: 1rem 0 1.25rem; }
.tier h3 { margin-top: 0; }

/* Objections */
.qa { margin: 1rem 0; max-width: 68ch; }
.qa h3 { margin: 0 0 .25rem; }

.cta-band { margin-top: 2.75rem; padding: 2rem; background: #f3efe4; border-radius: 12px; text-align: center; }
.cta-band .cta { justify-content: center; }
.lead-wrap { max-width: 620px; }

@media (min-width: 768px) {
  .diff-others, .tiers { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Bigger, legible product shots: upload + review side by side (~500px each),
     the RAG report full-width beneath (the money shot). */
  .shot-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .shot-row .shot:last-child { grid-column: 1 / -1; }
  .shot-row .shot:last-child img { max-width: 900px; margin: 0 auto; }
  .proof { grid-template-columns: 1fr auto; }
}

/* Legal long-form pages (Terms, Privacy): readable measure + calm spacing. */
.legal-doc { max-width: 50rem; margin: 0 auto; line-height: 1.55; }
.legal-doc h1 { margin-bottom: .2rem; }
.legal-doc .legal-stamp { color: var(--muted); font-size: .95rem; margin: 0 0 1.6rem; }
.legal-doc h2 { font-size: 1.2rem; margin-top: 1.7rem; }
.legal-doc p { margin: .55rem 0; }
.legal-doc ul { margin: .4rem 0 .9rem 1.25rem; }
.legal-doc li { margin: .25rem 0; }

/* ---- Insights articles ---------------------------------------------------
   Long-form reading: the complete guide runs to 5,800 words and nineteen
   sections, so the column is narrow enough to read, the contents list is a
   real navigation aid, and tables scroll inside the article rather than
   widening the page on a phone. */
.article-doc { max-width: 46rem; margin: 0 auto; line-height: 1.65; }
.article-doc h1 { margin: 1.4rem 0 .4rem; line-height: 1.2; }
.article-doc > p:first-of-type em { color: var(--muted); }
.article-doc h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; scroll-margin-top: 1rem; }
.article-doc h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; scroll-margin-top: 1rem; }
.article-doc p { margin: .7rem 0; }
.article-doc ul, .article-doc ol { margin: .5rem 0 1rem 1.3rem; padding: 0; }
.article-doc li { margin: .3rem 0; }
.article-doc blockquote {
  margin: 1.2rem 0; padding: .6rem 1rem; border-left: 3px solid var(--navy-2);
  background: var(--paper-2); color: var(--ink);
}
.article-doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0 1rem; }
.article-doc hr + p em { color: var(--muted); font-size: .92rem; }

.article-doc .table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; }
.article-doc table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.article-doc th, .article-doc td {
  border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top;
}
.article-doc th { background: var(--paper-2); color: var(--navy); }

.article-toc {
  margin: 1.4rem 0 1.8rem; padding: .9rem 1.1rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-toc-title { margin: 0 0 .4rem; font-weight: 700; color: var(--navy); }
.article-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.article-toc li { margin: .2rem 0; break-inside: avoid; }
@media (max-width: 640px) { .article-toc ul { columns: 1; } }

.article-back { max-width: 46rem; margin: 2rem auto 0; }

.insight-list { display: grid; gap: 1rem; margin-top: 1.2rem; }
.insight-card { display: block; text-decoration: none; color: var(--ink); }
.insight-card h2 { margin: 0 0 .35rem; font-size: 1.2rem; color: var(--navy); }
.insight-card p { margin: .3rem 0; }
.insight-card:hover h2 { text-decoration: underline; }
.insight-meta { font-size: .9rem; }

/* ---- CE timeline calculator ---------------------------------------------
   A form and a table of dates. The status column carries a colour AND its own
   words: a colour alone is nothing to a screen reader, and nothing to the
   roughly one man in twelve who cannot separate the red from the green. */
.calc-page .calc { margin: 1.4rem 0; }
.calc {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.calc-privacy { margin: 0 0 1rem; }
.calc-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1rem 0 .2rem; }
.calc-group:first-of-type { border-top: 0; padding-top: 0; }
.calc-group legend { font-weight: 700; color: var(--navy); padding: 0; }
.calc-radios { display: grid; gap: .35rem; margin: .5rem 0 .2rem; }
.calc-radios label {
  font-weight: 400; display: grid; grid-template-columns: auto 1fr;
  gap: .5rem; align-items: baseline;
}
.calc-radios input { margin: 0; }
.calc-radios .muted { white-space: nowrap; }

.calc-field { margin: .7rem 0; }
.calc-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.calc-field input[type="date"] {
  font: inherit; padding: .45rem .55rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); max-width: 16rem; width: 100%;
}
.calc-error { color: var(--red); margin: .3rem 0 0; font-size: .92rem; }

.calc-more { margin: .6rem 0; }
.calc-more > summary { cursor: pointer; font-weight: 700; color: var(--navy-2); }
.calc-more[open] > summary { margin-bottom: .3rem; }

.calc-note, .calc-convention { color: var(--muted); font-size: .93rem; }
.calc-convention { margin: 1rem 0 0; }
.calc-actions { margin: 1rem 0 0; }

.calc-results { margin: 1.6rem 0; }
.calc-results h2 { margin-bottom: .2rem; }
.calc-edition { margin: 0 0 .8rem; font-size: .93rem; }
.calc-empty { margin: 0; }

.calc-table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.calc-table th, .calc-table td {
  border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top;
}
.calc-table th { background: var(--paper-2); color: var(--navy); }
.calc-status { white-space: nowrap; font-weight: 700; }
.calc-ok, .calc-open { color: var(--green); }
.calc-soon { color: var(--amber); }
.calc-late, .calc-passed { color: var(--red); }
.calc-conditional td { background: var(--paper-2); font-style: italic; }
.calc-note-row td {
  background: var(--paper-2); color: var(--muted); font-size: .9rem; font-style: normal;
}
.calc-cta { margin: 1.6rem 0; }

/* Below the width a table can hold five columns, each row becomes a card and
   each cell carries its own heading. */
@media (max-width: 640px) {
  .calc-table, .calc-table tbody, .calc-table tr, .calc-table td { display: block; width: 100%; }
  .calc-table thead { position: absolute; left: -9999px; }
  .calc-table tr { border: 1px solid var(--line); border-radius: 6px; margin-bottom: .7rem; }
  .calc-table td { border: 0; border-bottom: 1px solid var(--line); padding: .45rem .6rem; }
  .calc-table tr td:last-child { border-bottom: 0; }
  .calc-table td::before {
    content: attr(data-label); display: block; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  .calc-note-row td::before { content: none; }
  .calc-status { white-space: normal; }
}

/* Take-away actions */
.calc-take { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.calc-said { margin: 0; color: var(--muted); font-size: .93rem; flex-basis: 100%; }
.calc-fallback { display: block; flex-basis: 100%; font-weight: 400; }
.calc-fallback textarea {
  width: 100%; font: inherit; font-size: .9rem; margin-top: .3rem;
  border: 1px solid var(--line); border-radius: 6px; padding: .5rem;
}
.calc-print-only { display: none; }

/* ---- Printing ------------------------------------------------------------
   On paper the form is gone, so the sheet has to say what it was built from:
   the contract, the dates entered, the table, the notes, the date produced and
   where it came from. Everything that cannot be acted on in print — the
   navigation, the form itself, the buttons, the call to action — comes out. */
@media print {
  .site-header, .site-footer, .skip-link,
  .calc, .calc-take, .calc-cta, .calc-back { display: none !important; }

  .calc-print-only { display: block; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .article-doc, .calc-page { max-width: none; margin: 0; }

  #calc-print-summary h2 { margin: 0 0 .2rem; font-size: 14pt; }
  #calc-print-summary dl {
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: .6rem 0 0;
  }
  #calc-print-summary dt { font-weight: 700; }
  #calc-print-summary dd { margin: 0; }

  .calc-results h2 { font-size: 12pt; margin: 1rem 0 .2rem; }
  .calc-table { font-size: 10pt; }
  .calc-table th, .calc-table td { border: 1px solid #999; }
  .calc-status { color: #000 !important; font-weight: 700; }
  .calc-note-row td { color: #333; }
  .table-wrap { overflow: visible; }
  /* A row split across a page break is unreadable; a note belongs with the row
     it explains. */
  .calc-table tr { break-inside: avoid; }

  .calc-print-footer { margin-top: 1rem; font-size: 9pt; color: #333; }

  /* The page's own explanatory sections are not part of the printed answer. */
  .calc-page > h2, .calc-page > p, .calc-page > hr,
  .calc-page > .table-wrap { display: none; }
  .calc-page > .calc-print-footer { display: block; }
}

/* ---- Template downloads --------------------------------------------------
   Four files download straight away; the three that calculate are emailed, so
   a corrected workbook can reach the people who took the old one. */
.dl-list { margin: 1rem 0 1.6rem; }
.dl-item { padding: .6rem 0; border-top: 1px solid var(--line); }
.dl-item:first-child { border-top: 0; }
.dl-title { margin: 0 0 .15rem; font-weight: 700; }
.dl-item p.muted { margin: 0; font-size: .95rem; }
.dl-form { margin: 1.2rem 0 1.8rem; max-width: 34rem; }
.dl-form .field { margin-bottom: .8rem; }
.dl-form input[type="text"], .dl-form input[type="email"] {
  font: inherit; width: 100%; padding: .45rem .55rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.dl-consent { font-size: .9rem; margin: .8rem 0 0; }
.dl-error { color: var(--red); margin: .3rem 0; }