/* The studio's side of Filmroom.

   Same world as the gallery, which is a replica of VidFlow: #101010 ground, one champagne
   accent, Playfair Display over Montserrat. It went through a plum phase and a
   daylight-canvas phase before that; both read as a different product sitting next to the
   gallery, which is the thing that actually matters.

   It also used to name Fraunces and Archivo, which were never among the downloaded fonts,
   so every heading quietly fell back to Georgia. The faces here are the two that
   tools/fonts.py actually fetches.

   Fonts come from fonts.css, self-hosted alongside. */
:root{
  --ground:#101010;        /* the page */
  --ground-2:#18181A;      /* a raised panel */
  --ground-3:#242427;      /* hover, and the inside of a field */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.72);
  --faint:rgba(255,255,255,.45);
  --rose:#D9A3A0;          /* the one accent -- rose, as on the gallery */
  --rose-soft:#E8BDBA;
  --ok:#8FD0A6;
  --warn:#E0B972;
  --bad:#E08A80;
  --radius:6px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--ground);color:var(--text);font:400 14px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:var(--rose)}
img{max-width:100%;display:block}

/* Film has grain; flat fields do not. The same wash as the marketing hero, at a third of
   the strength -- enough to stop the large dark areas reading as dead pixels. */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.shell{display:grid;grid-template-columns:210px 1fr;min-height:100vh}

/* ---------- sidebar ---------- */
.side{background:#0A0A0A;color:var(--muted);padding:20px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:11px;padding:2px 20px 22px;
  text-decoration:none;color:var(--text)}
