/* 1618 Robotics files: skin for copyparty 1.20.x (beauty pass).
   Loaded on every page through html-head. Light mode only. No external requests.
   Voice (as on 1618robotics.com): Cardo for titles and for small letter-spaced capital labels,
   the grotesque for body text, names and buttons. No monospace on screen except a share URL.
   Sizes 13 / 15 / 17 / 21 / 34 / 55. Space 8 / 13 / 21 / 34 / 55 / 89.
   One accent: chalk (hover, focus, active sort and view, selection). */

:root {
  --paper: #F6EDD8;
  --panel: #EFE3C8;
  --line: #D9CDAE;
  --ink: #2E2012;
  --ink-soft: #7D6A4F;
  --ink-label: #5A4C38;          /* small capital labels, as on the public site */
  --chalk: #A6402D;
  --chalk-stroke: #B06A45;
  --fail: #B3261E;
  --hatch: repeating-linear-gradient(135deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 5px);
  --serif: "Cardo", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif CJK SC", serif;
  --grot: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  /* the public site's gutter: 93px at 1512, 24px at 390 */
  --pad: clamp(21px, 6.18vw, 158px);
  --gut: 34px;
  --head: 55px;
  --tree: 280px;                 /* folder tree column (teammates, wide screens) */
  --left: var(--pad);
  --right: var(--pad);
  --logo-left: var(--pad);
  --row-gap: 34px;
  --col-gap: 34px;
  --dl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v9M2 6.5l4 4 4-4M1 13.25h10' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  :root { --gut: 21px; --col-gap: 21px; }
}
/* teammates on a wide screen keep the folder tree on the left; the column starts right of it */
@media (min-width: 1024px) {
  html:not(.is-share):has(#tree[style*="block"]) {
    --left: calc(var(--tree) + var(--gut));
    --logo-left: var(--gut);
  }
}

/* ---------- copyparty theme variables, pinned light on every theme class ---------- */
html, html.a, html.ay, html.y, html.b, html.by, html.bz, html.c, html.cy, html.d, html.dy, html.e, html.ey, html.f, html.fy {
  color-scheme: light !important;
  --font-main: var(--grot) !important;
  --font-serif: var(--serif) !important;
  --font-mono: var(--mono) !important;
  --fg: #2E2012 !important; --fg-max: #2E2012 !important; --fg2-max: #2E2012 !important; --fg-weak: #7D6A4F !important;
  --bg: #F6EDD8 !important; --bgg: #F6EDD8 !important; --bg-max: #F6EDD8 !important;
  --bg-d1: #EFE3C8 !important; --bg-d2: #EFE3C8 !important; --bg-d3: #EFE3C8 !important;
  --bg-u1: #F6EDD8 !important; --bg-u2: #EFE3C8 !important; --bg-u3: #EFE3C8 !important; --bg-u4: #F6EDD8 !important;
  --bg-u5: #D9CDAE !important; --bg-u6: #D9CDAE !important;
  --row-alt: #F6EDD8 !important; --tab-alt: #7D6A4F !important;
  --a: #A6402D !important; --a-b: #A6402D !important; --a-hil: #A6402D !important; --a-gray: #7D6A4F !important; --a-dark: #A6402D !important; --a-h-bg: transparent !important;
  --btn-fg: #2E2012 !important; --btn-bg: #F6EDD8 !important; --btn-h-fg: #2E2012 !important; --btn-h-bg: #EFE3C8 !important;
  --btn-1-fg: #F6EDD8 !important; --btn-1-bg: #2E2012 !important; --btn-1h-fg: #F6EDD8 !important; --btn-1h-bg: #A6402D !important;
  --btn-bs: none !important; --btn-h-bs: none !important; --btn-1-bs: none !important; --btn-1h-bs: none !important; --btn-bb: none !important; --btn-h-bb: none !important; --btn-1-bb: none !important; --btn-1h-bb: none !important;
  --chk-fg: #A6402D !important; --txt-sh: transparent !important; --txt-bg: #F6EDD8 !important;
  --op-a-sh: transparent !important; --op-aa-bg: #EFE3C8 !important; --op-aa-fg: #2E2012 !important;
  --sort-1: #2E2012 !important; --sort-2: #7D6A4F !important;
  --sz-b: #7D6A4F !important; --sz-k: #7D6A4F !important; --sz-m: #7D6A4F !important; --sz-g: #7D6A4F !important; --sz-t: #7D6A4F !important; --sz-p: #7D6A4F !important;
  --srv-1: #7D6A4F !important; --srv-2: #7D6A4F !important; --srv-3: #7D6A4F !important; --srv-3b: transparent !important;
  --tree-bg: #F6EDD8 !important; --scroll: #D9CDAE !important;
  --g-fg: #2E2012 !important; --g-bg: #F6EDD8 !important; --g-b1: #D9CDAE !important; --g-b2: #D9CDAE !important; --g-g1: #F6EDD8 !important; --g-g2: #F6EDD8 !important;
  --g-f-fg: #2E2012 !important; --g-f-bg: #F6EDD8 !important; --g-f-b1: #2E2012 !important; --g-sh: transparent !important; --g-dfg: #2E2012 !important;
  --g-sel-fg: #2E2012 !important; --g-sel-bg: #F6EDD8 !important; --g-sel-b1: #A6402D !important; --g-sel-sh: transparent !important;
  --g-fsel-bg: #F6EDD8 !important; --g-fsel-b1: #A6402D !important; --g-fsel-ts: transparent !important;
  --g-play-bg: #F6EDD8 !important; --g-play-b1: #A6402D !important; --g-play-b2: #A6402D !important; --g-play-sh: transparent !important;
  --f-sh1: 0 !important; --f-sh2: 0 !important; --f-sh3: 0 !important; --f-sel-sh: #A6402D !important; --f-gray: #7D6A4F !important; --f-h-b1: #D9CDAE !important;
  --f-play-bg: #EFE3C8 !important; --f-play-fg: #2E2012 !important;
  --fm-off: #7D6A4F !important; --mp-sh: transparent !important; --mp-b-bg: #EFE3C8 !important;
  --sel-fg: #F6EDD8 !important; --sel-bg: #A6402D !important;
  --err-fg: #2E2012 !important; --err-bg: #F6EDD8 !important; --err-b1: #B3261E !important; --err-ts: transparent !important;
  --u2-txt-bg: #F6EDD8 !important; --u2-tab-bg: #F6EDD8 !important; --u2-tab-b1: #D9CDAE !important; --u2-tab-1-fg: #2E2012 !important; --u2-tab-1-bg: #EFE3C8 !important;
  --u2-tab-1-b1: #A6402D !important; --u2-tab-1-b2: #A6402D !important; --u2-tab-1-sh: transparent !important;
  --u2-b-fg: #2E2012 !important; --u2-b1-bg: #EFE3C8 !important; --u2-b2-bg: #EFE3C8 !important; --u2-btn-b1: #D9CDAE !important; --u2-sbtn-b1: #D9CDAE !important;
  --u2-inf-bg: #EFE3C8 !important; --u2-inf-b1: #D9CDAE !important; --u2-ok-bg: #EFE3C8 !important; --u2-ok-b1: #D9CDAE !important; --u2-err-bg: #F6EDD8 !important; --u2-err-b1: #B3261E !important;
  --ud-b1: #D9CDAE !important;
  text-shadow: none !important;
}
html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--grot) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*, *::before, *::after { text-shadow: none !important; }
html a:focus:not(:focus-visible), html button:focus:not(:focus-visible), html [tabindex]:focus:not(:focus-visible) { outline: none !important; }
html a:focus-visible, html button:focus-visible, html input:focus-visible, html [tabindex]:focus-visible, html #wtoggle a:focus-visible {
  outline: 2px solid var(--chalk) !important;
  outline-offset: 2px;
}
::selection { background: var(--chalk); color: var(--paper); }
/* copyparty rings the label after a focused control (*:focus + label) and adds an inset glow: one focus style only */
html *:focus + label, html.y *:focus + label { outline: none !important; box-shadow: none !important; }
html input[type=checkbox]:focus, html input[type=radio]:focus { outline: none !important; box-shadow: none !important; }
html input[type=checkbox]:focus-visible, html input[type=radio]:focus-visible { outline: 2px solid var(--chalk) !important; outline-offset: 2px; }

/* copyparty hover tooltips carry developer jargon; every control below has a plain label */
#tt, #tth { display: none !important; }

/* ---------- the label voice: small letter-spaced capitals in the serif (site: .counter, .sub-label) ---------- */
html #path a:not(:last-child), html #fx-sum, html #fx-foot, html #ghead > span, html #fx-vt::before,
html #ggrid .fx-meta .fx-sz, html #files thead th, html #tree::before, html .fx-flabel,
#ht_spl #z::before, #ht_spl #l::before, html #path::before, html .opbox h3,
html #shui td:first-child:not([colspan]), html #rui.fx-rn #rn_f td:first-child, html #srch_form label,
html #ht_shr #tab th, html .full-image figcaption::after, html .full-image figcaption .fx-fsz,
html #wtoggle #fx-selc, html.is-share body::before, #ht_spl #wrap > p:has(#un) {
  font-family: var(--serif) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-label);
}

/* ---------- shared header band (all pages): compact lockup top-left on a hairline ---------- */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--head);
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  z-index: 0;
  pointer-events: none;
}
/* compact lockup: the logomark's shell drawn small, the name set live in Cardo (the full lockup's ROBOTICS line
   would render at 5 px here). The full lockup stays on the sign-in and password pages. */
body::after, html #bbox-overlay::after {
  content: "1618 Robotics";
  position: absolute;
  top: 14px;
  left: var(--logo-left);
  height: 27px;
  padding-left: 52px;
  background: url(/brand/shell.svg) left top / auto 27px no-repeat;
  font: 400 21px/31px var(--serif);
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}
/* partners: who shared this, on the header's right */
html.is-share body::before {
  content: "Shared privately";
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--right);
}
@media (max-width: 599px) {
  html.is-share body::before { content: ""; }
}

/* ---------- shared form controls: drafting-sheet fields ---------- */
html input[type=text], html input[type=password], html input:not([type]) {
  font: 400 17px/1.2 var(--grot) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  height: 44px;
  padding: 0 13px !important;
  box-sizing: border-box;
}
html input[type=text]:focus, html input[type=password]:focus {
  border-color: var(--ink) !important;
  outline: none !important;
}
html input:focus-visible { outline: 2px solid var(--chalk) !important; outline-offset: 2px; }
html input::placeholder { color: var(--ink-soft); opacity: 1; font-style: normal; }

/* ---------- one button system: primary (ink), secondary (outline), tertiary (text) ---------- */
html .fx-btn-1 {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 44px; padding: 0 21px; border-radius: 2px;
  font: 500 17px/1 var(--grot); letter-spacing: .01em;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink); text-decoration: none;
}
html .fx-btn-2 {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; padding: 0 21px; border-radius: 2px;
  font: 400 17px/1 var(--grot); letter-spacing: .01em;
  color: var(--ink) !important; background: none !important; border: 1px solid var(--ink-soft) !important; text-decoration: none;
}
html .fx-btn-1:hover { background: var(--chalk); border-color: var(--chalk); color: var(--paper); }
html .fx-btn-2:hover { border-color: var(--ink) !important; color: var(--chalk) !important; }

/* ---------- footer (files.js adds it to every page): a hairline, then marginalia ---------- */
html #fx-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 34px;
  margin: 89px 0 0; padding: 21px 0 34px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
html #fx-foot span { white-space: nowrap; }
html #fx-foot span:empty { display: none; }
/* the domain only (the lockup already names the company): the grotesque, so the figures line up */
html body #fx-foot { font: 400 15px/1.5 var(--grot) !important; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }
@media (max-width: 380px) {
  html #fx-foot { letter-spacing: .1em; }
  html #fx-foot span { white-space: normal; }
}

/* =====================================================================
   SPLASH PAGES: sign in, share password, signed-in panel (#ht_spl)
   ===================================================================== */
#ht_spl body, #ht_msg body { margin: 0 !important; min-height: 100vh; }
#ht_spl #wrap {
  max-width: 466px !important;
  margin: 0 !important;
  padding: calc(var(--head) + 55px) var(--gut) 0 var(--left) !important;
  line-height: 1.4;
  box-sizing: content-box;
}
#ht_spl #wrap.w { max-width: 466px !important; }
#ht_spl #a, #ht_spl #v, #ht_spl #b, #ht_spl #repl, #ht_spl #pb, #ht_spl #w, #ht_spl #wb, #ht_spl #af, #ht_spl #ag { display: none !important; }
#ht_spl h1 {
  font: 400 34px/1.15 var(--serif) !important;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 21px !important;
  padding: 0 !important;
  border: 0 !important;
  text-wrap: balance;
}

/* --- the two front doors (sign in, share password) and the partner pointer: the site's hero composition.
   Left: the full lockup, then an eyebrow, a large title and the form near the golden cut.
   Right (wide screens): a constructed golden-rectangle study behind a full-height hairline. --- */
#ht_spl.fx-anon body::before, #ht_spl.fx-shr-in body::before { display: none; }
#ht_spl.fx-anon body::after, #ht_spl.fx-shr-in body::after {
  content: ""; padding: 0;
  top: var(--pad); left: var(--pad);
  width: 293px; height: 89px;            /* full lockup, 313 x 95 viewBox */
  background: url(/brand/logomark.svg) left center / contain no-repeat;
}
#ht_spl.fx-anon #wrap, #ht_spl.fx-shr-in #wrap {
  display: flex !important; flex-direction: column;
  box-sizing: border-box;
  width: 100%; max-width: none !important; min-height: 100vh; min-height: 100svh;
  padding: max(calc(var(--pad) + 89px + 89px), 31vh) var(--pad) 0 var(--pad) !important;
}
#ht_spl.fx-anon #wrap > *, #ht_spl.fx-shr-in #wrap > * { max-width: 440px; width: 100%; box-sizing: border-box; }
#ht_spl.fx-anon #wrap > #fx-foot, #ht_spl.fx-shr-in #wrap > #fx-foot { max-width: none; margin-top: auto; }
#ht_spl.fx-anon #wrap > #fx-partner + #fx-foot, #ht_spl.fx-anon #wrap > div + #fx-foot { margin-top: auto; }
#ht_spl.fx-anon #fx-foot, #ht_spl.fx-shr-in #fx-foot { padding-top: 21px; }
#ht_spl.fx-anon #fx-foot::before, #ht_spl.fx-shr-in #fx-foot::before { content: ""; display: block; flex-basis: 100%; height: 55px; margin-top: -76px; }
#ht_spl.fx-anon h1, #ht_spl.fx-shr-in h1 {
  font: 400 clamp(34px, 2.2vw + 18px, 55px)/1.05 var(--serif) !important;
  letter-spacing: -.01em;
  margin: 0 0 13px !important;
}
/* eyebrows over the two titles */
#ht_spl #z::before, #ht_spl #l::before {
  display: block;
  margin: 0 0 13px;
  line-height: 1.3;
  letter-spacing: .16em !important;
}
#ht_spl #z::before { content: "Shared privately"; }
#ht_spl.fx-anon #l::before { content: "For the 1618 Robotics team"; }
#ht_spl.fx-anon #l { margin-bottom: 34px !important; }
#ht_spl #fx-sub { font: 400 17px/1.5 var(--grot); color: var(--ink-soft); margin: 0 0 34px; text-wrap: pretty; }

@media (min-width: 1100px) {
  #ht_spl.fx-anon, #ht_spl.fx-shr-in { --split: max(38.2vw, 540px); }
  #ht_spl.fx-anon #wrap, #ht_spl.fx-shr-in #wrap { width: var(--split); }
  #ht_spl.fx-anon body::before, #ht_spl.fx-shr-in body::before {
    display: block; content: "";
    position: fixed; top: 0; bottom: 0; left: var(--split); right: 0; height: auto;
    border: 0; border-left: 1px solid var(--line);
    background: var(--paper) url(/brand/study.svg) center 46% / min(calc(100% - 2 * var(--pad)), 1100px) auto no-repeat;
  }
  /* an expired link: the same study, closer in, on the spiral's eye (the page is a dead end, not a front door) */
  #ht_spl.fx-dead body::before { background-size: 260% auto; background-position: 74% 76%; }
}

/* the sign-in form */
#ht_spl #lf { display: flex; flex-direction: column; gap: 0; }
#ht_spl .fx-flabel { display: block; margin: 0 0 8px; line-height: 1.3; outline: 0 !important; box-shadow: none !important; }   /* copyparty rings the label after a focused field */
#ht_spl .fx-flabel ~ .fx-flabel { margin-top: 21px; }
/* a drafting field: a faint wash on the paper and a ruled line, so an empty field still reads as a field */
#ht_spl #lf input[type=text], #ht_spl #lf input[type=password] {
  width: 100% !important;
  background: rgba(239, 227, 200, .7) !important;
  border: 0 !important; border-bottom: 1px solid var(--ink-soft) !important; border-radius: 2px 2px 0 0 !important;
  padding: 0 13px !important; height: 48px;
}
#ht_spl #lf input[type=text]:hover, #ht_spl #lf input[type=password]:hover { border-bottom-color: var(--ink) !important; }
#ht_spl #lf input[type=text]:focus, #ht_spl #lf input[type=password]:focus { border-bottom-color: var(--ink) !important; box-shadow: inset 0 -1px 0 var(--ink) !important; }
#ht_spl #lf input:focus-visible { outline: none !important; box-shadow: inset 0 -2px 0 var(--chalk) !important; border-bottom-color: var(--chalk) !important; }
#ht_spl #lf input::placeholder { color: transparent; }
#ht_spl .fx-pw { position: relative; display: block; }
#ht_spl .fx-pw input { padding-right: 70px !important; }
#ht_spl .fx-show {
  position: absolute; right: 0; top: 0; height: 48px; min-width: 44px; padding: 0 13px;
  font: 400 15px/48px var(--grot); color: var(--ink-soft); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  -webkit-appearance: none; appearance: none;
}
#ht_spl .fx-show:hover { color: var(--chalk); text-decoration-color: var(--chalk); }
#ht_spl #lm { order: 5; font: 400 15px/1.4 var(--grot); color: var(--fail); margin: 8px 0 0; }
#ht_spl #lm:empty { display: none; }
#ht_spl #lm.fx-bad { border: 0; background: none; padding: 0; color: var(--fail); }
#ht_spl #lf:has(#lm.fx-bad) #lp { border-bottom-color: var(--fail) !important; box-shadow: inset 0 -1px 0 var(--fail) !important; }
#ht_spl #ls, #ht_spl #lo {
  order: 6;
  font: 500 17px/1 var(--grot) !important;
  letter-spacing: .01em;
  height: 48px !important;
  width: 100%;
  padding: 0 21px !important;
  margin: 34px 0 0 !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
#ht_spl #ls:hover { background: var(--chalk) !important; border-color: var(--chalk) !important; }
#ht_spl #fx-note { font: 400 17px/1.5 var(--grot); color: var(--ink-soft); margin: 0 0 21px; }
#ht_spl #fx-partner {
  font: 400 17px/1.5 var(--grot); color: var(--ink-soft);
  margin: 55px 0 0; padding-top: 0;
}
/* expired or unknown link: nothing to unlock, so no form (files.js adds .fx-dead only on copyparty's bare page) */
#ht_spl.fx-dead div:has(> #lf), #ht_spl.fx-dead #z::before { display: none !important; }

/* error/notice box (404 etc.) */
#ht_spl #msg {
  margin: 0 0 34px !important;
  padding: 0;
  font: 400 17px/1.5 var(--grot);
  color: var(--ink-soft);
}
#ht_spl #msg h1 { border: 0 !important; padding: 0 !important; margin: 0 0 13px !important; }
#ht_spl #msg h1 + p { text-align: left !important; margin: 0; }
#ht_spl #msg a { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; color: var(--chalk) !important; display: inline-flex; align-items: center; min-height: 44px; }
#ht_spl #msg a.fx-back { margin-top: 34px !important; padding: 0 21px !important; border: 1px solid var(--ink-soft) !important; border-radius: 2px; color: var(--ink) !important; }
#ht_spl #msg a.fx-back:hover { border-color: var(--ink) !important; color: var(--chalk) !important; }
/* the "403 forbiddena" banner on sign-in and share pages: the form below already says what to do.
   A signed-in teammate on a folder outside the volumes keeps it, in plain words (files.js adds .fx-403). */
#ht_spl:not(.fx-403) #msg:has(#p) { display: none !important; }
#ht_spl.fx-hide-msg #msg { display: none !important; }
#ht_spl.fx-403 #msg { margin-top: 0 !important; }
#ht_spl.fx-403 #msg h1 { font: 400 34px/1.15 var(--serif) !important; letter-spacing: -.01em; color: var(--ink); }
#ht_spl.fx-403 #f, #ht_spl.fx-403 #f + ul, #ht_spl.fx-403 #cc, #ht_spl.fx-403 #cc + .agr, #ht_spl.fx-403 #wrap > p:has(#un) { display: none !important; }
/* sent here from the team docs: one line between the title and the form (files.js) */
#ht_spl #fx-next { font: 400 17px/1.5 var(--grot); color: var(--ink-soft); margin: -21px 0 34px; text-wrap: pretty; }
/* a missing folder inside a share: one heading, one line, Back to all files. No second form, no Sign in. */
#ht_spl.fx-shr-404 #z, #ht_spl.fx-shr-404 #fx-sub, #ht_spl.fx-shr-404 div:has(> #lf) { display: none !important; }

