/* The dashboard (decision 103): the site's teal on paper, quiet and plain.
   Persian uses Vazirmatn, English Public Sans; layout flips with dir="rtl".

   One scale for every page (decision 143, from the design skill's app-screen
   rules, style "accent ladder": the full teal only on small marks and the one
   filled button, its pale tints on areas):
   - space on a 4px base: 4 / 8 / 12 / 16 / 24 / 32; one gutter (16px) between
     cards, fields and rows, 24px inside a card, 32px around the canvas;
   - type 12 / 13 / 14 / 16 / 24: badges, help and meta, body and labels, card
     titles, the page title;
   - controls 40px in forms, 32px for small tools (arrows, table cells), 44px
     for anything touched on a phone; radius 8px for cards, 6px for controls;
   - a card is white on the off-white ground with a 1px edge, no shadow;
     inputs are white with a 1px border one step darker.
   Canvas: the area beside the 240px side menu, 32px padding, content up to
   1152px, so at 1440 it runs from the menu to the window edge:
   1440 - 240 - 2 x 32 = 1136. A card at least 832px wide inside sets its
   title and description in a 256px column beside its fields (the skill's
   settings layout): 256 + 32 + the rest. */
:root {
  --bg: #f7f9f8;
  --surface: #ebf0ee;
  --tint: #d9ecec;
  --ink: #06525c;
  --muted: #2f737d;
  --faint: #4a7b81;
  --paper: #ffffff;
  --border: #dfe7e5;
  --rule: #edf2f0;
  --control: #b8cbc7;
  --danger: #a1260d;
  --ok: #1d6b3a;
  --radius: 8px;
  --radius-sm: 6px;
  --gap: 16px;
  --pad: 24px;
  --canvas-pad: 32px;
  --control-h: 40px;
  --control-sm: 32px;
  --fs-title: 1.5rem;
  --fs-section: 1rem;
  --fs-body: 0.875rem;
  --fs-help: 0.8125rem;
  --fs-small: 0.75rem;
  --lh: 1.5;
  /* From a label's top to its input's top: one label line and the 8px gap. */
  --label-offset: calc(var(--fs-body) * var(--lh) + 8px);
}
@media (max-width: 40rem) {
  :root { --pad: 16px; --canvas-pad: 16px; --control-h: 44px; --control-sm: 44px; }
}
* { box-sizing: border-box; }
/* Anything marked hidden stays hidden, whatever its class sets display to. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body) / var(--lh) "Public Sans", system-ui, sans-serif;
}
[dir="rtl"] body { font-family: "Vazirmatn", "Public Sans", system-ui, sans-serif; }
.main p { margin: 0 0 12px; }

/* ---- top bar: logo, the area switch, language and account */
.bar {
  display: flex; align-items: center; gap: var(--pad);
  min-height: 64px; padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.bar__brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.bar__brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-sm); }
.bar__logo { display: block; width: 44px; color: var(--ink); }
.bar__logo svg { display: block; width: 100%; height: auto; }
/* The product's name beside its mark (the skill: a screen must name its product). */
.bar__name { display: grid; line-height: 1.25; }
.bar__name > span:first-child { font-weight: 600; }
.bar__sub { font-size: var(--fs-small); color: var(--muted); }
.bar__links { margin-inline-start: auto; display: flex; align-items: center; gap: var(--gap); }
.bar .bar__site { font-weight: 600; text-decoration: none; }
.bar .bar__site:hover { text-decoration: underline; }

.main { padding: var(--canvas-pad); max-width: 64rem; margin: 0 auto; }
.panel--narrow .main { max-width: 26rem; padding-top: 48px; }

h1 { font-size: var(--fs-title); line-height: 1.33; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: var(--fs-section); line-height: 1.5; font-weight: 600; margin: 0 0 var(--gap); }
h3 { font-size: var(--fs-body); line-height: var(--lh); font-weight: 600; margin: 0 0 8px; }
.main .lead { color: var(--muted); margin: 0 0 var(--pad); max-width: 52rem; }

/* ---- cards: white, a 1px edge, 24px inside, 16px apart */
.card {
  display: flow-root;
  container-type: inline-size;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--gap);
}
/* A title followed by its description: 4px between them, 24px to the first field. */
.card > h2:has(+ p.muted) { margin-bottom: 4px; }
.card > h2 + p.muted { margin: 0 0 var(--pad); max-width: 52rem; }
.card > :last-child { margin-bottom: 0; }

/* The settings layout: in a card at least 832px wide, its title and
   description stand in a 256px column at the start and everything else
   lines up beside them. A card with work that needs the full width (the
   form builder's fields) is .card--wide and keeps its title on top. */
@container (min-width: 52rem) {
  .card:not(.card--wide) > h2:first-child {
    float: inline-start; width: 16rem; margin: 0;
  }
  .card:not(.card--wide) > h2:first-child + p.muted {
    float: inline-start; clear: inline-start; width: 16rem; margin: 4px 0 0;
    font-size: var(--fs-help);
  }
  .card:not(.card--wide):has(> h2:first-child) > :not(h2:first-child):not(h2:first-child + p.muted) {
    margin-inline-start: 18rem;
  }
}

