/* dumpsterfire - layout and widgets.
   This file is the modern look: flat, rounded, soft shadows. Colours come from the active theme in themes/*.css;
   retro themes @import themes/_bevel.css to turn the same elements into classic 3D ones. */
:root {
  --radius: 8px;
  --font: 14px "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: 13px "Cascadia Code", Consolas, monospace;
  /* edges of buttons / fields / cards; bevel themes swap these for 3D ones */
  --raised: inset 0 0 0 1px var(--shadow);
  --pressed: inset 0 0 0 1px var(--dark);
  --sunken: inset 0 0 0 1px var(--shadow);
  --etched: inset 0 0 0 1px var(--shadow);
  --win-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  --crumb-sep: "\203A";
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--face);
  color: var(--text);
  font: var(--font);
  user-select: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* icons: shapes from icons.css (or the theme) used as a mask over the icon colour; see tools/build_icons.py */
.ic { display: inline-block; position: relative; width: 16px; height: 16px; vertical-align: middle; flex: none;
  background-color: var(--ic-tint, var(--icon-ink, var(--text)));
  -webkit-mask: var(--ic, linear-gradient(transparent, transparent)) center / contain no-repeat;
  mask: var(--ic, linear-gradient(transparent, transparent)) center / contain no-repeat; }
.ic.ico32 { width: 32px; height: 32px; }
.ic.mi { --ic-tint: currentColor; width: 24px; height: 24px; display: block; }
.ic.mi[data-icon] { --ic-tint: currentColor; } /* glyphs (top bar, phone bar, menus) always take the text colour; icons.css would tint some */
/* locked folders: a padlock in the corner */
.ic[data-icon="folderlock"] { -webkit-mask: none; mask: none; background: none; }
.ic[data-icon="folderlock"]::before, .ic[data-icon="folderlock"]::after { content: ""; position: absolute; inset: 0;
  background-color: var(--ic-tint); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic[data-icon="folderlock"]::after { --ic: var(--i-lock); --ic-tint: var(--icon-ink, var(--text)); inset: auto -2px -1px auto; width: 62%; height: 62%; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; } /* buttons are display:flex, which would otherwise beat the hidden attribute */

/* ---------- controls ---------- */
.sunken { box-shadow: var(--sunken); background: var(--field); }

button {
  font: var(--font);
  color: var(--text);
  background: var(--field);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--raised);
  padding: 6px 14px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--hover); }
button:active:not(:disabled) { box-shadow: var(--pressed); }
button:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
button:disabled { color: var(--disabled); cursor: default; }
button:disabled img { filter: grayscale(1) opacity(.45); }
button.default { background: var(--sel); color: var(--sel-text); box-shadow: none; }
button.default:hover:not(:disabled) { background: var(--sel); filter: brightness(1.08); }
.iconbtn { background: none; box-shadow: none; width: 36px; height: 36px; min-height: 0; padding: 0; flex: none; }

input[type=text], input[type=password], input[type=number], select {
  font: var(--font);
  color: var(--text);
  background: var(--field);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--sunken);
  padding: 5px 10px;
  height: 32px;
  outline: none;
  user-select: text;
}
input:focus, select:focus { box-shadow: var(--sunken), 0 0 0 2px var(--sel); }
input::placeholder { color: var(--muted); opacity: .8; }
fieldset.group { margin: 0; padding: 8px 14px 12px; border: none; border-radius: var(--radius); box-shadow: var(--etched); }
fieldset.group legend { padding: 0 4px; color: var(--muted); }
.form { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }

/* ---------- app shell: top bar, action row, panes, status line ---------- */
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }
body.guest #app { visibility: hidden; }

.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; flex: none; }
#crumbs { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 2px; padding: 0 6px;
  background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); overflow: hidden; white-space: nowrap; }
#crumbs a { color: var(--text); text-decoration: none; padding: 4px 6px; border-radius: calc(var(--radius) * .6); }
#crumbs a:hover { background: var(--hover); }
#crumbs a:last-child { font-weight: 600; }
#crumbs .slash::before { content: var(--crumb-sep); color: var(--muted); padding: 0 1px; }
#crumbs .ic { margin: 0 4px 0 2px; }
#searchbox { position: relative; flex: none; }
#searchbox::before { content: ""; position: absolute; left: 11px; top: 11px; width: 9px; height: 9px; border: 1.6px solid var(--muted); border-radius: 50%; pointer-events: none; }
#searchbox::after { content: ""; position: absolute; left: 21px; top: 21px; width: 5px; height: 1.6px; background: var(--muted); transform: rotate(45deg); pointer-events: none; }
#filter { width: 260px; height: 36px; padding-left: 32px; }
.topbar .iconbtn:hover:not(:disabled) { background: var(--hover); }
.topbar .iconbtn:disabled { opacity: .35; }
.topbar .mi { width: 20px; height: 20px; }

.caret { display: flex; margin: 0 -4px 0 -2px; opacity: .7; }
.caret .mi { width: 14px; height: 14px; }

/* search results bar */
#searchbar { display: flex; align-items: center; gap: 12px; margin: 0 12px 8px; padding: 6px 8px 6px 14px; flex: none;
  background: var(--hover); border-radius: var(--radius); box-shadow: var(--etched); }
#searchbar[hidden] { display: none; }
#sb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#searchbar .seg { padding: 0; flex-wrap: nowrap; }
#searchbar .seg button { min-height: 30px; padding: 4px 12px; }
#searchbar .grow { flex: 1; }
#sb-close { min-height: 30px; }
#who { background: none; box-shadow: none; height: 36px; padding: 0 10px; color: var(--muted); }
#who:hover, #who.open { background: var(--hover); color: var(--text); }