/* signed-in panel (teammates) */
#ht_spl .logout, #ht_spl .af { float: none !important; }
#ht_spl #c {
  position: absolute; top: 5px; right: var(--right);
  height: 44px; line-height: 44px; padding: 0 0 0 13px !important; margin: 0 !important;
  font: 400 17px/44px var(--grot) !important;
  color: var(--ink) !important; background: none !important; border: 0 !important; z-index: 2;
}
#ht_spl #c:hover { color: var(--chalk) !important; }
/* Docs (files.js) to the left of Sign out, the same voice */
#ht_spl #fx-docs {
  position: absolute; top: 5px; right: calc(var(--right) + 89px);
  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 #fx-docs:hover { color: var(--chalk) !important; }
#ht_spl #wrap > p:has(#un) { margin: 0 0 34px; line-height: 1.5; }
#ht_spl #un { font: 400 17px/1 var(--grot); color: var(--ink); text-transform: none; letter-spacing: 0; display: block; margin-top: 3px; }
#ht_spl #f, #ht_spl #g, #ht_spl #cc { margin-top: 34px !important; }
/* rows of folders */
#ht_spl ul { list-style: none; margin: 0; padding: 0; }
#ht_spl li { margin: 0 !important; border-bottom: 1px solid var(--line); }
#ht_spl li:first-child { border-top: 1px solid var(--line); }
#ht_spl li a {
  display: block; padding: 0 !important; margin: 0 !important;
  height: 55px; line-height: 55px;
  font: 400 21px/55px var(--serif) !important;
  color: var(--ink) !important; background: none !important; border: 0 !important; border-radius: 0 !important;
}
#ht_spl li a:hover { color: var(--chalk) !important; }
#ht_spl li a::after { content: "\203A"; float: right; color: var(--ink-soft); font-family: var(--grot); }
/* hide "you can upload to" duplicate list and the change-account form for signed-in people */
#ht_spl.fx-in #g, #ht_spl.fx-in #g + ul, #ht_spl.fx-in #l, #ht_spl.fx-in #l + div { display: none !important; }
#ht_spl .agr { display: flex; flex-direction: column; align-items: flex-start; }
#ht_spl .agr br { display: none; }
#ht_spl .agr a, #ht_spl .agr form { line-height: 44px !important; margin: 0 !important; }
#ht_spl .agr a {
  display: block; padding: 0 !important; height: 44px; border: 0 !important; background: none !important;
  font: 400 17px/44px var(--grot) !important; color: var(--ink) !important; border-radius: 0 !important;
}
#ht_spl .agr a:hover { color: var(--chalk) !important; }
#ht_spl .agr #lo {
  margin-top: 8px !important; color: var(--ink) !important; background: none !important; border: 1px solid var(--ink-soft) !important;
  font-weight: 400 !important; width: auto; height: 44px !important;
}
#ht_spl .agr #lo:hover { border-color: var(--ink) !important; }
/* section titles on the signed-in panel are labels */
#ht_spl.fx-in #f, #ht_spl.fx-in #cc {
  font: 400 13px/1.3 var(--serif) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label);
  margin-bottom: 13px !important;
}
/* anonymous: hide "other stuff" entirely */
#ht_spl.fx-anon #cc, #ht_spl.fx-anon #cc + .agr { display: none !important; }
/* partner whose only session is a share password ("s_..."): no account panel, a pointer back to the link */
#ht_spl.fx-shr-in #c, #ht_spl.fx-shr-in #wrap > p:has(#un), #ht_spl.fx-shr-in #f, #ht_spl.fx-shr-in #f + ul,
#ht_spl.fx-shr-in #cc, #ht_spl.fx-shr-in #cc + .agr, #ht_spl.fx-shr-in #wrap > ul { display: none !important; }
#ht_spl.fx-shr-in #fx-partner { margin-top: 0; font: 400 clamp(21px, 1vw + 13px, 26px)/1.4 var(--serif); color: var(--ink); }
#ht_spl #fx-last {
  display: block; width: fit-content; min-height: 44px; line-height: 44px; margin: 8px 0 0 !important;
  font: 400 17px/44px var(--grot); color: var(--chalk) !important; background: none !important; border: 0 !important; padding: 0 !important;
  overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
/* not found: only the message and Home, no settings block */
#ht_spl.fx-404 #cc, #ht_spl.fx-404 #cc + .agr, #ht_spl.fx-404 #f, #ht_spl.fx-404 #f + ul, #ht_spl.fx-404 #wrap > ul { display: none !important; }
#ht_spl table.vols, #ht_spl table.num { font: 400 15px/1.4 var(--grot); font-variant-numeric: tabular-nums; }
/* downloads / uploads in progress (files.js relabels them): a section label, then a ruled table that scrolls
   inside its own box when it is wider than the screen, so the page itself never scrolls sideways */
#ht_spl #ae, #ht_spl #aa {
  font: 400 13px/1.3 var(--serif) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label);
  margin: 34px 0 8px !important;
}
/* the box is as wide as the page's column allows (the panel's own column is 466px; a wide screen shows
   the whole table, a phone scrolls it); the folder path may wrap, every other cell stays on one line */
#ht_spl .fx-tbl { width: calc(100vw - var(--left) - var(--gut)); max-width: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 0 13px; }
#ht_spl .fx-tbl table.vols { border-collapse: collapse; white-space: nowrap; margin: 0; }
#ht_spl .fx-tbl td a { display: block; max-width: 360px; min-width: 180px; white-space: normal; overflow-wrap: anywhere; }
#ht_spl .fx-tbl th {
  padding: 8px 21px 8px 0; text-align: left; border-bottom: 1px solid var(--ink-soft);
  font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label); white-space: nowrap;
}
#ht_spl .fx-tbl td { padding: 8px 21px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
#ht_spl .fx-tbl td:last-child, #ht_spl .fx-tbl th:last-child { padding-right: 0; }
#ht_spl .fx-tbl td a { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; line-height: 1.4; }
#ht_spl .fx-tbl td a:hover { color: var(--chalk) !important; }
#ht_spl blockquote { font: 400 15px/1.5 var(--grot); color: var(--ink-soft); margin: 8px 0; }

@media (max-width: 767px) {
  #ht_spl #wrap { padding-top: calc(var(--head) + 34px) !important; }
  #ht_spl.fx-anon body::after, #ht_spl.fx-shr-in body::after { top: 34px; width: 181px; height: 55px; }
  #ht_spl.fx-anon #wrap, #ht_spl.fx-shr-in #wrap { padding-top: calc(34px + 55px + 55px) !important; }
  #ht_spl.fx-anon #fx-foot::before, #ht_spl.fx-shr-in #fx-foot::before { height: 34px; margin-top: -55px; }
  #ht_spl #fx-partner { margin-top: 34px; }
}

/* =====================================================================
   MESSAGE PAGES (#ht_msg): "signed in", "wrong password", "signed out"
   ===================================================================== */
#ht_msg #box {
  background: none !important;
  max-width: 440px;
  margin: 0 !important;
  padding: calc(var(--head) + 89px) var(--gut) 55px var(--left) !important;
  box-sizing: content-box;
}
#ht_msg h1 { font: 400 clamp(34px, 2.2vw + 18px, 55px)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 0 0 13px; padding: 0; border: 0; }
#ht_msg h1.fx-bad { color: var(--fail); }
#ht_msg h2 { font: 400 17px/1.4 var(--grot); margin: 0; }
#ht_msg h2 a, #ht_msg a { color: var(--chalk) !important; background: none !important; display: inline-block; min-height: 44px; line-height: 44px; }
#ht_msg p, #ht_msg pre { font: 400 17px/1.5 var(--grot); color: var(--ink-soft) !important; white-space: pre-wrap; }

/* =====================================================================
   FILE BROWSER (browser.html)
   ===================================================================== */
#ht_brw body { font-size: 17px; padding-top: var(--head) !important; }

/* page column: the site's gutter on both sides, no fixed width cap; the pictures get the room */
html body #path, html body #wrap, html body .opview { box-sizing: border-box; }
html body #wrap {
  max-width: none;
  margin: 0 !important;
  padding: 0 var(--right) 0 var(--left) !important;
  min-height: 0;
}
/* panels from the top menu span the content column, edge to edge with the title and the grid */
html body .opview.act, html body #op_up2k.act, html body #op_cfg.act, html body #op_search.act {
  max-width: none;
  margin: 21px 0 0 var(--left) !important;
  width: calc(100% - var(--left) - var(--right));
}
html body #srv_info { display: none !important; }

/* sign out: header right */
html #acc_info {
  position: absolute !important;
  top: 5px !important; right: var(--right) !important; left: auto !important;
  height: 44px; padding: 0 !important; margin: 0 !important;
  background: none !important; z-index: 3;
  font-size: 17px !important;
  display: flex !important; align-items: center;
}
html #acc_info > span:not([id]), html #acc_info span.warn, html #srv_info2 { display: none !important; }
html #blogout {
  font: 400 17px/44px var(--grot) !important;
  height: 44px; padding: 0 0 0 13px !important; margin: 0 !important;
  color: var(--ink) !important; background: none !important; border: 0 !important; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
html #blogout:hover { color: var(--chalk) !important; }
/* partners never signed in: no Sign out (it would end the share session and land them on the teammate sign-in page) */
html.is-share #blogout { display: none !important; }
/* "Account" (control panel) sits left of Sign out, teammates only */
html #wfp {
  position: absolute; top: 5px; right: calc(var(--right) + 77px);
  margin: 0 !important; padding: 0 !important; z-index: 3;
  font: 400 17px/44px var(--grot) !important;
  border: 0 !important; background: none !important;
}
html #wfp > span { display: none !important; }        /* prev / up / next: the breadcrumb does "up" */
html #wfp #goh, html #wfp #fx-docs { color: var(--ink) !important; padding: 0 13px !important; display: inline-block; height: 44px; line-height: 44px; background: none !important; border: 0 !important; font: inherit !important; text-decoration: none !important; }
html #wfp #goh:hover, html #wfp #fx-docs:hover { color: var(--chalk) !important; }
html.is-share #wfp { display: none !important; }

/* top menu (#ops): teammates get plain text tools in the header, starting on the content column's edge */
html #ops {
  position: absolute !important;
  top: 5px; left: calc(var(--left) - 13px);
  height: 44px; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center; gap: 0;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  z-index: 3; white-space: nowrap; font-size: 17px !important;
}
/* without the tree the content edge is the gutter, where the lockup sits: the tools follow the lockup */
html:not(:has(#tree[style*="block"])) #ops { left: calc(var(--logo-left) + 223px); }
@media (min-width: 1024px) {
  html:has(#tree[style*="block"]) #ops { left: calc(var(--left) - 13px); }
}
html #ops > a {
  font: 400 17px/44px var(--grot) !important;
  height: 44px; padding: 0 13px !important; margin: 0 !important;
  color: var(--ink) !important; background: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: inline-block; position: relative;
}
html #ops > a:hover { color: var(--chalk) !important; }
html #ops > a.act { color: var(--chalk) !important; box-shadow: inset 0 -2px 0 var(--chalk) !important; }
html #ops #opa_x, html #ops #opa_del, html #ops #opa_bup, html #ops #opa_md, html #ops #opa_msg, html #ops #opa_auc, html #ops #opdesc { display: none !important; }
html #ops > a[style*="none"] { display: none !important; }
html.is-share #ops { display: none !important; }
html #ops > a svg { display: none; }

/* ---------- title block: eyebrow (breadcrumb), large title, a count line ---------- */
html #path {
  display: block !important;
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  max-width: none;
  margin: 0 !important;
  padding: 21px var(--right) 0 var(--left) !important;
  box-sizing: border-box;
  font: 400 13px/40px var(--serif) !important;
  color: var(--ink-label) !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
html #path #entree { display: none !important; }
html #path a {
  font-size: 13px !important; line-height: 40px !important;
  padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  display: inline-block; min-height: 40px; min-width: 21px; vertical-align: top;
}
html #path a:not(:last-child) { color: var(--ink-label) !important; text-decoration: none; }
html #path a:not(:last-child):hover { color: var(--chalk) !important; }
html #path i {
  display: inline-block !important;
  width: auto !important; height: auto !important; margin: 0 13px !important;
  border: 0 !important; transform: none !important; background: none !important;
  font-style: normal; vertical-align: top; line-height: 40px;
}
html #path i::before { content: "/"; color: var(--line); font-family: var(--grot); letter-spacing: 0; }
/* drop the server root and the internal "s" segment of share links */
html #path > i:first-of-type,
html #path a[href="/"], html #path a[href="/"] + i,
html #path a[href="/s/"], html #path a[href="/s/"] + i { display: none !important; }
/* current folder = page title */
html #path a:last-child {
  display: block !important;
  font: 400 clamp(34px, 2.2vw + 18px, 55px)/1.05 var(--serif) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0 !important; min-height: 44px;
  text-decoration: none !important;
  text-wrap: balance;
}
html #path a:last-child:hover { color: var(--ink) !important; }
html #path a:last-child + i, html #path i:has(+ a:last-child) { display: none !important; }
/* a share's first page has nothing above its title: the same room an eyebrow line would take */
html.is-share #path:not(:has(> a[href^="/s/"]:not([href="/s/"]) ~ a)) { padding-top: calc(21px + 40px) !important; }
/* the count line under the title */
html #fx-sum { margin: 13px 0 0; line-height: 1.3; }
html #fx-sum:empty { display: none; }

/* ---------- folder tree: teammates on wide screens only ---------- */
html #tree {
  position: fixed !important;
  top: var(--head) !important; bottom: 0 !important; left: 0 !important;
  height: auto !important;
  width: var(--tree) !important;
  box-sizing: border-box;
  padding: 21px 13px 55px calc(var(--gut) - 13px);
  background: var(--paper) !important;
  border-right: 1px solid var(--line);
  box-shadow: none !important;
  overflow-x: hidden; overflow-y: auto;
  z-index: 2;
}
html #tree::before {
  content: "Folders"; display: block;
  margin: 0 0 13px 13px; padding: 13px 0 13px; border-bottom: 1px solid var(--line);
  line-height: 1.3;
}
html #treeh, html #treepar, html #thx_ff, html #docul { display: none !important; }
html #tree #treeul > li > a { display: none !important; }
html #treeul { position: static !important; left: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html #tree ul { border: 0 !important; margin: 0 !important; padding: 0 0 0 13px !important; }
html #treeul > li > ul { padding: 0 !important; }
html #tree li { border: 0 !important; margin: 0 !important; padding: 0 !important; white-space: normal; display: flex; flex-wrap: wrap; align-items: flex-start; }
html #tree li > ul { flex-basis: 100%; }
/* nothing in the tree may grow wider than the column, so long names end in an ellipsis */
html #tree li, html #tree ul { min-width: 0; max-width: 100%; box-sizing: border-box; }
html #tree li > a {
  display: inline-flex !important; align-items: center; vertical-align: top;
  min-height: 40px; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* expand / collapse: a drawn hairline chevron in a 34 x 40 target, pointing down when open */
html #tree li > a:first-child {
  flex: none; width: 34px; justify-content: center;
  font-size: 0 !important; color: transparent !important;
}
html #tree li > a:first-child::before {
  content: ""; width: 6px; height: 6px; box-sizing: border-box;
  border: solid var(--ink-soft); border-width: 0 1.25px 1.25px 0;
  transform: rotate(-45deg); transition: transform .15s ease;
}
html #tree li:has(> ul) > a:first-child::before { transform: rotate(45deg) translate(-1px, -1px); }
html #tree li > a:first-child:hover::before { border-color: var(--chalk); }
html #tree li > a + a {
  flex: 1 1 0; min-width: 0;
  font: 400 16px/1.3 var(--grot) !important; color: var(--ink) !important;
  /* one line per folder; the whole name is in the tooltip (files.js) and in the page title when opened */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 10px 8px 10px 5px !important; display: block !important; box-sizing: border-box;
}
html #tree li > a + a:hover { color: var(--chalk) !important; }
html #tree a.hl { color: var(--ink) !important; box-shadow: inset 2px 0 0 var(--chalk) !important; background: none !important; padding-left: 13px !important; }
html #tree a.par { color: var(--ink) !important; }
html #tree ul a.sel { background: var(--panel) !important; box-shadow: inset 2px 0 0 var(--chalk) !important; }
html.is-share #tree { display: none !important; }
@media (max-width: 1023px) {
  html #tree { display: none !important; }
}

/* logues / readme */
html .logue { font: 400 17px/1.5 var(--grot); color: var(--ink); }
html #pro.logue:not(:empty) { margin: 21px 0 0 !important; }
html #epi.logue.mdo { border-top: 1px solid var(--line); }
html #epi.logue.mdo::before { content: none !important; }

/* ---------- toolbar: one row. Left the primary download, right quiet text controls; the rule under it
   is the only rule between the title and the pictures ---------- */
#fx-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 21px;
  margin: 34px 0 0; padding: 0 0 21px;
  border-bottom: 1px solid var(--line);
}
html #wtoggle {
  font: 400 17px/1 var(--grot) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: none !important; border-radius: 0 !important;
  white-space: normal !important;
}
html #wtoggle, html #wtoggle * { line-height: 1 !important; }
html #widget > #wtoggle {
  /* fallback position if the script did not run: bottom-right bar */
  border: 1px solid var(--line) !important;
  height: auto !important; top: auto !important; bottom: 100%; padding: 5px !important;
  display: flex; gap: 5px; align-items: center;
}
#fx-bar #wtoggle {
  position: static !important;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px;
  height: auto !important; padding: 0 !important; margin: 0 !important;
  flex: 1 1 auto; min-width: 0;
  font-size: 17px !important;
}
html #wtoggle > span { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html #wtoggle #wfm.act, html #wtoggle.sel #wzip { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; }
html #wtoggle #wzip1 { display: inline-flex; order: 1; }
html #wtoggle #wzip { order: 2; }
html #wtoggle #wfs { order: 3; }
html #wtoggle #wfm { order: 4; }
html #wtoggle #wtgrid { order: 9; margin-left: auto !important; }
/* the Grid | List pair from files.js replaces copyparty's single toggle */
#fx-bar:has(#fx-vt) #wtgrid { display: none !important; }
html #wtoggle.sel #wzip1 { display: none !important; }
html #wtoggle #wnp, html #wtoggle #wm3u, html #wtoggle #wtico, html #wtoggle #selinv, html #wtoggle #wfs { display: none !important; }
html.is-share #wtoggle #wfm { display: none !important; }
html #wtoggle a:focus { box-shadow: none !important; }
/* secondary actions: 44px outline buttons */
html #wtoggle a {
  display: inline-flex !important; align-items: center; justify-content: center;
  box-sizing: border-box;
  height: 44px; padding: 0 21px !important; margin: 0 !important;
  font: 400 17px/1 var(--grot) !important; letter-spacing: .01em;
  color: var(--ink) !important; background: none !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important;
  top: 0 !important; opacity: 1 !important; position: relative;
  white-space: nowrap; text-decoration: none !important;
}
html #wtoggle a:hover { border-color: var(--ink) !important; color: var(--chalk) !important; }
html #wtoggle a span { display: inline !important; font-size: 17px !important; padding: 0 !important; }
html #wtoggle a br { display: none; }
html #wfm a.hide, html #wfm a:not(.en) { display: none !important; }
/* primary: download everything here */
html #wtoggle #zip1, html #wtoggle #selzip {
  color: var(--paper) !important; background: var(--ink) !important; border-color: var(--ink) !important;
  font-weight: 500 !important;
}
html #wtoggle #zip1::before, html #wtoggle #selzip::before, html #wtoggle #seldl::before {
  content: ""; width: 12px; height: 14px; margin-right: 13px; flex: none;
  background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #wtoggle #zip1 span { font-weight: 500 !important; }
html #wtoggle #zip1:hover, html #wtoggle #selzip:hover { background: var(--chalk) !important; border-color: var(--chalk) !important; color: var(--paper) !important; }
html #wtoggle #zip1[style*="none"], html #wtoggle #wzip1:has(> #zip1[style*="none"]) { display: none !important; }
html #wtoggle #wtgrid, html #wtoggle #wtgrid.on, html #wtoggle #wtgrid:focus, html #wtoggle #wtgrid:not(.on) {
  border-color: transparent !important; padding: 0 13px !important;
  color: var(--ink) !important; background: none !important; text-decoration: none !important;
}
/* "2 selected" while selecting */
html #wtoggle #fx-selc { display: none; padding: 0 8px 0 0; line-height: 44px !important; white-space: nowrap; }
html #wtoggle.sel #fx-selc { display: inline-block; }

/* quiet controls on the right: Sort (a label, then the options), Select, Grid | List. The options are plain
   sentence-case words in the body face so they read as buttons; only the label "Sort" is in the label voice.
   Hairlines separate the three groups. */