/* ---- fields: label above, 8px, the control; 16px to the next field */
.field { display: grid; gap: 8px; margin-bottom: var(--gap); align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.field label, .field__label-text { font-weight: 600; font-size: var(--fs-body); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select, .field textarea,
.tree__form input, .tree__form select,
.bulk select, .status-form select, .inbox-search input,
.hours__row input[type="time"],
.ptable input:not([type="checkbox"]), .ptable select {
  font: inherit; color: inherit;
  min-height: var(--control-h); padding: 0 12px;
  border: 1px solid var(--control); border-radius: var(--radius-sm);
  background: var(--paper);
}
.field textarea { padding: 8px 12px; resize: vertical; line-height: var(--lh); }
.field select { max-width: 100%; min-width: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.button:focus-visible, .link:focus-visible,
.tree__form input:focus-visible, .tree__form select:focus-visible,
.bulk select:focus-visible, .status-form select:focus-visible, .inbox-search input:focus-visible,
.ptable input:focus-visible, .ptable select:focus-visible, .hours__row input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.field .help { font-size: var(--fs-help); color: var(--muted); margin: 0; }
.field .error { color: var(--danger); font-size: var(--fs-help); margin: 0; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field .static { margin: 0; min-height: var(--control-h); display: flex; align-items: center; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gap); }
.check input, .ptable input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.check--inline { display: inline-flex; margin: 0; }
input[dir="ltr"] { text-align: left; }
[dir="rtl"] :is(h1, h2, h3, p, dt, dd, li, div, span, a)[dir="ltr"] { text-align: right; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--ink); background: var(--paper);
  min-height: var(--control-sm); padding: 0 12px; margin-inline-end: 12px;
  border: 1px solid var(--control); border-radius: var(--radius-sm); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--ink); }
input[type="file"] { font: inherit; font-size: var(--fs-body); max-width: 100%; }
.fields { display: grid; gap: 0 var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rows__fields .field--wide, .fields .field--wide { grid-column: 1 / -1; }

/* ---- buttons: one filled style (the teal), a white secondary with a border, text links */
.button {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 16px;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.button:hover { background: #04434b; }
.button--wide { width: 100%; }
.button--quiet { background: var(--paper); color: var(--ink); border-color: var(--control); }
.button--quiet:hover { background: var(--bg); border-color: var(--ink); }
.button--danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.button--danger:hover { background: #fbe9e5; }
.button--danger:focus-visible { outline-color: var(--danger); }
.link {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.inline { display: inline; margin: 0; }
.after { margin-top: var(--gap); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 var(--gap); }
form > .actions:last-child { margin-bottom: 32px; }
.card .actions:last-child { margin-bottom: 0; }

.note { border-radius: var(--radius-sm); padding: 12px var(--gap); margin: 0 0 var(--gap); }
.note--error { background: #fbe9e5; color: var(--danger); }
.note--ok { background: #e3f1e8; color: var(--ok); }
.note--info { background: var(--surface); }

.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid > .card { margin-bottom: 0; }
.muted { color: var(--muted); }
.stat { font-size: var(--fs-title); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---- the app frame: area switch (a segmented track), side menu */
.areas { display: flex; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 4px; }
.areas__item {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--muted); font-weight: 600;
}
.areas__item:hover { color: var(--ink); }
.areas__item.is-current { background: var(--paper); color: var(--ink); }
.areas__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: calc(100vh - 64px); }
.side { background: var(--paper); padding: var(--gap) 12px; border-inline-end: 1px solid var(--border); }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side__item {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
a.side__item:hover { background: var(--bg); }
a.side__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.side__item.is-current { background: var(--surface); font-weight: 600; }
.side__item--soon { color: var(--muted); }
.badge {
  display: inline-block; font-size: var(--fs-small); line-height: 20px; font-weight: 600;
  background: var(--surface); color: var(--muted); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.side__item--soon .badge { margin-inline-start: auto; }
.panel--app .main { width: 100%; max-width: calc(72rem + 2 * var(--canvas-pad)); margin: 0 auto; }

@media (max-width: 54rem) {
  .bar { flex-wrap: wrap; gap: 12px var(--gap); padding: 12px var(--canvas-pad); }
  .areas { order: 3; width: 100%; }
  .areas__item { flex: 1; justify-content: center; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 8px var(--canvas-pad); }
  .side ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .side__item { min-height: 40px; }
}
@media (max-width: 40rem) {
  .areas__item, .side__item { min-height: 44px; }
  /* Little room on a phone: the mark alone, and the site link leaves the bar (the home keeps its button). */
  .bar__name, .bar__site { display: none; }
}

/* ---- tables: grey 12px headers, 1px rules, no bands */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.table th, .table td { text-align: start; padding: 12px; vertical-align: top; }
.table thead th { font-size: var(--fs-small); font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.table tbody tr + tr td { border-top: 1px solid var(--rule); }

.hours { display: grid; gap: 8px; }
.hours__row { display: grid; grid-template-columns: 7rem 6rem auto auto; justify-content: start; align-items: center; gap: 8px var(--pad); }
.hours__row .check { margin: 0; }
.hours__row label:not(.check) { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 40rem) { .hours__row { grid-template-columns: 1fr 1fr; gap: 8px var(--gap); } }

/* ---- category tree (decision 120): one colour per level, as a thick bar on
   the row's start edge, a light tint behind it and a label; the line that
   holds a group's children takes the parent's colour. */
.tree, .legend {
  --l1: #06525c; --l1-bg: #e2eff0;
  --l2: #8a4306; --l2-bg: #fbefe0;
  --l3: #1f4f8a; --l3-bg: #e6eef8;
  --l4: #9b1c4f; --l4-bg: #f9e8ef;
}
.tree__item[data-level="1"] { --c: var(--l1); --c-bg: var(--l1-bg); }
.tree__item[data-level="2"] { --c: var(--l2); --c-bg: var(--l2-bg); }
.tree__item[data-level="3"] { --c: var(--l3); --c-bg: var(--l3-bg); }
.tree__item[data-level="4"] { --c: var(--l4); --c-bg: var(--l4-bg); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree > .tree__item { margin-bottom: var(--gap); }
.tree .tree__kids { padding-inline-start: var(--gap); margin: 8px 0 0; margin-inline-start: var(--gap); border-inline-start: 3px solid var(--c); }
.tree__kids > .tree__item { margin: 8px 0; }
.tree__row {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--border); border-inline-start: 6px solid var(--c);
  border-radius: var(--radius-sm); padding: 4px 8px 4px 12px; min-height: 48px;
}
[dir="rtl"] .tree__row { padding: 4px 12px 4px 8px; }
.tree > .tree__item > .tree__row { min-height: 56px; background: var(--c-bg); border-color: transparent; border-inline-start-color: var(--c); }
.tree > .tree__item > .tree__row .tree__name { font-size: var(--fs-section); }
.chip {
  flex: none; font-size: var(--fs-small); font-weight: 600; line-height: 20px;
  color: var(--c); background: var(--c-bg); border: 0;
  border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.tree__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.tree__name:hover { text-decoration: underline; }
.tree__meta { font-size: var(--fs-help); color: var(--muted); white-space: nowrap; }
.tree__tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.tree__tools .link { margin-inline: 4px; }
.tree > .tree__item > .tree__row .chip { background: var(--paper); }
.tree__arrow {
  flex: none; font: inherit; font-weight: 600; color: var(--ink); background: var(--paper);
  border: 1px solid var(--control); border-radius: var(--radius-sm);
  width: var(--control-sm); height: var(--control-sm); padding: 0; cursor: pointer;
}
.tree__arrow:hover:not(:disabled) { border-color: var(--ink); }
.tree__arrow:disabled { opacity: 0.3; cursor: default; }
.tree__arrow:focus-visible, .tree__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tree__handle { flex: none; touch-action: none; cursor: grab; color: var(--c); font-size: 1.25rem; line-height: 1; padding: 4px; user-select: none; }
.tree__toggle {
  flex: none; width: 28px; height: 28px; padding: 0;
  font: inherit; color: var(--c); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.tree__toggle span { display: inline-block; transition: transform 0.15s; }
.tree__toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
[dir="rtl"] .tree__toggle[aria-expanded="false"] span { transform: rotate(90deg); }
.tree__toggle[hidden], .tree__handle[hidden] { display: none; }
/* Without the script there is no toggle, so leaves need no spacer either. */
.js-tree .tree__toggle--none { display: block; }
.tree__toggle--none { display: none; }
.tree__item.is-dragging > .tree__row { outline: 2px dashed var(--c); outline-offset: 2px; background: var(--paper); }
.is-dragging-tree, .is-dragging-tree * { cursor: grabbing !important; user-select: none; }
.tree__item:target > .tree__row, .tree__row.is-moved { outline: 3px solid var(--c); outline-offset: 2px; }
.tree__item { scroll-margin-block: 35vh; }
@media (prefers-reduced-motion: reduce) { .tree__toggle span { transition: none; } }

/* ---- row menus (decision 144): the ⋯ button at a row's end and its actions.
   A real overlay, so it may stand off the page (the skill allows it for menus). */
.rowmenu { position: relative; flex: none; }
.rowmenu > summary { list-style: none; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu__btn {
  display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm);
  border-radius: var(--radius-sm); color: var(--ink); cursor: pointer;
}
.rowmenu__btn:hover, .rowmenu[open] > .rowmenu__btn { background: var(--surface); }
.rowmenu__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rowmenu__pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 6;
  display: grid; min-width: 14rem; width: max-content; max-width: min(22rem, 86vw);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px;
  box-shadow: 0 8px 24px -12px rgba(6, 82, 92, 0.35); /* a menu floats: the skill allows its shadow. taste-skill-ignore */
}
.rowmenu__item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.rowmenu__item:hover { background: var(--bg); }
.rowmenu__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rowmenu__add { display: grid; gap: 8px; margin: 4px 0 0; padding: 12px; border-top: 1px solid var(--rule); }
.rowmenu__add label { font-size: var(--fs-help); font-weight: 600; }
.rowmenu__addrow { display: flex; gap: 8px; }
.rowmenu__addrow input { flex: 1; min-width: 0; font: inherit; color: inherit; min-height: var(--control-sm); padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--paper); }
.rowmenu__addrow input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rowmenu__addrow .button { min-height: var(--control-sm); padding: 0 12px; }

.tree-head { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap) var(--pad); margin-bottom: var(--gap); }
.legend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px var(--pad); }
.legend .tree__item { display: flex; align-items: center; gap: 8px; }
.legend .chip { background: var(--c-bg); border-inline-start-width: 6px; }
.tree-head__hint { margin: 0; font-size: var(--fs-help); color: var(--muted); }
.tree-head__tools { display: flex; gap: var(--gap); margin: 12px 0 0; }
.tree-head__tools[hidden] { display: none; }

@media (max-width: 40rem) {
  .tree__row { flex-wrap: wrap; padding-block: 8px; }
  .tree__tools { width: 100%; margin-inline-start: 0; }
  .tree .tree__kids { padding-inline-start: 8px; margin-inline-start: 4px; }
}
.tree__form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tree__form input { min-width: 16rem; }
.tree__form select { min-width: min(28rem, 100%); }

/* ---- photos in the editor */
.pic { display: flex; gap: var(--gap); align-items: flex-start; margin-bottom: var(--gap); }
.pic img { border-radius: var(--radius-sm); width: 240px; height: auto; display: block; }
.thumbs { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.thumbs__item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.thumbs__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.thumbs__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px; font-size: var(--fs-help); }
.thumbs__tools button:disabled { opacity: 0.3; cursor: default; }
.upload { display: grid; gap: 8px; justify-items: start; border-top: 1px solid var(--rule); padding-top: var(--gap); margin-top: 8px; }
.upload label { font-weight: 600; }
.focal { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; }
.focal img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.focal__dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); pointer-events: none; }

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- moving a category: the confirmation */
.confirm { border-inline-start: 6px solid var(--ink); }
.move-plan { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--gap); margin: 0 0 var(--gap); }
.move-plan dt { font-weight: 600; }
/* Addresses are literal paths, so they keep a monospace. */
.move-plan dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-help); overflow-wrap: anywhere; text-align: left; } /* addresses are literal paths: taste-skill-ignore */
[dir="rtl"] .move-plan dd { text-align: right; }
@media (max-width: 40rem) { .move-plan { grid-template-columns: 1fr; } }

/* ---- the save bar: fixed to the foot of the window while there is
   something to save, or for a few seconds after saving (decision 120) */
.savebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--paper); }
.savebar[hidden] { display: none; }
.savebar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--gap); max-width: 64rem; margin: 0 auto; padding: 12px var(--canvas-pad); }
.savebar__msg { margin: 0; flex: 1 1 18rem; font-weight: 600; }
.savebar .button { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.savebar .button--quiet { background: transparent; color: var(--paper); border-color: var(--paper); }
.savebar .button:disabled { opacity: 0.6; cursor: default; }
.savebar .button[hidden], .savebar .link[hidden] { display: none; }
.savebar .link { color: var(--paper); }
.savebar .button:focus-visible, .savebar .link:focus-visible { outline-color: var(--paper); }
.savebar[data-state="stale"], .savebar[data-state="failed"] { background: var(--danger); }
.has-savebar .main { padding-bottom: 8rem; }
.tree__changed { flex: none; font-size: var(--fs-small); font-weight: 600; line-height: 20px; color: var(--paper); background: var(--c); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.tree__changed[hidden] { display: none; }

/* ---- rows that are reordered, added and removed, then saved (decision 122):
   How it works steps, featured signs, gallery photos, social profiles, spec
   fields, menu items. The handle and the tools line up with the inputs, not
   with their labels. */
.rows { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 8px; }
.rows__item { display: flex; align-items: flex-start; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.rows--compact .rows__item { align-items: center; padding: 8px 12px; }
.rows__fields { flex: 1; min-width: 0; display: grid; gap: 12px; grid-template-columns: minmax(10rem, 1fr) 2fr; }
.rows__fields .field { margin-bottom: 0; }
.rows__fields .field + .field { margin-top: 0; }
.rows__handle, .thumbs__handle {
  flex: none; touch-action: none; cursor: grab; color: var(--ink);
  font-size: 1.25rem; line-height: 1; user-select: none;
  display: grid; place-items: center; width: 28px; height: 28px;
}
.rows__handle { margin-top: calc(var(--label-offset) + (var(--control-h) - 28px) / 2); }
.rows--compact .rows__handle { margin-top: 0; }
.rows__handle[hidden], .thumbs__handle[hidden], .rows__tools [hidden], .thumbs__tools [hidden] { display: none; }
.rows__tools { flex: none; display: flex; gap: 8px; align-items: center; min-height: var(--control-sm); margin-top: calc(var(--label-offset) + (var(--control-h) - var(--control-sm)) / 2); }
.rows__tools .link { margin-inline-start: 4px; }
.rows--compact .rows__tools { margin-top: 0; margin-inline-start: auto; }
.rows__thumb { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface); display: block; }
.rows__name { font-weight: 600; }
.rows__item.is-moved, .thumbs__item.is-moved { outline: 3px solid var(--ink); outline-offset: 2px; }
.rows__item.is-dragging, .thumbs__item.is-dragging { outline: 2px dashed var(--ink); outline-offset: 2px; background: var(--paper); }
.thumbs__media { position: relative; display: block; }
.thumbs__handle { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--paper); border-radius: var(--radius-sm); }
.thumbs__tools .tree__arrow { width: var(--control-sm); height: var(--control-sm); }
.rows__checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--pad); margin-top: 12px; }
.rows__used { font-size: var(--fs-help); }
.rows__fields--social { grid-template-columns: minmax(9rem, 12rem) 1fr; }
.rows__fields--spec { grid-template-columns: minmax(10rem, 2fr) minmax(6rem, 1fr); }
@media (max-width: 40rem) {
  .rows__item { flex-wrap: wrap; }
  .rows__fields, .rows__fields--social, .rows__fields--spec { grid-template-columns: 1fr; flex: 1 1 100%; width: 100%; order: 3; gap: 12px; }
  .rows__tools, .rows__handle { margin-top: 0; }
  .rows__tools { margin-inline-start: auto; }
}

