/* ================================================================
   trycompare.css — the "One task. Different answers." section
   ================================================================
   Every colour here resolves through the page's own tokens, so this
   file states no hex of its own except where a state needs a tint the
   token set does not carry. The palette is defined twice in
   index.html and the second block wins; reading it through var()
   means this follows whichever is in force rather than pinning a
   colour that goes wrong when the palette moves.
   ================================================================ */

/* Top padding carries the "or" rule that separates this from the question
   box above. It was 8px when the section simply followed the box; a divider
   needs air on both sides or it reads as an underline for the thing above
   it rather than a gap between two choices. */
#trycompare {
  padding: 40px 0 4px;
  /* A visible edge for a control.
   *
   * --rule is a hairline for separating blocks of text, and against --card
   * it measures 1.22:1 — which is fine for a divider nobody is meant to
   * notice and wrong for the edge of a button. WCAG asks 3:1 of anything
   * that tells you where a control is. Mixing most of the way to --muted-2
   * lands at about 3.3:1: an edge you can find, still quieter than the
   * text inside it. */
  --tc-edge: color-mix(in srgb, var(--muted-2) 70%, var(--rule));
  /* Step two wears step two's colour, which is the teal the pill in the
     hero gives it - var(--teal) is the violet, and that one is step one's.
     Named here rather than written into the rule, so the theme can reach
     it the way it reaches every other colour on the page. */
  --tc-step-bg: #5FE3D0;
  --tc-step-fg: #08111A;
  /* And step one wears step one's, for the badge on the fold that points
     back up at it. Same two colours the pill in the hero uses. */
  --tc-step1-bg: #7C5CFF;
  --tc-step1-fg: #fff;
}
/* ---- STEP TWO TAKES THE SCREEN --------------------------------
   This was a 980px column. A form does read better in one — that is why the
   question box above it still is one — but it left 380px of empty page down
   each side of the task box on a laptop, and the thing being set up here is
   a line-up of ten tools rather than a sentence.

   IT TAKES THE SAME WIDTH THE ANSWERS ALREADY TAKE, which is the sum .tc-out
   works out below and not the page's own 1400px .wrap. The two are one
   thing: the task box, the row of tools and the answers that come back all
   stand on one edge. A form at the wrap's width with answers 50-odd pixels
   wider either side would read as a misalignment rather than as a breakout,
   and the breakout is the half that cannot move — it is sized to hold four
   answers side by side.

   padding-inline:0 because .wrap carries 20px of it and what is set here is
   the content box: the gutter is already inside the 48 taken off the
   viewport, so keeping both would inset this column 20px from the answers
   it is supposed to line up with.

   ONLY ABOVE 1100px, the same floor .tc-out breaks out at. Below it the
   page's own column is the screen give or take its gutters, so this is the
   plain .wrap there — still wider than the 980 it used to be capped at. */
#trycompare .wrap { margin-inline: auto; }
@media (min-width: 1100px) {
  #trycompare .wrap {
    width: min(1520px, calc(100vw - 48px));
    max-width: none;
    padding-inline: 0;
  }
}

/* Left, not centred. This is step 2 of a numbered flow now rather than the
   masthead of a section of its own, and a heading centred under its own
   step number reads as a new beginning - which is the thing the "or" rule
   above it used to say and the thing this change exists to stop saying. */
.tc-head { text-align: left; margin: 0 0 22px; }
/* The step. An inline badge rather than a flex item, so the heading wraps
   around it the way a heading does. */
.tc-head h2 span.tc-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 12px 0 0; vertical-align: 3px;
  border-radius: 999px; background: var(--tc-step-bg); color: var(--tc-step-fg);
  font-family: var(--mono); font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: 0;
}
@media (max-width: 560px) { .tc-head h2 span.tc-step { width: 28px; height: 28px; font-size: 13px; margin-right: 9px; vertical-align: 2px; } }
.tc-head h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.1; letter-spacing: -.028em;
  margin: 0 0 10px; color: var(--ink);
  text-wrap: balance;
}
/* The claim, in the accent. The first half says what the section does and
   the second says why to bother, so they are not the same sentence and do
   not want the same weight of voice. */
.tc-head h2 span { color: var(--teal-tx); }
.tc-head p {
  /* Left with the heading above it. `0 auto` centred it under a heading
     that is no longer centred, which left the step number, the sentence and
     the paragraph on three different axes. */
  margin: 0; max-width: 60ch;
  font-size: 15.5px; line-height: 1.6; color: var(--muted);
  text-wrap: pretty;
}

/* ---- the fold over step two ------------------------------------
   What stands in for the panel until step one has happened. Quiet on
   purpose: it is a signpost rather than a thing to do, and the loudest
   control on this part of the page should be the one that takes a reader
   back up to the question box.

   The "1" carries the same badge as the "2" in the heading above it, at a
   smaller size, so the two numbers read as one sequence rather than as
   decoration on two separate blocks. */
/* THE SAME BOX AS THE PANEL, SHUT.

   The edge and the halo below are .tc-panel's, repeated deliberately. The
   folded state first shipped with the hairline every other block on the
   page has, and that made step two vanish rather than shrink: the section
   the whole page leads to read as a footnote between the finder and the
   category list.

   It is the same object in two states, so it keeps the same green edge and
   the same glow in both - which is also what tells a reader the thing they
   are being sent back up from is still here, waiting, rather than gone.

   Written out rather than shared with .tc-panel in one selector because
   preflight reads each rule's own body to check the section has not been
   flattened back to a hairline, and a shared block would hide that from
   both. The values are held together by that check, not by this comment. */
.tc-gate {
  background: var(--card);
  border: 3px solid var(--ochre);
  border-radius: 18px;
  box-shadow: 0 0 26px rgba(95, 227, 208, .30), 0 0 72px rgba(95, 227, 208, .13),
              0 18px 44px rgba(0, 0, 0, .34);
  padding: 20px 22px;
}
/* Hanging indent, so the second and third lines start under the first
   rather than under the badge.

   The badge is lifted OUT of the text flow to get it, rather than pulled
   back with text-indent: the badge is an inline-flex box and a negative
   indent moves the box, not the line - which put the "1" outside its own
   circle. Absolute against the paragraph moves the text and leaves the
   badge where it was. 31px is the badge plus the gap after it. */
.tc-gate-t {
  position: relative; margin: 0; padding-left: 31px;
  font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 62ch;
}
.tc-gate-n {
  position: absolute; left: 0; top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px; background: var(--tc-step1-bg); color: var(--tc-step1-fg);
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1;
}
.tc-gate-b { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 0; }
/* Both of these are toggled by the `hidden` attribute, and this file has
   twice shipped a block that kept its place on the page because display
   beat the attribute. The panel is a plain div today and the gate is a
   flex container's parent rather than a flex item - neither needs this
   right now, and both get it, because "does not need it yet" is how the
   last two got found by a reader rather than by a check. */
.tc-panel[hidden] { display: none; }
.tc-gate[hidden] { display: none; }
/* The way back up is the recommended one and reads like it; the way past is
   a button beside it rather than under it, because it is not a lesser
   option - it is a different reader. */
.tc-gate-up { text-decoration: none; }
@media (max-width: 460px) {
  .tc-gate { padding: 16px; }
  .tc-gate-b .tc-btn { width: 100%; justify-content: center; }
}

/* ---- the compact panel ---------------------------------------- */
/* The panel carries the whole interaction now - task, kind, six AIs and the
   button - so it is a room rather than a strip, and gets the padding of one. */
/* And it is lit, the way the finder's box at the top of the page is lit,
   and in the other accent: the finder glows violet and this glows green,
   so the two read as the page's two starting points rather than as one
   thing repeated twice. The whole room rather than the task field inside
   it - what this section offers is the room.

   Same construction as the finder's: a thick line and two halos at
   different radii over the drop shadow that grounds it, spread 0 on both
   because a spread thickens the border instead of lighting it. */
.tc-panel {
  background: var(--card);
  border: 3px solid var(--ochre);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 0 26px rgba(95, 227, 208, .30), 0 0 72px rgba(95, 227, 208, .13),
              0 18px 44px rgba(0, 0, 0, .34);
}
.tc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
/* "Your task", at the same weight and size as "Selected AIs" under it:
   the two halves of the one decision, labelled alike. */