html #fx-bar #ghead {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  position: static !important; flex: none; margin-left: auto !important;
}
html #ghead #gridvau, html #ghead #gridcrop, html #ghead #grid3x,
html #ghead > span:has(a[z]), html #ghead > span:has(a[l]),
html #ghead a[s="ext"] { display: none !important; }
html #ghead > span:last-child { order: 1; display: inline-flex; align-items: center; gap: 0; white-space: nowrap; margin: 0 !important; padding: 0 !important; }
html #ghead .fx-lab { display: inline-block; margin-right: 5px; }
html #ghead #gridsel { order: 2; }
html #ghead a, html #fx-vt a {
  display: inline-flex !important; align-items: center; height: 44px; box-sizing: border-box;
  padding: 0 8px !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 16px/1 var(--grot) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ink-soft) !important; text-decoration: none !important; top: 0 !important;
  cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { html #ghead a:hover, html #fx-vt a:hover { color: var(--chalk) !important; } }
html #ghead > span a.s0, html #ghead > span a.s0r { color: var(--ink) !important; }
/* the active sort carries a drawn arrow (down = A to Z / small to large), copyparty's glyphs are replaced */
html #ghead a.s0::after, html #ghead a.s1::after, html #ghead a.s0r::after, html #ghead a.s1r::after { content: "" !important; }
html #ghead a.s0::after, html #ghead a.s0r::after {
  content: "" !important; width: 9px; height: 11px; margin-left: 6px;
  background: var(--chalk); -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #ghead a.s0r::after { transform: scaleY(-1); }
/* group hairlines (wide screens) */
html #fx-bar #ghead > span:last-child::after, html #fx-vt::before {
  content: ""; display: inline-block; width: 1px; height: 21px; background: var(--line); flex: none;
}
html #fx-bar #ghead > span:last-child::after { margin: 0 5px; }
/* selecting: Sort steps aside and Select becomes Done, an outline button (the view's underline stays the only one) */
html #fx-bar:has(#gridsel.on) #ghead > span:last-child { display: none !important; }
html #ghead #gridsel.on {
  height: 40px; padding: 0 21px !important; margin: 0 8px 0 0 !important;
  color: var(--ink) !important; box-shadow: none !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important;
}
@media (hover: hover) { html #ghead #gridsel.on:hover { border-color: var(--ink) !important; color: var(--chalk) !important; } }
/* items selected: the toolbar turns into one tinted action bar. The count and Select all on the left,
   Download selected (zip) as the primary, the file tools as compact outline buttons. */
html #fx-bar:has(#wtoggle.sel) {
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: 8px 13px 8px 21px; gap: 8px 13px;
}
html #wtoggle.sel #wzip, html #wtoggle.sel #wfm.act { display: contents !important; }
html #fx-bar:has(#wtoggle.sel) #wtoggle { background: none !important; text-align: left; }
html #fx-bar:has(#gridsel.on):has(#wtoggle.sel) #fx-vt { display: none !important; }
html #wtoggle.sel #fx-selc { order: 1; }
html #wtoggle.sel #selall { order: 2; }
html #wtoggle.sel #selzip { order: 3; }
html #wtoggle.sel #seldl { order: 4; }
html #wtoggle.sel #wfm a { order: 5; }
html #wtoggle.sel a { height: 40px; padding: 0 13px !important; font-size: 15px !important; }
html #wtoggle.sel a span { font-size: 15px !important; }
html #wtoggle.sel #selall { border-color: transparent !important; padding: 0 8px !important; color: var(--ink-soft) !important; text-decoration: underline !important; text-decoration-color: var(--line) !important; text-underline-offset: 4px; }
html #wtoggle.sel #selall:hover { color: var(--chalk) !important; text-decoration-color: var(--chalk) !important; }
html #wtoggle.sel #selzip { padding: 0 21px !important; }
/* Sort, Select and Grid | List share one holder (files.js), so they wrap to the next row as one group */
html #fx-bar #fx-ctl { display: flex; align-items: center; flex: none; gap: 0 21px; margin-left: auto; }
html #fx-vt { display: inline-flex; align-items: center; flex: none; }
html #fx-vt::before { margin: 0 5px 0 -16px; }
@media (min-width: 768px) { html[data-fx-view="list"] #fx-vt::before { display: none; } }
html #fx-vt i { font-style: normal; color: var(--line); padding: 0 2px; }
html #fx-vt a[aria-pressed="true"] { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--chalk) !important; cursor: default; }
html[data-fx-view="list"] #fx-bar #ghead { display: none !important; }

/* audio mini player is never needed for this archive */
html #widget { box-shadow: none !important; border: 0 !important; background: none !important; }
html #widget #widgeti, html #widget #np_inf { display: none !important; }

/* ---------- the drawn download arrow (Download links on tiles and rows) ---------- */
html #ggrid .fx-gdl::before,
html #files tbody td:first-child .fx-dl::before,
html #files tbody td:first-child a[href*="?zip"]::before,
html #files tbody td:first-child a[href$="?tar"]::before {
  content: ""; display: inline-block; flex: none;
  width: 10px; height: 12px; margin-right: 8px;
  background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}

/* ---------- list view: Name | Size | Date | Download ---------- */
html #files {
  width: 100% !important;
  display: block !important;
  top: 0 !important;
  border-collapse: collapse;
  font-family: var(--grot) !important;
  margin-top: 13px;
}
html #files[style*="none"] { display: none !important; }
html #files thead, html #files tbody { display: block; }
html #files tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px 178px 178px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
/* partners: no upload date (it means nothing to them); size sits next to Download */
html.is-share #files tr { grid-template-columns: minmax(0, 1fr) 110px 178px; }
html.is-share #files tr > :last-child { display: none !important; }
/* column placement: copyparty order is lead, name, size, [tags...], ext, date */
html #files tr > :first-child { order: 4; justify-self: end; }
html #files tr > :nth-child(2) { order: 1; }
html #files tr > :nth-child(3) { order: 2; }
html #files tr > :last-child { order: 3; }
html #files tr > :not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:last-child) { display: none !important; }
html #files th, html #files td {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  max-width: none !important; min-width: 0; overflow: hidden;
  padding: 0 13px !important;
  font-size: 17px;
}
html #files td.min, html #files th.min { width: auto !important; display: block; }
html #files th.min span, html #files td.min * { font-size: inherit !important; }
html #files tr > :nth-child(2) { padding-left: 0 !important; }
html #files tr > :first-child { padding-right: 0 !important; }

/* header row */
html #files thead tr { border-bottom: 1px solid var(--line); }
html #files thead th {
  position: static !important;
  height: 44px; display: flex; align-items: center;
  cursor: pointer; white-space: nowrap;
}
html #files thead th .cfg { display: none !important; }
html #files thead th span { font-size: 0 !important; letter-spacing: 0 !important; }
html #files thead th span::before { letter-spacing: .16em; font-size: 13px; }
html #files thead th[name="href"] span::before { content: "Name"; }
html #files thead th[name="sz"] span::before { content: "Size"; }
html #files thead th[name="ts"] span::before { content: "Date"; }
html #files thead th[name="lead"] { cursor: default; pointer-events: none; }
html #files thead th[name="sz"] { justify-content: flex-end; }
/* sort headers: muted until active; the active one in ink with its arrow in chalk (no red words, no stuck hover on phones) */
html #files thead th { color: var(--ink-soft) !important; }
@media (hover: hover) { html #files thead th:not([name="lead"]):hover { color: var(--ink) !important; } }
html #files thead th.s0, html #files thead th.s0r { color: var(--ink) !important; }
html #files .s0::after, html #files .s1::after, html #files .s0r::after, html #files .s1r::after { content: "" !important; }
html #files thead th.s0::after, html #files thead th.s0r::after {
  content: "" !important; width: 9px; height: 11px; margin-left: 6px; flex: none;
  background: var(--chalk); -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #files thead th.s0r::after { transform: scaleY(-1); }

/* body rows */
html #files tbody tr { min-height: 55px; }
html #files tbody tr:hover, html #files tbody tr:focus { background: var(--panel) !important; outline: none; }
html #files tbody tr:hover td, html #files tbody tr:focus td { background: none !important; box-shadow: none !important; }
html #files tbody td { height: auto; color: var(--ink) !important; }
html #files tbody td:nth-child(2) a {
  min-height: 55px;
  padding: 0 !important; margin: 0 !important;
  font: 400 17px/1.3 var(--grot) !important;
  color: var(--ink) !important; background: none !important;
  /* long names wrap instead of losing their end (the end tells takes and versions apart) */
  display: flex !important; align-items: center; padding: 8px 0 !important; box-sizing: border-box;
  white-space: normal; overflow-wrap: anywhere;
  text-decoration: none !important;
}
html #files tbody td:nth-child(2) a:hover { color: var(--chalk) !important; }
/* file-type marks before names: file = a ruled sheet, video = a round play disc, folder = a tab outline */
html #files tbody td:nth-child(2) a::before {
  content: ""; flex: none; display: inline-block; vertical-align: -2px;
  width: 13px; height: 16px; margin: 0 19px 0 5px;   /* every mark + gap = 37px, so names line up */
  border: 1px solid var(--ink-soft); border-radius: 1px; box-sizing: border-box;
  background: linear-gradient(var(--ink-soft), var(--ink-soft)) 2px 4px / 7px 1px no-repeat,
              linear-gradient(var(--ink-soft), var(--ink-soft)) 2px 7px / 7px 1px no-repeat,
              linear-gradient(var(--ink-soft), var(--ink-soft)) 2px 10px / 4px 1px no-repeat;
}
html #files tbody td:nth-child(2) a:is([href$=".mp4" i], [href$=".mov" i], [href$=".m4v" i], [href$=".webm" i], [href$=".mkv" i])::before {
  width: 24px; height: 24px; margin: 0 13px 0 0; border-radius: 50%; border-color: var(--ink-soft);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7.5v9l7-4.5z' fill='%232E2012'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
html #files tbody tr:hover td:nth-child(2) a::before { border-color: var(--chalk); }
html #files tbody td:nth-child(2) a[href$="/"]::before {
  width: 18px; height: 13px; border-radius: 1px; margin: 0 16px 0 3px;
  border-top-width: 3px;
  background: none;
}
html #files tbody td:nth-child(3),
html #files tbody td:last-child {
  font: 400 15px/1.3 var(--grot) !important;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft) !important;
  white-space: nowrap;
}
/* dates to the minute: files.js moves the seconds into a hidden span */
html #files .fx-sec { display: none; }
/* narrow phones: the list's date line keeps the whole date and drops the time, rather than cutting a digit */
@media (max-width: 380px) { html #files .fx-time { display: none; } }
html #files tbody td:last-child { text-overflow: ellipsis; }
/* folder names: copyparty's trailing slash is kept in the text (for sorting) but not shown */
html #files .fx-slash { display: none; }
html #files tbody td:nth-child(3) { text-align: right !important; padding-right: 13px !important; }
html #files tbody td:nth-child(3) span { color: inherit !important; font-weight: 400 !important; }
/* folders have no meaningful size */
html #files tbody tr:has(td:nth-child(2) > a[href$="/"]) td:nth-child(3) { visibility: hidden; }

/* per-row download (lead column): same look as the grid tiles' Download */
html #files tbody td:first-child { text-align: right !important; overflow: visible; }
/* copyparty's "-txt-" (its text viewer, for .json / .csv / .md files) and its play link: Download is the one action */
html #files tbody td:first-child a.play, html #files tbody td:first-child a.doc { display: none !important; }
/* data files: a plain label leads ("Clip data (JSON)"), the stored name follows in small type (files.js) */
html #files tbody td:nth-child(2) a .fx-nm { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 13px; min-width: 0; padding: 0; }
html #files tbody td:nth-child(2) a .fx-flab { font: 400 17px/1.3 var(--grot); color: var(--ink); padding: 0; }
html #files tbody td:nth-child(2) a .fx-fname { font: 400 13px/1.4 var(--grot); color: var(--ink-soft); overflow-wrap: break-word; padding: 0; }
/* in search results copyparty writes a "-" into the lead cell of every row without a play link: hidden (the
   cell's own text has no size; its Download keeps its 15px) */
html #files tbody td:first-child { font-size: 0; }
/* a clip's data files hang under their clip: indented, on the quiet row tint, in the body size one step down */
html #files tbody tr[data-fx-side] { min-height: 44px; }
html #files tbody tr[data-fx-side] td:nth-child(2) a { min-height: 44px; padding: 5px 0 !important; font-size: 15px !important; }
html #files tbody tr[data-fx-side] td:nth-child(2) a::before { margin-left: 42px; }   /* 37px under the clip name, then the mark */
html #files tbody tr[data-fx-side] td:nth-child(2) a .fx-flab { font-size: 15px; }
/* search results: the data file's folder line keeps the clip's indent too */
html #files tbody tr[data-fx-side] td:nth-child(2) > div { padding-left: 79px; }
html #files tbody td:first-child .fx-dl,
html #files tbody td:first-child a[href$="?zip"],
html #files tbody td:first-child a[href*="?zip&"],
html #files tbody td:first-child a[href*="?zip="],
html #files tbody td:first-child a[href$="?tar"] {
  display: inline-flex !important; align-items: center; justify-content: flex-end;
  height: 44px; min-height: 44px; padding: 0 0 0 13px !important; margin: 0 !important;
  font: 400 15px/1 var(--grot) !important;
  color: var(--ink-soft) !important; background: none !important; border: 0 !important; border-radius: 0;
  white-space: nowrap; cursor: pointer;
  text-decoration: none !important;
}
html #files tbody td:first-child .fx-dl:hover,
html #files tbody td:first-child a[href*="?zip"]:hover,
html #files tbody td:first-child a[href$="?tar"]:hover { color: var(--chalk) !important; text-decoration: underline !important; text-decoration-color: var(--chalk) !important; text-underline-offset: 4px; }
/* selected rows */
html #files tbody tr.sel { background: var(--panel) !important; box-shadow: inset 2px 0 0 var(--chalk); }
html #files tbody tr.sel td, html #files tbody tr.sel span { background: none !important; color: var(--ink) !important; }
html #files tbody tr.sel td:nth-child(2) a { padding-left: 13px !important; }
html #files tbody tr.play, html #files tbody tr.play td { background: var(--panel) !important; }

/* column-hide controls in settings / phone header picker */
html #hcols, html #hcolsh, html #hcolsr { font-family: var(--grot); }

/* ---------- grid view (default): a contact sheet of large frames ---------- */
html #gfiles { margin-top: 0; }
html #ghead { font: 400 13px/1 var(--serif) !important; color: var(--ink-label) !important; }
/* fallback when files.js did not move the grid header into the toolbar */
html #gfiles > #ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 13px 0 !important; margin: 0 !important; position: static !important; }

/* twelve tracks: files take 4 (three across), folder cards take 6 (two across) */
html #ggrid {
  margin: 34px 0 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--row-gap) var(--col-gap) !important;
  justify-content: stretch !important; align-items: start !important;
}
html #ggrid > a { grid-column: span 4; }
html #ggrid > a.dir[data-fx-cover] { grid-column: span 6; }
html #ggrid > a.dir:not([data-fx-cover]) { grid-column: 1 / -1; }
/* the first file after the folders starts a new row (and keeps its width) */
html #ggrid > a.dir + a:not(.dir) { grid-column: 1 / span 4; }
@media (min-width: 1800px) {
  html #ggrid > a { grid-column: span 3; }
  html #ggrid > a.dir[data-fx-cover] { grid-column: span 4; }
  html #ggrid > a.dir + a:not(.dir) { grid-column: 1 / span 3; }
}
@media (max-width: 899px) {
  html #ggrid > a, html #ggrid > a.dir[data-fx-cover] { grid-column: span 6; }
  html #ggrid > a.dir + a:not(.dir) { grid-column: 1 / span 6; }
}
/* phones: two frames across (four or more videos on one screen), folder cards full width; one across below 360px */
@media (max-width: 599px) {
  html body #ggrid { --row-gap: 21px; --col-gap: 13px; }
  html body #ggrid > a { grid-column: span 6; }
  html body #ggrid > a.dir + a:not(.dir) { grid-column: 1 / span 6; }
  html body #ggrid > a.dir, html body #ggrid > a.dir[data-fx-cover] { grid-column: 1 / -1; }
  html body #ggrid > a:not(.dir) > span { font-size: 15px !important; padding-top: 8px !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; }
  html body #ggrid > a:not(.dir) > .fx-meta { flex-wrap: wrap; gap: 0; min-height: 0; }
  html body #ggrid > a:not(.dir) .fx-meta .fx-sz { flex: 1 1 100%; padding-top: 5px; }
  html body #ggrid > a:not(.dir) .fx-gdl { padding-left: 0; height: 40px; }
  html body #ggrid > a:not(.dir):is([href*=".mp4" i], [href*=".mov" i], [href*=".m4v" i], [href*=".webm" i], [href*=".mkv" i])::before {
    left: 8px; width: 28px; height: 28px; margin-top: calc((100% * 9 / 16) - 8px - 28px); background-size: 28px 28px !important;
  }
}
/* phone folder cards: a shorter mosaic, the name and Download (zip) on one line, the count under them */
@media (max-width: 599px) {
  html body #ggrid > a.dir[data-fx-cover] {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 13px; align-items: center;
  }
  html body #ggrid > a.dir[data-fx-cover] > .fx-cover { grid-column: 1 / -1; aspect-ratio: 3 / 1; gap: 5px; }
  html body #ggrid > a.dir[data-fx-cover] > span { grid-column: 1; grid-row: 2; align-self: start; padding: 13px 0 0 !important; font-size: 26px !important; -webkit-line-clamp: 2; line-clamp: 2; }
  html body #ggrid > a.dir[data-fx-cover] > .fx-meta { display: contents; }
  html body #ggrid > a.dir[data-fx-cover] .fx-gdl { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6px; padding: 0 !important; height: 44px; }
  html body #ggrid > a.dir[data-fx-cover] .fx-sz { grid-column: 1 / -1; grid-row: 3; padding-top: 3px; }
}
@media (max-width: 359px) {
  html body #ggrid > a, html body #ggrid > a.dir + a:not(.dir) { grid-column: 1 / -1; }
}
html #ggrid > a {
  display: block; width: auto !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--ink) !important; position: relative; text-decoration: none !important;
  transition: none !important;
}
/* every tile in a row is as tall as the tallest, and its type / size line and Download sit at the bottom,
   so a facts line that wraps to one more line does not push its neighbours' lines out of step */
html #ggrid > a:not(.dir) { display: flex; flex-direction: column; align-self: stretch; }
html #ggrid > a:not(.dir) > .fx-meta { margin-top: auto; }
html #ggrid > a::before { display: none !important; content: none !important; }
html #ggrid > a img {
  display: block; box-sizing: border-box;
  width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important;
  aspect-ratio: 16 / 9; object-fit: cover; margin: 0 !important;
  border: 1px solid var(--line); border-radius: 0 !important; box-shadow: none !important;
  background: var(--panel);
  opacity: 1 !important; filter: none !important;
  transition: border-color .15s ease;
  animation: fx-in .24s ease-out;
}
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html #ggrid > a img, html #ggrid .fx-cover img { animation: none !important; } }
/* no thumbnail yet: copyparty's coloured type icon is replaced by the brand's hatching (the one hatched element
   on the page) with a plain note; files.js asks again for about 30 s, then the real frame fades in */
html #ggrid > a img[src*="/.cpr/ico/"], html #ggrid > a[data-fx-ph] img {
  object-position: -9999px 0; background: var(--panel); animation: fx-wait 1.8s ease-in-out infinite;
}
/* waiting for a preview: a flat panel that breathes slowly, so the wait looks deliberate */
@keyframes fx-wait { 0%, 100% { background-color: #EFE3C8; } 50% { background-color: #E7D9BA; } }
@media (prefers-reduced-motion: reduce) { html #ggrid img, html #ggrid .fx-cover, html #ggrid .fx-fill { animation: none !important; } }
html #ggrid > a[data-fx-ph]::after {
  content: attr(data-fx-ph);
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: 400 13px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label);
}
/* video tiles: a drawn play mark, a hairline circle on a soft scrim in the frame's lower left */
html #ggrid > a:not(.dir):is([href*=".mp4" i], [href*=".mov" i], [href*=".m4v" i], [href*=".webm" i], [href*=".mkv" i])::before {
  content: "" !important; display: block !important;
  position: absolute; left: 13px; top: 0; margin-top: calc((100% * 9 / 16) - 13px - 34px);
  width: 34px; height: 34px; box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(246, 237, 216, .85);
  background: rgba(46, 32, 18, .42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 11.5v11l8.5-5.5z' fill='%23F6EDD8'/%3E%3C/svg%3E") center / 34px 34px no-repeat !important;
  padding: 0 !important; font-size: 0 !important; z-index: 1; pointer-events: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html #ggrid > a[data-fx-ph]::before { border-color: var(--ink-soft) !important; }
html #ggrid > a:not(.dir):hover::before, html #ggrid > a:not(.dir):focus-visible::before { background-color: var(--chalk) !important; border-color: var(--chalk) !important; }
html #ggrid > a > span {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font: 400 16px/1.3 var(--grot) !important; color: var(--ink) !important;
  padding: 13px 0 0 !important; overflow-wrap: anywhere; word-break: break-all; text-align: left !important;
}
/* type + size, then Download, on one line under each name */
html #ggrid > a > .fx-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 13px;
  min-height: 40px;
}
html #ggrid .fx-meta .fx-sz { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html #ggrid .fx-gdl {
  display: inline-flex; align-items: center; height: 40px; padding: 0 0 0 13px; flex: none;
  font: 400 15px/1 var(--grot); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