/* ---- groups of fields (the Sign Shop page's texts) */
.group { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: var(--gap) 0 0; }
.group + .group { margin-top: 8px; }
.group legend { font-weight: 600; padding: 0 8px 0 0; }
[dir="rtl"] .group legend { padding: 0 0 0 8px; }

/* ---- "show password" eye inside password fields (decision 127) */
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 44px !important; }
.pw__toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
}
.pw__toggle:hover { color: var(--ink); background: var(--surface); }
.pw__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pw__toggle[aria-pressed="false"] .pw__slash { display: none; }

/* ---- the store's products: list, filters, editor (task 4.6) */
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--gap); margin-bottom: 4px; }
.head-row h1 { margin-bottom: 0; }
.filters { display: grid; gap: 0 var(--gap); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.filters__go { display: flex; align-items: center; gap: var(--gap); margin-bottom: var(--gap); }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.bulk label { font-weight: 600; }
.bulk select, .bulk .button { min-height: var(--control-sm); }
.money { display: flex; align-items: center; gap: 4px; direction: ltr; }
.money input { width: 100%; min-width: 0; }
.ptable td { vertical-align: middle; }
.ptable input:not([type="checkbox"]), .ptable select { min-height: var(--control-sm); padding: 0 8px; }
.ptable__price { width: 9rem; }
.ptable__thumb img, .ptable__thumb .rows__thumb { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.ptable__name .link { font-weight: 600; }
.ptable__path { display: block; font-size: var(--fs-help); margin-top: 2px; }
.ptable__tools { white-space: nowrap; }
.ptable__tools > * + * { margin-inline-start: 12px; }
.ptable__row.is-hidden .ptable__thumb, .ptable__row.is-hidden .ptable__name .link { opacity: 0.55; }
.badge--warn { background: #fbe9e5; color: var(--danger); }
.pager { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--gap) 0; }
.pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-sm); min-height: var(--control-sm); padding: 0 8px;
  border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--border); color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pager__item.is-current { background: var(--tint); border-color: var(--tint); font-weight: 600; }