.tc-row > .tc-lab { font-size: 17px; }
.tc-row-b { display: flex; align-items: center; gap: 8px; }
.tc-row-b [hidden] { display: none; }
.tc-lab { font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* The box, and the field inside it.
   The edge, the ground and the focus ring moved from the textarea to the
   box around it, because the box holds more than the textarea now: what
   is attached and the buttons that attach it are part of the same act.
   The field keeps the caret; the box keeps the outline.

   The glow is the PANEL's, not this box's. Lighting both put a bright
   green rectangle inside a bright green rectangle and made the field look
   like the section; what the section offers is the room, so the room is
   what is lit. This is the field inside it and reads as one: its own
   ground, a quiet edge, and the accent saved for focus. */
.tc-box {
  display: flex; flex-direction: column;
  min-height: 150px;
  background: var(--ink-2);
  border: 1px solid var(--tc-edge); border-radius: 14px;
  /* The handle is the BOX's, at its bottom corner under the Attach
     control, so the field and the foot grow together; the field inside
     has no handle of its own. */
  overflow: hidden; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
/* Focus is a change of shape as well as of colour: the ring is there
   whether or not the reader can tell green from grey. The field inside
   has no ring of its own - one rectangle drawn inside another every time
   somebody clicks into it is the thing this replaced - so this is the
   only focus indicator there is. */
.tc-box:focus-within {
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px rgba(95, 227, 208, .26);
}
.tc-in {
  display: block; width: 100%; box-sizing: border-box;
  flex: 1 1 auto; min-height: 84px; resize: none;
  padding: 16px 18px 6px;
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 0;
}
.tc-in::placeholder { color: var(--muted-2); }
/* The ring is the box's. A second one on the field would draw a rectangle
   inside a rectangle every time somebody clicked into it. */
.tc-in:focus-visible { outline: none; }

/* Counts up rather than down: a number that only appears when it matters
   would move the box, and a limit worth stating is worth stating early. */
/* And only once it matters. The count sat under the box on every visit
   as "0/4000", a number about nothing; it appears when the box is nine
   tenths full, which is the one time a reader needs to know. */
.tc-chars {
  display: none; margin: 6px 2px 0; text-align: right;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-2);
}
.tc-chars.near { display: block; color: var(--ink); }

/* ---- the filters ----------------------------------------------
   Eleven of them: the row with nothing taken off it, the page's own
   suggestion, and the site's nine categories. Pressing one opens the row
   under it and pressing it again closes it. */
/* THE FOLD, WHICH ONLY EXISTS ON A PHONE.
   Mobile first, so the attribute means what it says: the block is hidden
   until "+ Add AI" opens it. Above 620px - where the chips are one row and
   are the way a reader disagrees with what their task routed to - the block
   is shown whether or not the attribute is set, and the button that would
   toggle it is not there at all. One attribute, two meanings, decided by
   width rather than by script. [hidden] first, as everywhere in this file:
   a display below it would win. */
.tc-alt[hidden] { display: none; }
.tc-alt { display: block; }
.tc-addrow { margin: 0; }
@media (min-width: 621px) {
  .tc-alt[hidden] { display: block; }
  .tc-addrow { display: none; }
}
/* "Edit", at the right of "Selected AIs": a word in the accent, not a
   button, because the row it opens is the thing to look at and the word
   is only the way there. */
/* .tc-tray-e, not .tc-edit: that name is already the editable answer
   field further down this file, and sharing it gave this word a box. */
.tc-tray-e {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 2px 0; border: 0; background: none; color: var(--teal-tx);
}
.tc-tray-e:hover { text-decoration: underline; }
.tc-tray-e:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 3px; border-radius: 4px; }

/* ---- find, then filter -----------------------------------------
   The search box is the first control in the section and it is permanent:
   747 products do not fit in nine chips, and a reader who knows the name
   should not have to guess which category this site files it under.

   A native menu used to stand in for the chips on a phone, because eleven
   chips is three rows. They are inside the fold now - "+ Add AI" opens it -
   so the room is there, and one control means the lit filter cannot
   disagree with what the menu says. */
.tc-find-w { margin: 16px 0 0; }
.tc-find-w > .tc-lab { display: block; margin: 0 0 7px; }
.tc-find-b {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--tc-edge);
}
.tc-find-b:focus-within { border-color: var(--teal); }
.tc-find-i { color: var(--muted-2); flex: none; }
.tc-filt-l { display: block; margin: 15px 0 0; }

/* ONE CONTROL, NOT ELEVEN.

   These were eleven outlined pills with 8px of page between them, wrapping
   onto a second row - and at that spacing a set of filters reads as a
   scatter of unrelated buttons rather than as one thing with eleven
   settings. Each had its own edge, so the eye counted eleven boxes.

   So the edge belongs to the SET: one inset strip, the same ground and
   radius as the search box above it, with the filters sitting flat inside
   it as segments. Two pixels between them rather than eight, no border on
   any of them, and the lit one is the only thing carrying a fill. That is
   the difference between a toolbar and a handful of bubbles. */
.tc-cats {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 8px 0 0; padding: 4px;
  border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--tc-edge);
}
/* The two that are not categories - the whole row, and what the page
   suggested - read as a pair, with a hairline between them and the nine.
   It is the grouping the labels cannot give without a second line of
   text. */
.tc-cat[data-cat="assistant"] { margin-left: 9px; }
.tc-cat[data-cat="assistant"]::before {
  content: ''; position: absolute; left: -5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--tc-edge);
}
@media (max-width: 620px) {
  /* Smaller, because eleven of them are three rows at full size and the
     fold they are in is already costing a tap. */
  .tc-cat { height: 32px; padding: 0 10px; font-size: 12.5px; }
}
/* [hidden] FIRST, as everywhere in this file. "Recommended" is hidden until
   something is recommended, and the display below would win that fight -
   which it did: the chip sat there on a closed section with nothing behind
   it, and pressing it opened an empty row. */
