/* =============================================================================
   Meep :: Layer 5 (WEB UI)

   Plain stylised HTML. Mobile first: everything below is written for a phone,
   and the one media query at 760px widens it for a desk or a shop display.

   Colour only where it means something, and always the same thing. White
   ground, a few greys for structure, one ink tone for text and links. This
   follows "visual meaning" in the product brief without turning the page
   into a dashboard of competing colours. What does get a hue:

     - status: the super status icons, and the title of a task on the Aux
       track, in colours each company chooses for itself (written by
       js/meep.js as SVG and a constructed stylesheet, so nothing here names
       them), and a small dot beside a status name in Settings. A task row's
       status name and its moves menu are ink;
     - red: work somebody must act on (a red super status, or ASAP), and a
       date already gone by;
     - a job card, which is read at a glance: its own status and its
       figures in blue, its due date in orange, its flags in amber, and its
       links in blue;
     - a pale blue-grey under the task row the pointer is on;
     - a task's messages, at the far end of its row: grey with none, red
       when they are yours to answer, yellow while you wait for an answer,
       green once resolved -- the same three meanings as everywhere -- and
       the green Resolved that settles them (js/messages.js);
     - a light red "Required" tag on a form that cannot be saved yet;
     - green, in the Simulator alone: the plus it starts from, and the tint
       of a kind of work's automation in its Edit sheet, after the mockups
       the page grew from.
   ============================================================================= */

:root {
  --ink: #1b1b1b;
  --ink-soft: #444;
  --muted: #6e6e6e;
  --line: #dcdcdc;
  --line-strong: #b9b9b9;
  --panel: #f6f6f6;
  --panel-deep: #ededed;

  /* One level of nesting: laid over the parent, so levels add up (see .nest). */
  --nest-step: rgba(0, 0, 0, 0.03);
  --hover-step: rgba(0, 0, 0, 0.035);
  --white: #fff;

  /* The only hues in the system. Muted on purpose. */
  --dot-grey: #9a9a9a;
  --dot-blue: #3d6b9c;
  --dot-green: #4a7c52;
  --dot-amber: #a8792c;
  --dot-red: #a2453d;

  /* A light red "Required" tag on a form that cannot be saved yet. */
  --required-ink: #8f2f28;
  --required-bg: #fbe9e7;
  --required-line: #efc6c1;

  /* Work somebody must act on, and a date already gone by. */
  --act-ink: #c92a2a;

  /* A job card's own (see the header): its status and figures, its due date,
     its flags, its links. Each ink reads on its ground at 4.5:1 or better. */
  --status-ink: #1c4f8a;
  --status-bg: #e7f0fb;
  --status-line: #b8cff0;
  --figure-ink: #1d4f91;
  --figure-bg: #e8f0fc;
  --due-ink: #b85000;
  --flag-ink: #a34a07;
  --flag-bg: #fff4e5;
  --flag-line: #f5c48a;
  --accent: #1c64d6;

  /* The Simulator's own (see the header): its plus, on which white reads at
     3:1, as a large mark must; and the grey of a button that adds a task of
     one kind of work, a step darker than any other button's so the row of
     them reads as the company's kinds and not as more Add buttons. */
  --add: #16a34a;
  --add-deep: #15803d;
  --kind-ink: #26303b;
  --kind-bg: #e3e7ec;
  --kind-deep: #d4dae1;
  --kind-line: #bcc4ce;
  /* And its Edit sheet's automation: a green tint, the names in its sentence
     in a green that reads at 5:1 on white, and a line a shade deeper whose
     ink reads at 6:1 on it. Its arrow is the plus's green. */
  --auto-bg: #f6fbf8;
  --auto-line: #cfe0d6;
  --auto-ink: #177746;
  --auto-rule-bg: #edf5f0;
  --auto-rule-ink: #4a5a50;

  /* A task's messages (see the header), after the mockup they came from: on
     the red and the green white reads at 4.5:1 or better, and ink on the
     yellow; the grey's ink reads at 5:1 on its ground. */
  --msg-none-bg: #f2f5f8;
  --msg-none-ink: #5b6678;
  --msg-none-line: #c4ceda;
  --msg-reply-bg: #dc2626;
  --msg-reply-line: #b91c1c;
  --msg-waiting-bg: #facc15;
  --msg-waiting-line: #ddb000;
  --msg-resolved-bg: #15803d;
  --msg-resolved-line: #166534;

  /* A job card's edge and the lines across it; a task row's faint edge, and
     the pale blue-grey of the row under the pointer; the kind of work as a
     pill on a row. */
  --card-line: #d2d7de;
  --rule: #e7eaee;
  --row-line: #eef0f3;
  --row-hover: #eef3f9;
  --row-hover-line: #dde6f0;
  --type-ink: #495057;
  --type-bg: #f1f3f5;
  --type-line: #dee2e6;

  --radius: 4px;
  --gap: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 16px/1.5 var(--font);
}

/* --- structure ----------------------------------------------------------- */

.wrap { padding: 0 14px 56px; max-width: 1180px; margin: 0 auto; }

header.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.brand span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.bar nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.bar nav a { font-size: 14px; }

.who { font-size: 13px; color: var(--muted); }

/* --- typography ---------------------------------------------------------- */

h1 { font-size: 22px; margin: 20px 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 24px 0 8px; font-weight: 600; }
h3 { font-size: 14px; margin: 16px 0 6px; font-weight: 600; text-transform: uppercase;
     letter-spacing: 0.05em; color: var(--muted); }

/* A list's heading with its one action at the right: Jobs, and New job. */
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            margin: 24px 0 8px; }
.listhead h2 { margin: 0; }

p { margin: 8px 0; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #000; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
.lede { font-size: 17px; color: var(--ink-soft); max-width: 62ch; }

/* --- panels and cards ---------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
}

.card.tinted { background: var(--panel); }
.card.narrow { max-width: 420px; margin: 48px auto; }

/* --- nesting --------------------------------------------------------------
   A panel inside another panel is one step greyer than the one it sits in,
   so it is always plain what is part of what. Give the inner panel the class
   "nest": its background is a faint grey laid over whatever is behind it, so
   the steps add up by themselves at any depth -- white, then a little grey,
   then a little more. Inputs, buttons and pills keep their own white, so the
   things you type into and press still stand out at every level. */

.nest, .card.nest { background: var(--nest-step); }

/* The settings section a link pointed at, e.g. from a Meep Setup task. */
section:target > h2 { border-left: 3px solid var(--ink); padding-left: 8px; }

.centred { display: block; }

.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

.rows > * + * { margin-top: 8px; }

.split { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-start; }
.split > * { flex: 1 1 260px; min-width: 0; }

/* --- the Magic Click counters -------------------------------------------- */

.counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.counter {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-decoration: none;
  background: var(--white);
  color: var(--ink);
}

.counter:hover { background: var(--panel); border-color: var(--line-strong); }

.counter .n { font-size: 24px; font-weight: 600; line-height: 1.1; display: block; }
.counter .l { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }

.counter.exception { background: var(--panel-deep); border-color: var(--line-strong); }

/* --- status dots --------------------------------------------------------- */

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-grey);
  margin-right: 6px;
  vertical-align: baseline;
  flex: none;
}