html #ggrid .fx-gdl:hover, html #ggrid .fx-gdl:focus-visible { color: var(--chalk) !important; text-decoration: underline; text-decoration-color: var(--chalk); text-underline-offset: 4px; }
html #ggrid > a:hover img, html #ggrid > a:focus-visible img { border-color: var(--chalk); }
html #ggrid > a:hover > span { color: var(--ink) !important; }
html #ggrid > a.sel img { border: 2px solid var(--chalk); }
html #ggrid > a.sel::after { content: ""; position: absolute; top: 8px; right: 8px; width: 21px; height: 21px; border-radius: 50%; background: var(--chalk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 10.5l3 3 6-6' fill='none' stroke='%23F6EDD8' stroke-width='1.6'/%3E%3C/svg%3E") center / 21px no-repeat; pointer-events: none; }
html #ggrid > a.play img { border-color: var(--chalk); }
html #ggrid > a.fcut { opacity: .5; }
html #ggrid > a:focus { outline: none !important; }
html #ggrid > a:focus-visible img { outline: 2px solid var(--chalk); outline-offset: 2px; }

/* folders, files.js enhanced: a cover card made from the folder's own thumbnails (one large frame and two
   small ones, all 16:9), the name as a title, the count as a label, Download (zip) */
html #ggrid > a.dir[data-fx-cover] { display: flex !important; flex-direction: column; border: 0 !important; }
html #ggrid > a.dir[data-fx-cover] > img { display: none !important; }
html #ggrid .fx-cover {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  aspect-ratio: 8 / 3; width: 100%; overflow: hidden;
}
html #ggrid .fx-cover img {
  width: 100% !important; height: 100% !important; aspect-ratio: auto; min-height: 0; object-fit: cover;
}
/* the same mosaic for every folder: the large frame on the left, two small ones on the right; a folder with
   fewer videos gets plain paper panels in the free slots (files.js adds them) */
html #ggrid .fx-cover > :first-child { grid-row: 1 / 3; }
html #ggrid .fx-cover .fx-fill { display: block; min-height: 0; background: var(--panel); border: 1px solid var(--line); box-sizing: border-box; }
html #ggrid .fx-cover[data-n="0"] { display: block; border: 1px solid var(--line); box-sizing: border-box; background: var(--panel); animation: fx-wait 1.8s ease-in-out infinite; }
html #ggrid .fx-cover img[data-fx-ph] { object-position: -9999px 0; background: var(--panel); animation: fx-wait 1.8s ease-in-out infinite; }
html #ggrid > a.dir[data-fx-cover]:hover .fx-cover img, html #ggrid > a.dir[data-fx-cover]:focus-visible .fx-cover img { border-color: var(--chalk); }
html #ggrid > a.dir[data-fx-cover] > span {
  -webkit-line-clamp: 2; line-clamp: 2; word-break: normal; overflow-wrap: anywhere;
  font: 400 clamp(26px, 1.2vw + 15px, 34px)/1.15 var(--serif) !important; letter-spacing: -.01em;
  padding: 21px 0 0 !important;
}
html #ggrid > a.dir[data-fx-cover] > span::before { content: none !important; }
html #ggrid > a.dir[data-fx-cover] > .fx-meta { margin-top: 5px; }
html #ggrid > a.dir[data-fx-cover]:hover { background: none !important; }
html #ggrid > a.dir[data-fx-cover]:hover > span { color: var(--chalk) !important; }
html #ggrid > a.dir.sel[data-fx-cover] { box-shadow: none !important; background: none !important; }
html #ggrid > a.dir.sel[data-fx-cover] .fx-cover img, html #ggrid > a.dir.sel[data-fx-cover] .fx-cover[data-n="0"] { border: 2px solid var(--chalk); }
html #ggrid > a.dir.sel[data-fx-cover]::after { display: block !important; }

/* folders without a cover (still loading, or the listing could not be read): ruled index rows, names as titles */
html #ggrid > a.dir:not([data-fx-cover]) {
  display: flex !important; align-items: center; gap: 13px;
  min-height: 55px;
  border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
}
html #ggrid > a.dir:not([data-fx-cover]) + a.dir:not([data-fx-cover]) { margin-top: calc(-1 * var(--row-gap) - 1px) !important; }
html #ggrid > a.dir:not([data-fx-cover]) img { display: none !important; }
html #ggrid > a.dir::after { display: none !important; }
html #ggrid > a.dir:not([data-fx-cover]) > span {
  flex: 1 1 auto; min-width: 0; padding: 0 !important;
  -webkit-line-clamp: 1; line-clamp: 1;
  word-break: normal;
  font: 400 21px/1.3 var(--serif) !important;
}
html #ggrid > a.dir > .fx-meta { flex: none; }
html #ggrid > a.dir:not([data-fx-cover]) > .fx-meta .fx-sz { display: none; }
html #ggrid > a.dir:not([data-fx-cover]):hover { background: var(--panel) !important; }
html #ggrid > a.dir.sel:not([data-fx-cover]) { box-shadow: inset 2px 0 0 var(--chalk) !important; background: var(--panel) !important; }
/* search results: copyparty's "close search results" / "load more" stand-in tiles become one row of outline buttons */
html #ggrid > a[href="#"] .fx-meta { display: none; }
html body #ggrid > a[ref="unsearch"], html body #ggrid > a[ref="moar"] {
  grid-column: 1 / -1; order: -1; justify-self: start;
  display: inline-flex !important; flex-direction: row !important; align-items: center; height: 44px; padding: 0 21px !important; box-sizing: border-box;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important;
}
html body #ggrid > a[ref="moar"] { order: 99; }
html body #ggrid > a[ref="unsearch"] img, html body #ggrid > a[ref="moar"] img,
html body #ggrid > a[ref="unsearch"]::before, html body #ggrid > a[ref="moar"]::before,
html body #ggrid > a[ref="unsearch"]::after, html body #ggrid > a[ref="moar"]::after { display: none !important; }
html body #ggrid > a[ref="unsearch"] > span, html body #ggrid > a[ref="moar"] > span { display: inline !important; padding: 0 !important; font: 400 17px/1 var(--grot) !important; }
html body #ggrid > a[ref="unsearch"]:hover, html body #ggrid > a[ref="moar"]:hover { border-color: var(--ink) !important; }
html body #ggrid > a[ref="unsearch"]:hover > span, html body #ggrid > a[ref="moar"]:hover > span { color: var(--chalk) !important; }
/* search hits: the folder each hit is in, on one quiet line under its name */
html body #ggrid > a > span.fx-where {
  display: block !important; padding: 3px 0 0 !important; font: 400 13px/1.4 var(--grot) !important; color: var(--ink-soft) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
}
@media (max-width: 599px) {
  html body #ggrid > a > span.fx-where { white-space: normal; overflow-wrap: anywhere; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
}
/* no hits: one plain line where the pictures would be */
html #fx-nohits { margin: 34px 0 0; font: 400 21px/1.4 var(--serif); color: var(--ink); max-width: 34em; }
/* list view hits: the name on top, its folder path under it in small type */
html #files tbody td:nth-child(2) > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; padding: 0 0 8px 37px; box-sizing: border-box; }
html #files tbody td:nth-child(2) > div > a:last-of-type { order: -1; flex: 0 0 calc(100% + 37px); margin-left: -37px !important; }
html #files tbody td:nth-child(2) > div > span:last-of-type { display: none !important; }
html #files tbody td:nth-child(2) > div > a:not(:last-of-type), html #files tbody td:nth-child(2) > div > span {
  display: inline !important; min-height: 0 !important; padding: 0 !important;
  font: 400 13px/1.4 var(--grot) !important; color: var(--ink-soft) !important; white-space: normal; overflow-wrap: anywhere;
}
html #files tbody td:nth-child(2) > div > span { color: var(--line) !important; }
html #files tbody td:nth-child(2) > div > a:not(:last-of-type)::before { content: none !important; display: none !important; }
html #files tr.srch_hdr { display: flex !important; align-items: center; min-height: 55px; }
html #files tr.srch_hdr td:first-child { display: none !important; }
html #files tr.srch_hdr td:nth-child(2) { display: flex !important; align-items: center; padding: 13px 0 !important; overflow: visible; }
html #files tr.srch_hdr td:nth-child(2) a#unsearch {
  display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 21px !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px; font: 400 17px/1 var(--grot) !important; color: var(--ink) !important;
}
html #files tr.srch_hdr td:nth-child(2) a#unsearch::before { content: none !important; display: none !important; }
html #files tr.srch_hdr:hover { background: none !important; }
html #files tr.srch_hdr td { color: var(--ink-soft) !important; font-size: 15px; }
html #files tr.srch_hdr a { color: var(--chalk) !important; font-size: 17px; }

/* ---------- panels opened from the top menu (teammates) ---------- */
html .opbox, html #op_cfg, html #op_up2k, html #op_search, html #srch_form, html #u2conf, html #u2tab {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--grot) !important;
}
html .opview .btn, html .opview button, html .opview input[type=submit], html #u2btn, html .opview a.tgl {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 2px !important; box-shadow: none !important;
  font-family: var(--grot) !important;
}
html .opview .tgl.on, html .opview .btn.on { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
html #u2btn br { display: none; }
/* copyparty's emoji upload options (parallel, potato, dice, shield, search): hidden, uploads use the defaults */
html #u2conf td.c, html #u2conf tr + tr td:not([id]) { display: none !important; }
html #u2conf, html #u2conf td { border: 0 !important; background: none !important; }
html #u2etas, html #u2etaw, html #u2etas * { background: none !important; box-shadow: none !important; border-radius: 0 !important; font: 400 15px/1.5 var(--grot) !important; font-variant-numeric: tabular-nums; color: var(--ink-soft) !important; }
html #u2cards a { color: var(--ink-soft) !important; background: none !important; }
html #u2cards a.act { color: var(--ink) !important; background: var(--panel) !important; border-color: var(--line) !important; }
/* New folder: the name field takes the row, Create folder sits after it. copyparty's own phone rule
   (#op_mkdir.act + div, + div + div) would also open its "new text file" and "message" panels under it. */
html #op_mkdir form, html #op_new_md form { display: flex; gap: 13px; align-items: center; }
html #op_mkdir input.i, html #op_new_md input.i { flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important; }
html #op_mkdir.act + div, html #op_mkdir.act + div + div { display: none !important; }
html #op_mkdir input[type=submit], html #op_new_md input[type=submit], html .opview input[type=submit] {
  height: 44px !important; padding: 0 21px !important; margin: 0 !important; flex: none;
  font: 500 17px/1 var(--grot) !important; color: var(--paper) !important; background: var(--ink) !important;
  border: 1px solid var(--ink) !important; border-radius: 2px !important; cursor: pointer; -webkit-appearance: none; appearance: none;
}
html #u2cards { min-width: 0 !important; width: auto !important; white-space: normal !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0; }
html #u2cards a { font: 400 13px/1 var(--grot) !important; padding: 13px !important; border-radius: 0 !important; }
html #u2etaw { width: auto !important; max-width: 100%; }
html #u2conf, html #u2conf.w, html #u2conf.ww { max-width: 100%; }
html .opview.act { overflow-x: auto; }
html .opbox h3 { font: 400 13px/1.3 var(--serif) !important; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-label) !important; border-color: var(--line) !important; }
html #op_cfg #themes, html #op_cfg div:has(> div > #themes) { display: none !important; }

/* share and rename dialogs (teammates): a full-screen paper sheet, no dimming */
html #shui, html #rui {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 0 !important; box-shadow: none !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important;
  padding: calc(var(--head) + 34px) max(var(--gut), calc(50% - 377px)) 55px !important; width: 100% !important; box-sizing: border-box; z-index: 50;
  font: 400 17px/1.3 var(--grot) !important;
  overflow-y: auto !important;
}
/* the sheet keeps the site's header band: the compact lockup on a hairline */
html #shui::after, html #rui::after {
  content: "1618 Robotics";
  position: absolute; top: 0; left: 0; right: 0; height: var(--head); box-sizing: border-box;
  padding: 14px 0 0 calc(var(--pad) + 52px);
  background: url(/brand/shell.svg) var(--pad) 14px / auto 27px no-repeat;
  border-bottom: 1px solid var(--line);
  font: 400 21px/31px var(--serif); letter-spacing: -.005em; color: var(--ink); white-space: nowrap;
  pointer-events: none;
}
html #shui::before {
  content: attr(data-fx-head); display: block;
  font: 400 34px/1.15 var(--serif); color: var(--ink);
  padding: 0 0 13px; margin: 0 0 21px; border-bottom: 1px solid var(--line);
}
html #rui td, html #rui button { font-family: var(--grot) !important; }
html #shui td { padding: 8px 0 !important; vertical-align: middle; }
html #shui tr { align-items: flex-start !important; }
html #shui td:first-child:not([colspan]) { padding-top: 21px !important; color: var(--ink-label); font: 400 13px/1.3 var(--serif); text-transform: uppercase; letter-spacing: .16em; width: 144px; min-width: 144px; padding-right: 13px !important; white-space: nowrap; }
html #shui td.exs input[type=text] { width: 89px !important; margin: 0 5px 0 0; }
html #shui button, html #shui .btn {
  height: 44px; padding: 0 21px !important; margin: 0 8px 0 0 !important;
  font: 400 17px/1 var(--grot) !important;
  color: var(--ink) !important; background: var(--paper) !important;
  border: 1px solid var(--line) !important; border-radius: 2px !important; box-shadow: none !important; cursor: pointer;
  display: inline-flex; align-items: center;
}
html #shui #sh_apply { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; font-weight: 500 !important; }
html #shui .btn.on { background: var(--panel) !important; border-color: var(--ink) !important; color: var(--ink) !important; }
html #shui .sh_axs a { text-transform: capitalize; }
html #shui:not([data-fx-head])::before { content: "Share"; }

/* rename dialog (files.js adds .fx-rn): name fields first, then Rename / Cancel; regex tools and tags hidden */
html #rui.fx-rn { display: flex; flex-direction: column; }
html #rui.fx-rn::before {
  content: "Rename"; display: block; order: -2;
  font: 400 34px/1.15 var(--serif); color: var(--ink);
  padding: 0 0 13px; margin: 0 0 21px; border-bottom: 1px solid var(--line);
}
html #rui.fx-rn > div:first-child { order: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
html #rui.fx-rn #rn_vadv, html #rui.fx-rn #rn_adv, html #rui.fx-rn #rn_case, html #rui.fx-rn #rn_win, html #rui.fx-rn #rn_slash,
html #rui.fx-rn .rn_dec, html #rui.fx-rn .rn_reset, html #rui.fx-rn > div:has(> p) { display: none !important; }
html #rui.fx-rn #rn_f { width: 100%; border-collapse: collapse; }
html #rui.fx-rn #rn_f td { padding: 8px 0 !important; vertical-align: middle; }
html #rui.fx-rn #rn_f td:first-child { color: var(--ink-label); font: 400 13px/1.3 var(--serif) !important; text-transform: uppercase; letter-spacing: .16em; width: 144px; padding-right: 13px !important; white-space: nowrap; }
html #rui.fx-rn #rn_f.m td:first-child { display: none; }
html #rui.fx-rn #rn_f input[type=text] { width: 100% !important; }
html #rui.fx-rn #rn_old_0 { color: var(--ink-soft) !important; }
html #rui.fx-rn button {
  min-height: 44px; height: 44px; padding: 0 21px !important; margin: 0 !important;
  font: 400 17px/1 var(--grot) !important; color: var(--ink) !important; background: var(--paper) !important;
  border: 1px solid var(--line) !important; border-radius: 2px !important; box-shadow: none !important; cursor: pointer;
}
html #rui.fx-rn #rn_apply { order: -1; background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; font-weight: 500 !important; }

/* modal dialogs: every copyparty prompt (share created, upload, delete, alerts) is one paper card:
   a serif heading on a hairline, plain text, the primary button first */
html #modal { background: rgba(246, 237, 216, .94) !important; }
html #modalc {
  width: min(466px, calc(100vw - 2 * var(--gut))); max-width: none; min-width: 0 !important; box-sizing: border-box;
  max-height: none; overflow: visible; margin: 34px 0; text-align: left !important;
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 2px !important;
  box-shadow: 0 34px 89px -55px rgba(46, 32, 18, .45) !important;
  font: 400 17px/1.5 var(--grot) !important; padding: 34px !important;
}
html #modalc a { color: var(--chalk) !important; }
html #modalc code { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; font-family: var(--mono) !important; }
html #modalc h6 { font: 400 26px/1.2 var(--serif) !important; color: var(--ink) !important; text-align: left; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 13px; margin: 0 0 21px; }
html #modalc ul { list-style: none; margin: 0 0 8px; padding: 0; }
html #modalc li { margin: 0 0 5px; font: 400 15px/1.4 var(--grot); color: var(--ink-soft); overflow-wrap: anywhere; }
html #modalc .fx-mh {
  font: 400 34px/1.15 var(--serif); color: var(--ink);
  padding: 0 0 13px; margin: 0 0 21px; border-bottom: 1px solid var(--line);
}
html #modalc .fx-mnote { font: 400 17px/1.5 var(--grot); color: var(--ink-soft); margin: 13px 0 0; }
html #modali {
  display: block; width: 100% !important; box-sizing: border-box; margin: 13px 0 0 !important;
  height: 44px; padding: 0 13px !important; font: 400 17px/1.2 var(--grot) !important;
  color: var(--ink) !important; background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 2px !important;
}
html #modali:focus { border-color: var(--ink) !important; }
html #modalb { position: static !important; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 34px 0 0 !important; padding: 0 !important; }
html #modalb a, html #modalb button {
  display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
  height: 44px; min-width: 89px; padding: 0 21px !important; margin: 0 !important;
  font: 400 17px/1 var(--grot) !important; text-decoration: none !important;
  color: var(--ink) !important; background: var(--paper) !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important; box-shadow: none !important;
}
html #modalb a:hover, html #modalb a:focus-visible { border-color: var(--ink) !important; color: var(--chalk) !important; background: var(--paper) !important; }
html #modalb #modal-ok { order: -1; font-weight: 500 !important; color: var(--paper) !important; background: var(--ink) !important; border-color: var(--ink) !important; }
html #modalb #modal-ok:hover, html #modalb #modal-ok:focus-visible { background: var(--chalk) !important; border-color: var(--chalk) !important; color: var(--paper) !important; }
html #modalb #modal-ok.fx-danger { background: var(--fail) !important; border-color: var(--fail) !important; }
/* phones: every prompt (delete, upload, share link created, alerts) is the same full-width paper sheet as the
   Share and Rename dialogs: the header band with the lockup, a large serif heading on a hairline, buttons two across */
@media (max-width: 599px) {
  html #modal { background: var(--paper) !important; }
  html #modal > table { border-spacing: 0; }
  html #modal > table, html #modal td { vertical-align: top !important; padding: 0 !important; }
  html #modalc {
    display: block; width: 100%; min-height: 100vh; min-height: 100svh; margin: 0 !important; box-sizing: border-box;
    padding: calc(var(--head) + 21px) var(--gut) 55px !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html #modalc::after {
    content: "1618 Robotics";
    position: absolute; top: 0; left: 0; right: 0; height: var(--head); box-sizing: border-box;
    padding: 14px 0 0 calc(var(--pad) + 52px);
    background: url(/brand/shell.svg) var(--pad) 14px / auto 27px no-repeat;
    border-bottom: 1px solid var(--line);
    font: 400 21px/31px var(--serif); letter-spacing: -.005em; color: var(--ink); white-space: nowrap;
    pointer-events: none;
  }
  html #modalc .fx-mh, html #modalc h6 { font-size: 34px !important; }
  html #modalb { display: grid; grid-template-columns: 1fr 1fr; }
  html #modalb > :only-child { grid-column: 1 / -1; }
}

/* "share link created" box (files.js rewrites copyparty's keyboard hints) */
html #modalc .fx-murl {
  font: 400 15px/1.5 var(--mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); padding: 13px;
  /* files.js puts a break opportunity after each "/", so lines end at path separators; anywhere is the fallback */
  word-break: normal; overflow-wrap: break-word; -webkit-user-select: all; user-select: all;
}
html #modal.fx-shr #modalc .fx-mnote { margin: 13px 0 21px; }
html #modal.fx-shr #modalc img.b64 { display: block; width: 144px; height: 144px; max-height: none; margin: 0; border: 1px solid var(--line); }
html #modal.fx-shr #modalb { margin-top: 21px !important; }

/* Settings: copyparty's control panel (emoji toggles, upload engine switches) is not offered.
   Folder downloads stay zip (files.js), the language is set on the server (lang: eng). */
html #ops #opa_cfg, html #op_cfg { display: none !important; }

/* Search panel: one label per field (files.js), and the checkbox that switches the filter on sits on the field's
   left, on the same line. copyparty's row titles (Size, Date, ...) are hidden: the field labels say it all.
   Eight fields: four across on wide screens, two across on tablets, one on phones. */
html #op_search.act { padding: 21px 21px 21px 8px !important; box-sizing: border-box; }
html #srch_form {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 34px;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}
@media (min-width: 1200px) { html #srch_form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { html #srch_form { grid-template-columns: minmax(0, 1fr); gap: 13px; } }
html #srch_form table, html #srch_form tbody, html #srch_form tr { display: contents !important; }
html #op_search #tsrch_tags, html #op_search #tsrch_adv, html #op_search #tq_raw,
html #op_search #tsrch_tags *, html #op_search #tsrch_adv *, html #op_search #tq_raw * { display: none !important; }
html #srch_form td:first-child { display: none !important; }
html #srch_form td {
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 44px; align-items: center;
  padding: 0 !important; width: auto !important; min-width: 0; border: 0 !important;
}
html #srch_form td br { display: none; }
html #srch_form td > label {
  grid-column: 2; grid-row: 1; display: block; margin: 0 0 8px !important; padding: 0 !important;
  line-height: 1.3; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html #srch_form td > input[type=text] { grid-column: 2; grid-row: 2; display: block; width: 100% !important; min-width: 0; margin: 0 !important; }
