/* Opposable.AI website: additions to the design's site.css.
   site.css is copied from the Cowork design (Shared/Website/Design/mockups/assets) and kept exactly as it is,
   so it can be copied again when the design changes. Anything the live site needs on top of it goes here:
   - things the mockups don't have (the skip link, the Development tag)
   - the mockups' inline style="..." attributes, turned into classes, because the Content Security Policy blocks
     inline styles
   Use the tokens from :root in site.css. Don't hard-code colours. */

/* Skip link: hidden until it has keyboard focus (WCAG 2.2, handover "Design rules") */
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }

/* The environment tag next to the logo, so a Development site is never mistaken for the live one */
.env-tag { font: 600 12px/1 var(--font-body); background: var(--spark); color: var(--navy); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }

/* Spacing and sizes the mockups set inline */
.space-above { margin-top: 32px; }

/* A centred lede whose sentences stay whole: side by side on one line where there's room, one above the other where
   there isn't (a phone). The lede's usual width limit is lifted so two sentences can share a line. */
.lede--centred { text-align: center; max-width: none; }
.keep-together { display: inline-block; }

/* The fact sheet's link in the footer, under the tagline */
.footer-download { margin: 12px 0 0; }
.space-above-sm { margin-top: 16px; }
.section--flush-top { padding-top: 8px; }
.section--tight-top { padding-top: 24px; }
.section--prose-top { padding-top: 40px; }
.measure { max-width: 780px; }
.measure-sm { max-width: 44em; }
.h-sm { font-size: var(--step-2); }
.h-xs { font-size: 1rem; }
/* .panel h2 in site.css sets a bigger size; the mockup overrode it inline, so this needs the same weight */
.panel .h-summary { font-size: var(--step-1); }
.h-confirm { font-size: var(--step-3); }
.footer-tagline { margin-top: 14px; max-width: 26em; }

/* Headings inside the confirmation card sit further from the text above them */
.confirm-card h2 { font-size: var(--step-2); margin-top: 28px; }

/* The dividers and the numbered list in the Book a call side panel */
.summary hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.summary ol { padding-left: 18px; margin: 0; }

/* The download block is a link on its own, so it needs the space the mockup gives it */
.confirm-card .download { margin-bottom: 20px; }

/* Travel map (/pricing#travel) */
/* where the Bristol marker sits over the map (the design worked it out from the Bristol county shape) */
.map-home--bristol { left: 64.3%; top: 84.5%; }
/* the notes in the result panel sit tight under the price, as in the mockup */
.travel-result p.small { margin: 0; }
/* "Show the price", only shown without JavaScript */
.travel-find .btn { margin: 0 0 16px; }

/* Book a call: the county box above the booking box */
.book-county { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.book-county label { font-weight: 600; }
.book-county select { font: inherit; padding: 10px 12px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); min-height: 44px; max-width: 100%; }
.book-county p { flex-basis: 100%; margin: 0; }

/* Book a call: the Cal.com booking box. It sets its own height once it has loaded; this keeps the space while it does */
.cal-booking { min-height: 520px; margin-top: 8px; }
#cal-booking-failed p { margin: 0; }

