/* Free RAMS generator and free toolbox talk generator (two separate tools, one stylesheet):
   page and app styling on top of tools.css.
   Built Logic colours only: Charcoal #232A31, Off-White #FAFAF8, Consulting Blue #1B3A5B,
   Light Blue #AFC4DD, Steel Grey #586069, Soft Stone #E5E5E2, Hover #17314D.
   The document preview takes the user's own brand colour through --rg-brand (set at runtime). */

.rg-page .rg-section { padding: 56px 0; }
.rg-page .rg-section--hero { padding: 40px 0 24px; }
.rg-page .rg-section--tint { background: rgba(175, 196, 221, 0.22); }
.rg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.rg-page .fs-h1 { max-width: 22ch; }
.rg-lead { font-size: 19px; color: #586069; max-width: 62ch; margin: 16px 0 0; }
.rg-trust { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.rg-trust li { font-size: 14px; font-weight: 600; color: #1B3A5B; background: rgba(175, 196, 221, 0.45); border-radius: 999px; padding: 4px 12px; }
.rg-small { font-size: 14px; color: #586069; }

/* How it is different */
.rg-diff { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }
.rg-diff h3 { font: 600 20px/1.25 "Fraunces", Georgia, serif; color: #232A31; margin: 0 0 8px; }
.rg-diff p { margin: 0; font-size: 17px; color: #232A31; }

/* FAQ */
.rg-faq { max-width: 820px; }
.rg-faq details { border-bottom: 1px solid #E5E5E2; padding: 16px 0; }
.rg-faq summary { cursor: pointer; font: 600 19px/1.35 "Source Sans 3", system-ui, sans-serif; color: #232A31; list-style-position: outside; }
.rg-faq details p { margin: 10px 0 0; font-size: 17px; color: #232A31; max-width: 70ch; }
.rg-faq a { color: #1B3A5B; }

/* App shell */
.rg-steplink:focus-visible, .rg-ed:focus-visible, .rg-ls:focus-visible { outline: 3px solid #AFC4DD; outline-offset: 2px; }
.rg-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.rg-body > *, .rg-app, .rg-panel, .rg-top > * { min-width: 0; }
.rg-panel table:not(.rg-hztable) { max-width: 100%; }
.rg-panel .blt-scroll { max-width: 100%; overflow-x: auto; }
.rg-fc .blt-table td, .rg-fc .blt-table th { white-space: nowrap; }
.rg-steplink { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rg-panel .blt-h2 { outline: none; }
.rg-fields { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .rg-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rg-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-fields > [data-field]:has(textarea), .rg-fields > [data-field]:has(fieldset), .rg-field--wide { grid-column: 1 / -1; }
}
.rg-field { min-width: 0; margin-bottom: 6px; }
.rg-field fieldset { margin-top: 14px; }
.rg-hz { border-top: 1px solid #E5E5E2; margin-top: 20px; padding-top: 18px; }
.rg-why { margin: 0 0 6px; }
.rg-nav { border-top: 1px solid #E5E5E2; padding-top: 18px; }

/* Library */
.rg-lib summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rg-lib__title { font-weight: 600; }
.rg-lib__list { list-style: none; padding: 0; margin: 16px 0 8px; }
.rg-lib__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid #E5E5E2; }
.rg-lib__acts { display: inline-flex; gap: 14px; }

/* Sequence editor */
.rg-seq { margin-top: 24px; }
.rg-seq__list { padding-left: 22px; margin: 12px 0; }
.rg-seq__list li { margin-bottom: 10px; }
.rg-seq__list li .blt-input { display: inline-block; width: calc(100% - 4px); }
.rg-seq__acts { display: flex; gap: 14px; margin-top: 4px; }

/* Site info */
.rg-site { margin-top: 20px; }
.rg-hosp { display: grid; gap: 8px; }
.rg-qr { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 14px 0; }
.rg-qr svg { flex: none; border-radius: 6px; }
.rg-qr .blt-hint { flex: 1 1 200px; margin: 0; }
.rg-qr a, .rg-sitecard a { color: #1B3A5B; }

/* Gap check */
.rg-gap { border: 1px solid #E5E5E2; border-radius: 12px; padding: 16px; margin: 12px 0; background: #FAFAF8; }
.rg-gap__label { margin: 0; }
.rg-gap .rg-field > .blt-label, .rg-gap .rg-field legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rg-gap .blt-actions { margin-top: 10px; }
.rg-cos { margin-top: 20px; }

/* Result */
.rg-top { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .rg-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rg-of { font: 500 20px "IBM Plex Mono", ui-monospace, monospace; color: #586069; margin-right: 10px; }
.rg-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; }
.rg-scorelist { list-style: none; padding: 0; margin: 14px 0; }
.rg-scorelist li { padding: 8px 0; border-bottom: 1px solid #E5E5E2; }
.rg-scorelist__row { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.rg-scorelist .blt-hint { display: block; margin-top: 2px; }
.rg-checklist { list-style: none; padding: 0; margin: 12px 0; }
.rg-checklist li { position: relative; padding: 6px 0 6px 26px; font-size: 16px; }
.rg-checklist li::before { position: absolute; left: 0; top: 6px; width: 18px; text-align: center; font-weight: 700; }
.rg-checklist .is-ok::before { content: "\2713"; color: #1B3A5B; }
.rg-checklist .is-fixed::before { content: "\21BB"; color: #586069; }
.rg-checklist .is-warn { font-weight: 600; }
.rg-checklist .is-warn::before { content: "!"; color: #FAFAF8; background: #232A31; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; font-size: 13px; }
.rg-cosnum { margin: 0; }
.rg-sign { margin-bottom: 16px; }
.rg-signstate { margin: 12px 0 0; }
.rg-exports { margin: 0 0 16px; }
.rg-brief, .rg-talkcard { margin-top: 16px; }
.rg-brief .blt-table, .rg-talk .blt-table { margin: 12px 0; }
.rg-bridge { margin-top: 20px; }
.rg-bridge .blt-h3 { color: #FAFAF8; }
.rg-bridge .blt-btn { background: #FAFAF8; color: #232A31; border-color: #FAFAF8; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .rg-bridge .blt-btn:hover { background: #AFC4DD; border-color: #AFC4DD; color: #232A31; } }

/* Editable preview of the document */
.rg-preview { margin: 0 0 16px; }
.rg-sheet { position: relative; overflow: auto; }
.rg-sheet h3 { font: 600 22px/1.25 "Fraunces", Georgia, serif; color: var(--rg-brand, #1B3A5B); margin: 8px 0 12px; }
.rg-sheet h4 { font-size: 16px; font-weight: 700; color: var(--rg-brand, #1B3A5B); margin: 22px 0 8px; }
.rg-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 3px solid var(--rg-brand, #1B3A5B); padding-bottom: 10px; font-size: 14px; color: #586069; }
.rg-sheet__head img { max-height: 44px; max-width: 180px; object-fit: contain; }
.rg-kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 4px 14px; margin: 0; }
.rg-kv dt { font-weight: 600; color: #586069; }
.rg-kv dd { margin: 0; }
.rg-ed { border-radius: 3px; padding: 0 2px; }
.rg-ed:hover { background: rgba(175, 196, 221, 0.3); }
.rg-ed:focus { background: #FAFAF8; box-shadow: 0 0 0 2px #AFC4DD; outline: none; }
.rg-amber { background: #E5E5E2; border: 1.5px dashed #586069; }
.rg-hztable { min-width: 860px; }
.rg-hztable ul { margin: 0; padding-left: 16px; }
.rg-risk { white-space: nowrap; font-size: 14px; }
.rg-ls { font: 14px "IBM Plex Mono", ui-monospace, monospace; padding: 2px; border: 1px solid #586069; border-radius: 4px; background: #FAFAF8; color: #232A31; }
.rg-del { display: block; font-size: 13px; padding: 2px 0; }
.rg-regs a { color: #1B3A5B; }
.rg-disc { font-size: 11px; line-height: 1.4; color: #586069; margin-top: 28px; }
.rg-foot { font-size: 13px; color: #586069; margin: 4px 0 0; }

/* Talk */
.rg-next__k { font-size: 14px; color: #586069; margin: 0; }
.rg-next__t { font-size: 19px; margin: 4px 0; }
.rg-more { margin: 16px 0 0; border-top: 1px solid #E5E5E2; padding-top: 12px; }
.rg-more summary { cursor: pointer; font-weight: 600; }
.rg-talk h4 { font-size: 17px; font-weight: 700; margin: 20px 0 6px; }
.rg-opener { font: 500 19px/1.45 "Fraunces", Georgia, serif; color: #1B3A5B; }
.rg-onething { background: #232A31; color: #FAFAF8; border-radius: 12px; padding: 14px 16px; }
.rg-checksq details { margin: 4px 0 12px; }
.rg-checksq summary { cursor: pointer; color: #1B3A5B; font-weight: 600; font-size: 15px; }
.rg-trbar { margin: 16px 0; }
.rg-say { margin: 4px 0 12px; }

/* Phone briefing opened from a QR code */
.rg-briefing-mode .rg-hide-in-brief { display: none; }
.rg-phone { max-width: 640px; margin: 0 auto; }
.rg-phone__card { font-size: 19px; }
.rg-phone__list { padding-left: 22px; }
.rg-phone__list li { margin: 0 0 14px; }
.rg-phone__tr { display: block; color: #1B3A5B; font-weight: 600; margin-top: 2px; }
.rg-phone__em { font-size: 17px; }

/* Small print (Kristian, 7 Oct 2026): disclaimers sit once, small, near the bottom. */
.rg-fine { font-size: 12px; line-height: 1.45; color: #586069; margin: 12px 0 0; }
.rg-page .rg-section--fine { padding: 0 0 32px; }
.rg-section--fine .rg-fine { max-width: 90ch; margin: 0; }

@media print { .rg-lib, .rg-nav, .rg-exports, .rg-bridge { display: none; } }
@media (prefers-reduced-motion: reduce) { .rg-page * { scroll-behavior: auto; } }
.rg-bridge .blt-h2 { color: #FAFAF8; }

/* Progress panel while the AI writes (rams-ui.ts progress()) */
.rg-progress { margin: 16px 0 0; padding: 20px; border: 1px solid #AFC4DD; border-radius: 12px; background: #FAFAF8; }
.rg-progress__title { font: 600 20px/1.3 "Fraunces", Georgia, serif; color: #232A31; margin: 0; }
.rg-progress__est { font-size: 16px; color: #586069; margin: 6px 0 14px; }
.rg-progress__bar { height: 10px; border-radius: 999px; background: #E5E5E2; overflow: hidden; }
.rg-progress__fill { height: 100%; width: 0; background: #1B3A5B; border-radius: 999px; transition: width 0.5s linear; }
.rg-progress__steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.rg-progress__steps li { position: relative; padding-left: 28px; font-size: 16px; color: #586069; }
.rg-progress__steps li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #AFC4DD; box-sizing: border-box; }
.rg-progress__steps li.is-active { color: #232A31; font-weight: 600; }
.rg-progress__steps li.is-active::before { border-color: #1B3A5B; border-top-color: transparent; animation: rg-spin 0.9s linear infinite; }
.rg-progress__steps li.is-done { color: #232A31; }
.rg-progress__steps li.is-done::before { background: #1B3A5B; border-color: #1B3A5B; }
.rg-progress__steps li.is-done::after { content: ""; position: absolute; left: 5px; top: 6px; width: 4px; height: 7px; border: solid #FAFAF8; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rg-progress__foot { font: 14px "IBM Plex Mono", ui-monospace, monospace; color: #586069; margin: 14px 0 0; }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rg-progress__fill { transition: none; }
  .rg-progress__steps li.is-active::before { animation: none; border-top-color: #1B3A5B; }
}

/* Fast path layout: the questions with the live "Will the principal contractor accept this?" meter beside them */
.rg-stage { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.rg-stage > * { min-width: 0; }
@media (min-width: 1000px) {
  .rg-stage:not(.rg-stage--wide) { grid-template-columns: minmax(0, 1fr) 280px; }
  .rg-meter { position: sticky; top: 96px; }
}
.rg-meter__k { font-weight: 600; margin: 0 0 6px; color: #232A31; }
.rg-meter__n { margin: 0 0 8px; }
.rg-meter__score { font: 600 34px/1 "Fraunces", Georgia, serif; color: #1B3A5B; }
.rg-meter__bar { height: 8px; background: #E5E5E2; border-radius: 999px; overflow: hidden; }
.rg-meter__bar span { display: block; height: 100%; background: #1B3A5B; transition: width .3s ease; }
.rg-meter__next { font-size: 15px; margin: 10px 0 8px; }
.rg-meter__list { list-style: none; padding: 0; margin: 0; font-size: 14px; color: #586069; }
.rg-meter__list li { padding: 3px 0 3px 20px; position: relative; }
.rg-meter__list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border: 1.5px solid #586069; border-radius: 50%; }
.rg-meter__list li.is-ok { color: #232A31; }
.rg-meter__list li.is-ok::before { background: #1B3A5B; border-color: #1B3A5B; }
/* Phone: a slim bar fixed to the bottom with the score and the next fix */
@media (max-width: 999px) {
  .rg-meter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border-radius: 0; margin: 0; padding: 8px 84px calc(8px + env(safe-area-inset-bottom)) 16px; box-shadow: 0 -4px 16px rgba(35, 42, 49, .12); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
  .rg-meter__k, .rg-meter__list, .rg-meter .blt-flag, .rg-meter .rg-of { display: none; }
  .rg-meter__n { margin: 0; grid-row: 1 / span 2; }
  .rg-meter__score { font-size: 26px; }
  .rg-meter__bar { height: 5px; }
  .rg-meter__next { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rg-app:has(.rg-meter) { padding-bottom: 72px; }
}

/* Paste a quote, voice note */
.rg-paste { margin: 8px 0 16px; }
.rg-mic { margin-top: 8px; }
.rg-mic[aria-pressed="true"] { background: #1B3A5B; color: #FAFAF8; }
.rg-drafts { margin-top: 16px; }

/* Letterhead summary */
.rg-brandline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #E5E5E2; border-radius: 10px; }
.rg-brandline img { max-height: 40px; max-width: 140px; object-fit: contain; }
.rg-brandline__sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #E5E5E2; }

/* Saved team */
.rg-team { margin-top: 20px; }
.rg-team summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rg-team__rows { margin: 12px 0; }
.rg-team__row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 8px 0; border-bottom: 1px solid #E5E5E2; }
@media (min-width: 760px) { .rg-team__row { grid-template-columns: 1.3fr 1fr .8fr 1fr auto; } }

/* Site photo with a pen */
.rg-sketch { margin-top: 20px; }
.rg-sketch__tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.rg-sketch__canvas { display: block; width: 100%; height: auto; border: 1px solid #E5E5E2; border-radius: 8px; touch-action: none; cursor: crosshair; }
.rg-sketch__canvas[hidden] { display: none; }
.rg-sheet__photo { max-width: 100%; border-radius: 6px; }

/* Result extras */
.rg-share, .rg-rev, .rg-permits, .rg-multi, .rg-plan, .rg-matrix { margin-top: 16px; }
.rg-multi summary, .rg-plan summary, .rg-matrix summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rg-matrix__t td, .rg-matrix__t th { text-align: center; }
.rg-matrix__t td:first-child, .rg-matrix__t th:first-child { text-align: left; }
.rg-attend { margin-top: 16px; }
.rg-quick textarea { font-size: 18px; }

/* Presenter mode */
.rg-noscroll { overflow: hidden; }
.rg-present { position: fixed; inset: 0; z-index: 2147483000; background: #232A31; color: #FAFAF8; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px; }
.rg-present__top { display: flex; align-items: center; gap: 16px; font-size: 16px; }
.rg-present__timer { margin-left: auto; font-variant-numeric: tabular-nums; }
.rg-present .blt-btn--ghost { color: #FAFAF8; border-color: #AFC4DD; background: transparent; }
.rg-present__card { align-self: center; justify-self: center; max-width: 920px; width: 100%; cursor: pointer; }
.rg-present__kind { color: #AFC4DD; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; margin: 0 0 12px; }
.rg-present__text { font: 600 clamp(26px, 5vw, 48px)/1.25 "Fraunces", Georgia, serif; margin: 0; }
.rg-present__xx { font-size: clamp(20px, 3.4vw, 32px); color: #AFC4DD; margin: 18px 0 0; }
.rg-present__answer { font-size: clamp(20px, 3.4vw, 32px); margin: 24px 0 0; padding: 16px; border-left: 4px solid #AFC4DD; background: rgba(175, 196, 221, .12); }
.rg-present__tap { color: #AFC4DD; margin-top: 24px; font-size: 16px; }
.rg-present__nav { display: flex; justify-content: space-between; gap: 12px; }
.rg-present__nav .blt-btn { min-width: 120px; min-height: 52px; font-size: 18px; }
.rg-present .blt-btn:not(.blt-btn--ghost) { background: #AFC4DD; color: #232A31; border-color: #AFC4DD; }