/* archive: dark theme only, mobile first. No inline styles anywhere. */
:root {
  --bg: #0e1116;
  --bar: #0a0d11;
  --surface: #141820;
  --surface-2: #1a1e26;
  --border: #2a3040;
  --text: #b8c4d8;
  --muted: #8a93a8;
  --accent: #7fb3d8;
  --danger: #c45a6a;
  /* Tinted fills for buttons and badges: the accent mixed down into the page. */
  --accent-bg: #1f2535;
  --accent-bg-hover: #273044;
  --danger-bg: #261a1e;
  --radius: 8px;
  --gap: 12px;
  /* The sticky top bar's height, measured by app.js; the fallback is close enough to
     lay out with before it runs. */
  --bar-h: 56px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 var(--gap); }

code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Top bar */
.topbar {
  padding: 8px 0;
  background: var(--bar);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* The bar spans the window; the logo, search and menu inside it keep the same column as
   the content below, so they line up with the list. The space either side is empty until a
   saved page is docked, when it carries that page's title and controls. */
.topbar-inner { display: flex; align-items: center; justify-content: center; }

.topbar-main {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: 1;
  min-width: 0;
  max-width: 60rem;
  padding: 0 16px;
}

.topbar-actions { display: flex; align-items: center; gap: var(--gap); }

/* The icon, not a word. The box takes the drawing's shape (width: auto), so
   swapping the icon for one with different proportions can't stretch it. Only
   the height is set, and it stays under the search box's 42px, so the search
   box still sets the bar's height and the space around itself. */
.logo {
  display: flex;
  flex: none;
}

.logo img { display: block; width: auto; height: 32px; }

.search { flex: 1; min-width: 0; position: relative; }

.search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.menu { position: relative; }

/* An icon button; 20px icon plus padding keeps the height of the old text label. */
.menu summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  user-select: none;
}

.menu summary::-webkit-details-marker { display: none; }

.menu summary .menu-icon { width: 20px; height: 20px; }

.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.menu nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
}

/* Menu icons: flat shapes in the text colour with an accent part, like static/icon.svg. */
.menu-icon { flex: none; width: 18px; height: 18px; }

.menu-icon .ic-main { fill: var(--text); }

.menu-icon .ic-accent { fill: var(--accent); }

.menu nav a:hover, .menu nav a:focus { background: var(--border); }

/* Content */
.content {
  max-width: 60rem;
  margin: 0 auto;
  padding: 16px;
}

.message {
  max-width: 34rem;
  margin: 12vh auto 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.message .status {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.command {
  overflow-x: auto;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.button {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.button:hover, .button:focus { background: var(--accent-bg-hover); }

@media (min-width: 48rem) {
  .topbar { padding: 10px 0; }
  .topbar-main { gap: 16px; padding: 0 24px; }
  .content { padding: 24px; }
}

/* Forms */
label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 0.9375rem; }

/* `.field`: a name field made type="search" so password managers (PassFF looks only at text-like
   types) don't offer logins for it. Looks and behaves like a text field. */
input[type="text"], input[type="url"], input[type="password"], input.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

input[type="text"]:focus, input[type="url"]:focus, input[type="password"]:focus, input.field:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 18px;
  color: var(--text);
}

label.checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

button { font: inherit; cursor: pointer; }

button.button { border: 1px solid var(--accent); }

.login button.button { width: 100%; padding: 10px 14px; }

.form-error {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--danger);
  background: var(--surface-2);
  border-radius: 4px;
}

.button-secondary {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
}

/* Menu: log out is a form */
.menu nav form { margin: 0; border-top: 1px solid var(--border); }

.menu nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

.menu nav button:hover, .menu nav button:focus { background: var(--border); }

.notice-count {
  min-width: 2rem;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* Notices */
.notice-stack { max-width: 60rem; margin: 0 auto; padding: 12px 16px 0; }

.notices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.notice-upload_failed, .notice-key_disabled, .notice-job_failed { border-left-color: var(--danger); }

.notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.notice-date { display: block; color: var(--muted); font-size: 0.8125rem; }

.notice form { margin: 0; }

.dismiss {
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}

.dismiss:hover, .dismiss:focus { color: var(--text); }

.notice-stack-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.875rem;
}

.notice-stack-footer form { margin: 0; }

.heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }

.heading-row h1 { margin: 0 0 var(--gap); }

.empty { color: var(--muted); }

@media (min-width: 48rem) {
  .notice-stack { padding: 16px 24px 0; }
}

/* Lists */
.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.favicon { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 4px; object-fit: contain; }

/* A saved page that came without a favicon falls back to the archive's own icon. */
.favicon-placeholder { display: inline-block; background: center/contain no-repeat url("/static/icon.svg"); }

