/* ==========================================================================
   FOLIO · EDITOR FAMILY
   --------------------------------------------------------------------------
   The interactive half of the system. The catalog covered presentation —
   figures, ledgers, charts — but the household route is fourteen tabs of
   editing, and none of it had a designed vocabulary.

   Built against what the tabs actually contain: 55 selects, 50 number inputs,
   16 checkboxes, 15 dates, 8 radios, 7 textareas. This is a numeric editor
   first, so tabular figures and right-aligned values are the default, not an
   option.

     .folio-field     the labelled control unit (label / control / help / error)
     .folio-editor    the editor pane, with a save-state contract
     .folio-wizard    multi-step shell, horizontal or rail
     .folio-modal     domain modal
     .folio-etable    dense editable table

   LAW · AN EDIT IS NEVER AMBIGUOUS
     The same rule the system applies to money in motion applies to a form:
     idle, dirty, saving, saved and failed are five designed states. A form
     that silently keeps changes is a bug, not a minimalism.

   Load order: folio.css -> folio-cards.css -> folio-editor.css -> folio-chrome.css
   ========================================================================== */

/* ==========================================================================
   A · FIELD  — the atom every editor is built from
   ========================================================================== */

.folio .folio-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.folio .folio-field__hint { color: var(--f-dim); font: 400 11.5px/1.45 var(--f-font-ui); }
.folio .folio-field > input,
.folio .folio-field > select,
.folio .folio-field > textarea,
.folio .folio-field .folio-combobox input {
    width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); font: 450 14px/1.3 var(--f-font-ui);
}
/* The stage control is a state pill, not a form field; its skin lives in
   folio-cards.css so this family never re-boxes it. */
.folio .folio-field > textarea { resize: vertical; }
.folio .folio-search-control { position: relative; display: flex; align-items: center; }
.folio .folio-search-control__icon { position: absolute; left: 14px; z-index: 1; color: var(--f-faint); font: 600 19px/1 var(--f-font-ui); pointer-events: none; }
/* No inset edge bar. The icon marks the field; a coloured stripe on the left of
   an input is decoration that reads as a validation state it does not have. */
.folio .folio-search-control input { width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; border: 1px solid var(--f-line-strong); border-radius: 999px; background: var(--f-paper); color: var(--f-ink); font: 500 14.5px/1.3 var(--f-font-ui); }
.folio .folio-search-control input:focus { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-soft); outline: none; }
.folio .folio-search-control input:focus + .folio-search-control__icon,
.folio .folio-search-control:focus-within .folio-search-control__icon { color: var(--f-accent); }
.folio .folio-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.folio .folio-field--wide { grid-column: 1 / -1; }
.folio .folio-modal-layer { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.folio .folio-modal__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(27, 29, 25, .58); }
.folio .folio-modal { position: relative; width: min(820px, 100%); max-height: min(88vh, 900px); overflow: auto; border: 1px solid var(--f-line-strong); border-radius: 14px; background: var(--f-paper); box-shadow: 0 24px 80px rgba(27, 29, 25, .25); }
.folio .folio-modal > header,
.folio .folio-modal > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.folio .folio-modal > header { border-bottom: 1px solid var(--f-line); }
.folio .folio-modal > footer { justify-content: flex-end; border-top: 1px solid var(--f-line); }
.folio .folio-modal h2 { margin: 2px 0 4px; font: 500 28px/1.15 var(--f-font-display); }
.folio .folio-modal header p { margin: 0; color: var(--f-dim); }
.folio .folio-modal__body { padding: 22px; }
.folio .folio-client-export section { margin-top: 18px; }
.folio .folio-client-export h3 { margin: 0 0 8px; font: 500 18px/1.25 var(--f-font-display); }
.folio .folio-client-export__list { margin: 0; padding: 0; list-style: none; }
.folio .folio-client-export__list li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--f-line); }
.folio .folio-client-export__list strong { overflow-wrap: anywhere; }
.folio .folio-client-export__list span,
.folio .folio-client-export__privacy { color: var(--f-dim); font-size: 13px; line-height: 1.5; }
.folio .folio-client-export__privacy { margin: 20px 0 0; }
.folio .folio-editor__notice, .folio .folio-notice { margin-bottom: 14px; padding: 10px 12px; border-left: 3px solid var(--f-gold); background: var(--f-gold-soft); }
.folio .folio-notice--error, .folio [data-folio-save-state="error"] .folio-editor__notice { border-color: var(--f-red); background: var(--f-red-soft); color: var(--f-red); }
.folio [data-folio-save-state="dirty"] { box-shadow: 0 24px 80px rgba(27, 29, 25, .25), inset 0 3px var(--f-gold); }
.folio [data-folio-save-state="saving"] { cursor: progress; }
.folio [data-folio-save-state="saved"] { box-shadow: 0 24px 80px rgba(27, 29, 25, .25), inset 0 3px var(--f-accent); }
.folio .folio-icon-button { width: 36px; height: 36px; border: 1px solid var(--f-line); border-radius: 50%; background: transparent; font-size: 22px; }

@media (max-width: 680px) {
    .folio .folio-modal-layer { padding: 0; align-items: end; }
    .folio .folio-modal { max-height: 94vh; border-radius: 14px 14px 0 0; }
    .folio .folio-editor-grid { grid-template-columns: 1fr; }
}

