/* =============================================================================
   faults.css — the Faults desk's own sheet (labs 557)

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions and
   the edition switches in place (no data-ed-reload on <html>). A literal
   colour in this file is a bug in the dark edition that the paper edition
   cannot show you.

   Class names are all prefixed ft- (free in the tree at 557: no other file
   holds one). site.css owns the short names.

   Phones first: one column, every control 44 px tall, nothing wider than the
   screen (long identifiers, vectors and product names break anywhere). The
   wider layouts are added from 46rem up.

   SEVERITY IS NEVER COLOUR ALONE. A score chip is the number, the word
   (Critical, High, Medium, Low, Not scored) and the CVSS version with whose
   score it is; the bar of colour at its edge is the fourth signal, not the
   first. The mark for CISA's list is a drawn flag and the words.
   ========================================================================== */

/* `hidden` means hidden. Several things here are display:grid or inline-flex by class (the note, the record, the
   found lists, a .btn), and a class's display beats the attribute's unless it is said. */
#main [hidden] { display: none !important; }

/* -------------------------------------------------------- the status lines */
.ft-stat {
    margin: 0;
    font-size: .78rem; line-height: 1.45;
    color: var(--ink-77);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ft-stat b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ the controls */
.ft-controls { display: grid; gap: 1rem 1.6rem; grid-template-columns: minmax(0, 1fr); }
.ft-ctl { min-width: 0; }
.ft-ctl .lbl { margin-bottom: .5rem; }
.ft-seg .seg__b {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-block: .3rem;
}
.ft-seg .seg__b small { font-variant-numeric: tabular-nums; opacity: .8; }
/* THE PRESSED SEGMENT KEEPS ITS LABEL UNDER THE POINTER (REVIEW-557 M1; the 555 noise desk's cure). In the dark
   edition the house's hover rule, html[data-dark] .seg__b:hover (0,3,1), gives the hover's ink and outranks the
   house's pressed rule (0,2,0) that gave the pressed ground: the segment just pressed read white on white until the
   pointer left, and on a phone until something else was tapped. Pressed wins here (0,4,0), in both editions. */
.ft-seg .seg__b[aria-pressed="true"]:hover { color: var(--paper); }
.ft-seg .seg__b:focus-visible,
.ft-id:focus-visible, .ft-link:focus-visible, .ft-check input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

.ft-filter { display: grid; gap: .8rem 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
.ft-filter__text { min-width: 0; }
.ft-filter__text .field { width: 100%; min-height: 44px; }
.ft-filter__hint { grid-column: 1 / -1; margin: -.35rem 0 0; max-width: 64ch; }       /* what the filter searches: under both, the box and the tick */
.ft-check {
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 44px;
    font-size: .86rem; color: var(--ink-77);
    cursor: pointer;
}
.ft-check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.ft-check b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- the days, with their time */
.ft-days { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); overflow: hidden; }
.ft-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.ft-tbl th, .ft-tbl td { text-align: left; padding: .5rem .8rem; vertical-align: top; overflow-wrap: anywhere; }
.ft-tbl thead th {
    font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-55); border-bottom: 1px solid var(--line);
}
.ft-tbl tbody tr + tr td, .ft-tbl tbody tr + tr th { border-top: 1px solid var(--line-soft); }
.ft-tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ft-tbl td { color: var(--ink-77); }
.ft-tbl .ft-st { font-weight: 600; color: var(--ink); }
/* under 34rem the four columns become four labelled lines a day */
@media (max-width: 33.99rem) {
    .ft-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
    .ft-tbl, .ft-tbl tbody, .ft-tbl tr, .ft-tbl th, .ft-tbl td { display: block; }
    .ft-tbl tbody tr { padding: .55rem .8rem; }
    .ft-tbl tbody tr + tr { border-top: 1px solid var(--line-soft); }
    .ft-tbl tbody tr + tr td, .ft-tbl tbody tr + tr th { border-top: 0; }
    .ft-tbl th, .ft-tbl td { padding: .1rem 0; }
    .ft-tbl td[data-l]::before { content: attr(data-l) ': '; color: var(--ink-55); }
}

