/* eqmm.css — Binder content, editor, and rendered output.
 *
 * Additions on top of the shared RWA stylesheet. Everything here uses the
 * tokens defined in style.css so the application matches the rest of the suite.
 */

/* ── Rendered binder content ─────────────────────────── */
.rendered-content{font-size:14px;line-height:1.55;color:var(--text)}
.rendered-content h1{font-size:20px;margin:0 0 .5rem}
.rendered-content h2{font-size:16px;margin:1.25rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--border)}
.rendered-content h3{font-size:14px;margin:1rem 0 .35rem}
.rendered-content p{margin:0 0 .65rem}
.rendered-content ul,.rendered-content ol{margin:0 0 .65rem 1.25rem}
.rendered-content table{width:100%;border-collapse:collapse;margin:.75rem 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.rendered-content th,.rendered-content td{border:1px solid var(--border);padding:.35rem .5rem;vertical-align:top;font-size:13px}
.rendered-content th{background:#f9fafb;font-weight:600;color:var(--text-muted)}
.rendered-content code{background:var(--border-light);padding:1px 4px;border-radius:3px;font-size:12px}

/* Wide content scrolls inside its own container rather than pushing the page. */
.table-scroll{overflow-x:auto}

.rendered-content figure{margin:1rem 0}
.rendered-content figure img{max-width:100%}
.rendered-content figcaption{font-size:12px;color:var(--text-muted);margin-top:.25rem}

/* ── Citations ───────────────────────────────────────── */
.citation{white-space:nowrap;text-decoration:none}
/* An unresolved citation must be impossible to miss while reading. */
.citation-unresolved{color:var(--danger);background:var(--error-bg);padding:0 .2rem;border-radius:3px;font-weight:600}

.math-error{color:var(--danger);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── Editor ──────────────────────────────────────────── */
.block-editor{padding:.75rem 0;border-bottom:1px dashed var(--border-light)}
.block-editor:last-of-type{border-bottom:none}
.block-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem;gap:.5rem}

.block-source{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.45;resize:vertical;padding:.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.block-source:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}

.preview-pane{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem;min-height:8rem;overflow-x:auto}
.preview-warning{color:var(--danger);margin-top:.25rem}

.block-empty{color:var(--text-muted);font-style:italic}

.text-danger{color:var(--danger)}

/* ── History ─────────────────────────────────────────── */
.inline-history{padding:.4rem 0;border-bottom:1px solid var(--border-light)}
.inline-history:last-child{border-bottom:none}

/* ── Review markup ───────────────────────────────────── */
.review-thread{padding:.75rem 0;border-bottom:1px solid var(--border-light)}
.review-thread:last-child{border-bottom:none}
.review-thread-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}

/* The passage as it was when the remark was made, not as it reads now. */
.review-quote{border-left:3px solid var(--primary);background:var(--primary-light);padding:.35rem .6rem;margin:.35rem 0;font-size:13px;white-space:pre-wrap}

.review-comment{padding:.4rem 0 .4rem .75rem;border-left:2px solid var(--border)}
.review-comment-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.2rem}
.review-comment-body{font-size:13px;white-space:pre-wrap}