.tc-cat[hidden] { display: none; }
.tc-cat {
  position: relative;
  /* Flush at both ends, and no orphan on a wrap. The segments share out
     whatever the strip has left over, so eleven of them make one full line
     rather than a line and a gap - and when a twelfth arrives and the set
     wraps, the second row fills instead of leaving "Productivity" stranded
     on its own. Sized to fit all twelve on one line at panel width, which
     is the state this is in while somebody is choosing. */
  /* Capped, because growth without one turns a lone item on a wrapped row
     into a full-width segment with its label centred, which reads as a
     heading rather than as a filter. Every label is under this at its
     natural width, so the cap only ever bites on a row with room to
     spare. */
  flex: 1 1 auto; max-width: 128px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 10px; border-radius: 9px;
  color: var(--ink); background: transparent; border: 0;
}
.tc-cat:hover { background: rgba(255,255,255,.07); }
.tc-cat:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: -2px; }
.tc-cat.on { background: var(--teal); color: #fff; }
/* The hairline is the strip's, not the segment's, so a lit "Assistants"
   does not paint over half of it. */
.tc-cat.on::before { background: var(--tc-edge); }

/* Shown only for the kinds of task a text model cannot actually do.
   [hidden] first and on its own line, because the display:flex below it
   would otherwise win and the note would show for every category. */
.tc-cav[hidden] { display: none; }
.tc-cav {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 11px 0 0; padding: 10px 12px;
  border: 1px solid var(--tc-edge); border-radius: 10px;
  background: rgba(255,255,255,.04);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.tc-cav b { color: var(--ink); font-weight: 700; }
.tc-cav a { color: var(--teal-dk); }

/* ---- the two buttons -------------------------------------------
   A quiet one for Select all, a loud one for Compare.

   Both carry a real edge. --rule is a hairline for separating blocks of
   text and measures 1.22:1 against --card, which is right for a divider
   nobody should notice and wrong for the boundary of a control; WCAG asks
   3:1 of anything that tells you where one is. --tc-edge is about 3.3:1:
   findable, still quieter than the label inside it. */
/* [hidden] FIRST. display:inline-flex below would otherwise win, and
   "Add another AI" sat on screen before there was anything to add. Third
   time this rule has been needed on this page - .tc-cav, .tc-tool and
   now here - which is what a pattern looks like. */
.tc-btn[hidden] { display: none; }
.tc-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  color: var(--ink); background: rgba(255,255,255,.08);
  border: 1px solid var(--tc-edge);
}
.tc-btn:hover:not(:disabled) { border-color: var(--teal-dk); background: rgba(255,255,255,.13); }
.tc-btn:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 2px; }
.tc-btn:disabled { opacity: .6; cursor: not-allowed; }
.tc-btn.on { background: var(--teal); border-color: var(--teal); color: #fff; }
/* The way out to the product is an anchor so that middle-click and "open
   in new tab" work, which means it arrives underlined and link-coloured
   and has to be told it is a button. */
a.tc-btn { text-decoration: none; }
.tc-out-go { color: var(--ink); }
.tc-out-go:hover { border-color: var(--teal-dk); }

/* Full width, because it is the one thing to press and the panel has no
   competing control beside it any more. */
/* [hidden] FIRST. display:flex below beats it, which is the trap that has
   now caught .tc-cav, .tc-tool, .tc-btn, and here .tc-go, .tc-pick and
   .tc-tools - three more at once, because the whole picker waits for a
   category and every part of it is laid out with flex or grid. */
.tc-go[hidden] { display: none; }
.tc-go {
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; margin: 22px 0 0;
  padding: 0 18px; border-radius: 12px;
  background: var(--teal); border: 1px solid var(--teal); color: #fff;
}
/* Hover DARKENS. It used to go to --teal-tx, which is a lighter purple, and
   white on that is 3.75:1 — so pointing at the button made its own label
   harder to read than leaving it alone. Down instead of up: 6.7:1. */
.tc-go:hover:not(:disabled) {
  background: color-mix(in srgb, var(--teal) 84%, #000);
  border-color: color-mix(in srgb, var(--teal) 84%, #000);
}
.tc-go:disabled { opacity: .6; cursor: not-allowed; }
.tc-go:focus-visible { outline: 2px solid var(--teal-dk); outline-offset: 2px; }
/* The plan line under the button: quiet, one line, the figures in ink. */
.tc-plan[hidden] { display: none; }
.tc-plan { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tc-plan b { color: var(--ink); }
.tc-plan.out { color: var(--ochre); }
.tc-plan a { color: var(--teal-tx); }

/* ---- choose the AIs -------------------------------------------
   These used to hide behind a "Choose tools" button, which asked somebody to
   open a drawer to discover that the section runs Claude and GPT. The names
   are the reason to try it, so they are the thing on screen, and all six
   start ticked: the offer is "see what all of them say", not "assemble a
   comparison first". Untick what you do not want. */
/* ---- attachments -----------------------------------------------
   The row of buttons, the chips for what is attached, and one line
   saying what will actually be sent. [hidden] first on all four, for
   the reason given above the compare button. */
.tc-att[hidden] { display: none; }
/* The foot of the box, under the field and inside the same edge. */
/* No rule between the field and the foot: the Attach control sits in
   the same box as the words, at its bottom-left corner. */
.tc-att { display: block; }
.tc-att-b {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 12px 12px;
}
/* The hint sits after the buttons and gives way first: on a phone the
   buttons are the thing to reach and the sentence is the thing to read
   when there is room for it. */
.tc-att-h[hidden] { display: none; }
.tc-att-h { font-size: 12px; color: var(--muted-2); flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .tc-att-h { display: none; } }
/* The attach pair, kept together so Clear can sit at the other end of the
   foot whether or not attaching is on offer. */
.tc-att-g[hidden] { display: none; }
.tc-att-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* One button, "Attach", and the two ways of attaching open beside it
   inline rather than in a menu over the page: the box clips what
   overflows it, so a dropdown would be cut off at its edge, and a row
   that grows two buttons long is also a row that needs no closing
   gesture a phone cannot make. */
.tc-attach { height: 36px; padding: 0 14px; border-radius: 11px; gap: 9px; font-size: 14px; }
.tc-attach .tc-chev { transition: transform .15s; }
.tc-attach[aria-expanded="true"] .tc-chev { transform: rotate(180deg); }
.tc-att-m[hidden] { display: none; }
.tc-att-m { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-att-o { height: 34px; font-size: 13px; }
.tc-att-l:empty { display: none; }
.tc-att-l {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 0;
}
/* One attached file. The name is the thing to read, so it gets the room
   and everything else is a hint beside it. */
/* Small: a chip the width of its name, not a bar across the box. */
.tc-att-c {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 4px 4px 4px 9px;
  border: 1px solid var(--tc-edge); border-radius: 8px;
  background: rgba(255,255,255,.06); font-size: 12.5px; color: var(--ink);
}
.tc-att-c.skip { color: var(--muted-2); border-style: dashed; background: transparent; }
.tc-att-c .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; min-width: 0; flex: 0 1 auto; }
.tc-att-c button.n { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.tc-att-c button.n:hover { text-decoration: underline; }
.tc-att-c .w { color: var(--muted-2); font-size: 11.5px; flex: 0 1 auto; min-width: 0; }

/* On a phone each one takes the width and the reason wraps under it. The
   reason is the whole point of a rejected file - "a picture, and these
   models are being asked in words" is what stops somebody wondering why
   their screenshot did nothing - and squeezing it into a chip beside a
   filename pushed the close button off the screen. */
@media (max-width: 560px) {
  .tc-att-b { padding: 4px 10px 10px; }
  .tc-att-c { flex-wrap: wrap; row-gap: 2px; }
  /* The name keeps its width and the reason, when there is one, drops
     under it. Letting them share a line squeezed "shot.png" down to
     "shot…" to make room for the sentence explaining it, which is the
     wrong thing to lose. The chip itself stays the width of its name:
     stretched across the box it read as a second field, and the name
     inside it was centred and cut to a letter. */
  /* Against the viewport, not the chip: a percentage of a chip that is
     itself the width of its name resolves to next to nothing. */
  .tc-att-c .n { flex: 0 1 auto; max-width: calc(100vw - 120px); }
  .tc-att-c .w { flex: 1 0 100%; white-space: normal; order: 3; }
  /* Ordered rather than reordered in the markup: the close button reads
     after the name for a screen reader, which is the order it is in. */
  .tc-att-c button.x { margin-left: auto; order: 2; }
}
.tc-att-c.skip .w { color: var(--ochre); }
/* button.x, not button: the name is a button too (it opens the preview),
   and this rule's 20px width once reached it and cut "lecture-notes.pdf"
   down to a letter and an ellipsis. */
.tc-att-c button.x {
  font: inherit; line-height: 1; cursor: pointer; flex: none;
  width: 20px; height: 20px; border-radius: 6px;
  color: var(--muted-2); background: transparent; border: 0;
}
.tc-att-c button.x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.tc-att-s[hidden] { display: none; }
.tc-att-s { margin: 0; padding: 9px 12px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tc-att-s b { color: var(--ink); font-weight: 700; }
.tc-att-s .over { color: var(--ochre); }

/* ---- searching the row, and the rest of it ---------------------- */
.tc-pick-b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .tc-pick { flex-wrap: wrap; }
  .tc-pick > .tc-lab { flex: 1 0 100%; }
  .tc-pick-b { width: 100%; flex-wrap: nowrap; }
}
.tc-find[hidden] { display: none; }
/* The field is the box's; the ring and the ground belong to .tc-find-b so
   the magnifier sits inside them rather than beside them. */
.tc-find {
  font: inherit; font-size: 16px; /* 16px, or a phone zooms on focus */
  flex: 1 1 auto; width: 100%; min-width: 0; height: 42px; padding: 0;
  color: var(--ink); background: transparent; border: 0; border-radius: 0;
}
.tc-find::placeholder { color: var(--muted-2); }
.tc-find:focus-visible { outline: none; }
/* Chrome and Safari draw their own clear button; it is the one control
   here that is not the site's, so it is toned to match. */
.tc-find::-webkit-search-cancel-button { filter: invert(.55); cursor: pointer; }

/* ---- the tray: what they have picked ---------------------------
   A filter can take a ticked card off the row - that is the whole point of
   one that unticks nothing - so the selection has to be readable
   somewhere that no filter touches. Each chip takes its own tool back
   out, which is the only way to untick one the lit filter is hiding. */
/* WHAT A PICKED CARD DOES, WHEN IT IS NOT WHAT THE ROW IMPLIES.
   Sits between the line-up and the Compare button, which is the last thing
   read before anything is sent. Quieter than the tray above it - it is a
   fact about one pick, not the line-up - and louder than the caveat at the
   top of the row, because it is about a decision already made.

   [hidden] FIRST, and not for the first time on this page: a display rule
   below it wins otherwise and the note sits there empty. */
.tc-picked[hidden] { display: none; }
.tc-picked {
  display: block;
  margin: 10px 0 0; padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ochre) 55%, var(--tc-edge));
  background: color-mix(in srgb, var(--ochre) 9%, var(--ink-2));
  font-size: 13px; line-height: 1.5; color: var(--ink);
}

/* ---- the line-up -------------------------------------------------
   Under the task, over the button, with a rule between it and the box:
   the second half of the same decision rather than a box of its own.
   It used to be a tinted tray that appeared once something was picked;
   it is the row that is always there now, because "+ Add AI" at the end
   of it is the way in. */
.tc-tray[hidden] { display: none; }
.tc-tray {
  display: block; margin: 22px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--tc-edge);
}
.tc-tray-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.tc-tray-l { font-size: 17px; font-weight: 700; color: var(--ink); }
.tc-tray-r { display: flex; flex-wrap: wrap; gap: 8px; }
/* display: contents so the picked chips and the "+ Add AI" chip after
   them share one wrapping row, while the picked ones keep a container
   of their own for the script to fill. */
.tc-tray-c { display: contents; }
.tc-chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: 11px;
  color: var(--ink); background: var(--ink-2);
  border: 1px solid var(--tc-edge);
}
.tc-chip:hover { border-color: var(--teal); }
.tc-chip:disabled { cursor: default; opacity: .6; }
.tc-chip:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 2px; }
/* The product's own mark, the same file the card uses. */
.tc-chip-i { width: 18px; height: 18px; flex: none; object-fit: contain; }
.tc-chip-add { color: var(--teal-tx); border-color: var(--teal-tx); background: transparent; }
.tc-chip-add:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); }
.tc-chip-plus { font-size: 18px; font-weight: 400; line-height: 1; }