.toolbar { display: flex; align-items: center; gap: 2px; padding: 0 12px 8px; flex: none; overflow: hidden; }
.toolbar button { background: none; box-shadow: none; padding: 6px 10px; min-height: 34px; flex: none; }
.toolbar button:hover:not(:disabled) { background: var(--hover); }
.toolbar .sep { width: 1px; height: 22px; margin: 0 6px; background: var(--shadow); flex: none; }
.toolbar .grow { flex: 1; }
.toolbar .mi { width: 18px; height: 18px; }

.panes { flex: 1; display: flex; min-height: 0; padding: 0 12px; }
.pane { overflow: auto; position: relative; }
#tree { width: 250px; flex: none; padding: 2px 4px 2px 0; background: none; box-shadow: none; }
#splitter { width: 10px; cursor: col-resize; flex: none; }
#files { flex: 1; padding: 4px; background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); }

/* folder tree */
.tn { display: flex; align-items: center; height: 30px; white-space: nowrap; border-radius: var(--radius); padding-right: 8px; cursor: pointer; }
.tn:hover { background: var(--hover); }
.tn.cur { background: var(--sel); color: var(--sel-text); }
.tn.cur .ic, #list tr.sel .ic { --ic-tint: currentColor; } /* icons stay visible on the selection colour */
.tn .tog { width: 18px; height: 18px; flex: none; margin: 0 2px 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.tn .tog::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); opacity: .6; transition: transform .12s; }
.tn .tog.open::before { transform: rotate(45deg); }
.tn .tog.none { visibility: hidden; }
.tn .lbl { padding: 2px 4px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; }
.tsep { height: 1px; margin: 10px 8px; background: var(--shadow); }
.tacct { display: none; }
.tacct-name { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--muted); }

/* file list */
#list { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#list col.c-size { width: 110px; }
#list col.c-type { width: 170px; }
#list col.c-date { width: 160px; }
#list th {
  position: sticky; top: -4px; z-index: 1;
  background: var(--field);
  box-shadow: inset 0 -1px var(--shadow);
  color: var(--muted);
  font-weight: 600;
  font-size: .92em;
  text-align: left;
  padding: 6px 10px;
  height: 34px;
  white-space: nowrap;
  cursor: pointer;
}
#list th:hover { color: var(--text); }
#list th.asc::after { content: " \25B4"; }
#list th.desc::after { content: " \25BE"; }
#list td { padding: 0 10px; height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
#list td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
#list td.num { text-align: right; }
#list td.name { display: flex; align-items: center; gap: 8px; }
#list td.name span { overflow: hidden; text-overflow: ellipsis; }
#list tbody tr:hover td { background: var(--hover); }
#list tr.sel td, #list tbody tr.sel:hover td { background: var(--sel); color: var(--sel-text); }
#list tr.sel td.dsize, #list tr.sel td.snip { color: inherit; opacity: .8; }
#list tr.focus td:first-child { box-shadow: inset 3px 0 var(--sel); }
#list tr.sel.focus td:first-child { box-shadow: inset 3px 0 var(--sel-text); }
#list tr.cut td, .gi.cut { opacity: .5; }
.droptarget td, .tn.droptarget, .gi.droptarget { background: var(--hover); box-shadow: inset 0 0 0 2px var(--sel); }

/* grid view */
#grid { display: none; }
#files.grid #list { display: none; }
#files.grid #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; padding: 6px; align-content: start; }
.gi { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; text-align: center; min-width: 0; border-radius: var(--radius); }
.gi .tbox { width: 100px; height: 80px; display: flex; align-items: center; justify-content: center; }
.gi .thumb { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(var(--radius) * .6); background: var(--light); }
/* video thumbnails get a play badge so they don't pass for photos */
.gi .tbox.video { position: relative; }
.gi .tbox.video:has(.thumb)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center / 20px no-repeat; pointer-events: none; }
.gi span { padding: 1px 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.gi:hover { background: var(--hover); }
.gi.sel, .gi.sel:hover { background: var(--sel); color: var(--sel-text); }
.gi.focus { box-shadow: inset 0 0 0 2px var(--sel); }

/* recycle bin and other list panels */
.trash-win .body { display: flex; flex-direction: column; gap: 10px; }
.trash-list { flex: 1; overflow: auto; background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); }
.tlist { width: 100%; border-collapse: collapse; }
.tlist th { position: sticky; top: 0; background: var(--field); box-shadow: inset 0 -1px var(--shadow); color: var(--muted); font-weight: 600; font-size: .92em; text-align: left; padding: 8px 10px; }
.tlist td { padding: 6px 10px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--light); }
/* the name cell stays a real table cell (display:flex would pull it out of the row: short underline, misaligned) */
.tlist td.name > * { vertical-align: middle; }
.tlist td.name > * + * { margin-left: 8px; }
.tlist td, .tlist th { vertical-align: middle; }
.tlist td.num, .tlist th.num { text-align: right; }
.tlist td.none { color: var(--muted); text-align: center; padding: 24px; }
.tlist tr.sel td { background: var(--sel); color: var(--sel-text); }
.trash-win .buttons { display: flex; gap: 8px; }
.trash-win .buttons .grow { flex: 1; }
.trash-win .buttons button { min-width: 88px; }

#empty { display: none; padding: 40px; text-align: center; color: var(--muted); }
#files.is-empty #empty { display: block; }

#dropveil {
  display: none;
  position: absolute; inset: 0;
  z-index: 5;
  background: var(--veil);
  outline: 2px dashed var(--sel);
  outline-offset: -8px;
  border-radius: var(--radius);
  align-items: center; justify-content: center;
}
#files.dragover #dropveil { display: flex; }
#dropveil-text { display: flex; gap: 12px; align-items: center; background: var(--field); box-shadow: var(--raised), var(--win-shadow); border-radius: var(--radius); padding: 16px 24px; }

/* ---------- status line ---------- */
.statusbar { display: flex; gap: 18px; padding: 6px 14px 8px; flex: none; color: var(--muted); font-size: .92em; }
.statusbar .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar .grow { flex: 1; }
#s-sel:empty, #s-free:empty { display: none; }

