/* xdOS theme for copyparty — xd · citr0n · v0.01
 * load with: html-head: <link rel="stylesheet" href="/xdtheme/xd.css">
 * dark = theme 0 (primary), light = theme 1
 */

@font-face {
	font-family: 'xdhj';
	font-weight: 500;
	font-display: swap;
	src: url(Handjet-500.ttf) format('truetype');
}
@font-face {
	font-family: 'xdhj';
	font-weight: 700;
	font-display: swap;
	src: url(Handjet-700.ttf) format('truetype');
}

/* ---------- tokens: dark (primary) ---------- */
html.z.z.z, html:not(.y):not(.z) {
	color-scheme: dark;
	--xd-desk: #24140a;
	--xd-desk-dot: #94592a;
	--xd-paper: #170c04;
	--xd-panel: #2e1a0b;
	--xd-chip: #3f2510;
	--xd-titlebar: #c27c3c;
	--xd-on-titlebar: #170c04;
	--xd-ink: #f0c48c;
	--xd-ink-muted: #c9965e;
	--xd-frame: #f2f2f2;
	--xd-bezel: #7a4a20;
	--xd-focus: #f0c48c;
}
/* ---------- tokens: light ---------- */
html.y.y.y {
	color-scheme: light;
	--xd-desk: #b8804b;
	--xd-desk-dot: #8f5a2b;
	--xd-paper: #cc9661;
	--xd-panel: #c08852;
	--xd-chip: #d6a26f;
	--xd-titlebar: #3d220b;
	--xd-on-titlebar: #f6dfbd;
	--xd-ink: #1f1006;
	--xd-ink-muted: #3d220b;
	--xd-frame: #111111;
	--xd-bezel: #6b3f17;
	--xd-focus: #1f1006;
}

