/* Noircraft Lab 2026 - calculator (f19, f20) and brief (f21, f22), stage 3a.
   Mobile first; control widths 1360 and 390; the desktop layout from 1024. The field components (.fld, .inw, .corner, .req)
   are shared with the For agencies form and live in pages.css. Every colour is a token or a value of the frame noted next to it. */

/* ---- Shared: page head, step headings ---- */
.nc-calc__in, .nc-brief__in { max-width: 1360px; margin: 0 auto; }
.nc-calc-head, .nc-brief-head { padding: 40px var(--space-20) 0; }
.nc-calc-head .nc-h1, .nc-brief-head .nc-h1 { font-size: 40px; line-height: 1.08; } /* f20, f22 */
.nc-calc-head .nc-lead, .nc-brief-head .nc-lead { margin-top: 14px; }
.nc-brief-head .nc-lead + .nc-lead { margin-top: 8px; }
.step-h { display: flex; align-items: center; gap: 12px; min-height: 32px; margin: 0; padding: 0 2px; } /* the default legend padding and height of the frames */
.step-n { width: 30px; height: 30px; border-radius: var(--radius-8); border: 1px solid var(--gold-line-icon); display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--font-sans); color: var(--gold); flex: none; }
.step-t { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; }

/* ---- Calculator ---- */
.nc-calc-body { padding: 32px var(--space-20) 56px; }
.nc-calc__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.nc-calc__set + .nc-calc__set { margin-top: 40px; }
.pk-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.pk { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 18px; border-radius: var(--radius-14); background: var(--surface); border: 1px solid var(--line); box-sizing: border-box; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.pk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pk:hover { border-color: var(--gold-line); }
.pk:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pk-dot { margin-top: 3px; width: 20px; height: 20px; border-radius: var(--radius-round); border: 1.5px solid rgba(240,237,232,0.40); box-sizing: border-box; }
.pk-txt { min-width: 0; }
.pk-name { display: block; font-family: var(--font-serif); font-size: 20px; line-height: 1.25; }
.pk-desc { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.pk-price { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; white-space: nowrap; }
.pk-on { background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%); border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(232,201,74,0.08), 0 0 28px rgba(232,201,74,0.18); }
.pk-on .pk-dot { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 4.5px, transparent 5px); }