/* ---------- logon ---------- */
#logon { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; padding: 16px; background: var(--face); }
body.guest #logon { display: flex; }
#logon .card { width: 360px; max-width: 100%; display: flex; flex-direction: column; padding: 28px; gap: 6px;
  background: var(--field); border-radius: calc(var(--radius) * 1.5); box-shadow: var(--raised), var(--win-shadow); }
.logon-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.logon-head h1 { margin: 0; font-size: 24px; }
.logon-head .logo { width: 48px; height: 48px; flex: none; }
#logon-nas { color: var(--muted); }
.avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; flex: none; }
#who .avatar { margin-right: 6px; }
.avatar-form { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.avatar-preview { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.avatar-preview .ic { width: 64px; height: 64px; }
.avatar.big { width: 96px; height: 96px; }
.avatar-btns { display: flex; gap: 8px; }
#logon label { color: var(--muted); font-size: .92em; margin-top: 6px; }
#logon input { width: 100%; height: 40px; }
#logon-err { color: var(--error); min-height: 20px; padding: 6px 0 2px; }
#logon button { height: 40px; }

/* ---------- menus ---------- */
.menu {
  display: none;
  position: fixed;
  background: var(--field);
  border-radius: var(--radius);
  box-shadow: var(--raised), var(--win-shadow);
  padding: 4px;
  z-index: 200;
}
.menu.open { display: flex; }
#ctxmenu { flex-direction: column; min-width: 220px; }
.mi:not(.ic) { display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 6px; white-space: nowrap; border-radius: calc(var(--radius) * .6); cursor: pointer; }
.mi .chk { width: 16px; text-align: center; flex: none; }
.mi .lbl { flex: 1; }
.mi .key { padding-left: 24px; color: var(--muted); }
.mi:not(.ic):hover:not(.disabled) { background: var(--hover); }
.mi.disabled { color: var(--disabled); cursor: default; }
.mi.bold { font-weight: bold; }
.msep { height: 1px; margin: 4px 6px; background: var(--shadow); }

/* ---------- panels and dialogs: a header row (back / title / actions), no window chrome ---------- */
.window { display: flex; flex-direction: column; background: var(--face); }
.phead { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px 8px; min-height: 50px; flex: none; }
.phead .title { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead .grow { flex: 1; }
.phead .pacts { display: flex; gap: 4px; }
.phead .iconbtn:hover:not(:disabled) { background: var(--hover); }

body.has-docked #files { display: none; }
.window.docked { flex: 1; min-width: 0; width: auto; height: auto; background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); }
.docked .body { padding: 4px 14px 14px; flex: 1; min-height: 0; }

.float { position: fixed; z-index: 50; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  background: var(--field); border-radius: calc(var(--radius) * 1.5); box-shadow: var(--raised), var(--win-shadow); }
.float .phead { padding: 12px 10px 2px 20px; }
.float .body { padding: 8px 20px 16px; flex: 1; min-height: 0; }
.float.dialog { box-shadow: var(--raised), var(--win-shadow), 0 0 0 100vmax rgba(0,0,0,.3); } /* dims the page behind */
.dialog .body { display: flex; gap: 16px; align-items: flex-start; min-width: 360px; }
.dialog .body > .ico32 { display: none; } /* message-box icons are a retro thing; bevel themes bring them back */
.dialog .msg { flex: 1; line-height: 1.5; white-space: pre-wrap; user-select: text; }
.dialog .msg input { width: 100%; margin-top: 10px; }
.dialog .msg input[type=checkbox] { width: auto; margin: 0; }
.dialog .buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 20px 18px; }
.dialog .buttons button { min-width: 90px; }



/* uploads panel: bottom right, doesn't block the rest of the app */
.bar { height: 22px; box-shadow: var(--sunken); padding: 3px; background: var(--field); }
.bar i { display: block; height: 100%; width: 0; background: var(--sel); transition: width .2s; }
.uploads-win { width: 460px; right: 12px; bottom: 36px; }
.uploads-win .body { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.uploads-win.min .body { display: none; }
.uploads-win .ustats { color: var(--muted); }
.uploads-win .ubtns { display: flex; gap: 6px; }
.uploads-win .ubtns .grow { flex: 1; }
.uploads-win .rows { max-height: 240px; overflow: auto; background: var(--field); padding: 2px; }
.urow { display: flex; align-items: center; gap: 8px; padding: 3px 4px; }
.urow .uinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.urow .un { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow .sbar { height: 7px; padding: 1px; }
.urow .st { width: 110px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: .92em; }
.urow .uacts { display: flex; gap: 2px; }
.urow .uacts button { min-height: 0; width: 24px; height: 22px; padding: 0; justify-content: center; font-size: 11px; }
.urow.error .st { color: var(--error); }
.urow.done .sbar i { background: var(--muted); }
.urow.cancelled { opacity: .55; }
.urow.paused .sbar i { opacity: .5; }

/* toast with undo */
#toast { position: fixed; left: 50%; bottom: 40px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; width: max-content;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px;
  background: var(--face); color: var(--text); box-shadow: var(--raised), 0 6px 18px rgba(0,0,0,.25); border-radius: var(--radius);
  transition: opacity .15s, transform .15s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast .tmsg { overflow: hidden; text-overflow: ellipsis; }
#toast button { flex: none; }
#toast .tx { min-height: 0; width: 24px; height: 24px; padding: 0; justify-content: center; }

.brform label.chk { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* list: folder sizes, content search snippets */
#list td.dsize { color: var(--muted); }
#list td.snip { font: var(--mono); font-size: 12px; color: var(--muted); }

/* bulk rename */
.brform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.br-preview { max-height: 220px; overflow: auto; background: var(--field); padding: 4px 6px; white-space: nowrap; font-size: .95em; }
.br-preview div { display: flex; gap: 8px; padding: 1px 0; }
.br-preview span:first-child { flex: 0 1 45%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.br-preview .arrow { color: var(--muted); }
.br-preview .err b { color: var(--error); }

/* shares: lock badge; activity log */
.tlist .lock img { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.activity-win .vbar { display: flex; gap: 8px; align-items: center; }
.activity-win .vbar input { width: 260px; max-width: 50vw; }
.activity-win .vbar .grow { flex: 1; }
.activity-win .muted, .list-win .hint { color: var(--muted); }
.tlist td.when, .tlist td.ip { white-space: nowrap; color: var(--muted); }
.tlist td.what { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlist tr.bad td { color: var(--error); }

/* keyboard shortcuts */
.shortcuts { overflow: auto; height: 100%; }
.shortcuts h3 { margin: 4px 0 6px; font-size: 1em; }
.shortcuts table { border-collapse: collapse; margin-bottom: 14px; }
.shortcuts td { padding: 3px 14px 3px 0; vertical-align: top; }
.shortcuts td:first-child { white-space: nowrap; }
kbd { font: var(--mono); font-size: 12px; padding: 1px 6px; background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--shadow); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--dark); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: var(--shadow) transparent; scrollbar-width: thin; } }
/* ---------- appearance panel ---------- */
.appearance .body { display: flex; flex-direction: column; gap: 10px; }
.appearance fieldset.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.theme-cards { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.theme-card { flex-direction: column; align-items: flex-start; gap: 3px; width: 190px; padding: 10px 12px; text-align: left; }
.theme-card small { color: var(--muted); }
.theme-card.on { box-shadow: var(--pressed), 0 0 0 2px var(--sel); }
.swatches { display: flex; gap: 3px; margin-bottom: 4px; }
.swatches i { width: 22px; height: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); border-radius: var(--radius); }
.appearance .buttons { display: flex; gap: 6px; }
.appearance .buttons .grow { flex: 1; }
.appearance .buttons button { min-width: 88px; justify-content: center; }

/* ---------- small screens / touch ---------- */
/* phone-only chrome stays hidden on desktop */
#b-tree, #b-search, #m-title, #mbar, #sheetveil, #tree-veil { display: none; }
#list td.name .sub { display: none; }

@media (max-width: 700px) {
  #app { padding: env(safe-area-inset-top) 0 0; }
  body, button, select, .mi { font-size: 15px; }
  input[type=text], input[type=password], input[type=number], textarea { font-size: 16px; } /* stops iOS zooming on focus */

  /* top bar: folders · title · search · more; breadcrumbs (or the search field) wrap onto a second row */
  .topbar { flex-wrap: wrap; gap: 0; padding: 0 4px; }
  #b-tree, #b-search { display: flex; width: 44px; height: 48px; }
  #b-back, #b-fwd, #b-up, #b-refresh { display: none; }
  .tacct { display: block; }
  .iconbtn:active { background: var(--hover); }
  #m-title { display: block; flex: 1; min-width: 0; padding: 0 6px; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #who { display: none; }
  #crumbs { order: 5; flex: 1 0 100%; height: 38px; margin: 0 4px 4px; padding: 0; background: none; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
  #crumbs::-webkit-scrollbar { display: none; }
  #crumbs a { padding: 8px 6px; }
  #crumbs img { display: none; }
  /* the title already names this folder: the crumbs only show the way back up (and nothing at the top) */
  #crumbs { height: 30px; margin: -4px 4px 4px; font-size: 13px; color: var(--muted); }
  #crumbs a { padding: 4px 6px; color: inherit; }
  #crumbs > a:last-child, #crumbs > .slash:has(+ a:last-child) { display: none; }
  #crumbs:not(:has(.slash)) { display: none; }
  #crumbs > .ic { width: 14px; height: 14px; margin-left: 6px; opacity: .8; }
  #searchbox { display: none; order: 6; flex: 1 0 calc(100% - 16px); margin: 0 8px 8px; }
  #filter { width: 100%; height: 40px; }
  #searchbar { margin: 0 8px 6px; gap: 8px; flex-wrap: wrap; padding: 8px 10px; }
  #sb-text { flex: 1 0 100%; }
  #searchbar .seg { flex: 1; }
  #searchbar .seg button { flex: 1; min-height: 38px; }
  #searchbar .grow { display: none; }
  #sb-close { min-height: 38px; }
  body.searching #searchbox { display: block; }
  body.searching #crumbs { display: none; }

  /* the desktop action row and status line make way for the bottom bar */
  .toolbar, .statusbar { display: none; }
  /* file area runs edge to edge */
  .panes { position: relative; padding: 0; border-top: 1px solid var(--light); }
  #files { box-shadow: none; padding: 0; border-radius: 0; }
  #splitter { display: none; }

  /* folder tree becomes a drawer that slides in over the whole screen (top and bottom bars too).
     "body #tree" so the themes' desktop tree styling (sunken boxes etc.) can't leak in; they still set the colours */
  body #tree { position: fixed; z-index: 46; top: 0; bottom: 0; left: 0; width: min(84vw, 330px) !important; margin: 0; overflow-y: auto;
    padding: calc(env(safe-area-inset-top) + 12px) 10px calc(env(safe-area-inset-bottom) + 16px); background: var(--face); border: none;
    border-radius: 0 calc(var(--radius) * 2.5) calc(var(--radius) * 2.5) 0; box-shadow: none; visibility: hidden;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s; overscroll-behavior: contain; }
  body.tree-open #tree { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 48px rgba(0,0,0,.3); }
  #tree-veil { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .24s; }
  body.tree-open #tree-veil { opacity: 1; pointer-events: auto; }
  body #tree .tn { height: 44px; border-radius: calc(var(--radius) * 1.5); }
  body #tree .tsep { margin: 10px 10px; }
  body #tree .tacct-name { padding: 8px 10px; }

  /* list: big rows with icon, name and a "size · date" line; the other columns go */
  #list thead { display: none; }
  #list col.c-size, #list col.c-type, #list col.c-date { width: 0; }
  #list td:not(.name) { display: none; }
  #list td { height: auto; padding: 0; }
  #list td.name { display: grid; grid-template-columns: 32px 1fr auto; column-gap: 14px; row-gap: 1px; align-items: center;
    min-height: 58px; padding: 7px 16px; border-bottom: 1px solid var(--light); border-radius: 0; }
  #list td.name > .ic { grid-row: 1 / 3; grid-column: 1; width: 28px; height: 28px; justify-self: center; }
  #list td.name span:not(.ic), #list tbody tr:hover td.name span:not(.ic), #list tr.sel td.name span:not(.ic) { grid-column: 2; padding: 0; background: none; color: inherit; }
  #list td.name .sub { display: block; grid-column: 2; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #list tr.focus td:first-child { box-shadow: none; }
  #list tr.sel td.name { background: var(--sel); color: var(--sel-text); }
  #list tr.sel td.name .sub { color: inherit; opacity: .8; }
  /* selection mode: a tick circle on every row */
  body.selecting #list td.name::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--shadow); }
  body.selecting #list tr.sel td.name::after { content: "\2713"; box-shadow: none; background: var(--sel-text); color: var(--sel); text-align: center; font: bold 14px/22px sans-serif; }

  /* grid: three square tiles a row */
  #files.grid #grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .gi { padding: 2px; gap: 6px; }
  .gi .tbox { width: 100%; height: auto; aspect-ratio: 1; background: var(--light); border-radius: var(--radius); overflow: hidden; }
  .gi .thumb { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
  .gi .tbox .ico32 { width: 40px; height: 40px; }
  .gi span { font-size: 13px; }
  .gi.sel .tbox { filter: none; box-shadow: inset 0 0 0 3px var(--sel); }
  .gi.sel .tbox img { opacity: .75; }

  /* bottom action bar, within reach of your thumb */
  #mbar { display: flex; flex: none; padding: 2px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--shadow); background: var(--face); }
  .mbtn { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 4px 2px;
    background: none; box-shadow: none; font-size: 11.5px; border-radius: var(--radius); }
  .mbtn:active:not(:disabled) { background: var(--hover); box-shadow: none; padding: 4px 2px; }
  .mbtn span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* menus slide up from the bottom as sheets */
  #ctxmenu.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; min-width: 0; max-height: 82vh; overflow-y: auto;
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; box-shadow: 0 -6px 28px rgba(0,0,0,.3);
    animation: sheet-up .18s ease-out; }
  #ctxmenu.sheet::before { content: ""; flex: none; align-self: center; width: 38px; height: 4px; border-radius: 2px; background: var(--shadow); margin: 2px 0 6px; }
  #ctxmenu.sheet > * { flex: none; } /* a scrolling flex column would squash its items */
  .sheet-title { padding: 6px 20px 10px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--light); margin-bottom: 4px; }
  .sheet .mi { padding: 13px 20px 13px 12px; font-size: 16px; }
  .sheet .mi .key { display: none; }
  .sheet .msep { margin: 4px 0; box-shadow: none; height: 1px; background: var(--light); }
  #sheetveil.open { display: block; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.35); }

  /* panels (viewer, recycle bin, settings...) take the whole screen; Back closes them */
  .window.docked { position: fixed; inset: 0; z-index: 40; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-shadow: none; border-radius: 0; background: var(--face); }
  .docked > .phead { padding: 2px 8px 2px 4px; min-height: 52px; }
  .docked > .phead .iconbtn { width: 44px; height: 44px; }
  .docked .body { padding: 8px; }

  /* dialogs: full width, big buttons */
  .float { left: 8px !important; right: 8px; width: auto !important; max-width: none; }
  /* dialogs sit in the upper part of the screen, so the keyboard never covers them or pushes them around;
     a tall one scrolls inside itself */
  .float.dialog { top: calc(env(safe-area-inset-top) + 8vh) !important; bottom: auto; max-height: calc(100dvh - env(safe-area-inset-top) - 8vh - 16px);
    overflow-y: auto; border-radius: calc(var(--radius) * 2); animation: dialog-in .2s ease-out; }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
  .dialog .body { min-width: 0; }
  .dialog .buttons { flex-wrap: wrap; }
  .dialog .buttons button, .buttons button { min-height: 44px; }
  .dialog .buttons button { flex: 1; }
  #logon input, #logon button { height: 46px; }
  .uploads-win { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .urow .st { width: 70px; }
  .urow .uacts button { width: 34px; height: 34px; }
  #toast { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; transform: translateY(20px); }
  #toast.show { transform: none; }
  #toast .tmsg { flex: 1; }
  /* dialogs: drop the big icon, let fields and previews shrink to the screen */
  .dialog .body > .ico32 { display: none; }
  .dialog .msg { min-width: 0; }
  .dialog .form { grid-template-columns: auto minmax(0, 1fr); }
  .dialog .form input, .dialog .form select { width: 100%; min-width: 0; }
  .br-preview { font-size: 13px; }
  body.has-docked #toast { bottom: calc(16px + env(safe-area-inset-bottom)); }

  .theme-card { width: calc(50% - 4px); }
  .trash-win .buttons { flex-wrap: wrap; }
  .tlist th:nth-child(3), .tlist td:nth-child(3) { display: none; }
  .tlist td { padding: 10px 8px; }
  .activity-win .tlist td.ip, .activity-win .tlist th:nth-child(5) { display: none; }
  .activity-win .tlist th:nth-child(3), .activity-win .tlist td:nth-child(3) { display: table-cell; }
}
@keyframes sheet-up { from { transform: translateY(30%); opacity: .5; } }#files, .pv-stage { -webkit-touch-callout: none; } /* no iOS long-press popup over our own menu */
input.secret { -webkit-text-security: disc; text-security: disc; }
.dialog .pwform { margin-top: 12px; } .dialog .pwform input { margin: 0; } .dialog .err { color: var(--error); }

/* ---------- read-only accounts ---------- */
body.readonly [data-write] { display: none !important; }

/* ---------- selects (share / users dialogs) ---------- */
select { font: var(--font); color: var(--text); background: var(--field); border: none; box-shadow: var(--sunken); padding: 4px 6px; height: 28px; border-radius: var(--radius); }
.shareform { margin-top: 12px; }
.shareform select { width: 100%; }


/* ---------- list panels (shares, users, storage) ---------- */
.list-win .body, .storage-win .body { display: flex; flex-direction: column; gap: 8px; }
.tlist td.acts { text-align: right; white-space: nowrap; }
/* shared links: the path takes the spare width (and ellipsizes), the rest stay as narrow as their content */
.shares-win .tlist td.name { width: 100%; max-width: 0; }
.shares-win .tlist td:not(.name) { width: 1%; padding-left: 18px; }
.shares-win .tlist td:not(.name):not(.acts), .shares-win .tlist th { color: var(--muted); }
.shares-win .tlist th:first-child, .shares-win .tlist td.name { color: var(--text); }
.tlist td.acts button { min-height: 24px; padding: 2px 10px; margin-left: 4px; }
.tlist tr.expired td { color: var(--disabled); }
.tlist td select { height: 26px; }
.adduser { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adduser input { width: 160px; }
.list-win .hint { color: var(--muted); }
.storage-win .vbar { display: flex; gap: 8px; align-items: center; }
.storage-win .vbar .grow { flex: 1; }
.storage-win .vbar .muted { color: var(--muted); font-size: .92em; }
.storage-win h3 { margin: 14px 8px 4px; font-size: 1em; }
.storage-win .buttons { display: flex; justify-content: flex-end; }
.tlist tr.clickable { cursor: pointer; }
.tlist tr.clickable:hover td { background: var(--hover); }
.tlist td.barcell { width: 35%; }
.sbar { height: 12px; box-shadow: var(--sunken); background: var(--field); padding: 2px; border-radius: var(--radius); }
.sbar i { display: block; height: 100%; background: var(--sel); min-width: 1px; border-radius: var(--radius); }
@media (max-width: 700px) {
  .tlist td.barcell { display: none; }
  .tlist th:nth-child(2):empty { display: none; }
  .adduser input { width: 100%; }
}
/* ---------- appearance: mode switch, two tone colour ---------- */
.seg { display: flex; flex-wrap: wrap; gap: 0; padding-top: 4px; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg button.on { box-shadow: var(--pressed); background: var(--sel); color: var(--sel-text); }
.accent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 6px; }
.accent-row input[type=color] { width: 44px; height: 32px; padding: 2px; border: none; background: var(--field); box-shadow: var(--sunken); border-radius: var(--radius); cursor: pointer; }
.presets { display: flex; gap: 5px; flex-wrap: wrap; }
.preset { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.preset.on { box-shadow: 0 0 0 2px var(--field), 0 0 0 4px var(--text); }
.appearance .hint { color: var(--muted); }
.appearance fieldset.grow { overflow: auto; }
.swatches .sw-sep { width: 6px; }

/* ---------- viewer: a full-screen preview over the app ----------
   Its chrome is always light-on-dark (like any photo or video player), whatever the theme;
   documents (text, code, markdown, zip) sit on it as a card in the theme's own colours. */
.window.pv { position: fixed; inset: 0; z-index: 40; width: auto; height: auto; padding: 0; border: none; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  --pv-text: #f4f4f5; --pv-muted: rgba(255,255,255,.62); --pv-hover: rgba(255,255,255,.12); --pv-on: rgba(255,255,255,.2);
  background: color-mix(in srgb, var(--stage, #111) 93%, transparent); color: var(--pv-text);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  animation: pv-in .18s ease-out; }
@keyframes pv-in { from { opacity: 0; } }
.window.pv > .phead { display: none; }
.pv-top, .pv-strip, .pv-nav, .pv-audio, .pv-msg { --icon-ink: rgba(255,255,255,.88); }

/* top bar: close, name, then the file's own controls and the fixed ones */
.pv-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; flex: none;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px; transition: opacity .25s; }
.pv-title { flex: 1; min-width: 0; padding: 0 4px; }
.pv-nameline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-name { font-weight: 600; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-pos { flex: none; font-size: .8em; color: var(--pv-muted); font-variant-numeric: tabular-nums; }
.pv-meta { color: var(--pv-muted); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pv-tools, .pv-fixed { display: flex; align-items: center; gap: 2px; flex: none; }
.pv-tools:not(:empty) { padding-right: 8px; margin-right: 6px; border-right: 1px solid rgba(255,255,255,.16); }

/* buttons: quiet round icons that light up under the pointer (reset, so the themes' bevels stay out) */
.pv .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; min-height: 0;
  padding: 0 9px; border: none; border-radius: 10px; background: transparent; background-image: none; box-shadow: none;
  color: inherit; font: inherit; text-shadow: none; filter: none; cursor: pointer; transition: background-color .15s; }
.pv .pv-btn:hover:not(:disabled) { background: var(--pv-hover); box-shadow: none; filter: none; }
.pv .pv-btn:active:not(:disabled) { background: var(--pv-on); padding: 0 9px; box-shadow: none; }
.pv .pv-btn:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.pv .pv-btn:disabled { opacity: .4; cursor: default; }
.pv .pv-btn.on { background: var(--pv-on); }
.pv .pv-btn .mi { width: 22px; height: 22px; }
.pv .pv-label { padding: 0 12px; }
.pv .pv-label:active:not(:disabled) { padding: 0 12px; }
.pv .pv-pill { min-width: 62px; font-size: .9em; font-variant-numeric: tabular-nums; }
.pv .pv-primary, .pv .pv-primary:hover:not(:disabled), .pv .pv-primary:active:not(:disabled) { background: var(--sel); color: var(--sel-text); padding: 0 18px; font-weight: 600; }
.pv .pv-primary:hover:not(:disabled) { filter: brightness(1.1); }
.pv .pv-primary:disabled { background: var(--pv-hover); color: var(--pv-muted); opacity: 1; }
.pv-dirty { color: var(--pv-muted); font-size: .85em; margin-right: 6px; white-space: nowrap; }
.pv-dirty::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--sel); vertical-align: 1px; }

/* segmented Preview / Source switch */
.pv-seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(255,255,255,.08); margin-right: 4px; }
.pv .pv-seg button { height: 32px; min-height: 0; padding: 0 12px; border: none; border-radius: 8px; background: none; box-shadow: none;
  color: var(--pv-muted); font: inherit; font-size: .92em; cursor: pointer; }
.pv .pv-seg button:hover:not(:disabled) { background: none; color: var(--pv-text); box-shadow: none; }
.pv .pv-seg button:active:not(:disabled) { padding: 0 12px; box-shadow: none; }
.pv .pv-seg button.on, .pv .pv-seg button.on:hover:not(:disabled) { background: var(--pv-on); color: var(--pv-text); }

/* autoplay switch */
.pv-switch { display: flex; align-items: center; gap: 9px; padding: 0 10px; height: 40px; cursor: pointer; color: var(--pv-muted); white-space: nowrap; user-select: none; }
.pv-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pv-switch .track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.22); transition: background .2s; }
.pv-switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.pv-switch input:checked + .track { background: var(--sel); }
.pv-switch input:checked + .track::after { transform: translateX(14px); }
.pv-switch input:focus-visible + .track { outline: 2px solid var(--sel); outline-offset: 2px; }
.pv-switch:hover { color: var(--pv-text); }

/* the stage and the big previous / next arrows at its sides */
.pv-main { position: relative; flex: 1; min-height: 0; display: flex; }
.pv-stage { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv .pv-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; min-height: 0; margin-top: -26px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; box-shadow: none;
  background: rgba(20,20,22,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s, background-color .15s, transform .15s; }
.pv .pv-nav.prev { left: 18px; } .pv .pv-nav.next { right: 18px; }
.pv .pv-nav .mi { width: 30px; height: 30px; }
.pv-main:hover .pv-nav, .pv .pv-nav:focus-visible { opacity: 1; }
.pv .pv-nav:hover:not(:disabled) { background: rgba(20,20,22,.78); transform: scale(1.06); }
.pv .pv-nav:active:not(:disabled) { padding: 0; transform: scale(.96); }
.pv.single .pv-nav, .pv.single .pv-strip, .pv.single .pv-pos { display: none; }

/* thumbnails of the folder's other files */
.pv-strip { flex: none; z-index: 3; display: flex; gap: 6px; padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  overflow-x: auto; justify-content: safe center; scrollbar-width: none; transition: opacity .25s; }
.pv-strip::-webkit-scrollbar { display: none; }
.pv .pv-th { flex: none; width: 54px; height: 54px; min-height: 0; padding: 0; border: none; border-radius: 9px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); box-shadow: none;
  opacity: .5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .15s, outline-color .15s, transform .15s; }
.pv .pv-th:hover:not(:disabled) { opacity: .85; background: rgba(255,255,255,.12); box-shadow: none; }
.pv .pv-th:active:not(:disabled) { padding: 0; }
.pv .pv-th.cur { opacity: 1; outline-color: var(--sel); }
.pv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-th .ic { width: 24px; height: 24px; }

/* pictures and videos fill the screen; the bars float over them and fade away while you watch */
.pv[data-view=media] .pv-top { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25) 65%, transparent); }
.pv[data-kind=image] .pv-strip { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.pv.idle { cursor: none; }
.pv.idle .pv-top, .pv.idle .pv-strip, .pv.idle .pv-nav { opacity: 0 !important; pointer-events: none; }

.zoomwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none;
  opacity: 0; transition: opacity .2s; }
