/* ================= THE RAW IMPORT PREVIEW =================

   JS/features/okr-import-preview.js draws a reconciliation screen — a summary,
   a grouped diff, inline resolution of unmatched names, and one button that
   writes to somebody's quarter. Almost all of it is drawn in classes this
   application already owns (`.a-card`, `.a-btn`, `.a-chip`, `.a-okr-pill`,
   `.a-okr-table`, `.a-okr-map`, …); not one of those is restated here. What IS
   here is the handful of things none of them could do, named per block below.

   No literal colour: every value comes from a `--a-*` role token or the
   `--okr-c`/`--okr-ct`/`--okr-cs` triple `.st-*` sets, so both themes come free.
   Scoped to `.alt-app`, like every stylesheet the suite loads.

   Responsive, and 390px is designed for rather than survived: a twelve-column
   reconciliation table cannot be squeezed there, so the four-column field
   table stacks, each cell captioned from its own `data-l`. */


/* ---------- 1 · THE SUMMARY CARD ----------

   `.a-card` gives the surface and nothing else; this adds the padding and
   internal rhythm, all the summary needs on top of it. */
.alt-app .a-okr-imp-sum{
  display:flex; flex-direction:column; gap:var(--a-2);
  padding:var(--a-3) var(--a-4); min-width:0;
}

/* The one sentence read if nothing else is — "816 rows analysed." Nothing
   existing sets a figure at this size; this is a sentence, at reading size. */
.alt-app .a-okr-imp-lede{
  margin:0; font:600 15px/1.4 var(--a-display); color:var(--a-text);
}

/* The findings list — a real `<ul>` so a screen reader announces "list, six
   items", bullets off since a status pill already leads each line. Shared by
   the summary, blocking and warnings sections, one definition not three. */
.alt-app .a-okr-imp-lines{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--a-2);
  font-size:13px; line-height:1.55; color:var(--a-text); min-width:0;
}
.alt-app .a-okr-imp-lines > li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; min-width:0;
}
.alt-app .a-okr-imp-lines .a-hint{ margin:0; }


/* ---------- 1b · A CHIP IS AS WIDE AS ITS WORD ----------

   On a long quarantine heading the status pill beside it was measured losing
   up to 42px of its own text to an ellipsis, at ordinary desktop widths.
   `.a-okr-pill` is `nowrap`/`ellipsis`, correct on a card; here it sits in a
   flex row where `overflow:hidden` zeroes its automatic minimum size, so flex
   shrink crushes the pill in proportion to the heading's own shortfall.
   Wrapping the heading does not save it — shrinking is decided from the
   max-content base size before any line break happens.

   The fix takes the chip OUT of the shrink rather than widening it: `flex:0 0
   auto` says a chip is as wide as its word, and the heading absorbs the
   shortfall by wrapping, which it was already doing. The overflow properties
   go with it — `white-space:normal`/`overflow:visible` — so a chip that still
   cannot fit (a 320px phone, 200% zoom) wraps instead of ellipsising, which is
   exactly the case that mattered. Scoped to this pane, not `.a-okr-pill`
   itself: elsewhere in the suite a pill sits beside a fixed label and the
   ellipsis is the right answer; here the word IS the meaning. */
.alt-app .a-okr-imp-sum .a-okr-pill,
.alt-app .a-okr-imp-block .a-okr-pill,
.alt-app .a-okr-imp-warn .a-okr-pill,
.alt-app .a-okr-imp-quar .a-okr-pill,
.alt-app .a-okr-imp-gh > .a-okr-pill,
.alt-app .a-okr-imp-rt > .a-okr-pill{
  flex:0 0 auto;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  height:auto;
}

/* ---------- 2 · BLOCKING AND WARNING, TOLD APART BEFORE THEY ARE READ ----------

   Two sections, two grounds, two words, and a 3px spine in the status colour
   so the distinction survives a greyscale print and a reader who cannot
   separate amber from red. The section itself has no `st-*` stem, so each
   names its token directly — the one place a literal token name is correct,
   since the section IS the status rather than displaying one. */
.alt-app .a-okr-imp-block,
.alt-app .a-okr-imp-warn,
.alt-app .a-okr-imp-note{
  display:flex; flex-direction:column; gap:var(--a-2); min-width:0;
  padding:var(--a-3); border-radius:var(--a-r);
  border:1px solid var(--a-line-soft); border-left-width:3px;
}
.alt-app .a-okr-imp-block{ border-left-color:var(--a-red);   background:var(--a-red-soft); }
.alt-app .a-okr-imp-warn { border-left-color:var(--a-amber); background:var(--a-amber-soft); }
/* The third member, and the one that is not a problem: "quarters that have
   already ended" must be impossible to miss without reading as a fault, since
   leaving imported history open is a legitimate choice. Same shape as the two
   sections above, in `--a-blue` — this application's "notice this" colour —
   rather than amber or red, which would both falsely say something is wrong. */
