/* ============================================================================
   theme-quiet.css — "Chatsward Quiet" — THE DEFAULT THEME (chosen 28 Aug 2026)
   ----------------------------------------------------------------------------
   Built around logo direction B from the brand package ("the quiet mark":
   Playfair wordmark, short rule, tracked descriptor — no engraved plate).
   Where the plate theme is old-world and square, this is the contemporary
   sibling: green-led (the package names green the quiet direction's primary),
   a lighter cooler ground, Playfair headings over a humanist sans, and the
   site's native gentle rounding and soft shadows KEPT rather than squared.
   Still one accent per view (green), still no invented heritage.

   Select with ?theme=quiet — see theme-switch.js. Same override pattern as
   the other theme layers; the logo restyles the same anchor markup the plate
   uses (no per-page edits).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500;600&family=EB+Garamond:wght@500&family=Space+Grotesk:wght@300..700&display=swap');

:root {
  /* palette */
  --q-green:        #14372B;   /* primary: wordmark, buttons, links          */
  --q-green-hover:  #0F2C22;
  --q-green-soft:   #2E5A48;   /* secondary green: DeepCheck outline, ticks   */
  --q-green-tint:   #E8EFEA;   /* tints, hover washes                          */
  --q-ink:          #1C201E;   /* headings                                     */
  --q-text:         #3F4643;   /* body                                         */
  --q-muted:        #6B7370;   /* meta                                         */
  --q-bg:           #F8F7F3;   /* ground — lighter and cooler than parchment   */
  --q-rule:         #E4E2DB;
  --q-rule-strong:  #CFCBC0;

  /* the site's own tokens resolve here */
  --bg:            var(--q-bg);
  --drop-bg:       #FFFFFF;
  --fg:            var(--q-ink);
  --fg-muted:      var(--q-text);
  --fg-faint:      var(--q-muted);
  --accent:        var(--q-green);
  --accent-hover:  var(--q-green-hover);
  --accent-light:  var(--q-green-tint);
  --border:        var(--q-rule);
  --border-strong: var(--q-rule-strong);
  --radius:        10px;
  /* action colours keep their attribution — orange = Generate, blue = DeepCheck —
     in the softer shades this theme wants */
  --action-generate: #D9803F; --action-generate-hover: #C36F31;
  --action-analysis: #3D6FA8; --action-analysis-hover: #325C8C;
  --action-analysis-light: #E8EFF7;
  --verify: var(--q-green); --verify-hover: var(--q-green-hover); --verify-light: var(--q-green-tint); --verify-border: var(--q-rule-strong);

  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Libre Baskerville', Baskerville, Georgia, 'Times New Roman', serif;   /* headings (chosen 28 Aug 2026) */
  --font-wordmark: 'Playfair Display', Georgia, 'Times New Roman', serif;                /* the logo keeps Playfair */
  --font-descriptor: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --serif: var(--font-heading); --sans: var(--font-body);
}

/* ---- Type --------------------------------------------------------------- */
body,
button, input, select, textarea,
.wizard-heading, .file-bar-change, .config-section-next,
.config-field input, .config-field select, .date-range-reset,
.court-use-btn, .user-type-btn, .participant-btn,
.participant-btn .rename-input, .participant-picker-btn,
.participant-overlay-search, .cta-button {
  font-family: var(--font-body) !important;
}
body { color: var(--q-text); font-size: 16.5px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6, .page-title, .ch-name {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;   /* Libre Baskerville ships 400/700 */
  letter-spacing: 0 !important;
  color: var(--q-ink);
}
.feature-card p, .step p, .payg-item-desc, .pricing-features li, .custody-note, .check .finding { font-size: 15px; }

/* ---- Top bar: white, hairline, the quiet mark --------------------------- */
nav { height: 64px; padding: 0 28px; gap: 24px; background: #FFFFFF; border-bottom: 1px solid var(--q-rule); box-sizing: border-box; }
.nav-links { gap: 30px; }
.nav-links a { font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--q-text); }
.nav-links a:hover { color: var(--q-green); }
/* the quiet mark, drawn from the plate anchor's markup */
a.logo.cw-plate { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; letter-spacing: normal; }
.cw-plate__rule { display: none; }
.cw-plate__name { font-family: var(--font-wordmark); font-weight: 600; font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--q-green); line-height: 1; white-space: nowrap; }
.cw-plate__rule--thin { display: block; width: 1px; height: 30px; background: var(--q-green); opacity: 0.45; }   /* the | between wordmark and descriptor */
a.logo.cw-plate::after {
  /* the Chatsward descriptor (two lines). "digital fingerprint analysis" is
     reserved for describing DeepCheck, so it does not appear here. */
  content: "Message preservation\A Digital analysis";
  font-family: var(--font-descriptor); font-weight: 500; font-size: 11px; line-height: 1.5;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--q-green); white-space: pre;
}
/* the two action buttons: filled, orange / blue via the tokens above */
/* 'nav' in front: some pages carry their own smaller header button rule, loaded after this
   file; every page's header buttons must be the same size (12 Oct 2026) */