.zoomwrap.ready { opacity: 1; }
.zoomwrap img { max-width: 100%; max-height: 100%; display: block; user-select: none; will-change: transform;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.zoomwrap img.pixel { image-rendering: pixelated; }
.zoomwrap.instant img, .zoomwrap.panning img { transition: none; }
.zoomwrap.zoomed { cursor: grab; }
.zoomwrap.panning { cursor: grabbing; }
.pv-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 68px 24px 12px; }
.pv-video video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); outline: none; }
.pv-progress { position: absolute; left: 0; top: 0; z-index: 4; height: 3px; background: var(--sel); animation: pv-progress linear forwards; }
@keyframes pv-progress { from { width: 0; } to { width: 100%; } }

/* music: a "now playing" card */
.pv-audio { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(440px, 100% - 32px); text-align: center; }
.pv-art { width: min(260px, 62vw); aspect-ratio: 1; margin-bottom: 14px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--sel), color-mix(in srgb, var(--sel) 35%, #000)); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.pv .pv-art .ic { width: 42%; height: 42%; --ic-tint: rgba(255,255,255,.92); }
.pv-song { font-size: 1.3em; font-weight: 600; overflow-wrap: anywhere; }
.pv-sub { color: var(--pv-muted); font-size: .9em; margin-bottom: 10px; }
.pv-audio audio { width: 100%; }

/* loading and errors */
.pv-spin { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--sel); animation: pv-spin .8s linear infinite, pv-show 0s .3s forwards; }
@keyframes pv-spin { to { transform: rotate(1turn); } }
@keyframes pv-show { to { opacity: 1; } }
.pv-msg { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 440px; padding: 24px; text-align: center; color: var(--pv-muted); line-height: 1.5; }
.pv .pv-msg .pv-btn { background: var(--pv-hover); color: var(--pv-text); }

