/*
   Canon: docs/design-references/all-files-prototype-review/project/
          handoff/in-progress/in-progress.css, lifted verbatim below.
   Lift rules: convert the 720px and 1100px container queries one-for-one
   to media queries at 952px and 1332px (plus Threshold's 232px sidenav).
   Owner-approved additional conversion: 100cqw becomes the viewport
   minus --th-chrome-sidenav-w, because Threshold has no query container.
   No other changes; shared All Files rules remain unchanged.
*/
/* ==================================================================
   in-progress.css - Applications > In progress: the roster of started,
   unsubmitted applications and the read-only draft page.

   Loads AFTER threshold-tokens.css, threshold-chrome.css (.cc-pill,
   .cc-btn), th-grid.css and all-files.css. Everything that is the same
   thing as in All Files is consumed from there unchanged: the page and
   browse roots (.af-page, .af-browse), the filter chips (.af-chip*),
   the freshness strip pieces (.af-note, .af-refresh, .af-spacer), the
   shell head (.af-file*, .af-file-summary) and the Stage 2A answer
   reader (.af-app-*, .af-section*, .af-field*, .af-group*,
   .af-instance*, .af-member*). New classes are under one prefix, ip-.

   TOKENS: no `--token:` declaration appears in this file (ADR-0035).
   Every colour resolves through --th-*. The only literals are sizes.
   No marigold (copper) rule: ADR-0035's inventory is closed. No warn
   or risk tone on a roster row; the only risk-ink rule is the idle
   entry's inline message, inside its panel.

   Dark is declared beside light, at the end of each block.
   Narrow rules are container queries on .af-page / .af-file, like
   all-files.css, converted to @media one-for-one at lift.
   ================================================================== */

/* ------------------------------------------------------------------
   Shared: unknown values, availability words, elapsed time
   ------------------------------------------------------------------ */
/* An unknown value is its words, in a quieter ink than a real value.
   Never a dash: All Files' dash means "does not apply". */
.ip-unknown { color: var(--th-ink-3); }
a.th-grid-link.ip-unknown { color: var(--th-ink-2); }
a.th-grid-link.ip-unknown:hover { color: var(--grid-sel-ink); }

/* Term availability: neutral words on a secondary line (af-closed-meta
   precedent), never a coloured pill. `open` renders nothing. */
.ip-term { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ip-avail { font-size: 11px; color: var(--th-ink-3); white-space: nowrap; }

.ip-when { display: flex; flex-direction: column; gap: 1px; }
.ip-when-date { font-family: var(--th-font-mono); font-size: var(--th-size-13); color: var(--th-ink-2); white-space: nowrap; }
.ip-when-ago { font-size: 11px; color: var(--th-ink-3); white-space: nowrap; }

/* ------------------------------------------------------------------
   Saved progress: count, one-tone bar, percent. The bar is an inline
   SVG whose fill rect carries the percent as its width attribute, so
   no inline style is needed. Its tone never changes with the value.
   No bar for the two unknown forms.
   ------------------------------------------------------------------ */
.ip-progress { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ip-progress-count { font-size: var(--th-size-13); color: var(--th-ink); white-space: nowrap; }
.ip-progress-line { display: flex; align-items: center; gap: 8px; }
.ip-progress-bar { width: 64px; height: 4px; flex: none; display: block; border-radius: var(--th-radius-2); overflow: hidden; }
.ip-progress-track { fill: var(--th-paper-3); }
.ip-progress-fill { fill: var(--th-ink-3); }
.ip-progress-pct { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-3); white-space: nowrap; }
.ip-progress.ip-is-large { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ip-progress.ip-is-large .ip-progress-count { font-size: var(--th-size-15); font-weight: 500; }
.ip-progress.ip-is-large .ip-progress-bar { width: 200px; height: 6px; }
.ip-progress.ip-is-large .ip-progress-pct { font-size: var(--th-size-12); }
[data-theme="dark"] .ip-progress-track { fill: var(--th-line); }
[data-theme="dark"] .ip-progress-fill { fill: var(--th-ink-2); }

/* ------------------------------------------------------------------
   Roster (.af-page.ip-roster > .th-grid-surface.af-browse.ip-browse)
   ------------------------------------------------------------------ */
.ip-roster .af-page-sub { max-width: 720px; text-wrap: pretty; }
.ip-browse .th-grid th.ip-col-name     { width: auto; }
.ip-browse .th-grid th.ip-col-term     { width: 168px; }
.ip-browse .th-grid th.ip-col-version  { width: 128px; }
.ip-browse .th-grid th.ip-col-started  { width: 112px; }
.ip-browse .th-grid th.ip-col-updated  { width: 132px; }
.ip-browse .th-grid th.ip-col-seen     { width: 150px; }
.ip-browse .th-grid th.ip-col-progress { width: 150px; }
.ip-browse .th-grid td { vertical-align: top; }
.ip-browse .th-grid td.ip-cell-plain { font-size: var(--th-size-13); color: var(--th-ink-2); white-space: nowrap; }
.ip-browse .th-grid-lead .sec { overflow-wrap: anywhere; }
.ip-browse .th-grid-lead .pri { white-space: normal; overflow: visible; }

.ip-meta-sort { white-space: nowrap; }
/* Sort in the meta strip: plain text at desktop (the header buttons sort); a chip with a menu of the
   four orders at narrow, where the header is visually hidden. .ip-th-text is the header's label for
   assistive technology at narrow, where the header's sort buttons are not rendered. */
.ip-sort-host, .ip-th-text { display: none; }
.ip-sort-chip, .ip-sort-panel { font-family: var(--th-font-sans); }
.ip-sort-panel { min-width: 230px; }
/* Reset is always present and disabled at rest. */
.ip-browse .af-reset:disabled { color: var(--th-ink-4); background: transparent; cursor: default; }

/* Notice after a draft stops being a draft: one persistent, dismissible
   status line in a neutral tone (af-req-return's shape, not its advant
   tint). Not a toast. */
.ip-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid var(--th-line-2);
    border-radius: 4px;
    background: var(--th-paper-2);
    font-size: var(--th-size-13);
    color: var(--th-ink);
    line-height: 1.45;
}
.ip-notice:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.ip-notice:focus:not(:focus-visible) { outline: none; }
.ip-notice > svg { color: var(--th-ink-3); margin-top: 2px; flex: none; }
.ip-notice-text { flex: 1; min-width: 0; text-wrap: pretty; }
.ip-notice-close {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--th-radius-3);
    background: transparent;
    color: var(--th-ink-3);
    cursor: pointer;
    padding: 0;
}
.ip-notice-close:hover { color: var(--th-ink); background: var(--th-paper); }
.ip-notice-close:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* Re-reading over rows already shown: the rows stay, quietened, under a
   thin moving line at the top of the wrap. No spinner. */