.review-suggestion{margin:.4rem 0 0;padding:.4rem .6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.review-suggestion pre{margin:.2rem 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-word}

.review-thread-actions{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}

/* An outdated anchor is still a valid record; it just no longer points at the
   current text, so it is marked rather than hidden. */
.badge-locked{background:#fef3c7;color:#92400e;border-color:#fcd34d}

/* Available to a screen reader, not to the eye. Used where a control's purpose
   is clear visually from context but a label is still required to be reachable. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The markdown toolbar. Buttons insert syntax into the source; they are a
   convenience, not the thing that keeps HTML out, which is the renderer. */
.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .35rem;
}
.markdown-toolbar .btn {
    min-width: 2.1rem;
    padding: .15rem .4rem;
    font-size: .8rem;
    line-height: 1.4;
}

/* Section numbers are applied at render, from the tab number and the heading
   levels, so they are set apart from the wording of the heading itself. */
.heading-number {
    font-variant-numeric: tabular-nums;
    margin-right: .45em;
    color: #495057;
}

/* Accident profile charts. Plotly sizes itself to the container, so the height
   is set from the width in profile-chart.js; this reserves the space so the
   panel does not jump as each chart paints. */
.profile-chart {
    width: 100%;
    min-height: 260px;
    margin-bottom: .75rem;
}
[data-environment-plots] {
    margin-bottom: .5rem;
}

/* The applied parts table is a tree flattened into rows, so the depth has to be
   carried by the indent and the branch mark rather than by the reader. */
.part-tree {
    display: inline-block;
}
.part-tree-branch {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A tag's maintenance is grouped under the part each requirement is against,
   one tbody per part opened by this row. A heading row inside the one table
   rather than a table per part, so the columns still line up down the page. */
.data-table tr.part-group th {
    background: var(--border-light);
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    cursor: default;
}
.data-table tr.part-group th .badge {
    margin-left: .35rem;
}

/* A section whose title carries the control that edits it (#93). The catalog
   pickers moved behind buttons, and the button belongs beside the heading it
   acts on rather than under the table it fills. */
.config-section-title.with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.btn-group-inline {
    display: inline-flex;
    gap: .35rem;
    flex-wrap: wrap;
}

/* A photograph attached to a part or a tag is shown where it sits rather than
   downloaded (#92). Bounded so a 4000 pixel walkdown photo does not take the
   row with it; the full size is one click away and served inline. */
.attachment-thumb {
    /* A fixed box with object-fit rather than a max-width, so the row reserves
       the same space for every thumbnail before any of them arrive and nothing
       moves as they do. `contain` letterboxes rather than crops or squashes: a
       walkdown photograph is as often portrait as landscape, and the width and
       height attributes on the img would otherwise set the layout aspect ratio
       and distort it (#105). */
    width: 8rem;
    height: 5rem;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: block;
}

/* ── What a status is worth, said once ───────────────────────────────────────
 *
 * Operability is the column an EQ owner reads first, and it had no colour
 * weight at all: computed, "not determined", "open" and "inoperable" all
 * rendered the same blue, and "operable, compensatory" got a bare .badge with
 * no background, so it read as plain text among coloured pills. An inoperable
 * EQ component is the shortest fuse in the programme and it looked exactly like
 * a routine open record (#48).
 *
 * Named for what the status means rather than for its colour, so a fourth
 * register picks the weight rather than picking a shade, and so changing the
 * palette does not require changing every template.
 *
 * The words still carry the meaning — this is not a WCAG failure and colour is
 * not the only channel. It is about what the screen emphasises.
 *
 * Here rather than in style.css because style.css is shared with rwaRCMG and
 * these are this application's vocabularies.
 */

/* Something is not qualified now, or a clock is running. */
.badge-grave { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Nobody has answered yet, or it holds only because of a compensatory measure. */
.badge-caution { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* Answered, and the answer is that there is nothing outstanding. */
.badge-settled { background: #dcfce7; color: #166534; border-color: #86efac; }

/* In hand and not alarming: the ordinary state of an open record. */
.badge-routine { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }

/* ── A refusal stays until it is dismissed ───────────────────────────────────
 *
 * The five second fade still applies to everything else; an error keeps its
 * message and gains this control instead of a timer (#44, WCAG 2.2.1).
 */
.flash { position: relative; }

.flash-dismiss {
    position: absolute;
    top: .25rem;
    right: .5rem;
    background: none;
    border: 0;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .65;
    padding: .15rem .35rem;
}

.flash-dismiss:hover,
.flash-dismiss:focus { opacity: 1; }

/* ── Section headings are headings ───────────────────────────────────────────
 *
 * `.config-section-title` was a div throughout, so a page exposed one h1 and
 * six heading-shaped divs, and on a 9,898 px page there was no way to reach
 * Operability, Dispositions or State (#45, WCAG 1.3.1). It is an h2 now, in all
 * 128 places, because the pattern was copied rather than introduced.
 *
 * The class already sets font-size, weight and the rule beneath it; this only
 * takes off the margin a browser gives an h2 by default, so nothing moves.
 */
h2.config-section-title { margin-top: 0; }

/* Readable by a screen reader, invisible on screen. The actions column needs a
   name — an empty th was made sortable and given a sort arrow — and a filtered
   table needs to say it found nothing without adding a second visible line
   beside the row that already says it (#45). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── A text input without type="text" is still a text input ──────────────────
 *
 * `style.css` styles `input[type="text"|"password"|"number"|"email"|"url"]`,
 * and 66 inputs across these templates omit the attribute — including the
 * operability basis and the required disposition basis, which are the two
 * longest free-text fields in the application. The selector missed them, so
 * they rendered at 175 px with no padding, no border radius and the browser's
 * 13.3 px font, inside an 821 px column, while every styled field on the master
 * list looked like part of the application (#46).
 *
 * `input:not([type])` rather than bare `input`, which is what the issue
 * proposes: bare `input` would also take the checkboxes, radios and submit
 * buttons inside a `.form-group` and give them width:100%. This catches exactly
 * the omission, and catches it for every field added later too.
 *
 * Here rather than in `style.css` because that file is shared with rwaRCMG and
 * is byte-identical there today; this adds a rule rather than diverging one.
 * The declarations match it deliberately — if that rule changes, this follows.
 * Focus needs nothing: style.css already selects `.form-group input:focus`
 * without a type, so the ring was never the broken half.
 */
.form-group input:not([type]),
.form-group input[type="search"],
.form-group input[type="date"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
 a list of unnamed tables and a reader
   landing inside one was told nothing about what it held. Hidden rather than
   printed because every one of these tables already sits under a heading that
   says the same thing on screen, and a visible caption would be a second line
   of prose saying it again. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Getting past the navigation ─────────────────────────────────────────────
 *
 * Twelve tab stops stood between the top of a page and its first control, on
 * every page, and there was no way round them (#45, WCAG 2.4.1). The link is
 * the first thing in the body and is off-screen until it takes focus.
 *
 * Positioned off to the left rather than hidden with display or visibility,
 * which would take it out of the tab order and leave it unreachable by the only
 * users it is for. z-index above `.topnav`, which is sticky at 100, or the
 * focused link renders underneath the bar it exists to skip.
 *
 * Following it leaves a focus outline round `main`, because `main` is what
 * takes the focus. That is the browser's own and it is deliberately not
 * suppressed: it is the only thing on screen saying the skip worked, and a page
 * where the keyboard has silently moved somewhere the eye cannot find is the
 * complaint this whole finding is about.
 *
 * Here rather than in `style.css` because the markup it styles is this
 * application's `base.html`; rwaRCMG has no skip link to style yet, and this
 * follows where `.sr-only` and `.flash-dismiss` already are.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    padding: .5rem 1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) 0;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow);
}
.skip-link:focus { left: 0; }

/* ── The navigation with script disabled ─────────────────────────────────────
 *
 * `.nav-dropdown-menu` is `display:none` until `toggleDropdown` adds `.open`,
 * so with script off the Program, Catalog and Admin menus never open and the
 * three registers, the catalog and the admin screens are unreachable from
 * anywhere in the application (#45). Everything behind them is an ordinary link
 * to an ordinary page; only the way in needed script.
 *
 * `no-js` is on the html element and app.js takes it off, so this is the state
 * a page is in when the script did not run — which is also the state it is in
 * for the few hundred milliseconds before app.js parses, and hovering the
 * navigation in that window opening a menu early is a fair trade for the menu
 * working at all when it never parses.
 *
 * Guarded on the class rather than applied unconditionally, because
 * `:focus-within` alone would fight the toggle: clicking an open menu's button
 * removes `.open` while leaving the button focused, so the menu would stay
 * visible and a second click would look like it did nothing.
 *
 * Here rather than in `style.css` because it reads a class this application's
 * `base.html` sets, and a rule keyed on markup rwaRCMG does not have would be
 * dead there.
 */
.no-js .nav-dropdown:hover .nav-dropdown-menu,
.no-js .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

/* ── A row that is not clickable does not offer to be ────────────────────────
 *
 * `style.css` sets `cursor:pointer` on every `.data-table` row, and in rwaRCMG
 * that is correct: its rooms, references and citations rows carry
 * `data-onclick` and selecting one is how that application works. No row in
 * this application is clickable — the links are in the cells — so the hand
 * pointer promised something that was not there on every table in the app
 * (#45).
 *
 * An override here rather than an edit to the shared rule, which reads
 * identically in both applications today and is correct in the other one. The
 * `[data-onclick]` line is the way back: a row that is genuinely clickable here
 * says so, and gets the pointer for saying it.
 */
.data-table tbody tr { cursor: default; }
.data-table tbody tr[data-onclick] { cursor: pointer; }

/* ── A link inside muted text is told apart by more than its colour ──────────
 *
 * `style.css` sets `a{text-decoration:none}` and leaves colour to carry it,
 * which works against body text and does not work against `--text-muted`:
 * `--primary` and `--text-muted` differ in hue and barely in brightness, so a
 * link inside a subtitle or a table header measured 1.01:1 against the text
 * around it, where 3:1 is the minimum (#162). The worst of them is the hot
 * spot's link to its room, a bare parenthesised number in the subtitle: for a
 * reader with a colour vision deficiency the way from a hot spot to its room
 * was not visibly there at all. `a:hover` restores the underline, which is no
 * help on a touch screen and no help before you know the link exists.
 *
 * Scoped to the muted containers rather than applied to every link, which
 * would underline the whole application, and `:not(.btn)` because a link
 * styled as a button is already told apart by its box. Here rather than in
 * `style.css` so the shared rule keeps reading the same in both applications;
 * rwaRCMG has the same token pair and the same defect, and this carries.
 */
.subtitle a:not(.btn),
.text-muted a:not(.btn),
.data-table th a:not(.btn) { text-decoration: underline; }

/* ── The drafting assistant's chat panel (#107) ─────────────────────────────
 *
 * Docked to the right of the viewport rather than placed in the page flow. The
 * question a preparer asks is about the section they are looking at, and a
 * panel they have to scroll away from the text to reach is a panel they stop
 * using.
 *
 * Collapsed to a tab until opened, so it costs one button on a page somebody is
 * only typing in.
 */
.assistant-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.assistant-tab {
    border: 1px solid var(--border, #d0d5dd);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--surface, #fff);
    color: inherit;
    font: inherit;
    font-size: .875rem;
    padding: .45rem .9rem;
    margin-right: 1rem;
    cursor: pointer;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
}

.assistant-tab:hover { background: var(--surface-alt, #f6f7f9); }

.assistant-body {
    width: min(26rem, 96vw);
    height: min(32rem, 70vh);
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d0d5dd);
    border-radius: 8px 0 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .14);
}

/* The `hidden` attribute has to be said again here, and this is not a tidy.
 * `display: flex` above is an author rule and `[hidden] { display: none }` is
 * the browser's own, so the author rule wins and the attribute does nothing:
 * the panel was drawn open over the bottom right of every editor page, 416 by
 * 512 pixels, on a page somebody had only opened to type in. It reached `main`
 * that way because the commit that added the panel ran no browser. */
.assistant-body[hidden] { display: none; }

.assistant-head {
    display: flex;
    gap: .4rem;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid var(--border, #d0d5dd);
}

.assistant-head .btn:last-child { margin-left: auto; }

.assistant-log {
    flex: 1;
    overflow-y: auto;
    padding: .6rem;
    font-size: .875rem;
}

/* One turn. The preparer's is tinted and right-shifted, the model's is plain
 * and full width, because the model's is the one somebody reads carefully and
 * a bubble makes long technical prose harder to read, not easier. */
.assistant-turn { margin-bottom: .7rem; }
.assistant-turn-user {
    background: var(--surface-alt, #eef2ff);
    border-radius: 6px;
    padding: .4rem .55rem;
    margin-left: 2rem;
}
.assistant-turn-note { color: var(--muted, #667085); font-size: .8125rem; }
.assistant-turn-error { color: var(--danger, #b42318); }
.assistant-turn pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font: inherit;
}

.assistant-compose {
    display: flex;
    gap: .4rem;
    align-items: flex-end;
    padding: .5rem;
    border-top: 1px solid var(--border, #d0d5dd);
}

.assistant-compose textarea {
    flex: 1;
    min-width: 0;
    resize: vertical;
    font: inherit;
    font-size: .875rem;
}