/* pdf */
.pv[data-view=frame] .pv-stage { padding: 0 84px 16px; }
.pv-frame { flex: 1; align-self: stretch; border: none; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.45); }

/* documents: a card in the theme's colours */
.pv[data-view=doc] .pv-stage { align-items: stretch; padding: 4px 84px 24px; }
.pv-doc { flex: 0 1 1040px; min-width: 0; display: flex; flex-direction: column; overflow: auto; border-radius: 12px;
  background: var(--field); color: var(--text); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.45); animation: pv-rise .2s ease-out; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(8px); } }
.pv-doc.pv-md { flex-basis: 860px; }
.pv-doc.pv-zip { align-self: flex-start; max-height: 100%; } /* a short list doesn't need a full-height card */
.pv-note { position: sticky; top: 0; left: 0; z-index: 1; padding: 10px 18px; font-size: .9em; background: var(--note); color: var(--text); border-bottom: 1px solid var(--shadow); }
.pv-empty { padding: 48px 24px; text-align: center; color: var(--muted); }

/* code / plain text, with line numbers */
.pv-code { flex: 1 0 auto; min-width: 100%; width: max-content; padding: 14px 0 20px; counter-reset: ln; font: var(--mono); line-height: 1.65; tab-size: 4;
  user-select: text; cursor: text; background: linear-gradient(90deg, var(--gutter) calc(var(--gw) + 26px), transparent 0) local; }