nav .nav-links a.nav-cta { font-weight: 600; font-size: 15px; padding: 9px 18px; min-width: 146px; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; text-align: center; }
.nav-links a.sol-signin { font-size: 15px; padding: 8px 16px; }
/* buttons read as rectangles with softened edges, not pills */
.nav-links a.nav-cta, .nav-links a.sol-signin, .cta-button, .dz-run, .pricing-cta a, .reg-btn,
.btn, .analyse-new-btn, .cta-primary, .dc-ctas a.cta-primary { border-radius: 3px !important; }
.nav-links a.sol-signin { border-color: var(--q-rule-strong); color: var(--q-ink); }
.nav-links a.nav-cta[data-tip]::after { font-family: var(--font-body); font-size: 12.5px; }
@media (max-width: 720px) {
  nav { height: 56px; padding: 0 18px; }
  .cw-plate__name { font-size: 20px; }
  .cw-plate__rule--thin, a.logo.cw-plate::after { display: none; }   /* wordmark alone when small */
}

/* ---- Controls & surfaces: soft, not severe ------------------------------- */
.cta-button, .dz-run, .pricing-cta a, .reg-btn, .btn, .analyse-new-btn, .cta-primary {
  font-family: var(--font-body) !important; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.feature-card, .pricing-card, .stat-card, .acct-card, .reg-card, .check, .action-tile, .custody, .card {
  background: #FFFFFF; border: 1px solid var(--q-rule);
}
.usp-badge { background: var(--q-green-tint); color: var(--q-green); border: 0; font-weight: 500; }
a { color: var(--q-green); }

/* ---- header: Verify button and the account button (12 Oct 2026) ---- */
/* Verify: a white button with a tick, the same height as the action buttons */
.nav-links a.nav-verify { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 146px;
  background: #fff; color: var(--q-ink); border: 1px solid var(--q-rule-strong); border-radius: 3px; padding: 8px 17px; font-size: 15px; font-weight: 600; text-align: center; }
.nav-links a.nav-verify:hover { border-color: var(--q-ink); color: var(--q-ink); }
.nav-links a.nav-verify svg { width: 15px; height: 15px; stroke: var(--q-green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* the signed-in account button (revised 12 Oct 2026): a box with the site's softened
   corners, the height of the action buttons, in the pale brand tint; what sets it apart
   is its person icon, larger than the icons in the action buttons (its page script sets
   inline styles, hence !important) */
#navAccount:not([href]) { background: var(--q-green-tint) !important; color: var(--q-green) !important; border: 1px solid transparent !important;
  border-radius: 3px !important; box-sizing: border-box; height: 42px; padding: 0 14px 0 12px !important; gap: 9px !important; font-size: 15px !important; font-weight: 600 !important;
  display: inline-flex !important; align-items: center !important; cursor: pointer; white-space: nowrap; }
#navAccount:not([href]):hover { border-color: var(--q-green) !important; }
#navAccount .cw-person { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#navAccount .cw-chev { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: 0.7; }
#navAccount:not([href]) > svg:not(.cw-chev):not(.cw-person) { display: none; }   /* the page's own small icon, until the larger one replaces it */
/* the signed-in header, shown from the first paint (html.cw-in is set in <head> by header.js
   from the remembered sign-in, so the header does not flash from page to page) */
html.cw-in .nav-links > a[href$="#how"], html.cw-in .nav-links > a[href$="#features"], html.cw-in .nav-links > a[href$="pricing.html"] { display: none !important; }
html.cw-in #navCompare { display: inline-flex !important; }

/* ---- header: five tools when signed in, and how it folds (14 Oct 2026) ----
   Signed in: Request, DeepCheck, Compare, Create PDF, Verify (header.js puts them in that
   order and adds Request). Request is paid for with a PDF generation credit, but
   must not be mistaken for Create PDF: see below. */
.nav-links a.nav-cta svg { flex: none; }
.cw-menu-btn { display: none; }
/* Request: an orange outline, white fill, ink text and an orange icon, in the manner of the
   Verify button (Andy, 14 Oct 2026). It is paid for with a PDF generation credit, hence the
   orange, but it must not be mistaken for Create PDF, which keeps the filled orange; and
   not blue, which is DeepCheck's. */
nav .nav-links a.nav-cta.nav-request { background: #fff; color: var(--q-ink); border: 1px solid var(--action-generate); padding: 8px 17px; }   /* Verify's border and padding */
nav .nav-links a.nav-cta.nav-request:hover { background: #FDF3EA; color: var(--q-ink); }
nav .nav-links a.nav-cta.nav-request svg { stroke: var(--action-generate); }
/* Verify's hover note: the same dark note as the action buttons', after a full second of hover */
.nav-links a.nav-verify[data-tip] { position: relative; }
.nav-links a.nav-verify[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: 0; width: 280px;
  background: var(--q-ink, #1C201E); color: #fff; padding: 10px 13px; border-radius: 3px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 0.18s ease 0s, transform 0.18s ease 0s, visibility 0s linear 0.18s;
  pointer-events: none; white-space: normal; z-index: 300; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.nav-links a.nav-verify[data-tip]:hover::after {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.18s ease 1s, transform 0.18s ease 1s, visibility 0s linear 1s;
}
/* Five buttons and the account need room: close the gaps first, then drop the descriptor
   beside the wordmark, then fold the links behind the menu button. */
@media (max-width: 1560px) {
  nav { gap: 16px; }
  .nav-links { gap: 10px; }
  nav .nav-links a.nav-cta, .nav-links a.nav-verify { min-width: 0; padding-left: 14px; padding-right: 14px; }
  nav .nav-links a.nav-cta.nav-request { padding-left: 13px; padding-right: 13px; }
  .nav-links > a:not(.nav-cta):not(.nav-verify):not(.sol-signin) { padding: 0 8px; }
}
@media (max-width: 1300px) {
  .cw-plate__rule--thin, a.logo.cw-plate::after { display: none; }   /* wordmark alone */
}
@media (max-width: 1060px) {
  .cw-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; padding: 0;
    background: #fff; border: 1px solid var(--q-rule-strong); border-radius: 3px; cursor: pointer; color: var(--q-ink); }
  .cw-menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  html.cw-menu-open .cw-menu-btn { background: var(--q-green-tint); border-color: var(--q-green); color: var(--q-green); }
  body > nav { position: sticky; top: 0; }
  body > nav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300; box-sizing: border-box;
    flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px 20px; max-height: calc(100vh - 64px); overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--q-rule-strong); box-shadow: 0 14px 28px rgba(0,0,0,0.10); }
  html.cw-menu-open body > nav .nav-links { display: flex; }
  body > nav .nav-links a.nav-cta, body > nav .nav-links a.nav-verify { width: 100%; height: 46px; font-size: 16px; }
  body > nav .nav-links > a:not(.nav-cta):not(.nav-verify) { padding: 10px 2px; }
  body > nav .nav-links a.nav-cta[data-tip]::after, body > nav .nav-links a.nav-verify[data-tip]::after { display: none; }   /* no hover notes on touch */
  body > nav .nav-links .account-menu { display: block; width: 100%; }
  body > nav .nav-links #navAccount { width: 100%; height: 46px; box-sizing: border-box; justify-content: center; display: inline-flex; align-items: center; }
  body > nav .nav-links .account-dropdown { position: static; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 8px; box-shadow: none; }
}
/* ---- end header ---- */

/* ==== PLAIN BOXES (generated) ==== */
/* 12 Oct 2026 (Andrew): no soft "card" look. Boxes have the same softened 3px corner as the
   buttons and no resting drop shadow; only things that float over the page (menus,
   dialogs, tooltips) and the paper preview keep a shadow, and message bubbles stay round.
   Generated by a sweep of every page's own rules (scripts/plain_boxes.py; run it again after adding a page), so it
   holds whatever a page's stylesheet says. */
.cw-page { --radius: 3px; }
.nav-links a.sol-signin,
.nav-links a.nav-cta,
.nav-links a.nav-cta[data-tip]::after,
.account-dropdown,
.account-dropdown a,
.account-dropdown button,
.wizard-start,
.wizard-body,
.wizard-btn,
.file-bar-icon,
.file-bar-change,
.preview-page,
.config-section-next,
.config-field input,
.config-field select,
.date-range-reset,
.court-use-btn,
.participant-btn,
.participant-btn .rename-input,
.participant-picker-btn,
.participant-overlay-popup,
.participant-overlay-search-row,
.cta-button,
.err,
.check,
.check .files span,
details.raw,
.tier-banner,
.reg-card,
.form-group input,
.reg-btn,
.auth-error,
.login-modal,
.stat-card,
.credit-help .credit-tip,
.table-card,
.tr-find,
.tr-select,
.tr-date input,
.tr-new,
.ex-matter input,
.hash-copy,
.th-tip,
.logout-btn,
.rq-new-btn,
.rq-modal,
.rq-modal-actions button,
.rq-state,
.dash-banner,
.dash-link,
.action-tile,
.action-tile .at-icon,
.acct-card,
.acct-credit,
.field input,
.field textarea,
.rq-life input,
.rq-send,
.rq-err,
.rq-linkbox input,
.rq-copy,
.rq-ghost,
.dz-proceed,
.custody-summary,
.cc-btn,
.rq-who,
.rq-field input[type=text],
.rq-role,
.rq-btn,
.rq-who-done,
.rq-range-note,
.rq-dialog,
.pricing-icon,
.pricing-cta a,
.ch-cta,
.feat-tip,
.compare-cta,
.bespoke-strip-cta,
.dc-ctas a.cta-primary,
.ent-points .pt-icon,
.ent-field input,
.ent-field select,
.ent-field textarea,
.ent-submit,
.ent-errors,
.search-input,
.btn,
.card,
.credit-box .stat,
.inline-form select,
.inline-form input,
.pkg-card,
.notice,
.info-tooltip,
.reset-btn,
.analysis-btn,
.cwm-box,
.cwm-box input,
.cwm-actions button,
.cwm-suggest,
.cwm-err,
.dropzone,
.rq-card,
.result-card,
.forensic-card,
.pricing-card,
.ent-form-card,
.cc-box,
.dc-findings { border-radius: 3px !important; }
.dropzone,
.wizard-start,
.wizard-body,
.user-type-btn,
.dz-run,
.rq-card,
.cc-box,
.dc-findings,
.rq-dialog,
.pricing-card.silver,
.ent-form-card,
.result-card,
.forensic-card { box-shadow: none !important; }
/* ==== END PLAIN BOXES ==== */

/* ==== PAGE ARRIVAL (13 Oct 2026) ====
   A page's content eases in: a short fade and an 8px rise. The header never moves, so it
   stays still from page to page. Only while html.cw-entering is set (header.js: the first
   moments of a page load), so content that arrives a beat later (the dashboard, once the
   account has loaded) rises too, and nothing opened afterwards is affected.
   Only a `from` frame: each block lands on its own opacity and position, whatever they are.
   `translate`, not `transform`, so a block's own transform is left alone.
   To switch it off: delete this block. */
@keyframes cw-page-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: no-preference) {
  html.cw-entering body.cw-page > :not(nav):not(script):not(style) { animation: cw-page-in .38s cubic-bezier(.2, .7, .2, 1) backwards; }
}
/* ==== END PAGE ARRIVAL ==== */

/* ==== ACCOUNT MENU (14 Oct 2026, Andy) ====
   Every item in black; the hover wash carries the tool's colour (Request and Create PDF orange,
   DeepCheck blue, Compare green; Dashboard, Verify, Account and Sign out the plain grey). Sign out
   keeps its red text. The name and organisation no longer head the menu. Picked by link address, not class, so every page's menu matches whatever
   its markup carries, and by the menu's id so it wins over the colours pages still set themselves. */
#accountDropdown a, #accountDropdown button { color: var(--q-ink, #1C201E); font-weight: 400; text-align: right; font-size: 14px; }   /* 14px (15 Oct 2026; pages still say 13) */   /* right-aligned, under the button's right edge (on trial) */
#accountDropdown a:hover, #accountDropdown button:hover { background: #F1F1ED; }
#accountDropdown a[href$="request.html"]:hover,
#accountDropdown a[href$="create.html"]:hover { background: var(--action-generate-light, #FDEEDC); }
#accountDropdown a[href$="analyse.html"]:hover { background: var(--action-analysis-light, #E8F0F7); }
#accountDropdown a[href$="compare.html"]:hover { background: var(--action-compare-light, #E2F1E8); }
#accountDropdown .ad-signout { color: #C0392B; }
#accountDropdown .ad-head { display: none; }   /* no name or organisation at the top: the button already says who it is */
/* ==== END ACCOUNT MENU ==== */

/* ==== DEEPCHECK WORDMARK (14 Oct 2026, Andy) ====
   The product name in its own face, Space Grotesk (STYLE_SHEET section 3), loaded by the @import
   at the top of this file so every page has it. .dc-wordmark is the heading setting (the
   DeepCheck page's title, as on the holding page); .dc-word and the header's DeepCheck button
   take the button setting: 575, level with the 600 of the buttons' own text (Space Grotesk runs
   heavier than Source Sans at the same number). Only the word DeepCheck, never the words around it. */
.dc-wordmark { font-family: 'Space Grotesk', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; -webkit-text-stroke: .4px currentColor; }
.dc-word, nav .nav-links a.nav-cta.nav-analysis { font-family: 'Space Grotesk', system-ui, sans-serif !important; font-weight: 575 !important; letter-spacing: 0 !important; }
/* ==== END DEEPCHECK WORDMARK ==== */