/* ---- the categories a card belongs to -------------------------
   A card is one card whatever it is filed under, and these say what that
   is. Every one of them is a filter that will bring this card back, which
   is why they are written from the same list the filters read. */
.tc-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 7px 0 0; max-width: 100%;
}
.tc-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  line-height: 1; padding: 4px 6px; border-radius: 5px;
  color: var(--muted); background: rgba(255,255,255,.06);
  border: 1px solid var(--tc-edge);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; box-sizing: border-box;
}
.tc-tag-n { color: var(--muted-2); }
.tc-tool.on .tc-tag { color: var(--ink); border-color: color-mix(in srgb, var(--teal) 55%, var(--tc-edge)); }
/* .tc-rest, not .tc-more: an answer card's "read the whole thing" button
   is already .tc-more, and naming this one the same made a locator for
   that button find this one instead. Two things called more. */
.tc-rest { display: flex; justify-content: center; margin: 12px 0 0; }
.tc-rest:has(> [hidden]) { display: none; }
.tc-nil[hidden] { display: none; }
.tc-nil { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

.tc-pick[hidden] { display: none; }
.tc-pick {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 20px 0 10px;
}

/* The line standing in for the picker until a category is chosen. Quiet:
   it is an instruction, not a warning, and the chips it points at are
   directly above it. */
.tc-none[hidden] { display: none; }
.tc-none {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
/* SIX ACROSS, EQUAL, AND SIX IS WHAT THE ROW HOLDS.

   This counted columns once, then stopped: six fixed tracks could not
   survive a row whose length nobody controlled, and nine cards in a grid
   built for six squeezed nine logos into it. auto-fill replaced it and
   wrapped instead of counting.

   What makes counting safe again is that the row is capped. ROW_SHOWN in
   trycompare.js is six, so a category opens with exactly one row of these
   and the fold falls on a row boundary rather than three cards into a
   second line. The cases that overrun it all still wrap: a ticked card
   held on screen past the cap, a search showing every match, "Show all"
   showing thirty. They wrap into rows of six, every card the same width as
   every other.

   auto-fill could not do that. It divides whatever width it is given by a
   146px floor, so the number across changed with the window - and since
   step two was widened to the screen it was reaching nine, which left a
   five-card row sitting in four columns of empty grid.

   THE STEPS DOWN ARE THE CARD'S FLOOR, not taste. 140px is about what a
   card needs for a logo, a name and a tag; the breakpoints are where six,
   four and three of them stop clearing it against the column's own width
   (the viewport less its gutter). Below 520 it is two, which it already
   was. */
.tc-tools[hidden] { display: none; }
.tc-tools {
  display: grid; gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* EVERY CARD ON A ROW IS THE SAME HEIGHT. This read `start` for a
     while, because back when one press opened one card the four beside
     it were left standing as empty columns the same height as the open
     one. A press opens the whole row now, so the four beside it are open
     too - and five boxes of five different heights, each with its green
     strip at a different place down the page, is harder to read across
     than five that end level. Stretch, and the strip is pinned to the
     foot of each. */
  align-items: stretch;
}
@media (max-width: 940px) { .tc-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 630px) { .tc-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* [hidden] FIRST, and on its own line.
   A card for the wrong kind of category is hidden by setting .hidden on
   it, and `display: flex` below would otherwise win that fight - which
   is exactly what happened: the voices appeared under Video, Audio &
   Media with all ten text cards still sitting above them. The same trap
   caught .tc-cav, and it is worth the extra line in both places. */
/* A card that offers a choice of model is wrapped, and the wrapper is
   what the grid lays out. It looks like the card it holds: the card
   gives up its own edge and ground to the wrapper and fills the top of
   it, and the chooser sits along the bottom. A card with one option is
   never wrapped, so the two shapes have to match. */
/* THE CARD, not just any hidden child. This read `:has(> [hidden])`
   while the wrapper only ever held a card and a model chooser, and it was
   right until the details panel arrived - which is hidden whenever it is
   closed, which is almost always. Every card on the row disappeared. */
.tc-tool-w:has(> .tc-tool[hidden]) { display: none; }
.tc-tool-w {
  display: flex; flex-direction: column;
  border: 1px solid var(--tc-edge); border-radius: 13px;
  background: var(--ink-2); overflow: hidden;
}
.tc-tool-w > .tc-tool { border: 0; border-radius: 0; background: transparent; flex: 1 1 auto; }
/* CLOSED, the card fills the box, so the disclosure sits on the foot of
   every card on the row. OPEN, it stops growing: an auto margin only
   gets the space a flex-grow has not already taken, and with the card
   still growing the strip at the foot never moved and the headings above
   it were pushed down a different distance on every card. */
.tc-tool-w.tc-open > .tc-tool { flex: 0 0 auto; }
.tc-tool-w:has(> .tc-tool.on) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 13%, var(--ink-2)); }
.tc-tool-w:has(> .tc-tool.off) { opacity: .45; }
/* WHAT THE TOOL IS FOR, ON THE CARD.
   One line under the company name, clamped to two so a long one cannot
   make its card taller than the one beside it. */
.tc-tool-b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 5px 0 0; font-size: 12px; line-height: 1.42; color: var(--muted);
  font-weight: 500;
}
.tc-tool.on .tc-tool-b { color: var(--ink); }

/* THE DISCLOSURE. A line of text with a rule above it, like the model
   chooser, so it reads as part of the card rather than as a second
   control competing with it. */
.tc-tool-x {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  color: var(--ink); background: transparent;
  border: 0; border-top: 1px solid var(--tc-edge); border-radius: 0;
  text-align: left;
  /* ONE LINE. A 146px column wrapped "What can this tool do?" onto two
     and put the chevron under the words, which made every closed card
     taller than it needed to be. */
  white-space: nowrap;
}
.tc-tool-x > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tc-tool-x:hover { background: rgba(255,255,255,.05); }
.tc-tool-x:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.tc-tool-x-i { font-size: 10px; line-height: 1; color: var(--muted); }

/* THE PANEL. [hidden] first and on its own line - the third time this
   trap has been worth a comment in this file: a display rule below wins
   otherwise and every card ships with its details already open. */
.tc-tool-d[hidden] { display: none; }
/* AND IT IS THE PANEL THAT GROWS. Something has to absorb the height
   between the shortest card on a row and the tallest, and whatever
   absorbs it is where the empty space shows. Put it on the strip and the
   model menu was left stranded in the middle of the card with a rule
   over it and a hand's width of nothing underneath. Put it here and the
   space falls under the last line of writing, where a margin looks like
   a margin - and the menu and the strip stay together at the foot. */
.tc-tool-d {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1 1 auto; padding: 0 12px 12px; text-align: left;
}

/* GREEN FOR WHAT IT DOES, RED FOR WHAT IT DOES NOT. Stated as hex rather
   than borrowed from the palette: --teal is the site's accent and does
   double duty as "selected", so a tick drawn in it reads as a state
   rather than as a yes. These two only ever mean yes and no. */