.ad-list { margin: 18px 0 0; padding: 0; list-style: none; border-radius: var(--radius-14); background: var(--surface); border: 1px solid var(--line-faint); }
.ad { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.ad + .ad { border-top: 1px solid rgba(240,237,232,0.08); }
.ad-main { flex: 1; min-width: 0; }
.ad-l { flex: 1; min-width: 0; font-size: 16px; line-height: 1.4; }
.ad-p { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.cnt { display: flex; align-items: center; gap: 2px; flex: none; }
.cnt button { width: 44px; height: 44px; border-radius: var(--radius-10); border: 1px solid var(--line-glass); background: transparent; color: var(--ink); font: 400 20px/1 var(--font-sans); cursor: pointer; }
.cnt button:hover { border-color: var(--gold-line); }
.cnt button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cnt output { width: 30px; text-align: center; font-size: 18px; }
.cnt-on output { color: var(--gold); }
.chk { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 44px; cursor: pointer; }
.chk input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 6px; border: 1.5px solid rgba(240,237,232,0.40); background: transparent; cursor: pointer; }
.chk input:checked { border-color: var(--gold); background: var(--gold); }
.chk input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chk input:disabled { border-style: dashed; border-color: rgba(240,237,232,0.22); cursor: not-allowed; }
.ad-off .ad-l, .ad-off .ad-p { color: rgba(240,237,232,0.38); }
.ad-off .chk { cursor: not-allowed; }
.hint { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding-left: 38px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.hint[hidden] { display: none; }
.hint svg { flex: none; margin-top: 2px; color: var(--gold); }
.nc-calc__pick { display: inline; border: 0; background: none; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nc-calc__pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 767px) { .nc-calc__pick { padding: 12px 0; margin: -12px 0; } } /* touch target 44 px, the line height stays */
.ad-note { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

.res { margin-top: 32px; padding: 22px 20px; }
.res .nc-label { line-height: normal; }
.res-rows { margin-top: 14px; }
.res-rows:empty { display: none; }
.res-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.res-row + .res-row { margin-top: 6px; }
.res-row span:last-child { color: var(--ink); white-space: nowrap; }
.res-total { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line-faint); }
.res-sum { margin: 8px 0 0; font-family: var(--font-serif); font-size: 44px; line-height: 1; text-shadow: 0 0 24px rgba(232,201,74,0.25); }
.res-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.res-btns { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.nc-calc__reset { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; background: none; padding: 0; color: var(--ink); font: 16px var(--font-sans); cursor: pointer; }

@media (min-width: 768px) {
  .pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pk { display: flex; flex-direction: column; align-items: stretch; min-height: 176px; padding: 24px; border-radius: var(--radius-16); }
  .pk-dot { margin-top: 0; }
  .pk-name { margin-top: 18px; font-size: 22px; line-height: 1.2; }
  .pk-desc { margin-top: 8px; }
  .pk-price { margin-top: auto; padding-top: 18px; font-size: 26px; line-height: 1; }
}
@media (min-width: 1024px) {
  .nc-calc-head, .nc-brief-head { padding: 72px var(--space-80) 0; }
  .nc-calc-head .nc-h1, .nc-brief-head .nc-h1 { font-size: 72px; line-height: 1; }
  .nc-calc-head .nc-lead, .nc-brief-head .nc-lead { margin-top: 22px; }
  .nc-brief-head .nc-lead { max-width: 820px; }
  .step-h { gap: 14px; min-height: 34px; }
  .step-n { width: 32px; height: 32px; }
  .step-t { font-size: 28px; }
  .nc-calc-body { padding: 56px var(--space-80) 96px; }
  .nc-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
  .nc-calc__set + .nc-calc__set { margin-top: 56px; }
  .pk-grid { margin-top: 24px; }
  .pk-on { box-shadow: var(--glow-card); }
  .ad-list { margin-top: 24px; border-radius: var(--radius-16); }
  .ad { gap: 20px; min-height: 76px; padding: 0 24px; box-sizing: border-box; }
  .ad--seo { position: relative; padding-top: 16px; padding-bottom: 16px; padding-right: 110px; }
  .ad--seo .ad-p { position: absolute; right: 24px; top: 50%; translate: 0 -50%; } /* f19: the price is centred on the whole row (label and hint) */
  .ad-l { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 17px; }
  .ad-p { margin: 0; font-size: 15px; line-height: normal; white-space: nowrap; }
  .cnt { gap: 4px; }
  .cnt output { width: 36px; }
  .chk { gap: 16px; min-height: 0; }
  .hint { align-items: center; margin-top: 6px; padding-left: 40px; }
  .hint svg { margin-top: 0; }
  .ad-note { margin-top: 16px; }
  .res { position: sticky; top: 24px; margin-top: 0; padding: 32px; box-sizing: border-box; }
  .res-rows { margin-top: 18px; }
  .res-row { gap: 16px; }
  .res-row + .res-row { margin-top: 8px; }
  .res-total { margin-top: 24px; padding-top: 20px; }
  .res-sum { margin-top: 10px; font-size: 56px; text-shadow: 0 0 28px rgba(232,201,74,0.25); }
  .res-note { margin-top: 16px; }
  .res-btns { margin-top: 24px; flex-direction: row; align-items: center; gap: 24px; }
  .nc-calc__reset { display: inline-flex; width: auto; min-height: 0; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
}
.nc-calc__reset { text-decoration: underline; text-underline-offset: 5px; }
.nc-calc__reset:hover { color: var(--gold); }
.nc-calc__reset:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pk { transition: none; } }

/* ---- Brief (f21, f22) ---- */
.nc-brief-body { padding: 32px var(--space-20) 56px; }
.toc { display: none; }
.nc-bform { min-width: 0; }
.sec { margin: 0; padding: 22px 18px; border-radius: var(--radius-16); background: var(--surface); border: 1px solid var(--line-faint); min-width: 0; scroll-margin-top: 80px; }
.sec + .sec { margin-top: 20px; }
.sec legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding: 0; }
.sec-n { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.sec-t { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.sec > .fld, .sec > .grid2, .sec > .cards, .sec > .opts { clear: both; }
.sec > .fld + .fld { margin-top: 20px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.grid2 .is-wide { grid-column: 1 / -1; }
.fld textarea { height: 120px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-glass); font-size: 15px; cursor: pointer; box-sizing: border-box; }
.opt input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border-radius: 5px; border: 1.5px solid rgba(240,237,232,0.40); background: transparent; cursor: pointer; }
.opt input[type="radio"] { border-radius: var(--radius-round); }
.opt input:checked { border-color: var(--gold); background: var(--gold); }
.opt:has(input:checked) { border-color: var(--gold-line-plate); background: rgba(232,201,74,0.06); }
.opt:has(input:focus-visible), .card:has(input:focus-visible), .sty:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.card { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 20px; border-radius: var(--radius-14); border: 1px solid var(--line-glass-soft); font-size: 16px; cursor: pointer; box-sizing: border-box; }
.card input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: var(--radius-round); border: 1.5px solid rgba(240,237,232,0.40); }
.card input:checked { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 4.5px, transparent 5px); }
.card:has(input:checked) { border-color: var(--gold-line-plate); background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%); box-shadow: 0 0 24px rgba(232,201,74,0.14); }