.picklist h3 { margin: var(--gap) 0 4px; }
.picklist ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
@media (max-width: 48rem) {
  /* The table becomes one card per product. */
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; }
  .ptable tr { display: grid; grid-template-columns: auto 64px 1fr; gap: 8px 12px; padding: 12px; }
  .ptable tbody tr + tr { border-top: 1px solid var(--rule); }
  .ptable tbody tr + tr td { border-top: 0; }
  .ptable td { padding: 0; }
  .ptable__price, .ptable__status { grid-column: 2 / -1; width: auto; }
  .ptable__tools { grid-column: 2 / -1; white-space: normal; }
}

/* ---- the inboxes (decision 12) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--gap); }
.tabs__item {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-sm); padding: 0 12px;
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600;
}
.tabs__item:hover { background: var(--paper); }
.tabs__item.is-current { background: var(--tint); }
.tabs__n { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.inbox-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--gap); }
.inbox-search input { flex: 1 1 16rem; min-width: 0; }
.inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inbox__link {
  display: grid; gap: 4px; padding: 12px var(--gap);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; border-inline-start: 4px solid var(--border);
}
.inbox__link:hover { border-color: var(--control); }
.inbox__item.is-new .inbox__link { border-inline-start-color: var(--ink); }
.inbox__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.inbox__name { font-weight: 600; font-size: var(--fs-section); }
.inbox__sub { font-size: var(--fs-help); color: var(--muted); }
.inbox__gist { color: var(--ink); }
.inbox__meta { display: flex; flex-wrap: wrap; gap: 4px var(--gap); font-size: var(--fs-help); color: var(--muted); }
.status { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); line-height: 20px; font-weight: 600; white-space: nowrap; flex: none; }
.status--new { background: var(--tint); color: var(--ink); }
.status--contacted { background: #dfeaf7; color: #1d4f86; }
.status--quoted { background: #fbefd9; color: #7a4a00; }
.status--won { background: #ddf1e2; color: #1d6b34; }
.status--lost { background: var(--surface); color: #4d5d60; }
.reply { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gap); }
.reply__num { margin-inline-start: 4px; }
.status-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.status-form label { font-weight: 600; }
.answers { margin: 0; display: grid; gap: 0; }
.answers__row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 4px var(--gap); padding: 12px 0; border-top: 1px solid var(--rule); }
.answers__row:first-child { border-top: 0; padding-top: 0; }
.answers dt { font-weight: 600; text-align: start; }
.answers dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.files-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.files-list img { display: block; max-width: 14rem; max-height: 10rem; border-radius: var(--radius-sm); margin-bottom: 4px; background: var(--surface); }
.notes { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 8px; }
.notes li { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px var(--gap); }
.notes p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .answers__row { grid-template-columns: 1fr; } }

/* ---- the form builder (decisions 6, 83, 143): one compact line per field
   under one header row (handle, wording, type, section, required, tools),
   its finer settings folded under "More settings". Columns, in a card at
   least 864px wide: 28 + wording + 176 + 176 + 88 + 128, gaps of 12. */
