/* Atlas-Private application · Brand 2.5.0
   Extends issuer-form.css (the .tbf shell, fields, choice cards and pills), which
   the page loads first. Values come from tblocks-brand-tokens.css; no colour,
   size or spacing is hard-coded here. */

/* One question: a fieldset, so a screen reader hears its label with every option. */
.atl-q{border:0;margin:0;padding:0 0 var(--sp-8);min-width:0}
.atl-q + .atl-q{border-top:1px solid var(--rule);padding-top:var(--sp-8)}
.atl-q > legend:not(.tbf-sr){padding:0;margin:0 0 var(--sp-4);width:100%}
/* The step heading takes focus when a step opens, for screen readers; it is not a control, so no ring. */
.tbf-step > h2:focus,.atl-state-card:focus{outline:none}
.atl-qn{display:block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--sp-1)}
.atl-ql{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--fg)}
.atl-help{font-size:var(--fs-sm);color:var(--fg-2);margin:calc(-1 * var(--sp-2)) 0 var(--sp-4);max-width:62ch}
.atl-q .tbf-choice span{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--fg)}
.atl-q .tbf-choices.three{grid-template-columns:1fr 1fr 1fr}

/* A follow-up belongs to the answer above it. */
.atl-follow{margin-top:var(--sp-5);padding-left:var(--sp-4);border-left:2px solid var(--rule)}
.atl-follow + .atl-follow{margin-top:var(--sp-4)}
.atl-fl{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--fg);margin-bottom:var(--sp-2)}
.atl-follow .tbf-pills{margin-top:0}
.atl-inline{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.atl-inline input{max-width:220px}
.atl-inline .tbf-affix input{max-width:140px}
.atl-count{font-size:var(--fs-xs);color:var(--fg-3);margin-top:var(--sp-1)}

/* Errors, one per question, announced and linked from the controls. */
.atl-err{display:none;font-size:var(--fs-xs);color:var(--bad);margin:var(--sp-3) 0 0}
.atl-q.has-err .atl-err{display:block}
.atl-q.has-err .tbf-choice span,.atl-q.has-err .tbf-pill span{border-color:var(--bad)}

/* Documents: three slots, the first required. */
.atl-slot{border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.atl-slot.is-ok{border-color:var(--ok)}
.atl-slot.is-bad{border-color:var(--bad)}
.atl-slot h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);margin:0 0 var(--sp-1)}
.atl-slot p{font-size:var(--fs-sm);color:var(--fg-2);margin:0 0 var(--sp-4)}
.atl-slot .atl-file{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.atl-slot input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;min-height:0;padding:0;border:0}
.atl-slot label.tbf-btn{display:inline-flex;align-items:center}
.atl-slot input[type=file]:focus-visible + label{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
.atl-state{font-size:var(--fs-sm);color:var(--fg-2)}
.atl-state b{color:var(--fg)}
.atl-tag{display:inline-block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;border-radius:var(--r-pill);padding:2px 8px;margin-right:var(--sp-2);background:var(--info-bg);color:var(--accent)}
.atl-tag.ok{background:var(--ok-bg);color:var(--ok)}
.atl-tag.bad{background:var(--bad-bg);color:var(--bad)}
.atl-slot .atl-labels{margin-top:var(--sp-4)}
.atl-linkbtn{font:inherit;font-size:var(--fs-sm);background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer}

/* Who will invest, and the confirmation, beside the submit button. */
.atl-perimeter{margin-top:var(--sp-8);padding:var(--sp-5);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg-sunk)}
.atl-perimeter .atl-fl{margin-bottom:var(--sp-3)}
.atl-perimeter .atl-help{margin:var(--sp-3) 0 0}
.atl-meaning{font-size:var(--fs-xs);color:var(--fg-3);margin:var(--sp-5) 0 0;max-width:70ch}

/* After submit, and the verify page. */
.atl-state-card{padding:var(--sp-16) var(--sp-10)}
.atl-state-card .tbf-eyebrow{margin-bottom:var(--sp-2)}
.atl-state-card h2,.atl-state-card h1{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-snug);font-weight:var(--fw-semibold);margin:0 0 var(--sp-4)}
.atl-state-card p{color:var(--fg-2);max-width:58ch;margin:0 0 var(--sp-4)}
.atl-state-card .atl-ref{font-size:var(--fs-xs);color:var(--fg-3)}
.atl-acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-6)}
.atl-note{font-size:var(--fs-sm);margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:var(--info-bg);color:var(--fg)}
.atl-note.bad{background:var(--bad-bg);color:var(--bad)}
.atl-note.ok{background:var(--ok-bg);color:var(--ok)}
.atl-preview{margin-top:var(--sp-6);padding:var(--sp-4);border:1px dashed var(--warn);border-radius:var(--r-sm);background:var(--warn-bg);font-size:var(--fs-sm)}
.atl-preview a{color:var(--fg)}
.atl-solo{max-width:720px;margin:0 auto}