.ip-browse .th-grid-wrap { position: relative; }
.ip-browse .th-grid-wrap.ip-is-reading tbody { opacity: 0.55; }
.ip-reading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    z-index: 3;
    background: var(--th-line);
}
.ip-reading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background: var(--th-ink-3);
    animation: ip-reading 1.2s ease-in-out infinite;
}
@keyframes ip-reading { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ip-reading-bar::after { animation: none; left: 0; width: 100%; opacity: 0.5; } }

/* Skeleton widths (the canon sets them inline; here they are classes). */
.ip-skel-a { width: 62%; }
.ip-skel-b { width: 80%; }
.ip-skel-c { width: 45%; }
.ip-skel-d { width: 70%; }

/* Cursor pager (the canon's range + prev/next reading of .th-grid-pager) with destination labels. */
.ip-range { white-space: nowrap; }
.ip-range-sep { color: var(--th-ink-4); }
.ip-browse .th-grid-pagebtn { white-space: nowrap; }
.ip-browse .th-grid-pagebtn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.ip-browse .th-grid-pagebtn[aria-busy="true"] { color: var(--th-ink-4); }

/* ------------------------------------------------------------------
   Filter panels that load (amendment to .af-chip-panel). The panel
   becomes a container: the menu moves inside it, a status line sits
   under the menu, and Load more is the menu's last item.
   ------------------------------------------------------------------ */
.ip-chip-panel { min-width: 230px; gap: 2px; }
/* No inner scroll: options arrive in short pages behind Load more, so the panel grows. */
.ip-chip-menu { display: flex; flex-direction: column; }
.ip-chip-more { color: var(--th-advant-deep); }
.ip-chip-more .af-chip-tick { color: var(--th-ink-4); }
.ip-chip-status {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px;
    font-size: var(--th-size-13);
    color: var(--th-ink-3);
}
.ip-chip-status .cc-btn { white-space: nowrap; }
.ip-chip-menu + .ip-chip-status { border-top: 1px solid var(--th-line-soft); }