.ffb { --ff-cols: 28px minmax(12rem, 1fr) 11rem 5.5rem calc(2 * var(--control-sm) + 8px + 3.5rem); }
.ffb.ff--sections { --ff-cols: 28px minmax(12rem, 1fr) 11rem 11rem 5.5rem calc(2 * var(--control-sm) + 8px + 3.5rem); }
.ffb:not(.ff--sections) .ff__show { display: none; }
.ff { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 8px; }
.ff__head, .ff__line { display: grid; align-items: center; gap: 12px; grid-template-columns: var(--ff-cols); }
.ff__head { padding: 0 13px 8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ff__item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.ff__item .rows__handle { margin: 0; }
.ff__line .field { margin: 0; }
.ff__line .field > label, .ff__mini { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ff__type { color: var(--muted); }
.ff__type .badge { margin-inline-start: 8px; }
.ff__req { justify-self: start; }
/* Two arrow cells, then Remove or the "Needed" badge, so the arrows line up down the list. */
.ff__item .rows__tools { margin: 0; display: grid; grid-template-columns: var(--control-sm) var(--control-sm) 1fr; gap: 8px; justify-items: start; align-items: center; }
.ff__item .rows__tools .link, .ff__item .rows__tools .badge { margin: 0; }
.ff__more { margin-top: 4px; padding-inline-start: 40px; }
.ff__more > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: var(--fs-help); font-weight: 600; color: var(--ink); min-height: 28px;
}
.ff__more > summary::-webkit-details-marker { display: none; }
.ff__more > summary::before {
  content: ""; width: 6px; height: 6px; margin-inline: 2px 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s;
}
[dir="rtl"] .ff__more > summary::before { transform: rotate(135deg); }
.ff__more[open] > summary::before, [dir="rtl"] .ff__more[open] > summary::before { transform: rotate(45deg); }
.ff__more > summary .muted { font-weight: 400; }
.ff__more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ff__more-body { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding: 8px 0 4px; }
.ff__more-body .field { margin-bottom: 12px; }
.ff__more-body .field--wide { grid-column: 1 / -1; }
.ff__item.is-moved { outline: 3px solid var(--ink); outline-offset: 2px; }
.ff__item.is-dragging { outline: 2px dashed var(--ink); outline-offset: 2px; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .ff__more > summary::before { transition: none; } }
@container (max-width: 55rem) {
  /* Too narrow for the columns: no header row, every line shows its labels. */
  .ff__head { display: none; }
  .ff__line { grid-template-columns: 28px 1fr auto; align-items: end; row-gap: 12px; }
  .ff__line .field > label, .ff__mini { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ff__line .field > label { font-size: var(--fs-help); }
  .ff__mini { color: var(--muted); }
  .ff__line > .rows__handle, .ff__line > span:first-child { grid-row: 1; align-self: end; margin-bottom: calc((var(--control-h) - 28px) / 2); }
  .ff__line .ff__label, .ff__line .ff__type, .ff__line .ff__show { grid-column: 2 / -1; }
  .ff__line div.ff__show:not(.field) { display: none; }
  .ff__line .ff__req { grid-column: 2; align-self: center; }
  .ff__line span.ff__req { display: none; }
  .ff__line .rows__tools { grid-column: 3; justify-self: end; align-self: center; }
}

/* ---- notifications and the Telegram bot */
.status-line { margin: 0 0 var(--gap); }
.steps-help { margin: 0 0 var(--pad); padding-inline-start: 20px; display: grid; gap: 4px; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--gap) 0; }
.tg-remove { margin-top: var(--gap); }
.tg-remove summary { cursor: pointer; margin-bottom: 12px; }

/* ---- the menu editor (task 4.9) */
.menu-auto { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px var(--gap); margin: 0 0 var(--gap); }
.menu-auto__title, .menu-extra__title { font-weight: 600; margin: 0 0 8px; }
.menu-auto__list { display: flex; flex-wrap: wrap; gap: 4px var(--pad); list-style: none; margin: 0 0 8px; padding: 0; }
.menu-auto .help { margin: 0; font-size: var(--fs-help); color: var(--muted); }

/* ---- the dashboard home (decision 144): the newest requests beside the
   inboxes and the setup tasks. 2fr + 1fr with the 16px gutter:
   (1136 - 16) x 2/3 = 747 and 373 at 1440; stacked under 64rem. */
.num { font-variant-numeric: tabular-nums; }
.home { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.home__side { display: grid; gap: var(--gap); }
.home .card { margin-bottom: 0; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px var(--gap); margin-bottom: 12px; }
.card__head h2 { margin: 0; }
.card .empty { margin: 0; padding: 12px var(--gap); border: 1px dashed var(--control); border-radius: var(--radius); color: var(--muted); }
@media (max-width: 64rem) { .home { grid-template-columns: minmax(0, 1fr); } }

/* The newest requests: two-line rows, name and where it came from first. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li + li { border-top: 1px solid var(--rule); }
.feed__link { display: grid; gap: 2px; padding: 12px 8px; margin: 0 -8px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.feed__link:hover { background: var(--bg); }
.feed__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.feed__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__top .badge { flex: none; }
.feed__when { margin-inline-start: auto; flex: none; font-size: var(--fs-help); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed__line { font-size: var(--fs-help); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__more { margin: 12px 0 0; font-size: var(--fs-help); }

/* Inboxes: label at the start, counts at the end, one row each. */
.kv { list-style: none; margin: 0; padding: 0; background: var(--bg); border-radius: var(--radius-sm); }
.kv li + li { border-top: 1px solid var(--rule); }
.kv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.kv__row:hover { background: var(--surface); }
.kv__row:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.kv__label { min-width: 0; }
.kv__value { flex: none; display: inline-flex; gap: 8px; align-items: baseline; font-size: var(--fs-help); }
.kv__fresh { font-weight: 600; font-size: var(--fs-body); }

/* Setup tasks: the true share done, then each task with its state. */
.meter { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; margin: 0 0 12px; }
.meter > span { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tasks__item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.tasks__item + .tasks__item { border-top: 1px solid var(--rule); }
.tasks__text { display: grid; gap: 2px; min-width: 0; }
.tasks__title { font-weight: 600; color: var(--ink); text-decoration: none; }
.tasks__title:hover { text-decoration: underline; }
.tasks__help { font-size: var(--fs-help); color: var(--muted); }
.tasks__item.is-done .tasks__title { font-weight: 400; }
.pill { flex: none; display: inline-block; min-width: 4.5rem; text-align: center; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); line-height: 22px; font-weight: 600; white-space: nowrap; margin-top: 1px; }
.pill--ok { background: #dcf2e3; color: #14532d; }
.pill--warn { background: #fdf0d5; color: #7a4a00; }
.pill--bad { background: #fbe9e5; color: var(--danger); }
.pill--neutral { background: var(--surface); color: var(--muted); }

/* ---- a list's toolbar: its tabs or filters at the start, the count at the end */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--gap); margin: 0 0 var(--gap); }
.toolbar .tabs { margin: 0; }
.toolbar__count { margin: 0; font-size: var(--fs-help); }
.pager__gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--muted); }

/* ---- History (decision 144): what changed, on what, by whom */
.history__when { white-space: nowrap; color: var(--muted); }
.history__subject { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.history__subject > span[dir] { font-weight: 600; }
.history__undo { text-align: end; white-space: nowrap; }
@media (max-width: 48rem) {
  /* Each change becomes a two-line row: what and on what, then when and who. */
  .history thead { display: none; }
  .history, .history tbody, .history tr, .history td { display: block; }
  .history tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; }
  .history tbody tr + tr { border-top: 1px solid var(--rule); }
  .history tbody tr + tr td { border-top: 0; }
  .history td { padding: 0; }
  .history td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .history__subject { grid-column: 1; grid-row: 2; }
  .history__when { grid-column: 1; grid-row: 3; font-size: var(--fs-help); }
  .history td:nth-child(4) { display: none; }
  .history__undo { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ---- a list's search and filters in one row (decision 144; the skill: one
   search 30-36px tall, filters beside it, the count at the end) */
.listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 36rem; min-width: 0; }
.listbar input, .listbar select {
  font: inherit; color: inherit; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--paper);
  max-width: 100%; min-width: 0;
}
.listbar__search { flex: 1 1 14rem; }
.listbar select { flex: 0 1 14rem; }
.listbar .button { min-height: 36px; }
.listbar input:focus-visible, .listbar select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.th__unit { font-weight: 400; }
.ptable__name .link { text-decoration: none; }
.ptable__name .link:hover { text-decoration: underline; }
.ptable__tools { width: 1%; text-align: end; }
.ptable__tools .rowmenu { display: inline-block; }
button.rowmenu__item { font: inherit; width: 100%; text-align: start; background: none; border: 0; cursor: pointer; }
@media (max-width: 40rem) {
  .listbar__search { flex-basis: 100%; }
  .listbar select { flex: 1 1 8rem; }
  .listbar input, .listbar select, .listbar .button { min-height: 44px; }
}
@media (max-width: 40rem) {
  .bulk { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .bulk label { grid-column: 1 / -1; }
  .bulk select, .bulk .button { min-height: 44px; }
}

/* ---- side menu groups (decision 144): a quiet sentence-case label with air above */
.side__group { margin-top: 20px; }
.side__label { display: block; padding: 0 12px 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
@media (max-width: 54rem) {
  /* The menu is one sideways row there: the labels step aside. */
  .side__group { margin-top: 0; }
  .side__label { display: none; }
}

/* ---- Pages (decision 145) */
.rows__fields--one { grid-template-columns: minmax(0, 1fr); }
.pages-list__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.pages-list__name:hover { text-decoration: underline; }
.pages-list__title { display: block; font-size: var(--fs-help); margin-top: 2px; }
.pages-list__go { text-align: end; width: 1%; }
.pages-list td { vertical-align: middle; }
.note ul { margin: 4px 0 0; padding-inline-start: 20px; }
.note p { margin: 0; }

/* ---- the block editor of new pages and articles (task 4.8, parts ب and ج):
   each block is a panel with its kind and tools on one line and its fields
   below; rows inside a block (questions, points) sit on paper so they read
   as one step further in. */
.blocks { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 12px; }
.block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.block__head { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--border); }
[dir="rtl"] .block__head { padding: 8px 16px 8px 12px; }
.block__head .rows__handle, .block__head .rows__tools { margin-top: 0; }
.block__head .rows__tools { margin-inline-start: auto; }
.block__type { font-weight: 600; }
.block__body { padding: var(--gap); }
.block__body > .field:last-child, .block__body > .fields:last-child .field { margin-bottom: 0; }
.block .rows__item { background: var(--paper); }
.block.is-moved { outline: 3px solid var(--ink); outline-offset: 2px; }
.block.is-dragging { outline: 2px dashed var(--ink); outline-offset: 2px; background: var(--paper); }
.block__photo { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; margin-bottom: var(--gap); }
.block__thumb { flex: none; width: 160px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface); display: block; }
.block__photo-fields { flex: 1 1 18rem; min-width: 0; }
.block__photo-fields .field:last-child { margin-bottom: 0; }
.block-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.block-add__label { font-size: var(--fs-help); color: var(--muted); margin-inline-end: 4px; }
.block-add__nojs { margin: 0; }
.button--sm { min-height: var(--control-sm); padding: 0 12px; font-size: var(--fs-help); }
.field__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.field__row label { margin-bottom: 0; }
.slug { display: flex; align-items: center; gap: 4px; }
.slug input { flex: 1; min-width: 0; }
.slug__root { color: var(--muted); font-size: var(--fs-help); white-space: nowrap; }
.list-title { margin: var(--pad) 0 4px; }
.empty { margin: 0 0 var(--gap); padding: 12px var(--gap); border: 1px dashed var(--control); border-radius: var(--radius); color: var(--muted); }
.ltr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
[dir="rtl"] .ltr-title { justify-content: flex-end; }
@media (max-width: 40rem) {
  .block__thumb { width: 100%; max-width: 20rem; }
}