/* ---------- copyparty variables -> xdOS tokens ---------- */
html.z.z.z, html.y.y.y, html:not(.y):not(.z) {
	--font-main: 'xdhj', ui-monospace, monospace;
	--font-serif: 'xdhj', ui-monospace, monospace;
	--font-mono: 'xdhj', ui-monospace, monospace;

	--fg: var(--xd-ink);
	--fg-max: var(--xd-ink);
	--fg2-max: var(--xd-ink);
	--fg-weak: var(--xd-ink-muted);

	--bg-u6: var(--xd-chip);
	--bg-u5: var(--xd-chip);
	--bg-u4: var(--xd-chip);
	--bg-u3: var(--xd-panel);
	--bg-u2: var(--xd-panel);
	--bg-u1: var(--xd-panel);
	--bg: var(--xd-desk);
	--bgg: var(--xd-desk);
	--bg-d1: var(--xd-paper);
	--bg-d2: var(--xd-paper);
	--bg-d3: var(--xd-paper);
	--bg-max: var(--xd-paper);

	--tab-alt: var(--xd-ink-muted);
	--row-alt: var(--xd-panel);

	--scroll: var(--xd-titlebar);
	--sel-fg: var(--xd-on-titlebar);
	--sel-bg: var(--xd-titlebar);

	--a: var(--xd-ink);
	--a-b: var(--xd-titlebar);
	--a-hil: var(--xd-on-titlebar);
	--a-h-bg: var(--xd-titlebar);
	--a-dark: var(--xd-titlebar);
	--a-gray: var(--xd-desk-dot);

	--btn-fg: var(--xd-ink);
	--btn-bg: var(--xd-chip);
	--btn-h-fg: var(--xd-on-titlebar);
	--btn-h-bg: var(--xd-titlebar);
	--btn-1-fg: var(--xd-on-titlebar);
	--btn-1-bg: var(--xd-titlebar);
	--btn-1h-fg: var(--xd-titlebar);
	--btn-1h-bg: var(--xd-on-titlebar);
	--btn-bs: none;
	--btn-bb: none;
	--btn-h-bs: none;
	--btn-h-bb: none;
	--btn-1-bs: none;
	--btn-1-bb: none;
	--btn-1h-bs: none;
	--btn-1h-bb: none;
	--chk-fg: var(--xd-ink);
	--txt-sh: transparent;
	--txt-bg: var(--xd-paper);

	--op-aa-fg: var(--xd-on-titlebar);
	--op-aa-bg: var(--xd-titlebar);
	--op-aa-sh: none;
	--op-a-sh: transparent;

	--u2-btn-b1: var(--xd-frame);
	--u2-sbtn-b1: var(--xd-frame);
	--u2-txt-bg: var(--xd-paper);
	--u2-tab-bg: var(--xd-panel);
	--u2-tab-b1: var(--xd-frame);
	--u2-tab-1-fg: var(--xd-on-titlebar);
	--u2-tab-1-bg: var(--xd-titlebar);
	--u2-tab-1-b1: var(--xd-frame);
	--u2-tab-1-b2: var(--xd-frame);
	--u2-tab-1-sh: transparent;
	--u2-b-fg: var(--xd-on-titlebar);
	--u2-b1-bg: var(--xd-titlebar);
	--u2-b2-bg: var(--xd-titlebar);
	--u2-inf-bg: var(--xd-panel);
	--u2-inf-b1: var(--xd-ink-muted);
	--u2-ok-bg: var(--xd-chip);
	--u2-ok-b1: var(--xd-titlebar);
	--u2-err-bg: var(--xd-paper);
	--u2-err-b1: var(--xd-frame);
	--ud-b1: var(--xd-frame);

	--sort-1: var(--xd-ink);
	--sort-2: var(--xd-ink-muted);

	--sz-b: var(--xd-ink-muted);
	--sz-k: var(--xd-ink-muted);
	--sz-m: var(--xd-ink);
	--sz-g: var(--xd-ink);
	--sz-t: var(--xd-ink);
	--sz-p: var(--xd-ink);

	--srv-1: var(--xd-ink-muted);
	--srv-2: var(--xd-ink);
	--srv-3: var(--xd-ink);
	--srv-3b: var(--xd-titlebar);

	--tree-bg: var(--xd-panel);

	--g-play-bg: var(--xd-titlebar);
	--g-play-b1: var(--xd-frame);
	--g-play-b2: var(--xd-frame);
	--g-play-sh: transparent;
	--g-sel-fg: var(--xd-on-titlebar);
	--g-sel-bg: var(--xd-titlebar);
	--g-sel-b1: var(--xd-frame);
	--g-sel-sh: transparent;
	--g-fsel-bg: var(--xd-titlebar);
	--g-fsel-b1: var(--xd-frame);
	--g-fsel-ts: transparent;
	--g-dfg: var(--xd-ink-muted);
	--g-fg: var(--xd-ink);
	--g-bg: var(--xd-panel);
	--g-b1: var(--xd-frame);
	--g-b2: var(--xd-frame);
	--g-g1: var(--xd-panel);
	--g-g2: var(--xd-chip);
	--g-f-bg: var(--xd-chip);
	--g-f-b1: var(--xd-frame);
	--g-f-fg: var(--xd-ink);
	--g-sh: transparent;

	--f-sh1: 0;
	--f-sh2: 0;
	--f-sh3: 0;
	--f-h-b1: var(--xd-titlebar);
	--f-play-bg: var(--xd-titlebar);
	--f-play-fg: var(--xd-on-titlebar);
	--f-sel-sh: var(--xd-titlebar);
	--f-gray: var(--xd-ink-muted);

	--fm-off: var(--xd-ink-muted);
	--mp-sh: transparent;
	--mp-b-bg: var(--xd-paper);

	--err-fg: var(--xd-ink);
	--err-bg: var(--xd-paper);
	--err-b1: var(--xd-frame);
	--err-ts: transparent;
}

/* ---------- 1-bit rules: square, flat, one face ---------- */
html, html * {
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html, html input, html textarea, html select, html button {
	font-family: 'xdhj', ui-monospace, monospace;
	font-weight: 500;
	font-variation-settings: "ELSH" 2, "ELGR" 1;
	-webkit-font-smoothing: none;
}
html {
	font-size: 20px;
	color: var(--xd-ink);
	background-color: var(--xd-desk);
	background-image: radial-gradient(circle, var(--xd-desk-dot) 0.9px, rgba(0,0,0,0) 1.2px);
	background-size: 6px 6px;
	background-attachment: fixed;
}
body { background: none; }
b, strong, h1, h2, h3, th { font-weight: 700; }
::selection { color: var(--xd-on-titlebar); background: var(--xd-titlebar); }
:focus-visible { outline: 2px solid var(--xd-focus) !important; outline-offset: 2px; }

/* links: plain ink, invert on hover */
html a:hover,
html #files a:hover {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	text-decoration: none;
}

/* ---------- top tabs = menubar ---------- */
#ops {
	background: var(--xd-paper);
	border-bottom: 2px solid var(--xd-frame);
}
#ops a {
	color: var(--xd-ink);
	background: none;
}
#ops a:hover {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}
#ops a.act {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	border: none;
}
#ops a svg circle { fill: var(--xd-ink); }