.folio .folio-field__label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--f-dim);
    font: 500 10px/1.4 var(--f-font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* an optional field says so; a required one stays silent */
.folio .folio-field__label .optional {
    color: var(--f-faint);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
}

.folio .folio-field__help {
    color: var(--f-dim);
    font: 400 11.5px/1.45 var(--f-font-ui);
}

.folio .folio-field__error {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--f-red);
    font: 500 11.5px/1.45 var(--f-font-ui);
}

.folio .folio-field__error::before { content: "▲"; font-size: 9px; }

/* error replaces help rather than stacking with it — two lines of guidance
   under one control is noise */
.folio .folio-field.is-invalid .folio-field__help { display: none; }
.folio .folio-field.is-invalid .folio-field__error { display: flex; }

/* ---- controls ---------------------------------------------------------- */

.folio .folio-input,
.folio .folio-select,
.folio .folio-textarea {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius, 9px);
    background: var(--f-paper);
    color: var(--f-ink);
    font: 400 13.5px/1 var(--f-font-ui);
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.folio .folio-textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* Existing accessible select and date behavior is retained inside Folio fields;
   these mappings give the shared controls the same editor anatomy. */
.folio .folio-field .advisor-select-trigger,
.folio .folio-field .advisor-date-trigger {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--f-line-strong);
    border-radius: var(--f-radius, 9px);
    background: var(--f-paper);
    color: var(--f-ink);
    font: 400 13.5px/1 var(--f-font-ui);
}
.folio .folio-field .advisor-select-trigger:focus,
.folio .folio-field .advisor-date-trigger:focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
    outline: none;
}

.folio :is(.folio-input, .folio-select, .folio-textarea):hover:not(:disabled) { border-color: var(--f-dim); }

.folio :is(.folio-input, .folio-select, .folio-textarea):focus {
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
}

.folio :is(.folio-input, .folio-select, .folio-textarea):disabled {
    border-color: var(--f-line);
    background: var(--f-inset);
    color: var(--f-faint);
    cursor: not-allowed;
}

.folio .folio-field.is-invalid :is(.folio-input, .folio-select, .folio-textarea) {
    border-color: var(--f-red);
}
.folio .folio-field.is-invalid :is(.folio-input, .folio-select):focus {
    box-shadow: 0 0 0 3px var(--f-red-soft);
}

/* native select, house skin: emerald chevron, no OS styling */
.folio .folio-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23236f5d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* ---- NUMERIC · the dominant control in this product --------------------
   Figures are tabular and right-aligned so a column of them scans as a
   column. The unit rides inside the control, not beside it, so the number
   and its unit can never wrap apart. */

.folio .folio-numwrap {
    position: relative;
    display: flex;
    align-items: center;
}

.folio .folio-numwrap .folio-input {
    padding-right: 46px;
    font-family: var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.01em;
}

/* leading currency glyph, de-emphasised the same way figures do it */
.folio .folio-numwrap--currency .folio-input { padding-left: 26px; }
.folio .folio-numwrap__pre {
    position: absolute;
    left: 12px;
    color: var(--f-dim);
    font: 400 12px/1 var(--f-font-mono);
    pointer-events: none;
}

.folio .folio-numwrap__unit {
    position: absolute;
    right: 12px;
    color: var(--f-dim);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

/* hide spinners: a $ amount has no meaningful step */
.folio .folio-numwrap .folio-input::-webkit-outer-spin-button,
.folio .folio-numwrap .folio-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.folio .folio-numwrap .folio-input[type="number"] { -moz-appearance: textfield; }

/* ---- checkbox / radio / switch ----------------------------------------- */

.folio .folio-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
}

.folio .folio-choice input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--f-accent);
    cursor: pointer;
}

.folio .folio-choice__text { min-width: 0; font-size: 13px; }
.folio .folio-choice__text b { display: block; font-weight: 500; }
.folio .folio-choice__text span { color: var(--f-dim); font-size: 11.5px; }

/* ---- inline link to another record (the account-picker pattern) -------- */

.folio .folio-field__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--f-accent);
    font: 500 11.5px/1 var(--f-font-ui);
    text-decoration: none;
}
.folio .folio-field__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.folio .folio-field__link::after { content: "›"; font-size: 13px; }

/* ==========================================================================
   B · EDITOR PANE
   ========================================================================== */

.folio .folio-editor {
    position: relative;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
}

.folio .folio-editor__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--f-line);
}

.folio .folio-editor__head > div { flex: 1; min-width: 0; }

.folio .folio-editor__eyebrow {
    margin: 0 0 5px;
    color: var(--f-accent);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.folio .folio-editor__title { margin: 0; font: 500 15.5px/1.3 var(--f-font-ui); }
.folio .folio-editor__lede { margin: 5px 0 0; color: var(--f-muted); font-size: 12.5px; }

.folio .folio-editor__body { padding: 6px 22px 18px; }

/* a row is one labelled concern: label column left, controls right.
   Two columns keeps a long form scannable; it collapses under 860px. */
.folio .folio-editor__row {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: 8px 26px;
    padding: 17px 0;
    border-bottom: 1px solid var(--f-hair, rgba(78, 66, 43, 0.10));
}
.folio .folio-editor__row:last-child { border-bottom: 0; }

.folio .folio-editor__rowlabel { padding-top: 9px; }
.folio .folio-editor__rowlabel b {
    display: block;
    font: 500 13px/1.35 var(--f-font-ui);
}
.folio .folio-editor__rowlabel span {
    display: block;
    margin-top: 3px;
    color: var(--f-dim);
    font-size: 11.5px;
    line-height: 1.45;
}

/* the control cluster: fields sit side by side and wrap as a unit */
.folio .folio-editor__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 16px;
    align-items: start;
}
.folio .folio-editor__fields--single { grid-template-columns: minmax(0, 1fr); }
.folio .folio-editor__fields--tight { max-width: 320px; }

