/* The same house style as the supply order app, which is the other tool these people use.
 *
 * That app settled on a direction called Ledger in August: a white page, hairline rules instead
 * of boxes floating on grey, square corners, editorial type, and red used once per screen for
 * the action you came to take and otherwise only for a genuine problem. Two tools from the same
 * division should not look like they came from two companies, so everything below follows it:
 * the same palette, the same 2px corner, the same 48px header with tabs under a red underline,
 * the same button shapes, the same status tags with a coloured dot instead of pills.
 *
 * The font stack is theirs too. Nunito Sans is a web font they load from Google and we do not,
 * because this page has to open with no signal, so here it simply falls through to Avenir Next,
 * which is what the stack resolved to before. Naming it keeps the two stylesheets readable as
 * one decision.
 */
:root {
  --red: #EC0000;
  --red-dark: #b80000;
  --black: #111;
  --ink: #1c1c1c;
  --grey: #666;
  --grey2: #9a9a9a;
  --muted: #666;
  --line: #e6e6e6;
  --rule: #111;
  --paper: #ffffff;
  --ground: #f3f3f3;
  --ok: #1a7f37;
  --warn: #8a5a00;
  --radius: 2px;
  /* The header's real height, measured on load and on resize by the editor's own script. The
   * 48px here is only the value before that runs, and it is the supply order app's bar height. */
  --bar-h: 48px;
  --font: "Nunito Sans", "Avenir Next", Avenir, "Noto Sans TC", "PingFang TC",
          "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* A display rule set later would otherwise beat the hidden attribute's own display:none, which
 * leaves a dismissed overlay sitting invisibly on top of the page swallowing every tap. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--red); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

/* The header, the supply order app's top row: 48px, white, sticky, and closed off
 * with a black hairline rather than a grey one, because it is the edge of the page furniture
 * rather than a division inside it. */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar-top { display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 18px; }
/* The real mark, never a brand name set in type. The M alone, because the full lockup is
 * unreadable at 24px and 24px is what a working header can spare. */
.t-mark, .bar .logo { height: 24px; width: auto; display: block; flex: none; }
/* This is the page's h1. It looks like a title in a toolbar, so it is styled as one. */
.bar-title { font-weight: 700; font-size: 16px; margin: 0; white-space: nowrap; }
/* Read aloud, never drawn. The search box has a placeholder, and a placeholder is not a label. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The screen tabs, and the red underline that says which one you are on. */
.bar-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav a {
  display: inline-flex; align-items: center; height: 48px; padding: 0 12px;
  color: #555; text-decoration: none; font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bar-nav a:hover { color: var(--ink); }
.bar-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); font-weight: 700; }

/* The right-hand slot: who you are on the editor, which branch you are on the tutor's page. */
.bar-who {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #777; white-space: nowrap;
}
.bar-who b { color: var(--ink); font-size: 14px; }
.bar-who a { padding: 4px 0; }

/* The tutor's filter row, which is the supply order app's selector bar: the same white strip
 * under the header, closed with a grey hairline, holding the controls that narrow the list. */
.t-filter { padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.t-linkish {
  background: none; border: none; color: var(--red); padding: 4px 2px;
  text-decoration: underline; min-height: 32px; cursor: pointer; font-size: 12px;
}
.t-search {
  width: 100%; padding: 5px 8px; border: 1px solid #bbb; border-radius: var(--radius);
  background: var(--paper); height: 32px; min-height: 32px;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--black); outline-offset: 1px;
}

/* Nine categories in a 292px window on a small Android, with the scrollbar deliberately hidden,
 * left six of them with nothing at all to say they existed. The fade appears on whichever edge
 * still has content past it. */
.t-chips-wrap { position: relative; }
.t-chips-wrap::before, .t-chips-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.t-chips-wrap::before { left: 0; background: linear-gradient(270deg, rgba(255,255,255,0), var(--paper)); }
.t-chips-wrap::after { right: 0; background: linear-gradient(90deg, rgba(255,255,255,0), var(--paper)); }
.t-chips-wrap.t-fade-left::before { opacity: 1; }
.t-chips-wrap.t-fade-right::after { opacity: 1; }
.t-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  border: 1px solid #ccc; background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 3px 10px; font-size: 13px;
  white-space: nowrap; min-height: 28px;
}
.t-chip:hover { border-color: var(--black); }
.t-chip[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }

/* The tutor's list: a ledger of messages, one under another, separated by a hairline. The
 * supply order app's item lists are built the same way, and twenty-eight boxes floating on a
 * grey page was the loudest thing either tool did. */
.t-split { max-width: 860px; margin: 0 auto; }
main { padding: 0 0 90px; }
.t-card { border-bottom: 1px solid var(--line); padding: 14px 18px 16px; }
.t-card-head { display: flex; align-items: baseline; gap: 9px; padding: 0 0 6px; }
.t-card-code { font-size: 12px; color: var(--grey); }
.t-card-title { font-weight: 700; font-size: 16px; }
.t-card-body { padding: 0; }

.part { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.part:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.text {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.6;
}
.t-ph { background: #fff4e0; border-bottom: 1px solid #e0a000; padding: 0 2px; }
.t-filled { background: #e6f4ea; padding: 0 2px; }

/* A long message clamped to about ten lines, with the copy button left where it was. Fourteen
 * phone screens of unfiltered list was mostly two or three templates running on and on. */
.t-clip {
  max-height: 16em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.t-more {
  display: block; width: 100%; margin-top: 8px; min-height: 36px;
  border: 1px solid #bbb; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: 13px; cursor: pointer;
}
.t-more:hover { border-color: #888; }

/* The desktop shape: the titles down the left, the message you picked on the right.
 *
 * Tutors do sometimes answer parents from WeCom on a centre's desktop machine, and the phone
 * page there is a seven and a half thousand pixel scroll through twenty-eight messages laid out
 * end to end. All twenty-eight titles fit one desktop screen, so on a wide enough window the
 * list becomes an index and the scroll goes away. Below that width nothing changes at all: the
 * phone keeps the single column of full messages it has always had, because that is the screen
 * this app is actually for.
 *
 * The page is still the only scrollbar, and the message is the one thing pinned, the same
 * arrangement as the editor. What scrolls is the index, which is the tall column here. */
.t-index { display: none; }
@media (min-width: 900px) {
  /* No align-items, so both columns stretch to the tallest and the pinned message can travel
   * the length of the index beside it. */
  .t-split {
    display: grid; grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px; max-width: 1180px; padding: 14px 18px 40px;
  }
  .t-index { display: block; min-width: 0; }
  main { padding: 0; min-width: 0; }
  /* A search box the width of a 1440px window reads as though something long belongs in it,
   * the way the value fields on the settings screen did. */
  .t-search { max-width: 520px; }
  .t-detail-pin { position: sticky; top: calc(var(--bar-h) + 12px); }
  /* A message opened in full can be taller than the window, and the bottom of a pinned block
   * taller than the window cannot be reached. Opening one lets it scroll with the page. */
  .t-detail-pin.t-unpinned { position: static; }
  /* On its own in a pane it is a card again, not a row in a ledger. */
  .t-detail-pin .t-card {
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px;
  }
  .t-detail-pin .text { max-width: 46em; }
}
.t-index-item {
  display: block; width: 100%; text-align: left; background: var(--paper);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 7px 10px; font-size: 14px; cursor: pointer; line-height: 1.35;
}
.t-index-item:hover { background: var(--ground); }
/* Selected reads the way a selected row reads in the supply order app: the pale ground and a
 * black bar down the left edge. */
.t-index-item[aria-current="true"] {
  background: var(--ground); box-shadow: inset 3px 0 0 var(--black);
}
.t-index-code { color: var(--grey); font-size: 12px; margin-right: 6px; }
.t-index-item .badge { display: block; margin-top: 2px; }

.row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
/* The one red thing on the screen is the action you came to take. */
.copy {
  background: var(--red); color: #fff; border: 0; border-radius: var(--radius);
  padding: 0 18px; min-height: 36px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.copy:hover { background: var(--red-dark); }
.copy.done { background: var(--ok); }
.meta { font-size: 12px; color: var(--grey); margin-left: auto; }

/* Status, told the way the supply order app tells it: a coloured dot and a word, not a pill.
 * A pill wants to be read; a dot lets you count the greens down a column without reading. */
.badge {
  display: inline-block; font-size: 12px; color: #444;
  white-space: nowrap; line-height: 18px;
}
.badge::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #bbb; margin-right: 6px; vertical-align: 1px;
}
.badge.ok { color: var(--ok); } .badge.ok::before { background: var(--ok); }
.badge.demo { color: var(--warn); } .badge.demo::before { background: #e0a000; }
.badge.plain { color: #555; } .badge.plain::before { background: #bbb; }
/* How much work a scenario is, which arrives from the build as the analysis verdict. The dot
 * takes the colour and the badge says the word beside it, so this is the legend and the thing
 * the legend explained in one place. */
.badge.settled::before { background: var(--ok); }
.badge.close::before { background: #e0a000; }
.badge.open::before { background: var(--red); }

.empty { text-align: center; color: var(--grey); padding: 40px 20px; }

/* First run: pick your branch once, then the page never asks again. */
.t-sheet {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.t-sheet-inner {
  background: var(--paper); width: 100%; max-width: 520px;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.t-sheet h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.t-sheet p { margin: 0 0 14px; color: var(--grey); font-size: 13px; }
.t-branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-branch-pick {
  border: 1px solid #ccc; background: var(--paper); border-radius: var(--radius);
  padding: 10px; min-height: 52px; text-align: left; line-height: 1.3; cursor: pointer;
}
.t-branch-pick:hover { border-color: var(--black); }
.t-branch-pick b { display: block; font-size: 15px; }
.t-branch-pick span { font-size: 12px; color: var(--grey); }
.t-sheet-cancel { width: 100%; margin-top: 12px; }

/* The toast, in the supply order app's corner: top right under the header on a desktop, and
 * along the bottom of a phone where the thing you just pressed is. */
.toast {
  position: fixed; top: calc(var(--bar-h) + 10px); right: 14px;
  background: var(--black); color: #fff; padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 80; max-width: min(460px, calc(100vw - 28px));
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.toast.show { opacity: 1; }
.toast.bad { background: var(--red-dark); }

.t-foot {
  max-width: 860px; margin: 0 auto; padding: 10px 18px 30px;
  font-size: 12px; color: var(--grey);
}
.t-foot a { color: var(--grey); }

/* The HQ comparison screen. Wider, meant for a laptop.
 *
 * The column widths are measured, not guessed. What decides whether this screen works is how
 * many Chinese characters land on a line in a branch panel, so I set the grid to each candidate
 * in a browser and counted. A textarea does not need 551px and the scenario list does not need
 * 250px, and handing that width to the evidence takes a branch panel at 1440px from 35
 * characters per line to 49. */
.hq { max-width: 2400px; margin: 0 auto; padding: 14px 18px 40px; }
/* Deliberately no align-items: start. The columns stretch to the tallest, which is what lets
 * the draft inside the left column stay pinned for the length of the page. */
.hq-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 16px; }
.hq-editor, .hq-versions { min-width: 0; }

/* The twenty-nine scenarios, which used to be a column of rows down the left of the screen.
 *
 * They came out for the same reason everything else moved: the column travelled with the page,
 * so once you had scrolled past the end of it you were looking at 210px of white for the rest
 * of the page. As a dropdown it gives that width back to the evidence, and because it sits in
 * the block that stays pinned you can change scenario from wherever you have scrolled to. */
.hq-pick {
  width: 100%; height: 34px; padding: 0 8px; font-family: var(--font); font-size: 14px;
  border: 1px solid #bbb; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}

/* The one thing on this screen that does not scroll with the page.
 *
 * There used to be five separate scrolls here: the window, the scenario list, the editor
 * column, the diff boxes and the pieces in the holding pen. The tutor's page has one, and that
 * is the difference between the two screens that people noticed. So now the page is the only
 * scrollbar, and this is the only thing pinned to the top: the scenario's name and the draft
 * box, which are what you need in front of you while you read a branch's wording beside them.
 *
 * Nothing else may go inside .hq-editor. A sibling after a pinned block scrolls up underneath
 * it and disappears, which is why the published pane, the differences and the branch panels all
 * live in the right hand column now. Keeping this block short enough to fit a laptop screen is
 * the other rule, because the bottom of a pinned block taller than the window cannot be reached
 * at all, and the bottom of this one is the publish button. */
.hq-sticky { position: sticky; top: calc(var(--bar-h) + 12px); z-index: 2; background: var(--paper); }

/* A panel is the supply order app's card: a black hairline, square, on the white page. */
.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.panel h3 { margin: 0 0 10px; font-size: 15px; }
.panel h3 .badge { margin-left: 10px; }

/* align-items: start so a short branch panel does not stretch to match a tall one beside it and
 * leave a gap between its text and its own button. */
.hq-version-grid { display: grid; gap: 10px; align-items: start; }
/* Two columns of branches only once two columns can still be read. The old rule switched at
 * 1650px and gave a panel about 19 characters per line, which is worse than the single column
 * it replaced. At 1700px with the narrower editor a panel gets about 33. */
@media (min-width: 1700px) { .hq-version-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 2200px) { .hq-version-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Below 920px the two columns become one and the evidence ends up a long way under the draft.
 * Say so, because somebody opening this on a phone should know they have not broken anything. */

/* The page head, the way every screen in the supply order app opens: the name of the job in
 * large type, one grey line under it, and the numbers that say where you are. */
.hq-intro { margin: 2px 0 14px; }
.hq-intro h2 { font-size: 26px; margin: 0 0 2px; letter-spacing: -0.02em; }
.hq-intro > p { margin: 0 0 8px; color: var(--grey); font-size: 13px; }
.hq-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 0; padding: 0; font-size: 12px; color: var(--grey);
}
.hq-legend li { display: flex; align-items: center; gap: 5px; }
.hq-help { margin-top: 8px; }
.hq-help summary { font-size: 12px; color: var(--grey); cursor: pointer; min-height: 28px;
  display: flex; align-items: center; }
.hq-help p { font-size: 12px; color: var(--grey); max-width: 92ch; margin: 4px 0 0; }
.hq-version .text.hq-clipped {
  max-height: 15em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.hq-version-more {
  display: block; width: 100%; border: 0; border-top: 1px solid var(--line);
  background: var(--paper); color: var(--ink); min-height: 34px; font-size: 12px; cursor: pointer;
}
.hq-version-more:hover { background: var(--ground); }
.hq-version { border: 1px solid var(--line); border-radius: var(--radius); }
.hq-version-head {
  display: flex; align-items: center; gap: 9px; padding: 6px 11px;
  font-size: 12px; color: var(--grey); border-bottom: 1px solid var(--line);
}
.hq-version-head b { font-size: 14px; color: var(--ink); }
.hq-version-head .meta { margin-left: auto; }
/* At 1024px the versions run the full width of the page and a line reached 64 characters,
 * which is tiring to read even though it fits. Cap the measure and let the panel be wider than
 * its text. */
.hq-version .text { padding: 11px; font-size: 14px; max-width: 46em; }
mark.hq-shared { background: #dbeafe; padding: 0 1px; }

/* The three colours of the diff. Red is what a branch says and the draft drops, green is what
 * the draft adds. Both carry an underline as well as a colour, so the distinction survives a
 * projector, a photocopy and colour blindness. */
.gone {
  background: #fdeaea; color: #b80000; border-bottom: 1px solid #e88;
  text-decoration: line-through; text-decoration-color: #d66;
}
.added {
  background: #e6f4ea; color: #14611f; border-bottom: 1px solid #7ab98a;
}
/* No max-height and no overflow. A diff box that scrolled inside itself was one of the five
 * separate scrolls this screen used to have. */
.hq-diffbox {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px;
  background: var(--paper);
}

/* How much of a branch's wording survives in the draft. Named matchbar and not bar, because
 * bar is already the sticky page header and the two quietly merged the first time round. */
.hq-matchbar {
  margin-left: auto; width: 68px; height: 7px;
  background: var(--line); overflow: hidden; flex: 0 0 auto; padding: 0;
}
.hq-matchbar i { display: block; height: 7px; background: var(--black); }
.hq-version-head .hq-matchbar + .meta { margin-left: 0; min-width: 34px; text-align: right; }
.hq-version-foot { border-top: 1px solid var(--line); padding: 6px 9px; }

/* The line that stops anyone in a meeting believing the approval travelled somewhere. */

/* The demonstration on a tutor's card, closed until somebody deliberately opens it. */
.t-demo-fold { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.t-demo-fold summary {
  color: var(--grey); font-size: 12px; cursor: pointer;
  min-height: 36px; display: flex; align-items: center;
}
.t-demo-fold .part:first-child { border-top: none; }

.hq-draft {
  width: 100%; min-height: 210px; padding: 10px; font-family: var(--font);
  font-size: 14px; line-height: 1.65; border: 1px solid #bbb; border-radius: var(--radius);
  resize: vertical;
}
.hint { font-size: 12px; color: var(--grey); margin: 8px 0 0; }
.ghost {
  background: var(--paper); color: var(--ink); border: 1px solid #bbb;
  border-radius: var(--radius); padding: 0 14px; min-height: 36px; font-size: 13px;
  cursor: pointer;
}
.ghost:hover { border-color: #888; }
.ghost:disabled { color: var(--grey2); border-color: #e5e5e5; cursor: default; }

/* Twenty-one buttons is a panel two hundred pixels tall, and the pinned block beside the
 * evidence has to fit a laptop screen. Folded they are one line, and still beside the box you
 * are typing into rather than somewhere further down the page. */
/* This one is not a caption, it is the only way a variable gets into the wording at all. As grey
   12px text with a grey triangle it read as a note about the draft box and people did not click
   it, so it is shaped like the control it is. */
.hq-tokens-fold summary {
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  min-height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
}
.hq-tokens-fold summary:hover { background: var(--ground); }
.hq-tokens-fold summary::before { border-left-color: var(--black) !important; }
.hq-tokens-fold[open] summary { margin-bottom: 8px; }
.hq-tokens { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hq-token {
  font-size: 12px; background: var(--paper); border: 1px solid #ccc;
  border-radius: var(--radius); padding: 2px 8px; min-height: 26px; cursor: pointer;
}
.hq-token:hover { border-color: var(--black); }

/* Two columns hold down to 920px and become one below it. That number is measured, not chosen:
 * 420 for the draft leaves the evidence 28 characters to a line at 920, and below that it is
 * worse than the single column it would be replacing. Losing the 210px list column bought
 * about 220px of that, which is why this reads at widths the three column layout could not.
 *
 * There is no half-way layout. Either the evidence is next to the draft, in which case the
 * draft is pinned, or it is underneath, in which case the page is one ordinary column you
 * scroll. */
@media (max-width: 919px) {
  .hq-grid { grid-template-columns: 1fr; }
  .hq-sticky { position: static; }
}

/* The settings screen. One row per shared value: the name in its braces so it reads the way it
 * is written into a draft, the value beside it, and how many scenarios would notice if it
 * changed. */
.hq-set-rows { display: grid; gap: 6px; }
.hq-set-row {
  display: grid; align-items: center; gap: 10px; justify-content: start;
  /* A fee is four characters. Letting the value take every spare pixel gave it an input the
   * width of the page, which reads as though something long belongs in it. */
  grid-template-columns: minmax(170px, 240px) minmax(140px, 420px) auto auto;
}
.hq-set-key, .hq-set-value { display: flex; align-items: center; gap: 2px; min-width: 0; }
.hq-set-brace { color: var(--grey2); }
.hq-set-input {
  width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 0 8px;
  font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid #bbb; border-radius: var(--radius);
}
.hq-set-use { font-size: 12px; color: var(--grey); white-space: nowrap; }
/* A variable nobody has written into a draft yet is not a fault, and four of the seven are in
 * that state on a fresh copy. In amber they read as four problems on a page that has none, so
 * they say the same thing in the same grey as the count beside them. */
.hq-set-unused { color: var(--grey); }
.hq-set-del { min-height: 32px; font-size: 12px; padding: 0 10px; }
.hq-set-del[disabled] { color: var(--grey2); border-color: #e5e5e5; cursor: default; }

/* Seven branches of seven fields is 49 boxes, so each branch is a fold and the summary carries
 * the phone number, which is the field somebody is usually here to check. */
.hq-set-branches { display: grid; gap: 6px; }
.hq-set-branch { border: 1px solid var(--line); border-radius: var(--radius); }
.hq-set-branch summary {
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  min-height: 40px; cursor: pointer;
}
.hq-set-branch[open] summary { border-bottom: 1px solid var(--line); }
.hq-set-sub { font-size: 12px; color: var(--grey); }
.hq-set-num { font-variant-numeric: tabular-nums; }
/* Three to a row: the name, the short name and the phone, then the address across the whole
 * width, then the three bank fields. auto-fit left the bank fields stranded one per row. */
.hq-set-fields {
  display: grid; gap: 10px; padding: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .hq-set-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hq-set-fields { grid-template-columns: 1fr; } }
.hq-set-field { display: grid; gap: 3px; min-width: 0; }
.hq-set-wide { grid-column: 1 / -1; }
.hq-set-label { font-size: 12px; color: var(--grey); }

/* The unsorted bucket: one fold per template a branch pasted in, closed to its name so the
 * whole pile reads as a short list, and a way to send each one somewhere. */
.hq-piece { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 6px; }
.hq-piece summary {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px;
  min-height: 40px; cursor: pointer; font-size: 14px; flex-wrap: wrap;
}
.hq-piece summary b { white-space: nowrap; }
.hq-wide-editor .hq-editor { grid-column: 2 / -1; }
.hq-piece[open] summary { border-bottom: 1px solid var(--line); }
.hq-piece-title {
  color: var(--grey); flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hq-piece-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* No max-height and no overflow: the fold is shut until you open it, and when you open it you
 * want the whole thing, not a fifth scrollbar inside the page. */
.hq-piece-text { padding: 10px 12px; }
.hq-piece-move {
  font-family: var(--font); font-size: 13px; height: 32px; min-height: 32px; padding: 0 6px;
  border: 1px solid #bbb; border-radius: var(--radius); background: var(--paper);
  color: var(--ink); max-width: 100%;
}
.hq-piece-new { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.hq-piece-name { max-width: 180px; }
.hq-piece-create { min-height: 32px; padding: 0 12px; }

/* A <summary> laid out with flex loses the triangle the browser would otherwise draw for it,
 * and these are all folds somebody has to know they can open: the branch rows on the settings
 * screen, where the job is usually to correct one address, the pieces in the holding pen, where
 * the full text of what a branch pasted is one click down, and the variables beside the draft.
 * Without a marker they read as inert rows and nobody clicks them. */
.hq-piece summary::before,
.hq-set-branch summary::before,
.hq-tokens-fold summary::before {
  content: ''; flex: none;
  border-left: 5px solid var(--grey2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .12s ease;
}
.hq-piece[open] summary::before,
.hq-set-branch[open] summary::before,
.hq-tokens-fold[open] summary::before { transform: rotate(90deg); }

/* Stepping to the next scenario without going back to the list. Sits directly under the
 * scenario's name, which is where you look when you have finished with one. */
.hq-nav .ghost { min-height: 30px; font-size: 12px; padding: 0 10px; }
.hq-nav .ghost[disabled] { color: var(--grey2); cursor: default; }
/* How far through the twenty-nine you are, beside the sentence saying what the screen is for. */
.hq-progress { margin-left: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The chooser moves focus to its heading so a screen reader lands inside the panel. The heading
 * is not somewhere you can tab to, so the ring Chrome draws around it is not telling anyone
 * anything, and on the very first screen of the app it reads as a rendering fault. */
#sheetTitle:focus { outline: none; }

/* The phone, where the supply order app raises every control to a finger-sized target and puts
 * 16px on the inputs so iOS does not zoom the page when you tap into one. */
@media (max-width: 720px) {
  .bar-top { gap: 10px; padding: 0 12px; }
  .t-filter { padding: 8px 12px; }
  main { padding-bottom: 110px; }
  .t-card { padding: 14px 12px 16px; }
  .t-foot { padding: 10px 12px 30px; }
  .hq { padding: 10px 12px 40px; }
  /* 16px so iOS does not zoom the page when you tap into a box, and the tutor's own search
   * box keeps this app's 44 point floor rather than the supply order app's 38, because it is
   * the control a tutor reaches for one-handed between classes. */
  .hq-set-input, .hq-piece-move { min-height: 40px; height: 40px; font-size: 16px; }
  .t-search { min-height: 44px; height: 44px; font-size: 16px; }
  .hq-pick { height: 44px; font-size: 16px; }
  .hq-draft { font-size: 16px; }
  .copy, .ghost, .t-more, .t-chip, .hq-token { min-height: 44px; }
  .hq-set-del, .hq-piece-create, .hq-nav .ghost { min-height: 40px; }
  .t-linkish { min-height: 44px; }
  .hq-intro h2 { font-size: 20px; }
  .toast { left: 12px; right: 12px; top: auto; bottom: 24px; max-width: none; }
  /* The name and the value keep their own line each, and the two small things share the third,
   * because a 44 point button squeezed into a four-column grid is not a button any more. */
  .hq-set-row {
    grid-template-columns: 1fr auto;
    padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  }
  .hq-set-key, .hq-set-value { grid-column: 1 / -1; }
}

/* A save the Sheet refused. The screen is showing something HQ's Sheet does not have, so this
   sits across the top until somebody reloads, and it is the one place in the app that uses red
   as a background rather than as a line. */
.hq-problem {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.hq-problem .ghost {
  flex: none;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
}