/* 1618 Library catalogue (catalog.js). Loaded on every page from html-head; every rule is scoped to the catalogue
   (html[data-cat], #cat-app, #cat-overlay, #cat-link) so the file browser and the sign-in page are untouched.
   Brand: paper #F6EDD8, ink #2E2012, accent #A6402D, sanguine #8E3924, muted #6B5940, EB Garamond, thin chalk rules.
   Text colours used: ink 13.5:1, muted 5.8:1, accent 5.3:1, sanguine 6.5:1 on paper. 14 px is the smallest text.
   Phone first; nothing is ever wider than the screen. */

/* --- boot: hide copyparty's home panel while the catalogue decides; then show only the catalogue --- */
html[data-cat="boot"] body { visibility: hidden; }
html[data-cat="on"] body > *:not(#cat-app):not(#cat-overlay):not(script) { display: none !important; }
html[data-cat="on"] body::before, html[data-cat="on"] body::after { content: none !important; display: none !important; }
html[data-cat="on"], html[data-cat="on"] body {
  background: #F6EDD8 !important; color: #2E2012 !important; overflow-x: hidden;
  min-height: 100%; margin: 0 !important; padding: 0 !important; pointer-events: auto !important;
}
html[data-cat="on"] body { display: block !important; }
html.cat-modal[data-cat="on"] body, html.cat-fsheet[data-cat="on"] body { overflow: hidden; }

#cat-app, #cat-overlay {
  --paper: #F6EDD8; --paper-2: #FBF6EC; --panel: #EFE3C8; --line: #DDD0B1; --line-2: #C7B78F; --field: #8F7E62;
  --ink: #2E2012; --accent: #A6402D; --sanguine: #8E3924; --muted: #6B5940; --warn-bg: #F5E3D9; --warn-line: #D6A595;
  --serif: 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  font: 400 18px/1.5 var(--serif); color: var(--ink); -webkit-text-size-adjust: 100%;
  font-variant-numeric: lining-nums;
}
#cat-app *, #cat-overlay * { box-sizing: border-box; font-family: var(--serif); }
#cat-app { width: 100%; max-width: 100vw; overflow-x: hidden; }
#cat-app a, #cat-overlay a { color: var(--ink); }
#cat-app button, #cat-overlay button, #cat-overlay input, #cat-overlay select, #cat-overlay textarea, #cat-app input {
  font: inherit; color: inherit;
}
#cat-app ::selection, #cat-overlay ::selection { background: #E7C9B4; color: var(--ink); }
#cat-app :focus-visible, #cat-overlay :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#cat-app input, #cat-overlay input, #cat-overlay textarea { caret-color: var(--accent); }
:is(#cat-app, #cat-overlay) .cat-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(#cat-app, #cat-overlay) .cat-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:is(#cat-app, #cat-overlay) [hidden] { display: none !important; }

/* --- shields against the home panel's own rules (files.css styles every #ht_spl li, li a, h1 with !important) --- */
#cat-app li, #cat-overlay li { margin: 0 !important; border-top: 0; border-bottom: 0; }
#cat-app li a, #cat-overlay li a { display: block; height: auto !important; line-height: inherit !important; font: inherit !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--ink) !important; }
#cat-app li a::after, #cat-overlay li a::after { content: none !important; }
#cat-app a, #cat-overlay a { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#cat-app h1 { font: 500 30px/1.1 var(--serif) !important; margin: 0 !important; letter-spacing: -.01em; text-wrap: balance; color: var(--ink) !important; }
#cat-app ul, #cat-overlay ul { list-style: none; margin: 0; padding: 0; }
:is(#cat-app, #cat-overlay) p, :is(#cat-app, #cat-overlay) li, :is(#cat-app, #cat-overlay) label { white-space: normal !important; }
:is(#cat-app, #cat-overlay) p { line-height: 1.45 !important; }
:is(#cat-app, #cat-overlay) legend, :is(#cat-app, #cat-overlay) fieldset ul { border: 0 !important; }
#cat-overlay a.cat-btn { background: transparent !important; }
#cat-overlay a.cat-btn-main, #cat-app a.cat-btn-main { background: var(--accent) !important; }
#cat-overlay a.cat-btn-main:hover, #cat-app a.cat-btn-main:hover { background: var(--sanguine) !important; }
#cat-app [tabindex="-1"]:focus, #cat-overlay [tabindex="-1"]:focus, #cat-app [tabindex="-1"]:focus-visible, #cat-overlay [tabindex="-1"]:focus-visible { outline: none; }
#cat-app .cat-input:focus-visible, #cat-overlay .cat-input:focus-visible { outline: none; }
#cat-app .cat-type, #cat-app .cat-fl li, #cat-app .cat-card { border-top: 0 !important; border-bottom: 0 !important; }
:is(#cat-app, #cat-overlay) .cat-input { height: auto !important; min-height: 44px !important; line-height: 1.35 !important; margin: 0 !important; box-sizing: border-box !important; }
:is(#cat-app, #cat-overlay) select.cat-input { padding-right: 32px; }
#cat-app .cat-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
  background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5940' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
#cat-overlay .cat-done .cat-pacts { display: none; }


:is(#cat-app, #cat-overlay) .cat-main { padding: 28px 16px 64px; max-width: 1440px; margin: 0 auto; }
:is(#cat-app, #cat-overlay) .cat-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; }
:is(#cat-app, #cat-overlay) .cat-intro-h { min-width: 0; flex: 1 1 320px; }
:is(#cat-app, #cat-overlay) .cat-lead { margin: 4px 0 0; color: var(--muted); font-size: 16px; max-width: 60ch; }
:is(#cat-app, #cat-overlay) .cat-h2 { font: 500 22px/1.25 var(--serif); margin: 0 0 8px; }
:is(#cat-app, #cat-overlay) .cat-fnote, :is(#cat-app, #cat-overlay) .cat-fhint { color: var(--muted); font-size: 15px; margin: 4px 0 10px; line-height: 1.45; }
:is(#cat-app, #cat-overlay) .cat-updated { color: var(--muted); font-size: 14px; margin: 56px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* --- buttons --- */
:is(#cat-app, #cat-overlay) .cat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 2px; cursor: pointer;
  font-size: 17px; line-height: 1.2; text-decoration: none !important; white-space: normal; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
:is(#cat-app, #cat-overlay) .cat-btn:hover { background: var(--panel); }
:is(#cat-app, #cat-overlay) .cat-btn-main { background: var(--accent); border-color: var(--accent); color: var(--paper) !important; font-weight: 500; }
:is(#cat-app, #cat-overlay) .cat-btn-main:hover { background: var(--sanguine); border-color: var(--sanguine); }
:is(#cat-app, #cat-overlay) .cat-btn[disabled] { opacity: .5; cursor: default; }
:is(#cat-app, #cat-overlay) .cat-btn-main[disabled]:hover { background: var(--accent); }
:is(#cat-app, #cat-overlay) .cat-linkbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: 16px; min-height: 40px;
}
:is(#cat-app, #cat-overlay) .cat-linkbtn:hover { color: var(--accent); text-decoration-color: currentColor; }
:is(#cat-app, #cat-overlay) .cat-linkbtn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

/* --- the summary strip: numbers, then region quick filters --- */
/* the title line (no totals next to the title since 2026-10-30) */
#cat-app .cat-intro-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; min-width: 0; }

/* --- type quick filters: plain text tabs, also drop targets --- */
#cat-app .cat-types { margin: 0 0 20px; border-bottom: 1px solid var(--line); }
#cat-app .cat-typelist { display: flex; flex-wrap: wrap; gap: 0 22px; }
#cat-app .cat-type { position: relative; min-width: 0; }
#cat-app .cat-type-b {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 48px; padding: 10px 0 8px; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; color: var(--ink); text-align: left;
}
#cat-app .cat-type-b:hover .cat-type-n { color: var(--accent); }
#cat-app .cat-type-n { font-size: 17px; }
#cat-app .cat-type-m { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
#cat-app .cat-type.cat-on .cat-type-b { border-bottom-color: var(--accent); }
#cat-app .cat-type.cat-on .cat-type-n { font-weight: 500; }
#cat-app .cat-type-drop { display: none; }
html.cat-dragging #cat-app .cat-typelist { gap: 8px; padding: 8px 0 12px; }
html.cat-dragging #cat-app .cat-type:not(.cat-type-all) { border: 1px dashed var(--muted); border-radius: 2px; padding: 0 12px 8px; background: var(--paper-2); }
html.cat-dragging #cat-app .cat-type-drop { display: block; font-size: 14px; color: var(--muted); }
:is(#cat-app, #cat-overlay) .cat-drop, html.cat-dragging #cat-app .cat-type.cat-drop { border: 2px dashed var(--accent) !important; background: var(--panel) !important; }

/* --- body: filters beside the results on wide screens, a sheet on smaller ones --- */
#cat-app .cat-body { display: block; }
#cat-app .cat-filters { display: none; }
#cat-app .cat-filters.cat-open {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 2147482000; background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain; animation: cat-in-right .32s var(--ease);
}
#cat-app .cat-fhead { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
#cat-app .cat-fhead-h { font: 500 24px/1.2 var(--serif); margin: 0 auto 0 0; }
#cat-app .cat-facets { padding: 0 16px; flex: 1 0 auto; }
#cat-app .cat-fdone { position: sticky; bottom: 0; padding: 12px 16px 16px; background: var(--paper); border-top: 1px solid var(--line); }
#cat-app .cat-fdone .cat-btn { width: 100%; }
#cat-app .cat-fgroup { border-bottom: 1px solid var(--line); }
#cat-app .cat-fgroup-h {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 0; background: none; border: 0;
  cursor: pointer; text-align: left; color: var(--ink);
}
#cat-app .cat-fgroup-t { font-size: 19px; font-weight: 500; }
#cat-app .cat-fgroup-n { font-size: 14px; color: var(--accent); }
#cat-app .cat-chev { margin-left: auto; transition: transform .2s var(--ease); color: var(--muted); }
#cat-app .cat-fgroup-open .cat-chev { transform: rotate(180deg); }
#cat-app .cat-fgroup-b { padding: 0 0 14px; }
#cat-app .cat-facet { border: 0; margin: 0; padding: 6px 0 10px; min-width: 0; }
#cat-app .cat-facet + .cat-facet { border-top: 1px dotted var(--line-2) !important; padding-top: 12px; }
#cat-app .cat-facet > legend { float: left; width: 100%; }
#cat-app .cat-facet > legend + * { clear: both; }
#cat-app .cat-fh { font-size: 15px; color: var(--muted); padding: 0; margin: 0 0 4px; }
#cat-app .cat-fl li { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 4px 0; }
#cat-app .cat-fl input { width: 18px; height: 18px; margin: 4px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
#cat-app .cat-fl label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex: 1; min-width: 0; cursor: pointer; font-size: 17px; line-height: 1.35; }
#cat-app .cat-fl label:hover .cat-fv { color: var(--accent); }
#cat-app .cat-fv { overflow-wrap: anywhere; min-width: 0; }
#cat-app .cat-fn { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; flex: none; min-width: 2ch; text-align: right; }
#cat-app .cat-fl li.cat-zero label { color: var(--muted); }
#cat-app .cat-fnone { margin: 0; font-size: 15px; color: var(--muted); }
#cat-app .cat-showall { font-size: 15px; min-height: 36px; }
#cat-app .cat-clear { font-size: 15px; }

/* --- results --- */
#cat-app .cat-rbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
#cat-app .cat-search { position: relative; flex: 1 1 260px; min-width: 0; }
#cat-app .cat-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#cat-app .cat-search .cat-input { padding-left: 40px; }
:is(#cat-app, #cat-overlay) .cat-input {
  display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 8px 12px; background: var(--paper-2);
  border: 1px solid var(--field); border-radius: 2px; font-size: 17px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
:is(#cat-app, #cat-overlay) .cat-input::placeholder { color: var(--muted); opacity: 1; }
:is(#cat-app, #cat-overlay) textarea.cat-input { min-height: 84px; resize: vertical; line-height: 1.45; }
:is(#cat-app, #cat-overlay) .cat-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
:is(#cat-app, #cat-overlay) .cat-input[aria-invalid="true"] { border-color: var(--sanguine); box-shadow: 0 0 0 1px var(--sanguine); }
#cat-app .cat-fbtn, #cat-app .cat-selbtn { flex: none; }
#cat-app .cat-selbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#cat-app .cat-count { margin: 0 0 14px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
#cat-app .cat-count[hidden] { display: none; }
#cat-app .cat-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 18px; }
#cat-app .cat-achip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px 4px 12px; border: 1px solid var(--line-2);
  border-radius: 2px; background: var(--paper-2); cursor: pointer; font-size: 15px; color: var(--ink);
}
#cat-app .cat-achip .cat-ic { width: 16px; height: 16px; color: var(--muted); }
#cat-app .cat-achip:hover { border-color: var(--accent); }
#cat-app .cat-achip:hover .cat-ic { color: var(--accent); }

/* --- cards: picture first, equal heights --- */
#cat-app .cat-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 24px; }
#cat-app .cat-card { min-width: 0; display: flex; border-radius: 3px; }
#cat-app .cat-card-open {
  display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); border-radius: 3px;
}
#cat-app .cat-card-open:focus-visible { outline-offset: 4px; }
#cat-app .cat-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--panel); overflow: hidden; border-radius: 3px; }
#cat-app .cat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { #cat-app .cat-card-open:hover .cat-thumb img { transform: scale(1.025); } }
:is(#cat-app, #cat-overlay) .cat-nothumb { background: var(--panel) repeating-linear-gradient(135deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 7px); }
#cat-app .cat-len { position: absolute; right: 10px; bottom: 10px; background: rgba(46, 32, 18, .82); color: var(--paper); font-size: 14px; line-height: 1.3; padding: 2px 8px; border-radius: 2px; font-variant-numeric: tabular-nums; }
#cat-app .cat-cbody { display: flex; flex-direction: column; flex: 1; padding: 14px 2px 0; min-width: 0; }
#cat-app .cat-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 21px; line-height: 1.25; font-weight: 500; letter-spacing: -.003em; margin: 0 0 6px; overflow-wrap: anywhere;
  white-space: normal !important; transition: color .15s;
}
@media (hover: hover) { #cat-app .cat-card-open:hover .cat-title { color: var(--accent); } }
#cat-app .cat-where { display: block; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
#cat-app .cat-meta { display: block; font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
#cat-app .cat-cbody > .cat-badges { margin-top: auto; padding-top: 14px; }
#cat-app .cat-picked .cat-thumb { box-shadow: 0 0 0 3px var(--accent); }
#cat-app .cat-tick {
  position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(251, 246, 236, .94); border: 1.5px solid var(--ink); border-radius: 3px; color: transparent;
}
#cat-app .cat-picked .cat-tick { background: var(--accent); border-color: var(--accent); color: var(--paper); }
#cat-app .cat-tick .cat-ic { width: 20px; height: 20px; stroke-width: 2; }
#cat-app .cat-fresh .cat-thumb { box-shadow: 0 0 0 3px var(--accent); animation: cat-fresh 1.6s var(--ease) 2; }
@keyframes cat-fresh { 50% { box-shadow: 0 0 0 7px rgba(166, 64, 45, .25); } }
#cat-app .cat-empty { grid-column: 1 / -1; padding: 48px 0 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
#cat-app .cat-empty-h { font-size: 24px; font-weight: 500; margin: 0 0 6px; }
#cat-app .cat-empty-t { color: var(--muted); margin: 0 auto 18px; max-width: 46ch; }

/* --- pager: under the grid; Previous, page numbers, Next (phones: Previous, "Page 2 of 5", Next). Never wider than the grid. --- */
#cat-app .cat-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 56px 0 8px; min-width: 0; }
#cat-app .cat-pager[hidden] { display: none; }
#cat-app .cat-pg-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
#cat-app .cat-pg-list li { margin: 0; padding: 0; }
#cat-app .cat-pg-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; margin: 0;
  border: 1px solid transparent; border-radius: 2px; background: none; font: inherit; font-size: 17px; line-height: 1; color: var(--ink);
  cursor: pointer; font-variant-numeric: tabular-nums lining-nums; transition: color .15s;
}
#cat-app .cat-pg-b:hover:not(:disabled):not([aria-current]) { color: var(--accent); }
#cat-app .cat-pg-b:disabled { color: var(--muted); opacity: .6; cursor: default; }
#cat-app .cat-pg-b[aria-current="page"] { border-color: var(--ink); font-weight: 500; cursor: default; }
#cat-app .cat-pg-prev { padding: 0 12px 0 6px; }
#cat-app .cat-pg-next { padding: 0 6px 0 12px; }
#cat-app .cat-pg-ic { width: 18px; height: 18px; }
#cat-app .cat-pg-gap { min-width: 24px; text-align: center; color: var(--muted); user-select: none; }
#cat-app .cat-pg-of { margin: 0; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; display: none; }
@media (max-width: 599px) {
  #cat-app .cat-pager { flex-wrap: nowrap; justify-content: space-between; gap: 8px; margin-top: 40px; }
  #cat-app .cat-pg-list { display: none; }
  #cat-app .cat-pg-of { display: block; }
  #cat-app .cat-pg-prev, #cat-app .cat-pg-next { flex: none; border-color: var(--line-2); }
  #cat-app .cat-pg-prev:disabled, #cat-app .cat-pg-next:disabled { border-color: var(--line); }
}

/* --- badges: one component, three tones (plain, good, needs attention) --- */
:is(#cat-app, #cat-overlay) .cat-badges { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#cat-app, #cat-overlay) .cat-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 2px; font-size: 14px; line-height: 1.4;
  border: 1px solid var(--line-2); border-radius: 2px; color: var(--muted); background: transparent; white-space: nowrap;
}
:is(#cat-app, #cat-overlay) .cat-badge-ok { color: var(--ink); border-color: #B3A07A; }
:is(#cat-app, #cat-overlay) .cat-badge-warn { color: var(--sanguine); border-color: var(--warn-line); background: var(--warn-bg); }
:is(#cat-app, #cat-overlay) .cat-badge-ic { width: 14px; height: 14px; stroke-width: 2; margin-left: -2px; }

/* --- select mode: the bar at the bottom --- */
html.cat-selecting #cat-app .cat-main { padding-bottom: 140px; }
#cat-app .cat-packbar { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 2147481000; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; animation: cat-in-up .3s var(--ease); }
#cat-app .cat-packbar-in {
  pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  width: 100%; max-width: 760px; padding: 10px 12px 10px 20px; background: var(--ink); color: var(--paper); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(46, 32, 18, .28);
}
#cat-app .cat-packbar-t { margin: 0; font-size: 17px; }
#cat-app .cat-packbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
#cat-app .cat-packbar .cat-linkbtn { color: var(--paper); text-decoration-color: rgba(246, 237, 216, .45); }
#cat-app .cat-packbar .cat-linkbtn:hover { color: #fff; }
#cat-app .cat-packbar :focus-visible { outline-color: var(--paper); }
#cat-app .cat-packbar .cat-btn-main[disabled] { opacity: .6; }

#cat-app .cat-checks { margin-top: 48px; }
#cat-app .cat-checklist { padding-left: 18px; font-size: 16px; overflow-wrap: anywhere; list-style: disc; }

/* the Catalogue link in the file browser header, beside Docs */
#cat-link { margin-right: 4px; }

/* --- the side panel: details, add files, edit details, client pack --- */
#cat-overlay {
  position: fixed; inset: 0; z-index: 2147483000; background: rgba(46, 32, 18, .36); display: flex; justify-content: flex-end;
  overflow: hidden !important; animation: cat-fade .2s ease-out;
}
#cat-overlay .cat-panel {
  position: relative; background: var(--paper); width: 100%; max-width: 100%; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column;
  animation: cat-in-right .38s var(--ease);
}
#cat-overlay .cat-phead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; position: sticky; top: 0; z-index: 2;
  background: var(--paper); padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
}
#cat-overlay .cat-phead h2 { font: 500 24px/1.2 var(--serif); margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
#cat-overlay .cat-close { flex: none; font-size: 16px; text-decoration: none; color: var(--muted); min-height: 36px; }
#cat-overlay .cat-close:hover { color: var(--accent); }
#cat-overlay .cat-pbody, #cat-overlay .cat-dbody { padding: 4px 16px 32px; flex: 1 0 auto; }
#cat-overlay .cat-pbatch { color: var(--muted); font-size: 16px; margin: 12px 0 0; overflow-wrap: anywhere; }

/* details */
#cat-overlay .cat-dhero { aspect-ratio: 16 / 9; margin: 16px 0 14px; background: var(--panel); border-radius: 3px; overflow: hidden; }
#cat-overlay .cat-dhero img { display: block; width: 100%; height: 100%; object-fit: cover; }
#cat-overlay .cat-dwhere { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
#cat-overlay .cat-dmeta { margin: 2px 0 0; font-size: 16px; color: var(--muted); }
#cat-overlay .cat-dacts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 16px; }
#cat-overlay .cat-dbadges { margin: 0 0 6px; }
#cat-overlay .cat-dprice { margin: 14px 0 0; padding: 10px 12px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 2px; color: var(--sanguine); font-size: 16px; }
#cat-overlay .cat-dsect { margin-top: 30px; }
#cat-overlay .cat-dsect-h { font: 500 20px/1.25 var(--serif); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
#cat-overlay .cat-dl { margin: 0; }
#cat-overlay .cat-dl-r { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#cat-overlay .cat-dl dt { color: var(--muted); font-size: 16px; }
#cat-overlay .cat-dl dd { margin: 0; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
#cat-overlay .cat-dl-v { display: block; }
#cat-overlay .cat-dl-s { display: block; font-size: 15px; font-style: italic; color: var(--muted); }
#cat-overlay .cat-tablewrap { max-width: 100%; }
#cat-overlay .cat-ctable { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
#cat-overlay .cat-ctable th, #cat-overlay .cat-ctable td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
#cat-overlay .cat-ctable thead th { font-weight: 500; color: var(--muted); font-size: 14px; }
#cat-overlay .cat-ctable tbody th { font-weight: 500; }
#cat-overlay .cat-dprobs { list-style: disc; padding-left: 20px; color: var(--sanguine); font-size: 16px; }
#cat-overlay .cat-dprobs li { margin: 0 0 4px !important; }
#cat-overlay .cat-dnotes { margin: 0; font-size: 16px; white-space: pre-line !important; }
#cat-overlay .cat-dfoot { margin: 28px 0 0; font-size: 15px; color: var(--muted); }

/* forms */
#cat-overlay .cat-pform { display: flex; flex-direction: column; flex: 1 0 auto; }
#cat-overlay .cat-flabel { display: block; font-size: 16px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
#cat-overlay .cat-field, #cat-overlay .cat-radios, #cat-overlay .cat-atlas { margin: 20px 0 0; }
#cat-overlay .cat-field .cat-fhint { margin-top: -2px; }
#cat-overlay .cat-radios { border: 0; padding: 0; min-width: 0; }
#cat-overlay .cat-radios legend { padding: 0; }
#cat-overlay .cat-radio { display: inline-flex; align-items: center; gap: 8px; margin: 2px 18px 2px 0; min-height: 40px; }
#cat-overlay .cat-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
#cat-overlay .cat-radio label { font-size: 17px; cursor: pointer; }
#cat-overlay .cat-pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
#cat-overlay .cat-psect { border: 0; margin: 32px 0 0; padding: 0; min-width: 0; }
#cat-overlay .cat-psect-h { display: block; width: 100%; font: 500 20px/1.25 var(--serif); padding: 0 0 8px; border-bottom: 1px solid var(--ink); }
#cat-overlay .cat-psect-price { background: var(--warn-bg); padding: 0 12px 14px; border: 1px solid var(--warn-line); }
#cat-overlay .cat-psect-price .cat-psect-h { border-bottom-color: var(--warn-line); padding-top: 10px; float: left; margin-bottom: 4px; }
#cat-overlay .cat-psect-price > :not(legend) { clear: both; }
#cat-overlay .cat-prow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; }
#cat-overlay .cat-autohint { margin-top: 8px; }
#cat-overlay .cat-chosen { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
#cat-overlay .cat-chosen:empty { display: none; }
#cat-overlay .cat-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: var(--paper-2); padding: 2px 4px 2px 12px; font-size: 16px; overflow-wrap: anywhere; border-radius: 2px; }
#cat-overlay .cat-clist { margin: 4px 0 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line-2); background: var(--paper-2); }
#cat-overlay .cat-copt { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer; font-size: 17px; min-height: 44px; color: var(--ink); }
#cat-overlay .cat-copt:hover, #cat-overlay .cat-copt:focus { background: var(--panel); }
#cat-overlay .cat-creg { color: var(--muted); font-size: 15px; flex: none; }
#cat-overlay .cat-cnone { padding: 9px 12px; color: var(--muted); }
#cat-overlay .cat-filesfield { margin-top: 18px; }
#cat-overlay .cat-pdrop {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  border: 1.5px dashed var(--field); border-radius: 3px; padding: 26px 16px 22px; background: var(--paper-2);
  transition: padding .2s var(--ease), background-color .15s;
}
#cat-overlay .cat-pdrop-ic { width: 32px; height: 32px; color: var(--muted); stroke-width: 1.25; margin-bottom: 4px; }
#cat-overlay .cat-pdrop-t { margin: 0; font-size: 19px; font-weight: 500; }
#cat-overlay .cat-pdrop-s { margin: 0 0 12px; font-size: 15px; color: var(--muted); max-width: 44ch; }
#cat-overlay .cat-pdrop-has { padding: 14px 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
#cat-overlay .cat-pdrop-has .cat-pdrop-ic, #cat-overlay .cat-pdrop-has .cat-pdrop-s { display: none; }
#cat-overlay .cat-pdrop-has .cat-pdrop-t { font-size: 17px; font-weight: 400; color: var(--muted); }
#cat-overlay .cat-vh:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
#cat-overlay .cat-pfiles { margin: 10px 0 0; }
#cat-overlay .cat-pfiles li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
#cat-overlay .cat-pfn { overflow-wrap: anywhere; min-width: 0; flex: 1 1 55%; }
#cat-overlay .cat-pfs { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
#cat-overlay .cat-pf-done .cat-pfs { color: var(--ink); }
#cat-overlay .cat-pf-not-sent .cat-pfs { color: var(--sanguine); }
#cat-overlay .cat-ftot { margin-top: 8px; }
#cat-overlay .cat-ftot:empty { display: none; }
#cat-overlay .cat-atlas { border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 12px 14px; border-radius: 2px; }
#cat-overlay .cat-atlas-t { margin: 4px 0 0 32px; color: var(--sanguine); font-size: 15px; }
#cat-overlay .cat-check { display: flex; align-items: center; gap: 10px; }
#cat-overlay .cat-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
#cat-overlay .cat-check label { font-size: 18px; cursor: pointer; }
#cat-overlay .cat-more { margin: 28px 0 0; border-top: 1px solid var(--line); }
#cat-overlay .cat-more-s { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-size: 19px; font-weight: 500; list-style: none; }
#cat-overlay .cat-more-s::-webkit-details-marker { display: none; }
#cat-overlay .cat-more-s .cat-chev { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
#cat-overlay .cat-more[open] .cat-more-s .cat-chev { transform: rotate(180deg); }
#cat-overlay .cat-more > .cat-fhint { margin-top: -6px; }
#cat-overlay .cat-pfoot { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 16px 14px; }
#cat-overlay .cat-pmsg { margin: 0 0 10px; color: var(--sanguine); font-size: 17px; }
#cat-overlay .cat-pmsg:empty { display: none; }
#cat-overlay .cat-pmsg.cat-ok { color: var(--ink); font-weight: 500; }
#cat-overlay .cat-done .cat-pmsg.cat-ok { font-size: 19px; padding: 10px 12px; border: 1px solid #B3A07A; background: var(--paper-2); border-radius: 2px; }
#cat-overlay .cat-prog { margin: 0 0 10px; }
#cat-overlay .cat-prog progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
#cat-overlay .cat-ptext { margin: 6px 0 0; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
#cat-overlay .cat-pacts { display: flex; justify-content: flex-end; }
#cat-overlay .cat-pacts .cat-btn { width: 100%; }

/* the clip editor: a plain list in the panel */
#cat-overlay .cat-clipwrap { border-top: 0; }
#cat-overlay .cat-cliprow { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
#cat-overlay .cat-clipname { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
#cat-overlay .cat-cliprow .cat-fhint { margin: 2px 0 0; overflow-wrap: anywhere; }
#cat-overlay .cat-cliprow .cat-field { margin-top: 10px; }
#cat-overlay .cat-cliprow .cat-check { margin-top: 12px; }
#cat-overlay .cat-cliprow .cat-check label { font-size: 17px; }
#cat-overlay .cat-clipgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }

/* client pack */
#cat-overlay .cat-warnbox { border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 10px 12px; margin: 14px 0 0; font-size: 16px; border-radius: 2px; }
#cat-overlay .cat-warnbox p, #cat-overlay .cat-warnbox ul { margin: 0; padding-left: 0; overflow-wrap: anywhere; }
#cat-overlay .cat-pmsg ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; overflow-wrap: anywhere; }
#cat-overlay .cat-packpanel .cat-pmsg { margin-top: 14px; }
#cat-overlay .cat-kacts { flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 18px; }
#cat-overlay .cat-kacts .cat-btn { width: auto; }
#cat-overlay .cat-kframe { display: block; width: 100%; height: 60vh; margin-top: 16px; border: 1px solid var(--line-2); background: #fff; }

@keyframes cat-in-right { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cat-in-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cat-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #cat-app *, #cat-overlay, #cat-overlay * { animation: none !important; transition: none !important; }
}

/* --- phone: a compact strip so the first batch is close --- */
@media (max-width: 599px) {
  #cat-app .cat-intro .cat-btn-main { flex: 1 1 100%; }
  #cat-app .cat-typelist { gap: 0 18px; }
  #cat-app .cat-rbar .cat-btn { flex: 1 1 auto; }
}

/* --- wider screens --- */
@media (min-width: 600px) {
  :is(#cat-app, #cat-overlay) .cat-main { padding: 40px 24px 72px; }
  #cat-app h1 { font-size: 34px !important; }
  #cat-app .cat-main { padding-top: 24px; }
  #cat-app .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cat-app .cat-filters.cat-open { left: auto; width: 420px; border-left: 1px solid var(--line); box-shadow: 0 0 0 100vmax rgba(46, 32, 18, .36); }
  #cat-overlay .cat-panel { width: 600px; border-left: 1px solid var(--line); box-shadow: -16px 0 40px rgba(46, 32, 18, .14); }
  #cat-overlay .cat-packpanel { width: 880px; }
  #cat-overlay .cat-phead { padding: 22px 32px 16px; }
  #cat-overlay .cat-phead h2 { font-size: 27px; }
  #cat-overlay .cat-pbody, #cat-overlay .cat-dbody { padding: 4px 32px 40px; }
  #cat-overlay .cat-pfoot { padding: 14px 32px 16px; }
  #cat-overlay .cat-pacts .cat-btn { width: auto; min-width: 160px; }
  #cat-overlay .cat-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cat-overlay .cat-pgrid .cat-radio { display: flex; }
  #cat-overlay .cat-clipgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  #cat-overlay .cat-clipgrid > .cat-field:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  #cat-app .cat-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 48px; align-items: start; }
  #cat-app .cat-fbtn { display: none; }
  #cat-app .cat-filters, #cat-app .cat-filters.cat-open {
    display: block; position: sticky; top: 16px; inset: auto; width: auto; z-index: auto; box-shadow: none; border: 0; animation: none;
    max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  #cat-app .cat-fhead { padding: 0 0 10px; position: static; border-bottom: 1px solid var(--ink); }
  #cat-app .cat-fhead-h { font-size: 22px; }
  #cat-app .cat-fclose, #cat-app .cat-fdone { display: none !important; }
  #cat-app .cat-facets { padding: 0; }
  html.cat-fsheet[data-cat="on"] body { overflow: auto; }
  #cat-app .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
}
@media (min-width: 1280px) { #cat-app .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* headings that take focus when a panel opens are not controls: no ring (files.css rings every [tabindex] with !important) */
html #cat-app [tabindex="-1"]:focus-visible, html #cat-overlay [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

/* Edit details: moving to another country folder, deleting a batch (founders only), the "Deleted." line */
#cat-overlay .cat-movehint { color: var(--ink); font-weight: 500; margin-top: 6px; }
#cat-overlay .cat-pdel { margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-2); }
#cat-overlay .cat-pdel .cat-fhint { margin-top: 0; }
:is(#cat-app, #cat-overlay) .cat-btn-danger { border-color: #A12A1C; color: #A12A1C !important; }
:is(#cat-app, #cat-overlay) .cat-btn-danger:hover { background: var(--warn-bg); }
:is(#cat-app, #cat-overlay) .cat-btn-danger-main { background: #A12A1C; color: var(--paper) !important; font-weight: 500; }
:is(#cat-app, #cat-overlay) .cat-btn-danger-main:hover { background: #7E2015; border-color: #7E2015; }
#cat-overlay .cat-delbox { border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 12px 14px; border-radius: 2px; }
#cat-overlay .cat-delq { margin: 0 0 12px; font-size: 18px; overflow-wrap: anywhere; }
#cat-overlay .cat-delacts { display: flex; flex-wrap: wrap; gap: 8px 12px; }
#cat-overlay .cat-delmsg { margin: 12px 0 0; color: var(--sanguine); font-size: 17px; overflow-wrap: anywhere; }
#cat-overlay .cat-delmsg:empty { display: none; }
#cat-overlay .cat-delmsg.cat-ok { color: var(--ink); font-weight: 500; }
#cat-app .cat-notice { margin: 16px 0 0; padding: 10px 12px; border: 1px solid #B3A07A; background: var(--paper-2); border-radius: 2px; font-size: 18px; font-weight: 500; }
#cat-app .cat-notice:focus { outline: none; }

/* ================= UX review fixes (feat/ux-review-fixes; docs/UI-REVIEW.md "After the UX review") ================= */
/* issue 4: brand/files.css styles every input[type=text] (pale border, paper fill, another face) with !important;
   the catalogue's own fields win again, so no field looks switched off */
#cat-overlay input.cat-input, #cat-app input.cat-input, #cat-overlay select.cat-input, #cat-overlay textarea.cat-input {
  border: 1px solid var(--field) !important; background: var(--paper-2) !important; font-family: var(--serif) !important;
  color: var(--ink) !important; font-size: 17px !important; border-radius: 2px !important; box-shadow: none; opacity: 1 !important;
}
#cat-overlay input.cat-input:focus, #cat-app input.cat-input:focus, #cat-overlay select.cat-input:focus, #cat-overlay textarea.cat-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
#cat-overlay .cat-input[aria-invalid="true"] { border-color: var(--sanguine) !important; box-shadow: 0 0 0 1px var(--sanguine) !important; }
/* quick win: no focus box around headings that take focus when a drawer opens */
#cat-app [tabindex="-1"]:focus, #cat-overlay [tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }

/* issue 1 + 6: the top block; a one-line total on phones, region note, type tabs with no batch hidden */
#cat-app .cat-rqnote { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
#cat-app .cat-type-none { display: none; }
html.cat-dragging #cat-app .cat-type-none { display: block; }
#cat-app .cat-type-zero .cat-type-n, #cat-app .cat-type-zero .cat-type-m { color: var(--muted); }
#cat-app .cat-topslot:empty { display: none; }
@media (max-width: 599px) {
  #cat-app .cat-main { padding-top: 18px; }
  #cat-app .cat-intro { flex-wrap: nowrap; align-items: center; margin-bottom: 12px; gap: 12px; }
  #cat-app .cat-intro-h { flex: 1 1 auto; }
  #cat-app h1 { font-size: 32px !important; }
  #cat-app .cat-lead { display: none; }
  #cat-app .cat-intro .cat-btn-main { flex: none; min-height: 44px; padding: 6px 14px; font-size: 16px; }
  #cat-app .cat-topslot { margin: 0 0 12px; }
  #cat-app .cat-topslot .cat-rbar { margin-bottom: 0; }
  #cat-app .cat-types { margin: 0 0 18px; }
  #cat-app .cat-type-b { min-height: 44px; }
  html.cat-selecting #cat-app .cat-main { padding-bottom: 210px; }
}

/* quick win: picked cards all look the same (hover and focus do not add a second style in select mode) */
html.cat-selecting #cat-app .cat-card-open:hover .cat-title { color: var(--ink); }
html.cat-selecting #cat-app .cat-card-open:hover .cat-thumb img { transform: none; }
#cat-app .cat-picked .cat-title { color: var(--ink); }
#cat-app .cat-packbar-w { margin: 0; font-size: 15px; color: #F2C9B8; }
#cat-app .cat-packbar-w:empty { display: none; }
#cat-app .cat-selbtn[disabled] { opacity: .5; cursor: default; }

/* details: hold line, readable clip list on phones (table on wider screens), actions in a tidy grid */
#cat-overlay .cat-dhold { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--sanguine); font-size: 17px; font-weight: 500; border-radius: 2px; }
#cat-overlay .cat-cliplist { display: none; }
#cat-overlay .cat-clipli { padding: 8px 0; border-bottom: 1px solid var(--line); }
#cat-overlay .cat-clipli p { margin: 0; }
#cat-overlay .cat-clipli-1 { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; font-size: 16px; }
#cat-overlay .cat-clipli-n { overflow-wrap: anywhere; min-width: 0; }
#cat-overlay .cat-clipli-d { flex: none; font-variant-numeric: tabular-nums; font-weight: 400; }
#cat-overlay .cat-clipli-2 { color: var(--muted); font-size: 15px; }
@media (max-width: 599px) {
  #cat-overlay .cat-ctable { display: none; }
  #cat-overlay .cat-cliplist { display: block; }
  #cat-overlay .cat-dacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #cat-overlay .cat-dacts .cat-watch { grid-column: 1 / -1; }
}

/* country rules, confirmations, what is still missing */
#cat-overlay .cat-rules { margin: 14px 0 0; border: 1px solid var(--line-2); background: var(--paper-2); border-radius: 2px; padding: 4px 14px 12px; }
#cat-overlay .cat-drules .cat-rules { margin-top: 8px; }
#cat-overlay .cat-rules-h { font: 500 18px/1.3 var(--serif); margin: 8px 0 2px; }
#cat-overlay .cat-rule { padding: 10px 0; border-bottom: 1px solid var(--line); }
#cat-overlay .cat-rule:last-of-type { border-bottom: 0; }
#cat-overlay .cat-rule p { margin: 0; }
#cat-overlay .cat-rule-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#cat-overlay .cat-rule-n { font-weight: 500; font-size: 17px; }
#cat-overlay .cat-pill { display: inline-block; padding: 0 8px 1px; font-size: 14px; line-height: 1.5; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
#cat-overlay .cat-pill-ok { border-color: #8C9A6A; color: #3F4A22; background: #EEF0DC; }
#cat-overlay .cat-pill-paperwork { border-color: #C9A35E; color: #5E4310; background: #F6EBCF; }
#cat-overlay .cat-pill-hold { border-color: var(--warn-line); color: var(--sanguine); background: var(--warn-bg); }
#cat-overlay .cat-pill-unknown { border-color: var(--line-2); color: var(--muted); background: transparent; }
#cat-overlay .cat-rule-t { font-size: 16px; margin-top: 4px !important; }
#cat-overlay .cat-rule-note { font-size: 15px; color: var(--sanguine); margin-top: 4px !important; }
#cat-overlay .cat-rule-l { font-size: 14px; color: var(--muted); margin-top: 8px !important; letter-spacing: .02em; }
#cat-overlay .cat-rule-ul { list-style: disc; padding-left: 20px; margin: 2px 0 0; font-size: 15px; }
#cat-overlay .cat-rule-ul li { margin: 0 0 2px !important; overflow-wrap: anywhere; }
#cat-overlay .cat-rule-disc { margin: 8px 0 0 !important; font-size: 14px; color: var(--muted); font-style: italic; }
#cat-overlay .cat-confirm { margin: 24px 0 0; border: 1px solid var(--line-2); padding: 10px 14px 4px; border-radius: 2px; min-width: 0; }
#cat-overlay .cat-confirm legend { padding: 0 4px; }
#cat-overlay .cat-confirm .cat-check { align-items: flex-start; margin: 6px 0; }
#cat-overlay .cat-confirm .cat-check input { margin-top: 3px; }
#cat-overlay .cat-confirm .cat-check label { font-size: 17px; }
#cat-overlay .cat-pmissing { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
#cat-overlay .cat-pmissing:empty { display: none; }
#cat-overlay .cat-statusnote:empty { display: none; }
#cat-overlay .cat-statusnote { color: var(--sanguine); }
#cat-overlay .cat-byhand { font-style: italic; }

/* client pack: one main action, the rest as plain links */
#cat-overlay .cat-kacts { align-items: center; gap: 8px 18px; }
#cat-overlay .cat-kmore { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
#cat-overlay .cat-kmore-l { color: var(--muted); font-size: 15px; }
#cat-overlay .cat-kframe { height: 64vh; background: #FBF6EC; }

/* quick win: the "Library" wordmark in the video viewer header is cream on the dark header */
html body #bbox-overlay::after { color: #F6EDD8 !important; }

/* issue 7: share pages; a partner never needs Login, and it sat on "Shared privately" */
html.is-share #flogin, html.is-share a#lo, html.is-share .fx-login, html.is-share #ops a[href*="?login"], html.is-share a[href$="?h"][id="goh"] { display: none !important; }
html.is-share.cat-share-one #wtoggle, html.is-share.cat-share-one #fx-sort, html.is-share.cat-share-one #fx-view, html.is-share.cat-share-one #selall { display: none !important; }
html.cat-share-named #path > a[data-cat-title] { font-size: 0 !important; }
html.cat-share-named #path > a[data-cat-title]::after { content: attr(data-cat-title); font-size: var(--cat-share-fs, 46px); }
html.is-share a[href="?h"] { display: none !important; }
html.cat-share-one body #fx-vt, html.cat-share-one body #wtoggle #selall, html.cat-share-one body #wtoggle #zip1, html.cat-share-one body #ggrid #ghead, html.cat-share-one body #ghead, html.cat-share-one body #fx-ctl { display: none !important; }
html.cat-share-one #fx-bar .cat-share-dl { display: none; }
html body #wtoggle a.cat-share-dl, a.cat-share-dl { display: inline-flex !important; background: #2E2012 !important; border-color: #2E2012 !important; align-items: center; min-height: 44px; padding: 8px 21px; background: #2E2012; color: #F6EDD8 !important; text-decoration: none !important; font: 500 17px/1.2 'EB Garamond', Georgia, serif; border-radius: 2px; }
html body #wtoggle a.cat-share-dl:hover { background: #A6402D !important; }
/* issue 10: the shares list; Copy link is the main action, Open beside it, Add 1 hour a plain link, one expiry column
   (html.cat-shr-done is set by catalog.js on the shares page only) */
html.cat-shr-done #ht_shr #tab button.cat-shr-copy { display: inline-flex !important; align-items: center; min-height: 40px; padding: 6px 14px !important; margin: 2px 12px 4px 0 !important; background: #A6402D !important; color: #F6EDD8 !important; border: 1px solid #A6402D !important; border-radius: 2px; cursor: pointer; font: 500 16px/1.2 'EB Garamond', Georgia, serif !important; white-space: nowrap; }
html.cat-shr-done #ht_shr #tab button.cat-shr-copy:hover { background: #8E3924 !important; }
html.cat-shr-done body #tab .cat-shr-open { display: inline-block !important; margin: 2px 14px 4px 0 !important; color: #2E2012 !important; text-decoration: underline !important; font-size: 16px !important; white-space: nowrap; writing-mode: horizontal-tb; }
html.cat-shr-done #ht_shr #tab td button[value="60"] { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; text-decoration: underline !important; color: #2E2012 !important; cursor: pointer; margin: 2px 14px 4px 0 !important; white-space: nowrap; box-shadow: none !important; }
html.cat-shr-done body #tab tr > :nth-child(10) { display: none !important; }
html.cat-shr-done body #tab td[data-cat-left]::before { content: "in " attr(data-cat-left) ", "; }
html.cat-shr-done body #tab td:last-child a, html.cat-shr-done body #tab td:last-child button { white-space: nowrap !important; word-break: normal !important; }
html.cat-shr-done body #tab td:first-child a { word-break: normal !important; overflow-wrap: anywhere; }
/* quick win: the 1618 tile with cream numerals (brand-2026-10.css draws the PNG with dark numerals) on every
   copyparty page, the sign-in page and the video viewer; only the image changes, size and place stay */
html body::after, html body #bbox-overlay::after, html#ht_spl.fx-anon body::after, html#ht_spl.fx-shr-in body::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20128%20128'%3E%3Crect%20width='128'%20height='128'%20rx='26'%20fill='%23A6402D'/%3E%3Ctext%20x='64'%20y='77'%20text-anchor='middle'%20font-family='EB%20Garamond,%20Cardo,%20Georgia,%20serif'%20font-size='42'%20letter-spacing='1'%20fill='%23F6EDD8'%3E1618%3C/text%3E%3C/svg%3E") !important;
}
/* files.css gives every li on the home page a tall line box: the rules lists keep their own */
#cat-overlay .cat-rule-ul li, #cat-overlay .cat-cliplist li, #cat-overlay .cat-warnbox li { line-height: 1.4 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
#cat-overlay .cat-cliplist li { padding: 8px 0 !important; }

/* ================= impeccable polish (docs/design/impeccable-catalogue-2026-10-30.md) ================= */
/* the search placeholder had picked up wide tracking from the host page; it reads like the rest of the page again */
#cat-app .cat-search .cat-input::placeholder { letter-spacing: normal; word-spacing: normal; }
/* type tabs (the founder's law: nothing scrolls sideways): the tabs always WRAP onto as many rows as they
   need; no sideways scroll, no edge fade, no hidden tab. Narrower screens get shorter gaps and slightly smaller words so
   the rows stay few and the first card stays on the first screen. Each tab keeps its own underline when on, so a tab
   on an upper row still reads as chosen. Dragging files still turns them into drop targets (same rules as above). */
@media (max-width: 999px) {
  #cat-app .cat-typelist { gap: 0 18px; }
  #cat-app .cat-type-b { padding: 8px 0 6px; min-height: 44px; }
}
@media (max-width: 599px) {
  #cat-app .cat-types { margin: 0 0 14px; }
  #cat-app .cat-typelist { gap: 0 12px; }
  #cat-app .cat-type-b { gap: 3px; padding: 6px 0 4px; min-height: 40px; }
  #cat-app .cat-type-n { font-size: 15px; }
}
@media (max-width: 359px) {
  #cat-app .cat-typelist { gap: 0 10px; }
}
/* feat/supplier-footage: "How did we get this footage?", supplier ticks, plain upload errors */
#cat-overlay .cat-origin { border: 0; padding: 0; min-width: 0; }
#cat-overlay .cat-origin .cat-check + .cat-check { margin-top: 8px; }
#cat-overlay .cat-check[hidden] { display: none; }
#cat-overlay .cat-check-by { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
#cat-overlay .cat-pending-note[hidden] { display: none; }
#cat-overlay .cat-pdetails { margin: -4px 0 10px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#cat-overlay .cat-pdetails[hidden] { display: none; }
/* impeccable polish 2026-10-30 (upload dialog): copyparty's 45px line-height leaked into every label and legend here,
   so a confirmation that wraps read double-spaced and a radio sat between its name and its note. Text gets its own
   leading; the 44px tap height comes from padding, and each box lines up with the first line of its label. */
#cat-overlay legend { line-height: 1.35; }
#cat-overlay .cat-check { align-items: flex-start; }
#cat-overlay .cat-check label, #cat-overlay .cat-radio label { line-height: 1.4; padding: 10px 0; min-width: 0; overflow-wrap: anywhere; }
#cat-overlay .cat-check input { margin-top: 11px; }
#cat-overlay .cat-confirm .cat-check { margin: 0; }
#cat-overlay .cat-confirm .cat-check input { margin-top: 11px; }
#cat-overlay .cat-confirm legend { margin-bottom: 2px; }
#cat-overlay .cat-origin .cat-check + .cat-check { margin-top: 0; }
#cat-overlay .cat-origin legend { margin-bottom: 0; }
#cat-overlay .cat-check-by { line-height: 1.4; }
#cat-overlay .cat-atlas .cat-check label { padding: 6px 0; }
#cat-overlay .cat-atlas .cat-check input { margin-top: 7px; }
#cat-overlay .cat-origin .cat-check input { width: 18px; height: 18px; margin: 13px 2px 0; }

/* the signed-in panel (/?h): files.css pins Docs and Sign out to the header row; Catalogue joins them on the left
   in the same voice, instead of falling into the page above "Signed in as" */
#ht_spl #cat-link {
  position: absolute; top: 5px; right: calc(var(--right) + 156px);
  height: 44px; padding: 0 0 0 13px !important; margin: 0 !important;
  font: 400 17px/44px var(--grot) !important; color: var(--ink) !important; text-decoration: none; z-index: 2;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
#ht_spl #cat-link:hover { color: var(--chalk) !important; }
@media (max-width: 600px) { #ht_spl #cat-link { font-size: 15px !important; right: calc(var(--right) + 136px); } }

/* --- the Account menu (catalog.js acctMenu, 2026-10-30): the same on the catalogue, Clients, folder pages and the
   share links page. Written with its own values (not #cat-app variables) and guarded against files.css, which
   styles every header link, button and form on copyparty's pages with !important. --- */
.acct { position: relative; display: inline-block; font: 400 17px/1.3 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif; color: #2E2012; }
.acct *, .acct *::before, .acct *::after { box-sizing: border-box; }
.acct .acct-btn {
  display: inline-flex !important; align-items: center; gap: 3px; min-height: 44px; height: 44px; margin: 0 !important; padding: 0 0 0 13px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer;
  font: inherit !important; color: #2E2012 !important; -webkit-appearance: none; appearance: none; white-space: nowrap;
}
.acct .acct-btn:hover, .acct.is-open .acct-btn { color: #A6402D !important; }
.acct .acct-chev { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.acct.is-open .acct-chev { transform: rotate(180deg); }
.acct :focus-visible { outline: 2px solid #A6402D !important; outline-offset: 2px; }
.acct .acct-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 18rem; max-width: calc(100vw - 24px);
  padding: 6px 0; margin: 0; background: #FBF6EC; border: 1px solid #C7B78F; border-radius: 3px;
  box-shadow: 0 10px 28px -10px rgba(46, 32, 18, .28), 0 2px 6px rgba(46, 32, 18, .08); text-align: left;
}
.acct .acct-pop[hidden], .acct [hidden] { display: none !important; }
.acct .acct-who { margin: 0 !important; padding: 8px 18px 10px !important; font-size: 15px !important; line-height: 1.35 !important; color: #6B5940 !important; border-bottom: 1px solid #DDD0B1; overflow-wrap: anywhere; white-space: normal !important; }
.acct .acct-who strong { font-weight: 500; color: #2E2012; }
.acct .acct-list { list-style: none !important; margin: 0 !important; padding: 4px 0 0 !important; }
.acct .acct-list li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; }
.acct .acct-list li.acct-sep { margin-top: 4px !important; padding-top: 4px !important; border-top: 1px solid #DDD0B1 !important; }
.acct .acct-item {
  display: flex !important; align-items: center; width: 100%; min-height: 44px; height: auto !important; margin: 0 !important; padding: 0 18px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; text-align: left;
  font: inherit !important; line-height: 1.3 !important; color: #2E2012 !important; text-decoration: none !important; white-space: normal;
  -webkit-appearance: none; appearance: none;
}
.acct .acct-item:hover { background: #EFE3C8 !important; color: #2E2012 !important; }
.acct .acct-item:focus-visible { outline-offset: -2px; }
.acct .acct-confirm { padding: 8px 18px 12px; }
.acct .acct-conf-t { margin: 0 0 12px !important; font-size: 16px !important; line-height: 1.4 !important; color: #2E2012 !important; white-space: normal !important; }
.acct .acct-form { display: flex !important; flex-flow: row wrap; gap: 8px; margin: 0 !important; padding: 0 !important; }
.acct .acct-yes, .acct .acct-no {
  display: inline-flex !important; align-items: center; min-height: 44px; height: auto !important; margin: 0 !important; padding: 0 16px !important; border-radius: 2px !important; cursor: pointer;
  font: 500 16px/1.2 'EB Garamond', Georgia, serif !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.acct .acct-yes { background: #A6402D !important; color: #F6EDD8 !important; border: 1px solid #A6402D !important; }
.acct .acct-yes:hover { background: #8E3924 !important; border-color: #8E3924 !important; }
.acct .acct-no { background: none !important; color: #2E2012 !important; border: 1px solid #C7B78F !important; }
.acct .acct-no:hover { border-color: #2E2012 !important; }
@media (prefers-reduced-motion: reduce) { .acct .acct-chev { transition: none; } }



#ht_shr #cat-shr-about { max-width: 38rem; margin: 13px 0 21px; }
#ht_shr #cat-shr-about p { margin: 0 0 8px !important; font: 400 17px/1.45 'EB Garamond', Georgia, serif !important; color: #2E2012; }
#ht_shr #cat-shr-about p + p { color: #6B5940; }

/* the home panel is reached only by accounts with no catalogue now: no "Reset settings" there (still at /?reset) */
#ht_spl #k, #ht_spl #k + br { display: none !important; }

/* the share links list on a phone: the row of actions wraps instead of cutting off Delete at the screen's edge */
html #ht_shr #tab td:nth-child(12) { flex-wrap: wrap !important; }

/* folder tree: the catalogue's index folder is internal (the catalogue page reads it); it is not a folder to browse */
html:not(.is-share) #tree li:has(> a[href="/catalog-index/"]) { display: none !important; }

/* ================= the one header (header pass, 2026-10-30; catalog.js siteHeader) =================
   The same header on the catalogue, the Clients page, folder pages and the share links page: the tile alone, then
   Catalogue, Files, Clients, Docs, the Account menu on the right. Written with its own values and !important where
   files.css styles every header link on copyparty's pages. Wide: one row, 64 px. Phone (below 600 px): the tile and
   Account on the first row, the links on a second row of their own (they always fit there: 4 words), 103 px.
   The current section has an accent underline, its words stay ink. */
html body .lib-top {
  position: relative; z-index: 40; box-sizing: border-box;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 20px;
  width: auto; min-height: 64px; height: auto; margin: 0 !important; padding: 10px 16px 0 !important;
  background: #F6EDD8 !important; border: 0 !important; border-bottom: 1px solid #DDD0B1 !important; box-shadow: none !important;
  font: 400 17px/1.3 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif !important; color: #2E2012 !important;
  text-align: left; letter-spacing: normal; white-space: normal; font-variant-numeric: lining-nums;
}
html body .lib-top *, html body .lib-top *::before, html body .lib-top *::after { box-sizing: border-box; }
html body .lib-top .lib-logo {
  display: block !important; flex: none; width: 36px; height: 36px; padding: 0 !important; margin: 0 !important; overflow: hidden;
  line-height: 0 !important; border: 0 !important; border-radius: 6px; background: none !important; box-shadow: none !important;
}
html body .lib-top .lib-logo img { display: block; width: 36px !important; height: 36px !important; border-radius: 6px; margin: 0; }
html body .lib-top .lib-nav {
  order: 3; flex: 1 1 100%; display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 22px; min-width: 0;
  margin: 4px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; position: static !important;
}
html body .lib-top .lib-nav .lib-link {
  display: inline-flex !important; align-items: center; min-height: 44px; height: auto !important; margin: 0 !important; padding: 0 !important;
  font: 400 17px/1.3 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif !important; color: #2E2012 !important; white-space: nowrap;
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  box-shadow: none !important; text-decoration: none !important; cursor: pointer; -webkit-appearance: none; appearance: none;
  position: static !important; float: none !important;
}
html body .lib-top .lib-nav .lib-link:hover { color: #A6402D !important; }
html body .lib-top .lib-nav .lib-link[aria-current="page"] { border-bottom-color: #A6402D !important; }
html body .lib-top .lib-nav .lib-link:focus-visible, html body .lib-top .lib-logo:focus-visible { outline: 2px solid #A6402D !important; outline-offset: 3px; }
html body .lib-top .lib-acct { order: 2; display: inline-block; margin: 0 0 0 auto !important; position: relative !important; top: auto; right: auto; }
html body .lib-top .lib-acct .acct-btn { padding-left: 8px !important; font-size: 17px !important; }
html body .lib-top .acct li a.acct-item { display: flex !important; padding: 0 18px !important; line-height: 1.3 !important; height: auto !important; font: 400 17px/1.3 'EB Garamond', Georgia, serif !important; }
html body .lib-top .acct li a.acct-item:hover { background: #EFE3C8 !important; }
html body :is(#cat-app, #cl-app) .lib-top .acct .acct-chev, html body #lib-hdr .acct .acct-chev { width: 15px !important; height: 15px !important; stroke-width: 1.6 !important; }
@media (min-width: 600px) {
  html body .lib-top { flex-wrap: nowrap; gap: 32px; padding: 0 24px !important; }
  html body .lib-top .lib-nav { order: 0; flex: 1 1 auto; margin: 0 !important; gap: 0 26px; }
  html body .lib-top .lib-acct { order: 0; }
}

/* copyparty pages with the one header (html.lib-hdr: folder pages, the share links page). The header band is the
   same height as the catalogue's, so --head follows it (the viewer keeps its own). Hidden, never removed: the
   tile + "Library" lockup and the header band (body::before / ::after), copyparty's Docs / Account / Catalogue
   group (#wfp), Sign out (#acc_info) and files.js's share links nav. */
html.lib-hdr { --head: 64px; }
@media (max-width: 599px) { html.lib-hdr { --head: 103px; } }
html.lib-hdr #bbox-overlay { --head: 55px; }
html.lib-hdr body > .lib-top { position: absolute !important; top: 0; left: 0; right: 0; }
html.lib-hdr body::before, html.lib-hdr body::after { content: none !important; display: none !important; }
html.lib-hdr #wfp, html.lib-hdr #acc_info, html.lib-hdr #fx-shr-nav, html.lib-hdr #cat-link { display: none !important; }
/* the viewer's own dark header: the tile without the word beside it (brand rule: tile or wordmark) */
html.lib-hdr body #bbox-overlay::after { content: "" !important; }

/* page actions: a toolbar row at the top of the page content, in the header's voice (plain words, 44 px) */
html.lib-hdr #ops {
  position: static !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 26px;
  top: auto !important; left: auto !important; right: auto !important; height: auto !important; min-height: 44px;
  margin: 13px 0 0 !important; padding: 0 var(--right, 21px) 0 var(--left, 21px) !important;
  background: none !important; border: 0 !important; box-shadow: none !important; white-space: normal;
}
html.lib-hdr #ops > a, #ht_shr.lib-hdr #wrap #lib-tools a.fx-refresh {
  position: relative !important; display: inline-flex !important; align-items: center; height: 44px !important; min-height: 44px;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font: 400 17px/1.3 'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif !important; color: #2E2012 !important;
  text-decoration: none !important; box-shadow: none !important; white-space: nowrap; top: auto !important; right: auto !important;
}
html.lib-hdr #ops > a[style*="none"], html.lib-hdr #ops #opa_x, html.lib-hdr #ops #opa_del, html.lib-hdr #ops #opa_bup, html.lib-hdr #ops #opa_md,
html.lib-hdr #ops #opa_msg, html.lib-hdr #ops #opa_auc, html.lib-hdr #ops #opdesc, html.lib-hdr #ops #opa_cfg { display: none !important; }
html.lib-hdr #ops > a:hover, #ht_shr.lib-hdr #wrap #lib-tools a.fx-refresh:hover { color: #A6402D !important; }
html.lib-hdr #ops > a.act { color: #2E2012 !important; box-shadow: inset 0 -2px 0 #A6402D !important; }
html.lib-hdr #ops > a:focus-visible, #ht_shr.lib-hdr #wrap #lib-tools a.fx-refresh:focus-visible { outline: 2px solid #A6402D !important; outline-offset: 3px; }
html.lib-hdr#ht_brw body { padding-top: var(--head) !important; }
html.lib-hdr #path { padding-top: 13px !important; }
#ht_shr.lib-hdr #lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; min-height: 44px; margin: -8px 0 0; }
#ht_shr.lib-hdr #fx-shr-h { padding: 13px 0 0 !important; }
@media (max-width: 599px) {
  html.lib-hdr #ops { margin-top: 8px !important; gap: 0 22px; }
}
html body .lib-top ::selection { background: #E7C9B4; color: #2E2012; }