/* ZoraLister Online: the seller's screens and the admin screen, one stylesheet.
 *
 * The colours are the website's, not an approximation of them - a seller who bought from
 * zoralister.com should not feel she has landed somewhere else when she signs in. The tokens below
 * are copied from site/page.css; if a colour changes there, change it here too.
 *
 * Three themes, because sellers work at different hours on different screens: LIGHT is the site's
 * own palette, MEDIUM is the site's deep navy (easier at night, still blue rather than grey), DARK
 * is close to black for a dim room. Each is the same hues at different depths, so it is recognisably
 * the same product in all three. The choice is remembered in this browser.
 *
 * Type is deliberately a size up from the usual web app: 17px base, as on the site. Small grey text
 * is a fashion, not a kindness, and a seller reading SKUs at midnight deserves better.
 *
 * Fonts are the system's. The site uses Exo 2 and Barlow from Google Fonts; the app's
 * content-security-policy allows nothing from outside, so until they are self-hosted (ZL-047) this
 * matches weight and shape rather than the exact faces.
 */

:root,
:root[data-theme="light"] {
	--ground: #F3F8FE;
	--surface: #FFFFFF;
	--panel: #FFFFFF;
	--band: #E6F0FB;
	--line: #D3E0F0;
	--ink: #0B1B3B;
	--ink2: #4A5E80;
	--field: #FFFFFF;
	--field-ink: #0B1B3B;
	--accent: #0A6CFF;
	--accent-ink: #FFFFFF;
	--accent-deep: #0750C4;
	--good: #0A9C86;
	--bad: #C62B3B;
	--warn: #9A6400;
	--row-hover: #EEF5FE;
	--shadow: 0 1px 2px rgba(11, 27, 59, .06), 0 8px 24px rgba(11, 27, 59, .06);
}

/* The site's deep navy: night work, still unmistakably ZoraLister. */
:root[data-theme="medium"] {
	--ground: #0C1F45;
	--surface: #12294F;
	--panel: #12294F;
	--band: #17325C;
	--line: #1C3666;
	--ink: #E4ECF7;
	--ink2: #A9BEDD;
	--field: #0A1B3C;
	--field-ink: #E4ECF7;
	--accent: #3B8BFF;
	--accent-ink: #04122C;
	--accent-deep: #6FB4FF;
	--good: #3FE0C5;
	--bad: #FF8A96;
	--warn: #FFC46B;
	--row-hover: #17325C;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .28);
}

/* Close to black, for a dim room. */
:root[data-theme="dark"] {
	--ground: #050B18;
	--surface: #0B1526;
	--panel: #0B1526;
	--band: #101E33;
	--line: #1C3666;
	--ink: #E7EEF9;
	--ink2: #93A7C4;
	--field: #060E1C;
	--field-ink: #E7EEF9;
	--accent: #29C5FF;
	--accent-ink: #04121F;
	--accent-deep: #7BDCFF;
	--good: #3FE0C5;
	--bad: #FF6B7A;
	--warn: #FFB020;
	--row-hover: #101E33;
	--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}

/* ---- the bar across the top ---------------------------------------------------------------- */
header {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 18px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 3;
}

header b {
	font-size: 1.25rem;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin-right: 4px;
}

header b .a { color: var(--accent); }

nav { display: flex; gap: 6px; flex-wrap: wrap; }

nav button {
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink2);
	font-weight: 600;
}

nav button:hover { color: var(--ink); background: var(--band); }

nav button.active {
	color: var(--ink);
	background: var(--band);
	border-color: var(--line);
}

.who { margin-left: auto; color: var(--ink2); font-size: .95rem; }

/* ---- panels and headings ---------------------------------------------------------------------- */
main { padding: 18px; max-width: 1180px; margin: 0 auto; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 18px;
	box-shadow: var(--shadow);
}

h1, h2, h3 { margin: 0; line-height: 1.15; }

h2 {
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: .01em;
	margin: 0 0 12px;
}

h3 { font-size: 1rem; font-weight: 700; }

p { margin: 0; }

.sub, .soon { color: var(--ink2); font-size: .95rem; margin: 0 0 12px; }

.muted { color: var(--ink2); }

.right { text-align: right; }

/* ---- things you type into, and things you press ------------------------------------------------ */
input, select, button, textarea {
	font: inherit;
	font-size: .98rem;
	color: var(--field-ink);
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 11px;
}

textarea { width: 100%; }

input::placeholder, textarea::placeholder { color: var(--ink2); opacity: .75; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

button {
	cursor: pointer;
	background: var(--band);
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}

button:hover { border-color: var(--accent); }

button.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
}

button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

button.bad { color: var(--bad); border-color: var(--line); }
button.bad:hover { border-color: var(--bad); }

button:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; }

.field label { color: var(--ink2); font-size: .86rem; font-weight: 600; letter-spacing: .02em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ---- tables ------------------------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }

th, td {
	text-align: left;
	padding: 11px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	font-size: .98rem;
}

th {
	color: var(--ink2);
	font-weight: 700;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

tr.row:hover { background: var(--row-hover); cursor: pointer; }

/* ---- the small pieces --------------------------------------------------------------------------- */
.msg { min-height: 22px; font-size: .95rem; }
.msg.err { color: var(--bad); font-weight: 600; }
.msg.ok { color: var(--good); font-weight: 600; }

.pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	border: 1px solid var(--line);
}

.pill.Active { color: var(--good); border-color: var(--good); }
.pill.Disabled { color: var(--bad); border-color: var(--bad); }

.thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--band);
	border: 1px solid var(--line);
}