/* the switch: a drawn 20px box in a 44px target; red chalk with a tick when the filter is on */
html #srch_form td > input[type=checkbox] {
  grid-column: 1; grid-row: 2; justify-self: start;
  -webkit-appearance: none; appearance: none; margin: 0 !important; padding: 0; border: 0; border-radius: 0;
  width: 44px; height: 44px; cursor: pointer;
  background: linear-gradient(var(--paper), var(--paper)) center / 18px 18px no-repeat,
              linear-gradient(var(--ink-soft), var(--ink-soft)) center / 20px 20px no-repeat !important;
}
html #srch_form td > input[type=checkbox]:hover {
  background: linear-gradient(var(--paper), var(--paper)) center / 18px 18px no-repeat,
              linear-gradient(var(--ink), var(--ink)) center / 20px 20px no-repeat !important;
}
html #srch_form td > input[type=checkbox]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F6EDD8' stroke-width='1.6'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
              linear-gradient(var(--chalk), var(--chalk)) center / 20px 20px no-repeat !important;
}
html #srch_form td > input[type=checkbox]:focus-visible { outline: 2px solid var(--chalk) !important; outline-offset: -10px; }
html #srch_form td > input[type=checkbox]:checked + label { color: var(--ink) !important; box-shadow: none !important; border: 0 !important; }

/* Upload panel: the panel is one drop zone the width of the column: a drawn arrow, a serif heading, one plain
   line. The progress line and the five counters (Uploaded, Failed, Finished, In progress, Queued) only appear once
   files have been added (files.js sets data-fx-up="busy"); while everything is 0 they are hidden. */
html body #op_up2k.act { border: 0 !important; padding: 0 !important; background: none !important; overflow: visible; }
html #u2conf, html #u2conf > tbody, html #u2conf > tbody > tr { display: block !important; width: 100% !important; }
html #u2conf #u2btn_cw, html #u2conf #u2c3w { display: block !important; width: 100% !important; padding: 0 !important; }
html #u2btn {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important; max-width: none !important; min-width: 0; min-height: 178px; margin: 0 !important; padding: 34px 21px !important; box-sizing: border-box;
  background: var(--panel) !important; color: var(--ink-soft) !important;
  border: 1px dashed var(--ink-soft) !important; border-radius: 2px !important;
  font: 400 17px/1.4 var(--grot) !important; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
html #u2btn::before {
  content: ""; width: 18px; height: 21px; margin-bottom: 5px; flex: none; transform: scaleY(-1);
  background: var(--ink); -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #u2btn #u2bm, html #u2btn #u2bm sup {
  display: block; font: 400 34px/1.1 var(--serif) !important; letter-spacing: -.01em !important; color: var(--ink) !important; vertical-align: baseline;
}
html #u2btn:hover, html #u2btn:focus-visible, html #u2btn.dragging, html body.dragging #u2btn { border-color: var(--chalk) !important; background: var(--paper) !important; }
html #u2btn:hover::before { background: var(--chalk); }
html[data-fx-up="idle"] #u2etaw, html[data-fx-up="idle"] #u2cards, html[data-fx-up="idle"] #u2c3w { display: none !important; }
html #u2etaw { margin: 13px 0 0 !important; border: 0 !important; }
html #u2etas { border: 0 !important; padding: 0 !important; text-align: left !important; }
html #u2etat { font: 400 17px/1.5 var(--grot) !important; color: var(--ink-soft) !important; }
html #u2cards {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 !important;
  margin: 13px 0 0 !important; padding: 0 !important; border-bottom: 1px solid var(--line);
}
html #u2cards a {
  display: flex !important; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; box-sizing: border-box; margin: 0 !important; padding: 8px 5px !important;
  border: 0 !important; text-align: center; white-space: nowrap;
}
html #u2cards a.act { background: none !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--chalk) !important; }
html #u2cards a span { font: 400 15px/1 var(--grot) !important; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  html #u2cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html #u2btn { min-height: 144px; padding: 21px 13px !important; }
  html #u2btn #u2bm { font-size: 28px !important; }
}

/* Share dialog: fields first, buttons last; access buttons keep copyparty's text, show a plain label */
html #shui table { display: block; width: 100%; }
html #shui tbody { display: flex; flex-direction: column; }
html #shui tr { display: flex; align-items: center; }
html #shui tr:first-child { order: 99; margin-top: 21px; }
html #shui td:not(:first-child), html #shui td[colspan] { flex: 1 1 auto; min-width: 0; }
html #shui td[colspan] { display: flex; flex-wrap: wrap; gap: 8px; }
html #shui td[colspan] button { margin: 0 !important; }
html #shui #sh_apply { order: 1; }
html #shui #sh_abrt { order: 2; }
html #shui #sh_rand { order: 3; }
html #shui input[type=text]:not(#sh_exm):not(#sh_exh):not(#sh_exd) { width: 100% !important; }
html #shui .sh_axs a[data-fx-hide] { display: none !important; }
/* Access: the same joined segmented control as Expires in, the chosen option filled with ink */
html #shui td.sh_axs, html #shui .sh_axs { display: flex !important; flex-wrap: wrap; gap: 0 !important; padding-left: 1px !important; }
html #shui .sh_axs a {
  margin: 0 0 0 -1px !important; padding: 0 21px !important; border-radius: 0 !important;
  border: 1px solid var(--line) !important; background: var(--paper) !important; color: var(--ink) !important; font-weight: 400 !important;
  height: 44px; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
}
html #shui .sh_axs a:not([data-fx-hide]) ~ a:not([data-fx-hide]) { margin-left: -1px !important; }
html #shui .sh_axs a:hover { color: var(--chalk) !important; position: relative; z-index: 1; border-color: var(--ink-soft) !important; }
html #shui .sh_axs a.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; position: relative; z-index: 2; }
html #shui .sh_axs a.on:hover { color: var(--paper) !important; }
html #shui .sh_axs a[data-fx-label] { font-size: 0 !important; text-transform: none !important; }
html #shui .sh_axs a[data-fx-label]::after { content: attr(data-fx-label); font: 400 17px/1 var(--grot); }
/* sharing selected files: the names first, in a note that wraps (the one-line box would cut them on a phone);
   copyparty's box stays in the page for its own use, out of sight */
html #shui.fx-files #sh_vp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
html #shui #fx-vpn {
  min-height: 44px; box-sizing: border-box; padding: 10px 13px;
  font: 400 17px/1.4 var(--grot); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  overflow-wrap: anywhere;
}
/* Random name sits next to the link name it fills */
html #shui td.fx-kname { display: flex; gap: 8px; align-items: center; }
html #shui td.fx-kname #sh_k { flex: 1 1 auto; min-width: 0; }
html #shui td.fx-kname #sh_rand { flex: none; margin: 0 !important; }
/* expiry: presets as one segmented control; the minutes / hours / days boxes only under Custom */
html #shui td.exs { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 8px; }
html #shui #fx-exp { flex: 1 1 100%; display: flex; flex-wrap: wrap; }
html #shui #fx-exp button {
  margin: 0 0 0 -1px !important; padding: 0 21px !important; border-radius: 0 !important;
  border: 1px solid var(--line) !important; background: var(--paper) !important; color: var(--ink) !important; font-weight: 400 !important;
}
html #shui #fx-exp button:first-child { margin-left: 0 !important; border-radius: 2px 0 0 2px !important; }
html #shui #fx-exp button:last-child { border-radius: 0 2px 2px 0 !important; }
html #shui #fx-exp button:hover { color: var(--chalk) !important; position: relative; z-index: 1; border-color: var(--ink-soft) !important; }
html #shui #fx-exp button[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; position: relative; z-index: 2; }
html #shui td.exs > input, html #shui td.exs > .fx-unit, html #shui #sh_noex { display: none !important; }
html #shui td.exs.fx-custom > input { display: block !important; width: 89px !important; margin: 0 !important; }
html #shui td.exs.fx-custom > .fx-unit { display: inline-block !important; margin: 0 13px 0 0; color: var(--ink-soft); }


/* loading spinner */
html #dlt_t, html .dumb_loader_thing { color: var(--ink-soft) !important; }

/* =====================================================================
   PLAYER (baguettebox): a screening room. The brand's night tokens (opt-in "video review" mode in the
   brand guidelines): a warm ink stage, never pure black, cream type, the video large in the middle,
   a caption bar under it: counter, name, size, Download. Native video controls stay for function.
   ===================================================================== */
html #bbox-overlay {
  --n-bg: #1A1510; --n-panel: #241E16; --n-line: #3A3226; --n-ink: #E9DFC9; --n-soft: #A5947A; --n-chalk: #D4674F;
  background: var(--n-bg) !important; color: var(--n-ink); --bar: 72px;
  /* the band under the picture that holds the overlay toggles (Hands, Objects): 0 until a clip has them */
  --ctl: 0px;
}
html.fx-ovl-on #bbox-overlay { --ctl: 44px; }
html #bbox-overlay::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--head);
  border-bottom: 1px solid var(--n-line); background: var(--n-bg); z-index: 2; pointer-events: none;
}
html #bbox-overlay::after { left: var(--pad); z-index: 3; color: var(--n-ink) !important; }
html #bbox-btns {
  position: fixed !important; top: 7px !important; right: var(--pad) !important;
  display: flex; align-items: center; gap: 8px; z-index: 4;
}
html #bbox-btns.off { top: 7px !important; }
html #bbox-help, html #bbox-anim, html #bbox-readdir, html #bbox-rotl, html #bbox-rotr, html #bbox-tsel,
html #bbox-vmode, html #bbox-gopage, html #bbzoom, html #bbox-halp { display: none !important; }
html #bbox-overlay button {
  font-variant: normal !important; font-family: var(--grot) !important;
  color: var(--n-ink) !important; background: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  height: 44px; min-width: 44px; padding: 0 13px !important; margin: 0 !important; cursor: pointer;
}
/* Full screen and Close: hairline outline buttons with a drawn mark, cream on the stage */
html #bbox-overlay #bbox-btns #bbox-full, html #bbox-overlay #bbox-btns #bbox-close {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  height: 40px; min-width: 40px; padding: 0 13px !important;
  font: 400 15px/1 var(--grot) !important; letter-spacing: .01em; text-transform: none;
  color: var(--n-ink) !important; background: none !important;
  border: 1px solid rgba(233, 223, 201, .32) !important; border-radius: 2px !important;
}
html #bbox-overlay #bbox-btns button:hover { border-color: var(--n-ink) !important; color: var(--n-ink) !important; background: var(--n-panel) !important; }
html #bbox-overlay #bbox-btns #bbox-full::before, html #bbox-overlay #bbox-btns #bbox-close::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
}
html #bbox-overlay #bbox-close { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23000' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
html #bbox-overlay #bbox-full { --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4.5V1h3.5M7.5 1H11v3.5M11 7.5V11H7.5M4.5 11H1V7.5' stroke='%23000' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
html #bbox-overlay #bbox-next, html #bbox-overlay #bbox-prev {
  top: calc(50% - 44px) !important; width: 55px !important; height: 89px !important; padding: 0 !important; min-width: 0;
  font-size: 0 !important; color: transparent !important; z-index: 4;
  display: flex !important; align-items: center; justify-content: center;
}
html #bbox-prev { left: calc(var(--pad) - 13px) !important; }
html #bbox-next { right: calc(var(--pad) - 13px) !important; }
html #bbox-prev.off { left: -80px !important; }
html #bbox-next.off { right: -80px !important; }
/* thin drawn chevrons, no boxes */
html #bbox-next::before, html #bbox-prev::before {
  content: ""; display: block; width: 17px; height: 17px;
  border: solid var(--n-ink); border-width: 0 1.5px 1.5px 0; box-sizing: border-box; opacity: .8;
}
html #bbox-next::before { transform: rotate(-45deg); margin-left: -8px; }
html #bbox-prev::before { transform: rotate(135deg); margin-right: -8px; }
html #bbox-next:hover::before, html #bbox-prev:hover::before { border-color: var(--n-chalk); opacity: 1; }
/* the stage: the video as large as the room allows, centred between the header and the caption bar; with
   the toggles' band (--ctl) under it, the picture and the band are centred as one */
html #bbox-overlay .full-image { box-sizing: border-box; padding: var(--head) 0 calc(var(--bar) + var(--notice, 0px) + var(--ctl)); }
html .full-image video, html .full-image img {
  box-shadow: none !important;
  max-width: calc(100vw - 2 * var(--pad) - 2 * 55px) !important;
  max-height: calc(100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 89px) !important;
  margin: 0 !important;
  outline: 0;
}
html .full-image video {
  width: min(calc(100vw - 2 * var(--pad) - 2 * 55px), calc((100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 89px) * 16 / 9)) !important;
  height: auto !important; aspect-ratio: 16 / 9;
  object-fit: contain; background: #0F0C08 !important;
}
html.bb_fsc .full-image video, html.bb_fsc .full-image img { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; outline: 0; aspect-ratio: auto; }
html.bb_fsc #bbox-overlay .full-image { padding: 0; }
/* caption bar: the figcaption holds copyparty's own download link.
   Keep it without left/right offsets: the slider is transformed, so the caption must use its static position. */