/* W-28 style pairs */
.sty-pairs { display: block; }
.sty-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sty-row + .sty-row { margin-top: 22px; }
.sty-n { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.sty { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--radius-12); border: 1px solid var(--line-glass-soft); cursor: pointer; }
.sty input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sty-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-10); }
.sty-l { font-size: 14px; padding: 0 4px 2px; }
.sty:has(input:checked) { border-color: var(--gold-line-strong); box-shadow: 0 0 0 1px rgba(232,201,74,0.12), 0 0 20px rgba(232,201,74,0.18); }
.sty:has(input:checked) .sty-l { color: var(--gold); }
.sty-or { display: none; }
.sty-both { grid-column: 1 / -1; justify-content: center; font-size: 14px; }

/* The calculator block of section 08 */
.calc-box { border-radius: var(--radius-12); border: 1px solid rgba(232,201,74,0.40); background: var(--surface-raised); padding: 16px 18px; }
.calc-cap { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.calc-cap svg { flex: none; color: var(--gold); }
.calc-out { display: block; margin-top: 12px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.calc-row span:last-child { white-space: nowrap; }
.calc-sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.calc-sum span { color: var(--ink); } /* f21: the lines muted, the total row ink */
.calc-edit { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.calc-edit:hover { color: var(--gold); }
.calc-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.nc-bform__submit { margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.nc-bform__submit button.nc-btn { cursor: pointer; font-family: var(--font-sans); }
.nc-bform__submit button[aria-disabled="true"] { opacity: .7; cursor: progress; }
.nc-bform__note { margin: 0; font-size: 14px; color: var(--muted); }


@media (min-width: 768px) {
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  .nc-brief-body { padding: 56px var(--space-80) 96px; }
  .nc-brief__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
  .toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; padding: 20px 0; border-left: 1px solid var(--line-faint); }
  .toc a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-left: 20px; font-size: 15px; line-height: normal; color: var(--muted); text-decoration: none; }
  .toc a span { font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: normal; color: var(--gold); }
  .toc a:hover { color: var(--ink); }
  .toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .toc a[aria-current="step"] { color: var(--ink); border-left: 2px solid var(--gold); margin-left: -1px; padding-left: 19px; }
  .sec { padding: 32px 36px; }
  .sec-t { font-size: 26px; }
  .fld--narrow { max-width: 420px; }
  .sty-row { grid-template-columns: 40px minmax(0, 1fr) 32px minmax(0, 1fr) 172px; align-items: center; gap: 12px; }
  .sty-row + .sty-row { margin-top: 16px; }
  .sty-n { grid-column: auto; }
  .sty { gap: 8px; padding: 8px; border-radius: var(--radius-14); }
  .sty-l { font-size: 15px; }
  .sty:has(input:checked) { box-shadow: 0 0 0 1px rgba(232,201,74,0.12), 0 0 24px rgba(232,201,74,0.18); }
  .sty-or { display: block; text-align: center; font-size: 13px; color: var(--muted); }
  .sty-both { grid-column: auto; padding: 0 12px; white-space: nowrap; }
  .nc-bform__submit { margin-top: 32px; flex-direction: row; align-items: center; gap: 28px; }
}