.dot.blue { background: var(--dot-blue); }
.dot.green { background: var(--dot-green); }
.dot.amber { background: var(--dot-amber); }
.dot.red { background: var(--dot-red); }
.dot.grey { background: var(--dot-grey); }

.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px 1px 7px;
  font-size: 12px;
  background: var(--white);
  white-space: nowrap;
}

.pill.flat { border: 0; padding-left: 0; background: none; }

/* --- super statuses -------------------------------------------------------
   Every status presents as one of a company's few super statuses. Each is an
   icon (js/meep.js superIcon) and, in a strip, the icon over its name with
   its count as a dark badge. The strip is a Magic Click row on the Work page
   and a filter for the task list on a job. */

.ssicon {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 18px; height: 18px;
  vertical-align: -4px;
}
.ssicon > svg { display: block; width: 100%; height: 100%; }
.ssicon.large { width: 30px; height: 30px; }

.ssbadge {
  position: absolute; top: -6px; right: -9px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px;
  background: #1f2a44; color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--white);
}

/* On a phone, as many columns as fit at a width a name can be read in --
   four on most phones, so Meep's seven take two rows -- and a long name wraps
   under its icon rather than running into its neighbour's, which squeezing
   all seven into one row did: a company names its own, and "Waiting on a
   part or the customer" is one. Past three lines a name is cut short; the
   whole of it is still each item's label. On a desk (760px and up) every
   name has the room it needs on one line. */
.sstrip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 2px; margin: 14px 0 6px;
}