/* ---- address redirects: long addresses wrap instead of widening the table */
.redirects__path { word-break: break-all; }
.redirects__end { display: block; font-size: var(--fs-help); margin-top: 2px; }
.redirects__tools { white-space: nowrap; text-align: end; }
.redirects__tools .inline { margin-inline-start: 12px; }
@media (max-width: 40rem) {
  .redirects__tools { white-space: normal; }
}
.redirects__date { white-space: nowrap; }
.redirects__label { display: none; }
/* On a phone each redirect is a small card: old address, where it goes, then use, date and tools. */
@media (max-width: 40rem) {
  .redirects thead { display: none; }
  .redirects, .redirects tbody, .redirects tr, .redirects td { display: block; width: auto; }
  .redirects tr { padding: 12px var(--gap); border-bottom: 1px solid var(--rule); }
  .table.redirects tbody td { border: 0; padding: 2px 0; text-align: start; }
  .redirects td:first-child { font-weight: 600; }
  .redirects td:nth-child(2)::before { content: "→ "; color: var(--muted); }
  .redirects__path { word-break: normal; overflow-wrap: anywhere; }
  .redirects td.redirects__hits, .redirects td.redirects__date { display: inline-block; margin-inline-end: 16px; font-size: var(--fs-help); }
  .redirects__label { display: inline; }
  .redirects__tools { text-align: start; margin-top: 4px; }
}