/* product-specific value groups: the fieldset carries no chrome of its own and
   lays its fields out on the same grid as any other cluster */
.folio .folio-editor__familygroup {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}
.folio .folio-editor__familygroup[hidden] { display: none; }

/* progressive disclosure — advanced settings are closed by default */
.folio .folio-editor__advanced {
    margin-top: 4px;
    border-top: 1px solid var(--f-hair, rgba(78, 66, 43, 0.10));
}
.folio .folio-editor__advanced > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    color: var(--f-muted);
    font: 500 12px/1 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.folio .folio-editor__advanced > summary::-webkit-details-marker { display: none; }
.folio .folio-editor__advanced > summary::before {
    color: var(--f-accent);
    content: "›";
    font-size: 14px;
    transition: transform 150ms ease;
}
.folio .folio-editor__advanced[open] > summary::before { transform: rotate(90deg); }
.folio .folio-editor__advanced > summary:hover { color: var(--f-ink); }

/* ---- action bar + the save-state contract ------------------------------ */

.folio .folio-editor__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-top: 1px solid var(--f-line);
    border-radius: 0 0 var(--f-radius-lg, 13px) var(--f-radius-lg, 13px);
    background: rgba(255, 253, 248, 0.96);
    backdrop-filter: blur(10px);
}

.folio .folio-editor__actions { display: flex; gap: 9px; margin-left: auto; }

.folio .folio-editor__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--f-dim);
    font: 500 10.5px/1.4 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.folio .folio-editor__state::before {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--f-faint);
    content: "";
}

.folio .folio-editor__state[data-state="dirty"]  { color: var(--f-bronze); }
.folio .folio-editor__state[data-state="dirty"]::before  { background: var(--f-gold-bright); }
.folio .folio-editor__state[data-state="saving"] { color: var(--f-muted); }
.folio .folio-editor__state[data-state="saving"]::before {
    background: transparent;
    border: 1.5px solid var(--f-line-strong);
    border-top-color: var(--f-accent);
    width: 11px; height: 11px;
    animation: folio-spin 0.7s linear infinite;
}
.folio .folio-editor__state[data-state="saved"]  { color: var(--f-green); }
.folio .folio-editor__state[data-state="saved"]::before  { background: var(--f-green); }
.folio .folio-editor__state[data-state="error"]  { color: var(--f-red); }
.folio .folio-editor__state[data-state="error"]::before  { background: var(--f-red); }
.folio .folio-editor__state[data-state="denied"],
.folio .folio-editor__state[data-state="stale"],
.folio .folio-editor__state[data-state="conflict"] { color: var(--f-red); }
.folio .folio-editor__state[data-state="denied"]::before,
.folio .folio-editor__state[data-state="stale"]::before,
.folio .folio-editor__state[data-state="conflict"]::before { background: var(--f-red); }

@keyframes folio-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .folio .folio-editor__state[data-state="saving"]::before { animation-duration: 2.4s; }
}

/* unsaved work must be visible from outside the pane too */
.folio .folio-editor.is-dirty { border-color: rgba(212, 170, 63, 0.55); }

/* ==========================================================================
   C · WIZARD
   ========================================================================== */

.folio .folio-wizard {
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
    overflow: hidden;
}

.folio .folio-wizard__head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--f-line);
    background: var(--f-quiet, #faf6ec);
}

.folio .folio-wizard__intro { margin: 4px 0 0; max-width: 68ch; color: var(--f-muted); font-size: 12.5px; }

/* steps — horizontal by default */
.folio .folio-wizard__steps {
    display: flex;
    align-items: flex-start;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.folio .folio-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    text-align: center;
}

/* the connector sits behind the dot and stops at it */
.folio .folio-step::before {
    position: absolute;
    top: 11px;
    right: 50%;
    left: -50%;
    border-top: 1px dashed rgba(78, 66, 43, 0.34);
    content: "";
}
.folio .folio-step:first-child::before { display: none; }

.folio .folio-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-content: center;
    width: 23px;
    height: 23px;
    border: 1.5px solid var(--f-line-strong);
    border-radius: 50%;
    background: var(--f-paper);
    color: var(--f-dim);
    font: 500 10px/1 var(--f-font-mono);
}

.folio .folio-step__label {
    color: var(--f-dim);
    font: 500 10px/1.35 var(--f-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.folio .folio-step.is-done .folio-step__dot {
    border-color: var(--f-accent);
    background: var(--f-accent);
    color: #fff;
}
.folio .folio-step.is-done .folio-step__label { color: var(--f-accent); }

.folio .folio-step.is-current .folio-step__dot {
    border-color: var(--f-ink);
    color: var(--f-ink);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
}
.folio .folio-step.is-current .folio-step__label { color: var(--f-ink); }
.folio .folio-step.is-blocked { opacity: 0.56; }
.folio .folio-step:is(.is-error, .is-stale) .folio-step__dot { border-color: var(--f-red); color: var(--f-red); }
.folio .folio-step:is(.is-error, .is-stale) .folio-step__label { color: var(--f-red); }

/* vertical rail variant, for long forms where steps need room */
.folio .folio-wizard--rail .folio-wizard__steps { flex-direction: column; align-items: stretch; }
.folio .folio-wizard--rail .folio-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    text-align: left;
}
.folio .folio-wizard--rail .folio-step::before {
    top: -9px; bottom: 50%; left: 11px; right: auto;
    border-top: 0;
    border-left: 1px dashed rgba(78, 66, 43, 0.34);
}

.folio .folio-wizard__body { padding: 20px 22px; }

.folio .folio-wizard__section + .folio-wizard__section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--f-hair, rgba(78, 66, 43, 0.10));
}