.pv-code.wrap { width: auto; }
.pv-code .l { position: relative; min-height: 1.65em; padding: 0 28px 0 calc(var(--gw) + 44px); white-space: pre; }
.pv-code.wrap .l { white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-code .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: calc(var(--gw) + 14px); text-align: right;
  color: var(--muted); opacity: .55; user-select: none; }
.pv-code .l:hover { background: var(--veil); }
.pv-code .l:hover::before { opacity: 1; }
.pv-code .k { color: #a626a4; } .pv-code .s { color: #3f8f36; } .pv-code .n { color: #b2620b; } .pv-code .c { color: #8a9099; font-style: italic; }
:root[data-mode="dark"] .pv-code .k { color: #c792ea; } :root[data-mode="dark"] .pv-code .s { color: #a5d6a7; }
:root[data-mode="dark"] .pv-code .n { color: #f0a868; } :root[data-mode="dark"] .pv-code .c { color: #7f8790; }

/* editor */
.pv-doc.pv-edit { overflow: hidden; }
.pv-editor { flex: 1; width: 100%; border: none; outline: none; resize: none; padding: 16px 24px; font: var(--mono); line-height: 1.65; tab-size: 4;
  color: var(--text); background: var(--field); box-shadow: none; user-select: text; }
.pv.editing .pv-doc { box-shadow: 0 0 0 2px var(--sel), 0 24px 70px rgba(0,0,0,.45); }

/* markdown: readable article typography */
.markdown { padding: 44px 60px 56px; line-height: 1.7; font-size: 1.04em; user-select: text; cursor: auto; overflow-wrap: break-word; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height: 1.25; margin: 1.6em 0 .6em; }
.markdown h1 { font-size: 2em; } .markdown h2 { font-size: 1.5em; } .markdown h3 { font-size: 1.22em; } .markdown h4 { font-size: 1.05em; }
.markdown h1, .markdown h2 { padding-bottom: .3em; border-bottom: 1px solid var(--shadow); }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown table, .markdown pre { margin: 0 0 1.1em; }
.markdown ul, .markdown ol { padding-left: 1.6em; }
.markdown li + li { margin-top: .25em; }
.markdown code { font: var(--mono); font-size: .9em; background: var(--gutter); padding: .15em .4em; border-radius: 5px; }
.markdown pre { background: var(--gutter); padding: 14px 18px; overflow: auto; border-radius: 10px; line-height: 1.55; }
.markdown pre code { padding: 0; background: none; font-size: .92em; }
.markdown blockquote { padding: .2em 1.1em; border-left: 4px solid var(--sel); color: var(--muted); background: var(--veil); border-radius: 0 8px 8px 0; }
.markdown blockquote > :last-child { margin-bottom: 0; }
.markdown img { max-width: 100%; border-radius: 8px; }
.markdown a { color: var(--sel); text-underline-offset: 2px; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--shadow); padding: 7px 13px; }
.markdown th { background: var(--gutter); text-align: left; }
.markdown hr { border: none; border-top: 1px solid var(--shadow); margin: 2em 0; }

/* zip contents */
.pv-zrow { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gutter); }
.pv-zrow:hover { background: var(--hover); }
.pv-zname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-zname .dir { color: var(--muted); }
.pv-zsize { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-zrow .mi { width: 20px; height: 20px; opacity: 0; transition: opacity .15s; }
.pv-zrow:hover .mi { opacity: .7; }

.pv:fullscreen { width: 100vw; height: 100vh; }

/* phones: edge to edge, swipe instead of arrows, fewer buttons */
@media (max-width: 700px) {
  .window.pv { padding: 0; }
  .pv .pv-wide, .pv .pv-nav, .pv-strip { display: none; }
  .pv-top { padding: max(4px, env(safe-area-inset-top)) 4px 6px; gap: 0; }
  .pv-tools:not(:empty) { padding-right: 2px; margin-right: 2px; }
  .pv-name { font-size: 1em; }
  .pv .pv-btn { min-width: 42px; height: 42px; padding: 0 8px; }
  .pv .pv-label { padding: 0 10px; }
  .pv .pv-pill { display: none; }
  .pv-seg { margin-right: 2px; }
  .pv .pv-seg button { padding: 0 9px; }
  .pv-switch > span:last-child, .pv-dirty { display: none; }
  .pv[data-view=doc] .pv-stage, .pv[data-view=frame] .pv-stage { padding: 0; }
  .pv-doc, .pv-frame { border-radius: 0; flex-basis: 100%; box-shadow: none; }
  .pv-doc { padding-bottom: env(safe-area-inset-bottom); }
  .pv-video { padding: 56px 0 env(safe-area-inset-bottom); }
  .pv-video video { border-radius: 0; box-shadow: none; }
  .markdown { padding: 22px 20px 40px; font-size: 1em; }
}