/* ---------------------------------------------- the note: one box, in words */
.ft-note {
    margin: 0;
    font-size: .86rem; line-height: 1.55;
    color: var(--ink-77);
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-55);
    border-radius: 9px;
    background: var(--paper);
    overflow-wrap: anywhere;
}
.ft-note b { color: var(--ink); font-weight: 600; }
.ft-note--wait { border-left-color: var(--unsure); background: var(--unsure-wash); }
.ft-note--bad  { border-left-color: var(--taken);  background: var(--taken-wash); }
.ft-note--old  { border-left-color: var(--unsure); }

/* ---------------------------------------------------------------- the list */
.ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-list:empty { display: none; }
.ft-row {
    min-width: 0;
    padding: .75rem .9rem .55rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
}
.ft-row--kev { border-color: var(--taken); }
.ft-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
.ft-id {
    -webkit-appearance: none; appearance: none;
    font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--ink);
    background: none; border: 0; border-radius: 6px;
    margin: 0 0 0 -.3rem; padding: 0 .3rem;
    min-height: 44px;
    display: inline-flex; align-items: center;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .22em;
    cursor: pointer;
}
.ft-id:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* the score: number, word, version and whose; the edge bar is the colour */
.ft-sev {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem;
    padding: .22rem .55rem .22rem .6rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: 7px;
    font-size: .78rem; line-height: 1.3; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ft-sev b { font-weight: 700; font-size: .9rem; }
.ft-sev i { font-style: normal; font-weight: 600; }
.ft-sev small { font-size: .7rem; color: var(--ink-55); }
.ft-sev--critical { border-left-color: var(--taken); border-left-width: 6px; }
.ft-sev--high     { border-left-color: var(--accent); }
.ft-sev--medium   { border-left-color: var(--unsure); }
.ft-sev--low      { border-left-color: var(--info); }
.ft-sev--none     { border-left-style: dashed; color: var(--ink-77); }

/* on CISA's list: a drawn flag and the words */
.ft-kevmark {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .22rem .6rem;
    border: 1px solid var(--taken);
    border-radius: 7px;
    background: var(--taken-wash);
    font-size: .78rem; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.ft-kevmark svg { flex: 0 0 auto; color: var(--taken); }
.ft-kevmark span { font-weight: 500; color: var(--ink-77); }

.ft-tag {
    display: inline-flex; align-items: center;
    padding: .15rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-77);
    white-space: nowrap;
}
.ft-tag--new { border-color: var(--accent); color: var(--ink); }

.ft-row__vp { margin: .15rem 0 0; font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ft-row__vp span { font-weight: 400; color: var(--ink-55); }
.ft-row__n { margin: .2rem 0 0; font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ft-row__d {
    margin: .25rem 0 0;
    font-size: .88rem; line-height: 1.5; color: var(--ink-77);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.ft-row__m {
    margin: .1rem 0 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 .9rem;
    font-size: .76rem; color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}
.ft-row__m > span { padding: .3rem 0; overflow-wrap: anywhere; }
.ft-link {
    display: inline-flex; align-items: center;
    min-height: 44px;
    color: var(--ink); font-weight: 600;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .22em;
    border-radius: 4px;
}
.ft-link:hover { text-decoration-color: var(--accent); color: var(--accent); }
.ft-link::after { content: '\2197'; margin-left: .25em; font-weight: 400; color: var(--ink-55); }

.ft-more { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.ft-more .btn { min-height: 44px; }
.ft-more__n { font-size: .78rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the lookup */
.ft-look { display: grid; gap: 1.3rem 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ft-look .field { min-height: 44px; width: 100%; }
.ft-look .btn { min-height: 44px; }
.ft-look .field-row > .field { width: auto; }
.ft-look__pair { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); margin-bottom: .6rem; }
.ft-look__pair > div { min-width: 0; }

.ft-h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.ft-h3--gap { margin-top: 2.2rem; }
.ft-found { display: grid; gap: .6rem; }
.ft-found .ft-h3 + .ft-found__n { margin-top: -.3rem; }
.ft-found .ft-list + .ft-h3 { margin-top: 1rem; }
.ft-found__n { margin: 0; font-size: .82rem; color: var(--ink-77); overflow-wrap: anywhere; }

/* the record, in full */
.ft-rec {
    padding: 1rem 1rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    min-width: 0;
}
.ft-rec:focus { outline: none; }
.ft-rec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ft-rec__h {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
    overflow-wrap: anywhere;
}
.ft-rec__top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin-top: .45rem; }
.ft-rec__d { margin: .8rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ft-rec__by { margin: .3rem 0 0; font-size: .74rem; color: var(--ink-55); }
.ft-dl { margin: .9rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-soft); }
.ft-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.ft-dl dt { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); padding-top: .12rem; }
.ft-dl dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ft-dl dd b { color: var(--ink); font-weight: 600; }
.ft-dl dd p { margin: 0; }
.ft-dl dd p + p { margin-top: .3rem; }
.ft-dl code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem; color: var(--ink-55);
    overflow-wrap: anywhere; word-break: break-all;
}
.ft-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ft-scores li { display: grid; gap: .2rem; }
.ft-rec__links { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin-top: .3rem; font-size: .86rem; }
.ft-rec__kev {
    margin-top: .9rem; padding: .7rem .85rem;
    border: 1px solid var(--taken); border-radius: 10px; background: var(--taken-wash);
}
.ft-rec__kev p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; }
.ft-rec__kev p + p { margin-top: .35rem; }
.ft-rec__kev b { color: var(--ink); font-weight: 600; }
.ft-rec__no { margin-top: .9rem; font-size: .86rem; color: var(--ink-77); }

/* -------------------------------------------------------------- the method */
.ft-method { margin-top: 1.8rem; display: grid; gap: 1.6rem 2.2rem; grid-template-columns: minmax(0, 1fr); }
.ft-src { min-width: 0; padding-top: 1rem; border-top: 2px solid var(--ink); }
.ft-src p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-77); overflow-wrap: anywhere; }
.ft-src b, .ft-plain b { color: var(--ink); font-weight: 600; }
.ft-src em { font-style: normal; font-weight: 600; color: var(--ink); }
.ft-plain { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; max-width: 78ch; }
.ft-plain li { position: relative; padding-left: 1.1rem; font-size: .92rem; line-height: 1.6; color: var(--ink-77); overflow-wrap: anywhere; }
.ft-plain li::before { content: ''; position: absolute; left: 0; top: .72em; width: .45rem; height: 1px; background: var(--accent); }
.ft-legal { margin: 1.6rem 0 0; font-size: .82rem; color: var(--ink-55); }
.ft-legal a { color: var(--ink); text-underline-offset: .2em; padding-block: .9rem; }   /* a 44 px target; the line keeps its height */

/* ------------------------------------------------------------ wider screens */
@media (min-width: 46rem) {
    .ft-controls { grid-template-columns: repeat(3, auto); justify-content: start; }
    .ft-filter { grid-template-columns: minmax(0, 26rem) auto; justify-content: start; }
    .ft-look { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ft-look__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ft-dl > div { grid-template-columns: 11rem minmax(0, 1fr); }
    .ft-row { padding: .8rem 1.1rem .6rem; }
    .ft-rec { padding: 1.3rem 1.4rem 1.1rem; }
}
@media (min-width: 62rem) {
    .ft-method { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .ft-seg .seg__b, .ft-id, .ft-link { transition: none; }
}