.tc-fact { margin: 12px 0 0; }
.tc-fact-h {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink);
}
/* .tc-fi, NOT .tc-ico. These were .tc-ico, and so is the 30px square
   button that hearts an answer further down this file - one class, two
   components, and the button's rule is the later of the two. It won
   every property they share: the tick and the cross were drawn 30px
   wide, 8px-cornered, transparent and grey, which is to say the green
   and the red this block exists to state never reached the page at all.
   A name of its own is the whole fix, and the only way it stays fixed. */
.tc-fi {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  font-size: 12.5px; line-height: 1; font-weight: 700;
}
.tc-fi-yes { background: rgba(52,199,142,.26); color: #4cd79e; }
.tc-fi-no  { background: rgba(232,90,80,.26);  color: #f07068; }
.tc-fi-use { background: rgba(240,180,70,.26); color: #f3c061; }

.tc-fact-l { list-style: none; margin: 0; padding: 0; }
.tc-fact-i {
  display: flex; gap: 7px; align-items: flex-start;
  margin: 0 0 4px; font-size: 12px; line-height: 1.42; color: var(--muted);
}
/* Big enough to read as a tick rather than as punctuation, and with a
   line box the height of the line of text it stands beside so the two
   sit on the same baseline. */
.tc-fact-m { flex: 0 0 auto; font-size: 12.5px; line-height: 1.36; font-weight: 700; }
.tc-fact-yes .tc-fact-m { color: #34c78e; }
.tc-fact-no .tc-fact-m  { color: #e85a50; }
.tc-fact-p { margin: 0; font-size: 12px; line-height: 1.42; color: var(--muted); }

/* WHETHER THIS PAGE CAN RUN IT - a different question from everything
   above, and drawn as one: a tinted strip at the foot of the card.
   Green when it answers here, amber when it does not. Amber rather than
   red on purpose: a tool this page cannot run is not a bad tool, and the
   colour should not say it is. */
/* [hidden] FIRST. Fourth time in this file, and it earns the line every
   time: the strip opens and closes with the panel above it, and
   `display: flex` below would otherwise keep it on screen under a shut
   card. */
.tc-run-box[hidden] { display: none; }
.tc-run-box {
  display: flex; gap: 9px; align-items: flex-start;
  /* THE LAST CHILD OF THE CARD, not of the panel. Inside the panel it
     ended wherever that card's bullets ran out, and on a card with a
     model menu it then sat a menu's height higher again - five strips at
     five heights. Out here it is the last thing in the box, under a
     panel that has taken all the slack, so every strip on the row ends
     level with the card it is in. */
  margin: 0 8px 12px; padding: 9px 10px; border-radius: 9px;
  /* border-box, because the height levelling the page does reads this
     box off the screen and writes it back as a min-height. Content-box
     would hand back a figure 20px short of what it measured. */
  box-sizing: border-box;
  border: 1px solid transparent;
}
.tc-run-i {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  font-size: 11.5px; line-height: 1; font-weight: 700;
}
.tc-run-t { display: flex; flex-direction: column; gap: 2px; }
.tc-run-t b { font-size: 12px; font-weight: 700; }
.tc-run-t span { font-size: 11.5px; line-height: 1.38; color: var(--muted); }
.tc-run-on {
  background: rgba(52,199,142,.12);
  border-color: rgba(52,199,142,.38);
}
.tc-run-on .tc-run-i { background: rgba(52,199,142,.22); color: #34c78e; }
.tc-run-on .tc-run-t b { color: #34c78e; }
.tc-run-off {
  background: rgba(240,180,70,.11);
  border-color: rgba(240,180,70,.36);
}
.tc-run-off .tc-run-i { background: rgba(240,180,70,.22); color: #f0b446; }
.tc-run-off .tc-run-t b { color: #f0b446; }

/* The company's own front door, one row above the disclosure and drawn
   to match it exactly - same height, same padding, same rule above - so
   that the links across a row sit on one line and the disclosures under
   them sit on the next. A link that looked like a link would have broken
   that: this is a line of text in somebody else's box, not a button
   competing with the card. */
.tc-tool-go {
  font: inherit; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  color: var(--muted); background: transparent; text-decoration: none;
  border-top: 1px solid var(--tc-edge);
  white-space: nowrap;
}
.tc-tool-go > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tc-tool-go:hover { color: var(--ink); background: rgba(255,255,255,.05); text-decoration: underline; }
.tc-tool-go:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.tc-tool-go-i { font-size: 11px; line-height: 1; color: var(--muted); }

.tc-tool[hidden] { display: none; }
.tc-tool {
  position: relative; cursor: pointer; text-align: left;
  font: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 13px 13px; border-radius: 13px;
  border: 1px solid var(--tc-edge); background: var(--ink-2);
}
.tc-tool:hover { border-color: var(--teal-dk); }
.tc-tool:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 2px; }
.tc-tool-i {
  width: 26px; height: 26px; margin: 0 0 10px;
  object-fit: contain; flex: none;
}
/* A company with no mark in the site's logo set gets its initials rather
   than somebody else's logo standing in for it. */
.tc-tool-ini {
  display: grid; place-items: center;
  border-radius: 7px; background: rgba(255,255,255,.07);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink);
}
.tc-tool-n { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tc-tool-s { font-size: 12px; color: var(--muted-2); }

/* The circle, empty until the card is on. It is a second signal rather than
   the only one, because a ring alone is a lot to ask of a reader deciding
   which of six squares is live. */
.tc-tool-tick {
  position: absolute; top: 12px; right: 12px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--muted-2); background: transparent;
}
.tc-tool.on { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 13%, var(--ink-2)); }
.tc-tool.on .tc-tool-tick {
  border-color: var(--teal); background: var(--teal);
  box-shadow: inset 0 0 0 2px var(--ink-2), inset 0 0 0 9px var(--teal);
}
.tc-tool.off { opacity: .45; cursor: not-allowed; }
.tc-tool.off:hover { border-color: var(--rule); }

/* ---- putting the answers away ----------------------------------
   Centred under the grid, quiet, and only there once there is something
   to put away. */
.tc-fold { display: flex; justify-content: center; margin: 14px 0 0; }
.tc-fold:has(> [hidden]) { display: none; }


.tc-note {
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid var(--rule); border-left: 3px solid var(--ochre);
  border-radius: 9px; background: rgba(255,255,255,.04);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.tc-note b { color: var(--ink); }
.tc-note code { font-family: var(--mono); font-size: 12px; color: var(--ochre); }

/* ---- results ---------------------------------------------------
   The answers are the product. Everything else on a card - who wrote
   it, how long it is, the way out to the company - is a caption on a
   piece of writing, and is sized like one.

   What was here before put a 26px logo, a name, a model id, a heart,
   a clipped block of pre-wrap text, a "Read full answer" link and two
   worded buttons into a 288px column, three across. The answer was
   the fifth thing on the card and the narrowest thing on the page.
   Two across at this width gives it about 62 characters a line, which
   is the measure prose is set at everywhere else on this site. */
.tc-out { margin: 18px 0 0; }
/* ---- THE ANSWERS TAKE THE SCREEN ------------------------------
   Everything above this - the task box, the chips, the row of tools -
   is a form, and a form reads better in a column 980px wide. What comes
   back is not a form: it is four answers that have to be read against
   each other, and on a 1586px screen they were sitting in 940px of it
   with 320px of empty page down each side. Two columns of 463px each,
   where a table in an answer had nowhere to go.
 *
   SO ONLY THIS HALF BREAKS OUT, and it carries the whole result with it
   - the tabs, the task bar and the cards all line up at the same width,
   which is what makes it read as one thing rather than as a wide box
   dropped into a narrow page.
 *
   SINCE STEP TWO'S COLUMN WAS WIDENED TO THIS SAME SUM, the breakout below
   resolves to the width the parent already has and moves nothing. It stays
   because it is what that width is measured from — the column up there is
   matched to the answers, not the other way round — and because it is what
   still holds the answers out if the column above ever narrows again.
 *
   NOT 100vw, AND NOT A NEGATIVE MARGIN. 100vw counts the scrollbar on a
   desktop and a negative margin of half of it overflows the page by
   whatever that scrollbar is wide - which is a horizontal scroll on the
   one layout this is meant to improve. Half the gutter is wider than
   any scrollbar, so subtracting 48 keeps it inside whatever 100vw turns
   out to mean.
 *
   AND ONLY ABOVE 1100px. Below it the column IS the screen, give or
   take the page's own gutters, so a breakout there would make the
   answers narrower than the question that produced them. */
@media (min-width: 1100px) {
  .tc-out {
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(1520px, calc(100vw - 48px));
  }
  .tc-cards { gap: 20px; }
}

/* ---- how far through the run it is -----------------------------
   A determinate bar, because the number behind it is determinate: how
   many of the cards have come back, out of how many were asked. It
   steps once per arrival rather than creeping, and it is gone the
   moment the run ends - a bar reading 100% beside ten answers is
   something to look at rather than something to know. */
.tc-prog { margin: 0 0 14px; }
.tc-prog-t {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 7px; font-size: 12.5px;
}
.tc-prog-l { color: var(--muted); }
.tc-prog-n {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--teal-tx); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tc-prog-bar {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.09);
}
.tc-prog-f {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--teal-tx));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
/* The transition moves between two numbers that were both true, so with
   motion turned down the honest thing is to jump, not to crawl. */
@media (prefers-reduced-motion: reduce) { .tc-prog-f { transition: none; } }
.tc-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 13px; }
.tc-bar .tc-spacer { margin-left: auto; }
.tc-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; }
.tc-seg button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border: 0; background: transparent; color: var(--muted);
}
.tc-seg button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.tc-seg button:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: -2px; }

/* One column on a phone, two from the width where two still leave a
   readable measure. Never three: a third column takes 90 characters a
   line down to 40, and at 40 the reader is scanning a column of scraps
   rather than reading. */
/* start, not stretch. A card that did not answer has three lines in it,
   and stretching it to match the card beside it leaves a box of empty
   space where an answer should be - which reads as something broken
   rather than as one of ten being busy. Cards that did answer are all
   clipped to the same height anyway, so the row still lines up. */
.tc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 720px) {
  .tc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tc-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--card); padding: 15px 17px 13px;
}
.tc-card.fav { border-color: var(--teal-tx); box-shadow: 0 0 0 1px var(--teal-tx) inset; }
/* The card that just arrived, marked for a moment. The grid reorders as
   answers land - fastest to the top - and a reader who looks up to find
   things moved should be able to see what moved them. It fades on its
   own; nothing here is a control. */