/* Admin area: what the mockups set inline, plus the pieces they don't have */
.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--white); text-decoration: underline; cursor: pointer; }
.notice--spaced { margin-bottom: 20px; }
.field--narrow { max-width: 420px; }
.btn--small { min-height: 36px; padding: 6px 14px; font-size: var(--step--1); }
.admin .actions form { margin: 0; }
/* the two-step set-up card is wider than the sign-in card, to fit the QR code and the recovery codes */
.login-card--wide { max-width: 520px; }
.qr-code { width: 220px; max-width: 100%; margin: 8px 0 12px; background: var(--white); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qr-code svg { width: 100%; height: auto; }
.shared-key { font-size: var(--step--1); word-break: break-all; }
.two-step-steps { padding-left: 18px; margin: 12px 0 4px; }
.recovery-codes { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.recovery-codes code { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; text-align: center; font-size: var(--step--1); }

/* Admin forms: the price fields in a grid, field errors, and where each value came from */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
/* a long value (the Terms version) gets the whole row, so it isn't cut off */
.field-grid .field--wide { grid-column: 1 / -1; }
.field-error { font-size: var(--step--1); color: #9A2A1F; font-weight: 600; }
.field input[aria-invalid="true"], .money:has(input[aria-invalid="true"]) { border-color: #C0392B; }
.field-source { color: var(--muted); }
.notice--ok { background: #E3F4EA; border-color: #A9D8BA; }
.notice--warn { background: #FDECEA; border-color: #E8A39B; }
.panel .notice { margin-top: 12px; }

/* the call price line on the admin Prices page, read from Cal.com */
.from-calcom { margin: 4px 0 0; min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notice .actions { margin: 12px 0 0; }
.notice p:last-child { margin-bottom: 0; }

/* A client's page (/d/{code}): the mockup's inline styles, as classes, and the bits it doesn't draw */
.measure-docs { max-width: 820px; }
.btn--file { cursor: pointer; position: relative; overflow: hidden; }
/* the file input stays usable (keyboard, screen readers, "required") but is drawn as the button */
.btn--file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chosen-files { margin: 0 0 8px; overflow-wrap: anywhere; }
.upload-box--over { border-color: var(--blue); background: #F2F7FE; }
.note-text { white-space: pre-line; }
/* an invoice's row: an unpaid one says so in the warning colour, and has two buttons (Pay now, Download) */
.doc-status--due { color: #7A5300; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .doc .doc-actions { grid-column: 1 / -1; } .doc-actions .btn { flex: 1 1 auto; } }

/* Text for screen readers only, such as which document a Download button is for */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.input--short { max-width: 140px; }

.no-margin { margin: 0; }

/* Admin: Client documents (Design/mockups/admin-documents.html; its inline styles, as classes) */
.field--end { align-self: end; }
.field-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin: -4px 0 12px; }
.link-button--dark { color: var(--blue); }
.client-more { margin-top: 16px; }
.client-more summary { cursor: pointer; margin-bottom: 12px; }
.client-more .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--danger { color: #9A2A1F; border-color: #E8A39B; }
.client-folder { margin: 12px 0 0; }

/* Admin: booking activity from Cal.com's webhook (Overview, Clients) */
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.activity-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 8px 10px; border-radius: var(--radius-sm); }
.activity-list .tag { margin-top: 2px; }
.activity--new { background: #F2F7FE; }
@media (max-width: 560px) { .activity-list li { grid-template-columns: auto 1fr; } .activity-list li > .small { grid-column: 2; } }

/* Admin: the Clients list and a client's page */
.client-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.client-search input[type=search] { flex: 1 1 260px; font: inherit; padding: 10px 12px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); min-height: 44px; }
.client-list thead th { font-size: var(--step--1); }
.client-list thead a { color: var(--navy); text-decoration: none; }
.client-list thead a[aria-current] { color: var(--blue); }
/* the Clients list's filter (All, Clients, Calculator visitors): the one showing is bold, like a sorted column */
.client-filter a[aria-current] { font-weight: 600; color: var(--blue); text-decoration: none; }
.client-list tbody th a { font-weight: 600; }
.breadcrumb { margin: 0 0 8px; }

/* Admin: "Email them the link" on a client's page */
.email-link { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }

/* Admin: the visit invoice form's lines, and its preview */
.invoice-lines input, .invoice-lines select { font: inherit; padding: 8px 10px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); min-height: 40px; width: 100%; }
.invoice-lines th, .invoice-lines td { padding: 8px 10px; }
.invoice-lines td:nth-child(2) { width: 45%; }
.invoice-lines thead th, .invoice-preview thead th { font-size: var(--step--1); }
.invoice-preview td, .invoice-preview tfoot th { white-space: nowrap; }
.invoice-preview tfoot th { text-align: right; font-weight: 500; }
.admin-form textarea { font: inherit; padding: 12px 14px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); width: 100%; }

/* Admin: the invoice table (Invoices, and a client's page) */
.invoice-list thead th { font-size: var(--step--1); }
.invoice-list .inline-form { margin-left: 8px; }

/* The Share buttons (Pages/Shared/_Share.cshtml): the header, the phone menu and the navy Book a call band */
.share-menu { position: relative; }
.share-menu summary { list-style: none; cursor: pointer; }
.share-menu summary::-webkit-details-marker { display: none; }
.share-links { list-style: none; margin: 0; padding: 0; }
.share-links a, .share-links .link-button { font-weight: 600; font-size: var(--step--1); }

/* in the header: a ghost button beside Book a call, opening a small panel below it */
.share--header summary.btn { min-height: 42px; padding: 10px 18px; }
.share--header .share-links { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 180px; display: grid; gap: 2px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.share--header .share-links a, .share--header .share-links .link-button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--navy); text-decoration: none; }
.share--header .share-links a:hover, .share--header .share-links .link-button:hover { background: var(--paper); color: var(--blue); }

/* in the phone menu: a full-width button under Book a call, its links listed below */
.share--menu { margin-top: 10px; }
.share--menu .share-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 4px 4px; }
.share--menu .share-links a, .share--menu .share-links .link-button { color: var(--blue); }

/* in the navy band: a line asking, an outlined button, and the links in a row */
.share--band { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.share--band .share-menu { display: flex; flex-direction: column; align-items: center; }
.share--band .share-prompt { margin: 0; color: #C7D1E0; }
.btn--outline-light { border: 2px solid rgba(255, 255, 255, .7); color: var(--white); background: transparent; }
.btn--outline-light:hover, .share-menu[open] .btn--outline-light { background: var(--white); color: var(--navy); }
.share--band .share-links { margin-top: 10px; padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; background: rgba(255, 255, 255, .08); border-radius: var(--radius-sm); }
.share--band .share-links a, .share--band .share-links .link-button { color: var(--white); }

/* A price table whose cells hold a sentence, not just a price (What it costs, Optional afterwards) */
.table--wrap td { white-space: normal; }
.table--wrap th { width: 45%; }
@media (max-width: 560px) { .table--wrap th, .table--wrap td { display: block; width: auto; } .table--wrap th { border-bottom: 0; padding-bottom: 4px; } .table--wrap td { padding-top: 4px; } }

/* Admin: Ben's notes on a client's page */
.field select { font: inherit; padding: 12px 14px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); min-height: 48px; width: 100%; }
.note-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.note-list li { border-top: 1px solid var(--line); padding-top: 12px; }
.note-head { margin: 0 0 4px; }
.note-list .note-text { margin: 0 0 4px; }

/* For organisations and teams (/teams, Docs/Teams.md): the mockup's inline styles, as classes */
.space-above-xs { margin-top: 12px; }
.space-above-md { margin-top: 24px; }
.space-above-lg { margin-top: 40px; }
/* cards side by side are the same height, as in the mockup */
.grid--stretch { align-items: stretch; }
/* the smaller headings on the three "Using it safely" cards */
.card .h-card { font-size: 1.05rem; }
/* the line under "Buying from us" */
.card-strap { font-size: var(--step-1); font-weight: 600; color: var(--navy); margin-bottom: 4px; }
/* a link in the navy band takes the band's colour */
.link-inherit { color: inherit; }

/* Admin: an organisation's booking or record (Docs/Teams.md), next to the design's call, visit and check-in tags */
.tag--org { background: var(--navy); color: var(--white); }

/* Your order form, on the client's page: the I accept box and its two ticks */
.accept-box { margin-top: 24px; padding: 20px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); }
.accept-box h3 { margin-top: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: var(--step--1); color: var(--ink); }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }

/* Signing in to a client's page (Docs/ClientSignIn.md): "Check it's you", and the line at the foot of the page */
.sign-in form { margin-top: 12px; }
/* Send another code: on a line of its own, well clear of Open my page (it touched it on a phone, inline) */
.sign-in .inline-form { display: block; margin-top: 24px; }
.signed-in { margin-top: 8px; }

/* Cancel on an accepted order form, in the admin: opened, then confirmed */
.cancel-order-form summary { cursor: pointer; font-size: var(--step--1); }
.cancel-order-form form { margin-top: 8px; min-width: 260px; }

/* the admin client page's email buttons, one under the other */
.email-link--spaced { margin-bottom: 10px; }

/* Admin menu: at the body size its nine items wrapped onto a second line on a laptop (Ben, 2026-10-04), so the menu
   and the links beside it are a step smaller, more tightly spaced, and never break inside an item */
.admin-header .wrap { gap: 20px; }
.admin-nav { gap: 2px; }
.admin-nav a { font-size: var(--step--1); padding: 6px 9px; white-space: nowrap; }
.admin-user { font-size: var(--step--1); white-space: nowrap; }

/* Admin Analytics: Umami's share dashboard, full width and most of the screen's height */
.stats-frame { display: block; width: 100%; height: 80vh; min-height: 600px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); }

/* The admin bar's More menu: looks like the other items, and opens a small navy panel below it */
.admin-more { position: relative; }
.admin-more summary { list-style: none; cursor: pointer; color: #C7D1E0; padding: 6px 9px; border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 500; white-space: nowrap; }
.admin-more summary::-webkit-details-marker { display: none; }
.admin-more summary::after { content: " ▾"; font-size: .8em; }
.admin-more summary:hover, .admin-more[open] summary { color: var(--white); background: rgba(255,255,255,.08); }
.admin-more summary.is-current { color: var(--white); background: rgba(255,255,255,.14); }
.admin-more-menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 160px; margin-top: 4px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--navy); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.admin-more-menu a { display: block; }
@media (max-width: 760px) {
  /* on a phone the bar used to scroll sideways, which would clip the panel; with More it's few enough items to wrap */
  .admin-nav { overflow-x: visible; flex-wrap: wrap; }
}


/* What's next on a client's page: their steps in order (Cowork request 17). Built on the documents list (.docs/.doc):
   a numbered mark in place of the PDF icon, the step that's "now" highlighted, done ones ticked and quieter, later
   ones dashed and grey (.doc--later). Prefixed cp- because site.css's .steps and .step-* are the public pages'
   numbered steps */
.cp-step-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--step-0)/1 var(--font-body); background: var(--line); color: var(--muted); }
.cp-step--now { border: 2px solid var(--blue); background: var(--blue-soft); }
.cp-step--now .cp-step-mark { background: var(--blue); color: var(--white); }
.cp-step--done .cp-step-mark { background: var(--blue-soft); color: var(--blue); }
.cp-step--done strong, .cp-step--later strong { color: var(--muted); }
.cp-step .doc-text p { margin: 4px 0 0; }
.cp-step-when { font-weight: 600; color: var(--navy); }
.cp-step .doc-status { display: block; }

