/* The web UI's own styles — deliberately the extension's visual language.
   Same tokens (theme.css), same type scale, same button/chip/table/tile
   treatments as dashboard.css, so the two surfaces read as one product.
   Where a number here differs from dashboard.css, that is a bug, not a
   variation.

   The page works without this file, and without app.js. Neither of them is
   allowed to be the reason something is unreachable: no hover-only controls,
   no icon without a name, nothing that only exists once a script has run. */

* { box-sizing: border-box; }

/* color-scheme is declared by the palette in theme.css, which knows which
   theme is actually on — the operating system's preference does not. */

body {
  margin: 0;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

/* ---- Controls: the extension's .mini treatment, as the default ---- */

input, select, textarea, button {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 10px;
}
input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; padding: 0; }
input[type="file"] { padding: 4px; font-size: 12px; }

button { cursor: pointer; }
button:hover { background: var(--accent-soft); border-color: var(--accent); }
button[type="submit"]:not(.quiet):not(.link):not(.tick) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
button[type="submit"]:not(.quiet):not(.link):not(.tick):hover { background: var(--accent-strong); }
button.quiet { background: var(--panel); border-color: var(--line); color: var(--ink); }
button.quiet:hover { background: var(--accent-soft); border-color: var(--accent); }
/* A red button stays red whatever else it is: the submit rule above is more
   specific, so this one says it again with the same weight. */