.page-title-row .favicon { width: 24px; height: 24px; margin-top: 4px; }

.row-main { min-width: 0; flex: 1; }

.row-title { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }

.row-title:hover, .row-title:focus { color: var(--accent); text-decoration: underline; }

.row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.875rem; }

.marker { padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; line-height: 1.5; }

.marker-new { border-color: var(--accent); color: var(--accent); }

/* About three lines, the match on the middle one; the excerpt length suits the screen. */
.snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.snippet-wide { display: none; }

@media (min-width: 48rem) {
  .snippet-narrow { display: none; }
  .snippet-wide { display: inline; }
}

.snippet mark { background: none; color: var(--text); font-weight: 700; }

.snippet-label { margin-right: 4px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; }

/* Search results */
.search-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }

.result-count { margin: 0; font-size: 1.125rem; }

.tag-filter { display: flex; align-items: center; gap: 8px; }

.active-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 1; }

.load-more { margin: 16px 0; text-align: center; }

.load-more a { display: inline-block; text-decoration: none; }

/* Page view */
/* Title row: favicon and title, then the edit pencil, read-later star and "More" menu at the end. */
.page-title-row { display: flex; gap: 4px 12px; align-items: flex-start; }

.page-title-row h1 { margin-bottom: 8px; overflow-wrap: anywhere; }

.edit-title, .note-open, .read-later-toggle, .page-more { flex: none; }

.read-later-toggle { margin: 0; }

/* Narrow screens: the title takes the whole line beside the favicon, and the icons share the
   next line with the site and date, which wrap in the room left of them. The title row's
   items and the date line are laid out together in one grid. */
@media (max-width: 40rem) {
  .page-header { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); align-items: start; margin-bottom: 4px; }
  .page-title-row { display: contents; }
  .page-title-row .favicon { grid-row: 1; grid-column: 1; margin-right: 12px; }
  .page-title-row h1 { grid-row: 1; grid-column: 2 / -1; }
  .page-title-row .edit-title[open] { grid-row: 1; grid-column: 2 / -1; margin-bottom: 4px; }
  .page-meta { grid-row: 2; grid-column: 1 / 3; margin: 0; padding-top: 4px; font-size: 0.875rem; }
  .edit-title, .note-open, .read-later-toggle, .page-more { grid-row: 2; margin-left: 2px; }
  .edit-title { grid-column: 3; }
  .page-header:has(.edit-title[open]) .note-open { grid-column: 3; }
}

.edit-title { margin-left: auto; }

.icon-button, .edit-title summary, .page-more summary {
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 30px;
}

.icon-button:hover, .icon-button:focus-visible,
.edit-title summary:hover, .edit-title summary:focus-visible,
.page-more summary:hover, .page-more summary:focus-visible, .page-more[open] summary { color: var(--text); border-color: var(--border); }

.icon-button.is-on { color: var(--accent); }

/* The notepad: a link drawn like the ✎ and ☆ beside it. */
.note-open { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; }

.note-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.edit-title summary { cursor: pointer; list-style: none; user-select: none; }

.edit-title summary::-webkit-details-marker { display: none; }

.page-more summary { padding: 0 10px; }

.page-more nav { z-index: 5; }

.menu nav button.danger { color: var(--danger); }

.edit-title .when-open, .edit-title[open] .when-closed { display: none; }

.edit-title[open] .when-open { display: inline; }

/* Editing: the field takes the title's place, with Cancel beside it. */
.page-title-row:has(.edit-title[open]) h1 { display: none; }

.edit-title[open] { flex: 1; min-width: 0; }

.edit-title[open] summary { float: right; margin: 6px 0 0 8px; color: var(--accent); font-size: 1rem; }

.edit-title[open] .inline-form { margin: 0 0 8px; }

.page-meta { margin: 0 0 8px; color: var(--muted); }

/* Page view groups: title, buttons and tags, then note, then versions, each with room and a divider.
   The buttons and tags share a row, tags at the right; on narrow screens the tags wrap underneath.
   Top-aligned, so with many tags the buttons stay level with the first line of tags. */
.page-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; margin: 24px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.page-view .page-actions { gap: 12px; margin: 0; }

.page-view .page-actions .button, .page-view .page-actions .button-secondary { padding: 10px 16px; line-height: 1.5; font-size: 1rem; }

.page-view .page-actions .button { padding-left: 24px; padding-right: 24px; }

.page-tags { flex: 1 1 16rem; }

/* The chips and the add field wrap as one flow, so the field follows the last chip.
   The top padding centres the first line (30px) on the buttons (46px). */
.page-tags .tag-row { justify-content: flex-end; padding-top: 8px; }

.page-tags .tag-row .chips { display: contents; }

.page-view .note { margin-top: 20px; }