/* The idle panel: a number field with Apply and Clear. No presets. */
.ip-idle-panel { min-width: 260px; padding: 12px; gap: 8px; }
.ip-idle-label { font-size: var(--th-size-12); font-weight: 600; color: var(--th-ink-2); }
.ip-idle-row { display: flex; align-items: center; gap: 8px; }
.ip-idle-input {
    width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink);
    font-family: var(--th-font-mono);
    font-size: var(--th-size-13);
}
.ip-idle-input:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 1px; }
.ip-idle-input[aria-invalid="true"] { border-color: var(--th-risk); }
.ip-idle-unit { font-size: var(--th-size-13); color: var(--th-ink-2); }
.ip-idle-hint { margin: 0; font-size: 11px; color: var(--th-ink-3); }
.ip-idle-error { margin: 0; font-size: var(--th-size-12); color: var(--th-risk-ink); line-height: 1.4; max-width: 236px; }
.ip-idle-actions { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

/* ------------------------------------------------------------------
   Draft page (.af-file.ip-draft). The Applicant File's head and
   summary card, no tabs, then one 820px column of regions.
   ------------------------------------------------------------------ */
.ip-draft .af-file-name { overflow-wrap: anywhere; }
.ip-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ip-fact-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--th-ink-4); white-space: nowrap; }
.ip-fact-value { font-size: var(--th-size-13); color: var(--th-ink); white-space: nowrap; }
.ip-fact-value.ip-unknown { color: var(--th-ink-3); }

.ip-draft-body {
    padding: 16px 24px 28px;
    max-width: 820px;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ip-draft-body > .af-app-body { padding: 0; }
.ip-draft-body > .af-app-body > .af-app-head { margin-bottom: 10px; }

.ip-region {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    background: var(--th-paper-sunk);
}
.ip-region-head { padding: 10px 16px 9px; border-bottom: 1px solid var(--th-line); }
.ip-region-title { margin: 0; font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-15); color: var(--th-ink); }
.ip-region-lede { margin: 3px 0 0; font-size: var(--th-size-12); color: var(--th-ink-3); line-height: 1.45; max-width: 640px; text-wrap: pretty; }
.ip-region-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ip-region-note { margin: 0; font-size: var(--th-size-12); color: var(--th-ink-3); line-height: 1.45; text-wrap: pretty; }
.ip-region-value { margin: 0; font-size: var(--th-size-15); color: var(--th-ink-3); }

/* Recorded activity: a titled region, one standing sentence, plain
   values. No dot, pulse, pill or green tone. */
.ip-activity-facts { margin: 0; padding: 4px 0; display: flex; flex-direction: column; }
.ip-activity-row { display: flex; align-items: baseline; gap: 14px; padding: 6px 16px; }
.ip-activity-row dt { width: 190px; flex: none; font-size: var(--th-size-12); color: var(--th-ink-3); line-height: 1.4; }
.ip-activity-row dd { margin: 0; min-width: 0; font-size: var(--th-size-14); color: var(--th-ink); line-height: 1.45; overflow-wrap: anywhere; }
.ip-activity-row dd .ip-unknown { font-size: var(--th-size-13); }
.ip-activity-sub { display: block; margin-top: 2px; font-size: var(--th-size-12); color: var(--th-ink-3); }
.ip-devices, .ip-failures { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ip-failure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.ip-failure-label { color: var(--th-ink); }
.ip-failure-count { font-family: var(--th-font-mono); font-size: var(--th-size-12); color: var(--th-ink-2); white-space: nowrap; }
/* Word marker at three or more: outlined, neutral ink, no fill. */
.ip-repeated {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--th-ink-2);
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-pill);
    padding: 0 7px;
    line-height: 1.6;
    white-space: nowrap;
}
.ip-activity-state { margin: 0; padding: 14px 16px; font-size: var(--th-size-13); color: var(--th-ink-2); line-height: 1.5; }
.ip-activity-state-head { display: block; font-size: var(--th-size-14); font-weight: 600; color: var(--th-ink); margin-bottom: 2px; }

/* Page-level states under the back link: opening, not visible, could
   not open, rate limited, session ended. */
.ip-opening { margin: 0; padding: 18px 24px 0; font-size: var(--th-size-13); color: var(--th-ink-3); }
.ip-open-state { padding: 14px 24px 32px; max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ip-open-state-head {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: var(--th-size-20);
    color: var(--th-ink);
    line-height: 1.3;
}
.ip-open-state-head:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; border-radius: var(--th-radius-2); }
.ip-open-state-head:focus:not(:focus-visible) { outline: none; }
.ip-open-state-head > svg { color: var(--th-ink-3); flex: none; margin-top: 5px; }
.ip-open-state.ip-is-error .ip-open-state-head > svg { color: var(--th-risk); }
.ip-open-state-body { margin: 0 0 0 25px; font-size: var(--th-size-14); color: var(--th-ink-2); line-height: 1.5; text-wrap: pretty; }
.ip-open-state-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 0 25px; }
.ip-open-state-actions .cc-btn { white-space: nowrap; }

/* ------------------------------------------------------------------
   Saved responses: the Stage 2A reader plus hidden marks and split
   section blocks.
   ------------------------------------------------------------------ */
