/*
 * The upload format check strip in Step 1.
 *
 * Colours come from the tokens in main.css so this surface follows the theme
 * rather than restating it. dark.css redefines the same tokens, so nothing here
 * needs a dark-mode branch -- and nothing here may use an inline style, which
 * dark.css cannot reach.
 */

.pa-format-strip-host { display: block; }

.pa-format-strip-host {
    display: block;
}

/* Inside the omic card. The card is resized to fit this by syncCardHeight();
   see the comment in format-panel.js for why that has to go through
   setHeight() rather than by letting the DOM grow. */
.pa-format-strip {
    margin: 0 10px 10px 10px;
    /* 10px of side padding plus the 10px margin puts the icon on the 20px
       rail the card's own title text keeps (.omicboxTitle padding-left). */
    padding: 12px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--pa-font-sans);
    font-size: 12px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* A flex row's max-content width is the sum of its items on ONE line, and
       ExtJS's outerCt is a display:table with an auto-width cell, so without
       this the strip widens the whole column. Must be in the stylesheet: Ext
       has written an inline width before JS could change anything. */
    contain: inline-size;
    color: var(--pa-ink-control, #3F3F46);
    background: var(--pa-surface-quiet, #F3F2ED);
}

.pa-format-busy {
    color: var(--pa-ink-muted, #595959);
}

.pa-format-ok {
    background: var(--pa-surface-subtle, #F9F8F4);
    border-color: var(--pa-accent-green, #247B21);
    color: var(--pa-ink-control, #3F3F46);
}

.pa-format-warn {
    background: var(--pa-surface-quiet, #F3F2ED);
    border-color: var(--pa-accent-orange, #AD5022);
}

.pa-format-err {
    background: var(--pa-surface-quiet, #F3F2ED);
    border-color: var(--pa-accent-orange, #AD5022);
}

.pa-format-icon {
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1.45;
}

.pa-format-ok .pa-format-icon  { color: var(--pa-accent-green, #247B21); }
.pa-format-warn .pa-format-icon,
.pa-format-err .pa-format-icon { color: var(--pa-accent-orange, #AD5022); }

.pa-format-body { flex: 1 1 auto; min-width: 0; }

.pa-format-headline {
    font-weight: 600;
    color: var(--pa-ink, #18181B);
}

.pa-format-detail {
    margin-top: 2px;
    color: var(--pa-ink-muted, #595959);
    max-width: var(--pa-measure-note, 78ch);
}

.pa-format-note { color: var(--pa-ink-muted, #595959); }

.pa-format-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pa-format-button {
    font-family: inherit;
    font-size: 13px;
    /* 32px tall and 16px of side padding. The first version was 12px text in
       4px of padding -- a 24px sliver, under every touch-target guideline and
       fiddly with a mouse too. This is the thing the whole message exists to
       get pressed; it should be comfortable to hit. */
    min-height: 32px;
    padding: 7px 16px;
    border-radius: var(--pa-radius-btn, 8px);
    border: 1px solid var(--pa-ink-label, #52525B);
    background: var(--pa-control-bg, #FFFFFF);
    color: var(--pa-ink-control, #3F3F46);
    cursor: pointer;
}

.pa-format-button:hover { border-color: var(--pa-accent-blue, #19589E); }

.pa-format-button:focus-visible {
    outline: 2px solid var(--pa-focus-ring, #0A84FF);
    outline-offset: 1px;
}

.pa-format-primary {
    border-color: var(--pa-accent-blue, #19589E);
    color: var(--pa-accent-blue, #19589E);
    font-weight: 600;
}


/* All file-format messages collect here, at the end of the Step 1 form body.
   See the comment in format-panel.js for why they cannot live in the omic
   cards: those sit in a vbox that does not reposition siblings when a card
   grows, so an in-card strip overlaps the omic beneath it. */
.pa-format-region {
    display: block;
    margin: 4px 0 0 0;
}

.pa-format-omic {
    font-weight: 700;
}

/* The block banner shown when a submit is stopped. Same shape as a problem
   strip, but it must not be mistaken for one of the per-file messages above
   it, so it carries a heavier left edge. */
.pa-format-block {
    border-left-width: 4px;
    margin-top: 8px;
}

/* ------------------------------------------------------------------------
   The omic card carries the state.

   This is where the signal lives, because the message itself cannot go inside
   the card -- see the comment in format-panel.js. A tinted card is visible from
   anywhere on the form; a notice at the bottom of one is not.

   The colours are the application's OWN bad-data convention, not new ones:
   .invalid-cell in main.css already flags a wrong value as #F7E9ED on #EC9292,
   and the invalid-field rule already uses a red border plus a soft ring. Reusing
   them means a bad file reads the same way here as a bad value does elsewhere.

   Only problems are tinted. Tinting every valid card green would make an
   ordinary correct form loud and leave nothing for a real fault to say.
   ------------------------------------------------------------------------ */
.omicbox.pa-state-warn,
.omicbox.pa-state-err {
    background-color: #F7E9ED;
    border-radius: 6px;
}

.omicbox.pa-state-ok {
    background-color: #F4F9F3;
    border-radius: 6px;
}

/* The card's title bar paints its own white and would otherwise sit as a clean
   white strip on top of a tinted body -- the card would look half-flagged. */
.omicbox.pa-state-ok .omicboxTitle {
    background-color: #F4F9F3 !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.omicbox.pa-state-warn .omicboxTitle,
.omicbox.pa-state-err .omicboxTitle {
    background-color: #F7E9ED !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* The field itself, so the eye lands on the right row inside the card. Same
   treatment the account forms give an invalid input. */
input[type="text"].pa-field-warn,
input[type="text"].pa-field-err {
    border-color: #D22 !important;
    box-shadow: 0 0 0 3px rgba(221, 34, 34, 0.14);
}

/* Only the submit-time banner lives here now; per-file messages sit inside
   their own omic card. */
.pa-format-region {
    display: block;
    margin: 10px 0 0 0;
}

/* The action button is the app's own success green -- the same fill as Run
   PaintOmics -- because it is the thing we want pressed. An outlined button
   next to a tinted warning reads as optional; a filled green one reads as the
   way forward. */
.pa-format-button.pa-format-primary {
    color: #fff;
    background-color: #3A843A;
    border-color: #306C30;
    font-weight: 600;
}

.pa-format-button.pa-format-primary:hover {
    color: #fff;
    background-color: #337533;
    border-color: #2A602A;
}

/* The AI mark inside an action button. getAIMark() sizes itself to 1em, so it
   tracks the button's font rather than needing a size of its own; this only
   handles the gap and keeps it optically centred against the label. */
.pa-format-button .po-ai-mark {
    margin-right: 2px;
    vertical-align: -0.15em;
}

/* ------------------------------------------------------------------------
   The standing offer.

   Before a file is picked the strip carries the AI's one sentence -- any file
   will do -- with no tint and no border, because a promise is not a verdict.
   It turns into the checking / ok / convert states the moment a file lands.
   ------------------------------------------------------------------------ */
.pa-format-idle {
    background: transparent;
    border-color: transparent;
    padding: 4px 10px 8px;
    color: var(--pa-ink-muted, #595959);
    font-size: 12px;
    align-items: center;
}
.pa-format-idle .pa-format-icon-ai {
    display: inline-flex;
    color: var(--pa-ai-blue, #4A90D9);
    font-size: 15px;
    line-height: 1;
    /* The mark's hexagon is drawn ~15% inside its viewBox, so at 15px its
       ink starts 2px right of the box; the card title's ink does not. */
    margin-left: -2px;
}
.pa-format-idle b {
    font-weight: 600;
    color: var(--pa-accent-blue, #19589E);
}

/* After the AI's table is accepted, the ok strip names where it came from
   and offers the conversion again. */
.pa-format-provenance {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    color: var(--pa-ink-muted, #595959);
}
.pa-format-provenance-text { flex: 1 1 auto; min-width: 0; }
.pa-format-provenance .pa-format-linkbtn { margin-left: 4px; }
.pa-format-provenance-mark {
    display: inline-flex;
    color: var(--pa-ai-blue, #4A90D9);
    font-size: 14px;
    line-height: 1;
}
.pa-format-provenance b { font-weight: 600; color: var(--pa-ink-control, #3F3F46); }
.pa-format-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--pa-link, #0060BA);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pa-format-linkbtn:hover { color: var(--pa-link-hover, #24785D); }
.pa-format-linkbtn:focus-visible { outline: 2px solid var(--pa-focus-ring, #0A84FF); outline-offset: 2px; border-radius: 2px; }

/* ------------------------------------------------------------------------
   The Section 3 panel: "Bring your files as they are".

   The same .po-ai-section-body panel as Section 2 (it supplies the surface,
   the border, the padding and the card inset), and the same width -- but not
   the same shape. Section 2's panel holds a control and a note about that
   control, so it is two columns; this one holds a sentence and the list of
   things the sentence is true of, so it is two rows.

   It was two columns as well, and that was what made it 194px tall for three
   lines of copy: an 839px column of prose beside a 320px column that needed
   five lines to print nine format names, with the bottom half of the prose
   column empty. Across the full width the sentence sets in two lines and the
   names in one.
   ------------------------------------------------------------------------ */
/* `div.contentbox p` is (0,1,2) and adds the card inset to every paragraph
   inside a card; two classes outrank it. The type itself is .ai-intro-copy,
   the Section 2 sentence's own class, so the two sentences match. */
.po-upload-ai p.ai-intro-copy {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.55;
    /* Not the note measure: this line runs the width of the panel, and at
       1191px it is two lines. Capping it at 62ch would put it back to three
       and leave the right half of the panel empty again -- which is the thing
       being fixed. */
    max-width: none;
}
/* The lead-in and the agent's name: the blue bold the Section 2 sentence gives
   its subject. The lead used to be a paragraph of its own above this one; run
   into the sentence it costs no row and still opens the panel. */
.po-upload-ai p.ai-intro-copy b { font-weight: 700; color: var(--pa-accent-blue, #19589E); }

/* The specification line: two labelled lists and the example dataset.

   A flex row rather than the dl's own block flow, so "Software", its names,
   "File types" and its names sit on one baseline and wrap together only when
   the panel is too narrow to hold them. The lists themselves are
   .po-spec-list in main.css, shared with the interpretation panel's facts. */
.po-upload-ai-specs {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
}
.po-works-with {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 26px;
    row-gap: 4px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* A label and the names it labels, kept together across a wrap. */
.po-works-with-group {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}
/* Half a step under the body copy above it: this is the caption to the panel,
   not a second paragraph of it, and at 12px both groups and the action fit on
   one line of a 1191px panel with room to spare. */
.po-works-with .po-spec-list {
    font-size: 12px;
}
/* `div.contentbox` styles p and li but not dt/dd, so one class is enough. */
/* The group label, told apart from the names after it. Both were 12.5px in the
   same muted grey, so "Software" read as the first item of its own list rather
   than as its label. */
.po-works-with dt {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pa-ink-title, #27272A);
    white-space: nowrap;
}
/* The gap between the two groups is stated on the dl (column-gap), and it is
   wider than the gap between a label and the names it labels -- otherwise
   "File types" reads as the last item of the software list. */
.po-works-with dt + dd {
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* Pushed to the end of the line it belongs to rather than floated into the
   section heading. `flex: none` so it never gives up width to the lists. */
.po-upload-ai a.po-download-example {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 1180px) {
    /* Below this the two lists no longer share a line, so the action stops
       trying to share one with them. */
    .po-upload-ai-specs { flex-direction: column; align-items: flex-start; gap: 12px; }
    .po-upload-ai a.po-download-example { margin-left: 0; }
}

/* ------------------------------------------------------------------------
   Omics that disagree on their number of conditions.

   Each file is fine; the job is not. PaintOmics paints every omic on one set
   of conditions, so a one-column fold change beside a fourteen-column sample
   table is refused by the server however correct each file is. The note sits
   under the green verdict of every card involved, in the warning colour, and
   carries the one action that can fix a disagreement BETWEEN files: handing
   them to the agent together.
   ------------------------------------------------------------------------ */
.pa-format-width {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--pa-border, #D4D4D8);
}
.pa-format-width .pa-format-detail {
    color: var(--pa-accent-orange, #AD5022);
}
.pa-format-width .pa-format-actions { margin-top: 8px; }