/* Book your site visit: the days they can pick (Cowork request 16 B, revised). Taken days are greyed out */
.days-box { margin-top: 12px; }
.days-box summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.days-list { border: 0; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; }
.days-list legend { padding: 0; margin-bottom: 8px; }
.days-list .check { margin-bottom: 8px; }
.check--off { color: var(--muted); }

/* Their timeline on a client's admin page (Cowork requests 19 and 20): Ben's steps in order. The step that's now is
   open and outlined; later ones folded and grey; done ones ticked; skipped ones struck through */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-step { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.tl-step summary { display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.tl-step summary::-webkit-details-marker { display: none; }
.tl-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--step--1)/1 var(--font-body); background: var(--line); color: var(--muted); }
.tl-state { margin-left: auto; color: var(--muted); }
.tl-body { padding: 0 14px 14px 56px; }
.tl-body p { margin: 4px 0; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tl-subs { list-style: none; margin: 8px 0; padding: 0; font-size: var(--step--1); }
.tl-subs li { margin: 2px 0; }
.tl-sub--done { color: var(--muted); }
.tl-tick { margin-top: 8px; }
.tl-tick summary { cursor: pointer; color: var(--blue); padding: 0; display: inline; }
.tl-step--now { border: 2px solid var(--blue); background: var(--blue-soft); }
.tl-step--now .tl-mark { background: var(--blue); color: var(--white); }
.tl-step--now .tl-state { color: var(--navy); font-weight: 600; }
.tl-step--done .tl-mark { background: var(--blue-soft); color: var(--blue); }
.tl-step--done strong, .tl-step--later strong, .tl-step--skipped strong { color: var(--muted); }
.tl-step--skipped strong { text-decoration: line-through; }
@media (max-width: 560px) { .tl-body { padding-left: 14px; } .tl-state { display: none; } }

/* Needs you on the Overview (request 19): a card for each client with something waiting on Ben. Older than two
   working days: the warning style */
.needs-you { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.needs-due { margin: 0 0 2px; color: var(--muted); }
.needs-card--overdue .needs-due { color: #9B2C1F; }
.needs-card { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--white); }
.needs-card h3 { margin: 0 0 4px; font-size: var(--step-0); }
.needs-card .actions { margin: 8px 0 0; gap: 8px; }
.needs-card--overdue { background: #FDECEA; border-color: #E8A39B; border-left-color: #C0392B; }
/* The call's details on the timeline: their answers to the booking questions */
.tl-call { flex-basis: 100%; }
.tl-answers { margin: 4px 0 8px; font-size: var(--step--1); display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.tl-answers dt { color: var(--muted); }
.tl-answers dd { margin: 0; }
@media (max-width: 560px) { .tl-answers { grid-template-columns: 1fr; } .tl-answers dd { margin-bottom: 6px; } }

/* Create invoice and Order form under a client's timeline */
.client-new { margin: 0 0 20px; }

/* Home: a smaller hero image and less padding (Ben, 2026-10-13: the logo smaller, "so more of the what we can do for
   your business is shown"), so the savings figures under the hero show on arrival */
.hero { padding: 48px 0 40px; }
.hero-mark { width: min(240px, 100%); }
@media (max-width: 760px) {
    .hero { padding: 24px 0 32px; }
    .hero-mark { width: min(100px, 30%); }
}

/* The header menu with Savings calculator in it (Ben, 2026-10-13): items never break over two lines; on narrower
   laptops the gaps close up, and below about 980px the text is a step smaller and the header's Share button goes (Share
   is still in the phone menu and the Book a call band). Below 760px the phone menu takes over, as before */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) {
    .nav { gap: 18px; }
}
@media (max-width: 980px) and (min-width: 761px) {
    .nav { gap: 12px; }
    .nav a:not(.btn) { font-size: var(--step--1); }
    .nav .btn { padding: 8px 14px; font-size: var(--step--1); }
    .nav .share--header { display: none; }
}
/* the logo is never squeezed under the menu, and just above the phone menu's width it's a little smaller to make room */
.site-header .logo { flex-shrink: 0; }
@media (max-width: 860px) and (min-width: 761px) {
    .site-header .logo .logo-mark { height: 40px; }
    .site-header .logo .logo-word { height: 22px; }
}

/* Admin: Emails (/admin/emails): the list beside the picked email, framed at its own width, and its plain text */
.emails-review { align-items: start; }
.emails-list li { display: grid; gap: 2px; }
.emails-list a[aria-current="page"] { font-weight: 700; color: var(--navy); }
.email-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 16px; font-size: var(--step--1); }
.email-facts dt { color: var(--muted); }
.email-facts dd { margin: 0; }
.email-frame { display: block; width: 100%; height: 900px; border: 1px solid #CFCABF; border-radius: var(--radius-sm); background: var(--white); }
.email-text { margin-top: 16px; }
.email-text summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.email-text pre { white-space: pre-wrap; font-size: var(--step--1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }

/* A client's page: the tips switch under their calculator results */
.cp-tips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cp-tips .check { margin: 0; flex: 1 1 320px; }

/* Admin: a calculator result not yet confirmed (they haven't signed in since): quieter */
.calc-unconfirmed { color: var(--muted); }