.side .brand svg{width:24px;height:24px;flex:none}
.side .brand b{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.side .grp{padding:18px 20px 7px;font:600 9px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 20px;text-decoration:none;
  color:inherit;font-size:13px;transition:.15s}
.side a.nav:hover{color:var(--text);background:rgba(255,255,255,.035)}
.side a.nav.on{background:var(--ground-2);color:var(--text);
  box-shadow:inset 2px 0 0 var(--rose)}
.side .foot{margin-top:auto;padding:16px 20px 0;font-size:11.5px;color:var(--faint);
  border-top:1px solid var(--line)}
.side .foot b{display:block;color:var(--muted);font-weight:500}

/* ---------- main ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:14px;padding:17px 28px;
  border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:5}
.bar h1{font:400 23px/1.2 var(--serif);letter-spacing:.01em}
.bar .crumb{color:var(--faint);font-size:12.5px}
.bar .sp{margin-left:auto}
.body{padding:28px;flex:1}
.narrow{max-width:620px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:transparent;color:var(--text);border-radius:5px;padding:8px 15px;
  font:500 12.5px/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:.15s}
.btn:hover{border-color:var(--rose);color:var(--rose);background:rgba(217,163,160,.10)}
.btn.key{background:var(--rose);border-color:var(--rose);color:#20110F}
.btn.key:hover{background:var(--rose-soft);border-color:var(--rose-soft);color:#20110F}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.danger{color:var(--bad);border-color:rgba(224,138,128,.35)}
.btn.danger:hover{background:rgba(224,138,128,.14);border-color:var(--bad);color:var(--bad)}
.btn[disabled]{opacity:.38;pointer-events:none}

/* Matched by exclusion rather than by listing the text-ish types: an <input> with no type
   attribute is a text field, and no input[type=text] selector matches it. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
select,textarea{width:100%;background:var(--ground-3);
  border:1px solid var(--line);color:var(--text);border-radius:5px;padding:9px 12px;
  font:400 13.5px/1.5 var(--sans)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(217,163,160,.18)}
textarea{min-height:110px;resize:vertical}
label{display:block;font:600 9.5px/1.6 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin:15px 0 6px}
::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.5)}

.card{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:23px 25px;margin-bottom:18px}
.card h2{font:400 20px/1.25 var(--serif);margin:0 0 14px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 200px}
.stack{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.flash{background:var(--ground-2);border:1px solid var(--line);
  border-left:2px solid var(--rose);border-radius:5px;padding:12px 16px;margin:0 0 16px;
  font-size:13.5px;color:var(--muted)}

/* ---------- the allowance meter ---------- */
.meter{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 19px;margin-bottom:20px;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap}
.meter .lab{font-size:13px;color:var(--muted)}
.meter .lab b{color:var(--text);font-weight:600}
.meter .track{flex:1;min-width:140px;height:5px;border-radius:3px;
  background:rgba(242,235,238,.09);overflow:hidden}
.meter .track i{display:block;height:100%;background:var(--rose)}
.meter .track i.warn{background:var(--warn)}
.meter .track i.over{background:var(--bad)}

/* ---------- weddings ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.wed{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;display:block;transition:.18s}
.wed:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.wed .still{aspect-ratio:16/10;position:relative;background:#0A070C;display:block}
.wed .still img{width:100%;height:100%;object-fit:cover}
.wed .pill{position:absolute;top:9px;left:9px;font:600 8.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;border-radius:3px;
  background:rgba(10,7,12,.72);backdrop-filter:blur(6px);color:var(--muted)}
.wed .pill.live{color:var(--ok)}
.wed .pill.archived{color:var(--warn)}
.wed .in{padding:13px 15px 15px;display:block}
.wed b{display:block;font:400 17px/1.25 var(--serif);margin-bottom:3px;color:var(--text)}
.wed span{display:block;font-size:11.5px;color:var(--faint)}
.wed .nums{margin-top:10px;display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty h2{font:400 24px/1.3 var(--serif);margin-bottom:8px;color:var(--text)}

/* ---------- films ---------- */
.films{display:flex;flex-direction:column;gap:9px}
.film{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--ground-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.film:hover{border-color:var(--line-2)}
.film .th{width:80px;aspect-ratio:16/9;border-radius:3px;flex:none;background:#0A070C;
  overflow:hidden}
.film .th img{width:100%;height:100%;object-fit:cover}
.film .nm{flex:1 1 160px;min-width:0;overflow:hidden}
.film .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film .nm b{display:block;font-weight:500;font-size:13.5px}
.film .nm span{font-size:11.5px;color:var(--faint)}
.tag{font:600 8.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  padding:5px 8px;border-radius:3px;background:rgba(217,163,160,.16);color:var(--rose);
  flex:none;white-space:nowrap}
.tag.ok{background:rgba(143,208,166,.14);color:var(--ok)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--muted);word-break:break-all}
.code{font:600 21px/1 var(--sans);letter-spacing:.3em;color:var(--rose)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font:600 9.5px/1.6 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);padding:0 10px 10px;
  border-bottom:1px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
summary{color:var(--faint)}
summary:hover{color:var(--rose)}
.small{font-size:12.5px} .muted{color:var(--muted)} .faint{color:var(--faint)}

/* ---------- owner ---------- */
/* A rose rule down the sidebar: the owner view crosses studios, and should never be mistaken
   for a single studio's admin at a glance. */
.side.owner{box-shadow:inset -2px 0 0 var(--rose)}
.tag.bad{background:rgba(224,138,128,.16);color:var(--bad)}
.tag.warn{background:rgba(224,185,114,.15);color:var(--warn)}
a.film.link{text-decoration:none;color:inherit}
a.film.link:hover{border-color:var(--line-2)}
.film .nm .mono{display:block;font-size:11px;margin-top:2px}
.due{font:600 12px/1 var(--sans);color:var(--muted);white-space:nowrap}
.due.soon{color:var(--warn)}
.due.over{color:var(--bad)}
.due.big{font-size:14px;letter-spacing:.02em}
.urgent-card{border-color:rgba(224,138,128,.28)}
.facts{display:grid;grid-template-columns:120px 1fr;gap:9px 16px;margin:0;font-size:13.5px}
.facts dt{color:var(--faint);font:600 9.5px/2 var(--sans);letter-spacing:.16em;
  text-transform:uppercase}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.steps{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:0 0 0 38px;font-size:13.5px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  font:600 11px/1 var(--sans);color:var(--muted)}
.steps li.done::before{content:'✓';background:rgba(143,208,166,.14);border-color:transparent;
  color:var(--ok)}
.steps li b{display:block;font-weight:600;margin-bottom:2px}
.steps li span{display:block;color:var(--muted);font-size:12.5px}
.steps li form{margin-top:8px}
.log{white-space:pre-wrap;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);background:var(--ground-3);border-radius:5px;padding:12px 14px;margin:0;
  max-height:320px;overflow:auto}