button.danger, button[type="submit"]:not(.quiet):not(.link):not(.tick).danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
button.danger.quiet, button[type="submit"].danger.quiet {
  background: var(--panel); border-color: var(--line); color: var(--danger);
}
button.danger:hover, button[type="submit"]:not(.quiet):not(.link):not(.tick).danger:hover,
button.danger.quiet:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
button.link, a.link { background: none; border: none; color: var(--accent); padding: 0; cursor: pointer; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Screen-reader-only, for the labels every control has whether or not it shows
   one. A control with no name is a control a screen reader — or a script —
   cannot describe. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.spacer { flex: 1; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* ---- Frame ---- */

.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); }
.topbar nav { display: flex; gap: 2px; }
.topbar nav a {
  text-decoration: none; padding: 4px 10px; border-radius: var(--radius); color: var(--ink);
}
.topbar nav a:hover { background: var(--hover); color: var(--ink); }
.topbar nav a.here { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.topbar .search { display: flex; gap: 6px; flex: 1; max-width: 420px; }
.topbar .search input { flex: 1; min-width: 0; }
.topbar .who { color: var(--muted); margin-right: 6px; }
.topbar form.inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.topbar .theme { text-decoration: none; padding: 4px 8px; border-radius: var(--radius); }
.topbar .theme:hover { background: var(--hover); }
.pill {
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 0 6px; font-size: 11px;
}

main { padding: 12px 16px 20px; max-width: 1400px; }
footer {
  display: flex; gap: 14px; padding: 8px 16px 12px; margin-top: 24px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}

/* ---- What changed: the footer's fold, the front page's section, the page ---- */

details.changes { padding: 0 16px 14px; color: var(--muted); font-size: 12px; }
details.changes summary { cursor: pointer; }
ol.changelog { list-style: none; margin: 6px 0 4px; padding: 0; }
ol.changelog li { margin: 4px 0; font-size: 12px; color: var(--ink); }
ol.changelog.full li { font-size: 13px; margin: 8px 0; }
ol.changelog time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
ol.changelog code { font-size: 11px; }
.tag {
  display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 5px; margin-right: 3px;
  border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 1px;
}
.tag-ext { border-color: var(--accent); color: var(--accent); }

h1 { font-size: 18px; margin: 4px 0 4px; }
h2 { font-size: 14px; margin: 20px 0 8px; }
h3 { font-size: 13px; margin: 12px 0 4px; }

/* Errors and notices are part of the page: they stay put, they have an id, and
   they can be linked to. Nothing here disappears on a timer. */
.message {
  margin: 0; padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.message.error { background: var(--danger-soft); color: var(--danger); }
.message.notice { background: var(--accent-soft); }
main .message { border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; }
main .message.error { border-color: var(--danger-soft); }
main .message.notice { border-color: var(--accent-soft); }

/* The receipt for something destroyed. It is the only record of what was on
   that board that will ever exist, so it is a block rather than a strip, and
   it is in the danger colour so it cannot be skimmed past as one more notice. */
.message.gone {
  background: var(--danger-soft); color: var(--danger);
  padding: 14px 16px;
  border-bottom: 2px solid var(--danger);
}
.message.gone p { margin: 0; }
.message.gone .gone-what { font-size: 13px; line-height: 1.5; }
.message.gone .gone-what strong { margin-right: 4px; }
.message.gone .gone-after { margin-top: 6px; font-size: 12px; color: var(--danger); opacity: 0.8; }

/* ---- Forms ---- */

form.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 8px 0 4px; }
form.stack.narrow { max-width: 320px; width: 100%; }
form.stack.narrow input { width: 100%; }
form.stack label { font-size: 12px; color: var(--muted); }
form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
form.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12px; }
form.filters label { color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0; padding: 8px 10px; }
legend { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
label.check { display: flex; align-items: center; gap: 6px; padding: 2px 0; }

.field { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select { width: 100%; }

/* ---- Chips ---- */

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- The table ---- */

.counts { color: var(--muted); margin: 2px 0 6px; font-size: 12px; }

table.cards { border-collapse: collapse; width: 100%; background: var(--panel); }
table.cards th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 10;
}
table.cards th a { text-decoration: none; color: inherit; }
table.cards th a:hover { color: var(--accent); }
table.cards td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.cards tbody tr:hover { background: var(--hover); }

td.name a { font-weight: 600; text-decoration: none; color: var(--ink); }
td.name a:hover { color: var(--accent); }
.key { color: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.board { text-decoration: none; color: var(--ink); border-left: 3px solid var(--board, var(--accent)); padding-left: 6px; }
.board:hover { color: var(--accent); }
.due.overdue { color: var(--danger); font-weight: 600; }
.due.soon { color: var(--warn); }
.due.done { color: var(--ok); }
.ago, .badges { color: var(--muted); white-space: nowrap; font-size: 12px; }

.label {
  display: inline-block; padding: 0 6px; border-radius: 4px; margin-right: 3px;
  color: #fff; font-size: 11px; line-height: 16px;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font-size: 10px;
  font-weight: 600; margin-right: 2px;
}
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.empty { color: var(--muted); padding: 32px 0; text-align: center; }

tbody.group tr.group-head th {
  background: var(--panel-2); text-align: left; padding: 6px 10px;
  position: sticky; top: 0; font-size: 12px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
details.columns { margin: 4px 0 10px; font-size: 12px; }
details.columns summary { cursor: pointer; color: var(--accent); }
details.columns .chips { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; }
p.exports { margin-top: 14px; color: var(--muted); font-size: 12px; }
a.peek { text-decoration: none; color: var(--faint); padding: 0 4px; }
tbody tr:hover a.peek { color: var(--accent); }

/* ---- The quick view beside the table ---- */

.table-and-card { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.table-and-card:has(.quick) { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
@media (max-width: 900px) { .table-and-card:has(.quick) { grid-template-columns: 1fr; } }

.quick {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 12px 16px; position: sticky; top: 8px;
  box-shadow: var(--shadow);
}
.quick h2 { margin-top: 4px; font-size: 15px; }
.quick h2 a { text-decoration: none; color: var(--ink); }
.quick h2 a:hover { color: var(--accent); }
.quick .crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.quick .close { text-decoration: none; font-size: 14px; padding: 2px 6px; border-radius: var(--radius); }
.quick .close:hover { background: var(--hover); }
.quick fieldset { width: 100%; }
.quick form.stack { width: 100%; }
.quick .desc { font-size: 12px; }
ul.checklist-brief { list-style: none; padding: 0; margin: 0 0 8px; font-size: 12px; }
ul.checklist-brief li.done { text-decoration: line-through; color: var(--muted); }

/* ---- Boards ---- */

/* The boards list is the People table with different columns, on purpose:
   every other list of things on this server is a table.grid, and the one
   place a person starts from should not be the odd one out. */
/* Every column but the name is as narrow as its content, so the name absorbs
   the slack and the open table and the archived one line up with each other
   even though only one of them has a button on the end. */
table.grid.boards .ago, table.grid.boards .role { width: 1%; white-space: nowrap; }
table.grid.boards td.name a { text-decoration: none; color: var(--ink); }
table.grid.boards td.name a:hover { text-decoration: underline; }
table.grid.boards td.name .key { margin-left: 4px; }
table.grid.boards td.name .swatch { margin-right: 8px; }

/* The open boards as tiles (MEL-171), the way Trello's boards page draws
   them: the board's picture or colour on top, its name under it, a star in
   the corner. Archived ones stay a table — that list is for finding one to
   bring back, and the button wants a row. */
.board-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.board-tile { position: relative; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.board-tile:hover, .board-tile:focus-within { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transform: translateY(-1px); }
.board-tile-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.board-tile-art { display: block; height: 84px; background-color: var(--board, #0c66e4);
  background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .18)); }
.board-tile-name { padding: 8px 10px 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-tile-meta { padding: 2px 10px 9px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-star { position: absolute; top: 6px; right: 6px; margin: 0; }
.board-star button.star { width: 28px; height: 28px; padding: 0; border-radius: 6px; line-height: 1; font-size: 16px;
  background: rgba(0, 0, 0, .45); border: none; color: #fff; opacity: 0; transition: opacity .15s; }
.board-star button.star:hover { background: rgba(0, 0, 0, .65); color: #fff; }
.board-tile:hover .board-star button, .board-star button:focus-visible, .board-tile.starred .board-star button { opacity: 1; }
.board-tile.starred .board-star button.star { color: #f5cd47; }
@media (hover: none) { .board-star button { opacity: 1; } }
.board-tile-new { border-style: dashed; background: transparent; }
.board-tile-new .board-tile-link { align-items: center; justify-content: center; min-height: 128px; color: var(--muted); }
.board-tile-new:hover .board-tile-link { color: var(--ink); }
.tiles-section .section-head { margin-bottom: 12px; }

/* The board page wears its colour: a solid band at the head, a tint under
   the columns. An image covers both, with the words kept on a dark wash so
   they read over whatever the picture is. */
.board-head {
  --board: var(--accent);
  background: var(--board) center / cover no-repeat;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  border-radius: var(--radius); padding: 10px 14px; margin: 4px 0 6px;
}
.board-head h1 { margin: 0; color: #fff; }
.board-head .key { color: rgba(255, 255, 255, 0.85); }
.board-head a { color: #fff; }
.board-desc { font-size: 12.5px; max-width: 80ch; margin-top: 4px; }
.board-desc p { margin: 2px 0; }
.board-head.has-image .board-desc { display: inline-block; background: rgba(0, 0, 0, 0.4); padding: 4px 8px; border-radius: 6px; }
.board-ground { --board: var(--accent); background: color-mix(in srgb, var(--board) 16%, var(--bg)); border-radius: var(--radius); padding: 10px; }
.board-ground.has-image { background-size: cover; background-position: center; }
details.instructions { margin: 0 0 8px; }
details.instructions summary { cursor: pointer; font-size: 12px; color: var(--muted); }
details.instructions pre {
  white-space: pre-wrap; font-size: 12px; margin: 6px 0 0; max-width: 90ch;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
}
.board-words textarea, .board-look input[type="url"] { width: min(70ch, 100%); }
.board-look label { display: flex; gap: 8px; align-items: center; font-size: 12px; }

/* The board page: the extension's column treatment. */
.board-grid, .board { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.list {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0;
  width: 264px; flex: none;
}
.list h2 {
  margin: 0; padding: 8px 10px 6px; font-size: 12px; font-weight: 700;
}
.list h2 .muted { font-weight: 400; float: right; }
.list ul { list-style: none; margin: 0; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.list li {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; font-size: 12px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}
.list li:hover { border-color: var(--accent); }
.list li > a { text-decoration: none; color: var(--ink); font-weight: 500; }
.list li > .doctag { margin-right: 2px; }
.tile-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 11px; }
.list form.add { display: flex; gap: 4px; padding: 0 8px 8px; }
.list form.add input { flex: 1; min-width: 0; font-size: 12px; }

/* Labels above the meta line rather than in it: they are the thing the eye
   picks a card out by, and buried among the counts they were doing nothing. */
.tile-labels { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 5px; }

/* The counts the table has always shown and the board never did. Quiet by
   default — a card with none should look calm, not empty. */
.tile-badge { color: var(--muted); white-space: nowrap; }
.tile-badge.done { color: var(--ok, var(--muted)); }
.tile.tile-done > a { color: var(--muted); }

/* Where a column stops. It says how many are behind it, because "…" is not a
   number and this is the whole reason the cap is bearable. */
.list-more { margin: 0; padding: 0 8px 8px; font-size: 11px; }

/* The board's own chips and search, on one line above the columns. */
.board-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px;
}
.board-filters .chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; }
.board-filters input[type="search"] { min-width: 180px; }

/* What a delete is about to take, itemised. Two columns where there is room,
   because eleven one-line bullets is a scroll and a glance is the point. */
.warn ul.going {
  margin: 8px 0 0; padding: 0; list-style: none;
  columns: 2; column-gap: 24px; font-size: 12px;
}
.warn ul.going li { padding: 1px 0; break-inside: avoid; }
.warn ul.going li strong { font-variant-numeric: tabular-nums; }
.warn p.going-mirror { margin: 8px 0 0; }

/* ---- One card, as panels ---- */

article.card { max-width: 1100px; }
.crumbs { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }

.title-form { display: flex; gap: 6px; margin: 6px 0 12px; }
.title-form input {
  flex: 1; font-size: 17px; font-weight: 700;
  background: transparent; border-color: transparent; padding-left: 0;
}
.title-form input:hover { border-color: var(--line); }
.title-form input:focus { background: var(--panel); border-color: var(--accent); padding-left: 10px; }
.title-form button { align-self: center; }

.card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.card-side .pane form.stack { width: 100%; }
.card-side .pane form.stack textarea { width: 100%; }
@media (max-width: 860px) { .card-layout { grid-template-columns: 1fr; } }

.pane {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 12px;
}
/* A card's Code section (MEL-188). */
.code-list { list-style: none; padding: 0; margin: 0 0 10px; }
.code-list li { padding: 3px 0; overflow-wrap: anywhere; }
.code-list .build { white-space: nowrap; font-size: 0.9em; }

.pane > h2 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.quiet-pane { border-style: dashed; background: none; }
.card-side .pane form.inline { width: 100%; margin: 6px 0; }
.card-side .pane form.inline select { flex: 1; min-width: 0; }
.card-side fieldset { width: 100%; margin-bottom: 8px; }

.desc { line-height: 1.55; }
/* A picture in anything written — a description, a comment, a doc — fits the
   column and a glance: a phone photo is 4000 px wide. How tall is an admin's
   choice on /admin, put on <html> as --pic-h. It links to the full size
   (render.mjs). */
.desc img, .comment-text img, .board-desc img, .doc-body img {
  display: block;
  max-width: 100%;
  max-height: var(--pic-h, 400px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
a.pic { display: inline-block; cursor: zoom-in; }
.desc :first-child { margin-top: 0; }
.desc :last-child { margin-bottom: 0; }
details.edit-desc { margin-top: 10px; }
details.edit-desc summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details.edit-desc form { margin-top: 8px; width: 100%; }

.checklist ul { list-style: none; padding: 0; margin: 6px 0; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.checklist .done { text-decoration: line-through; color: var(--muted); }
button.tick { background: none; border: none; font-size: 15px; padding: 0 2px; }
/* How far a checklist is: done in one colour, in progress in another, side
   by side, and the done share as a number. */
.progress { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.progress .pct { font-size: 11px; color: var(--muted); min-width: 30px; text-align: right; }
.progress .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; display: flex; }
.progress .done { background: var(--ok); height: 100%; }
.progress .started { background: var(--accent); height: 100%; }
.checklist-brief + .progress, .checklist h3 + .progress { margin-top: 0; }
/* In progress: the half mark in the accent colour, and the name left alone —
   it is not done, so it is not struck through. */
button.tick.started { color: var(--accent); }
.checklist .started, .checklist-brief .started { color: inherit; }
.checklist h3 form.mode { margin: 0 0 0 10px; font-weight: normal; }
.checklist h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Who an item is for and when it is due: two small controls after the name,
   quiet until they hold something, and a Save that only appears when the
   keyboard is in them — with scripting on, changing either saves by itself. */
.checklist form.item-edit { margin: 0 0 0 auto; gap: 4px; flex-wrap: nowrap; }
.item-who, .item-when {
  font: inherit; font-size: 11px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--muted); max-width: 120px;
}
.item-who.set, .item-when.set { color: var(--ink); }
.item-who:hover, .item-when:hover { border-color: var(--accent); }
.item-save { display: none; font-size: 11px; padding: 1px 6px; }
.item-edit:focus-within .item-save { display: inline-block; }
.item-chip { font-size: 11px; color: var(--muted); white-space: nowrap; }
.checklist-brief .item-chip { margin-left: 4px; }

/* Mine: the cards, then the items, each saying where it lives. */
.mine-page h2 { margin-top: 18px; }
.mine-items li { flex-wrap: wrap; }
.mine-items .where { font-size: 12px; }
.mine-items .due { margin-left: auto; font-size: 12px; }
button.tick:hover { background: none; color: var(--accent); }

ul.comments, ul.history, ul.notifications { list-style: none; padding: 0; margin: 6px 0 0; }
ul.comments li, ul.history li, ul.notifications li {
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px;
}
ul.comments li:last-child, ul.history li:last-child, ul.notifications li:last-child { border-bottom: none; }
ul.notifications li.unread { font-weight: 600; }
ul.recent li { font-size: 13px; }
ul.recent .quote { font-size: 12px; margin: 4px 0 0 0; padding-left: 10px; border-left: 2px solid var(--line); white-space: pre-wrap; }
.recent-page h2 { margin: 18px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.comment-text { font-size: 13px; }
.comment-text :first-child { margin-top: 0; }
.comment-text :last-child { margin-bottom: 0; }

ul.attachments { list-style: none; padding: 0; margin: 6px 0; }
ul.attachments li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
ul.attachments .muted { font-size: 11px; }
.attach-forms { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* A context menu that is a <details>: it works closed, it works open, it works
   with a keyboard, and it works with no JavaScript at all. */
details.menu { margin: 14px 0; font-size: 13px; }
details.menu summary { cursor: pointer; color: var(--accent); }
.menu-body { padding: 10px 0 0 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
code.link-out { font-size: 11px; word-break: break-all; }
/* A link just made, to copy or email (MEL-241), and People's filter. */
input.link-out { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; max-width: 100%; }
form.set-password { margin-top: 14px; }
form.people-filter input[type="search"] { min-width: 240px; }
ul.links { list-style: none; padding: 0; }
ul.links li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; }
ul.links .muted { font-size: 11px; }

/* ---- Doc pages ---- */

.doctag { color: var(--muted); font-size: 12px; }
.doc { max-width: 760px; margin: 0 auto; }
.doc .crumbs .button { text-decoration: none; }
.doc-body { line-height: 1.6; font-size: 13.5px; }
.doc-body h1 { margin-top: 0; font-size: 22px; }
.doc-body h2 { font-size: 17px; margin: 22px 0 8px; }
.doc-body h3 { font-size: 14px; }
.doc-body pre {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; font-size: 12px;
}
.doc-body table { border-collapse: collapse; }
.doc-body th, .doc-body td { border: 1px solid var(--line); padding: 4px 10px; }
.doc-body blockquote {
  margin: 0; padding-left: 12px;
  border-left: 3px solid var(--line); color: var(--muted);
}
.outline { float: right; max-width: 220px; margin: 0 0 12px 20px; font-size: 12px; }
.outline ul { list-style: none; margin: 0; padding: 8px 12px; border-left: 1px solid var(--line); }
.outline .l3 { padding-left: 12px; }
a.wikilink { text-decoration: none; border-bottom: 1px dashed var(--accent); }
.wikilink.missing { color: var(--muted); border-bottom: 1px dashed var(--muted); cursor: help; }
article.doc.shared { max-width: 800px; }
.shared-note { margin-top: 32px; font-size: 12px; }

/* ---- The editor ---- */

.editor-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-body.preview {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; background: var(--panel);
}
.editor-toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.editor-toolbar button { min-width: 32px; }

/* Which editor is showing: both states drawn, the current one filled. The same
   control the card panel uses — where a number here differs from dashboard.css,
   that is a bug, not a variation. */
.seg { display: inline-flex; }
.seg button { border-radius: var(--radius) 0 0 var(--radius); }
.seg button + button { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.seg button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  position: relative;
}
.doc-body.rich {
  min-height: 320px; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; background: var(--panel);
}
.doc-body.rich:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

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

.history-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .history-grid { grid-template-columns: 1fr; } }
.versions ul { list-style: none; padding: 0; margin: 0; }
.versions li { padding: 6px 8px; border-left: 2px solid transparent; }
.versions li.showing { border-left-color: var(--accent); background: var(--hover-selected); border-radius: 0 var(--radius) var(--radius) 0; }
.versions .muted { display: block; font-size: 11px; }
table.diff { border-collapse: collapse; width: 100%; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
table.diff td { padding: 1px 8px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
table.diff td.op { width: 1.5em; text-align: center; color: var(--muted); user-select: none; }
table.diff tr.added { background: var(--ok-soft); }
table.diff tr.removed { background: var(--danger-soft); }
table.diff tr.skip td { color: var(--muted); font-style: italic; background: var(--panel); }

/* ---- The front door ---- */

.front { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 820px) { .front { grid-template-columns: 1fr; gap: 24px; } }
.front-in { padding-top: 8px; }
.front-get { border-left: 1px solid var(--line); padding-left: 32px; }
@media (max-width: 820px) { .front-get { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } }
.get { margin: 20px 0 28px; }
.get h3 { margin-bottom: 4px; }
.get p { margin: 6px 0; }
.get ol { margin: 8px 0; padding-left: 20px; }
.get li { margin: 4px 0; }
.get pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; overflow-x: auto; font-size: 12px;
}
.get details summary { cursor: pointer; color: var(--accent); font-size: 12px; }
a.button {
  display: inline-block; background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 5px 14px; text-decoration: none; font-weight: 500;
}
a.button:hover { background: var(--accent-strong); color: #fff; }
.doc .crumbs a.button, .crumbs a.button { padding: 3px 10px; font-size: 12px; }
.front-docs { margin-top: 24px; font-size: 12px; }

/* ---- The front page: the extension, and how to put it on ---- */

.welcome { max-width: 700px; margin: 5vh auto 40px; padding: 0 8px; }
/* With a changelog to show, the page is two columns: the pitch, and what
   changed, on the right. One column again where there is no room for two. */
.welcome.with-aside { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 36px; align-items: start; }
@media (max-width: 860px) { .welcome.with-aside { grid-template-columns: 1fr; } }
.welcome h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; }
.welcome h1 abbr { text-decoration: none; }
.welcome h1 b { color: var(--accent); }
.welcome h1 small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; margin-top: 4px; }
.welcome .lede { font-size: 14px; color: var(--muted); margin: 0 0 16px; max-width: 600px; }
.welcome .lede strong { color: var(--ink); font-size: 16px; }
.welcome .cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.welcome .quiet { margin: 0 0 18px; font-size: 12px; max-width: 600px; }
a.button.big { font-size: 15px; padding: 10px 22px; box-shadow: var(--shadow); }
/* The store first, the zip beside it: the second is the quieter of the two. */
.welcome .steps section.store { grid-column: 1 / -1; }
.welcome .cta a.button.big.quiet { font-size: 15px; padding: 10px 22px; }

/* Perks: the topic and the first sentence, with the rest fading out below;
   hovering, focusing or clicking (a class the tiny script toggles) opens it. */
.welcome .perks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
@media (max-width: 640px) { .welcome .perks { grid-template-columns: 1fr; } }
.welcome .perks li {
  position: relative; font-size: 13px; color: var(--muted); line-height: 1.4;
  max-height: 3.9em; overflow: hidden; cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: 0 -6px;
  transition: max-height 0.25s ease, background 0.15s;
}
.welcome .perks li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg, #fff));
  transition: opacity 0.2s;
}
.welcome .perks li:hover, .welcome .perks li:focus, .welcome .perks li.open { max-height: 14em; background: var(--panel); outline: none; }
.welcome .perks li:hover::after, .welcome .perks li:focus::after, .welcome .perks li.open::after { opacity: 0; }
.welcome .perks strong { color: var(--ink); }
.welcome .perks .more { opacity: 0.55; transition: opacity 0.2s; }
.welcome .perks li:hover .more, .welcome .perks li:focus .more, .welcome .perks li.open .more { opacity: 1; }

.welcome .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .welcome .steps { grid-template-columns: 1fr; } }
.welcome .steps section {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px 10px;
}
.welcome .steps h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.welcome .steps ol { margin: 0; padding-left: 20px; font-size: 13px; }
.welcome .steps li { margin: 4px 0; }
.welcome .steps li::marker { color: var(--accent); font-weight: 600; }
/* The terminal way spans both columns, centred, so the two lists above
   keep their widths and the command has room to be one line. */
.welcome .steps section.terminal { grid-column: 1 / -1; text-align: center; }
.welcome .steps section.terminal pre { display: inline-block; text-align: left; margin: 6px auto; max-width: 100%; overflow-x: auto; }
.welcome .steps section.terminal p { margin: 6px 0 0; }
.welcome .steps p { margin: 10px 0 0; font-size: 12px; }
.welcome .steps section.terminal .warn { display: inline-block; text-align: left; max-width: 660px; }
.welcome code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px; font-size: 12px;
}
.welcome-docs { margin-top: 20px; font-size: 12px; text-align: center; }

/* Something the reader must not skim past. A rule down the side and a word in
   the warning colour — loud enough to stop on, quiet enough to live on a page
   somebody reads for pleasure. */
.warn {
  border-left: 3px solid var(--warn); background: var(--panel-2);
  border-radius: var(--radius); padding: 8px 12px; margin: 10px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--ink);
}
.warn > strong:first-child { color: var(--warn); text-transform: uppercase; letter-spacing: 0.04em; }
/* The ways out of a warning, one per line: the same shape as the numbered
   steps above it, so a wall of prose reads as a short list of options. */
.warn-ways { margin: 5px 0 0; padding-left: 18px; }
.warn-ways li { margin: 2px 0; }
.warn-ways li > strong:first-child {
  color: var(--muted); text-transform: uppercase; font-size: 10.5px;
  letter-spacing: 0.04em; margin-right: 3px;
}
kbd {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 5px; margin: 0 1px; color: var(--ink);
}

/* The right-hand column: what changed lately. */
.welcome .whats-new { position: sticky; top: 16px; border-left: 1px solid var(--line); padding: 4px 0 4px 20px; }
@media (max-width: 860px) { .welcome .whats-new { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 20px; } }
.welcome .whats-new h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.welcome .whats-new ol.changelog li { margin: 8px 0; }
.welcome .whats-new p { margin: 8px 0 0; font-size: 12px; }
.mini-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* ---- Tables that are lists of things: people, links, hooks, backups ---- */

table.grid {
  border-collapse: collapse; width: 100%; margin: 10px 0 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
table.grid th:first-child { border-top-left-radius: var(--radius); }
table.grid th:last-child { border-top-right-radius: var(--radius); }
table.grid th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel-2); white-space: nowrap; font-weight: 600;
}
table.grid td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--hover); }
table.grid tr.off td { color: var(--muted); }
table.grid td.name { font-weight: 600; }
table.grid td.name .muted { font-weight: 400; }
table.grid td .muted code { font-weight: 400; }
table.grid code { font-size: 11.5px; }
/* Counts line up under each other or they are not worth reading: right-aligned,
   tabular figures, and no wider than the number needs. */
table.grid .num {
  text-align: right; white-space: nowrap; width: 1%;
  font-variant-numeric: tabular-nums;
}
table.grid .actions { text-align: right; white-space: nowrap; }
table.grid td.actions > * { vertical-align: middle; margin: 0 0 0 6px; }
table.grid td.actions form.inline { display: inline-flex; margin: 0 0 0 6px; }
table.grid .avatar { vertical-align: middle; margin-right: 4px; }
table.grid time { font-size: 13px; color: var(--ink); margin: 0; }

/* A chip that names a role, a state, a count. */
.badge {
  display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 500;
}
.badge.accent { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-strong); }
.badge.ok { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
.badge.dim { color: var(--muted); }
.count {
  display: inline-block; min-width: 18px; text-align: center; font-size: 11px; line-height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--panel-2); color: var(--muted);
  font-weight: 600; vertical-align: 2px; margin-left: 4px;
}

/* A form on one line: labelled fields side by side, the button at the end. */
form.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 10px; }
form.row .field { width: auto; min-width: 160px; flex: 1 1 160px; max-width: 320px; }
form.row .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
form.row .field label .muted { text-transform: none; letter-spacing: 0; }
form.row button { margin-bottom: 1px; }

/* A form as a grid of labelled fields, wrapping to the room there is. */
form.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; max-width: 760px; margin: 6px 0 10px; }
form.fields .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
form.fields .field label .muted { text-transform: none; letter-spacing: 0; }
form.fields .field.submit { grid-column: 1 / -1; flex-direction: row; }

a.button.quiet, summary.button {
  display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-weight: 500; padding: 3px 10px; font-size: 12px; text-decoration: none;
}
a.button.quiet:hover, summary.button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 2px; }

/* ---- Every signed-in page: a head, panels, and a side nav when there are
   enough panels to lose your place. The admin page's shape, shared. ---- */

.page { max-width: 1180px; }
.page.with-nav { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 28px; align-items: start; }
@media (max-width: 820px) { .page.with-nav { grid-template-columns: 1fr; } }
.page-body { min-width: 0; }
.side-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
@media (max-width: 820px) { .side-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } }
.side-nav-title { margin: 0 0 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
@media (max-width: 820px) { .side-nav-title { display: none; } }
.side-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-decoration: none; color: var(--ink); padding: 5px 10px; border-radius: var(--radius); font-size: 13px;
}
.side-nav a:hover { background: var(--hover); color: var(--ink); }
.side-nav a.here { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.side-nav a .count { margin: 0; }
.page-head { margin: 0 0 6px; }
.page-head h1 { font-size: 20px; margin: 4px 0 2px; }
.page-head p { margin: 0; font-size: 12.5px; }
.page-head .badge, .page-head code { vertical-align: 1px; }
.page-head a { color: var(--accent); }

.admin-section { padding: 14px 18px 16px; margin: 14px 0 0; scroll-margin-top: 12px; }
.admin-section > .section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.admin-section > .section-head .section-aside { margin-left: auto; font-size: 12px; }
.admin-section > .section-head form.section-aside { margin: 0; }
.admin-section ul.history, .admin-section ul.notifications { margin: 0; }
.admin-section ul.history li:first-child, .admin-section ul.notifications li:first-child { padding-top: 2px; }
.admin-section form.stack .field { width: 100%; max-width: 420px; }
.admin-section form.stack fieldset { width: 100%; max-width: 640px; }
.admin-section .mine-items { margin: 0; }
.admin-section .mine-items li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.admin-section .mine-items li:last-child { border-bottom: none; }
.admin-section table.grid { width: 100%; }
.admin-section > .section-head h2 {
  margin: 0; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink);
}
.admin-section > .lead { margin: 0 0 10px; font-size: 12.5px; max-width: 760px; }
.admin-section h3 { margin: 16px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.admin-section form.inline { margin: 8px 0 0; }
.admin-section details.upload-backup { margin-top: 12px; font-size: 12.5px; }
.admin-section details.upload-backup summary { cursor: pointer; color: var(--accent); }
.admin-section details.upload-backup form { margin-top: 8px; }

/* Restoring is two steps on purpose: open it, then tick and press. The open
   fold is a small red-edged box so it reads as the serious thing it is. */
details.restore { display: inline-block; position: relative; }
details.restore summary { list-style: none; display: inline-block; cursor: pointer; }
details.restore summary::-webkit-details-marker { display: none; }
details.restore[open] summary { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
details.restore form.inline {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--panel); border: 1px solid var(--danger); border-radius: var(--radius);
  padding: 8px 10px; box-shadow: var(--shadow); white-space: nowrap; margin: 0; width: max-content;
  flex-wrap: nowrap;
}
details.restore label.check { margin: 0; }

/* ---- Misc feature sections ---- */

.mirror-note, .workflow-nudge { font-size: 12px; }

/* ---- The one thing app.js adds ---- */

#live {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--toast-bg); color: var(--toast-ink);
  padding: 8px 14px; border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 12px;
}
#live a { color: var(--toast-link); }

/* A timeline shared by link (MEL-177): one SVG, scrolling sideways inside its
   own box so the page never does. */
.tl-share { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); max-width: 100%; }
.tl-share svg { display: block; font: 12px system-ui, -apple-system, "Segoe UI", sans-serif; }
.tl-share .tl-scale, .tl-share .tl-names { fill: var(--panel); }
.tl-share .tl-scale { fill: var(--hover); }
.tl-share .tl-weekend { fill: var(--line); opacity: 0.45; }
.tl-share .tl-week { stroke: var(--line); stroke-width: 1; }
.tl-share .tl-month-edge { stroke: var(--line); stroke-width: 1.5; }
.tl-share .tl-month { font-weight: 600; fill: var(--ink, currentColor); }
.tl-share .tl-daynum { font-size: 10.5px; fill: var(--muted); }
.tl-share .tl-today { stroke: var(--accent); stroke-width: 2; opacity: 0.55; }
.tl-share .tl-group { fill: var(--hover); }
.tl-share .tl-group-name { font-weight: 600; fill: var(--ink, currentColor); }
.tl-share .tl-count { font-weight: 400; fill: var(--muted); }
.tl-share .tl-rule { stroke: var(--line); stroke-width: 0.6; }
.tl-share .tl-name { fill: var(--ink, currentColor); }
.tl-share .tl-key { font-size: 11px; fill: var(--muted); }
.tl-share .tl-bar { fill-opacity: 0.3; stroke-opacity: 0.8; stroke-width: 1; }
.tl-share .tl-bar.open { stroke-dasharray: 4 3; }
.tl-share .tl-progress { fill-opacity: 0.55; }
.tl-share .tl-bar-name { font-size: 11.5px; fill: var(--ink, currentColor); }
.tl-share .done .tl-bar-name { text-decoration: line-through; fill: var(--muted); }
.tl-share .overdue .tl-bar { stroke: var(--danger, #c9372c) !important; stroke-opacity: 1; }
.tl-share .soon .tl-bar { stroke: var(--warn) !important; stroke-opacity: 1; }
.tl-share .overdue .tl-ms, .tl-share .soon .tl-ms { stroke-width: 2; }
.tl-share .overdue .tl-ms { stroke: var(--danger, #c9372c); }
.tl-share .soon .tl-ms { stroke: var(--warn); }
.tl-share .tl-status { font-size: 11px; fill: var(--muted); }
.tl-share .late .tl-bar, .tl-share .late .tl-ms { stroke: var(--danger, #c9372c) !important; stroke-width: 2; stroke-opacity: 1; }
.tl-share .tl-ms { stroke: rgba(0, 0, 0, 0.25); }
.tl-share .tl-arrow { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.tl-share .tl-arrow.late { stroke: var(--danger, #c9372c); stroke-width: 1.8; }
.tl-share .tl-head { fill: var(--muted); }
.tl-share .tl-head.late { fill: var(--danger, #c9372c); }
.tl-share .tl-empty { fill: var(--muted); }
.tl-share-note { font-size: 12px; margin-top: 6px; }

/* A calendar shared by link (MEL-179): a month as a table, paged by links.
   The same chips as the app's calendar; a band across the days a card spans. */
.cal-share-nav { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; flex-wrap: wrap; }
.cal-share-nav h2 { margin: 0 6px; font-size: 18px; }
.cal-share-months { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.cal-share { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.cal-share table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; }
.cal-share th { padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; border-bottom: 1px solid var(--line); }
.cal-share td { vertical-align: top; height: 96px; padding: 4px; border-top: 1px solid var(--line); overflow: hidden; }
.cal-share td + td { border-left: 1px solid var(--line); }
.cal-share td.weekend { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); }
.cal-share td.other { background: var(--bg); }
.cal-share td.other .cal-share-num { color: var(--faint, var(--muted)); }
.cal-share-num { display: inline-block; font-size: 12px; color: var(--muted); padding: 0 2px; line-height: 20px; }
.cal-share td.today .cal-share-num { min-width: 20px; text-align: center; border-radius: 10px; background: var(--accent); color: #fff; padding: 0 6px; font-weight: 700; }
.cal-share ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-share-chip {
  min-height: 19px; padding: 2px 6px 2px 5px; border-radius: 4px; font-size: 12px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--board, var(--accent));
}
.cal-share-chip.start, .cal-share-chip.mid, .cal-share-chip.end {
  border: none; border-radius: 0; font-size: 11px; margin: 0 -5px;
  background: color-mix(in srgb, var(--board, var(--accent)) 22%, var(--panel));
}
.cal-share-chip.start { border-radius: 4px 0 0 4px; margin-left: 0; border-left: 3px solid var(--board, var(--accent)); }
.cal-share-chip.end { border-radius: 0 4px 4px 0; margin-right: 0; }
.cal-share-chip.done { text-decoration: line-through; color: var(--muted); }
.cal-share-chip.overdue { box-shadow: inset 0 -2px 0 var(--danger); }
.cal-share-chip.soon { box-shadow: inset 0 -2px 0 var(--warn); }
.cal-share-note { font-size: 12px; margin-top: 6px; }
@media (max-width: 600px) { .cal-share-step { display: none; } }

/* ---- Mello for Chrome, offered in the corner (MEL-217) ----
   The extension can see this server's address but can't draw on its pages,
   so the page offers it. The same pill as the one on trello.com. */
.chrome-pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 10px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 6px 24px rgba(9, 30, 66, .25);
}
.chrome-pill svg { width: 28px; height: 28px; flex: none; }
.chrome-pill .text { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; }
.chrome-pill .text small { font-weight: 400; color: var(--muted); font-size: 12px; }
.chrome-pill a.button { border-radius: 999px; }
.chrome-pill .close {
  color: var(--muted); text-decoration: none; padding: 2px 8px; border-radius: 999px;
}
.chrome-pill .close:hover { background: var(--accent-soft); color: var(--ink); }
@media print { .chrome-pill { display: none; } }