.folio .folio-wizard__section > h4 {
    margin: 0 0 13px;
    font: 500 13px/1.3 var(--f-font-ui);
}

.folio .folio-wizard__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--f-line);
    background: var(--f-quiet, #faf6ec);
}
.folio .folio-wizard__foot .folio-editor__actions { margin-left: auto; }

.folio .folio-wizard__note {
    color: var(--f-dim);
    font: 400 11px/1.4 var(--f-font-ui);
    max-width: 42ch;
}

/* ==========================================================================
   D · MODAL
   ========================================================================== */

.folio .folio-scrim {
    position: fixed;
    pointer-events: auto;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 24px;
    /* warm scrim: a neutral grey one reads as a different product */
    background: rgba(48, 40, 28, 0.34);
    animation: folio-fade 140ms ease;
}

@keyframes folio-fade { from { opacity: 0; } to { opacity: 1; } }

.folio .folio-modal {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(86vh, 780px);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow-pop);
    animation: folio-modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.folio .folio-modal--wide { width: min(820px, 100%); }

@keyframes folio-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .folio .folio-scrim, .folio .folio-modal { animation: none; }
}

.folio .folio-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 19px 22px 15px;
    border-bottom: 1px solid var(--f-line);
}
.folio .folio-modal__head > div { flex: 1; min-width: 0; }
.folio .folio-modal__title { margin: 0; font: 400 19px/1.25 var(--f-font-display); }

.folio .folio-modal__close {
    flex: none;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--f-line);
    border-radius: 50%;
    background: none;
    color: var(--f-muted);
    cursor: pointer;
}
.folio .folio-modal__close:hover { border-color: var(--f-dim); background: var(--f-inset); color: var(--f-ink); }

.folio .folio-modal__body { overflow-y: auto; padding: 18px 22px; }
.folio .folio-modal__context {
    margin: 0 0 16px;
    color: var(--f-muted);
    font: 400 12.5px/1.5 var(--f-font-ui);
}
.folio .folio-modal-form { margin: 0; }
.folio .folio-boundary-note {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 2px solid var(--f-bronze);
    background: var(--f-t-gold);
    color: var(--f-muted);
    font: 400 11.5px/1.5 var(--f-font-ui);
}

.folio .folio-modal__section + .folio-modal__section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--f-hair, rgba(78, 66, 43, 0.10));
}
.folio .folio-modal__section-heading {
    margin: 0 0 12px;
    color: var(--f-dim);
    font: 500 10px/1 var(--f-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.folio .folio-modal__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--f-line);
    background: var(--f-quiet, #faf6ec);
    border-radius: 0 0 var(--f-radius-lg, 13px) var(--f-radius-lg, 13px);
}
.folio .folio-modal__foot > .spacer { margin-left: auto; }
/* --wide spreads the destructive action away from the confirming one */
.folio .folio-modal__foot--wide { justify-content: space-between; }

/* ==========================================================================
   E · DENSE EDITABLE TABLE
   ========================================================================== */

.folio .folio-etable-wrap {
    overflow-x: auto;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
}

.folio .folio-etable { width: 100%; border-collapse: collapse; }

.folio .folio-etable th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--f-line-strong);
    color: var(--f-dim);
    font: 500 10px/1.3 var(--f-font-mono);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.folio .folio-etable :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }

.folio .folio-etable td {
    padding: 0 12px;
    height: 42px;
    border-bottom: 1px solid var(--f-line);
    font-size: 13px;
    vertical-align: middle;
}
.folio .folio-etable tbody tr:last-child td { border-bottom: 0; }

/* an editable cell announces itself on hover rather than looking like an
   input at rest — a grid of boxes is unreadable at this density */
.folio .folio-etable td.is-editable { padding: 0; }
.folio .folio-etable td.is-editable .cell-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: 400 13px/1 var(--f-font-ui);
    outline: none;
}
.folio .folio-etable td.is-editable .cell-input.num {
    font-family: var(--f-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.folio .folio-etable td.is-editable:hover .cell-input { background: var(--f-inset); }
.folio .folio-etable td.is-editable .cell-input:focus {
    border-color: var(--f-accent);
    border-radius: 6px;
    background: var(--f-paper);
    box-shadow: 0 0 0 3px var(--f-accent-soft);
}

/* row states — each is a designed state, not a colour accident */
.folio .folio-etable tr.is-dirty  td { background: rgba(212, 170, 63, 0.09); }
.folio .folio-etable tr.is-saving td { opacity: 0.6; }
.folio .folio-etable tr.is-error  td { background: var(--f-red-soft); }
.folio .folio-etable tr.is-new    td { background: var(--f-accent-soft); }
/* in-flight rows carry the hatch, matching the pending treatment elsewhere */
.folio .folio-etable tr.is-pending td {
    background-image: repeating-linear-gradient(-45deg,
        transparent 0 6px, rgba(78, 66, 43, 0.045) 6px 7px);
    color: var(--f-muted);
}

.folio .folio-etable__rowflag {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--f-gold-bright);
    vertical-align: 1px;
}

.folio .folio-etable__add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid var(--f-line);
    background: none;
    color: var(--f-accent);
    font: 500 12.5px/1 var(--f-font-ui);
    cursor: pointer;
}
.folio .folio-etable__add:hover { background: var(--f-accent-soft); }
.folio .folio-etable__add::before { font-size: 14px; content: "+"; }