.alt-app .a-okr-imp-note { border-left-color:var(--a-blue);  background:var(--a-blue-soft); }
/* The lede and explanation take the box's own rhythm — a `<p>`'s UA margin
   fights the flex gap otherwise, landing the sentence half a line off. */
.alt-app .a-okr-imp-note > .a-okr-imp-lede,
.alt-app .a-okr-imp-note > .a-hint{ margin:0; }
/* `.a-check-l` centres, correct for a one-line label and wrong for one that
   wraps here — scoped to this box, not the scope filter's own checkboxes. */
.alt-app .a-okr-imp-note > .a-check-l{ align-items:flex-start; }
.alt-app .a-okr-imp-note > .a-check-l > .a-okr-check{ margin-top:2px; flex:0 0 auto; }
/* The error summary takes focus when the reader presses "Show what must be fixed", and a focus
   ring on a section is the only thing that says the jump landed. */
.alt-app .a-okr-imp-block:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
.alt-app .a-okr-imp-block > .a-sec-h,
.alt-app .a-okr-imp-warn > .a-sec-h{ margin:0; }


/* ---------- 3 · THE DIFF GROUPS ----------

   Native `<details>`: keyboard reachable, announced, printable and searchable
   with no script, where a hand-built disclosure needs `aria-expanded`,
   `aria-controls` and a state variable to get wrong. Nothing in this
   application had one before, so the shape is defined here.

   The marker has to be redrawn: `<summary>` is a `list-item`, and the moment
   it is given `display:flex` so the count can sit hard right, every WebKit and
   Blink browser silently drops its disclosure triangle. Redrawn as a
   `::before`, rotated by `[open]` — decorative, since `<details>` still owns
   the state, the keyboard and the announcement. */
.alt-app .a-okr-imp-g{
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-panel); min-width:0; overflow:hidden;
}
.alt-app .a-okr-imp-g + .a-okr-imp-g{ margin-top:var(--a-2); }
.alt-app .a-okr-imp-gh{
  display:flex; align-items:center; gap:var(--a-2); min-width:0;
  padding:var(--a-2) var(--a-3); cursor:pointer;
  font:600 13px/1.4 var(--a-body); color:var(--a-text);
  list-style:none;
}
.alt-app .a-okr-imp-gh::-webkit-details-marker{ display:none; }
.alt-app .a-okr-imp-gh::before{
  content:''; flex:0 0 auto; width:0; height:0;
  border-left:5px solid var(--a-faint);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform var(--a-quick) var(--a-ease);
}
.alt-app .a-okr-imp-g[open] > .a-okr-imp-gh::before{ transform:rotate(90deg); }
/* A reader who has asked for less motion gets the same two states without the turn. */
@media (prefers-reduced-motion: reduce){
  .alt-app .a-okr-imp-gh::before{ transition:none; }
}
.alt-app .a-okr-imp-gh:hover{ background:var(--a-raised); }
.alt-app .a-okr-imp-gh:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
/* The title takes the slack so the count sits hard right, lining up six
   group counts to be compared down the page rather than read one at a time. */
.alt-app .a-okr-imp-gt{ flex:1 1 auto; min-width:0; }
.alt-app .a-okr-imp-gh > .a-okr-num{ flex:0 0 auto; font-size:13px; font-weight:600; }
/* Inset from the summary; tables inside keep their own `.a-okr-tscroll`. */
.alt-app .a-okr-imp-g > *:not(.a-okr-imp-gh){
  margin:0 var(--a-3) var(--a-3); min-width:0;
}
.alt-app .a-okr-imp-g > .a-hint:first-of-type{ margin-top:0; }


/* ---------- 4 · ONE RECORD, WITH ITS FIELDS ----------

   Why a record is not a table row: an enrichment or conflict shows FIELD ·
   CURRENT · PROFIT.CO · PROPOSED per field, which a flat table cannot express
   and nesting one inside a `<td>` produces nothing readable. So a record that
   needs reconciling is a block with its own small table instead. */