/* Hidden by form rules: words on the outermost hidden thing, and a
   dashed border on a hidden block. Plainly not .af-req-hidden (the
   applicant cannot see a document), which is unbordered small ink. */
.ip-hidden {
    display: inline-flex;
    align-items: center;
    font-family: var(--th-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--th-ink-2);
    background: var(--th-paper);
    border: 1px dashed var(--th-ink-4);
    border-radius: var(--th-radius-3);
    padding: 0 6px;
    line-height: 1.6;
    white-space: nowrap;
    flex: none;
}
.af-section.ip-is-hidden { border-style: dashed; border-color: var(--th-ink-4); }
.af-field.ip-is-hidden { flex-wrap: wrap; }
.af-field.ip-is-hidden .ip-hidden { align-self: center; }
/* A member hidden inside a visible instance (an instance is never hidden on its own). */
.af-member.ip-is-hidden { gap: 3px; }
.af-member.ip-is-hidden .ip-hidden { align-self: flex-start; }

.ip-hidden-note {
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 9px 12px;
    border: 1px solid var(--th-line);
    border-radius: 4px;
    background: var(--th-paper-2);
    font-size: var(--th-size-13);
    color: var(--th-ink-2);
    line-height: 1.45;
}
.ip-hidden-note-text { flex: 1 1 320px; min-width: 0; text-wrap: pretty; }

/* A section split by a repeating group: the second field block carries
   the same title and a "continued" word; the group names its section. */
.ip-continued { font-family: var(--th-font-sans); font-size: 11px; font-style: normal; font-weight: 400; color: var(--th-ink-3); }

/* ------------------------------------------------------------------
   Mid (720-1100): the summary card's two-row state from all-files.css
   moves .cc-pill to row 2; the draft's facts go with it.
   ------------------------------------------------------------------ */
@media (max-width: 1332px) {
    .ip-draft-summary > .ip-fact { order: 4; }
}

/* ------------------------------------------------------------------
   Narrow (400). The roster compacts each row into a stacked block;
   the header row is kept for assistive technology and hidden
   visually; each cell names itself from data-label.
   ------------------------------------------------------------------ */
@media (max-width: 952px) {
    .ip-browse .th-grid-meta > .af-note { white-space: normal; flex-basis: 100%; order: 5; }
    .ip-browse .th-grid-wrap { overflow-x: visible; }
    .ip-browse .ip-meta-sort { display: none; }
    .ip-browse .ip-sort-host { display: inline-block; }
    .ip-browse .ip-sort-chip { min-height: 32px; }
    .ip-browse .th-grid thead .th-grid-sort { display: none; }
    .ip-browse .th-grid thead .ip-th-text { display: inline; }
    .ip-browse .th-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ip-browse .th-grid, .ip-browse .th-grid tbody { display: block; }
    .ip-browse .th-grid tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 14px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--th-line-soft);
    }
    .ip-browse .th-grid tbody tr:last-child { border-bottom: none; }
    .ip-browse .th-grid tbody td { display: block; padding: 0; border: 0; height: auto; min-width: 0; }
    .ip-browse .th-grid tbody td.ip-cell-lead { grid-column: 1 / -1; }
    .ip-browse .th-grid tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--th-ink-4);
        font-family: var(--th-font-sans);
    }
    .ip-browse .th-grid tbody td.ip-cell-lead::before { display: none; }
    .ip-browse .th-grid tbody td.th-grid-skel-cell { grid-column: 1 / -1; }
    .ip-browse .th-grid-pager { flex-wrap: wrap; gap: 8px; }
    .ip-browse .th-grid-pager .controls { margin-left: auto; }
    .ip-browse .th-grid-pagebtn { min-height: 36px; padding: 0 12px; }
    .ip-browse .af-chip-panel { max-width: calc(100vw - var(--th-chrome-sidenav-w) - 32px); }

    .ip-draft-summary > .ip-fact { order: 0; }
    .ip-draft-body { padding: 16px 16px 28px; }
    .ip-draft-body > .af-app-body { padding: 0; }
    .ip-region-head, .ip-region-body { padding-left: 14px; padding-right: 14px; }
    .ip-activity-row { flex-wrap: wrap; gap: 2px 14px; padding: 6px 14px; }
    .ip-activity-row dt { width: 100%; }
    .ip-activity-state { padding: 12px 14px; }
    .ip-progress.ip-is-large .ip-progress-bar { width: 140px; }
    .ip-opening { padding: 16px 16px 0; }
    .ip-open-state { padding: 12px 16px 28px; }
    .ip-open-state-body, .ip-open-state-actions { margin-left: 0; }
    .ip-open-state-head { font-size: var(--th-size-17); }
    .ip-open-state-head > svg { margin-top: 3px; }
}