.folio .folio-etable tfoot td {
    height: 46px;
    border-top: 1.5px solid var(--f-line-strong);
    border-bottom: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   F · RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
    .folio .folio-editor__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .folio .folio-editor__rowlabel { padding-top: 0; }
    .folio .folio-wizard__steps { overflow-x: auto; scrollbar-width: none; }
    .folio .folio-wizard__steps::-webkit-scrollbar { display: none; }
    .folio .folio-step { flex: 1 0 104px; }
    .folio .folio-wizard--rail .folio-wizard__steps { flex-direction: row; align-items: flex-start; }
    .folio .folio-wizard--rail .folio-step {
        flex: 0 0 150px;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 0 0 10px;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .folio :is(.folio-editor__head, .folio-editor__body, .folio-editor__foot,
               .folio-wizard__head, .folio-wizard__body, .folio-wizard__foot,
               .folio-modal__head, .folio-modal__body, .folio-modal__foot) {
        padding-inline: 16px;
    }
    .folio .folio-modal__foot--wide { flex-wrap: wrap; }
}

/* ==========================================================================
   PANEL  — the task surface
   --------------------------------------------------------------------------
   A modal says "stop what you are doing". A task is a record worked against
   the queue, so it opens beside the queue instead of on top of it: the row
   just changed stays visible, and moving to the next one is not a new window.
   Reading and editing share this shell; only body and footer differ.
   ========================================================================== */

.folio .folio-panel-layer { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; }
.folio .folio-panel__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(27, 29, 25, .38); cursor: pointer; }
.folio .folio-panel {
    position: relative; display: flex; flex-direction: column;
    width: min(520px, 100vw); max-width: 100%; height: 100%;
    border-left: 1px solid var(--f-line-strong); background: var(--f-paper);
    box-shadow: -18px 0 60px rgba(27, 29, 25, .22);
    animation: folio-panel-in .18s ease-out;
}
.folio .folio-panel--wide { width: min(640px, 100vw); }
@keyframes folio-panel-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.folio .folio-panel:focus-visible { outline: none; }
.folio .folio-panel__header { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--f-line); }
.folio .folio-panel__heading { min-width: 0; }
.folio .folio-panel__header h2 { margin: 3px 0 0; overflow-wrap: anywhere; font: 500 24px/1.2 var(--f-font-display); }
.folio .folio-panel__subtitle { margin: 6px 0 0; color: var(--f-dim); font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-panel__context-link { color: var(--f-forest); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--f-forest) 42%, transparent); text-underline-offset: 3px; }
.folio .folio-panel__context-link:hover { text-decoration-color: currentColor; }
.folio .folio-panel__context-link:focus-visible { border-radius: 2px; outline: 2px solid var(--f-gold); outline-offset: 3px; }
.folio .folio-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 22px; }
.folio .folio-panel__footer { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 22px; border-top: 1px solid var(--f-line); background: var(--f-quiet); }
.folio .folio-panel[data-folio-save-state="dirty"] { box-shadow: -18px 0 60px rgba(27, 29, 25, .22), inset 0 3px var(--f-gold); }
.folio .folio-panel[data-folio-save-state="saved"] { box-shadow: -18px 0 60px rgba(27, 29, 25, .22), inset 0 3px var(--f-accent); }
.folio .folio-panel[data-folio-save-state="saving"] { cursor: progress; }

/* ==========================================================================
   FORM WEIGHT
   --------------------------------------------------------------------------
   The retired editor was a two-column grid of twelve identical fields. Every
   one of them looked equally important, so the operator had to read all of
   them to find the two that were. Sections group by question; the title is a
   headline; a field that does not yet apply is absent, not greyed out.
   ========================================================================== */

.folio .folio-form-headline { padding: 18px 0 6px; }
.folio .folio-headline-input {
    width: 100%; padding: 6px 0; border: 0; border-bottom: 2px solid var(--f-line-strong);
    background: transparent; color: var(--f-ink); font: 500 22px/1.3 var(--f-font-display);
}
.folio .folio-headline-input::placeholder { color: var(--f-faint); }
.folio .folio-headline-input:focus { border-bottom-color: var(--f-accent); outline: none; }

.folio .folio-form-section { padding: 18px 0; border-top: 1px solid var(--f-line); }
.folio .folio-form-section__label h3 { margin: 0; color: var(--f-dim); font: 600 9.5px/1.2 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-form-section__label p { margin: 5px 0 0; color: var(--f-faint); font-size: 12px; }
.folio .folio-form-section__body { display: grid; gap: 14px; margin-top: 13px; }
.folio .folio-form-block:empty { display: none; }
.folio .folio-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.folio .folio-form-note { margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--f-inset); color: var(--f-dim); font-size: 12.5px; }
.folio .folio-form-note--derived { border-left: 3px solid var(--f-gold); border-radius: 0 7px 7px 0; background: var(--f-gold-soft); color: var(--f-bronze-deep); }