/* Narrow screens: the two buttons split the width, and the tag field fills the rest of its
   line, so buttons and tags share both edges. A note area with nothing shown takes no room. */
@media (max-width: 40rem) {
  .page-bar { gap: 12px; margin-top: 16px; padding-bottom: 16px; }
  .page-view .page-actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .page-view .page-actions .button, .page-view .page-actions .button-secondary { flex: 1 1 0; padding: 8px 12px; text-align: center; }
  .page-tags .tag-row { justify-content: flex-start; padding-top: 0; }
  .page-tags .tag-add { flex: 1 1 8rem; }
  .page-view .note:not(:has(> .note-body, > .note-edit[open])) { margin-top: 0; }
  /* ...and then the versions don't need a divider of their own under the buttons' one. */
  .page-view .note:not(:has(> .note-body, > .note-edit[open])) + .versions { margin-top: 0; padding-top: 16px; border-top: 0; }
}

.page-view .note h2 { margin-top: 0; }

.page-view .backlinks h2 { margin-top: 28px; }

.page-view .versions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }

.inline-form { display: flex; gap: 8px; margin: 8px 0; }

.inline-form input[type="text"], .inline-form input.field { flex: 1; min-width: 0; }

input.field { appearance: none; }

input.field::-webkit-search-cancel-button { display: none; }

h2 { font-size: 1.125rem; margin: 24px 0 8px; }

h3 { font-size: 1rem; margin: 20px 0 4px; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

th, td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }

/* Buttons in table rows and next to a device name sit in tight rows. */
td .button, .device-head .button { padding: 4px 10px; font-size: 0.875rem; }

th { color: var(--muted); font-weight: 600; }

td.num, th.num { text-align: right; }

.nowrap { white-space: nowrap; }

.table-scroll { overflow-x: auto; }

tr.failed td:last-child, td.failed { color: var(--danger); }

td.ok { color: var(--text); }

td form { margin: 0; }

/* Panels and settings */
.panel {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel h1, .panel h2 { margin-top: 0; }

.hint { color: var(--muted); font-size: 0.875rem; margin: 4px 0 12px; }

/* Settings: one tab per category. A wrapping row of tabs on phones, a column on the left on
   wider screens. The chosen tab is a tinted chip, like the buttons. */
.settings-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.settings-tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
}

.settings-tabs a:hover, .settings-tabs a:focus { color: var(--text); background: var(--surface-2); }

/* Tab icons: drawn like .menu-icon, but the main part follows the tab's text colour. */
.tab-icon { flex: none; width: 18px; height: 18px; }

.tab-icon .ic-main { fill: currentColor; }

.tab-icon .ic-accent { fill: var(--accent); }

.settings-tabs a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.settings-body { min-width: 0; }

@media (min-width: 48rem) {
  .settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px; align-items: start; }
  .settings-tabs ul { flex-direction: column; gap: 4px; margin: 0; }
  .settings-tabs a { border-color: transparent; }
  .settings-tabs a[aria-current="page"] { border-color: var(--accent); }
}

/* Phones: the tabs are an even grid of two columns, each with its icon and name. A long name
   wraps inside its tab, and the other tab in that row grows to match. */
@media (max-width: 40rem) {
  .settings-tabs ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .settings-tabs li { display: flex; min-width: 0; }
  .settings-tabs a { flex: 1; min-width: 0; padding: 7px 10px; white-space: normal; line-height: 1.25; font-size: 0.9375rem; }
}

.form-ok {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 4px;
}

select {
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

input[type="file"] { display: block; max-width: 100%; margin: 8px 0 12px; color: var(--muted); }

.copy-row { display: flex; gap: 8px; margin: 12px 0; }

.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* `hidden` wins over classes that set display, such as .button. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a.button-secondary { display: inline-block; text-decoration: none; }

.page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* Viewer: header bar plus the frame filling the remaining height */
body.viewer { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

body.viewer .content { flex: 1; display: flex; flex-direction: column; max-width: none; width: 100%; margin: 0; padding: 0; min-height: 0; }

.viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--bar);
  border-bottom: 1px solid var(--border);
}

.viewer-back { color: var(--text); text-decoration: none; font-size: 1.25rem; padding: 0 4px; }

.viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }

.viewer-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.viewer-date { color: var(--muted); font-size: 0.8125rem; }

.viewer-actions { display: flex; align-items: center; gap: 8px; }

.viewer-actions .button-secondary, .viewer-actions summary { padding: 6px 10px; font-size: 0.875rem; }

.viewer-actions .menu nav a[aria-current="page"] { color: var(--accent); }

.viewer-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }

@media (max-width: 40rem) {
  .viewer-bar { flex-wrap: wrap; }
  .viewer-title { flex-basis: calc(100% - 3rem); }
  .viewer-actions { width: 100%; justify-content: flex-end; }
}