label.check{display:flex;align-items:center;gap:8px;margin:0;text-transform:none;
  letter-spacing:0;font:400 13px/1 var(--sans);color:var(--muted)}
.btn.danger-key{background:var(--bad);border-color:var(--bad);color:#1A0E0C}
.btn.danger-key:hover{background:#EBA196;border-color:#EBA196;color:#1A0E0C}
.suspended-bar{background:rgba(224,138,128,.12);border:1px solid rgba(224,138,128,.3);
  color:var(--text);border-radius:5px;padding:12px 16px;margin:0 0 16px;font-size:13.5px}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px;
    gap:4px;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
  .side .grp,.side .foot{display:none}
  .side .brand{padding:0 12px 0 6px}
  .body{padding:18px}
  .bar{padding:14px 18px}
}

/* The SiteDock note in the sidebar foot runs straight on from the storage line otherwise. */
.side .foot small{display:block;margin-top:8px;font-size:10.5px;line-height:1.5;
  color:var(--faint)}
.side .foot small a{color:var(--muted)}

/* ---------- dropping a master in ---------- */
/* The dashed edge is the one place in the admin that uses one: it is the affordance that
   says "that empty space is a target", and nothing else here is a target. */
.upload{margin-top:18px;border:1px dashed var(--line-2);border-radius:var(--radius);
  padding:22px;background:var(--ground-2);transition:.18s}
.upload.over{border-color:var(--rose);background:rgba(217,163,160,.07)}
.upload.working{border-style:solid}
.up-lead{margin:0;display:flex;flex-direction:column;gap:5px}
.up-lead b{font:600 14px/1.4 var(--sans)}
.up-lead span{color:var(--faint);font-size:13px;line-height:1.6;max-width:70ch}
.up-lead a{color:var(--rose)}
.up-row{display:flex;align-items:center;gap:16px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:14px}
.up-name{flex:1 1 240px;min-width:0}
.up-name b{display:block;font:500 13.5px/1.4 var(--sans);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.up-name span{display:block;font-size:12px;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.up-bar{flex:1 1 200px;height:4px;border-radius:999px;background:var(--ground-3);
  overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--rose);
  transition:width .25s ease}
.up-row.ok .up-bar i{background:var(--ok)}
.up-row.ok .up-name span{color:var(--ok)}
.up-row.bad .up-bar i{background:var(--bad);width:100%}
.up-row.bad .up-name span{color:var(--bad)}
@media (max-width:700px){.up-row{flex-wrap:wrap;gap:8px}.up-bar{flex-basis:100%}}

/* A URL meant to be copied into someone else's dashboard: selectable, wrapping, and
   plainly a value rather than prose. */
code.hook{display:block;background:var(--ground-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;font:500 12.5px/1.5 ui-monospace,
  SFMono-Regular,Menlo,monospace;word-break:break-all;user-select:all;color:var(--muted)}
.tag.price{background:rgba(217,163,160,.16);color:var(--rose)}
.upload.nolib{border-style:solid;border-color:var(--line);background:transparent}
.upload.nolib .up-lead a{color:var(--rose)}

/* ---------- a page of docs ---------- */
/* Measured for reading rather than for scanning, which is what the rest of the admin is
   laid out for. */
.doc{max-width:74ch}
.doc h1{font-family:var(--serif);font-size:30px;margin:0 0 16px}
.doc h2{font-family:var(--serif);font-size:21px;margin:34px 0 10px}
.doc p{color:var(--muted);line-height:1.75;margin:0 0 14px}
.doc ul,.doc ol{color:var(--muted);line-height:1.75;margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:7px}
.doc a{color:var(--rose)}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--ground-3);padding:2px 5px;border-radius:3px;color:var(--text)}
.doc pre{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.doc pre code{background:none;padding:0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.doc blockquote{margin:0 0 18px;padding:14px 16px;border-left:2px solid var(--rose);
  background:rgba(217,163,160,.07);border-radius:0 var(--radius) var(--radius) 0}
.doc blockquote p:last-child{margin:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:13.5px}
.doc th{text-align:left;font:600 9.5px/1.6 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);
  padding:0 12px 8px 0}
.doc td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top}
.doc em{font-style:italic;color:var(--text)}

/* ---------- watching a film in the admin ---------- */
.watch-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
.watch video{width:100%;display:block;margin:18px 0 0;background:#000;
  border-radius:var(--radius);aspect-ratio:16/9}
.watch-bar{display:flex;gap:22px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
.watch-now{flex:0 0 190px}
.watch-now .shot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);margin-top:7px;background:#0A070C}
.watch-act{flex:1 1 260px}
.watch-say{display:block;margin-top:9px}
.watch-say.ok{color:var(--ok)}
.watch-say.bad{color:var(--bad)}
/* The still is a link now, so it should look like one under the cursor. */
.film a.th{position:relative;display:block;text-decoration:none}
.film a.th .th-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(10,7,12,.45);transition:.16s;border-radius:3px}
.film a.th .th-play svg{width:13px;height:13px;fill:#fff}
.film a.th:hover .th-play{opacity:1}
.film .nm b a{text-decoration:none;color:inherit}
.film .nm b a:hover{color:var(--rose)}

/* ---------- the films, as stills ---------- */
/* A film is a picture. The old row -- stamp-sized thumbnail, then text, then eight
   buttons -- made you read titles to find the one you meant, when you already knew what
   it looked like. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
/* No overflow:hidden here. The rounding belongs to the still inside, because the menu is
   a child of this and has to be able to open past the card's edge -- clipped to the card,
   it lost its first four items behind the row above. */
.tile{position:relative;border-radius:var(--radius);background:#0A070C;
  aspect-ratio:16/9;transition:.18s}
.tile:hover{box-shadow:0 14px 34px rgba(0,0,0,.5)}
.tile.off{opacity:.55}
.shotlink{position:absolute;inset:0;display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius);overflow:hidden}
.shotlink img{width:100%;height:100%;object-fit:cover}
/* A scrim only where the words are, so the still is not dimmed for nothing. */
.shotlink::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}
.tile-name{position:absolute;left:14px;right:56px;bottom:11px;z-index:1;display:block}
.tile-name b{display:block;font:600 15px/1.3 var(--sans);color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tile-name span{display:block;font-size:11.5px;color:rgba(255,255,255,.68);margin-top:2px}
.tile-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:1;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;opacity:0;
  border:1px solid rgba(255,255,255,.55);background:rgba(10,7,12,.4);transition:.18s}