html .full-image figcaption {
  position: fixed !important;
  top: auto !important; bottom: 0 !important;
  width: 100% !important; height: var(--bar);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-start; gap: 13px;
  padding: 0 var(--pad) !important;
  background: var(--n-bg, #1A1510); border-top: 1px solid var(--n-line, #3A3226);
  text-align: left !important; white-space: nowrap; z-index: 2;
  font: 400 21px/1 var(--serif) !important; color: var(--n-ink, #E9DFC9) !important;
}
html .full-image figcaption::before { content: none !important; display: none !important; }
html .full-image figcaption .fx-fcn {
  flex: 0 1 auto; min-width: 0; font: 400 21px/1.25 var(--serif); letter-spacing: -.005em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
html .full-image figcaption::after {
  content: attr(data-pos);
  flex: none; order: -1; margin-right: 8px; color: var(--n-soft, #A5947A) !important;
}
html .full-image figcaption .fx-fsz { flex: none; margin-left: 8px; color: var(--n-soft, #A5947A) !important; }
html .full-image figcaption .fx-fsz:empty { display: none; }
/* Download: the one filled button on the stage, cream on ink */
html #bbox-overlay figcaption a {
  flex: none; margin-left: auto !important;
  display: inline-flex; align-items: center; height: 44px; padding: 0 21px !important;
  font: 500 17px/1 var(--grot) !important; letter-spacing: .01em;
  color: var(--n-bg) !important; background: var(--n-ink) !important;
  border: 1px solid var(--n-ink); border-radius: 2px !important; text-decoration: none !important;
}
html #bbox-overlay figcaption a::before {
  content: ""; width: 12px; height: 14px; margin-right: 13px; flex: none;
  background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #bbox-overlay figcaption a:hover { background: var(--n-chalk) !important; border-color: var(--n-chalk); color: var(--n-bg) !important; }
html.bb_fsc figcaption { display: none !important; }
html .bbox-double-bounce1, html .bbox-double-bounce2 { background-color: var(--n-soft, #A5947A) !important; }
html #bbox-overlay *:focus-visible { outline-color: var(--n-chalk) !important; }

/* toast (errors, notices): a paper strip with a hairline, Close as a word */
html #toast {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 17px/1.4 var(--grot) !important;
  max-width: calc(100vw - 2 * var(--gut)) !important; box-sizing: border-box;
  padding-right: 89px !important;
}
html #toast.vis { right: var(--gut) !important; }
html #toast:not(.vis) { visibility: hidden; }
html #toast.err { border-color: var(--fail) !important; }
html #toast.err #toastt, html #toast.warn #toastt, html #toast.inf #toastt, html #toast.ok #toastt { background: none !important; color: var(--ink) !important; box-shadow: none !important; }
html #toast #toastb { color: var(--ink) !important; }
html #toast a#toastc {
  position: absolute !important; left: auto !important; right: 8px !important; top: 50% !important; margin: -22px 0 0 !important;
  background: none !important; color: var(--ink) !important; box-shadow: none !important; border: 0 !important;
  width: auto !important; min-width: 44px; height: 44px !important; padding: 0 13px !important; text-align: center;
  font: 400 15px/44px var(--grot) !important; overflow: visible !important;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
html #toast a#toastc:hover { color: var(--chalk) !important; }
html #toast pre, html #toast code { font-family: var(--mono) !important; background: var(--panel) !important; color: var(--ink) !important; }
html #toast.err::before, html #toast::before { display: none !important; }
/* in the player the notice sits under the stage, above the caption bar, never over a control */
html body.bbox-open #toast.vis {
  left: var(--pad) !important; right: var(--pad) !important; top: auto !important;
  bottom: calc(var(--bar, 72px) + 21px) !important;
  width: auto !important; max-width: 720px !important; margin: 0 auto !important;
  font-size: 15px !important; padding: 8px 89px 8px 21px !important; min-height: 44px; display: flex; align-items: center;
  z-index: 11 !important; transform: none !important;
}
html body.bbox-open #toast.vis #toastb { padding: 0 !important; }
/* on the dark stage the notice is a darker panel with a sanguine hairline, cream text */
html body.bbox-open #toast { background: #241E16 !important; color: #E9DFC9 !important; border-color: #3A3226 !important; }
html body.bbox-open #toast.err { border-color: #D4674F !important; }
html body.bbox-open #toast #toastb, html body.bbox-open #toast #toastt { color: #E9DFC9 !important; }
html body.bbox-open #toast a#toastc { color: #E9DFC9 !important; text-decoration-color: #3A3226; }
html body.bbox-open #toast a#toastc:hover { color: #D4674F !important; text-decoration-color: #D4674F; }
/* while the notice shows, the stage steps up so the frame keeps about 21px of paper above the notice */
html body.bbox-open:has(#toast.vis) #bbox-overlay { --notice: 23px; }
html #bbox-overlay { --notice: 0px; }

/* =====================================================================
   PHONE
   ===================================================================== */
@media (max-width: 767px) {
  /* teammates: tools drop to a second band under the header, on their own hairline */
  html #ops {
    top: var(--head); left: 0 !important; right: 0; background: var(--paper) !important;
    padding: 0 var(--pad) !important; margin: 0 !important;
    height: 44px; border-bottom: 1px solid var(--line) !important;
    justify-content: flex-start; gap: 13px;
  }
  /* the first visible tool's text lines up with the gutter (hidden tools come first in the DOM) */
  html #ops { padding-left: calc(var(--pad) - 8px) !important; }
  html #ops > a { padding: 0 8px !important; font-size: 16px !important; }
  #ht_brw:not(.is-share) body { padding-top: calc(var(--head) + 44px) !important; }
  html #path { padding-top: 13px !important; }
  html #wfp { right: calc(var(--right) + 77px); }
  /* the header keeps Docs and Sign out, in that order, as on wide screens and on the landing page; the
     lockup needs the rest of the room (it ends at 200px on a 390px phone), so Account, a tool, goes to the
     right end of the tools band under the header */
  html #wfp #goh, html #wfp #fx-docs { padding: 0 8px !important; font-size: 16px !important; }
  html #wfp #goh { position: absolute; top: calc(var(--head) - 5px); right: -77px; height: 44px; padding: 0 0 0 8px !important; white-space: nowrap; }

  #fx-bar { margin: 21px 0 0; padding: 0 0 8px; gap: 0 8px; }
  #fx-bar #wtoggle { flex-basis: 100%; }
  html #wtoggle #wzip1 { flex: 1 1 100%; }
  html #wtoggle #zip1 { flex: 1 1 auto; }
  html #wtoggle a { padding: 0 13px !important; }
  html #wtoggle #wzip { width: 100%; }
  html #wtoggle #wzip a { flex: 1 1 auto; }
  /* teammate tools (Share, Rename, Delete, Cut, Copy, Paste): two even columns; an odd last one takes the row */
  html #wtoggle #wfm.act { width: 100%; }
  html #wtoggle #wfm a { flex: 1 1 40%; }
  /* two quiet rows under the download button: "Sort  Name Size Date ... Select", then "View  Grid | List".
     The two labels share one width, so the options start on the same line. */
  html #fx-bar #fx-ctl { display: contents; }
  html #fx-bar #ghead { flex: 1 1 100%; justify-content: space-between; margin-top: 8px !important; }
  html #ghead .fx-lab, html #fx-vt::before { width: 55px; margin: 0 !important; flex: none; }
  html #ghead > span:last-child a:first-of-type { margin-left: -8px !important; }
  html #fx-bar #ghead > span:last-child::after { display: none; }
  html #ghead #gridsel { padding-right: 0 !important; }
  html #fx-vt { flex: 1 1 100%; }
  html #fx-vt::before { content: "View"; height: auto; background: none; }
  html #fx-vt a:first-of-type { margin-left: -8px !important; }
  html #ggrid { margin-top: 21px !important; }
  /* items selected on a phone: "1 SELECTED ... Done", Download selected (zip) across, then the tools three across */
  html #fx-bar:has(#wtoggle.sel) { padding: 8px 13px 13px; position: relative; }
  html #fx-bar #wtoggle.sel { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html #wtoggle.sel #fx-selc { grid-column: 1 / 3; line-height: 40px !important; }
  html #wtoggle.sel #selzip { grid-column: 1 / -1; height: 44px; }
  html #wtoggle.sel #selall { order: 6; padding: 0 5px !important; border-color: var(--ink-soft) !important; color: var(--ink) !important; text-decoration: none !important; }
  html #wtoggle.sel #seldl, html #wtoggle.sel #wfm a { padding: 0 5px !important; }
  html #wtoggle.sel #seldl::before { display: none; }
  html #fx-bar:has(#wtoggle.sel):has(#gridsel.on) #ghead { position: absolute !important; top: 8px; right: 13px; margin: 0 !important; flex: none; }
  html #fx-bar:has(#wtoggle.sel) #ghead #gridsel.on { margin: 0 !important; }
  html #fx-bar:has(#gridsel.on) #fx-vt { display: none !important; }
  html #fx-bar:has(#gridsel.on) #ghead { justify-content: flex-end; }

  /* list rows: name on top, size + date underneath, Download on the right */
  html #files thead tr, html.is-share #files thead tr { grid-template-columns: auto auto auto 1fr; }
  html #files thead th[name="lead"] { visibility: hidden; }
  html #files tbody tr, html.is-share #files tbody tr {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name name dl" "size date dl";
    padding: 8px 0 13px;
    min-height: 0;
  }
  html #files tbody tr > :nth-child(2) { grid-area: name; padding: 0 !important; }
  html #files tbody tr > :nth-child(3) { grid-area: size; padding: 0 13px 0 37px !important; text-align: left !important; }
  html #files tbody tr > :last-child { grid-area: date; padding: 0 !important; }
  html #files tbody tr > :first-child { grid-area: dl; padding: 0 !important; align-self: center; }
  html #files tbody td:nth-child(2) a {
    display: flex !important; align-items: center;
    min-height: 44px; white-space: normal; overflow-wrap: anywhere;
    line-height: 1.3 !important;
  }
  html #files tbody tr:has(td:nth-child(2) > a[href$="/"]) td:nth-child(3) { display: none !important; }
  html #files tbody tr:has(td:nth-child(2) > a[href$="/"]) > :last-child { padding-left: 37px !important; }
  html #files tbody tr.sel td:nth-child(2) a { padding-left: 8px !important; }
  /* data files on a phone: the label, then the stored name on its own line; the row keeps the clip's indent */
  html #files tbody td:nth-child(2) a .fx-fname { flex: 1 1 100%; }
  html #files tbody tr[data-fx-side] td:nth-child(2) a::before { margin-left: 26px; }
  html #files tbody tr[data-fx-side] > :nth-child(3) { padding-left: 58px !important; }
  html #files tbody tr[data-fx-side] .fx-time { display: none; }   /* the indented line keeps the whole date */
  html #files tbody tr[data-fx-side] td:nth-child(2) > div { padding-left: 58px; }

  html #ggrid > a.dir:not([data-fx-cover]) { gap: 8px; }
  html #ggrid > a.dir > .fx-meta .fx-gdl { padding-left: 8px; }
  html #ggrid > a > span { -webkit-line-clamp: 3; line-clamp: 3; }
  html #ggrid > a.dir:not([data-fx-cover]) > span { -webkit-line-clamp: 2; line-clamp: 2; }

  html #shui { padding: 21px var(--gut) !important; }
  html #shui table, html #shui tr { display: block; width: 100%; }
  html #shui tbody { display: flex; flex-direction: column; width: 100%; }
  html #shui td { display: block; width: 100% !important; padding: 5px 0 !important; }
  html #shui td:first-child:not([colspan]) { width: auto; min-width: 0; padding-top: 13px !important; }
  html #shui { padding-top: calc(var(--head) + 21px) !important; }
  html #shui td.exs, html #shui td.fx-kname { display: flex !important; }
  html #shui #fx-exp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html #shui #fx-exp button { padding: 0 4px !important; justify-content: center; font-size: 15px !important; }
  /* Custom on a phone: one box per line, its unit beside it */
  html #shui td.exs.fx-custom { display: grid !important; grid-template-columns: 89px minmax(0, 1fr); gap: 8px 13px; }
  html #shui td.exs.fx-custom #fx-exp { grid-column: 1 / -1; }
  html #shui td[colspan] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  html #shui td[colspan] button { justify-content: center; }

  /* player: the video edge to edge; the caption bar holds the name on top, then
     Previous / Next, the counter, the size and Download, so nothing covers anything */
  html #bbox-overlay { --bar: 118px; }
  /* the lockup stays; Full screen keeps its mark only, Close keeps its word */
  html #bbox-overlay #bbox-btns #bbox-full { font-size: 0 !important; padding: 0 !important; width: 40px; gap: 0; }
  html .full-image video, html .full-image img { max-width: 100vw !important; max-height: calc(100vh - var(--head) - var(--bar) - var(--ctl) - 55px) !important; }
  html .full-image video { width: min(100vw, calc((100vh - var(--head) - var(--bar) - var(--ctl) - 55px) * 16 / 9)) !important; }
  html #bbox-overlay #bbox-prev, html #bbox-overlay #bbox-next {
    top: auto !important; bottom: 13px !important; width: 44px !important; height: 44px !important; position: fixed !important;
  }
  html #bbox-prev { left: calc(var(--pad) - 13px) !important; }
  html #bbox-next { left: calc(var(--pad) - 13px + 44px) !important; right: auto !important; }
  /* copyparty marks both chevrons .off while a clip plays (they would cover the picture on a wide screen);
     here they sit on the caption bar, so they stay where they are */
  html #bbox-overlay #bbox-prev.off { left: calc(var(--pad) - 13px) !important; }
  html #bbox-overlay #bbox-next.off { left: calc(var(--pad) - 13px + 44px) !important; }
  /* full screen has no caption bar, so no chevrons either (swipe and the arrow keys still change clips) */
  html.bb_fsc #bbox-overlay #bbox-prev, html.bb_fsc #bbox-overlay #bbox-next { display: none !important; }
  html #bbox-next::before, html #bbox-prev::before { width: 12px; height: 12px; }
  html #bbox-next::before { margin-left: -5px; }
  html #bbox-prev::before { margin-right: -5px; }
  html .full-image figcaption {
    height: var(--bar); flex-wrap: wrap; align-content: flex-end; row-gap: 5px; column-gap: 0;
    padding-top: 13px !important; padding-bottom: 13px !important;
  }
  html .full-image figcaption .fx-fcn { flex: 1 1 100%; order: -2; -webkit-line-clamp: 1; line-clamp: 1; font-size: 21px; }
  html .full-image figcaption::after { order: -1; margin: 0 0 0 calc(88px - 13px); }
  html #bbox-overlay figcaption a { padding: 0 13px !important; }
  html body.bbox-open #toast.vis { bottom: calc(var(--bar, 118px) + 13px) !important; }
}
/* phone held upright: the video sits right under the header, edge to edge, with its caption bar straight
   under it (name, Previous / Next, counter, Download) and the notice under that; the free room is one
   block of stage at the bottom, not split above and below */
@media (max-width: 767px) and (orientation: portrait) {
  html #bbox-overlay { --top: calc(var(--head) + 21px); --vid: 56.25vw; }
  /* the toggles' band between the picture and the caption bar: 8px of stage, then 40px buttons */
  html.fx-ovl-on #bbox-overlay { --ctl: 48px; }
  html #bbox-overlay .full-image { padding: var(--top) 0 0 !important; vertical-align: top; }
  html #bbox-overlay .full-image::before { display: none !important; }
  html #bbox-overlay .bbox-spinner { top: calc(var(--top) + var(--vid) / 2) !important; }
  html:not(.bb_fsc) .full-image video { width: 100vw !important; max-height: none !important; vertical-align: top !important; }
  html:not(.bb_fsc) .full-image img { vertical-align: top !important; }
  html:not(.bb_fsc) .full-image.vid figcaption { top: calc(var(--top) + var(--vid) + var(--ctl)) !important; bottom: auto !important; border-top: 0; }
  html:not(.bb_fsc) #bbox-overlay:has(.full-image.vis.vid) #bbox-prev,
  html:not(.bb_fsc) #bbox-overlay:has(.full-image.vis.vid) #bbox-next { bottom: auto !important; top: calc(var(--top) + var(--vid) + var(--ctl) + var(--bar) - 13px - 44px) !important; }
  html body.bbox-open:has(.full-image.vis.vid) #toast.vis { bottom: auto !important; top: calc(var(--head) + 21px + 56.25vw + 118px + 13px) !important; }
  html.fx-ovl-on body.bbox-open:has(.full-image.vis.vid) #toast.vis { top: calc(var(--head) + 21px + 56.25vw + 48px + 118px + 13px) !important; }
}
@media (max-width: 400px) {
  /* small phones: the header's account links step down so the lockup keeps its room */
  html #blogout, html #wfp, html #wfp #goh, #ht_spl #c, #ht_spl #fx-docs { font-size: 15px !important; }
  #ht_spl #fx-docs { right: calc(var(--right) + 76px); }
  html #blogout { padding-left: 8px !important; }
  html #wfp { right: calc(var(--right) + 64px); }
  html #wfp #fx-docs { padding: 0 8px !important; }
  html #wfp #goh { right: -64px; }
  html #ops { padding-left: calc(var(--pad) - 6px) !important; gap: 8px; }
  html #ops > a { padding: 0 6px !important; }
  html .full-image figcaption .fx-fsz { display: none; }
}
/* the narrowest phones: the header's and the band's words step down one more size, so Docs clears the
   lockup and Account clears New folder */
@media (max-width: 359px) {
  html #blogout, html #wfp #fx-docs, html #wfp #goh, html #ops > a, #ht_spl #c, #ht_spl #fx-docs { font-size: 14px !important; }
  html #wfp #fx-docs { padding: 0 6px !important; }
  html #ops > a { padding: 0 5px !important; }
}
@media (max-width: 380px) {
  body::after, html #bbox-overlay::after { font-size: 19px; }
}
/* =====================================================================
   SHARES PAGE (/?shares, teammates): files.js relabels it. The same content column as the folder pages
   without the tree (the site's gutter), the title with a quiet Refresh on its right. One row per share link on
   wide screens, one card per link below 1024px. Columns: link name, folder, access, password, created by,
   expires, time left, then the actions (Add 1 hour, Delete). Hidden: file count, created, hours left (same as
   time left) and copyparty's +1 minute button.
   ===================================================================== */
#ht_shr { --left: var(--pad); --right: var(--pad); --logo-left: var(--pad); }
#ht_shr body { margin: 0 !important; padding: calc(var(--head) + 21px) var(--pad) 89px !important; font: 400 17px/1.4 var(--grot) !important; }
#ht_shr #wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; overflow: visible; }
#ht_shr #repl, #ht_shr #xpnd, #ht_shr #wrap > span { display: none !important; }
#ht_shr #wrap a {
  color: var(--ink) !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important; white-space: normal;
  font: 400 17px/1.3 var(--grot) !important;
}
#ht_shr #wrap a:hover { color: var(--chalk) !important; }
/* the teammate header (files.js): Files after the lockup; Docs, Account and Sign out as one group at the right,
   as on the folder pages */
#ht_shr #fx-shr-files {
  position: absolute; top: 5px; left: calc(var(--pad) + 223px); z-index: 3;
  height: 44px; padding: 0 13px !important; margin: 0 !important; font: 400 17px/44px var(--grot) !important; color: var(--ink) !important; text-decoration: none;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
#ht_shr #fx-shr-acct { position: absolute; top: 5px; right: var(--pad); margin: 0; z-index: 3; display: flex; align-items: center; }
#ht_shr #fx-shr-acct a, #ht_shr #fx-shr-out input[type=submit] {
  display: inline-block; height: 44px; padding: 0 13px !important; margin: 0 !important; border: 0; background: none !important; cursor: pointer;
  font: 400 17px/44px var(--grot) !important; color: var(--ink) !important; text-decoration: none; -webkit-appearance: none; appearance: none;
}
#ht_shr #fx-shr-out { margin: 0; }
#ht_shr #fx-shr-out input[type=submit] { padding-right: 0 !important; }
#ht_shr #fx-shr-files:hover, #ht_shr #fx-shr-acct a:hover, #ht_shr #fx-shr-out input[type=submit]:hover { color: var(--chalk) !important; }
@media (max-width: 767px) { #ht_shr #fx-shr-files { display: none; } }
/* a narrow phone: the lockup needs the room, so Docs (like Files) leaves this page's header; the folder pages keep it */
@media (max-width: 479px) { #ht_shr #fx-shr-acct #fx-docs { display: none; } }
@media (max-width: 400px) {
  #ht_shr #fx-shr-acct a, #ht_shr #fx-shr-out input[type=submit] { font-size: 15px !important; padding: 0 8px !important; }
  #ht_shr #fx-shr-out input[type=submit] { padding-right: 0 !important; }
}
#ht_shr #fx-shr-h { font: 400 clamp(34px, 2.2vw + 18px, 55px)/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 0; padding: 40px 120px 0 0; border: 0; }
#ht_shr #wrap a.fx-refresh {
  position: absolute; right: var(--pad); top: calc(var(--head) + 21px + 40px);
  display: inline-flex !important; align-items: center; height: 44px; padding: 0 21px !important;
  font-size: 15px !important; color: var(--ink) !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important;
}
#ht_shr #wrap a.fx-refresh:hover { border-color: var(--ink) !important; color: var(--chalk) !important; }
#ht_shr #fx-shr-none { font: 400 17px/1.5 var(--grot); color: var(--ink-soft); margin: 34px 0 0; padding-top: 21px; border-top: 1px solid var(--line); }
#ht_shr #tab:not(:has(tbody tr)) { display: none !important; }

#ht_shr #tab { display: block; width: 100%; margin: 34px 0 0 !important; border-collapse: collapse; font: 400 17px/1.3 var(--grot) !important; background: none !important; }
#ht_shr #tab thead, #ht_shr #tab tbody { display: block; }
#ht_shr #tab tr {
  display: grid; align-items: center; column-gap: 13px;
  /* fixed widths for everything but the link name and the folder, so the header and the rows (separate grids) line up */
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) 140px 100px 120px 140px 100px 262px;
  border-bottom: 1px solid var(--line);
}
#ht_shr #tab thead tr { border-bottom-color: var(--line); }
#ht_shr #tab th, #ht_shr #tab td {
  position: static !important; display: block; min-width: 0;
  padding: 13px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  white-space: normal !important; overflow-wrap: anywhere; text-align: left; vertical-align: middle;
}
#ht_shr #tab th { overflow-wrap: normal !important; font: 400 13px/1.3 var(--serif) !important; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-label) !important; white-space: nowrap !important; }
#ht_shr #tab td { color: var(--ink); font: 400 17px/1.3 var(--grot) !important; }
/* copyparty column order: key, delete, pw, source, axs, nf, user, created, expires, min, hrs, add time */
#ht_shr #tab tr > :nth-child(1) { order: 1; }
#ht_shr #tab tr > :nth-child(4) { order: 2; }
#ht_shr #tab tr > :nth-child(5) { order: 3; }
#ht_shr #tab tr > :nth-child(3) { order: 4; }
#ht_shr #tab tr > :nth-child(7) { order: 5; }
#ht_shr #tab tr > :nth-child(9) { order: 6; }
#ht_shr #tab tr > :nth-child(10) { order: 7; }
#ht_shr #tab tr > :nth-child(12) { order: 8; }
#ht_shr #tab tr > :nth-child(2) { order: 9; }
#ht_shr #tab tr > :nth-child(6), #ht_shr #tab tr > :nth-child(8), #ht_shr #tab tr > :nth-child(11) { display: none !important; }
/* metadata (who, when, how long) in the same quiet face as sizes and dates in the file list */
#ht_shr #tab td:nth-child(3), #ht_shr #tab td:nth-child(5), #ht_shr #tab td:nth-child(7),
#ht_shr #tab td:nth-child(9), #ht_shr #tab td:nth-child(10) { font: 400 15px/1.3 var(--grot) !important; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
/* Delete moves into the actions cell (files.js); its own column is not shown */
#ht_shr #tab tr > :nth-child(2) { display: none !important; }
/* link name first (the partner's link), QR code under it */
#ht_shr #tab td:first-child { display: flex; flex-direction: column; align-items: flex-start; }
#ht_shr #tab td:first-child a.fx-key { order: 1; font: 400 21px/1.3 var(--serif) !important; min-height: 44px; display: inline-flex; align-items: center; }
#ht_shr #tab a.fx-qr { font: 400 15px/1 var(--grot) !important; color: var(--ink-soft) !important; min-height: 40px; padding: 0 5px !important; display: inline-flex; align-items: center; text-decoration: underline !important; text-decoration-color: var(--line) !important; text-underline-offset: 4px; }
#ht_shr #tab a.fx-qr:hover { color: var(--chalk) !important; }
#ht_shr #tab td:nth-child(4) a { min-height: 40px; display: inline-flex; align-items: center; font-size: 15px !important; }
#ht_shr #tab a[k] {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 5px !important; margin-left: auto !important; font-size: 15px !important; color: var(--fail) !important;
  text-decoration: underline !important; text-decoration-color: var(--line) !important; text-underline-offset: 4px;
}
#ht_shr #tab td:nth-child(12) { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 13px; }
#ht_shr #tab td:nth-child(12) button[value="1"] { display: none !important; }
#ht_shr #tab button {
  min-height: 40px; height: 40px; padding: 0 13px !important; margin: 0 !important;
  font: 400 15px/1 var(--grot) !important; color: var(--ink) !important; background: var(--paper) !important;
  border: 1px solid var(--ink-soft) !important; border-radius: 2px !important; box-shadow: none !important; cursor: pointer; white-space: nowrap;
}
#ht_shr #tab button:hover { border-color: var(--ink) !important; color: var(--chalk) !important; }

/* below 1200px: one card per share, each value under its label (the row's fixed columns need about 950px,
   so a 1024px tablet gets the cards too) */
@media (max-width: 1199px) {
  #ht_shr #fx-shr-h { padding-top: 21px; }
  #ht_shr #wrap a.fx-refresh { top: calc(var(--head) + 21px + 21px); }
  #ht_shr #tab thead { display: none; }
  #ht_shr #tab tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 21px; row-gap: 0; padding: 8px 0 13px; }
  #ht_shr #tab td { padding: 3px 0 !important; }
  #ht_shr #tab td:nth-child(4) a { min-height: 32px; font-size: 15px !important; }
  #ht_shr #tab td::before {
    content: attr(data-fx-label); display: block; margin-bottom: 3px;
    font: 400 13px/1.3 var(--serif); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-label);
  }
  #ht_shr #tab td:first-child, #ht_shr #tab td:nth-child(4), #ht_shr #tab td:nth-child(12) { grid-column: 1 / -1; }
  #ht_shr #tab td:first-child::before, #ht_shr #tab td:nth-child(12)::before { display: none; }
  #ht_shr #tab td:nth-child(12) { padding-top: 8px !important; }
  /* card order: link, folder, expires | time left, access | password, created by, then Add 1 hour | Delete */
  #ht_shr #tab tr > :nth-child(4) { order: 2; }
  #ht_shr #tab tr > :nth-child(9) { order: 3; }
  #ht_shr #tab tr > :nth-child(10) { order: 4; }
  #ht_shr #tab tr > :nth-child(5) { order: 5; }
  #ht_shr #tab tr > :nth-child(3) { order: 6; }
  #ht_shr #tab tr > :nth-child(7) { order: 7; }
}

/* =====================================================================
   CLIP DETAILS in the player: the clip's sidecar JSON, read by people. Right of the video on wide screens,
   a drawer over it on mid widths ("Details" toggles both), and the scrolling room under the caption bar on a
   phone held upright. Night tokens, Cardo for what the clip is, small-caps serif labels, grotesk for data.
   ===================================================================== */
/* on html, not the overlay: the notice (#toast) sits outside the overlay and keeps clear of the panel */
html { --info-w: clamp(360px, 30vw, 460px); --info-pad: 26px; }
html #fx-info {
  position: fixed; z-index: 5; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  top: var(--head); right: 0; bottom: calc(var(--bar) + var(--notice, 0px)); width: var(--info-w);
  padding: 21px var(--info-pad) 34px; background: var(--n-bg); border-left: 1px solid var(--n-line);
  color: var(--n-ink); font: 400 15px/1.5 var(--grot); text-align: left; white-space: normal;
  scrollbar-color: var(--n-line) transparent;
}
html #fx-info[hidden], html #fx-info-btn[hidden], html #fx-hands[hidden] { display: none !important; }
html[data-fx-info="drawer"] #fx-info { width: min(var(--info-w), 100vw); box-shadow: -21px 0 55px rgba(0, 0, 0, .45); }
/* side: the stage gives the panel its width */
html.fx-info-on[data-fx-info="side"] #bbox-overlay .full-image { padding-right: var(--info-w); }
/* the chevrons move to half the gutter, so the video takes the room they leave: each side keeps
   pad / 2 + 50px, the chevron's 55px target ends at pad / 2 + 42px, an 8px gap at every width */