/* Tags (colours come from /tags.css, §17.2) */
.tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tag-bg, var(--surface-2));
  color: var(--tag-fg, var(--text));
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.tag:hover, a.tag:focus, .tag a:hover, .tag a:focus { text-decoration: underline; }

.tag a { color: inherit; text-decoration: none; }

.tag-large { font-size: 1.125rem; padding: 2px 12px; vertical-align: middle; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; padding: 0; }

.chips:empty { display: none; }

.chips .tag { font-size: 0.875rem; padding-right: 2px; }

.chips form { display: inline; margin: 0; }

.chip-remove {
  margin-left: 2px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  line-height: 1.4;
}

.chip-remove:hover, .chip-remove:focus { background: rgba(0, 0, 0, 0.2); }

/* Tag chips and the add field share one row. */
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.tag-row .chips { gap: 8px; margin: 0; }

/* Chips and the add field share one height (30px). */
.tag-row .tag { padding: 0 4px 0 12px; font-size: 0.9375rem; line-height: 30px; }

.tag-add { display: flex; flex: 0 1 13rem; min-width: 8rem; margin: 0; }

.tag-add input.field { padding: 4px 12px; border-radius: 999px; font-size: 0.9375rem; line-height: 20px; }

.tag-field { position: relative; flex: 1; min-width: 0; }

.tag-field input { width: 100%; }

.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }

.list-head h1 { margin: 0; }

.scoped-search { display: flex; gap: 8px; flex: 1; max-width: 24rem; position: relative; }

.scoped-search input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.tag-list { list-style: none; margin: 0; padding: 0; }

.tag-item { padding: 10px 0; border-bottom: 1px solid var(--border); }

.tag-item-head { display: flex; align-items: center; gap: 12px; }

.tag-item-head .tag { font-size: 0.9375rem; }

.tag-count { color: var(--muted); font-size: 0.875rem; }

.tag-edit summary { cursor: pointer; color: var(--accent); width: max-content; margin-top: 4px; font-size: 0.875rem; }

.tag-edit form { margin: 8px 0; }