.alt-app .a-okr-imp-rec{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:var(--a-2) 0;
  border-top:1px solid var(--a-line-soft);
}
.alt-app .a-okr-imp-rec:first-of-type{ border-top:0; }
.alt-app .a-okr-imp-rt{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; min-width:0;
  margin:0; font-size:13px; line-height:1.5; color:var(--a-text);
}
.alt-app .a-okr-imp-rt > .a-okr-pill{ align-self:center; }
.alt-app .a-okr-imp-rt > .a-hint{ margin:0; }

/* The sentence that says the reader's value survives — text, not colour,
   because "your value is kept" is not a thing a hue can say. */
.alt-app .a-okr-imp-kept{
  font-size:11.5px; font-weight:600; color:var(--a-amber); white-space:normal;
}


/* ---------- 4b · WHAT A RESOLUTION CHOICE JUST DID ----------

   One sentence under one map row, only for the choice whose effect is
   invisible: "do not import this person" leaves nothing a reader can point
   at, so it says out loud what it did. `grid-column:1/-1` gives it a line of
   its own under the row's three-column grid. `--a-dim` since this is a
   settled decision, not a warning — the row has already dropped its amber. */
.alt-app .a-okr-maprow > .a-okr-imp-mapnote{
  grid-column:1 / -1; min-width:0;
  font-size:11.5px; line-height:1.45; color:var(--a-dim);
}


/* ---------- 5 · THE SCOPE FILTER ----------

   Two buckets side by side on a desktop, one under the other when there is no
   room. Nothing existing lays out a pair of labelled checkbox groups —
   `.a-okr-map` is a single column of mapping rows, a different object. */
.alt-app .a-okr-imp-scope{
  display:grid; gap:var(--a-3); min-width:0;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.alt-app .a-okr-imp-scopeb{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  padding:var(--a-2) var(--a-3); border-radius:var(--a-r-sm);
  border:1px solid var(--a-line-soft); background:var(--a-panel);
}
.alt-app .a-okr-imp-scopeb .a-okr-lbl{ margin:0 0 2px; }
/* A count beside its value, quiet, and never the thing the eye lands on first. */
.alt-app .a-okr-imp-scopeb .a-okr-num{ color:var(--a-faint); }


/* ---------- 6 · ANALYSIS PROGRESS ----------

   The six steps of the pipeline, each wearing the same status pill the rest
   of the page uses. A bare spinner cannot tell a slow read from a hung one;
   a named step can. */
.alt-app .a-okr-imp-steps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; line-height:1.5; color:var(--a-text); min-width:0;
}
.alt-app .a-okr-imp-steps > li{
  display:flex; align-items:center; gap:var(--a-2); min-width:0;
}
.alt-app .a-okr-imp-steps > li > .a-okr-pill{ flex:0 0 auto; min-width:74px; }


/* ---------- 7 · THE FOOTER EXPLANATION ----------

   A disabled button must say why, in words, where the button is — grey is not
   a reason. Claims its own line at the widths where sharing one would push
   Accept off the edge. */
.alt-app .a-okr-imp-why{ min-width:0; }


/* ---------- 8 · QUARANTINE — THE ROWS THAT ARE NOT COMING IN ----------

   A third state the two sections above could not say: the import PROCEEDS,
   and rows are LEFT BEHIND — neither the blocking ground (reads as failed) nor
   the warning ground (reads as nothing lost) says that. So it takes the red
   spine over the ordinary panel ground: something is being lost, nothing is
   stopped. Everything else is borrowed, which is why the 390px rule at the
   bottom of this file already stacks it with nothing new for the phone. */
.alt-app .a-okr-imp-quar{
  display:flex; flex-direction:column; gap:var(--a-2); min-width:0;
  padding:var(--a-3); border-radius:var(--a-r);
  border:1px solid var(--a-line-soft); border-left-width:3px;
  border-left-color:var(--a-red); background:var(--a-panel);
}
.alt-app .a-okr-imp-quar:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
.alt-app .a-okr-imp-quar > .a-sec-h{ margin:0; }
.alt-app .a-okr-imp-quar > .a-hint{ margin:0; }
/* The download is the artefact this section exists to produce, so it sits
   above the lists on its own line — stretched across the column it would
   read as a banner. */
.alt-app .a-okr-imp-quar > .a-btn{ align-self:flex-start; max-width:100%; }

/* Told apart by position as well as wording: rows to fix come first, rows
   only waiting follow, subordinate to the block above rather than equal to it. */