/* Rare or long-form input stays out of the way until asked for. */
.folio .folio-form-more { padding: 16px 0 4px; border-top: 1px solid var(--f-line); }
.folio .folio-form-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--f-accent); font: 600 12px/1 var(--f-font-ui); cursor: pointer; list-style: none; }
.folio .folio-form-more > summary::-webkit-details-marker { display: none; }
.folio .folio-form-more > summary::before { content: "+"; width: 15px; font: 600 16px/1 var(--f-font-ui); text-align: center; }
.folio .folio-form-more[open] > summary::before { content: "\2212"; }
.folio .folio-form-more__body { margin-top: 12px; }

/* ==========================================================================
   CHOICE GROUPS  — a small closed set is its own explanation
   ========================================================================== */

.folio .folio-choice-group { display: grid; gap: 7px; }
.folio .folio-choice-group__label { color: var(--f-dim); font: 600 9px/1.2 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-choice-group__options { display: flex; flex-wrap: wrap; gap: 6px; }
.folio .folio-choice { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 7px 13px; border: 1px solid var(--f-line-strong); border-radius: 999px; background: var(--f-paper); color: var(--f-muted); font: 550 12.5px/1 var(--f-font-ui); cursor: pointer; }
.folio .folio-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.folio .folio-choice:hover { border-color: var(--f-faint); }
.folio .folio-choice:has(input:focus-visible) { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.folio .folio-choice.is-selected { border-color: var(--f-accent); background: var(--f-accent-soft); color: var(--f-accent); font-weight: 640; }
.folio .folio-choice-group--segmented .folio-choice-group__options { display: inline-flex; flex-wrap: nowrap; padding: 3px; border: 1px solid var(--f-line); border-radius: 9px; background: var(--f-inset); gap: 2px; }
@media (max-width: 620px) { .folio .folio-choice-group--segmented .folio-choice-group__options { flex-wrap: wrap; max-width: 100%; } }
.folio .folio-choice-group--segmented .folio-choice { flex: 1; justify-content: center; min-height: 32px; border: 0; border-radius: 6px; background: transparent; white-space: nowrap; }
.folio .folio-choice-group--segmented .folio-choice.is-selected { background: var(--f-paper); color: var(--f-ink); box-shadow: 0 1px 5px rgba(51, 41, 29, .1); }
/* Stage choices carry the same colours as the card pills and the board lanes. */
.folio .folio-choice--not_started.is-selected { border-color: var(--f-muted); background: var(--f-inset); color: var(--f-muted); }
.folio .folio-choice--in_progress.is-selected { border-color: var(--f-accent); background: var(--f-accent-soft); color: var(--f-accent); }
.folio .folio-choice--waiting.is-selected { border-color: var(--f-bronze-deep); background: var(--f-gold-soft); color: var(--f-bronze-deep); }
.folio .folio-choice--completed.is-selected { border-color: var(--f-sage); background: var(--f-t-sage); color: var(--f-sage); }
/* Priority choices match the pills the cards show, so the form and the queue
   never disagree about what Urgent looks like. */
.folio .folio-choice--low.is-selected { border-color: var(--f-sage); background: var(--f-t-sage); color: var(--f-sage); }
.folio .folio-choice--normal.is-selected { border-color: var(--f-line-strong); background: var(--f-t-grey); color: var(--f-muted); }
.folio .folio-choice--high.is-selected { border-color: #795400; background: var(--f-t-gold); color: #795400; }
.folio .folio-choice--urgent.is-selected { border-color: var(--f-red); background: var(--f-red-soft); color: var(--f-red); }

/* ==========================================================================
   SEARCH PICKER  — a record reference, not a typed string
   ========================================================================== */

.folio .folio-search-picker { position: relative; display: grid; gap: 6px; }
.folio .folio-search-picker__field { position: relative; }
.folio .folio-search-picker > .folio-search-picker__chosen { display: none; }
.folio .folio-search-picker.is-chosen > .folio-search-picker__chosen { display: inline-flex; }
.folio .folio-search-picker.is-chosen > .folio-search-picker__field { display: none; }
.folio .folio-search-picker__query { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--f-line-strong); border-radius: 7px; background: var(--f-paper); color: var(--f-ink); font: 450 14px/1.3 var(--f-font-ui); }
.folio .folio-search-picker__query:focus { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-soft); outline: none; }
.folio .folio-search-picker__results { position: absolute; z-index: 5; top: 100%; right: 0; left: 0; max-height: 220px; margin: 4px 0 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--f-line-strong); border-radius: 9px; background: var(--f-paper); box-shadow: var(--f-shadow-pop); }
.folio .folio-search-picker__results button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--f-ink); font: 500 13.5px/1.3 var(--f-font-ui); text-align: left; cursor: pointer; }
.folio .folio-search-picker__results button:hover { background: var(--f-accent-soft); color: var(--f-accent); }
.folio .folio-search-picker__empty { padding: 10px; color: var(--f-dim); font-size: 12.5px; }
.folio .folio-search-picker__chosen { align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 8px 8px 13px; border: 1px solid var(--f-accent); border-radius: 7px; background: var(--f-accent-soft); color: var(--f-accent); font: 600 13.5px/1.3 var(--f-font-ui); }
.folio .folio-search-picker__clear { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: rgba(35, 111, 93, .12); color: var(--f-accent); font-size: 15px; line-height: 1; cursor: pointer; }
.folio .folio-search-picker__clear:hover { background: rgba(35, 111, 93, .22); }