.ssitem, button.ssitem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: 8px 2px 6px;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--ink);
  font: inherit; text-decoration: none; text-align: center;
}
.ssitem .ssicon { width: 30px; height: 30px; }
.ssitem .sslabel {
  max-width: 100%;
  font-size: 11px; line-height: 1.2; color: var(--ink-soft); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.ssitem.zero .sslabel { color: var(--muted); }
a.ssitem, button.ssitem { cursor: pointer; }
a.ssitem:hover, button.ssitem:hover { background: var(--panel); color: var(--ink); }
.ssitem[aria-current="true"], button.ssitem[aria-pressed="true"],
button.ssitem[aria-pressed="true"]:hover {
  background: var(--panel-deep); border-color: var(--line-strong); color: var(--ink);
}

/* An icon with its name beside it (js/meep.js superTag): the shape carries
   the company's colour and so does the word, which is why the colour arrives
   as a class rather than as a style attribute the policy would drop. */
.sstag, button.sstag {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font: inherit; text-align: left;
}
.sstag .ssicon { width: 16px; height: 16px; vertical-align: 0; }
.sstag .sslabel { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

button.sstag { cursor: pointer; }
button.sstag:hover { background: var(--panel-deep); border-color: var(--line-strong); color: var(--ink); }
/* Nowhere further to go from here: still the icon, no longer a button. */
.sstag.still { border-style: dashed; }

/* The move wants something filled in first, so pressing it asks rather than
   moves. Said on the button, so nobody expects one tap and gets a form. */
.sstag.asks::after {
  content: '…';
  margin-left: 1px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

/* Just the icon, where the row names it elsewhere: a round button big enough
   for a thumb, with the "asks first" mark as a badge on its corner. */
.sstag.iconly { position: relative; justify-content: center; width: 36px; height: 36px; padding: 0; }
.sstag.iconly .ssicon { width: 20px; height: 20px; }
.sstag.iconly.asks::after {
  position: absolute; right: -4px; bottom: -2px;
  height: 14px; padding: 0 3px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); color: var(--ink-soft);
  font-size: 11px; line-height: 6px;
}

/* Bare: no ring round it, the icon alone, as on a job card's task row. Still
   a thumb's width to press; a button shows itself by a shade under the
   pointer, and one with nowhere to go has none. */
.sstag.iconly.bare { width: 32px; height: 32px; }
.sstag.iconly.bare, .sstag.iconly.bare.still {
  border-color: transparent; border-style: solid; border-radius: 6px; background: transparent;
}
button.sstag.iconly.bare:hover { background: var(--panel-deep); border-color: transparent; }

/* Its "asks first" mark is smaller, and where a pointer can hover it shows
   with the row under the pointer, so a list at rest is just its icons: nobody
   presses an icon without the pointer on its row first. Without a pointer,
   and for the keyboard, it is always there. */
.sstag.iconly.bare.asks::after {
  right: -3px; bottom: -1px; height: 11px; padding: 0 2px; font-size: 9px; line-height: 4px;
}
@media (hover: hover) {
  .sstag.iconly.bare.asks::after { opacity: 0; transition: opacity 0.18s ease; }
  .taskrow:hover .sstag.iconly.bare.asks::after, .taskrow-line:hover .sstag.iconly.bare.asks::after,
  .sstag.iconly.bare.asks:focus-visible::after { opacity: 1; }
}

/* What a whole job presents as, beside its title. */
.jobss { display: flex; gap: 10px; align-items: center; margin: 6px 0 2px; }
.jobss .name { font-weight: 600; }

/* The waste bin on a row that can be thrown away (js/meep.js binIcon), and
   the tag on a job's flag (tagIcon). */
.binicon { display: inline-flex; width: 16px; height: 16px; }
.binicon > svg { display: block; width: 100%; height: 100%; }
.tagicon { display: inline-flex; flex: none; width: 13px; height: 13px; }
.tagicon > svg { display: block; width: 100%; height: 100%; }

/* Completed's mark (completedIcon): a tick in a ring, grey, where a super
   status's icon would be on a task or a job that is Completed -- which is no
   super status, so it has none of the company's colours. */
.doneicon { display: inline-flex; flex: none; width: 18px; height: 18px; color: var(--muted); }
.doneicon > svg { display: block; width: 100%; height: 100%; }
.doneicon.large { width: 30px; height: 30px; }
.jobdone { display: inline-flex; align-items: center; }
.taskrow-done { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }

/* A task that is Completed: faded, its title struck through, and on a desk,
   where a row is one line, a line drawn through the whole of it, after the
   mockup the Simulator grew from (example_html/preview_2.html). A job's
   lists draw it last; its place on the job does not change. */
.taskrow.completed, .taskrow-line.completed { position: relative; }
.taskrow.completed > :not(.taskrow-msg), .taskrow-line.completed > :not(.taskrow-msg) { opacity: 0.55; }
.taskrow.completed { background: var(--panel); }
.taskrow.completed .taskrow-title, .taskrow-line.completed .taskrow-title { text-decoration: line-through; }
/* What is said about finished work is not finished with: its messages stay
   as bright as ever, over the line through the row. */
.taskrow.completed > .taskrow-msg, .taskrow-line.completed > .taskrow-msg { position: relative; z-index: 1; }

/* A leading icon on a task or job row, or inside a pill or chip. */
.row .top > .ssicon { align-self: center; }
.pill .ssicon { width: 14px; height: 14px; margin-right: 5px; }

#super-strip { margin-bottom: 12px; }
#super-strip > .sstrip { margin-bottom: 0; }
#super-strip > .small { margin: 2px 0 0; }

/* --- lists --------------------------------------------------------------- */

.list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }

.row {
  display: block;
  padding: 11px 12px;
  text-decoration: none;
  color: inherit;
  background: var(--white);
}

a.row:hover { background: var(--panel); }

.row .top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row .title { font-weight: 500; }
.row .meta { font-size: 12px; color: var(--muted); margin-top: 3px;
             display: flex; gap: 10px; flex-wrap: wrap; }

.row.dim { background: var(--panel); }
.row.dim .title { color: var(--muted); }

.code { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* --- task rows (js/taskrow.js) ----------------------------------------------
   One task in any list of them: a job card, Assigned to you, a filter,
   search, the job page. Rows sit close together with only the faintest edge,
   so a job card reads as one thing with its work inside it; the row under the
   pointer is lifted out by a pale blue-grey that fades in and out.

   On a desk a row is one line, in fixed columns: the icon (the one-tap move),
   the bin, the status and its menu, then what it is. What does not fit is cut
   short rather than wrapped -- the details first, then the title -- and read
   whole in a tooltip, so every row's icon, status and title start where the
   row above's do, whatever its status is called. On a phone a row is two
   lines: the icon, the title (which may wrap) and the bin; then, under the
   title, the status and its menu, the kind of work, whose and when. Only the
   title is a link. Somebody who may not throw work away has no bin, and their
   rows close up rather than leaving its column empty (.nobin). At the far
   end of every row, on a desk, and of its second line, on a phone, is the
   button for its messages (.taskrow-msg). */

.tasklist { display: flex; flex-direction: column; gap: 3px; }
.tasklist > .empty, .jobcards > .empty { border: 1px dashed var(--line); border-radius: 8px; }

.taskrow {
  padding: 5px 6px;
  border: 1px solid var(--row-line); border-radius: 6px;
  background: var(--white); color: var(--ink);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.taskrow, .taskrow-line {
  display: grid; gap: 3px 8px; align-items: center;
  grid-template-columns: 32px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title title bin"
    "icon state info  msg";
}
.taskrow.nobin, .taskrow-line.nobin {
  grid-template-columns: 32px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title title title"
    "icon state info  msg";
}
.taskrow.dim { opacity: 0.65; }

/* Only where a pointer can hover: a tap is not a hover, and a tapped row would
   otherwise stay shaded. On the job page, only while the task is closed. */
@media (hover: hover) {
  .taskrow:not(.expand):hover,
  .taskrow.expand:has(> .taskrow-detail:empty):hover {
    background: var(--row-hover); border-color: var(--row-hover-line);
  }
}

/* On the job page a row also holds, opened, everything about its task. */
.taskrow.expand { display: block; }
.taskrow-detail > .card { margin: 8px 0 2px; }

/* Specific enough to beat .minipanel-anchor (the move panel opens beside it),
   whose inline box would add a line's descent under the icon. */
.taskrow .taskrow-ss, .taskrow-line .taskrow-ss {
  grid-area: icon; display: flex; align-items: center; justify-content: center;
}

/* On a phone the title and the rest of what it is take a line each; on a
   desk they share the row's last column (see the 760px query). */
.taskrow-what { display: contents; }
.taskrow-info {
  grid-area: info; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
}
.taskrow-info > .typepill, .taskrow-info > .prio, .taskrow-info > .detailpill { flex: none; }

button.taskrow-bin {
  grid-area: bin; justify-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted);
}
button.taskrow-bin:hover { background: var(--panel-deep); color: var(--act-ink); }
.taskrow-bin .binicon { width: 14px; height: 14px; }

/* Its messages (js/messages.js): a bubble in a box of the colour where they
   stand, and how many there are beside it. Every one the same size, whatever
   the number: room for two digits, 0 included (99+ beyond, smaller), so they
   line up down a list. A thumb's size on a phone. */
button.taskrow-msg {
  grid-area: msg; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: calc(20px + 4px + 2ch + 18px); height: 38px; padding: 0;
  border: 1px solid var(--msg-none-line); border-radius: 7px;
  background: var(--msg-none-bg); color: var(--msg-none-ink);
  font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
button.taskrow-msg:hover { filter: brightness(0.95); background: var(--msg-none-bg); color: var(--msg-none-ink); }
button.taskrow-msg.msg-reply, button.taskrow-msg.msg-reply:hover {
  background: var(--msg-reply-bg); border-color: var(--msg-reply-line); color: var(--white);
}
button.taskrow-msg.msg-waiting, button.taskrow-msg.msg-waiting:hover {
  background: var(--msg-waiting-bg); border-color: var(--msg-waiting-line); color: var(--ink);
}
button.taskrow-msg.msg-resolved, button.taskrow-msg.msg-resolved:hover {
  background: var(--msg-resolved-bg); border-color: var(--msg-resolved-line); color: var(--white);
}
.msgicon { display: inline-flex; flex: none; width: 16px; height: 16px; }
.msgicon > svg { display: block; width: 100%; height: 100%; }
.taskrow-msg .msgicon { width: 20px; height: 20px; }
/* The slot is two digits wide whatever is in it; 99+ is drawn smaller in the
   same width (2ch of the button's own size). */
.taskrow-msg .msgcount { flex: none; width: 2ch; text-align: center; }
.taskrow-msg .msgcount.many { font-size: 0.75em; width: calc(2ch / 0.75); letter-spacing: -0.05em; }

.taskrow-title {
  grid-area: title; min-width: 0;
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink);
  text-decoration: none; overflow-wrap: anywhere;
}
a.taskrow-title:hover { color: var(--ink); text-decoration: underline; }
.taskrow-title.act, a.taskrow-title.act:hover { color: var(--act-ink); }
.seq { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* A list, a card or the job page while one of its rows is being written. */
.busy { opacity: 0.6; }

/* A row whose task has left its list (js/taskrow.js place): out of use, and
   while the pointer is off it fading and folding away -- its height and then
   the gap above it, so nothing jumps when it goes. The script draws every
   frame of that itself, in whole device pixels, and nothing here may ease one
   into the next: a transition would take the height through the fractions
   between, which is what made the rows below shake. */
.leaving { overflow: hidden; box-sizing: border-box; transition: none; }
.leaving * { pointer-events: none; }

/* Where the task is: its status's own name, upper case, in a box. Where it
   can be moved, the menu lies unseen over the box (js/taskrow.js), so a tap
   anywhere on it opens the phone's own picker. Its arrow shows where there is
   no pointer to hover; with one, it fades in on the row under the pointer. */
.statebox {
  position: relative; display: flex; align-items: center;
  width: 100%; min-width: 0; height: 30px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--white); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.taskrow .statebox, .taskrow-line .statebox {
  grid-area: state; justify-self: start; width: auto; min-width: 96px; max-width: 62vw;
}
.statebox-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statebox.picker { padding-right: 22px; cursor: pointer; }
.statebox.picker::after {
  content: ""; position: absolute; right: 9px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg); pointer-events: none;
  transition: opacity 0.18s ease;
}
.statebox.picker:hover { border-color: var(--ink-soft); background: var(--panel); }
.statebox.picker:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.statebox > select {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
/* The menu has no colour of its own: ink, and a lighter grey for a place the
   task cannot be put from where it stands. Said outright, so it is the same
   in every browser's own menu. */
.statebox > select, .statebox > select option { color: var(--ink); }
.statebox > select option:disabled { color: var(--dot-grey); }
@media (hover: hover) {
  .statebox.picker::after { opacity: 0; }
  .taskrow:hover .statebox.picker::after, .taskrow-line:hover .statebox.picker::after,
  .statebox.picker:focus-within::after { opacity: 1; }
}

/* What kind of work: a small grey pill after the title. */
.typepill {
  display: inline-block; padding: 0 7px;
  border: 1px solid var(--type-line); border-radius: 999px;
  background: var(--type-bg); color: var(--type-ink);
  font-size: 10px; line-height: 16px; white-space: nowrap;
}

/* One of a task's details, where its kind of work is set to show it on the
   job card (M.taskPills): the same pill, white, so it reads as an answer and
   not as a second kind of work. */
.detailpill {
  display: inline-block; padding: 0 7px;
  border: 1px solid var(--type-line); border-radius: 999px;
  background: var(--white); color: var(--type-ink);
  font-size: 10px; line-height: 16px; white-space: nowrap;
}

/* HIGH and ASAP on a task or a job; NORMAL is not marked at all. */
.prio {
  display: inline-block; padding: 0 5px;
  border: 1px solid currentColor; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 15px;
  white-space: nowrap;
}
.prio-asap { color: var(--act-ink); }
.prio-high { color: var(--ink-soft); }
.prio-low { color: var(--muted); }

/* Whose it is, how many, when, what it waits on, its note: each after a dot,
   on one line, cut short where it runs out of room (all of it in a tooltip). */
.taskmeta {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; font-style: italic; color: var(--muted);
}
.taskmeta > *::before { content: "\2022"; margin-right: 5px; font-style: normal; }
.taskmeta > * + * { margin-left: 5px; }
.taskmeta .late { color: var(--act-ink); }
.taskmeta .code { font-size: 10px; font-style: normal; }

/* --- a job card ----------------------------------------------------------
   A job in the Work page's list, carrying the work inside it: what the job
   is and how it stands, then a line across and its first few tasks, each one
   movable where it stands, then a line and the way to add another.

   It is a div and not a link, because a link may not hold the menus and
   buttons the tasks need: the code and the title are the link instead. */

.jobcards { display: flex; flex-direction: column; gap: 14px; }

/* The one edge that matters: the card's, lifted a little off the page, with
   its tasks inside it and no edges of their own to speak of. */
.jobcard {
  display: block; padding: 12px;
  background: var(--white);
  border: 1px solid var(--card-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.05);
}
.jobcard.dim { background: var(--panel); }
.jobcard.dim .jobcard-name a { color: var(--muted); }

/* Its first line, with the ⋮ menu kept in the top corner however it wraps. */
.jobcard-top { display: flex; align-items: flex-start; gap: 8px; }
.jobcard-line {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.jobcard-line > .ssicon { width: 20px; height: 20px; }

.jobstatus {
  padding: 2px 9px;
  border: 1px solid var(--status-line); border-radius: 4px;
  background: var(--status-bg); color: var(--status-ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5;
  text-transform: uppercase; white-space: nowrap;
}
.jobcard-name { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.jobcard-name a { color: var(--ink); text-decoration: none; }
.jobcard-name a:hover { color: var(--ink); text-decoration: underline; }
.jobcard-name .code { margin-right: 6px; font: inherit; }
.figure {
  padding: 1px 10px; border-radius: 999px;
  background: var(--figure-bg); color: var(--figure-ink);
  font-size: 12px; line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.jobdue { color: var(--due-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.jobdue.late { color: var(--act-ink); }

/* What it is about, a line of facts; long answers as notes; yeses as flags. */
.jobcard-facts {
  display: flex; flex-wrap: wrap; gap: 2px 18px;
  margin-top: 6px; font-size: 13px; color: var(--ink-soft);
}
.jobcard-facts:empty { display: none; }
.jobcard-facts .k, .jobcard-notes .k { color: var(--muted); }
.jobcard-notes {
  margin: 6px 0 0; padding-left: 20px;
  font-size: 13px; font-style: italic; color: var(--ink-soft);
}
.jobcard-notes .k { font-style: normal; }
/* Two lines of a note at most; all of it in the tooltip and on the job page. */
.jobcard-notes .clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.jobcard-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border: 1px solid var(--flag-line); border-radius: 4px;
  background: var(--flag-bg); color: var(--flag-ink);
  font-size: 12px; font-weight: 500;
}

/* Below a line across the card: its tasks, a hair apart (task rows, above). */
.jobtasks, .jobtasks-none, .jobcard-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.jobtasks { display: flex; flex-direction: column; gap: 3px; }
.jobtasks-none { margin-bottom: 0; }

/* A link that reads as one, in the card's blue: More (3 hidden). */
.cardlink, button.link.cardlink {
  align-self: flex-start; padding: 2px 0;
  color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none;
}
.cardlink:hover, button.link.cardlink:hover { background: none; color: var(--accent); text-decoration: underline; }

button.addtask { padding: 6px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.jobcard-add {
  margin: 10px 0 2px; padding: 2px 12px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--nest-step);
}
.jobcard-add .taskform > .actions { margin-top: 14px; }

/* --- the ⋮ menu (js/meep.js menu) ----------------------------------------- */

.kebab { position: relative; flex: none; }
.kebab > summary {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: -4px -4px 0 0;
  border-radius: 6px; color: var(--ink-soft);
  list-style: none; cursor: pointer;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary > svg { display: block; width: 16px; height: 16px; }
.kebab > summary:hover, .kebab[open] > summary { background: var(--panel-deep); color: var(--ink); }
.kebab > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 12;
  min-width: 190px; padding: 4px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.kebab-menu > a, .kebab-menu > button {
  display: block; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 5px; background: none; color: var(--ink);
  font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.kebab-menu > a:hover, .kebab-menu > button:hover { background: var(--panel); color: var(--ink); }

/* --- tables (wide screens; they scroll on a phone) ----------------------- */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
tbody tr:hover { background: var(--panel); }

/* --- forms --------------------------------------------------------------- */

label { display: block; font-size: 13px; color: var(--ink-soft); margin: 10px 0 3px; font-weight: 500; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;            /* 16px stops iOS zooming on focus */
}

textarea { min-height: 80px; resize: vertical; }

/* For JSON and other text where every character matters. */
textarea.code { font-family: var(--mono); font-size: 13px; min-height: 360px; white-space: pre; }

label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }

/* A box of tags (M.fieldBox): the tags as chips, each with an x, a line to
   type one into, and under it, while it is typed into, the tags already
   used -- in the flow of the form, so no panel or sheet cuts it off. */
.tagbox-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tagbox-chips:not(:empty) { margin-bottom: 6px; }
.tagchip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 3px 2px 10px; border-radius: 999px;
  background: var(--panel-deep); color: var(--ink); font-size: 13px; line-height: 1.5;
}
.tagchip button {
  min-height: 0; padding: 0 6px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: 15px; line-height: 1.3;
}
.tagchip button:hover { background: var(--line); color: var(--ink); }
.tagbox-entry { display: flex; gap: 6px; }
.tagbox-entry input { flex: 1 1 auto; min-width: 0; }
.tagbox-entry button { flex: none; }
.tagbox-offered {
  margin-top: 4px; padding: 4px; max-height: 196px; overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--white);
}
.tagbox-offered[hidden] { display: none; }
button.tagbox-pick {
  display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 4px;
  background: none; color: var(--ink); font-size: 14px; text-align: left;
}
button.tagbox-pick:hover, button.tagbox-pick:focus { background: var(--panel); color: var(--ink); }
.tagbox-hint { margin: 0; padding: 6px 9px; font-size: 12px; color: var(--muted); }

/* A yes-or-no that moves a task on when it is ticked (M.fieldBox): a box to
   tick, its name beside it, the size of any other box on the form. */
.tickbox label.check {
  min-height: 40px; margin-top: 10px; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white);
  color: var(--ink); font-size: 15px;
}
.tickbox input { width: 18px; height: 18px; margin: 0; flex: none; }

/* A row of status pills, e.g. a workflow's statuses in order. */
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }

.problems { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

input:focus, select:focus, textarea:focus, button:focus, .counter:focus, a:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field-note { font-size: 12px; color: var(--muted); margin-top: 3px; }

button, .button {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

button:hover, .button:hover { background: #000; color: var(--white); }

button.secondary, .button.secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line-strong);
}
button.secondary:hover, .button.secondary:hover { background: var(--panel); color: var(--ink); }

button.small, .button.small { padding: 5px 10px; font-size: 13px; }

button:disabled { opacity: 0.45; cursor: not-allowed; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* The job details form (js/job.js): what every job records, and what this
   company records as well, in one column on a phone and two on a desk. */
.jobedit > summary { cursor: pointer; font-weight: 500; min-height: 28px; }
.jobedit-box { margin-bottom: 10px; min-width: 0; }
.jobedit-box label { margin-bottom: 2px; }
.jobedit-box .field-note { margin-top: 2px; }

/* --- status transition buttons: the one- and two-click path -------------- */

.moves { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.moves button { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.moves button:hover { background: var(--panel-deep); color: var(--ink); }

/* --- messages ------------------------------------------------------------ */

.note {
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  background: var(--panel);
  padding: 9px 11px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 10px 0;
}

.note.bad { border-left-color: var(--dot-red); }
.note.good { border-left-color: var(--dot-green); }
/* Nothing is wrong; something is missing. A job without what its company asks
   for on every job reads this way. */
.note.warn { border-left-color: var(--dot-amber); }
.note[hidden] { display: none; }

/* A success floats below the header (M.say sets `top`): in the page's flow it
   pushed the list down under the pointer. It takes no clicks. */
.toast {
  position: fixed; z-index: 30; top: 64px; left: 50%;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.toast.shown { opacity: 1; }
.toast .note {
  margin: 0;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 14px; }

/* --- history ------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.timeline li { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 14px;
  width: 8px; height: 8px; background: var(--line-strong); border-radius: 50%;
}
.timeline .when { color: var(--muted); font-size: 12px; }

/* --- search -------------------------------------------------------------- */

.searchbar { display: flex; gap: 8px; margin: 12px 0; }
.searchbar input { flex: 1; }

/* --- utility ------------------------------------------------------------- */

.hide { display: none !important; }
.right { margin-left: auto; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 14px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.badge {
  display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 1px 5px; color: var(--muted);
}

.impersonating {
  background: var(--panel-deep);
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 14px;
  font-size: 13px;
}

/* --- the work editor (js/workeditor.js) -------------------------------------
   Kinds of work, workflows, statuses, moves and details, in Settings and in
   the template editor. Every thing is a row that opens into its form; on a
   phone that is one thing at a time, full width, with thumb-sized targets. */

fieldset.wedit { border: 0; margin: 0; padding: 0; min-width: 0; }

.wedit-section { margin: 18px 0 26px; }
.wedit-section > h3 {
  font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 2px;
}
.wedit-section > p { margin: 0 0 10px; max-width: 70ch; }

.wedit-list { display: flex; flex-direction: column; gap: 6px; }

/* Kinds of work and workflows are white; statuses, moves and details inside
   them are .nest, and what is inside those, a step greyer again. */
details.wedit-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
details.wedit-item:not(.nest) { background: var(--white); }
details.wedit-item.dim > summary .title { color: var(--muted); }

details.wedit-item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  min-height: 48px;
  padding: 11px 40px 11px 12px;
}
details.wedit-item > summary::-webkit-details-marker { display: none; }
details.wedit-item > summary::after {
  content: "";
  position: absolute; right: 16px; top: 19px;
  width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
details.wedit-item[open] > summary { border-bottom: 1px solid var(--line); }
details.wedit-item[open] > summary::after { transform: rotate(-135deg); top: 22px; }
/* Laid over the row's own shade, so hovering reads the same at every level. */
details.wedit-item > summary:hover { background: var(--hover-step); }

details.wedit-item > summary .top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.wedit-item > summary .top > .ssicon { align-self: center; }
details.wedit-item > summary .title { font-weight: 500; }
details.wedit-item > summary .meta {
  font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap;
}

.wedit-body { padding: 4px 12px 14px; }
.wedit-body h4 { font-size: 14px; font-weight: 600; margin: 20px 0 2px; }
.wedit-body h4 + p { margin-top: 0; }

.wedit-row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.wedit-row > * { flex: 1 1 220px; min-width: 0; }

.wedit-fields { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.wedit-field {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 12px 10px;
}

/* What every job already records: Meep's own attributes, read only, one per
   line inside the row that lists them. */
.wedit-base { display: flex; flex-direction: column; }
.wedit-base-row { padding: 8px 0; }
.wedit-base-row + .wedit-base-row { border-top: 1px solid var(--line); }
.wedit-base-row .top { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.wedit-base-row .title { font-weight: 600; }
.wedit-base-row p { margin: 2px 0 0; max-width: 70ch; }

.wedit-foot {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.wedit-foot .actions { margin-top: 0; }

/* Under a kind of work: its workflow's statuses as that kind has them, below
   the box saying where a new task starts. And under a status in its
   workflow: what each kind of work following it says that status means, to
   read. It is set under the kind. */
.wedit-kindstatuses { margin-top: 10px; }
.wedit-said { margin-top: 12px; }
.wedit-said ul { margin: 2px 0 0; padding-left: 18px; }
.wedit-said li + li { margin-top: 2px; }

.wedit label.check { font-size: 14px; color: var(--ink); margin: 6px 0; min-height: 28px; }
.wedit label.check input { width: 18px; height: 18px; flex: none; margin: 0; }
.wedit-ticks { margin-top: 10px; }

.wedit-shades { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.wedit-shades > span { margin-right: 4px; color: var(--ink-soft); font-weight: 500; }
.wedit label.shade {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0; padding: 4px 10px 4px 6px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer;
}
.wedit label.shade input { margin: 0 4px 0 0; }
.wedit label.shade .ssicon { margin-right: 4px; }

/* A super status's colour: the browser's own picker, sized like the other controls. */
input[type=color] {
  display: block; width: 72px; height: 42px; padding: 3px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--white); cursor: pointer;
}

/* Details a move requires: wrap as chips, each still a real checkbox. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.wedit .chips label.check {
  margin: 0; min-height: 0; padding: 4px 10px 4px 7px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); font-size: 13px;
}
.wedit .chips label.check input { width: 15px; height: 15px; }

.wedit-moves > .wedit-move + .wedit-move { border-top: 1px solid var(--line); }
.wedit-move { padding: 4px 0; }
/* A ticked move's settings: a box inside the "From ..." row, indented under its tick. */
.wedit-move-options {
  margin: 2px 0 10px 26px; padding: 2px 12px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
}

.wedit button.small { min-height: 36px; }
button.icon { min-width: 40px; padding-left: 0; padding-right: 0; font-size: 16px; line-height: 1; }

.wedit-checks .note { margin-top: 0; }

/* After a save is tried: a light red tag above anything still required, and
   above the row that holds it, so a closed row shows there is something inside. */
.tag-required {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--required-line);
  border-radius: 999px;
  background: var(--required-bg);
  color: var(--required-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.wedit-control > .tag-required { margin-top: 12px; }
.wedit-control > .tag-required + label { margin-top: 4px; }
details.wedit-item > summary > .tag-required { margin-bottom: 5px; }
.wedit-slot > .tag-required { margin: 2px 0 8px; }
details.wedit-item.flagged { border-color: var(--required-line); }
.wedit input[aria-invalid="true"], .wedit select[aria-invalid="true"],
.wedit textarea[aria-invalid="true"] {
  border-color: var(--required-line);
  background: #fffafa;
}

/* Save and undo, kept in reach while scrolling a long configuration. */
.wedit-savebar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.wedit-savebar .actions { margin-top: 0; }

/* A starting setup to choose, and what it would give the company; or the one
   it started from. Its name and badges on one line, spaced. */
.card > .top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.card.choice > details { margin-top: 8px; }
.card.choice > details > summary { cursor: pointer; font-size: 14px; }
.wedit-preview { margin-top: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.wedit-preview-row { padding: 9px 0; }
.wedit-preview-row + .wedit-preview-row { border-top: 1px solid var(--line); }
.wedit-preview-row .pills { margin: 4px 0; }

/* --- filtering the work (js/workfilter.js) ----------------------------------
   Chips a person ticks to narrow the work, each carrying the number of tasks
   it would show. Ticked is solid ink, the same as a primary button, so what
   is on reads at a glance without a second colour. The panel is a full-screen
   sheet on a phone and a centred dialog on a desk. */

.fchip, button.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; line-height: 1.25; text-align: left;
  text-decoration: none; cursor: pointer;
}
.fchip .dot { margin-right: 0; }
.fchip .ssicon { width: 16px; height: 16px; }
.fchip .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
button.fchip:hover, a.fchip:hover { background: var(--panel); color: var(--ink); }

.fchip[aria-pressed="true"], .fchip[aria-current="true"], .fchip.active {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.fchip[aria-pressed="true"] .n { color: rgba(255, 255, 255, 0.75); }
button.fchip[aria-pressed="true"]:hover, button.fchip.active:hover, a.fchip[aria-current="true"]:hover {
  background: #000; color: var(--white);
}
/* Offered, but nothing behind it right now. */
.fchip.zero { color: var(--muted); border-color: var(--line); }
.fchip.active .x { font-size: 16px; line-height: 1; opacity: 0.8; }

/* A Favorite or Alert, and the x that removes it, as one joined chip. */
.savedchip { display: inline-flex; }
.savedchip > .fchip:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.savedchip > .fchip.remove {
  margin-left: -1px; padding: 5px 11px;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  color: var(--muted); font-size: 16px;
}
.savedchip > .fchip.remove:hover { color: var(--ink); }

/* A button that reads as a link: "+ Add favorite", "Clear all". */
button.link {
  padding: 4px 0; border: 0; background: none; color: var(--ink);
  font-size: 14px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
button.link:hover { background: none; color: #000; }

/* The person's Favorites, under the search bar. */
.quickviews { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 12px; }
.quickviews-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-right: 4px;
}

/* The filtered list: what is ticked, then sort and save. */
.activechips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.activechips:empty { display: none; }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
label.inline { display: inline; margin: 0; }
select.compact { width: auto; padding: 6px 8px; }

dialog.sheet {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--white); color: var(--ink);
}
/* Only when open: a display value on a closed dialog would show it. */
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.35); }
body:has(dialog.sheet[open]) { overflow: hidden; }

.sheet-head {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px; background: var(--panel);
}
.sheet-options {
  display: flex; gap: 2px 22px; flex-wrap: wrap;
  padding: 0 2px 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sheet-options label.check { margin: 0; min-height: 32px; font-size: 14px; color: var(--ink); }
.sheet-options input { width: 18px; height: 18px; margin: 0; flex: none; }
.sheet-foot {
  display: flex; gap: 8px; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--line); background: var(--white);
}
.sheet-foot > button:last-child { flex: 0 1 260px; }

/* One group of chips, a white card on the sheet's grey. */
.fcard {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 14px; margin: 0 0 10px;
}
.fcard h4 { margin: 0; font-size: 15px; font-weight: 600; }
.fcard p { margin: 1px 0 10px; font-size: 13px; color: var(--muted); }
.fcard .chips { margin: 0; gap: 8px; }
.fcard-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.fgroup + .fgroup { margin-top: 10px; }
.fgroup-label { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-bottom: 4px; }

/* --- the mini panel (js/minipanel.js) --------------------------------------
   A small form beside the button that opened it: the quick job's two or three
   boxes, or the one field a task's next status is waiting on. Not the filter
   sheet: that fills the screen and dims everything behind it because it is a
   decision; this is one button's worth of typing, so it is a small panel
   lifted off the page by its shadow, with the page still there behind it. On
   a phone it sits above the thumb, across the width of the screen, where it
   can never fall off the edge; on a wider screen it sits beside the button
   that opened it. */

.minipanel-anchor { position: relative; display: inline-block; }

.minipanel {
  position: fixed;
  z-index: 25;
  left: 14px;
  right: 14px;
  bottom: 14px;
  max-width: 420px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.07);
  text-align: left;
}

.minipanel[hidden] { display: none; }

.minipanel h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}

.minipanel-box + .minipanel-box { margin-top: 8px; }
.minipanel-box label { margin: 0 0 3px; }
.minipanel .actions { justify-content: flex-end; margin-top: 12px; }
.minipanel .note { margin: 8px 0 0; }
.minipanel-message[hidden] { display: none; }

/* Why it is asking: what the move wants, and who to ask for the rest. */
.minipanel-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

/* A list clips its rows to its rounded corners, which would cut off a panel
   opened from a row (Approve and Reject on the admin page), so it stops
   clipping while one is open. */
.list:has(.minipanel:not([hidden])) { overflow: visible; }

/* --- the Add a task form (js/taskform.js) -------------------------------- */

.taskform-message[hidden] { display: none; }
.taskform-message .note { margin: 10px 0 0; }

/* --- a task's messages (js/messages.js) ----------------------------------------
   The conversation a row's button opens, in a sheet, and the job page shows
   under an opened task: where it stands, in the colour of the button that
   opened it; who said what, oldest first, the person's own a shade over;
   then the box, Send, and the green Resolved, after the mockup
   (example_html/preview_3.html). */

.msgsheet .sheet-body { background: var(--white); }
.msg-message[hidden] { display: none; }
.msg-message .note { margin: 0 0 10px; }

.msgstate {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 11px;
  border: 1px solid var(--msg-none-line); border-radius: 7px;
  background: var(--msg-none-bg); color: var(--msg-none-ink);
  font-size: 13px; font-weight: 600;
}
.msgstate.msg-reply { background: var(--msg-reply-bg); border-color: var(--msg-reply-line); color: var(--white); }
.msgstate.msg-waiting { background: var(--msg-waiting-bg); border-color: var(--msg-waiting-line); color: var(--ink); }
.msgstate.msg-resolved { background: var(--msg-resolved-bg); border-color: var(--msg-resolved-line); color: var(--white); }

.msglist { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.msgitem { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.msgitem.mine { background: var(--panel); }
.msgwho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: 13px; }
.msgwhen { color: var(--muted); font-size: 12px; font-weight: 400; }
.msgtext { margin: 5px 0 1px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Resolved, or opened again: a line between the messages, not one of them. */
.msgmark {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px;
  padding: 2px 4px; color: var(--muted); font-size: 12px; font-style: italic;
}

.msgform label { margin-top: 8px; }
.msgform textarea { min-height: 76px; }
.msgform .actions { justify-content: flex-end; margin-top: 8px; }
.msgfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.msgfoot .field-note { flex: 1 1 220px; margin: 0; }
button.msg-resolve { background: var(--msg-resolved-bg); border-color: var(--msg-resolved-line); color: var(--white); }
button.msg-resolve:hover { background: var(--msg-resolved-line); color: var(--white); }
.msg-tick { font-weight: 700; }

/* On the job page, under the task it is about. */
.taskrow-detail .msgview { margin-top: 4px; }

/* A chip of the Messages group (js/workfilter.js) wears its colour as a dot. */
.msgdot {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid var(--msg-none-line); background: var(--msg-none-bg);
}
.msgdot.msg-reply { background: var(--msg-reply-bg); border-color: var(--msg-reply-line); }
.msgdot.msg-waiting { background: var(--msg-waiting-bg); border-color: var(--msg-waiting-line); }
.msgdot.msg-resolved { background: var(--msg-resolved-bg); border-color: var(--msg-resolved-line); }

/* --- the Simulator (js/simulator.js) ----------------------------------------
   Pretend jobs, drawn as the Work page draws real ones, so nearly all of it
   is styled above: the cards, the task rows, the panels, the sheet. What is
   its own is here -- Tips, the plus the page starts from, a card's buttons
   for adding a task of one kind of work, and the Edit sheet's boxes.

   The page is the plus and whatever has been made with it, and nothing else:
   all there is to say sits under Tips, shut. The plus is green, after the
   mockup the page grew from (example_html/preview.html), and nothing else. */

/* Tips: one line under the heading until it is opened. Its own arrow, since
   a summary only as wide as its word has lost the browser's. */
.simtips { margin: 2px 0 0; }
.simtips > summary {
  display: inline-block; padding: 4px 10px 4px 0; cursor: pointer; list-style: none;
  color: var(--ink-soft); font-size: 14px; font-weight: 500;
}
.simtips > summary::-webkit-details-marker { display: none; }
.simtips > summary::before { content: "\25B8"; display: inline-block; width: 14px; }
.simtips[open] > summary::before { content: "\25BE"; }
.simtips > summary:hover { color: var(--ink); }
.simtips-body {
  max-width: 78ch; margin: 6px 0 4px; padding: 6px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink-soft); font-size: 14px;
}
.simtips-body h3 { margin: 14px 0 4px; }
.simtips-body ol, .simtips-body ul { margin: 4px 0; padding-left: 20px; }
.simtips-body li + li { margin-top: 4px; }
.simtips-body strong { color: var(--ink); }
.simtips-body .sstrip { margin: 8px 0 2px; }
.simtips-body .actions { align-items: center; margin-top: 14px; }
.simtips-body .actions .field-note { margin: 0; flex: 1 1 220px; }

/* Where the page starts: the plus, in the middle, and under it one line
   that goes once there is a job. */
.simstart { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 22px 0; }
.simstart > p { margin: 0; }
button.simplus {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--add); color: var(--white);
  box-shadow: 0 5px 14px rgba(22, 163, 74, 0.28);
}
button.simplus:hover { background: var(--add-deep); color: var(--white); }
button.simplus > svg { display: block; width: 30px; height: 30px; }

/* The foot of a pretend card: a button for each kind of work the company
   has, then Add task. A kind added a moment ago is one more of them. */
.simfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
button.kindchip {
  padding: 6px 13px; border: 1px solid var(--kind-line); border-radius: 6px;
  background: var(--kind-bg); color: var(--kind-ink);
  font-size: 14px; font-weight: 500; line-height: 1.4;
}
button.kindchip:hover { background: var(--kind-deep); border-color: var(--kind-ink); color: var(--kind-ink); }

/* Naming the kind of work, above what that kind asks for (js/taskform.js). */
.taskform-kind { margin-bottom: 2px; }

/* A line under a sheet's title, and one at the top of its body. */
.sheet-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.sheet-intro { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

/* Edit's statuses, after the mockup (example_html/preview_2.html): a button
   for each super status, two across on a phone and three on a desk, solid
   ink where picked as a ticked filter chip is, the icon carrying its colour;
   the boxes for a new status under them, in a white card; then the list in
   order, each status a white card -- its handle, its name, and under it what
   it counts as and its field, in pills, then its x. While one is dragged it
   fades, and a line in ink marks where it would land. */
.simstatuses { margin: 14px 0 6px; }
.simgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
button.simgrid-pick {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); color: var(--ink); font-size: 15px; line-height: 1.25;
}
button.simgrid-pick:hover { background: var(--panel); color: var(--ink); }
button.simgrid-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
button.simgrid-pick .ssicon { width: 16px; height: 16px; }
.simform {
  margin-top: 12px; padding: 2px 14px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
.simform-head { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.simform-head strong { color: var(--ink); font-weight: 600; }
.simlist-head { margin: 18px 0 2px; font-size: 15px; font-weight: 600; }
.simlist-note { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.simlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.simlist-item {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding: 8px 6px 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
.simlist-item.dragging { opacity: 0.4; }
.simlist-item.drop-before::before, .simlist-item.drop-after::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px; background: var(--ink);
}
.simlist-item.drop-before::before { top: -6px; }
.simlist-item.drop-after::after { bottom: -6px; }
button.simlist-handle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 40px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); cursor: grab; touch-action: none;
}
button.simlist-handle:hover { background: var(--panel); color: var(--ink); }
button.simlist-handle:active { cursor: grabbing; }
button.simlist-handle svg { display: block; width: 10px; height: 16px; }
.simlist-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.simlist-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 12px; color: var(--muted);
}
.simlist-super, .simlist-field {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; line-height: 1.5;
}
.simlist-super { background: var(--panel-deep); color: var(--ink); }
.simlist-super .ssicon { width: 12px; height: 12px; }
.simlist-field { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); }
button.simlist-remove {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); font-size: 22px; line-height: 1;
}
button.simlist-remove:hover { background: var(--panel); color: var(--act-ink); }
button.simlist-remove:disabled:hover { background: none; color: var(--muted); }
.simlist-empty {
  margin: 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 8px;
  background: var(--white); color: var(--muted); font-size: 13px; text-align: center;
}

/* A pretend task's details: its fields one under another on a phone. */
.simdetails { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
.simdetail-box { min-width: 0; }

/* A kind of work's automation, at the top of Edit, after the mockup it grew
   from (example_html/preview_2.html): a green-tinted panel holding its three
   boxes -- one above another on a phone, side by side on a desk -- then what
   they do, in a white box with the names in green, and a line marked with an
   arrow up saying that only the tasks above count. */
.simauto {
  margin: 0 0 10px; padding: 12px 14px;
  border: 1px solid var(--auto-line); border-radius: 8px; background: var(--auto-bg);
}
.simauto h4 { margin: 0; font-size: 15px; font-weight: 600; }
.simauto > p { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.simauto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.simauto-box label { margin-top: 0; color: var(--ink); font-weight: 600; }
p.simauto-said {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 6px;
  background: var(--white); color: var(--ink-soft); font-size: 13px; line-height: 1.45;
}
.simauto-said strong { color: var(--auto-ink); font-weight: 600; }
.simauto-rule {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px; padding: 7px 9px; border-radius: 6px;
  background: var(--auto-rule-bg); color: var(--auto-rule-ink); font-size: 12px; line-height: 1.45;
}
.simauto-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--add); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1;
}

/* --- wider screens ------------------------------------------------------- */

@media (min-width: 760px) {
  .sstrip { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .ssitem, button.ssitem { min-width: 62px; padding: 8px 6px 6px; }
  .ssitem .ssicon { width: 34px; height: 34px; }
  .ssitem .sslabel { display: block; font-size: 12px; white-space: nowrap; }
  .wedit-body { padding: 6px 16px 16px; }
  .wedit-ticks { display: flex; gap: 20px; flex-wrap: wrap; }
  .wedit-move-options {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;
  }
  .wedit-move-options > :not(.wedit-control) { grid-column: 1 / -1; }
  .wedit button.small { min-height: 0; }
  .jobedit form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  /* A long answer, and the buttons, take the whole width. */
  .jobedit form > .actions, .jobedit-box.wide { grid-column: 1 / -1; }
  body { font-size: 15px; }
  .wrap { padding: 0 24px 64px; }
  h1 { font-size: 26px; margin-top: 26px; }
  .counters { grid-template-columns: repeat(4, 1fr); }

  /* A job card on a desk: more room inside it. Every task on one line -- the
     icon, the bin, the status, then what it is, in fixed columns -- with what
     does not fit cut short: the details first, then the title. */
  .jobcard { padding: 16px 20px; }
  .jobcard-name { font-size: 17px; }
  .taskrow { padding: 2px 4px 2px 2px; }
  .taskrow, .taskrow-line {
    gap: 0 6px;
    grid-template-columns: 22px 20px 128px minmax(0, 1fr) auto;
    grid-template-areas: "icon bin state what msg";
  }
  .taskrow.nobin, .taskrow-line.nobin {
    grid-template-columns: 22px 128px minmax(0, 1fr) auto;
    grid-template-areas: "icon state what msg";
  }
  button.taskrow-msg { width: calc(16px + 4px + 2ch + 14px); height: 25px; border-radius: 6px; font-size: 13.5px; }
  .taskrow-msg .msgicon { width: 16px; height: 16px; }
  .taskrow-what {
    grid-area: what; min-width: 0; overflow: hidden; padding-left: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  /* The title and its kind of work take what they need, and the details get
     whatever is left: they give way first, and only a title too long for the
     whole row is cut short. */
  .taskrow-info { display: contents; }
  .taskrow-title {
    flex: 0 1 auto; min-width: 3em; line-height: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .taskrow-what .taskmeta { flex: 1 1 0; }
  .taskrow .statebox, .taskrow-line .statebox { width: 100%; min-width: 0; max-width: none; }
  .statebox { height: 20px; padding-left: 7px; font-size: 11.5px; letter-spacing: 0.01em; }
  .sstag.iconly.bare { width: 22px; height: 22px; }
  .sstag.iconly.bare .ssicon { width: 18px; height: 18px; }
  .taskrow-done { width: 22px; height: 22px; }
  button.taskrow-bin { width: 20px; height: 20px; border-radius: 4px; }
  /* One line on a desk: the line through a Completed task goes through it all. */
  .taskrow.completed::after, .taskrow-line.completed::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--muted); opacity: 0.55; pointer-events: none;
  }

  .grid.two { grid-template-columns: 3fr 2fr; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .row .meta { gap: 16px; }
  dialog.sheet {
    width: 720px; max-width: calc(100% - 48px); height: auto; max-height: calc(100% - 64px);
    margin: 32px auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  }
  /* A sheet holding a few boxes, not a screenful of chips: as tall as they are. */
  dialog.sheet.fit { height: fit-content; }
  /* An automation's three boxes, side by side, as the mockup has them; and
     the super statuses to pick from, three across. */
  .simauto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .simgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A pretend task's fields two across; a list of tags, the whole width. */
  .simdetails { grid-template-columns: 1fr 1fr; }
  .simdetail-box.wide { grid-column: 1 / -1; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=search], select, textarea { font-size: 15px; }
  /* Beside the button that opened it, where there is room for it. */
  .minipanel {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    right: auto;
    bottom: auto;
    width: 300px;
  }

  /* Anchored to something inside a list or a row of buttons, where there is
     no room beside it: just below, down its left edge. */
  .taskrow-ss .minipanel, .moves .minipanel, .row .actions .minipanel { top: calc(100% + 6px); left: 0; }

  /* At the right-hand end of a heading, where beside it is off the page:
     just below, down its right edge. */
  .listhead .minipanel { top: calc(100% + 6px); left: auto; right: 0; }
}

@media (min-width: 1100px) {
  .counters { grid-template-columns: repeat(6, 1fr); }

  /* Room for a longer status name before it is cut short. */
  .taskrow, .taskrow-line { grid-template-columns: 22px 20px 150px minmax(0, 1fr) auto; }
  .taskrow.nobin, .taskrow-line.nobin { grid-template-columns: 22px 150px minmax(0, 1fr) auto; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  header.bar, .actions, .moves, .searchbar, .quickviews, .filterbar,
  dialog.sheet, .minipanel, .kebab, .taskrow-bin, .taskrow-msg, .jobcard-foot, .toast { display: none; }
  .card, .jobcard { border-color: #999; break-inside: avoid; }
}