html.fx-info-on[data-fx-info="side"] .full-image video {
  width: min(calc(100vw - var(--info-w) - var(--pad) - 100px), calc((100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 89px) * 16 / 9)) !important;
  max-width: calc(100vw - var(--info-w) - var(--pad) - 100px) !important;
}
html.fx-info-on[data-fx-info="side"] #bbox-next { right: calc(var(--info-w) + var(--pad) / 2 - 13px) !important; }
/* Details, Full screen and Close end on the panel's text column, as its header row */
html.fx-info-on[data-fx-info="side"] #bbox-btns { right: var(--info-pad) !important; }
html.fx-info-on[data-fx-info="side"] #bbox-prev { left: calc(var(--pad) / 2 - 13px) !important; }
/* drawer (tablets, phones on their side): Next sits at the drawer's edge, not under it */
html.fx-info-on[data-fx-info="drawer"] #bbox-next { right: calc(min(var(--info-w), 100vw) + 8px) !important; }
/* the player's notice (cannot play, link copied) stays on the stage, never over the panel */
html.fx-info-on[data-fx-info="side"] body.bbox-open #toast.vis { right: calc(var(--info-w) + var(--pad)) !important; }
html.fx-info-on[data-fx-info="drawer"] body.bbox-open #toast.vis { left: 13px !important; right: calc(min(var(--info-w), 100vw) + 13px) !important; padding-right: 21px !important; flex-wrap: wrap; }
html.fx-info-on[data-fx-info="drawer"] body.bbox-open #toast.vis a#toastc { position: static !important; margin: 0 0 0 auto !important; }
html body.bbox-open #toast #fx-h264 { display: inline; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; color: var(--n-chalk, #D4674F) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
html body.bbox-open #toast #fx-h264:hover { color: #E9DFC9 !important; }
html[data-fx-info="below"] body.bbox-open:has(#toast.vis) #fx-info { padding-top: calc(var(--fx-toast, 89px) + 34px); }
/* Full screen is the video alone: no panel, no header band or lockup over the picture; the hand keypoints
   stay if they were on (files.js keeps the canvas; it is cut off above the browser's control bar while paused);
   the two buttons stay (Close, and Full screen to leave) on a soft scrim */
html.bb_fsc #fx-info, html.bb_fsc #fx-info-btn { display: none !important; }
html.bb_fsc.fx-info-on #bbox-overlay .full-image { padding: 0 !important; }
html.bb_fsc #bbox-overlay::before, html.bb_fsc #bbox-overlay::after { display: none !important; }
html.bb_fsc #bbox-btns { background: rgba(26, 21, 16, .72); padding: 4px; border-radius: 2px; }
/* phone upright: everything under the caption bar */
html[data-fx-info="below"] #fx-info {
  top: calc(var(--top) + var(--vid) + var(--ctl) + var(--bar)); bottom: 0; left: 0; right: 0; width: auto;
  border-left: 0; border-top: 1px solid var(--n-line); padding: 21px var(--pad) 55px;
}
html #bbox-overlay #bbox-btns #fx-info-btn {
  display: inline-flex !important; align-items: center; height: 40px; box-sizing: border-box; padding: 0 13px !important;
  font: 400 15px/1 var(--grot) !important; color: var(--n-ink) !important; background: none !important;
  border: 1px solid rgba(233, 223, 201, .32) !important; border-radius: 2px !important;
}
html #bbox-overlay #bbox-btns #fx-info-btn[aria-expanded="true"] { background: var(--n-panel) !important; border-color: var(--n-ink) !important; }
html #fx-hands { position: fixed; z-index: 3; pointer-events: none; }

html #fx-info .fx-i-head { padding-bottom: 21px; border-bottom: 1px solid var(--n-line); }
html #fx-info .fx-i-kicker, html #fx-info .fx-i-lab, html #fx-info .fx-i-fold > summary {
  margin: 0; font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--n-soft);
}
html #fx-info .fx-i-title { margin: 8px 0 5px; font: 400 34px/1.1 var(--serif); letter-spacing: -.01em; color: var(--n-ink); }
html #fx-info .fx-i-sub { margin: 0; color: var(--n-soft); font-size: 14px; }
html #fx-info .fx-i-sec { padding: 21px 0; border-bottom: 1px solid var(--n-line); }
html #fx-info .fx-i-lab { margin-bottom: 13px; }
html #fx-info .fx-i-shares, html #fx-info .fx-i-legend { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 14px; color: var(--n-soft); }
html #fx-info .fx-i-legend { margin: 8px 0 0; }
html #fx-info .fx-i-key { display: inline-flex; align-items: center; gap: 6px; color: var(--n-ink); }
html #fx-info .fx-i-key::before { content: ""; width: 10px; height: 10px; border-radius: 1px; background: var(--k); }
html #fx-info .fx-s-work { --k: #D4674F; }
html #fx-info .fx-s-idle { --k: #5A4E3E; }
html #fx-info .fx-s-transit { --k: #A5947A; }
html #fx-info .fx-h2 { --k: #E9DFC9; }
html #fx-info .fx-h1 { --k: #8C7D66; }
html #fx-info .fx-i-strip { position: relative; height: 21px; background: #120E0A; border-radius: 1px; cursor: pointer; overflow: hidden; }
html #fx-info .fx-i-hstrip { height: 8px; margin-top: 5px; }
html #fx-info .fx-i-strip > i { position: absolute; top: 0; bottom: 0; background: var(--k); }
html #fx-info .fx-i-strip > b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #000; }
html #fx-info .fx-i-state { margin: 0 0 5px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
html #fx-info .fx-i-state::before { content: ""; width: 10px; height: 10px; border-radius: 1px; background: var(--k, transparent); }
html #fx-info .fx-i-sees { margin: 0 0 5px; font: 400 19px/1.35 var(--serif); color: var(--n-ink); min-height: 1.35em; }
html #fx-info .fx-i-why { margin: 0 0 8px; color: var(--n-soft); font-size: 14px; }
html #fx-info .fx-i-meas { margin: 0; font-size: 13px; color: var(--n-soft); }
html #fx-info .fx-i-note { margin: 13px 0 0; font-size: 12px; line-height: 1.45; color: #8C7D66; }
html #fx-info .fx-i-objs { margin-top: 5px; }
html #fx-info .fx-i-snote { margin-top: 4px; }
html #fx-info .fx-i-onote[hidden], html #fx-info .fx-i-snote[hidden], html #fx-info .fx-i-objs[hidden] { display: none; }
/* the overlays' toggles under the picture: two plain buttons, each with a small square that fills chalk when
   it is on, and the Experimental label after Objects. Fixed, placed by files.js under the measured video box
   (left edge on the picture's left edge); on a phone held upright it runs edge to edge in the gutters. */
html #fx-ovl {
  position: fixed; z-index: 3; box-sizing: border-box; height: var(--ctl);
  display: flex; align-items: center; gap: 8px; padding: 8px 0 0; white-space: nowrap; overflow: hidden;
}
html #fx-ovl[hidden] { display: none !important; }
html #bbox-overlay #fx-ovl button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-width: 0; box-sizing: border-box;
  padding: 0 12px 0 10px !important; font: 400 14px/1 var(--grot) !important; letter-spacing: .01em;
  color: var(--n-ink) !important; border: 1px solid rgba(233, 223, 201, .32) !important; border-radius: 2px !important;
}
html #bbox-overlay #fx-ovl button::before {
  content: ""; width: 10px; height: 10px; box-sizing: border-box; flex: none;
  border: 1px solid var(--n-soft); border-radius: 1px;
}
html #bbox-overlay #fx-ovl button:hover { border-color: var(--n-ink) !important; background: var(--n-panel) !important; }
html #bbox-overlay #fx-ovl button[aria-pressed="true"] { background: var(--n-panel) !important; border-color: var(--n-ink) !important; }
html #bbox-overlay #fx-ovl button[aria-pressed="true"]::before { background: var(--n-chalk); border-color: var(--n-chalk); }
html #bbox-overlay #fx-ovl button[hidden] { display: none !important; }
html #fx-ovl .fx-ovl-x { font: 400 12px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--n-soft); margin-left: 2px; }
html #fx-ovl .fx-ovl-x[hidden] { display: none; }
/* a phone on its side: no room under the picture, so the row joins the caption bar before Download (the
   file's size goes, so the name keeps its room) */
html .full-image figcaption #fx-ovl.fx-ovl-cap { position: static; height: auto; padding: 0; margin-left: 13px; flex: none; }
html #bbox-overlay figcaption #fx-ovl.fx-ovl-cap button { height: 32px; }
html .full-image figcaption:has(#fx-ovl.fx-ovl-cap) .fx-fsz { display: none; }
/* a phone held upright: the row runs in the gutters, its buttons a finger's height */
@media (max-width: 767px) and (orientation: portrait) {
  html #fx-ovl { padding: 8px var(--pad) 0; }
  html #bbox-overlay #fx-ovl button { height: 40px; }
}
/* the narrowest rooms (a small phone on its side, where the row shares the caption bar with the name; a
   320px phone upright): the row closes up a little so the name and the tag keep whole */
@media (max-width: 799px) and (orientation: landscape), (max-width: 359px) {
  html #fx-ovl { gap: 6px; }
  html .full-image figcaption #fx-ovl.fx-ovl-cap { margin-left: 8px; }
  html #bbox-overlay #fx-ovl button { padding: 0 9px 0 8px !important; }
  html #fx-ovl .fx-ovl-x { letter-spacing: .08em; }
}
/* a small phone on its side: the caption bar cannot hold the counter, the whole name, the row and Download;
   the counter goes (the chevrons and the grid keep the order), the name stays whole */
@media (max-width: 799px) and (orientation: landscape) {
  html .full-image figcaption:has(#fx-ovl.fx-ovl-cap)::after { display: none; }
  html .full-image figcaption:has(#fx-ovl.fx-ovl-cap) .fx-fcn { font-size: 17px; }
}
html #fx-info .fx-i-nar, html #fx-info .fx-i-list { margin: 0; padding: 0; list-style: none; }
html #fx-info .fx-i-nar li, html #fx-info .fx-i-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 13px; align-items: baseline; padding: 5px 0; }
html #fx-info .fx-i-list li:not(:has(.fx-i-t)) { grid-template-columns: 1fr; }
html #fx-info .fx-i-nar li > span { font: 400 16px/1.4 var(--serif); color: var(--n-soft); }
html #fx-info .fx-i-nar li.fx-cur > span { color: var(--n-ink); }
html #fx-info .fx-i-nar li.fx-cur .fx-i-t { color: var(--n-chalk) !important; }
html #fx-info button.fx-i-t {
  height: auto; min-width: 0; padding: 0 !important; font: 400 13px/1.6 var(--grot) !important;
  font-variant-numeric: tabular-nums !important;   /* the player's buttons reset font-variant with !important */
  color: var(--n-soft) !important; text-decoration: underline; text-decoration-color: var(--n-line); text-underline-offset: 3px;
}
html #fx-info button.fx-i-t:hover { color: var(--n-chalk) !important; }
html #fx-info .fx-i-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 6px 13px; margin: 13px 0 0; font-size: 14px; }
html #fx-info .fx-i-kv dt { color: var(--n-soft); }
html #fx-info .fx-i-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
html #fx-info .fx-i-kv dd.fx-i-mono { font: 400 12px/1.5 var(--mono); }
html #fx-info .fx-i-kv dd.fx-i-warn { color: #E8A27F; }
html #fx-info .fx-i-fold { border-bottom: 1px solid var(--n-line); padding: 0; }
html #fx-info .fx-i-fold > summary { padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
html #fx-info .fx-i-fold > summary::-webkit-details-marker { display: none; }
html #fx-info .fx-i-fold > summary::after { content: "+"; font: 400 17px/1 var(--grot); letter-spacing: 0; }
html #fx-info .fx-i-fold[open] > summary::after { content: "\2212"; }
html #fx-info .fx-i-fold > :not(summary) { margin-bottom: 16px; }
html #fx-info .fx-i-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 0; }
html #fx-info .fx-i-files a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; font-size: 14px; color: var(--n-ink) !important;
  border: 1px solid rgba(233, 223, 201, .32); border-radius: 2px; text-decoration: none !important;
}
html #fx-info .fx-i-files a:hover { border-color: var(--n-chalk); color: var(--n-chalk) !important; }
@media (max-width: 767px) {
  html #bbox-overlay #bbox-btns #fx-info-btn { font-size: 14px !important; padding: 0 10px !important; }
  html #fx-info .fx-i-title { font-size: 28px; }
  /* a finger's targets: each time button is a 40px box centred on its line (the rows keep their rhythm,
     9px of row padding takes the overhang), the activity strip grows to 28px, the hands strip to 14px */
  html #fx-info .fx-i-nar li, html #fx-info .fx-i-list li:has(.fx-i-t) { align-items: start; padding: 9px 0; }
  html #fx-info button.fx-i-t { display: inline-flex; align-items: center; min-height: 40px; margin: -9px 0; }
  html #fx-info .fx-i-strip { height: 28px; }
  html #fx-info .fx-i-hstrip { height: 14px; }
}
html #ggrid > a[data-fx-side] { display: none !important; }
/* a clip tile: the title in the name's voice, the stored name (IMG_7541) as a small label under it, then one
   quiet facts line (setting, length, work share). The tile's name span is copyparty's; the title is added
   before it (files.js, tileFacts). Tiles without a sidecar keep the name as their headline. */
html #ggrid > a > .fx-ttitle {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  padding: 13px 0 0; font: 400 16px/1.3 var(--grot); color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty;
}
html body #ggrid > a[data-fx-titled]:not(.dir) > span {
  padding: 5px 0 0 !important; -webkit-line-clamp: 1 !important; line-clamp: 1 !important; word-break: normal;
  font: 400 13px/1.3 var(--serif) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
html #ggrid > a:hover > .fx-ttitle, html #ggrid > a:focus-visible > .fx-ttitle { color: var(--chalk); }
html #ggrid > a .fx-tfacts { margin: 5px 0 0; font: 400 14px/1.45 var(--grot); color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html #fx-tkey {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; margin: 0 0 13px;
  font: 400 13px/1.5 var(--grot); color: var(--ink-soft);
}
html #fx-tkey .fx-tkey-lab { margin-right: 5px; }
html #fx-tkey .fx-i-key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
html #fx-tkey .fx-i-key::before { content: ""; width: 10px; height: 10px; border-radius: 1px; background: var(--k); }
html #fx-tkey .fx-s-work { --k: #D4674F; }
html #fx-tkey .fx-s-idle { --k: #5A4E3E; }
html #fx-tkey .fx-s-transit { --k: repeating-linear-gradient(135deg, #A5947A 0 3px, #6E624F 3px 6px); }
html #bbox-overlay #bbox-btns #fx-info-btn[hidden] { display: none !important; }
html #fx-info .fx-i-sum { margin: 13px 0 0; font: 400 17px/1.45 var(--serif); color: var(--n-ink); }
html #fx-info .fx-i-tags { margin: 13px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
html #fx-info .fx-i-tags span { padding: 3px 8px; font-size: 13px; color: var(--n-soft); border: 1px solid var(--n-line); border-radius: 2px; }
html #fx-info .fx-i-strip > i.fx-s-transit { background: repeating-linear-gradient(135deg, #A5947A 0 3px, #6E624F 3px 6px); }

/* ---------- clip details: the strips' readout, measured hands under the AI's line, keyboard ---------- */
/* a taller hit area than the drawn strip: the strip keeps its look, a finger gets 13px more to land on */
html #fx-info .fx-i-strip { touch-action: pan-y; outline-offset: 3px; }
html #fx-info .fx-i-strip::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
html #fx-info .fx-i-strip:focus-visible { outline: 2px solid var(--n-chalk) !important; }
html #fx-info .fx-i-tip {
  margin: 8px 0 0; min-height: 1.45em; font-size: 14px; line-height: 1.45; color: var(--n-soft);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html #fx-info .fx-i-tip.fx-on { color: var(--n-ink); }
html #fx-info .fx-i-check {
  margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 2px solid var(--n-chalk);
  font-size: 13px; line-height: 1.45; color: var(--n-ink);
}
html #fx-info .fx-i-check[hidden] { display: none; }
/* a phone on its side (under 500px tall): the whole width is the video's, as large as the height allows with
   13px of stage above and below; Details opens as a drawer over the right (files.js picks the drawer there).
   The panel's title is smaller, so the timeline shows without scrolling. */
@media (orientation: landscape) and (max-height: 499px) {
  html #bbox-overlay { --bar: 55px; }
  html .full-image video, html .full-image img { max-height: calc(100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 26px) !important; }
  html .full-image video {
    width: min(calc(100vw - 2 * var(--pad) - 2 * 55px), calc((100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 26px) * 16 / 9)) !important;
  }
  /* one caption row (counter, name, size, Download) and the chevrons at mid-height, also on a narrow phone
     whose upright layout stacks the caption in two rows */
  html .full-image figcaption { height: var(--bar); flex-wrap: nowrap; align-content: center; column-gap: 13px; padding: 0 var(--pad) !important; }
  html .full-image figcaption .fx-fcn { flex: 0 1 auto; order: 0; font-size: 19px; }
  html .full-image figcaption::after { order: -1; margin: 0 8px 0 0; }
  html #bbox-overlay figcaption a { height: 40px; padding: 0 16px !important; }
  html #bbox-overlay #bbox-prev, html #bbox-overlay #bbox-next {
    position: absolute !important; top: calc(50% - 44px) !important; bottom: auto !important; width: 55px !important; height: 89px !important;
  }
  html #bbox-overlay #bbox-prev { left: calc(var(--pad) - 13px) !important; right: auto !important; }
  html #bbox-overlay #bbox-next { right: calc(var(--pad) - 13px) !important; left: auto !important; }
  html #bbox-overlay #bbox-prev.off { left: -80px !important; }
  html #bbox-overlay #bbox-next.off { right: -80px !important; }
  html.fx-info-on[data-fx-info="drawer"] #bbox-overlay #bbox-next { right: calc(min(var(--info-w), 100vw) + 8px) !important; }
  html body.bbox-open #toast.vis { bottom: calc(var(--bar) + 8px) !important; }
  html { --info-pad: 21px; }
  html[data-fx-info="drawer"] #fx-info, html[data-fx-info="side"] #fx-info { padding: 13px var(--info-pad) 21px; }
  /* Details beside the video (a large phone on its side): a narrower panel, the chevrons in 44px at the
     stage's edges, so the video keeps the height the screen allows */
  html { --info-w: 320px; }
  html.fx-info-on[data-fx-info="side"] .full-image video {
    width: min(calc(100vw - var(--info-w) - 88px), calc((100vh - var(--head) - var(--bar) - var(--notice, 0px) - var(--ctl) - 26px) * 16 / 9)) !important;
    max-width: calc(100vw - var(--info-w) - 88px) !important;
  }
  html.fx-info-on[data-fx-info="side"] #bbox-overlay #bbox-prev { left: 0 !important; width: 44px !important; }
  html.fx-info-on[data-fx-info="side"] #bbox-overlay #bbox-next { right: var(--info-w) !important; width: 44px !important; }
  html.fx-info-on[data-fx-info="side"] body.bbox-open #toast.vis { left: 21px !important; right: calc(var(--info-w) + 21px) !important; }
  html #fx-info .fx-i-title { margin: 5px 0 3px; font-size: 22px; line-height: 1.15; }
  html #fx-info .fx-i-head { padding-bottom: 13px; }
  html #fx-info .fx-i-sec { padding: 13px 0; }
}
html #fx-info button:focus-visible, html #fx-info a:focus-visible, html #fx-info summary:focus-visible { outline: 2px solid var(--n-chalk) !important; outline-offset: 2px; }

/* ---------- grid tiles: the clip's activity under its frame (work / idle / transit, as in the player) ---------- */
html #ggrid > a > .fx-tbar { position: relative; height: 5px; margin-top: 3px; background: #1A1510; overflow: hidden; }
@media (max-width: 767px) { html #ggrid > a > .fx-tbar { height: 6px; } html #fx-tkey { margin-top: 13px; } }
html #ggrid > a > .fx-tbar > i { position: absolute; top: 0; bottom: 0; }
html #ggrid > a > .fx-tbar .fx-s-work { background: #D4674F; }
html #ggrid > a > .fx-tbar .fx-s-idle { background: #5A4E3E; }
html #ggrid > a > .fx-tbar .fx-s-transit { background: repeating-linear-gradient(135deg, #A5947A 0 3px, #6E624F 3px 6px); }

/* =====================================================================
   DATASET OVERVIEW (files.js, on the folder that holds clips.csv): the figures, the README, every clip,
   then the format folders under their own heading. The count line and the README / CSV tiles step aside
   (their downloads are in the overview); list view keeps every file.
   ===================================================================== */
html[data-fx-ds] #fx-sum { display: none; }
html[data-fx-ds] #ggrid > a[data-fx-doc] { display: none !important; }
html #fx-ov { margin: 34px 0 0; }
/* copyparty pads every link; the overview's links set their own boxes */
html #fx-ov a { padding: 0; margin: 0; background: none; border-radius: 0; }

/* figures: a ruled band, a label over each figure */
html #fx-ov .fx-ov-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0;
  border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--line);
}
html #fx-ov .fx-ov-stats > div { min-width: 0; padding: 21px 13px 21px 21px; border-left: 1px solid var(--line); }
html #fx-ov .fx-ov-stats > div:first-child { padding-left: 0; border-left: 0; }
html #fx-ov .fx-ov-stats dt {
  font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label);
}
html #fx-ov .fx-ov-stats dd { margin: 0; }
html #fx-ov .fx-ov-fig {
  margin-top: 8px !important; font: 400 34px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