.folio .folio-notice--warning { border-left: 3px solid var(--f-gold); background: var(--f-gold-soft); color: var(--f-bronze-deep); }
.folio .folio-notice--warning p { margin: 0; font-size: 12.5px; }
.folio .folio-notice--warning ul { margin: 7px 0; padding-left: 18px; font-size: 12.5px; }

/* ==========================================================================
   ACTIVITY  — the append-only trail the events table always recorded
   ========================================================================== */

.folio .folio-task-activity { padding-top: 16px; border-top: 1px solid var(--f-line); }
.folio .folio-task-activity h3 { margin: 0 0 10px; color: var(--f-dim); font: 600 9.5px/1.2 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-task-activity__state { margin: 0; color: var(--f-dim); font-size: 12.5px; }
.folio .folio-task-activity__state--error { color: var(--f-red); }
.folio .folio-task-activity__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.folio .folio-task-activity__item { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 11px; }
.folio .folio-task-activity__mark { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--f-line-strong); }
.folio .folio-task-activity__mark--created { background: var(--f-accent); }
.folio .folio-task-activity__mark--completed { background: var(--f-sage); }
.folio .folio-task-activity__mark--status_changed { background: var(--f-gold); }
.folio .folio-task-activity__mark--deleted { background: var(--f-red); }
.folio .folio-task-activity__item p { margin: 0; color: var(--f-ink); font-size: 13px; }
.folio .folio-task-activity__item > div > span { color: var(--f-dim); font-size: 11.5px; }
.folio .folio-task-activity__move { color: var(--f-dim); font: 550 11px/1 var(--f-font-mono); text-transform: uppercase; }
.folio .folio-task-detail__owner { display: flex; }

@media (max-width: 680px) {
    .folio .folio-panel,
    .folio .folio-panel--wide { width: 100%; border-left: 0; }
    .folio .folio-form-pair { grid-template-columns: 1fr; }
    .folio .folio-panel__footer { flex-wrap: wrap; }
    .folio .folio-panel__footer .folio-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .folio .folio-panel { animation: none; }
}
/* D17 / BG1: amount and cadence stay inside one control. */
.folio .folio-compound { display: grid; grid-template-columns: minmax(0, 1fr) 112px; min-height: 40px; border: 1px solid var(--f-line-strong); border-radius: var(--f-radius-sm); background: var(--f-paper); overflow: hidden; }
.folio .folio-compound:focus-within { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.folio .folio-compound > label { display: flex; align-items: center; gap: 4px; padding: 0 12px; margin: 0; color: var(--f-dim); font: 500 13px/1 var(--f-font-ui); min-width: 0; }
.folio .folio-compound input { width: 100%; min-width: 0; padding: 8px 0; border: 0; outline: 0; box-shadow: none; background: transparent; font: 500 14px/1.4 var(--f-font-ui); font-variant-numeric: tabular-nums; text-align: right; color: var(--f-ink); }
.folio .folio-compound input::placeholder { color: var(--f-dim); font-weight: 400; font-style: italic; }
.folio .folio-compound > select { width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--f-line); border-radius: 0; background: var(--f-quiet); padding: 0 6px; font: 500 12px/1.4 var(--f-font-ui); color: var(--f-muted); outline: 0; }
.folio .folio-compound :disabled { opacity: .7; cursor: default; }
.folio .folio-savebar { position: sticky; bottom: 12px; z-index: 11; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--f-line-strong); border-radius: var(--f-radius-lg); background: var(--f-paper); box-shadow: var(--f-shadow); }
.folio .folio-savebar[data-state="dirty"] { border-color: var(--f-gold); }
.folio .folio-savebar__state { flex: 1 1 200px; font: 400 13px/1.5 var(--f-font-ui); color: var(--f-muted); overflow-wrap: anywhere; }
.folio .folio-savebar[data-state="dirty"] .folio-savebar__state { color: var(--f-bronze); }
.folio .folio-savebar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 520px) { .folio .folio-savebar__actions { width: 100%; margin-left: 0; } }

/* RE2 (approved Oct 6) · choice tiles: visible paths instead of a dropdown. */
.folio .folio-choice-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.folio .folio-choice-tile { display: grid; align-content: start; gap: 6px; min-height: 140px; padding: 18px; border: 1px solid var(--f-line-strong); border-radius: 12px; background: var(--f-paper); color: var(--f-ink); text-align: left; font: inherit; cursor: pointer; }
.folio .folio-choice-tile:hover:not(:disabled), .folio .folio-choice-tile:focus-visible { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-soft); outline: none; }
.folio .folio-choice-tile__eyebrow { color: var(--f-bronze); font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-choice-tile b { font: 400 21px/1.2 var(--f-font-display); }
.folio .folio-choice-tile small { color: var(--f-dim); font-size: 12.5px; line-height: 1.45; }
.folio .folio-choice-tile:disabled { background: var(--f-inset); color: var(--f-dim); cursor: not-allowed; }

/* RE2 · option rows: choose one real record, with its evidence and a tag. */
.folio .folio-option-rows { display: grid; gap: 8px; }
.folio .folio-option-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-paper); cursor: pointer; }
.folio .folio-option-row.is-selected { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-soft); }
.folio .folio-option-row.is-disabled { background: var(--f-inset); cursor: not-allowed; }
.folio .folio-option-row.is-disabled .folio-option-row__text { opacity: .65; }
.folio .folio-option-row input { accent-color: var(--f-accent); }
.folio .folio-option-row__text { display: grid; gap: 2px; min-width: 0; }
.folio .folio-option-row__text b { font-size: 14px; font-weight: 600; }
.folio .folio-option-row__text small { color: var(--f-dim); font-size: 12px; }
.folio .folio-option-row__tag { color: var(--f-dim); font-size: 11.5px; text-align: right; }
.folio .folio-option-row__tag.is-suggested { color: var(--f-accent); font-weight: 600; }
@media (max-width: 720px) {
    .folio .folio-choice-tile { min-height: 0; }
    .folio .folio-option-row { grid-template-columns: auto minmax(0, 1fr); }
    .folio .folio-option-row__tag { grid-column: 2; text-align: left; }
}