.tc-card.just { animation: tc-land 1.6s ease-out; }
@keyframes tc-land {
  0%   { border-color: var(--teal-tx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 30%, transparent); }
  70%  { border-color: var(--teal-tx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
  100% { border-color: var(--rule);    box-shadow: 0 0 0 0 transparent; }
}
.tc-card.just.fav { animation: none; }
@media (prefers-reduced-motion: reduce) { .tc-card.just { animation: none; } }
/* Opened, it takes the whole row. The point of opening an answer is to
   read it, and reading it in half a column when the other half is a card
   nobody is looking at is the wrong half of the screen. */
@media (min-width: 720px) {
  .tc-card.open { grid-column: 1 / -1; }
  .tc-card.open .tc-body { max-width: 74ch; }
}

/* ---- WHOSE ANSWER THIS IS, AT THE SIZE OF THE QUESTION ----------
   The mark and the name were 28px and 14.5px: the size they wanted when
   a card was 463px wide and there were ten of them down a narrow column.
   The cards take the screen now and hold 753px each, and at that width
   the one thing a reader looks for first - whose answer am I reading -
   was the smallest thing on the card, smaller than the body text under
   it. A logo is also the fastest way to find a company on a page of six
   answers, and it cannot do that job at the size of a favicon.
 *
   PADDING INSIDE THE TILE, which is new. At 28px the mark filled the
   square and that read as a logo; at 52px, edge to edge, it reads as a
   picture that has been stretched. The tile is the shape, the mark sits
   inside it. */
.tc-card-top { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
.tc-logo {
  width: 52px; height: 52px; flex: none; border-radius: 13px; padding: 7px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.07); border: 1px solid var(--rule);
}
.tc-logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-logo span { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--teal-dk); }
.tc-card-n {
  font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15;
  color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One column on a phone and the name sharing the row with three icon
   buttons: at 26px "Gemini Notebook" runs out of row and ends in an
   ellipsis, which is the one thing a name must not do. */
@media (max-width: 620px) {
  .tc-card-top { gap: 10px; }
  .tc-logo { width: 40px; height: 40px; border-radius: 11px; padding: 5px; }
  .tc-logo span { font-size: 15px; }
  .tc-card-n { font-size: 19px; }
}

/* Two icons, not four words. Both are actions on this one answer, so
   they belong beside its name rather than in a row of buttons at the
   foot competing with the way out to the company. */
.tc-acts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.tc-ico {
  cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--muted-2);
}
.tc-ico:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--tc-edge); }
.tc-ico:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 2px; }
.tc-ico:disabled { opacity: .3; cursor: not-allowed; }
.tc-heart[aria-pressed="true"] { color: var(--rust); border-color: var(--rust); background: rgba(251,113,133,.12); }
.tc-heart:hover:not(:disabled) { color: var(--rust); border-color: var(--rust); }
.tc-copy.done { color: var(--teal-tx); border-color: var(--teal-tx); }