@media (max-width:680px){
  .atl-q .tbf-choices.three{grid-template-columns:1fr}
  .atl-state-card{padding:var(--sp-10) var(--sp-5)}
  .atl-follow{padding-left:var(--sp-3)}
}

/* ── Compact, full-width layout (Henri, 21 Oct 2026) ─────────────────────
   The form takes the whole container: no side panels (what happens next is a
   slim strip under the title), questions two to a row, answers flowing across
   the row. Long questions and step 4's blocks take the full width. */
/* The form beside a narrow process panel (Henri, 21 Oct 2026): compact, but the panel stays. */
.atl-page .tbf-grid{grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-8)}
.atl-page .tbf-panel{padding:var(--sp-5)}
.atl-page .tbf-panel h3{margin-bottom:var(--sp-3)}
.atl-panel-note{font-size:var(--fs-2xs);color:var(--fg-3);margin:var(--sp-3) 0 0}
.atl-page .tbf-main{padding-top:var(--sp-6)}
.atl-page .tbf-steps{margin-bottom:var(--sp-5)}
.atl-page .tbf-step{padding:var(--sp-8) var(--sp-10)}
.atl-page .tbf-step h2{font-size:var(--fs-h3);margin-bottom:var(--sp-5)}
/* One question per line (Henri, 21 Oct 2026: two questions side by side read as one). The answers still flow across. */
.atl-qgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
/* Each question on its own band, set apart by a hairline (Henri, 21 Oct 2026). */
.atl-qgrid > *{padding:var(--sp-6) 0}
.atl-qgrid > :first-child{padding-top:0}
.atl-qgrid > :last-child{padding-bottom:0}
.atl-qgrid > * + *{border-top:1px solid var(--rule)}
.atl-qgrid > .wide{grid-column:1 / -1}
.atl-page .atl-q select{max-width:440px}
.atl-page .atl-q textarea{max-width:720px}
.atl-qgrid > .tbf-intro,.atl-qgrid > .atl-meaning{margin:0}
.atl-page .atl-q,.atl-page .atl-q + .atl-q{padding:0;border-top:0}
.atl-page .atl-qgrid > .atl-q{padding:var(--sp-6) 0}
.atl-page .atl-qgrid > .atl-q:first-child{padding-top:0}
.atl-page .atl-qgrid > .atl-q:last-child{padding-bottom:0}
.atl-page .atl-qgrid > * + .atl-q{border-top:1px solid var(--rule)}
/* A fieldset draws its legend on its top border; floated, the legend sits inside
   the band, so the hairline shows whole and the spacing stays above the title. */