.tile-play svg{width:13px;height:13px;margin-left:2px;fill:#fff}
.tile:hover .tile-play{opacity:1}
/* Right-hand gap kept clear for the drag handle, which sits in that corner. */
.tile-tags{position:absolute;top:10px;left:10px;right:48px;z-index:2;display:flex;
  flex-wrap:wrap;gap:6px}

/* The drag handle. Quiet until the card is under the pointer: the still is the thing to
   look at, and a grip at full strength on every card turns the grid into a control panel. */
.grip{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:28px;padding:0;
  border:0;border-radius:5px;cursor:grab;opacity:0;transition:.16s;font-size:14px;
  line-height:1;background:rgba(10,7,12,.6);color:#fff;backdrop-filter:blur(8px);
  touch-action:none}
.tile:hover .grip,.grip:focus-visible{opacity:1}
.grip:hover{background:var(--rose);color:#20110F}
.tile.held{opacity:.45}
.tile.held .grip{cursor:grabbing;opacity:1;background:var(--rose);color:#20110F}
/* Mid-drag the stills must not take the pointer: each one is a link, and passing over it
   on the way past would otherwise arm a click on a film you were only moving around. */
.tiles.sorting{cursor:grabbing}
.tiles.sorting .shotlink,.tiles.sorting .menu{pointer-events:none}

/* A section that is there when it is wanted and out of the way when it is not. */
.tuck{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.tuck summary{cursor:pointer;list-style:none;padding:4px 0;color:var(--muted);
  font:500 13px/1.4 var(--sans)}
.tuck summary::-webkit-details-marker{display:none}
.tuck summary::before{content:'+ ';color:var(--rose)}
.tuck[open] summary::before{content:'– '}
.tuck summary:hover{color:var(--text)}

/* The one button on a card, and what it opens. */
.menu{position:absolute;right:10px;bottom:10px;z-index:3}
.dots{width:34px;height:28px;border-radius:5px;border:0;cursor:pointer;padding:0;
  background:rgba(10,7,12,.6);color:#fff;font-size:13px;line-height:1;letter-spacing:1px;
  backdrop-filter:blur(8px);transition:.16s}
.dots:hover,.menu.open .dots{background:var(--rose);color:#20110F}
.menu-pop{position:absolute;right:0;bottom:34px;min-width:216px;z-index:4;
  background:var(--ground-2);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:5px;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.menu-pop a,.menu-pop button{display:block;width:100%;text-align:left;border:0;
  background:none;color:var(--muted);font:500 13px/1.4 var(--sans);padding:8px 10px;
  border-radius:4px;cursor:pointer;text-decoration:none}
.menu-pop a:hover,.menu-pop button:hover{background:var(--ground-3);color:var(--text)}
.menu-pop button.bad{color:var(--bad)}
.menu-pop button.bad:hover{background:rgba(224,138,128,.14)}
.menu-rule{height:1px;background:var(--line);margin:5px 0}
/* Near the right edge the menu would otherwise hang off the page. */
.tiles .tile:last-child .menu-pop,.menu-pop{right:0}
@media (max-width:620px){.tiles{grid-template-columns:1fr}}

/* ---------- what is sitting in Bunny ---------- */
.stat{flex:1 1 180px;background:var(--ground-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px}
.stat b{display:block;font:400 26px/1.2 var(--serif);margin:5px 0 3px}
.stat.warn{border-color:rgba(224,185,114,.4)}
.stat.warn b{color:var(--warn)}
/* The id column is a 36-character string with no spaces. Squeezed, the browser breaks it
   one character per line and the table becomes a column of letters, so it is told not to
   wrap and the table scrolls instead. */
/* Named "ledger", not "grid": .grid is already a display:grid layout utility in this
   file, and a <table> set to display:grid stops being a table -- the header and the body
   lay themselves out independently and the columns drift apart. */
.ledgerwrap{overflow-x:auto;margin-top:4px}
table.ledger{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
/* Header and body have to carry the same sizing rules or the columns drift apart. */
table.ledger th:first-child,table.ledger td:first-child{min-width:200px}
table.ledger th{white-space:nowrap}
table.ledger th{text-align:left;font:600 9.5px/1.6 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);
  padding:0 14px 9px 0}
table.ledger td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  color:var(--muted);vertical-align:middle}
table.ledger td b{color:var(--text);font-weight:500}
table.ledger tr.stray td{background:rgba(224,185,114,.05)}
table.ledger td.mono{font-size:11.5px}
table.ledger td:not(:first-child){white-space:nowrap}

/* ---------- things that cannot be undone ---------- */
.danger-card{border-color:rgba(224,138,128,.34)}
.danger-card h2{color:var(--bad)}
.btn.danger-key{background:var(--bad);border-color:var(--bad);color:#1A0E0C}
.btn.danger-key:hover{background:#EBA196;border-color:#EBA196;color:#1A0E0C}
.menu-pop a.bad{color:var(--bad)}
.menu-pop a.bad:hover{background:rgba(224,138,128,.14)}
.pick{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pickrow{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;margin:0;
  text-transform:none;letter-spacing:0;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--line);color:var(--muted)}
.pickrow:last-child{border-bottom:0}
.pickrow:hover{background:var(--ground-3)}
.pickrow input{margin-top:2px;flex:none}
.pickrow b{display:block;color:var(--text);font-weight:500}
.pickrow .faint{display:block;margin-top:2px;font-size:11.5px;word-break:break-all}
.stat.big b{font-size:32px;color:var(--rose)}
.stat .faint i{font-style:italic}

/* The sidebar's storage line is a link to the page that measured it. */
.side .foot a{color:var(--faint);text-decoration:none;border-bottom:1px solid transparent}
.side .foot a:hover{color:var(--rose);border-bottom-color:rgba(217,163,160,.4)}

/* ---------- a film Bunny has not finished with ---------- */
.encoding{margin-top:18px;background:var(--ground-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px}
.encoding b{display:block;font:500 15px/1.4 var(--sans)}
.encoding p{max-width:62ch}
.encoding form{margin-top:4px}
.meter{height:6px;border-radius:3px;background:var(--ground-3);overflow:hidden;
  margin:12px 0 10px;max-width:420px}
.meter i{display:block;height:100%;background:var(--rose);transition:width .3s}