html #fx-ov .fx-ov-cap { margin-top: 5px !important; font: 400 14px/1.35 var(--grot); color: var(--ink-soft); }

/* about */
html #fx-ov .fx-ov-lead { margin: 34px 0 0; max-width: 38em; font: 400 21px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
html #fx-ov .fx-ov-lead[hidden] { display: none; }
html #fx-ov .fx-ov-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 21px; margin: 21px 0 0; }
html #fx-ov .fx-ov-rm {
  display: inline-flex; align-items: center; gap: 13px; height: 44px; padding: 0 21px; margin: 0 8px 0 0; box-sizing: border-box;
  font: 400 17px/1 var(--grot); color: var(--ink); background: none; border: 1px solid var(--ink-soft); border-radius: 2px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
html #fx-ov .fx-ov-rm[hidden] { display: none; }
html #fx-ov .fx-ov-rm::after { content: "+"; font: 400 19px/1 var(--grot); color: var(--ink-soft); }
html #fx-ov .fx-ov-rm[aria-expanded="true"]::after { content: "\2212"; }
@media (hover: hover) { html #fx-ov .fx-ov-rm:hover { border-color: var(--ink); color: var(--chalk); } }
html #fx-ov .fx-ov-doc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 400 15px/1 var(--grot); color: var(--ink) !important; text-decoration: none !important;
}
html #fx-ov .fx-ov-doc::before {
  content: ""; width: 10px; height: 12px; flex: none;
  background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
html #fx-ov .fx-ov-sz { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) { html #fx-ov .fx-ov-doc:hover { color: var(--chalk) !important; } }

/* the README, read in the page: a column of book type with ruled tables */
html #fx-ov .fx-md { max-width: 46em; margin: 21px 0 0; padding: 8px 0 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
html #fx-ov .fx-md[hidden] { display: none; }
html #fx-ov .fx-md h3 { margin: 34px 0 13px; font: 400 26px/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); }
html #fx-ov .fx-md h4 { margin: 21px 0 8px; font: 400 21px/1.25 var(--serif); color: var(--ink); }
html #fx-ov .fx-md p, html #fx-ov .fx-md li { font: 400 17px/1.6 var(--grot); color: var(--ink); text-wrap: pretty; }
html #fx-ov .fx-md p { margin: 13px 0 0; }
html #fx-ov .fx-md ul, html #fx-ov .fx-md ol { margin: 8px 0 0; padding-left: 1.4em; }
html #fx-ov .fx-md li { margin: 5px 0 0; padding-left: 3px; }
html #fx-ov .fx-md li::marker { color: var(--ink-soft); }
html #fx-ov .fx-md strong { font-weight: 600; }
html #fx-ov .fx-md code { font: 400 .86em/1 var(--mono); padding: 1px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; overflow-wrap: anywhere; }
/* the layout block: no horizontal scroll, long paths wrap */
html #fx-ov .fx-md pre { margin: 13px 0 0; padding: 13px; background: var(--panel); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
html #fx-ov .fx-md pre code { padding: 0; background: none; border: 0; font: 400 12px/1.55 var(--mono); }
html #fx-ov .fx-md table { width: 100%; margin: 13px 0 0; border-collapse: collapse; font: 400 15px/1.45 var(--grot); }
html #fx-ov .fx-md th { padding: 8px 13px 8px 0; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--ink-soft);
  font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label); }
html #fx-ov .fx-md td { padding: 8px 13px 8px 0; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
html #fx-ov .fx-md td:first-child { width: 28%; }
/* the README's Layout block: file paths are long, so they get the wider column */
html #fx-ov .fx-md table.fx-md-pairs td:first-child { width: 46%; }
html #fx-ov .fx-md table.fx-md-pairs code { background: none; border: 0; padding: 0; overflow-wrap: break-word; }

/* clips: section headings in the page title's voice, one ruled row per clip */
html #fx-ov .fx-ov-h { margin: 89px 0 0; font: 400 clamp(28px, 1.2vw + 17px, 34px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
html #fx-ov .fx-ov-note { margin: 8px 0 0; font: 400 15px/1.5 var(--grot); color: var(--ink-soft); max-width: 46em; }
html #fx-ov .fx-cl-group {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 21px;
  margin: 34px 0 0; padding: 0 0 13px; border-bottom: 1px solid var(--ink-soft);
  font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
html #fx-ov .fx-cl-count { color: var(--ink-label); font-variant-numeric: lining-nums tabular-nums; }
html #fx-ov .fx-cl { list-style: none; margin: 0; padding: 0; }
html #fx-ov .fx-cl-row {
  position: relative; display: grid; grid-template-columns: 208px minmax(0, 1fr) auto; gap: 0 34px; align-items: start;
  padding: 21px 0; border-bottom: 1px solid var(--line);
}
html #fx-ov .fx-cl-th { position: relative; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line); box-sizing: border-box; overflow: hidden; }
html #fx-ov .fx-cl-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
html #fx-ov .fx-cl-th img[data-fx-ph] { object-position: -9999px 0; animation: fx-wait 1.8s ease-in-out infinite; }
/* the play mark, as on the grid's video tiles */
html #fx-ov .fx-cl-th::after {
  content: ""; position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid rgba(246, 237, 216, .85);
  background: rgba(46, 32, 18, .42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 11.5v11l8.5-5.5z' fill='%23F6EDD8'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  transition: background-color .15s ease, border-color .15s ease;
}
html #fx-ov .fx-cl-kick { margin: 0; font: 400 13px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label); font-variant-numeric: lining-nums; }
html #fx-ov .fx-cl-title { margin: 5px 0 0; font: 400 26px/1.2 var(--serif); letter-spacing: -.005em; }
/* the title's link covers the row, so the whole row opens the clip; the two actions sit above it */
html #fx-ov .fx-cl-title a { color: var(--ink) !important; text-decoration: none !important; }
html #fx-ov .fx-cl-title a::after { content: ""; position: absolute; inset: 0; }
html #fx-ov .fx-cl-title a:focus-visible { outline: none !important; }
html #fx-ov .fx-cl-row:has(.fx-cl-title a:focus-visible) { outline: 2px solid var(--chalk); outline-offset: 4px; }
html #fx-ov .fx-cl-meta { margin: 5px 0 0; font: 400 15px/1.45 var(--grot); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
html #fx-ov .fx-cl-sum {
  margin: 8px 0 0; max-width: 46em; font: 400 15px/1.5 var(--grot); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html #fx-ov .fx-cl-act { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
html #fx-ov .fx-cl-play {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; box-sizing: border-box; white-space: nowrap;
  font: 400 15px/1 var(--grot); color: var(--ink) !important; text-decoration: none !important;
  border: 1px solid var(--ink-soft); border-radius: 2px;
}
html #fx-ov .fx-cl-dl {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; white-space: nowrap;
  font: 400 15px/1 var(--grot); color: var(--ink-soft) !important; text-decoration: none !important;
}
html #fx-ov .fx-cl-dl::before {
  content: ""; width: 10px; height: 12px; flex: none;
  background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat;
}
@media (hover: hover) {
  html #fx-ov .fx-cl-row:hover { background: linear-gradient(var(--panel), var(--panel)) no-repeat; }
  html #fx-ov .fx-cl-row:hover .fx-cl-title a { color: var(--chalk) !important; }
  html #fx-ov .fx-cl-row:hover .fx-cl-th { border-color: var(--chalk); }
  html #fx-ov .fx-cl-row:hover .fx-cl-th::after { background-color: var(--chalk); border-color: var(--chalk); }
  html #fx-ov .fx-cl-play:hover { border-color: var(--ink); color: var(--chalk) !important; }
  html #fx-ov .fx-cl-dl:hover { color: var(--chalk) !important; }
}
/* the Files heading leads into copyparty's toolbar and the format folders */
html[data-fx-ds] #fx-bar { margin-top: 21px; }

@media (max-width: 1099px) {
  html #fx-ov .fx-ov-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html #fx-ov .fx-ov-stats > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  html #fx-ov .fx-ov-stats > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  html #fx-ov .fx-ov-fig { font-size: 30px; }
  html #fx-ov .fx-cl-row { grid-template-columns: 176px minmax(0, 1fr) auto; gap: 0 21px; }
}
/* phones: two figures across; a row is the frame and the words side by side, its actions under the words */
@media (max-width: 599px) {
  html #fx-ov { margin-top: 21px; }
  html #fx-ov .fx-ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html #fx-ov .fx-ov-stats > div { padding: 13px 8px 13px 13px; }
  html #fx-ov .fx-ov-stats > div:nth-child(3n + 1) { padding-left: 13px; border-left: 1px solid var(--line); }
  html #fx-ov .fx-ov-stats > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  html #fx-ov .fx-ov-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  html #fx-ov .fx-ov-fig { font-size: 28px; }
  html #fx-ov .fx-ov-lead { font-size: 19px; margin-top: 21px; }
  html #fx-ov .fx-ov-docs { gap: 0 21px; }
  html #fx-ov .fx-ov-rm { flex: 1 1 100%; justify-content: space-between; margin: 0 0 5px; }
  html #fx-ov .fx-ov-h { margin-top: 55px; }
  html #fx-ov .fx-cl-row { grid-template-columns: 128px minmax(0, 1fr); gap: 0 13px; padding: 13px 0; }
  html #fx-ov .fx-cl-th::after { width: 24px; height: 24px; left: 5px; bottom: 5px; background-size: 24px 24px; }
  html #fx-ov .fx-cl-kick { font-size: 12px; letter-spacing: .12em; }
  html #fx-ov .fx-cl-title { margin-top: 3px; font-size: 19px; }
  html #fx-ov .fx-cl-meta { font-size: 14px; }
  html #fx-ov .fx-cl-sum { display: none; }
  html #fx-ov .fx-cl-act { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0 13px; margin-top: 3px; }
  html #fx-ov .fx-cl-play { height: 40px; padding: 0; border: 0; color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--line) !important; text-underline-offset: 4px; }
  /* README tables: one card per row, the column name over each value */
  html #fx-ov .fx-md table, html #fx-ov .fx-md tbody, html #fx-ov .fx-md tr, html #fx-ov .fx-md td { display: block; width: auto; }
  html #fx-ov .fx-md thead { display: none; }
  html #fx-ov .fx-md tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  html #fx-ov .fx-md td { padding: 3px 0; border: 0; }
  html #fx-ov .fx-md td:first-child { width: auto; }
  html #fx-ov .fx-md td::before {
    content: attr(data-label); display: block;
    font: 400 12px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-label);
  }
  html #fx-ov .fx-md td:empty { display: none; }
  html #fx-ov .fx-md table.fx-md-pairs td::before { content: none; }
  html #fx-ov .fx-md h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html #fx-ov *, html #fx-info *, html #ggrid .fx-tbar { transition: none !important; animation: none !important; }
}

/* narrow tiles (teammate grid with the folder sidebar at about 1024 px): the type + size line takes its own row
   so the size is never cut off; Download sits under it */
html #ggrid > a:not(.dir) { container-type: inline-size; }
@container (max-width: 300px) {
  html body #ggrid > a:not(.dir) > .fx-meta { flex-wrap: wrap; row-gap: 3px; }
  html body #ggrid > a:not(.dir) .fx-meta .fx-sz { flex: 1 1 100%; overflow: visible; }
}

/* share root: the wall of clip thumbnails right under the title (the page opens on the footage) */
html #fx-ov .fx-wall { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 21px 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
html #fx-ov .fx-wall li { min-width: 0; }
html #fx-ov .fx-wall-i { display: flex; flex-direction: column; gap: 4px; text-decoration: none !important; color: var(--ink) !important; }
html #fx-ov .fx-wall-th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line, #DCCBA8);
  border: 1px solid var(--line, #DCCBA8); }
html #fx-ov .fx-wall-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
html #fx-ov .fx-wall-len { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 2px;
  font: 500 12px/1.2 var(--grot); font-variant-numeric: tabular-nums; color: #F6EDD8; background: rgba(26, 21, 16, .78); }
html #fx-ov .fx-wall-t { font: 400 18px/1.25 var(--serif); overflow-wrap: anywhere; }
html #fx-ov .fx-wall-m { font-size: 13px; color: var(--ink-label); }
html #fx-ov .fx-wall-i:hover .fx-wall-th, html #fx-ov .fx-wall-i:focus-visible .fx-wall-th { border-color: var(--chalk, #A6402D); }
html #fx-ov .fx-wall-i:hover .fx-wall-t { color: var(--chalk, #A6402D); }
@media (max-width: 600px) {
  html #fx-ov .fx-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  html #fx-ov .fx-wall-t { font-size: 16px; }
  html #fx-ov .fx-wall-m { display: none; }
}

/* foot of the Details panel: there is more below (sticky, fades the text under it) */
html #fx-info .fx-i-more {
  position: sticky; bottom: -34px; z-index: 2; display: flex; justify-content: center; align-items: flex-end;
  width: 100%; height: 72px; margin: 8px 0 -34px; padding: 0 0 14px !important; border: 0 !important; cursor: pointer;
  background: linear-gradient(to bottom, rgba(26, 21, 16, 0), var(--n-bg) 62%) !important;
}
html #fx-info .fx-i-more[hidden] { display: none !important; }
html #fx-info .fx-i-more-p {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px;
  font: 500 14px/1 var(--grot); color: var(--n-bg); background: var(--n-ink);
}
html #fx-info .fx-i-more:hover .fx-i-more-p { background: var(--n-chalk); }
html[data-fx-info="below"] #fx-info .fx-i-more { bottom: -55px; margin-bottom: -55px; }

/* the current second under the toggles (files.js liveLine): the band under the picture grows by the strip's
   three fixed lines, so the picture never moves as the text changes; long lines end in an ellipsis */
html.fx-ovl-on.fx-now-on #bbox-overlay { --ctl: 222px; }
/* title and toggles share the first line (the title takes what the toggles leave, ending in an ellipsis), the
   when/length/light line under them, then the strip */
html #fx-ovl .fx-ovl-t { order: 0; flex: 1 1 0; min-width: 0; margin: 0 8px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 26px/36px var(--serif); letter-spacing: -.01em; color: var(--n-ink); }
html #bbox-overlay #fx-ovl button, html #fx-ovl .fx-ovl-x { order: 1; }
html #fx-ovl .fx-ovl-sub { order: 2; flex: 0 0 100%; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/20px var(--grot); color: var(--n-soft); }
html #fx-ovl .fx-now { order: 3; }
html #fx-ovl .fx-ovl-t[hidden], html #fx-ovl .fx-ovl-sub[hidden] { display: none; }
html.fx-now-on #fx-info .fx-i-title, html.fx-now-on #fx-info .fx-i-sub { display: none; }
html.fx-now-on #fx-ovl { flex-wrap: wrap; align-content: flex-start; row-gap: 0; }
html #fx-ovl .fx-now { flex: 0 0 100%; min-width: 0; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--n-line); }
html #fx-ovl .fx-now[hidden] { display: none; }
html #fx-ovl .fx-now p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html #fx-ovl .fx-now-h { display: flex; align-items: center; gap: 12px; font: 400 13px/18px var(--grot); color: var(--n-soft); }
html #fx-ovl .fx-now-st { display: inline-flex; align-items: center; gap: 8px; color: var(--n-ink); }
html #fx-ovl .fx-now-st[hidden] { display: none; }
html #fx-ovl .fx-now-st::before { content: ""; width: 10px; height: 10px; border-radius: 1px; background: var(--k, transparent); flex: none; }
html #fx-ovl .fx-s-work { --k: #D4674F; }
html #fx-ovl .fx-s-idle { --k: #5A4E3E; }
html #fx-ovl .fx-s-transit { --k: #A5947A; }
html #fx-ovl .fx-now-s { font: 400 18px/26px var(--serif); color: var(--n-ink); }
html #fx-ovl .fx-now-m { font: 400 13px/18px var(--grot); color: var(--n-soft); }
html.fx-now-on #fx-info .fx-i-state, html.fx-now-on #fx-info .fx-i-sees, html.fx-now-on #fx-info .fx-i-check,
html.fx-now-on #fx-info .fx-i-meas, html.fx-now-on #fx-info .fx-i-why { display: none !important; }
@media (max-width: 767px) and (orientation: portrait) {
  html.fx-ovl-on.fx-now-on #bbox-overlay { --ctl: 310px; }
  html #fx-ovl .fx-act .fx-i-legend { flex: 0 0 100%; }
  html #fx-ovl .fx-ovl-t { flex: 0 0 100%; margin: 0; font-size: 22px; line-height: 30px; }
  html #fx-ovl .fx-ovl-sub { order: 0; margin: 4px 0 12px; }
  html #fx-ovl .fx-now-s { font-size: 16px; }
  html #fx-ovl .fx-now p.fx-now-m { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 36px; }
}

/* the Activity section in the band right under the picture: thin work/idle/transit and hands strips across the
   video's width, then the shares and the hands legend on one line (the pointer readout stays in the panel only;
   here the strip under the title already reads the current second) */
html #fx-ovl .fx-act { order: -1; flex: 0 0 100%; min-width: 0; white-space: normal; }
html #fx-ovl .fx-act:empty { display: none; }
html #fx-ovl .fx-act .fx-i-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0 0 16px; padding: 0; border: 0; }
html #fx-ovl .fx-act .fx-i-lab, html #fx-ovl .fx-act .fx-i-tip { display: none; }
html #fx-ovl .fx-act .fx-i-strip { order: 1; flex: 0 0 100%; position: relative; height: 14px; background: #120E0A; border-radius: 1px; cursor: pointer; overflow: hidden; touch-action: pan-y; outline-offset: 3px; }
html #fx-ovl .fx-act .fx-i-hstrip { order: 2; height: 6px; margin-top: 3px; }
html #fx-ovl .fx-act .fx-i-strip:focus-visible { outline: 2px solid var(--n-chalk) !important; }
html #fx-ovl .fx-act .fx-i-strip > i { position: absolute; top: 0; bottom: 0; background: var(--k); }
html #fx-ovl .fx-act .fx-i-strip > i.fx-s-transit { background: repeating-linear-gradient(135deg, #A5947A 0 3px, #6E624F 3px 6px); }
html #fx-ovl .fx-act .fx-i-strip > b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #000; }
html #fx-ovl .fx-act .fx-i-shares, html #fx-ovl .fx-act .fx-i-legend { order: 3; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 0 14px; font: 400 13px/18px var(--grot); color: var(--n-soft); }
html #fx-ovl .fx-act .fx-i-legend { order: 4; }
html #fx-ovl .fx-act .fx-i-key { display: inline-flex; align-items: center; gap: 6px; color: var(--n-ink); }
html #fx-ovl .fx-act .fx-i-key::before { content: ""; width: 9px; height: 9px; border-radius: 1px; background: var(--k); }
html #fx-ovl .fx-act .fx-s-work { --k: #D4674F; }
html #fx-ovl .fx-act .fx-s-idle { --k: #5A4E3E; }
html #fx-ovl .fx-act .fx-s-transit { --k: #A5947A; }
html #fx-ovl .fx-act .fx-h2 { --k: #E9DFC9; }
html #fx-ovl .fx-act .fx-h1 { --k: #8C7D66; }

/* laptops and tablets: the title gets its own line (beside the toggles it was cut to a few words), the toggles
   go to the right of the when/length/light line */
@media (min-width: 768px) and (max-width: 1365px) {
  html.fx-ovl-on.fx-now-on #bbox-overlay { --ctl: 234px; }
  html #fx-ovl .fx-ovl-t { flex: 0 0 100%; margin: 0; }
  html #fx-ovl .fx-ovl-sub { order: 1; flex: 1 1 0; margin: 0 8px 0 0; }
  html #bbox-overlay #fx-ovl button, html #fx-ovl .fx-ovl-x { order: 2; }
}

/* activity and hands colours (2026-10-09): the strips used three warm greys for three meanings (transit, one
   hand, the idle key), so Transit and "one hand" read alike. Now each strip has its own logic:
   activity = terracotta for work, dark brown for idle, ochre for transit (three clearly different fills);
   hands = one cream at two strengths (both full, one faint) on a visible track, so no hands is the track
   itself, not a black gap that looks like missing data. The legend squares draw the same fills. */
html #fx-info .fx-s-transit, html #fx-ovl .fx-s-transit, html #fx-tkey .fx-s-transit,
html #fx-ovl .fx-act .fx-s-transit { --k: #D9A441; }
html #fx-info .fx-i-strip > i.fx-s-transit, html #fx-ovl .fx-act .fx-i-strip > i.fx-s-transit,
html #ggrid > a > .fx-tbar .fx-s-transit { background: #D9A441; }
/* one hand = the same cream at half height (a half-filled key), so it never reads as a grey of the activity strip */
html #fx-info .fx-i-hstrip > i.fx-h1, html #fx-ovl .fx-act .fx-i-hstrip > i.fx-h1 { top: 50%; background: #E9DFC9; }
html #fx-info .fx-i-key.fx-h1::before, html #fx-ovl .fx-act .fx-i-key.fx-h1::before {
  background: linear-gradient(to top, #E9DFC9 0 50%, transparent 50%); box-shadow: inset 0 0 0 1px rgba(233, 223, 201, .55); }
html #fx-info .fx-i-hstrip, html #fx-ovl .fx-act .fx-i-hstrip { background: #2E271F; }