.tag-edit .inline-form { max-width: 28rem; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.swatch-label { color: var(--muted); font-size: 0.875rem; margin-right: 4px; }

.swatch { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 50%; }

.swatch.is-current, .swatch:focus { border-color: var(--text); }

.swatch-0 { background: #c45a6a; }
.swatch-1 { background: #af65a1; }
.swatch-2 { background: #9a70d8; }
.swatch-3 { background: #8c92d8; }
.swatch-4 { background: #7fb3d8; }
.swatch-5 { background: #65b2c8; }
.swatch-6 { background: #4ab0b8; }
.swatch-7 { background: #5ab499; }
.swatch-8 { background: #6ab87a; }
.swatch-9 { background: #97a559; }
.swatch-10 { background: #c49238; }
.swatch-11 { background: #c47651; }

input[type="color"] { width: 48px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }

.danger { color: var(--danger); }

button.button.danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

.page-actions form { margin: 0; }

/* Versions: folded when there are many. */
.versions > summary { width: max-content; margin: 0 0 8px; cursor: pointer; }

.versions > summary h2 { display: inline; margin: 0; }

/* As wide as its content, not the page. */
.versions table { width: auto; max-width: 100%; }

.versions td, .versions th { padding-right: 24px; }

.versions .version-actions { padding-right: 0; }

.versions .version-actions form { display: inline; }

.versions .version-sep { margin: 0 8px; color: var(--muted); }

.versions .version-trash { color: var(--muted); }

.versions .version-trash:hover, .versions .version-trash:focus-visible { color: var(--danger); }

/* Narrow screens: no columns. Each version is one line of date, size and actions, with its
   title (when titles differ) on a line below. */
@media (max-width: 40rem) {
  .versions table, .versions tbody { display: block; width: 100%; }
  .versions thead { display: none; }
  .versions tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .versions td { padding: 0; border: 0; }
  .versions .version-size { color: var(--muted); font-size: 0.875rem; text-align: left; }
  .versions .version-title { grid-row: 2; grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
}

/* Notes */
.note-body { overflow-wrap: anywhere; }

.note > .note-body {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.note-body > :first-child { margin-top: 0; }

.note-body > :last-child { margin-bottom: 0; }

.note-body pre { overflow-x: auto; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.note-body :not(pre) > code { padding: 0 4px; background: var(--surface-2); border-radius: 4px; }

.note-body blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }

.note-body img { max-width: 100%; }

.note-body ul.contains-task-list, .note-body li.task-list-item { list-style: none; }

/* The editor is opened and closed from the notepad icon, so its summary is never shown. */
.note-edit > summary { display: none; }

.note-edit[open] { margin-top: 8px; }

.note-preview { margin: 8px 0 12px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); }

.note-preview .hint { margin-top: 0; }

kbd { padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 0.8125rem; }

.note-editor { position: relative; }

textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: 0.9375rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  resize: vertical;
}

textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.note-buttons { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 1em 0; }

/* The trash's confirmation sits inside the editor's form, so it is a span, not a form: its
   Discard button submits the separate #note-discard form. */
.note-discard .media-hint { display: block; }

.picker {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  max-height: 16rem;
  overflow-y: auto;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.picker li { padding: 6px 12px; cursor: pointer; overflow-wrap: anywhere; }

.picker li[aria-selected="true"], .picker li:hover { background: var(--surface-2); }

.picker .picker-empty { color: var(--muted); cursor: default; }

.backlinks ul { margin: 0; padding-left: 20px; }

.button:focus-visible, .button-secondary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Waiting list: a counter in the top bar on phones, a bar under it on PCs */
.waiting-count {
  min-width: 2rem;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.waiting-bar { display: none; }

@media (min-width: 48rem) {
  .waiting-count { display: none; }
  .waiting-bar {
    display: block;
    padding: 8px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--accent);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }
  .waiting-bar:hover, .waiting-bar:focus { text-decoration: underline; }
}

.waiting-item { align-items: center; flex-wrap: wrap; }

.waiting-item .row-title { display: block; }

.waiting-address { display: block; color: var(--text); overflow-wrap: anywhere; }

.waiting-item .row-title + .waiting-address { color: var(--muted); font-size: 0.9375rem; }

a.marker { color: var(--text); text-decoration: none; }

a.marker:hover, a.marker:focus { border-color: var(--accent); }

.waiting-actions { display: flex; gap: 8px; align-items: center; }

.waiting-actions form { margin: 0; }

/* Settings: cleaning rules and tester */
.rewrite-rules { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }

.rewrite-rules legend { padding: 0; color: var(--muted); font-size: 0.9375rem; }

.rewrite-rules td:first-child { width: 2rem; color: var(--muted); }

.rewrite-rules input[type="text"], #cleaning-remove, #cleaning-address {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}

.rewrite-rules input[type="text"] { min-width: 12rem; padding: 6px 8px; }

.tester-result:empty { display: none; }

.tester-steps { margin: 12px 0; padding-left: 1.5rem; }

.tester-steps li { margin: 0 0 8px; }

.tester-label { display: block; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }

.tester-steps code { overflow-wrap: anywhere; }

.tester-steps li:last-child code { color: var(--accent); font-weight: 600; }

.tester-steps li.skipped code { color: var(--danger); text-decoration: line-through; }

.rule-errors ul { margin: 0 0 12px; padding-left: 1.5rem; }

.rule-errors pre { margin: 4px 0 0; padding: 8px; overflow-x: auto; background: var(--bg); border-radius: 4px; font-size: 0.8125rem; }

/* Below the sticky top bar when the page jumps to it. */
#tester { scroll-margin-top: 5rem; }
.pattern-help { margin: 0 0 16px; }
.pattern-help summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
.pattern-help table { width: auto; margin: 8px 0; }
.pattern-help td:first-child { white-space: nowrap; }
ul.hint, ol.hint { padding-left: 1.25rem; }
ul.hint li, ol.hint li { margin: 0 0 4px; }
.reset-rules summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }

/* Trash */
.trash-item { flex-wrap: wrap; }

.trash-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }

.trash-actions form { margin: 0; }

.confirm summary { cursor: pointer; width: max-content; padding: 6px 0; list-style: none; }

.confirm summary::-webkit-details-marker { display: none; }

.confirm[open] summary { margin-bottom: 6px; }

.countdown { color: var(--danger); }

.trash-versions { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); }

.trash-versions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 0; }

.trashed-banner { border-left: 3px solid var(--danger); }

.trashed-banner p { margin: 0 0 8px; }

.trashed-banner form { margin: 0; }

/* Icons for Restore and Delete forever are for phones (below). */
.trash-actions .media-icon { display: none; }

/* Phones: the title shares its line with two icon buttons, and the details take the full
   width under both. Delete forever's confirmation drops down below its icon. */
@media (max-width: 40rem) {
  .trash-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 8px; padding: 8px 0; }
  .trash-item > .row-main { display: contents; }
  .trash-item .row-title { grid-row: 1; grid-column: 1; padding-top: 4px; }
  .trash-item > .row-main > .row-meta { grid-row: 2; grid-column: 1 / -1; }
  .trash-item .trash-versions { grid-row: 3; grid-column: 1 / -1; }
  .trash-item > .trash-actions { grid-row: 1; grid-column: 2; }
  .trash-actions { position: relative; flex-wrap: nowrap; align-items: center; gap: 2px; }
  .trash-actions .media-icon { display: block; }
  .trash-actions .trash-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .trash-actions .trash-restore, .trash-actions .trash-purge {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted);
  }
  .trash-actions .trash-restore:hover, .trash-actions .trash-restore:focus-visible,
  .trash-actions .trash-purge:hover, .trash-actions .trash-purge:focus-visible,
  .trash-actions .confirm[open] .trash-purge { color: var(--text); border-color: var(--border); background: var(--surface); }
  .trash-actions .confirm[open] .trash-purge .ic-main, .trash-actions .confirm[open] .trash-purge .ic-accent { fill: var(--danger); }
  .trash-actions .confirm[open] summary { margin-bottom: 0; }
  .trash-actions .confirm > form {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  }
  .trash-actions .confirm > form .button { white-space: nowrap; }
}

/* Merging pages */
.merge-sides { display: grid; gap: 12px; }

@media (min-width: 48rem) {
  .merge-sides { grid-template-columns: 1fr 1fr; }
}

.merge-side { margin: 0; min-width: 0; }

.merge-side h2 { margin: 4px 0 8px; overflow-wrap: anywhere; }

.merge-side .hint { margin: 0; }

.merge-side .chips { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.merge-effects { padding-left: 20px; }

.merge-effects li { margin: 4px 0; overflow-wrap: anywhere; }

.merge-warning { margin: 12px 0; color: var(--danger); }

/* Settings: devices, password, 2FA */
.device-list { list-style: none; margin: 0; padding: 0; }
.device { padding: 12px 0; border-bottom: 1px solid var(--border); }
.device:first-child { padding-top: 0; }
.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.device-head form { margin: 0; }
/* align-items keeps Rename at its own height instead of the name input's. */
.device-name { flex: 1 1 14rem; min-width: 0; align-items: center; }
.device-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 0.875rem; }
.device-facts div { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.device-facts dt { color: var(--muted); }
.device-facts dd { margin: 0; overflow-wrap: anywhere; }
/* Upload keys use the same layout as devices. */
.key-list { margin-bottom: 8px; }
.key-name { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.device-facts dd.failed { color: var(--danger); }
.account-form { max-width: 24rem; }
.account-form input { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
p.ok { color: var(--text); font-weight: 600; }
.qr { display: inline-block; line-height: 0; }
.qr svg { width: 240px; height: 240px; max-width: 100%; }
.secret { font-size: 1.1rem; word-spacing: 0.3em; overflow-wrap: anywhere; }

/* Jobs */
.job-facts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 12px; }
.job-facts dt { color: var(--muted); font-size: 0.875rem; }
.job-facts dd { margin: 0; }
.job-facts dd.failed { color: var(--danger); }
.job-message { font-weight: 600; }
/* Media that cannot be opened because its key is missing (§10a.5). */
.media-key-warning { margin: 4px 0 0; color: var(--danger); font-size: 0.875rem; }

 /* What media storage holds, in the Media storage settings (§10a.9). */
.facts { list-style: none; padding: 0; margin: 0 0 12px; }
.facts li { padding: 4px 0; border-top: 1px solid var(--border); }

.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li { padding: 6px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.job-list .failed { color: var(--danger); }

/* The saved page, embedded at the foot of the page view (DESIGN §4).
   The section is exactly the window minus the sticky top bar, and it is the last
   thing on the page, so the outer scroll runs out at the moment the saved page sits
   squarely under the bar. It sits outside the content column, because a saved page is
   a whole web page: in the column its text comes out tiny and wide layouts grow a
   scrollbar of their own. */
body:has(.page-embed) .content { padding-bottom: 0; }

/* Anchors the page view jumps to (adding a tag returns to #tags): clear of the sticky
   top bar, which would otherwise cover what was jumped to. The frame itself keeps an
   exact bar's worth, so it docks flush. */
#page-top, #tags, #note, #versions { scroll-margin-top: calc(var(--bar-h) + 8px); }

.page-embed {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--bar-h));
  height: calc(100dvh - var(--bar-h));
  margin: 24px 0 0;
  scroll-margin-top: var(--bar-h);
}

/* The frame's own controls live in the top bar, and appear there only once the saved page
   is docked — so reading it leaves exactly one bar on screen, not two. */
.bar-meta, .bar-tools { display: none; }

/* Both sit in the space beside the content column, which is narrow on a small monitor, so
   they clip rather than push the logo and search out of place. The title takes one line and
   the date and size the one under it; the whole block is the link back up, so it is worth
   aiming at. */
body.embed-docked .bar-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding-left: 16px;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
}

body.embed-docked .bar-meta:hover, body.embed-docked .bar-meta:focus-visible { background: var(--surface); }

/* No `overflow: hidden` here, unlike the metadata block: the Versions menu drops out of
   this box, and clipping it leaves a menu that opens onto nothing. */
body.embed-docked .bar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  gap: var(--gap);
  padding-right: 16px;
}

/* On one shared row the title's width is whatever is left once the search has its share, so a
   long title clips instead of squeezing the search box to nothing. */
body.embed-docked .topbar-main { flex: 2 1 0; }

.bar-up { display: flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; }

.bar-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bar-meta:hover .bar-title, .bar-meta:focus-visible .bar-title { color: var(--accent); }

.bar-when { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }

.bar-tools .button-secondary, .bar-tools .menu summary { padding: 6px 10px; font-size: 0.875rem; }

.bar-versions nav a { white-space: nowrap; }

.bar-versions nav a[aria-current="page"] { color: var(--accent); }

/* The buttons' icons and the link back up are for phones (below). */
.bar-icon, .bar-tools .bar-top { display: none; }

/* A phone: the metadata block would leave its title no room, so it gives way, and the way
   back up becomes the last button, where a right thumb reaches it. The buttons are icons the
   size of the menu button beside them, with a smaller gap to spare the search box. */
@media (max-width: 40rem) {
  body.embed-docked .bar-meta { display: none; }
  body.embed-docked .topbar-main { padding-right: 8px; }
  body.embed-docked .bar-tools { gap: 8px; }
  .bar-tools .bar-top { display: flex; }
  .bar-tools .bar-icon { display: block; width: 20px; height: 20px; }
  .bar-tools .bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar-tools .button-secondary, .bar-tools .menu summary { display: flex; padding: 10px; }
}

.embed-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.embed-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* The shield catches the wheel so the page view scrolls, not the saved page inside its
   frame. It lifts on a click, which is also what lets the browser hand the wheel over:
   one unbroken wheel gesture can only ever drive one scrolling box. */
.embed-shield {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 0;
  cursor: pointer;
}

.embed-hint {
  padding: 10px 22px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bar);
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Touch screens lift the shield on docking, so there's nothing to tap for. */
@media (pointer: coarse) { .embed-hint { display: none; } }

/* Wide enough for the gutters either side of the content column: the title goes in the left
   one and the controls in the right one, leaving search and menu exactly where they always
   sit. Narrower than that there are no gutters, so everything shares one row and the date,
   then the title, give way. */
@media (min-width: 90rem) {
  body.embed-docked .topbar-inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 60rem) 1fr;
  }
  body.embed-docked .bar-meta { grid-column: 1; padding-left: 24px; }
  body.embed-docked .topbar-main { grid-column: 2; }
  body.embed-docked .bar-tools { grid-column: 3; padding-right: 24px; }
}

@media (max-width: 62rem) {
  body.embed-docked .bar-when { display: none; }
}

@media (max-width: 40rem) {
  body.embed-docked .bar-title { display: none; }
  body.embed-docked .bar-meta { flex: none; }
}

/* Media on saved pages (TECHNICAL.md §10a.9, DESIGN §4a) */

.media { margin: calc(var(--gap) * 2) 0 0; }

.media-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--gap);
  margin-bottom: 8px;
}

.media-head h2 { margin: 0; }

.media-summary { margin: 0; color: var(--muted); }

.media-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }

.media-head .button-secondary { padding: 4px 10px; font-size: 0.875rem; }

.media-key-warning { flex-basis: 100%; }

/* One line per item (§10a.9): kind icon, name, state, buttons. Rows are divided by lines
   rather than boxed, so a list of several stays short. */
.media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.media-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 4px 4px 8px;
  border-bottom: 1px solid var(--border);
}

.media-kind { display: flex; color: var(--muted); }

.media-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

a.media-name { color: var(--accent); text-decoration: none; }
a.media-name:hover, a.media-name:focus-visible { text-decoration: underline; }

.media-state { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }

.media-item.media-failed .media-state { color: var(--danger); }

.media-error { grid-column: 2 / -1; margin: 0 0 4px; color: var(--danger); font-size: 0.875rem; }

.media-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }

.media-actions form { display: inline; margin: 0; }

.media-save { padding: 2px 10px; margin-right: 4px; font-size: 0.875rem; }

/* Icons: drawn like .menu-icon; the main part follows the button's colour. */
.media-icon { flex: none; width: 18px; height: 18px; display: block; }
.media-icon .ic-main { fill: currentColor; }
.media-icon .ic-accent { fill: var(--accent); }
/* Something is wrong with the file: missing from storage (§10a.9). */
.media-icon .ic-danger { fill: var(--danger); }
.media-icon .ic-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* An arrow laid over a cloud, parted from it by a rim of the page's own colour. */
.media-icon .ic-cut { stroke: var(--bg); stroke-width: 1.5; paint-order: stroke; stroke-linejoin: round; }
.media-icon .ic-check { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Where the file is (§10a.9): a quiet icon, with the percentage while it moves. The plain
   cloud is a button, and looks like the others. */
.media-spot { display: inline-flex; align-items: center; gap: 4px; min-width: 32px; height: 32px; justify-content: center; color: var(--muted); cursor: default; }
.media-percent { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.media-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.media-icon-button:hover, .media-icon-button:focus-visible, .media-pop[open] > .media-icon-button {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.media-remove:hover .ic-main, .media-remove:hover .ic-accent,
.media-remove:focus-visible .ic-main, .media-remove:focus-visible .ic-accent,
.media-confirm[open] .media-remove .ic-main, .media-confirm[open] .media-remove .ic-accent { fill: var(--danger); }

/* A small form that drops down below its icon: Remove's confirmation, and Attach's form
   (with JavaScript the paperclip opens the file picker at once instead). */
.media-pop { position: relative; display: inline-block; }
.media-pop > summary { list-style: none; }
.media-pop > summary::-webkit-details-marker { display: none; }

.media-confirm .danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

.media-pop > form, .media-pop > .pop-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  width: min(22rem, calc(100vw - 32px));
  padding: 12px;
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.media-hint { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* In a row of buttons read from the left (Settings, Stray files) the drop-down hangs from the
   row's left edge, not its button's: from the button it would run off the panel on one side
   or, on a phone, off the screen on the other. */
.button-row:has(> .pop-left) { position: relative; }
.media-pop.pop-left { position: static; }
.media-pop.pop-left > form { left: 0; right: auto; width: min(22rem, 100%); }
.facts li .button-row { margin-top: 6px; }
/* A warning among the facts (Stray files) keeps the warning box's own padding, which
   `.facts li` would otherwise take away, leaving the text against the red bar. */
.facts li.form-error { padding: 8px 12px; margin: 4px 0; border-top: 0; }

/* Several old buckets under Previous storage: a line between them, so each one's buttons
   read as its own. */
.previous-bucket + .previous-bucket { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.button-row .inline-form { margin: 0; }

.media-more > summary { cursor: pointer; padding: 6px 8px; color: var(--accent); font-size: 0.875rem; }
.media-more[open] > summary { display: none; }

/* On a narrow screen the heading shares its line with the buttons, the summary goes below it,
   and each item's name takes its own line, with the state and buttons below. */
@media (max-width: 40rem) {
  .media { margin-top: 16px; }
  .media-head { row-gap: 2px; }
  .media-head-actions { order: 1; }
  .media-summary { order: 2; flex-basis: 100%; font-size: 0.875rem; }
  .media-key-warning { order: 3; }
  .media-item { grid-template-columns: auto minmax(0, 1fr) auto; padding: 2px 4px; }
  .media-name { grid-column: 2 / -1; }
  .media-state { grid-column: 2; }
  .media-actions { grid-column: 3; }
}

/* The Media page (§10a.12): the list's rows, with the Media section's icons and buttons. */
.media-page-summary { margin: 0 0 12px; color: var(--muted); }
.media-page-cache { margin: -8px 0 12px; color: var(--muted); font-size: 0.875rem; }
.media-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.media-filters .button-secondary { padding: 2px 12px; font-size: 0.875rem; text-decoration: none; }
.media-filters [aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.media-sort { margin-left: auto; font-size: 0.875rem; color: var(--accent); }
.media-line { align-items: center; gap: 10px; padding: 8px 0; }
.media-line .row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.media-line .row-meta a { color: var(--muted); }
.media-line .row-meta a:hover, .media-line .row-meta a:focus-visible { color: var(--accent); }
.media-line-removed .row-title { color: var(--muted); }
.media-removed { color: var(--text); }

/* Phones: two lines per file. The name shares the first with the buttons, and size, date and
   pages take the whole second, under the name. */
@media (max-width: 40rem) {
  .media-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; padding: 4px 0 6px; }
  .media-line > .row-main { display: contents; }
  .media-line .media-kind { grid-row: 1 / 3; grid-column: 1; }
  .media-line .row-title { grid-row: 1; grid-column: 2; }
  .media-line .row-meta { grid-row: 2; grid-column: 2 / -1; gap: 2px 10px; }
  .media-line .media-actions { grid-row: 1; grid-column: 3; }
}

/* Fields that only make sense together, e.g. a storage provider's details (§10a). */
.field-group { margin: 16px 0; padding: 4px 0 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Settings that don't apply to the current choice, e.g. provider details with media kept locally. */
.is-off { opacity: 0.45; }
.field-group.is-off input, .field-group.is-off label.checkbox { cursor: default; }
.field-group.is-off input:focus { outline: none; }
select:disabled { opacity: 0.45; }