/* no emoji in xdOS: swap tab icons for lowercase words */
#ops { white-space: normal; padding: 0 .3rem; }
#ops a {
	display: inline-block;
	vertical-align: top;
	font-size: 0 !important;
	line-height: 0;
	padding: 0;
	margin: 0;
	border: none !important;
}
#ops a::after {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.6rem;
	padding: .2rem .55rem;
	font-weight: 600;
}
#opa_x::after    { content: "--"; }
#opa_srch::after { content: "search"; }
#opa_del::after  { content: "unpost"; }
#opa_up::after   { content: "upload"; }
#opa_bup::after  { content: "bup"; }
#opa_mkd::after  { content: "mkdir"; }
#opa_md::after   { content: "new"; }
#opa_msg::after  { content: "msg"; }
#opa_auc::after  { content: "player"; }
#opa_cfg::after  { content: "cfg"; }

/* tree header + tray: same trick */
#detree, #visdir, #filetree { font-size: 0 !important; }
#detree::after   { content: "path"; font-size: 1rem; }
#visdir::after   { content: "goto"; font-size: 1rem; }
#filetree::after { content: "txt"; font-size: 1rem; }

/* option panels = windows */
.opbox {
	background: var(--xd-panel);
	border: 2px solid var(--xd-frame);
}
.opview input[type=text], .opview select, input[type=text], input[type=password], textarea {
	color: var(--xd-ink);
	background: var(--xd-paper);
	border: 1px solid var(--xd-ink);
}

/* ---------- breadcrumbs = inverted labels ---------- */
#path {
	color: var(--xd-ink);
	background: none;
	font-weight: 700;
}
#path a {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	margin-right: .3em;
	padding: 0 .3em;
}
#path a:hover {
	color: var(--xd-titlebar);
	background: var(--xd-on-titlebar);
}
#path i { display: none; }
#path #entree {
	color: var(--xd-ink);
	background: var(--xd-chip);
}

/* ---------- file list = primary window ---------- */
#files {
	background: var(--xd-paper);
	outline: 2px solid var(--xd-frame);
	outline-offset: 0;
}
#files thead th {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	font-weight: 700;
}
#files thead a,
#files thead th span { color: var(--xd-on-titlebar); }
#files td, #files tr:nth-child(2n) td, #files tr:nth-child(2n+1) td+td {
	background: var(--xd-paper);
	border-color: transparent;
}
#files tr:nth-child(2n) td { background: var(--xd-panel); }
#files tbody tr:hover td,
#files tbody tr:hover td+td {
	background: var(--xd-chip);
}
#files tbody tr.sel td,
#files tbody tr.sel td+td,
#files tbody tr.sel:hover td {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}
#files tbody tr.sel a { color: var(--xd-on-titlebar); }
#files tbody tr.play td,
#files tbody tr.play a {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}

/* ---------- tree / navpane = background window ---------- */
#tree {
	background: var(--xd-panel);
	border-right: 2px solid var(--xd-frame);
}
#tree li { border-color: var(--xd-chip); }
#treeh, #tree ul a.hl, #tree li.hl > a {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}

/* ---------- buttons ---------- */
.btn, input[type=submit], button {
	color: var(--xd-ink);
	background: var(--xd-chip);
	border: none;
}
.btn:hover, input[type=submit]:hover, button:hover {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}

/* ---------- player / bottom-right tray ---------- */
#widget, #widgeti {
	background: var(--xd-paper);
	border-top: 2px solid var(--xd-frame);
}
#wtoggle {
	background: var(--xd-paper);
	border: 2px solid var(--xd-frame);
}
#barpos, #barbuf { background: var(--xd-panel); }

/* ---------- toasts / tooltips = small windows ---------- */
#toast, #tt {
	color: var(--xd-ink);
	background: var(--xd-panel);
	border: 2px solid var(--xd-frame);
}

/* control-panel / prev / up / next */
#goh, #goh ~ a { font-weight: 700; }
#goh + span, #goh ~ span { color: var(--xd-desk-dot); background: none; }

/* ---------- server / account info line ---------- */
#srv_info, #acc_info { color: var(--xd-ink-muted); }
#srv_info span, #acc_info span { color: var(--xd-ink); }

/* ---------- upload drop zone = titlebar block ---------- */
html.a #u2btn, html.b #u2btn, html.c #u2btn, html.d #u2btn, html.e #u2btn {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	border: 2px solid var(--xd-frame);
	font-weight: 700;
}
html.a #u2btn:hover, html.b #u2btn:hover, html.c #u2btn:hover, html.d #u2btn:hover, html.e #u2btn:hover {
	background: var(--xd-ink);
}
#u2conf input[type=text], #u2conf input { color: var(--xd-ink); background: var(--xd-paper); }