.folio .folio-assessment { color: var(--f-ink); padding: 24px; }
.folio .folio-assessment * { box-sizing: border-box; min-width: 0; letter-spacing: 0; }
.folio .folio-assessment h3 { margin: 0 0 12px; font-size: 22px; }
.folio .folio-assessment h4 { margin: 0 0 12px; font-size: 16px; }
.folio .folio-assessment p { line-height: 1.5; }
.folio .folio-assessment-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--f-line, #ddd5c3); padding-bottom: 16px; }
.folio .folio-assessment-head p { margin: 4px 0; }
.folio .folio-assessment-meta { font-size: 13px; }
.folio .folio-assessment-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 260px; gap: 24px; padding-top: 24px; }
.folio .folio-assessment-rail { list-style: none; padding: 0; margin: 0; }
.folio .folio-assessment-rail li { padding: 12px 8px; border-bottom: 1px solid var(--f-line, #ddd5c3); }
.folio .folio-assessment-rail li[aria-current] { border-left: 3px solid var(--f-accent); padding-left: 12px; }
.folio .folio-assessment-rail small { display: block; margin-top: 4px; font-size: 12px; }
.folio .folio-assessment a { color: var(--f-accent); text-underline-offset: 3px; }
.folio .folio-assessment a:focus-visible, .folio .folio-assessment input:focus-visible, .folio .folio-assessment summary:focus-visible, .folio .folio-assessment select:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.folio .folio-assessment-fields { display: grid; gap: 16px; padding: 16px 0; }
.folio .folio-assessment label { display: grid; gap: 6px; font-size: 13px; }
.folio .folio-assessment input, .folio .folio-assessment select { background: var(--f-paper); color: var(--f-ink); border: 1px solid var(--f-line, #bbb4a5); border-radius: 4px; padding: 10px; width: 100%; font: inherit; }
.folio .folio-assessment-intro { border-bottom: 1px solid var(--f-line, #ddd5c3); padding-bottom: 12px; }
.folio .folio-assessment-guide { border-left: 1px solid var(--f-line, #ddd5c3); padding-left: 20px; }
.folio .folio-assessment-guide ul { margin: 0 0 20px; padding: 0; list-style: none; }
.folio .folio-assessment-guide li { padding: 10px 0; border-bottom: 1px solid var(--f-line, #ddd5c3); line-height: 1.4; font-size: 13px; }
.folio .folio-assessment-guide small { display: block; margin-top: 4px; }
.folio .folio-assessment-guide a { display: block; margin-top: 4px; }
.folio .folio-assessment-payment { border-top: 1px solid var(--f-line, #ddd5c3); padding-top: 20px; margin-top: 24px; }
.folio .folio-assessment-payment dl { display: flex; gap: 28px; flex-wrap: wrap; }
.folio .folio-assessment-payment dt { font-size: 12px; }
.folio .folio-assessment-payment dd { margin: 4px 0; font-size: 22px; }
.folio .folio-assessment-payment summary, .folio .folio-assessment-guide summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.folio .folio-assessment .folio-assessment-mobile { display: none; }
@media (max-width: 1000px) {
  .folio .folio-assessment-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .folio .folio-assessment-guide { grid-column: 2; }
}
@media (max-width: 600px) {
  .folio .folio-assessment { padding: 16px; }
  .folio .folio-assessment-layout { display: block; }
  .folio .folio-assessment-rail { display: none; }
  .folio .folio-assessment .folio-assessment-mobile { display: grid; margin: 16px 0; }
  .folio .folio-assessment-guide { border-left: 0; border-top: 1px solid var(--f-line, #ddd5c3); padding: 20px 0 0; margin-top: 20px; }
}
.folio .folio-assessment-rail button { display: block; width: 100%; text-align: left; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.folio .folio-assessment-rail button:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.folio .folio-assessment { overflow-wrap: anywhere; }
.folio .folio-assessment textarea { width: 100%; resize: vertical; min-height: 120px; font: inherit; padding: 10px; border: 1px solid var(--f-line); border-radius: 4px; background: var(--f-paper); color: var(--f-ink); }
.folio .folio-assessment input[type="checkbox"] { width: auto; }
.folio .folio-assessment fieldset { border: 0; min-width: 0; margin: 0; }
.folio .folio-assessment button.folio-assessment-guide-open { display: none; }
.folio .folio-assessment-sheet { color: var(--f-ink); background: var(--f-paper); border: 1px solid var(--f-line); padding: 20px; width: min(100%, 480px); max-height: 85dvh; overflow-y: auto; }
.folio .folio-assessment-sheet::backdrop { background: rgb(0 0 0 / 35%); }
@media (max-width: 600px) {
  .folio .folio-assessment button.folio-assessment-guide-open { display: block; margin-top: 20px; }
  .folio .folio-assessment-layout > .folio-assessment-guide { display: none; }
  .folio .folio-assessment-sheet .folio-assessment-guide { display: block; }
}