.alt-app .a-okr-imp-quarb{
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.alt-app .a-okr-imp-quarb + .a-okr-imp-quarb{
  margin-top:var(--a-2); padding-top:var(--a-3);
  border-top:1px solid var(--a-line-soft);
}
.alt-app .a-okr-imp-quarb > .a-sec-h{ margin:0; }
.alt-app .a-okr-imp-quarb > .a-hint{ margin:0 0 var(--a-1); }
/* A phrase here — "340 rows" — not the bare figure, or it reads as a row number. */
.alt-app .a-okr-imp-quar .a-okr-imp-gh > .a-okr-num{ white-space:nowrap; }


/* ================= RESPONSIVE =================

   `.a-okr-tscroll` already keeps every wide table inside its own box, so
   nothing below is about horizontal overflow — only the places where
   scrolling a table sideways is the wrong answer. */

@media (max-width:820px){
  /* The footer's explanation takes its own line rather than competing with the buttons. */
  .alt-app .a-okr-imp-why{ flex:1 1 100%; }
}

@media (max-width:639px){
  .alt-app .a-okr-imp-sum{ padding:var(--a-3); }
  /* At 390px the quarantine list stacks rather than squeezes, and the
     download button takes a full line so it is never pushed off the edge. */
  .alt-app .a-okr-imp-quar{ padding:var(--a-2); }
  .alt-app .a-okr-imp-quar > .a-btn{ align-self:stretch; text-align:center; }
  .alt-app .a-okr-imp-quarb + .a-okr-imp-quarb{ padding-top:var(--a-2); }
  .alt-app .a-okr-imp-g > *:not(.a-okr-imp-gh){ margin:0 var(--a-2) var(--a-2); }
  .alt-app .a-okr-imp-gh{ flex-wrap:wrap; }

  /* The four-column field table stacks at 390px: FIELD · CURRENT · PROFIT.CO ·
     PROPOSED at ~90px a column truncates the one thing that matters, whether
     two names are the same name — and sideways scrolling can't help, since the
     reader must compare column two against column four on screen together.
     Each row becomes a labelled block instead, captioned from the cell's own
     `data-l` (the same string the renderer writes into `<th>`, one source so
     a renamed column cannot leave the phone stale). `<thead>` is hidden from
     sight only, so a screen reader's row/column semantics are untouched.
     `.a-okr-imp-rows` stacks the same way, more sharply: its last column
     carries the sentence saying why a record was blocked. */
  .alt-app .a-okr-imp-fields,
  .alt-app .a-okr-imp-rows{ min-width:0; width:100%; }
  .alt-app .a-okr-imp-fields thead,
  .alt-app .a-okr-imp-rows thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .alt-app .a-okr-imp-fields .a-okr-tr,
  .alt-app .a-okr-imp-rows .a-okr-tr{
    display:block; padding:6px 0; border-bottom:1px solid var(--a-line-soft);
  }
  .alt-app .a-okr-imp-fields .a-okr-td,
  .alt-app .a-okr-imp-rows .a-okr-td{
    display:grid; grid-template-columns:minmax(0,11ch) minmax(0,1fr);
    gap:var(--a-2); align-items:baseline;
    padding:2px 0; white-space:normal;
  }
  .alt-app .a-okr-imp-fields .a-okr-td::before,
  .alt-app .a-okr-imp-rows .a-okr-td::before{
    content:attr(data-l);
    font:700 10px/1.6 var(--a-body); letter-spacing:.08em; text-transform:uppercase;
    color:var(--a-dim);
  }
}


/* ---------- 9 · THE ACTIONS ON ONE RUN IN THE HISTORY ----------

   The one class JS/features/okr-import-history.js adds, because nothing
   existing could: each run reuses `.a-okr-imp-rec`, a flex column, so a button
   placed directly inside it stretches full width and three become three
   stacked banners. `.a-actions` would fit but lives in a sheet okrs.html does
   not load. So: one horizontal row that wraps rather than squeezes, with
   `align-items:stretch` so a wrapped button fills its line. */
.alt-app .a-okr-imp-acts{
  display:flex; flex-wrap:wrap; gap:var(--a-2); min-width:0; margin-top:2px;
}
.alt-app .a-okr-imp-acts > .a-btn{ max-width:100%; }

@media (max-width:639px){
  /* A wrapped button takes the whole line — half-width buttons in a stack read as a broken grid. */
  .alt-app .a-okr-imp-acts{ flex-direction:column; align-items:stretch; }
  .alt-app .a-okr-imp-acts > .a-btn{ justify-content:center; }
}