.photos { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.photo {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px;
	width: 190px;
	background: var(--surface);
}

.photo img { width: 100%; height: 120px; object-fit: contain; background: var(--band); border-radius: 8px; }
.photo input { width: 100%; margin-top: 8px; font-size: .88rem; }

.drop {
	border: 2px dashed var(--line);
	border-radius: 10px;
	padding: 18px;
	text-align: center;
	color: var(--ink2);
	background: var(--band);
}

.drop.over { border-color: var(--accent); color: var(--ink); }

.log { max-height: 280px; overflow: auto; }
.log td { padding: 7px 10px; font-size: .92rem; }

code, pre {
	font-family: "Cascadia Mono", Consolas, "JetBrains Mono", monospace;
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--field-ink);
}

pre { padding: 12px; font-size: .95rem; line-height: 1.8; }

a { color: var(--accent-deep); }

/* ---- signing in --------------------------------------------------------------------------------- */
#login, #mfaWall { max-width: 460px; margin: 56px auto; }

/* ---- which build this is (ZL-127) -----------------------------------------------------------------
   Under the wordmark, quiet enough to ignore and there when somebody asks whether the thing they
   are looking at is the one that was just deployed. */
.brand { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand .version { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink2); }

/* ---- choosing a theme ---------------------------------------------------------------------------- */
.themes { display: inline-flex; gap: 4px; align-items: center; }

.themes button {
	padding: 6px 10px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink2);
	background: transparent;
	border-color: var(--line);
}

.themes button[aria-pressed="true"] {
	color: var(--ink);
	background: var(--band);
	border-color: var(--accent);
}

/* ---- the draft she is reviewing -------------------------------------------------------------------
   Nothing here is shortened: this table is what the marketplace will be sent, and a value that
   stops early would be read as ZoraLister having cut it. Long ones wrap and say how long they are. */
#draftRows td.cell { max-width: 460px; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; }
#draftRows td.cell.long { min-width: 320px; }
#draftRows .len { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink2); }

/* ---- the help drawer (ZL-112) ---------------------------------------------------------------------
   Over the screen she is on, never away from it: a seller reading about a field should be able to
   see the field. On a phone there is no room beside it, so it takes the width and slides up. */
.help-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ink2);
	background: var(--band);
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: help;
	vertical-align: middle;
}

.help-dot:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

#helpDrawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	height: 100%;
	/* --panel, not --card. --card was never a token here, so this said background: nothing, and the
	   drawer came out transparent with the page showing through its own text. The first seller
	   reported it as "it overlays the page, making it hard to view", which was generous. */
	background: var(--panel);
	border-left: 1px solid var(--line);
	box-shadow: -18px 0 48px rgb(11 27 59 / 18%);
}

/* And on a wide screen it now makes room rather than covering the field she is asking about -
   the whole point of answering beside the box instead of on another page. */
body.helping main { padding-right: min(464px, 52vw); }
@media (max-width: 1100px) { body.helping main { padding-right: 16px; } }

#helpDrawer header {
	position: static;
	display: block;
	padding: 14px 16px 10px;
	background: var(--band);
	border-bottom: 1px solid var(--line);
}

#helpDrawer .bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#helpDrawer .bar b { flex: 1; font-size: 1rem; }
#helpDrawer input { width: 100%; }
#helpBody { flex: 1; padding: 6px 16px 24px; overflow-y: auto; background: var(--panel); color: var(--ink); }

.help-entry { padding: 14px 0; border-bottom: 1px solid var(--line); }
.help-entry h3 { margin: 0 0 6px; font-size: 1rem; }
.help-entry p { margin: 0 0 8px; color: var(--ink2); }
.help-entry p:last-child { margin-bottom: 0; }
.help-entry .where { font-size: .76rem; font-weight: 600; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .04em; }

/* Straight from her own template, so it is worth saying so. */
.help-entry.from-template { padding: 12px 14px; background: var(--band); color: var(--ink); border: 1px solid var(--accent); border-radius: 10px; }
.help-entry .values { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.help-entry .values span { padding: 2px 8px; font-size: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }

@media (max-width: 760px) {
	#helpDrawer { top: auto; bottom: 0; width: 100%; height: min(78%, 100%); border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- labels she prints and sticks on her own items (ZL-120) --------------------------------------
   Sized for Avery 5160 and its equivalents: 30 to a US Letter sheet, three across and ten down,
   2.625in x 1in. The page margins are the ones that sheet expects, so the labels land on the
   labels rather than across the gaps. */
#labelSheet { display: none; }

@media print {
	body.printing > *:not(#labelSheet) { display: none !important; }

	#labelSheet {
		display: grid;
		grid-template-columns: repeat(3, 2.625in);
		grid-auto-rows: 1in;
		column-gap: 0.125in;
		margin: 0;
	}

	.label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0.06in 0.12in;
		overflow: hidden;
		text-align: center;
		color: #000;
	}

	/* Pure black on white whatever theme she is using: a scanner reads contrast, and a dark theme
	   would otherwise print a barcode nothing can read. */
	.label .bars { height: 0.38in; fill: #000; }
	.label .sku { font-family: var(--mono); font-size: 8.5pt; font-weight: 600; letter-spacing: .04em; }
	.label .what { font-size: 6.5pt; line-height: 1.15; max-height: 0.22in; overflow: hidden; }

	@page { size: letter; margin: 0.5in 0.19in; }
}

/* ---- narrow screens -------------------------------------------------------------------------------- */
@media (max-width: 760px) {
	main { padding: 12px; }
	.panel { padding: 14px; }
	body { font-size: 16px; }
	th, td { padding: 9px 8px; }
}