/* ---- the answer ------------------------------------------------ */
.tc-body { font-size: 14.5px; line-height: 1.65; color: var(--ink); word-wrap: break-word; }
.tc-body > :first-child { margin-top: 0; }
.tc-body > :last-child { margin-bottom: 0; }
.tc-body p { margin: 0 0 .85em; }
.tc-body h4, .tc-body h5, .tc-body h6 {
  font-family: var(--body); color: var(--ink);
  margin: 1.35em 0 .5em; line-height: 1.3; letter-spacing: -.01em;
}
.tc-body h4 { font-size: 15.5px; font-weight: 700; }
.tc-body h5 { font-size: 14.5px; font-weight: 700; }
.tc-body h6 { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.tc-body .tc-list { margin: 0 0 .85em; padding-left: 1.35em; }
.tc-body .tc-list li { margin: 0 0 .3em; }
.tc-body .tc-list li::marker { color: var(--teal-tx); }
.tc-body ol.tc-list li::marker { font-variant-numeric: tabular-nums; font-weight: 700; }
.tc-body strong { font-weight: 700; color: var(--ink); }
.tc-body em { font-style: italic; }
.tc-body code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(255,255,255,.07); border: 1px solid var(--rule-soft);
  border-radius: 5px; padding: .08em .35em; color: var(--ochre);
}
.tc-pre {
  margin: 0 0 .85em; padding: 11px 13px; overflow-x: auto;
  background: var(--ink-2); border: 1px solid var(--rule); border-radius: 10px;
}
.tc-pre code {
  background: none; border: 0; padding: 0; color: var(--ink);
  font-size: 12.5px; line-height: 1.6; white-space: pre;
}
.tc-quote {
  margin: 0 0 .85em; padding: 2px 0 2px 13px;
  border-left: 3px solid var(--teal); color: var(--muted);
}
.tc-quote > :last-child { margin-bottom: 0; }
.tc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2em 0; }
.tc-body .tc-a { color: var(--teal-tx); text-underline-offset: 3px; }
.tc-body .tc-a:hover { color: var(--ink); }
/* Its own scroller, so a wide table cannot push the grid sideways. */
.tc-tblw { margin: 0 0 .85em; overflow-x: auto; }
.tc-tbl { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.tc-tbl th, .tc-tbl td {
  border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top;
}
.tc-tbl th { background: rgba(255,255,255,.05); font-weight: 700; color: var(--ink); white-space: nowrap; }
.tc-tbl td { color: var(--muted); }

/* Clipped by height rather than by line count, because a card holding a
   table and a list has no line count to clamp - and the clipped box
   SCROLLS, so the rest of the answer is a scroll away inside it rather
   than behind a button. The page does not move while somebody reads.
   The fade is a mask on the text itself, shown only while there is more
   below (the script lifts it at the bottom): a gradient panel laid over
   it would have to know the card's background, and the card's background
   is a token that can move. No cap on a code block inside it any more:
   one scrolling box inside another is a trap, and the sentence after the
   code is a scroll away now rather than past the clip. */
.tc-body.clip {
  max-height: 20.5em; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
  padding-right: 6px;
}
.tc-body.clip::-webkit-scrollbar { width: 8px; }
.tc-body.clip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; }
.tc-body.clip:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 4px; border-radius: 4px; }
.tc-body.clip.faded {
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
          mask-image: linear-gradient(#000 72%, transparent 100%);
}
/* THE CARD'S OWN BUTTON, and the brightest thing on it.
   It was an underlined text link sitting on a row of its own above the
   footer: the most useful control on the card, drawn as the quietest
   thing on it, while two outlined buttons that lead OFF the page sat
   below in colour. Reading the answer is what somebody is here to do,
   so it is filled, it is first in the footer row, and it wears the
   accent the rest of the step wears. */
.tc-more {
  flex: none; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 17px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: var(--teal); border: 1px solid var(--teal); color: #fff;
  text-decoration: none;
}
.tc-more:hover { background: var(--teal-tx); border-color: var(--teal-tx); color: #fff; }
.tc-more:focus-visible { outline: 2px solid var(--teal-dk); outline-offset: 3px; }

/* ---- where a card came from ------------------------------------
   The reader described a task upstairs and was shown these tools. The
   badge is how they read the recommendation against what the tool
   actually produced, which is the whole reason the two halves of the
   page were joined. */
.tc-rec {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin: 0 0 10px;
  color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--rule);
}
.tc-rec.top { color: #fff; background: var(--teal); border-color: var(--teal); }

/* ---- recommended, and not connected -----------------------------
   The same box a real answer sits in, so the grid stays even and this
   reads as a state rather than as a failure. It carries no text from
   any model, because there is none - inventing some would be words put
   in a company's mouth. */
.tc-card.offline { border-style: dashed; }
.tc-offline {
  display: flex; flex-direction: column; justify-content: center;
  /* Deep enough to sit alongside a card with an answer in it without
     reading as stunted, and not so deep that it becomes a hole. An
     answer clips at 20.5em; matching that exactly would make this mostly
     empty space, which looks more broken than being a little shorter. */
  min-height: 168px; padding: 4px 0;
}
.tc-offline-t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tc-offline-b { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
/* On the row of choices, before anything is run. */
/* The subtitle is the COMPANY now, so it is not coloured as a warning.
   This rule existed to tint "Live response unavailable" where the company
   name belongs; with the status moved under "Works in Compare" inside the
   card, all it did was paint Grammarly's own name amber. */
.tc-tool.guest .tc-tool-s { color: var(--muted); }

/* ---- a picture -------------------------------------------------
   Square, because every model on the row is asked for 1024x1024 and a
   grid of pictures that are not the same shape is a grid you compare
   the framing of rather than the drawing. object-fit covers the case
   where one of them ignores the size and sends something else. */
.tc-shot {
  margin: 2px 0 0; border-radius: 10px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--rule);
  aspect-ratio: 1 / 1;
}
.tc-shot-i { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- a clip ----------------------------------------------------
   Sixteen by nine, because that is the shape wan3 returns at auto_480p
   and a box of another shape would letterbox it. The browser's own
   controls, for the same reason the voice keeps them: play, scrub,
   volume, fullscreen and the keyboard handling all come free, and a
   custom one subtly wrong on a page about fair comparison is worse than
   a plain one. */
.tc-clip {
  display: block; width: 100%; margin: 2px 0 0;
  border-radius: 10px; background: #000;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 9; object-fit: contain;
}

/* ---- a voice ---------------------------------------------------
   The browser's own player, given the card's width and left otherwise
   alone. A custom transport would mean rebuilding play, scrub, volume
   and the keyboard handling that come free, and getting one of them
   subtly wrong on a page whose job is to be compared fairly. */

/* The exception, beside the answer it is about. Quiet - it is a footnote,
   not a warning - but on the card rather than in a disclosure below the
   row, because it explains the answer directly above it. */
.tc-unbriefed {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--rule);
}
.tc-unbriefed b { color: var(--ink); font-weight: 700; }

/* ---- the quiet line under it ----------------------------------- */
.tc-card-foot {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--rule-soft);
}

/* ---- stepping back through one card's answers -----------------
   A follow-up refreshes the answer above rather than stacking a
   transcript below it, so this is the only way back to what the card
   said before. It sits directly under the body it belongs to and above
   the footer, because it is part of reading the answer rather than one
   of the ways off the card.

   Quiet by default and quiet when it cannot move: a disabled Back on
   the first answer is a signal that there is nothing behind this one,
   which is worth more than the button disappearing and the row jumping
   a few pixels every time somebody steps through it. */
.tc-hist {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--rule-soft);
}
.tc-hist-b { flex: none; height: 30px; padding: 0 11px; font-size: 12px; }
.tc-hist-b[disabled] { opacity: .45; cursor: default; }
/* The question that produced the answer on screen, which is the half
   that says where the reader is. It takes the slack so the count and
   the forward button stay at the far end, and it truncates rather than
   wrapping the row onto two lines for a long follow-up. */