.atl-page .atl-qgrid > .atl-q > legend:not(.tbf-sr){float:left;width:100%;padding:0}
.atl-page .atl-qgrid > .atl-q > legend ~ *{clear:both}
.atl-page .atl-q > legend:not(.tbf-sr){margin-bottom:var(--sp-3)}
.atl-page .atl-ql{font-size:var(--fs-md)}
.atl-page .atl-help{margin:calc(-1 * var(--sp-1)) 0 var(--sp-3)}
.atl-page .atl-q .tbf-choices,.atl-page .atl-q .tbf-choices.three{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2)}
.atl-page .atl-q.wide .tbf-choices{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.atl-page .atl-q .tbf-choice span{padding:var(--sp-2) var(--sp-3)}
.atl-page .atl-follow{margin-top:var(--sp-3)}
.atl-page .atl-q.wide[data-n="11"]{display:block}
.atl-page .atl-q.wide[data-n="11"] > legend,.atl-page .atl-q.wide[data-n="11"] > .atl-help,.atl-page .atl-q.wide[data-n="11"] > .tbf-choices,.atl-page .atl-q.wide[data-n="11"] > .atl-err{grid-column:1 / -1}
.atl-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.atl-slots .atl-slot{margin:0;display:flex;flex-direction:column}
.atl-slots .atl-slot > .atl-file{margin-top:auto}
.atl-page .atl-perimeter{margin-top:0;padding:0;border:0;background:none}
.atl-page .atl-perimeter .atl-help{margin:var(--sp-2) 0 0}
.atl-page .atl-perimeter .tbf-check{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--rule)}
.atl-next{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-8);counter-reset:n;font-size:var(--fs-xs);color:var(--fg-2)}
.atl-next li{counter-increment:n;display:flex;gap:var(--sp-2);align-items:baseline}
.atl-next li::before{content:counter(n);font-weight:var(--fw-semibold);color:var(--accent)}
.atl-next b{color:var(--fg);font-weight:var(--fw-semibold)}
.atl-next[hidden]{display:none}
@media (max-width:1100px){ .atl-page .tbf-grid{grid-template-columns:minmax(0,1fr)} .atl-page .tbf-aside{position:static;grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .atl-page .tbf-aside{grid-template-columns:1fr} }
@media (max-width:860px){
  .atl-qgrid,.atl-slots,.atl-page .atl-q.wide[data-n="11"]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){ .atl-page .tbf-step{padding:var(--sp-6) var(--sp-5)} }
.atl-page .tbf-wrap{max-width:var(--container-wide)}
.atl-page .atl-q textarea{min-height:88px}
.atl-page .atl-q[data-n="10"] .tbf-choices{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* The header description as an annotation (Henri, 21 Oct 2026): wider, so it
   sits on three lines, on a light info tint with an information icon. The tint
   follows the theme through --s-info. */
.atl-page .tbf-lede.atl-annot{display:flex;gap:var(--sp-3);align-items:flex-start;max-width:min(700px,100%);
  background:color-mix(in srgb, var(--s-info) 9%, transparent);border:1px solid color-mix(in srgb, var(--s-info) 28%, transparent);
  border-left:3px solid var(--s-info);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);color:var(--fg-2)}
.atl-annot-i{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--s-info)}

/* The progress bar as buttons: back to any step, forward to one already opened. */
.tbf-steps .tbf-step-btn{all:unset;display:block;width:100%;cursor:pointer;color:inherit;font:inherit;border-radius:var(--r-xs)}
.tbf-steps .tbf-step-btn:disabled{cursor:default}
.tbf-steps .tbf-step-btn:not(:disabled):hover{color:var(--fg)}
.tbf-steps .tbf-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Autosave line under the step buttons. */
.atl-draft{font-size:var(--fs-2xs);color:var(--fg-3);margin:0;padding:var(--sp-3) var(--sp-10) 0}
.atl-draft .atl-linkbtn.armed{color:var(--bad, #C0392B)}
@media (max-width:680px){ .atl-draft{padding:var(--sp-3) var(--sp-5) 0} }

/* The issuing company and the issuance preferences (not scored). */
.atl-page .atl-issuer{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-5);max-width:880px}
.atl-page .atl-issuer .span2{grid-column:1 / -1}
.atl-page .atl-issuance .tbf-pills{margin:var(--sp-2) 0 var(--sp-4)}
.atl-page .atl-issue-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-5);max-width:880px;align-items:end}
/* What a document should include, folded under its card. */
.atl-incl{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-xs);color:var(--fg-2)}
.atl-incl summary{cursor:pointer;color:var(--s-info);font-weight:var(--fw-semibold)}
.atl-incl ul{margin:var(--sp-2) 0 0;padding-left:1.1em} .atl-incl li{margin-bottom:3px}
@media (max-width:680px){ .atl-page .atl-issuer,.atl-page .atl-issue-row{grid-template-columns:minmax(0,1fr)} }

/* Symmetry (Henri, 21 Oct 2026). The issuer and issuance fields share one
   880px two-column grid, so boxes line up down the page. The three document
   cards share their rows (subgrid): titles, descriptions, the "What it should
   include" link and the Add a PDF button sit at the same height in each card. */
.atl-page .atl-issuer .tbf-field label,.atl-page .atl-issue-row .tbf-field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-slots{grid-template-rows:auto;row-gap:0}
.atl-slots .atl-slot{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--sp-2);align-content:start}
.atl-slots .atl-slot > h3,.atl-slots .atl-slot > p,.atl-slots .atl-slot > .atl-incl{margin:0}
.atl-slots .atl-slot > .atl-file{margin-top:var(--sp-2)}
@media (max-width:860px){ .atl-slots{row-gap:var(--sp-4)} .atl-slots .atl-slot{display:flex;flex-direction:column;grid-row:auto} }