/* leftover emoji (settings, uploader switches): tint to 1-bit amber */
#u2conf a, #op_cfg .btn, #op_cfg a, #widget a, #wtoggle a, #treeh a {
	filter: grayscale(1) sepia(1) saturate(1.8) hue-rotate(-14deg);
}
html.y #u2conf a, html.y #op_cfg .btn, html.y #op_cfg a, html.y #widget a, html.y #wtoggle a, html.y #treeh a {
	filter: grayscale(1) sepia(1) saturate(1.4) hue-rotate(-14deg) brightness(.75);
}

/* ---------- splash / login / control-panel page (splash.css) ---------- */
html#ht_spl.z #wrap h1, html#ht_spl.y #wrap h1 {
	color: var(--xd-ink);
	border-color: var(--xd-ink);
	font-weight: 700;
}
html#ht_spl.z #wrap a, html#ht_spl.y #wrap a,
html#ht_spl.z #wrap a.r, html#ht_spl.z #wrap a.g,
html#ht_spl.y #wrap a.r, html#ht_spl.y #wrap a.g {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
	border: 2px solid var(--xd-titlebar);
}
html#ht_spl.z #wrap a:hover, html#ht_spl.y #wrap a:hover {
	color: var(--xd-ink);
	background: var(--xd-paper);
	border-color: var(--xd-frame);
}
html#ht_spl.z #wrap input, html#ht_spl.y #wrap input {
	color: var(--xd-ink);
	background: var(--xd-paper);
	border: 2px solid var(--xd-frame);
}
html#ht_spl.z #wrap input::placeholder, html#ht_spl.y #wrap input::placeholder {
	color: var(--xd-ink-muted);
	font-style: normal;
}
html#ht_spl code, html#ht_spl pre {
	color: var(--xd-ink);
	background: var(--xd-paper);
}
html#ht_spl code b { color: var(--xd-titlebar); }
html#ht_spl .num, html#ht_spl .vols th { border-color: var(--xd-ink-muted); }
html#ht_spl #pb, html#ht_spl #pb a { color: var(--xd-ink-muted); background: none !important; border: none !important; }
html#ht_spl #w { color: var(--xd-on-titlebar); background: var(--xd-titlebar); border-color: var(--xd-frame); }

html#ht_spl.z, html#ht_spl.y {
	color: var(--xd-ink);
	background-color: var(--xd-desk);
	background-image: radial-gradient(circle, var(--xd-desk-dot) 0.9px, rgba(0,0,0,0) 1.2px);
	background-size: 6px 6px;
}
html#ht_spl li::marker { color: var(--xd-ink); }

/* themes hardcode some light greys: pin tree + doc viewer to tokens */
html.z.z #tree, html.z.z #treeh, html.z.z #treepar,
html.y.y #tree, html.y.y #treeh, html.y.y #treepar {
	background: var(--xd-panel);
	border-color: var(--xd-frame);
}
html.z.z #doc, html.y.y #doc {
	color: var(--xd-ink);
	background: var(--xd-paper);
}

/* tooltips: frame outline, not grey */
#tt, #toast { border-color: var(--xd-frame) !important; border-style: solid !important; border-width: 2px !important; }

/* phones: smaller base so the menubar and panels fit */
@media (max-width: 600px) {
	html { font-size: 17px; }
	#ops a::after { padding: .15rem .4rem; }
	#srv_info, #acc_info { font-size: .75rem; }
}
#path #entree { filter: grayscale(1) sepia(1) saturate(1.8) hue-rotate(-14deg); }

/* tree header: every control is a block, like a chip */
#treeh a, #treeh a.btn {
	display: inline-block;
	vertical-align: middle;
	min-width: 0;
	width: auto;
	text-align: center;
	font-size: .9rem;
	line-height: 1.5rem;
	padding: .1rem .3rem;
	margin: .25rem .06rem;
	color: var(--xd-ink);
	background: var(--xd-chip);
	border: none;
}
#detree, #visdir, #filetree { line-height: 0 !important; }
#detree::after, #visdir::after, #filetree::after { font-size: .9rem; line-height: 1.5rem; }
#treeh { height: auto; min-height: 2.2em; white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0 .2rem; }
#treeh a:hover, #treeh a.on, #treeh a.tgl.on {
	color: var(--xd-on-titlebar);
	background: var(--xd-titlebar);
}