.tc-hist-n {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-hist-c {
  flex: none; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}

/* ---- the answers put away, and the way back -------------------
   Hide takes one card off the grid. Nothing is thrown away and nothing
   is re-run; this line is how it comes back, and it names the card so a
   reader with two hidden knows which button is which. Above the grid,
   so it does not sit in the gap the card left. */
.tc-hidden {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 11px;
  border: 1px dashed var(--tc-edge); background: var(--ink-2);
}
.tc-hidden-n { font-size: 12.5px; color: var(--muted); }
.tc-hidden-b { flex: none; height: 30px; padding: 0 11px; font-size: 12px; }
/* Last on the footer row, after the ways off the card: putting an
   answer away is the thing a reader does least often of the four, and
   .tc-out-go already takes the slack before it. */
.tc-card-foot .tc-hide { flex: none; height: 38px; padding: 0 14px; font-size: 13px; }
.tc-meta {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
  font-size: 11.5px; color: var(--muted-2);
}
/* The second button of the pair, outlined in the same accent the first
   one is filled with - a hierarchy rather than two greys. */
.tc-card-foot .tc-out-go {
  margin-left: auto; flex: none;
  height: 38px; padding: 0 15px; font-size: 13px; font-weight: 700;
  background: transparent; border-color: var(--teal); color: var(--teal-dk);
}
.tc-card-foot .tc-out-go:hover {
  color: var(--ink); border-color: var(--teal-tx);
  background: color-mix(in srgb, var(--teal) 20%, transparent);
}

/* Two ways off the card and they go to different places, so they sit
   together at the far end with the count at the near one. The pair wraps
   rather than squeezing: three cards across a phone is a narrow footer,
   and a truncated "Claude profile" reads as a bug. */
.tc-card-foot { flex-wrap: wrap; row-gap: 8px; }
/* The third thing on the row and the quietest, deliberately: it is this
   site's own page about the company, worth having and not what the card
   is for. Same height as the pair so the row is one line rather than
   three sizes of button. */
.tc-card-foot .tc-out-prof {
  margin-left: auto; flex: none;
  height: 38px; padding: 0 14px; font-size: 13px; font-weight: 600;
  background: transparent; border-color: var(--tc-edge); color: var(--muted);
}
.tc-card-foot .tc-out-prof:hover { color: var(--ink); border-color: var(--teal-dk); background: rgba(255,255,255,.07); }
/* The profile took the auto margin, so the second button stops claiming
   one - two of them and the free space splits between the pair. */
.tc-card-foot .tc-out-prof + .tc-out-go { margin-left: 0; }

/* ---- the reader's own version ----------------------------------
   The box is the answer's own shape: same type, same measure, same
   colour, so rewriting a paragraph reads as rewriting a paragraph
   rather than as filling in a form. */
.tc-edit {
  font: inherit; font-size: 14.5px; line-height: 1.65; color: var(--ink);
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 11px 13px; border-radius: 11px;
  background: var(--ink-2); border: 1px solid var(--tc-edge);
}
.tc-edit:focus-visible { outline: none; border-color: var(--teal-dk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.tc-edit-r {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 0;
}
.tc-edit-n { font-size: 11.5px; line-height: 1.5; color: var(--ochre); }
.tc-edit-r .tc-meta { margin-left: auto; }
.tc-edit-u { height: 30px; padding: 0 11px; font-size: 12.5px; }
.tc-edit-u[hidden] { display: none; }

/* ---- talking back --------------------------------------------
   Inside the card and indented from its edge, because it is this
   card's conversation and not a second section under the grid. */
.tc-thread {
  margin: 14px 0 0; padding: 13px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.tc-thread-h {
  font-family: var(--body); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 11px; color: var(--muted-2);
}
.tc-turn { display: grid; gap: 9px; margin: 0 0 13px; }
/* What the reader said, set apart by a rule down its left rather than by
   a bubble: a chat window in the middle of a comparison card would be a
   third visual language on the same page. */
.tc-turn-q {
  padding-left: 11px; border-left: 2px solid var(--teal-tx);
}
.tc-turn-q p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.tc-turn-a { padding-left: 11px; border-left: 2px solid var(--rule); }
.tc-turn-a .tc-body,
.tc-turn-a > p { font-size: 13.5px; line-height: 1.6; }
.tc-turn-a .tc-meta { margin-top: 7px; }
.tc-turn-w {
  display: block; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted-2);
}
.tc-turn-e { margin: 0 0 9px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.tc-turn-r { height: 30px; padding: 0 11px; font-size: 12.5px; }
.tc-turn-a .tc-status { margin: 0; }

.tc-ask-r { display: flex; align-items: flex-end; gap: 9px; }
.tc-ask {
  font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; resize: vertical;
  padding: 9px 11px; border-radius: 10px;
  background: var(--ink-2); border: 1px solid var(--tc-edge);
}
.tc-ask::placeholder { color: var(--muted-2); }
.tc-ask:focus-visible { outline: none; border-color: var(--teal-dk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.tc-ask-b { flex: none; height: 38px; }
.tc-ask-n { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); }

/* ---- waiting, and not answering -------------------------------- */
.tc-skel { display: grid; gap: 9px; padding: 3px 0 2px; }
.tc-skel-l { height: 11px; border-radius: 5px; background: rgba(255,255,255,.07); animation: tc-shim 1.5s ease-in-out infinite; }
.tc-skel-l.w1 { width: 96%; } .tc-skel-l.w2 { width: 82%; } .tc-skel-l.w3 { width: 62%; }
.tc-skel-l:nth-child(2) { animation-delay: .12s; }
.tc-skel-l:nth-child(3) { animation-delay: .24s; }
.tc-skel-l:nth-child(4) { animation-delay: .36s; }
@keyframes tc-shim { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.tc-status { margin: 12px 0 0; font-size: 12.5px; color: var(--muted-2); }
@media (prefers-reduced-motion: reduce) { .tc-skel-l { animation: none; opacity: .7; } }

/* One card not answering is not an emergency - the other nine are sitting
   beside it with answers in them. So it reads as a note, in the same
   muted type as everything else on the card, with the one control that
   does anything about it. */
.tc-card.failed { border-style: dashed; }
.tc-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 2px 0 2px; }
.tc-fail-t { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tc-retry { height: 32px; font-size: 12.5px; }

.tc-sample {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0A0912; background: var(--ochre);
  padding: 3px 8px; border-radius: 999px; margin: 0 0 10px;
}

/* The finalists panel's styles stood here. It lifted the two hearted
   answers of three into a side-by-side of their own; the grid is two
   cards wide now and one heart keeps one of them, so both the panel and
   these are gone. */

.tc-live { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.tc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- your task, over the answers ------------------------------
   The answers are the centre of the page and they answer a question that
   is now several hundred pixels up. Three long replies with nothing over
   them are three essays; the same three under the sentence that produced
   them are a comparison. */
.tc-yours {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--tc-edge); border-left: 3px solid var(--teal);
  border-radius: 12px; background: rgba(255,255,255,.03);
}
.tc-yours-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); flex: none;
}
.tc-yours-t {
  margin: 0; flex: 1 1 320px; min-width: 0;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.tc-yours-f { flex: none; font-size: 11.5px; color: var(--muted-2); }

/* The response time, under the name it belongs to. */
.tc-card-ms {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .tc-yours { flex-direction: column; gap: 6px; }
  /* The task's paragraph has a flex basis of 320px for the row it shares
     with its label on a desktop. In a column that basis is a HEIGHT, so
     on a phone two lines of task sat in a box 320px tall. The paragraph
     is as tall as its words here. */
  .tc-yours-t { flex: 0 0 auto; }
}

/* ---- the Right AI Answer ------------------------------------------
   The site's own answer, so it is drawn as the prominent thing under the
   cards: the accent edge, a faint wash of it, and the answer itself in
   the same type as a card's. */
.tc-synth {
  margin: 18px 0 0; padding: 24px 26px 20px; border: 1px solid var(--teal); border-radius: 18px;
  background: linear-gradient(180deg, rgba(109,74,255,.14), rgba(109,74,255,.04));
  box-shadow: 0 0 0 1px rgba(109,74,255,.18), 0 18px 48px rgba(0,0,0,.22);
}
.tc-synth-hd { display: flex; align-items: center; gap: 10px; }
.tc-synth-mark { font-size: 22px; line-height: 1; color: var(--teal-tx); }
.tc-synth-h { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.tc-synth-sub { margin: 6px 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 74ch; }
.tc-synth-wait { color: var(--ink); }
.tc-synth-err { color: #ff8a8a; }
.tc-synth-b { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.tc-synth-b:hover:not(:disabled) { background: var(--teal-dk); border-color: var(--teal-dk); }
/* The Right AI Answer scrolls inside its box the same way, a little
   taller because it is the one answer most readers came for. */
.tc-synth-body.clip { max-height: 26em; padding-right: 14px; }
.tc-synth-more { order: -1; }
.tc-synth-body { padding: 18px 20px; border: 1px solid var(--tc-edge); border-radius: 14px; background: rgba(0,0,0,.18); font-size: 15px; }
.tc-synth-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.tc-synth-n { font-weight: 700; color: var(--ink); }
.tc-synth-from { min-width: 0; }
.tc-synth-src { color: var(--ink); }
.tc-synth-copy { margin-left: auto; }
.tc-synth-copy.done { border-color: var(--teal); color: var(--teal-tx); }
@media (max-width: 620px) {
  .tc-synth { padding: 16px 14px; }
  .tc-synth-h { font-size: 21px; }
  .tc-synth-body { padding: 14px; }
  .tc-synth-copy { margin-left: 0; }
}

/* What the judge concluded, above the answer. */
.tc-synth-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tc-synth-conf, .tc-synth-agree {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: 1px solid var(--tc-edge); color: var(--ink); background: rgba(255,255,255,.04);
}
.tc-synth-conf.c-high { color: #7ee2a8; border-color: rgba(126,226,168,.45); }
.tc-synth-conf.c-medium { color: #ffd166; border-color: rgba(255,209,102,.45); }
.tc-synth-conf.c-low { color: #ff9a9a; border-color: rgba(255,154,154,.45); }
.tc-synth-agree { font-weight: 600; color: var(--muted); }
.tc-synth-why {
  display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--teal-tx); cursor: pointer;
}
.tc-synth-why::after { content: "\25BE"; font-size: 12px; transition: transform .15s ease; }
.tc-synth-why[aria-expanded="true"]::after { transform: rotate(180deg); }
.tc-synth-why:focus-visible { outline: 2px solid var(--teal-tx); outline-offset: 3px; border-radius: 4px; }
.tc-synth-end { display: flex; justify-content: center; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--tc-edge); }
.tc-synth-hide { min-height: 40px; }
.tc-synth.folded { padding-bottom: 16px; }
.tc-synth.folded .tc-synth-hd { margin: 0 0 12px; }

/* The judge's panel: scores, then what it found. */
.tc-judge { margin: 12px 0 0; padding: 16px 18px; border: 1px solid var(--tc-edge); border-radius: 14px; background: rgba(0,0,0,.16); }
.tc-judge-h { margin: 18px 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.tc-judge-h:first-child { margin-top: 0; }
.tc-judge-w { overflow-x: auto; max-width: 100%; }
.tc-judge-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tc-judge-t th, .tc-judge-t td { padding: 8px 10px; border-top: 1px solid var(--tc-edge); text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-judge-t thead th { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tc-judge-t thead th:first-child, .tc-judge-who { text-align: left; }
.tc-judge-who { font-weight: 700; white-space: nowrap; }
.tc-judge-who > * { vertical-align: middle; }
.tc-judge-who > span:last-child { margin-left: 8px; }
.tc-judge-m { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; color: var(--ink); }
.tc-judge-m img { width: 18px; height: 18px; display: block; }
.tc-judge-avg { font-weight: 800; color: var(--teal-tx) !important; }
.tc-judge-cap { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.tc-judge-wait { margin: 0; font-size: 14px; color: var(--ink); }
.tc-judge-err { margin: 0 0 10px; font-size: 14px; color: #ff8a8a; }
/* The Right AI Answer's own row: the accent, so it reads as the one the
   others are measured against. */
.tc-judge-right th, .tc-judge-right td { background: rgba(109,74,255,.16); font-weight: 800; }
.tc-judge-right .tc-judge-who { color: var(--teal-tx); }
.tc-judge-rm { background: var(--teal); color: #fff; font-size: 11px; }
@media (max-width: 620px) {
  .tc-judge { padding: 12px; }
  .tc-judge-t { font-size: 12px; }
  .tc-judge-t th, .tc-judge-t td { padding: 7px 5px; }
  .tc-judge-t thead th { font-size: 9.5px; letter-spacing: 0; }
}