/* Written by tools/stamp-assets.js from the files listed there. Change those, not this. */
/*
 * Urvara Studio: professional workspace look (plan §6, task P0-04).
 * Every colour is a token here on :root. Screens use only these tokens: no hex values below this block.
 * Espresso (--accent) is for primary buttons and "selected"; --link for links. Status = soft-fill badge plus a word.
 * Brand colours appear only as small TSH / MS tags. No dark mode.
 */
:root {
	/* Surfaces: The Saffron House ivory */
	--bg:            #F4EBDF;  /* app canvas, warm ivory */
	--surface:       #FFFDF9;  /* cards, forms, tables */
	--surface-2:     #F8F3EC;  /* table header, subtle fill */
	--border:        #E4D6C4;
	--border-strong: #CDBFAA;

	/* Text: espresso */
	--text:          #2B1A12;
	--text-2:        #5A4636;  /* secondary */
	--text-3:        #6B5548;  /* muted, captions */
	--text-on-dark:  #F2EADC;
	--on-accent:     #FFFFFF;  /* text on espresso, green and red fills */

	/* Frame */
	--nav:           #2B1A12;  /* top bar, espresso */
	--nav-2:         #3F2C20;  /* active tab, hover on nav */
	--nav-line:      rgba(242, 234, 220, 0.28);  /* outline of buttons on the top bar */
	--logo:          #F2C3A2;  /* the logo's peach: wordmark on the top bar only, never text on ivory */
	--saffron:       #BC501F;  /* brand saffron: the thread under the top bar; focus ring. As text only on --paper or --surface at 14px+ (4.13:1 on --bg fails) */

	/* Accent */
	--accent:        #2B1D14;  /* primary buttons, current stage, selected */
	--accent-hover:  #4E3424;
	--accent-soft:   #F1E7D8;  /* selected row, info badge */
	--link:          #9A4314;  /* links, deep saffron */

	/* Screens before sign-in only (gate.css), as on the website's sign-in page */
	--paper:         #FBF7F1;  /* warm paper page */
	--madder:        #7A2E12;  /* pill buttons */
	--zari:          #B8913A;  /* zari gold: top border of a vendor's card */

	/* Status */
	--ok:            #2F6B3F;  --ok-soft:     #E6F0E2;   /* done, pass, on time */
	--warn:          #8A5300;  --warn-soft:   #FBEFD8;   /* amber clock, due soon */
	--bad:           #B3261E;  --bad-soft:    #FBE7E3;   /* late, fail, refused */
	--neutral-soft:  #EFE9DF;                            /* draft, archived */

	/* Brand markers: small tags only, never large areas */
	--brand-tsh:     #9A4314;  /* The Saffron House, deep saffron */
	--brand-ms:      #5E1A22;  /* Maison Saffron, Maison Bordeaux (brand book) */

	/* Overlays and shadows (all from --text, rgb 43 26 18) */
	--overlay:       rgba(43, 26, 18, 0.45);  /* behind a dialog */
	--overlay-soft:  rgba(43, 26, 18, 0.30);  /* behind the colour drawer */
	--overlay-chip:  rgba(43, 26, 18, 0.75);  /* small label on a photo */
	--edge:          rgba(43, 26, 18, 0.10);  /* thin edge round a colour chip */

	/* Type */
	--font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;  /* page titles, the greeting and the wordmark only */
	--fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

	/* Shape and space */
	--radius: 3px; --radius-sm: 2px;
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
	--shadow-1: 0 1px 2px rgba(43,26,18,.05);
	--shadow-2: 0 4px 12px rgba(43,26,18,.08);  /* hover on a card, the drawer */
	--touch: 44px;
}

/* Inter and Cormorant Garamond, served from the app itself (OFL licences in fonts/LICENSE.txt). No outside font service. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/CormorantGaramond-Medium.woff2') format('woff2'); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2'); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/CormorantGaramond-MediumItalic.woff2') format('woff2'); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font: var(--fw-regular) var(--fs-md)/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
a { color: var(--link); }
a:hover { color: var(--text); }

.topbar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 56px;
	padding: 6px max(16px, env(safe-area-inset-left));
	background: var(--nav);
	color: var(--text-on-dark);
	box-shadow: inset 0 -2px 0 var(--saffron);  /* the saffron thread */
}
/* Logo: the house elephants (The Saffron House artwork), a fine rule, then URVARA in serif capitals
   in the logo's peach. Peach only on the espresso bar: on ivory it fails contrast. */
.mark { display: block; width: 114px; height: 36px; }
.wordmark {
	display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
	padding-left: var(--space-3); margin-left: var(--space-1);
	border-left: 1px solid var(--nav-line);
	font: var(--fw-semibold) 21px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--logo); white-space: nowrap;
}
.wordmark small { font: var(--fw-medium) 8.5px/1 var(--font); letter-spacing: 0.42em; margin-right: -0.42em; color: var(--text-on-dark); opacity: 0.7; }
.spacer { flex: 1; }
.who { font-size: var(--fs-sm); color: var(--text-on-dark); opacity: 0.8; }
/* the hidden attribute always wins (header buttons are display: flex) */
[hidden] { display: none !important; }

.link {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch);
	background: none;
	border: 1px solid var(--nav-line);
	color: var(--text-on-dark);
	border-radius: var(--radius);
	padding: 0 var(--space-3);
	font: var(--fw-medium) var(--fs-md) var(--font);
	cursor: pointer;
	white-space: nowrap;
}
.topbar .link:hover { background: var(--nav-2); }

.view {
	max-width: 1040px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-4) 64px;
}

.status { color: var(--text-3); }

h1 {
	font: var(--fw-semibold) 28px/1.2 var(--font-display);  /* Cormorant runs small: 28 reads like 24 */
	margin: 0 0 var(--space-1);
}
.lede { color: var(--text-2); margin: 0 0 var(--space-6); }

.doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4);
}

.door {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-align: left;
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.door:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.door:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* A quiet header strip with the brand's small tag. */
.door-art {
	position: relative;
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 var(--space-6);
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
.door-art .arch { display: none; }
.door-art::after {
	display: inline-block;
	padding: 2px var(--space-2);
	border: 1px solid currentColor;
	border-radius: var(--radius-sm);
	font: var(--fw-semibold) var(--fs-xs)/1.4 var(--font);
	letter-spacing: 0.04em;
}
.door-tsh .door-art::after { content: 'TSH'; color: var(--brand-tsh); }
.door-ms .door-art::after { content: 'MS'; color: var(--brand-ms); }

.door-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-4) var(--space-6);
}
.door .tag {
	font: var(--fw-medium) var(--fs-xs) var(--font);
	color: var(--text-3);
}
.door .name { font: var(--fw-semibold) var(--fs-xl)/1.3 var(--font); margin: 2px 0 var(--space-1); }
.door .hint { color: var(--text-2); font-size: var(--fs-md); }
.door-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: var(--touch);
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
	font: var(--fw-semibold) var(--fs-md) var(--font);
	color: var(--link);
}
.door-foot .arrow { transition: transform 0.15s ease; }
.door:hover .door-foot .arrow { transform: translateX(3px); }

/* Brand tags for any screen: <span class="brandtag brand-tsh">TSH</span> */
.brandtag {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid currentColor;
	border-radius: var(--radius-sm);
	font: var(--fw-semibold) var(--fs-xs)/1.4 var(--font);
	letter-spacing: 0.04em;
	vertical-align: middle;
}
.brand-tsh { color: var(--brand-tsh); }
.brand-ms { color: var(--brand-ms); }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
	padding: var(--space-6);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: var(--touch);
	background: var(--accent);
	color: var(--on-accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 0 var(--space-4);
	font: var(--fw-semibold) var(--fs-md) var(--font);
	cursor: pointer;
	text-decoration: none;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.crumbs { margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--text-3); }
.crumbs button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--link);
	font: inherit;
	cursor: pointer;
}

@media (max-width: 520px) {
	.who { display: none; }
	.topbar { gap: 6px; }
	.topbar .link { padding: 0 10px; font-size: var(--fs-sm); }
	.wordmark { font-size: var(--fs-lg); }
	.wordmark small { display: none; }
	.mark { width: 88px; height: 28px; }
	.view { padding-top: var(--space-4); }
	.door-art { height: 48px; padding: 0 var(--space-4); }
	.door-body { padding: var(--space-4); }
}

/* ---------- reference library: a full page in a frame ---------- */
body.wide .view { max-width: none; padding: 14px 12px 0; }
body.wide .crumbs { margin-bottom: 10px; }
.libframe {
	display: block;
	width: 100%;
	height: calc(100vh - 118px);
	height: calc(100dvh - 118px);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

/* ---------- shared pieces ---------- */
.wordmark { cursor: pointer; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.input {
	width: 100%;
	min-height: var(--touch);
	padding: 10px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	/* 16 px so iPhone Safari does not zoom in on the field */
	font: var(--fs-lg) var(--font);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea.input { resize: vertical; }
.button.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.button.ghost:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
.button.danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.button.small { padding: 0 var(--space-3); font-size: var(--fs-sm); }
.button:disabled { opacity: 0.55; cursor: default; }
.icon { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); background: none; border: 0; border-radius: var(--radius); font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-2); }
.icon:hover { background: var(--surface-2); color: var(--text); }
.inline { display: flex; gap: var(--space-2); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--border-strong); }

/* Soft-fill status badge; the word inside says the status. */
.pill {
	display: inline-block;
	vertical-align: middle;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	font: var(--fw-semibold) var(--fs-xs)/1.5 var(--font);
	letter-spacing: 0;
	background: var(--neutral-soft);
	color: var(--text-2);
	white-space: nowrap;
}
.stage-mood-board-review { background: var(--warn-soft); color: var(--warn); }
.stage-active { background: var(--ok-soft); color: var(--ok); }
.stage-closed { background: var(--neutral-soft); color: var(--text-2); }
.stage-cancelled { background: var(--bad-soft); color: var(--bad); }

.problems { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--bad-soft); border: 1px solid var(--bad-soft); border-left: 3px solid var(--bad); color: var(--text); }
.problems ul { margin: 6px 0 0; padding-left: 20px; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--nav); color: var(--text-on-dark); padding: 10px 18px; border-radius: var(--radius); box-shadow: var(--shadow-2); font-size: var(--fs-md); z-index: 60; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.chip { min-height: var(--touch); border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); padding: 0 var(--space-3); font: var(--fw-medium) var(--fs-md) var(--font); font-variant-numeric: tabular-nums; color: var(--text-2); cursor: pointer; }
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: -6px -6px var(--space-4); overflow-x: auto; }
.tab { min-height: var(--touch); background: none; border: 0; padding: 0 var(--space-3); font: var(--fw-semibold) var(--fs-md) var(--font); font-variant-numeric: tabular-nums; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); }
a.tab { display: inline-flex; align-items: center; text-decoration: none; }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs.small { margin: 0 0 var(--space-3); }

/* ---------- collections home ---------- */
.titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.titlerow h1 { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--space-3) var(--space-4); }
.kpi .n { display: block; font: var(--fw-semibold) var(--fs-2xl)/1.25 var(--font); font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--fs-sm); color: var(--text-3); }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.ccard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; color: var(--text); text-decoration: none; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.ccard:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); color: var(--text); }
.ccover { display: block; aspect-ratio: 4 / 3; background: var(--neutral-soft); overflow: hidden; }
.ccover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cplaceholder {
	display: flex; align-items: center; justify-content: center; height: 100%;
	font: var(--fw-semibold) var(--fs-2xl) var(--font); color: var(--text-3); letter-spacing: 0.04em;
	background-color: var(--neutral-soft);
}
.cbody { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.crow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ccode { font: var(--fw-semibold) var(--fs-xs) var(--font); letter-spacing: 0.04em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cname { font: var(--fw-semibold) var(--fs-lg)/1.35 var(--font); }
.cmeta { font-size: var(--fs-sm); color: var(--text-3); }
.ccard.new { align-items: center; justify-content: center; gap: var(--space-2); min-height: 260px; border-style: dashed; border-color: var(--border-strong); box-shadow: none; color: var(--link); font-weight: var(--fw-semibold); }
.ccard.new .plus { font-size: 36px; line-height: 1; }
.ccard.new:hover { color: var(--accent-hover); }
.card.empty { text-align: center; color: var(--text-3); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.flabel { font: var(--fw-medium) var(--fs-sm) var(--font); color: var(--text-2); }
.fhint { font-size: var(--fs-xs); color: var(--text-3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.formfoot { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- record page ---------- */
.recordhead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.recordhead h1 { margin: 0; }
.eyebrow { font: var(--fw-semibold) var(--fs-xs) var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-1); font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Stage bar: done steps green, the current step blue, future steps grey. */
.stagebar { display: flex; list-style: none; padding: 0; margin: 0 0 var(--space-4); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.stagebar li { flex: 1; position: relative; padding: 10px 8px 10px 22px; font: var(--fw-semibold) var(--fs-sm) var(--font); color: var(--text-3); text-align: center; background: var(--surface); box-shadow: inset 0 -3px 0 var(--border-strong); }
/* a forward-pointing chevron: each step's own fill pokes into the next one */
.stagebar li:not(:last-child)::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) rotate(45deg); border-top: 1px solid var(--border); border-right: 1px solid var(--border); background: inherit; z-index: 2; }
.stagebar li.done { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 -3px 0 var(--ok); }
.stagebar li.now { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.stagebar li.off { background: var(--bad); color: var(--on-accent); box-shadow: none; }
.stagebar.long { overflow-x: auto; scrollbar-width: none; }
.stagebar.long li { flex: 1 0 auto; white-space: nowrap; padding-right: 14px; }

.record { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; }
.record .main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.record .main > .card { min-width: 0; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.card h2 { font: var(--fw-semibold) var(--fs-lg)/1.35 var(--font); margin: 0; }
.card h3 { font: var(--fw-semibold) var(--fs-md) var(--font); color: var(--text); margin: var(--space-4) 0 10px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) 20px; }
.fv, .field.wide, .fv.wide { display: flex; flex-direction: column; gap: 2px; }
.fv.wide, .field.wide { grid-column: 1 / -1; }
.fval { white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.fval.empty { color: var(--text-3); }

.boards { display: flex; flex-direction: column; gap: 22px; }
.boardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.boardhead h3 { margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.thumb { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--neutral-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .pdf { display: flex; align-items: center; justify-content: center; height: 100%; font: var(--fw-semibold) var(--fs-lg) var(--font); color: var(--text-2); }
.thumb .badge { position: absolute; left: 6px; bottom: 6px; background: var(--overlay-chip); color: var(--on-accent); font-size: 11px; padding: 2px 7px; border-radius: var(--radius-sm); }
.dropzone { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--touch); padding: 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--link); font: var(--fw-semibold) var(--fs-md) var(--font); cursor: pointer; }
.dropzone:hover { border-color: var(--accent); }

.list { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.list th { text-align: left; font: var(--fw-semibold) var(--fs-xs) var(--font); color: var(--text-2); background: var(--surface-2); padding: var(--space-2); border-bottom: 1px solid var(--border); }
.list td { padding: 10px var(--space-2); border-bottom: 1px solid var(--border); }

.decisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.decisions li { padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: 0 var(--radius) var(--radius) 0; text-transform: capitalize; }
.decisions li.rejected { border-left-color: var(--bad); background: var(--bad-soft); }
.decisions li p { margin: 6px 0 0; text-transform: none; }

.feed { position: sticky; top: 16px; }
.noteform { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; margin: var(--space-3) 0 var(--space-4); }
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow: auto; }
.ev { padding-left: var(--space-3); border-left: 2px solid var(--border); }
.ev.comment { border-left-color: var(--text-3); }
.ev.system { border-left-color: var(--border-strong); }
.ev p { margin: 2px 0 0; font-size: var(--fs-md); white-space: pre-wrap; }
.evhead { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ev .old { text-decoration: line-through; color: var(--text-3); }

.modalwrap { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; }
.modal { width: min(520px, 100%); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; }
.modal h2 { margin: 0; font: var(--fw-semibold) var(--fs-xl)/1.3 var(--font); }

/* ---------- colour library drawer ---------- */
.backdrop { position: fixed; inset: 0; background: var(--overlay-soft); z-index: 54; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--surface); z-index: 55; padding: 18px 18px 24px; overflow: auto; box-shadow: var(--shadow-2); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font: var(--fw-semibold) var(--fs-xl) var(--font); }
.drawer .chips { margin: 0; }
.drawer .chip { padding: 0 10px; font-size: var(--fs-sm); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.swatch { display: flex; flex-direction: column; gap: var(--space-1); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.chipcolour { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--edge); }
.chipcolour .tick { position: absolute; right: 4px; top: 4px; background: var(--surface); color: var(--ok); border-radius: 999px; width: 18px; height: 18px; font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center; }
.swatch .code { font: var(--fw-semibold) var(--fs-sm) var(--font); font-variant-numeric: tabular-nums; }
.swatch .cname { font: var(--fs-xs)/1.2 var(--font); color: var(--text-3); line-height: 1.2; }

/* ---------- designs ---------- */
.tabtools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: 14px; }
.tabtools > :last-child { margin-left: auto; }
.emptytab { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.dcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none; background: var(--surface); }
.dcard:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); color: var(--text); }
.dthumb { display: block; aspect-ratio: 4 / 3; background: var(--neutral-soft); overflow: hidden; }
.dthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cplaceholder.small { font-size: var(--fs-xl); }
.dname { font: var(--fw-semibold) var(--fs-md)/1.35 var(--font); }
.drawing .drawingimg { display: block; border-radius: var(--radius); overflow: hidden; background: var(--neutral-soft); }
.drawing img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.waiting.frozen { background: var(--ok-soft); color: var(--ok); margin-left: 6px; }
.cwlist { display: flex; flex-direction: column; gap: 14px; }
.cwcard { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.cwhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.saree { width: 100%; }
.saree svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.saree.big { margin: 4px 0 6px; }
.sareelabels { display: flex; font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.sareelabels span { text-align: center; min-width: 0; overflow-wrap: anywhere; }
.sareelabels span:first-child { text-align: left; min-width: 84px; white-space: nowrap; }
.sareelabels span:last-child { text-align: right; min-width: 84px; white-space: nowrap; }
.cwslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cwslot { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.cwslot .cchip { grid-row: 1 / 3; }
.cwpic { width: 120px; }
/* Colour chip; a diagonal line means no colour chosen yet. */
.cchip { display: inline-block; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--edge); background-image: linear-gradient(135deg, transparent 46%, var(--border-strong) 46% 54%, transparent 54%); }
.cchip[style*="#"] { background-image: none; }
.cchip.big { width: 44px; height: 44px; flex: none; }
.modal.wide { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal .form { max-width: none; }
.slotpick { display: flex; flex-direction: column; gap: var(--space-2); }
.slotrow { display: flex; align-items: center; gap: 6px; }
.slotbtn { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font: var(--fs-md) var(--font); color: var(--text); text-align: left; cursor: pointer; }
.slotbtn:hover { border-color: var(--accent); }
.slotlabel { display: flex; flex-direction: column; }
.formfoot .spacer { flex: 1; }
.specs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.specs a { color: var(--link); font-weight: var(--fw-semibold); }
.specs li.old a { color: var(--text-3); font-weight: var(--fw-medium); }
.specs p { margin: 2px 0 0; }
.cwlines { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.cwlines li { display: grid; grid-template-columns: 26px auto 1fr; gap: var(--space-2); align-items: center; }
.cwlines .cchip { width: 26px; height: 26px; border-radius: var(--radius-sm); }
.warn { color: var(--warn); background: var(--warn-soft); padding: 6px 10px; border-radius: var(--radius); margin: 0; }
.notice { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--ok-soft); border: 1px solid var(--ok-soft); border-left: 3px solid var(--ok); color: var(--text); }
.notice p { margin: 4px 0 0; }
.notice ul { margin: 6px 0 0; padding-left: 20px; font-size: var(--fs-md); }

@media (max-width: 860px) {
	.record { grid-template-columns: minmax(0, 1fr); }
	.stagebar { overflow-x: auto; scrollbar-width: none; }
	.stagebar li { flex: 1 0 auto; white-space: nowrap; padding-right: 14px; }
	.feed { position: static; }
	.kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.two, .fgrid { grid-template-columns: 1fr; }
	.stagebar li { font-size: 11px; padding: 8px 14px 8px 18px; }
	.titlerow .button { display: none; }
	.titlerow .button.keep { display: inline-flex; }
	.card { padding: var(--space-4); }
}

/* Waiting / clock badge: a soft fill plus the words. */
.waiting { display: inline-block; margin-top: 4px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font: var(--fw-semibold) var(--fs-xs)/1.5 var(--font); font-variant-numeric: tabular-nums; }
.stage-brief, .stage-research-\&-mood, .stage-colour-story, .stage-plan { background: var(--warn-soft); color: var(--warn); }
.stage-founder-review, .stage-colour-approval, .stage-punch-card, .stage-loom-check { background: var(--warn-soft); color: var(--warn); }
.stage-in-production, .stage-ready-for-wo, .stage-ready-for-order, .stage-completed { background: var(--ok-soft); color: var(--ok); }
/* outside jobs, fair trade (P1a-08): the store's steps, the wait for payment, in stock */
.stage-dispatched, .stage-received-for-inspection, .stage-payment { background: var(--warn-soft); color: var(--warn); }
.stage-with-maker { background: var(--bad-soft); color: var(--bad); }
.stage-in-stock { background: var(--ok-soft); color: var(--ok); }
.payact { margin-top: var(--space-1); }
.jobrow .waiting { align-self: flex-start; }

/* ---------- my work, decisions, production ---------- */
.inline.wrap { flex-wrap: wrap; }
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--space-3); }
.wcard { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--space-3); color: var(--text); text-decoration: none; min-width: 0; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.wcard:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); color: var(--text); }
.wthumb { flex: none; width: 76px; height: 76px; border-radius: var(--radius); overflow: hidden; background: var(--neutral-soft); display: flex; align-items: center; justify-content: center; text-align: center; font: var(--fw-semibold) 11px/1.2 var(--font); color: var(--text-3); padding: 4px; }
.wthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wthumb:has(img) { padding: 0; }
.wbody { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.wbody .cname { font-size: var(--fs-lg); }
.wnext { font: var(--fw-semibold) var(--fs-md) var(--font); color: var(--text); }
.wnext.wait { color: var(--warn); }
.wjobs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.wjobs .late, .joblist .late .small, .updates .late strong { color: var(--bad); }
.card.decide { margin-bottom: var(--space-6); }
.card.decide .wlist { margin-top: 14px; }
.decisions-none { margin: -8px 0 20px; }
.joblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jobrow { display: flex; flex-direction: column; gap: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) 14px; background: var(--surface); color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.jobrow:hover { border-color: var(--border-strong); color: var(--text); }
.jobrow.late { border-color: var(--bad); }
.waiting.late { background: var(--bad-soft); color: var(--bad); }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); font-size: var(--fs-md); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.updateform { margin: 14px 0 6px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.updates { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.updates li { display: flex; flex-direction: column; gap: 6px; }
.updates p { margin: 0; }
.cwcard.corr p { margin: 0; }
.pill.corr-open { background: var(--warn-soft); color: var(--warn); }
.pill.corr-with_vendor { background: var(--accent-soft); color: var(--accent); }
.pill.corr-returned { background: var(--ok-soft); color: var(--ok); }
.pill.corr-closed { background: var(--neutral-soft); color: var(--text-3); }
.cwcard.corr.closed { opacity: 0.75; }
@media (max-width: 520px) {
	.three { grid-template-columns: 1fr 1fr; }
	.wthumb { width: 60px; height: 60px; }
}
.field .inline > .input { flex: 1; min-width: 0; }
.field .inline > .button { white-space: nowrap; flex: none; }
.cardhead .button { white-space: nowrap; }
.settingslink { margin-top: 28px; text-align: center; }

/* ---------- embroidered sarees: samples, costing, QC ---------- */
.checklist { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pill.sample-in_progress { background: var(--neutral-soft); color: var(--text-3); }
.pill.sample-submitted { background: var(--warn-soft); color: var(--warn); }
.pill.sample-approved, .pill.qc-pass { background: var(--ok-soft); color: var(--ok); }
.pill.sample-redo, .pill.qc-fail { background: var(--bad-soft); color: var(--bad); }
.pill.tiny { font-size: 11px; padding: 0 6px; margin-left: 6px; }
.kpis.small-kpis { margin: 0 0 14px; }
.kpis.small-kpis .n { font-size: var(--fs-xl); }
table.costs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
table.costs th { text-align: left; font: var(--fw-semibold) var(--fs-xs) var(--font); color: var(--text-2); background: var(--surface-2); padding: var(--space-2); border-bottom: 1px solid var(--border); }
table.costs td { padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
table.costs td.num { text-align: right; white-space: nowrap; font-weight: var(--fw-semibold); }
table.costs tr.actual td { background: var(--surface-2); }
.danger-text { color: var(--bad); border-color: var(--bad); }
.button.ghost.danger-text { color: var(--bad); border-color: var(--bad); }
.button.ghost.danger-text:hover { background: var(--bad-soft); color: var(--bad); }
.card.qcpanel { border: 1px solid var(--border-strong); border-top: 3px solid var(--nav); }
@media (max-width: 520px) {
	table.costs thead { display: none; }
	table.costs tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--border); }
	table.costs td { border: none; padding: 2px 4px; }
	table.costs td:nth-child(3), table.costs td:nth-child(4) { display: none; }
	/* phone: what it is for and the amount on one line, the details and Edit under them */
	table.costs tr { grid-template-areas: 'head amt' 'desc edit'; align-items: center; }
	table.costs td:nth-child(1) { grid-area: head; font-weight: var(--fw-semibold); }
	table.costs td:nth-child(2) { grid-area: desc; color: var(--text-3); font-size: var(--fs-sm); }
	table.costs td:nth-child(5) { grid-area: amt; }
	table.costs td:nth-child(6) { grid-area: edit; justify-self: end; }
}

/* garments: range plan, measurement chart, sizes */
.rangeline { margin: 4px 0 18px; }
.rangeline h3 { margin: 0; }
.rangeline .crow { margin-bottom: 8px; }
.tablewrap { overflow-x: auto; }
table.chart { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-width: 100%; }
table.chart th, table.chart td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.chart thead th { font: var(--fw-semibold) var(--fs-xs) var(--font); color: var(--text-2); background: var(--surface-2); }
table.chart thead th:first-child { text-align: left; }
table.chart tbody th { text-align: left; font-weight: var(--fw-semibold); }
table.chart td.empty { color: var(--text-3); }
table.chart .input { width: 72px; padding: 6px; text-align: right; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

/* store: product photos */
.thumbs.big .thumb { width: 120px; height: 150px; }
.thumbwrap { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.thumbwrap .link { color: var(--link); border-color: var(--border-strong); padding: 0 10px; font-size: var(--fs-xs); }

/* small phones: the mark alone, so Store, Library, Colours and Sign out fit */
@media (max-width: 430px) {
	.wordmark { display: none; }
	.topbar { gap: 4px; padding-left: 10px; padding-right: 10px; }
	.topbar .link { padding: 0 8px; }
}

/* help: the knowledge base */
.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--text); max-width: 760px; }
.helpguide { display: flex; flex-direction: column; gap: var(--space-4); max-width: 860px; }
.helpvideo video { width: 100%; border-radius: var(--radius); background: var(--nav); display: block; aspect-ratio: 1180 / 820; }
.helpsteps { margin: 8px 0 0; padding-left: 22px; line-height: 1.55; }
.helpsteps li { margin: 0 0 8px; }
.helpcards { margin: 8px 0 18px; }
.helpcards .dcard { min-height: 0; }
.helphead { margin: var(--space-4) 0 0; }
.howto { display: flex; flex-direction: column; gap: var(--space-3); max-width: 860px; }
.howto h2 { margin: 0; }
.howgroup { border-top: 1px solid var(--border); }
.howgroup > summary { cursor: pointer; padding: var(--space-3) 0; min-height: var(--touch); box-sizing: border-box; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.howgroup > summary .count { color: var(--text-3); font-weight: var(--fw-medium); }
.howgroup[open] > summary { padding-bottom: var(--space-2); }
.howgroup .howlinks { padding-bottom: var(--space-3); }
.howlinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.howlink { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; min-height: var(--touch); }
.howlink:hover { border-color: var(--border-strong); }
.howlink[hidden] { display: none; }
.howtitle { font-weight: var(--fw-semibold); }
.howsum { font-size: var(--fs-sm); color: var(--text-3); }
.howsteps { margin: 0; padding-left: 22px; line-height: 1.55; }
.howsteps > li { margin: 0 0 var(--space-4); }
.howsteps > li:last-child { margin-bottom: 0; }
.howsteps p { margin: 0; }
.howshot { margin: var(--space-3) 0 0; }
.howshot.wide img { max-width: 720px; }
.howshot img { display: block; width: 100%; max-width: 340px; height: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; }
.glossary dt { font-weight: var(--fw-semibold); }
.glossary dd { margin: 0; color: var(--text-2); }
@media (max-width: 520px) { .glossary { grid-template-columns: 1fr; } .glossary dd { margin-bottom: 6px; } }

/* ---------- finance home (P1a-03): the cost table, with its own phone layout ---------- */
table.costs.fin th.num { text-align: right; }
@media (max-width: 520px) {
	/* phone: the job or vendor with its details on the left, what is owed on the right */
	table.costs.fin tr { grid-template-areas: 'head amt'; align-items: start; }
	table.costs.fin td:nth-child(1) { grid-area: head; font-weight: normal; }
	table.costs.fin td:nth-child(2), table.costs.fin td:nth-child(3) { display: none; }
	table.costs.fin td:nth-child(4) { display: block; grid-area: amt; }
}

/* stage clocks (P1a-05) */
.crow:has(.clock) { flex-wrap: wrap; justify-content: flex-start; }
.crow:has(.clock) .ccode { margin-right: auto; }
.clock { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.clock.amber { background: var(--warn-soft); color: var(--warn); }
.clock.red { background: var(--bad-soft); color: var(--bad); }
details.clocks { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
details.clocks summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; font-weight: var(--fw-medium); }
.clockrow { display: grid; grid-template-columns: 1fr 88px 72px 136px; gap: var(--space-2); align-items: center; padding: var(--space-1) 0; }
.clockrow .input { min-height: var(--touch); }
@media (max-width: 600px) { .clockrow { grid-template-columns: 1fr 72px auto; } .clockrow > :last-child { grid-column: 1 / -1; } }

/* scorecards (P1a-07) */
.scoretiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.scoretiles .kpi .hint { display: block; margin-top: var(--space-1); }
@media (max-width: 900px) { .scoretiles { grid-template-columns: repeat(2, 1fr); } }
.titlerow select.input { width: auto; max-width: 220px; flex: 0 0 auto; min-height: var(--touch); }

/* Store Today (P1a-09) */
.card.today h2 .count { display: inline-block; min-width: 24px; padding: 0 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--text-2); font-size: var(--fs-sm); text-align: center; }
.todaylist { list-style: none; margin: 0; padding: 0; }
.todayrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.todayrow:first-child { border-top: 0; }
.todaymain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-height: var(--touch); justify-content: center; }
.todayrow .button { min-height: var(--touch); flex: 0 0 auto; }

/* "Studio has been updated" (a page left open after a release) */
.updatebar { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--nav); color: var(--text-on-dark); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.updatebar .button { min-height: var(--touch); }

/* Background jobs on Settings (OPS-04) */
.jobline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.jobline p { margin: 2px 0 0; overflow-wrap: anywhere; }
.jobline .button { flex: none; }

/* Trust line on the money screens (DATA-02) */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
.trustbadge { padding: 2px var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--fs-xs); white-space: nowrap; }

/* Tasks (plan P1a-06). Only the design tokens from main.css (plan §6, rule R14): no colours here. */

.taskcard .cardhead { margin-bottom: var(--space-3); }
.taskcard .cardhead h2 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tasklist { display: flex; flex-direction: column; }
.taskrow { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); min-width: 0; }
.tasklist > .taskrow:first-child { border-top: 0; padding-top: 0; }
.taskrow.closed .tasktitle { color: var(--text-3); text-decoration: line-through; }
.taskmain { flex: 1; min-width: 0; min-height: var(--touch); display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; }
.tasktitle { font: var(--fw-semibold) var(--fs-md)/1.4 var(--font); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; overflow-wrap: anywhere; }
.taskmeta { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.taskdue { color: var(--text-2); font-weight: var(--fw-medium); }
.taskdue.late { color: var(--bad); }
.tasknotes { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taskside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); max-width: 45%; }
.tasklink { display: inline-flex; align-items: center; min-height: var(--touch); font-size: var(--fs-sm); text-align: right; overflow-wrap: anywhere; }
.taskside .pill + .tasklink { margin-top: calc(-1 * var(--space-2)); }
.taskbuttons { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.pill.task-progress { background: var(--accent-soft); color: var(--accent); }
.pill.task-waiting { background: var(--warn-soft); color: var(--warn); }
.pill.task-done { background: var(--ok-soft); color: var(--ok); }
.pill.task-cancelled { background: var(--neutral-soft); color: var(--text-3); }
.pill.task-late, .pill.task-high { background: var(--bad-soft); color: var(--bad); }
.taskhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.taskhead h1 { margin: 0; }
.view > .taskcard { margin-bottom: var(--space-6); }

/* The Tasks button makes six in the top bar for Meera and Anmol: on small phones it wraps to two rows. */
@media (max-width: 430px) {
	.topbar { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

@media (max-width: 520px) {
	.taskrow { flex-direction: column; gap: var(--space-2); }
	.taskside { max-width: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.tasklink { text-align: left; }
}

/* Connections (plan P1b-01). Only the design tokens from main.css (plan §6, rule R14): no colours here. */

.conncard { margin-bottom: var(--space-6); }
.conngrid { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.conngrid dt { color: var(--text-3); font-size: var(--fs-sm); }
.conngrid dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.conngrid dd.connerror { color: var(--bad); }
.connbuttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.connbuttons .button { min-height: var(--touch); }
.connresult:not(:empty) { margin-top: var(--space-4); }
.pill.conn-ok { background: var(--ok-soft); color: var(--ok); }
.pill.conn-error { background: var(--bad-soft); color: var(--bad); }
.pill.conn-new { background: var(--warn-soft); color: var(--warn); }
.pill.conn-off { background: var(--neutral-soft); color: var(--text-3); }

@media (max-width: 600px) {
	.conngrid { grid-template-columns: 1fr; gap: 2px; }
	.conngrid dd { margin-bottom: var(--space-2); }
	.connbuttons .button { flex: 1 1 100%; }
}

/* The shell (docs/16 §3): left menu on iPad and computer, bottom tabs on phone, search, account menu. */
.mark { cursor: pointer; }
.frame { display: flex; align-items: stretch; min-height: calc(100vh - 58px); }
.frame .view { flex: 1; min-width: 0; }

.side { flex: none; width: 208px; padding: var(--space-3) var(--space-2); background: var(--surface); border-right: 1px solid var(--border); }
.side[hidden] { display: none; }
.side a, .morebody a, .morebody button { display: flex; align-items: center; width: 100%; min-height: var(--touch); padding: 0 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.side a:hover, .morebody a:hover, .morebody button:hover { background: var(--surface-2); }
.side a[aria-current=page] { background: var(--accent-soft); font-weight: var(--fw-semibold); }
.sidecap { margin: var(--space-4) 10px var(--space-1); font-size: var(--fs-xs); color: var(--text-3); }
.side a.recent, .morebody a.recent { display: block; min-height: 0; padding: 7px 10px; overflow: hidden; font-size: var(--fs-sm); color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }

.gsearch { position: relative; flex: 1; max-width: 460px; margin-left: var(--space-3); }
.gsearch[hidden] { display: none; }
.gsearchinput { width: 100%; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--nav-2); border-radius: var(--radius); background: var(--nav-2); color: var(--text-on-dark); font: inherit; font-size: var(--fs-sm); }
.gsearchinput::placeholder { color: var(--text-on-dark); opacity: 0.8; }
.gsearchopen, .gsearchclose { display: none; }
.gresults { position: absolute; top: 42px; left: 0; right: 0; z-index: 30; max-height: 70vh; overflow-y: auto; padding: var(--space-1) 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-1); color: var(--text); }
.gresults[hidden] { display: none; }
.gcap { padding: var(--space-2) var(--space-3) 2px; font-size: var(--fs-xs); color: var(--text-3); }
.gresults a, .gresults button { display: block; width: 100%; min-height: var(--touch); padding: 6px var(--space-3); border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.gresults a:hover, .gresults a:focus, .gresults button:hover, .gresults button:focus { background: var(--accent-soft); }
.gtitle { display: block; }
.gmeta { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.gnone { margin: 0; padding: var(--space-3); color: var(--text-2); }

.account { position: relative; }
.account[hidden] { display: none; }
.avatar { width: var(--touch); height: var(--touch); padding: 6px; border: 0; background: none; color: var(--text-on-dark); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.avatarcircle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nav-2); font-size: var(--fs-xs); }
.accountmenu { position: absolute; top: 46px; right: 0; z-index: 30; min-width: 190px; padding: var(--space-1) 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.accountmenu[hidden] { display: none; }
.accountname { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text-3); border-bottom: 1px solid var(--border); }
.accountmenu a, .accountmenu button { display: flex; align-items: center; width: 100%; min-height: var(--touch); padding: 0 var(--space-3); border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.accountmenu a:hover, .accountmenu button:hover { background: var(--surface-2); }

.bottomtabs { display: none; }
.moresheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: var(--overlay); }
.morebody { width: 100%; max-height: 75vh; overflow-y: auto; padding: var(--space-2) var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border-strong); }

@media (max-width: 760px) {
	.side { display: none; }
	body.hasmenu .view { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
	.bottomtabs:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border-strong); }
	.bottomtabs a, .bottomtabs button { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 2px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: center; text-decoration: none; cursor: pointer; }
	.bottomtabs [aria-current=page] { color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 2px 0 var(--accent); }
	.topbar #colours { display: none; }
	.gsearch { flex: 0 0 auto; margin-left: auto; max-width: none; }
	.gsearchopen { display: inline-flex; }
	.gsearchinput { display: none; }
	.topbar .spacer { display: none; }
	body.searching .gsearch { position: static; flex: 1; margin-left: 0; }
	body.searching .gsearchopen, body.searching .topbar .mark, body.searching .account { display: none; }
	body.searching .gsearch { display: flex; gap: var(--space-2); align-items: center; }
	body.searching .gsearchinput { display: block; flex: 1; min-width: 0; }
	body.searching .gsearchclose { display: inline-flex; flex: none; }
	body.searching .gresults { top: 58px; left: var(--space-2); right: var(--space-2); }
	.topbar { position: relative; }
}

/* Something's wrong (UX-12): always in the top bar for staff and marketing. */
.wrong { flex: none; min-height: var(--touch); padding: 0 var(--space-2); color: var(--text-on-dark); white-space: nowrap; }
.wrong[hidden] { display: none; }
.wrongshort { display: none; }
@media (max-width: 767px) {
	.wrongfull { display: none; }
	.wrongshort { display: inline; }
}

/* Impersonation: on every screen, never scrolled away. */
.imperbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) max(16px, env(safe-area-inset-left)); background: var(--warn-soft); color: var(--text); border-bottom: 2px solid var(--warn); font-size: var(--fs-sm); }
.imperbar .button { flex: 0 0 auto; min-height: var(--touch); }
.imperlist { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; margin-top: var(--space-2); }
.imperperson { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--touch); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.imperperson:hover { background: var(--surface-2); }
.impername { font-weight: var(--fw-medium); }
.impertrail { margin-top: var(--space-3); max-height: 24vh; overflow-y: auto; overflow-wrap: anywhere; }
.impertrail h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.impertrail p { margin: 0 0 4px; }
@media (max-width: 760px) {
	.imperbar .button { width: 100%; }
}

/* The bell (docs/16 §3). */
.bell { position: relative; }
.bell[hidden] { display: none; }
.bellbutton { position: relative; display: flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; background: none; color: var(--text-on-dark); cursor: pointer; }
.bellicon { display: flex; }
.bellcount { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: var(--on-accent); font: var(--fw-semibold) var(--fs-xs)/18px var(--font); text-align: center; }
.bellcount[hidden] { display: none; }
.bellpanel { position: absolute; top: 46px; right: 0; z-index: 30; width: 340px; max-height: 70vh; overflow-y: auto; padding: var(--space-1) 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-1); color: var(--text); }
.bellpanel[hidden] { display: none; }
.bellpanel a { display: block; min-height: var(--touch); padding: 6px var(--space-3); color: var(--text); text-decoration: none; }
.bellpanel a:hover, .bellpanel a:focus { background: var(--accent-soft); }
.bellpanel .bellall { display: flex; align-items: center; border-top: 1px solid var(--border); color: var(--link); }
.belllate { color: var(--bad); }
.bellnone { margin: 0; padding: var(--space-3); color: var(--text-2); }
@media (max-width: 760px) {
	body.searching .bell { display: none; }
	.bell { position: static; }
	.bellpanel { top: 58px; left: var(--space-2); right: var(--space-2); width: auto; }
}

/* WhatsApp chats (R-09). Design tokens only (R14). */
.chatlist { padding: 0; }
.chatrow { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-height: var(--touch); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.chatrow:last-child { border-bottom: 0; }
.chatrow.waiting { background: var(--accent-soft); }
.chatrowmain { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.chatpreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatvendor { justify-content: space-between; padding: 6px 0; }
.chatthread { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.chatmsg { max-width: min(560px, 88%); padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.chatmsg.out { align-self: flex-end; background: var(--accent-soft); }
.chatbody { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chatfail { margin: 4px 0; padding: 6px 8px; color: var(--bad); background: var(--bad-soft); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.chatimg { display: block; max-width: 100%; max-height: 320px; margin: 4px 0; border-radius: var(--radius-sm); }
.chataudio { display: block; width: 100%; margin: 4px 0; }
.chatcomposer textarea { width: 100%; }
.linkbutton { min-height: var(--touch); padding: 0; background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; }
.chathead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.chathead button { min-height: var(--touch); }
.chatvendor button, .chatmsg .button { min-height: var(--touch); }
.chatfilters { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.chatfilters .formfoot { grid-column: 1 / -1; }
.chatunmatched { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.chatunmatched:last-child { border-bottom: 0; }
.chatunmatched .chatrow { border-bottom: 0; }
.chatunmatched .inline { padding: 0 16px; }
.chatunmatched button { min-height: var(--touch); }

/* The portal look (docs/16 §7): bigger text, large cards, phone first, no internal menus. */
body.portal .wordmark, body.portal #colours, body.portal #side, body.portal #tabs { display: none; }
body.portal .topbar .spacer { display: block; }
body.portal .view { max-width: 620px; font-size: var(--fs-lg); }
.portalpage h1 { margin-bottom: var(--space-1); }
.portalsub { margin: 0 0 var(--space-4); color: var(--text-2); }
.portalnext, .portalcard { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.portalnext { margin-bottom: var(--space-4); }
.portalnext h2, .portalcard h2 { margin: 0; font: var(--fw-semibold) var(--fs-lg)/1.35 var(--font); color: var(--text); }
.portalnext p, .portalcard p { margin: var(--space-1) 0 0; color: var(--text-2); }
.portalaction { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: var(--space-3); text-decoration: none; }
.portalcards { display: grid; gap: var(--space-3); }
.portalcard { display: block; min-height: 72px; color: var(--text); text-decoration: none; }
a.portalcard:hover { background: var(--surface-2); }
.portalnote { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-3); }
@media (min-width: 761px) {
	.portalcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mkphoto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-2); border-radius: var(--radius); background: var(--surface-2); }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.mkadd { margin: var(--space-3) 0; min-height: 44px; }
.mkstage { margin-top: var(--space-4); }
.mkstage h2 { margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-lg)/1.35 var(--font); color: var(--text); }
.mkback { display: inline-flex; align-items: center; min-height: 44px; }
.mkstagebar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.mkdrafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.mkdrafts figure { margin: 0; }
.mkfield { margin-bottom: var(--space-2); }
.mkfield p { margin: 0; }
.mkcheck { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: center; min-height: 44px; }
.mkcheck label { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; }
.mkpick { display: block; min-height: 44px; }
.mkstagebar .stage-now { background: var(--text); color: var(--surface); }

/* The vendor portal (P2-03). */
.portaltabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.portaltab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: var(--fw-semibold); }
.portaltab.now { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.portaljobs { display: grid; gap: var(--space-3); }
.portaljob.finished { background: var(--surface-2); }
.portaljobline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.portalcard p.bad { color: var(--bad); font-weight: var(--fw-medium); }
.portalback { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--link); text-decoration: none; }
.portalbuttons { display: grid; gap: 0; margin-bottom: var(--space-4); }
.portalfacts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; }
.portalfacts dt { color: var(--text-2); }
.portalfacts dd { margin: 0; text-align: right; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.portalline { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.portalline:first-of-type { border-top: 0; }
.portalline p { margin: 0 0 var(--space-1); }
.portalphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.portalphotos img { width: 100%; border-radius: var(--radius); display: block; }
.portalpays p { margin: var(--space-1) 0 0; }
.portalnext h2 a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--link); }
.portalnext .portalbig { margin: var(--space-1) 0 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text); }

/* A vendor's people (P2-12): staff side, in a dialog. */
.vplist { margin-bottom: var(--space-4); }
.vpperson { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.vpline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.vpbuttons { display: flex; gap: var(--space-2); }
.vpbuttons .button { min-height: var(--touch); }
.vpperson .form { margin-top: var(--space-3); }

/* Screens before sign-in (gate.js): the website's sign-in page. Warm paper, the emblem, a small label,
   a Cormorant title, one card and madder pill buttons. After sign-in the normal Studio look takes over. */
body.gate { background: var(--paper); }
body.gate .topbar, body.gate #side, body.gate #tabs { display: none; }
body.gate .frame { display: block; }
body.gate .view { max-width: none; font-size: var(--fs-md); padding: 0; margin: 0; }
.gatepage {
	display: flex; flex-direction: column; align-items: center;
	min-height: 100vh; min-height: 100dvh;
	padding: 56px var(--space-4) var(--space-8);
	text-align: center;
}
.gatemark { display: block; width: 120px; height: auto; margin-bottom: var(--space-6); }
/* 14px: saffron text passes 4.5:1 on --paper only at this size or larger (plan §6) */
.gatelabel { margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-md)/1.3 var(--font); letter-spacing: 0.18em; margin-right: -0.18em; text-transform: uppercase; color: var(--saffron); }
.gatepage h1 { margin: 0 0 var(--space-6); font: var(--fw-medium) 44px/1.1 var(--font-display); color: var(--text); }
.gatecard {
	width: 100%; max-width: 420px; padding: var(--space-6);
	background: var(--surface);
	border: 1px solid var(--border); border-top: 3px solid var(--saffron); border-radius: 4px;
	text-align: left;
}
.gatecard-vendor { border-top-color: var(--zari); }
.gatecard h2 { margin: 0 0 var(--space-2); font: var(--fw-semibold) var(--fs-lg)/1.35 var(--font); color: var(--text); }
.gatecard p { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--fs-md); }
.gatehelp { font-size: var(--fs-sm) !important; color: var(--text-3) !important; }
.gatelogin { min-height: 200px; margin-top: var(--space-3); }
.gatelogin iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.gatebutton {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; margin-top: var(--space-4); padding: 12px var(--space-6);
	background: var(--madder); color: var(--on-accent);
	border: 1px solid var(--madder); border-radius: 999px;
	font: var(--fw-semibold) var(--fs-lg)/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.gatebutton:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.gatebutton.quiet { background: transparent; color: var(--madder); }
.gatebutton.quiet:hover { background: var(--accent-soft); border-color: var(--madder); color: var(--madder); }
.gatebutton + .gatehelp { margin-top: var(--space-4); }
.gatefield { display: block; margin-top: var(--space-3); font-weight: var(--fw-medium); color: var(--text); }
.gatefield input { display: block; width: 100%; min-height: 48px; margin-top: var(--space-1); padding: 0 var(--space-3); font: var(--fw-regular) var(--fs-lg) var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.gateerror { margin: var(--space-3) 0 0 !important; padding: var(--space-2) var(--space-3); background: var(--bad-soft); color: var(--bad) !important; border-radius: var(--radius); }
.gatenote { max-width: 420px; margin: var(--space-6) 0 0; font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 520px) {
	.gatepage { padding-top: var(--space-8); }
	.gatepage h1 { font-size: 36px; margin-bottom: var(--space-4); }
	.gatecard { padding: var(--space-4); }
}

/* The papers an outside person accepts (P2-05). */
.gatedoc { margin-top: var(--space-2); border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.gatedoc summary { min-height: 48px; padding: var(--space-3); font-weight: var(--fw-medium); color: var(--text); cursor: pointer; }
.gatedoc p { margin: 0; padding: 0 var(--space-3) var(--space-3); }
.gatetick { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); min-height: 48px; color: var(--text); cursor: pointer; }
.gatetick input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--madder); }
.gateactions { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.gatebutton:disabled { opacity: 0.5; cursor: not-allowed; }

/* The parts every record page shares (docs/16 §4). */
.recordmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.recordowner { font-weight: var(--fw-medium); color: var(--text); }
.brandtag { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.03em; }
.brandtag.TSH { color: var(--brand-tsh); }
.brandtag.MS { color: var(--brand-ms); }
.recordmeta .badge { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.recordmeta .badge.ok { background: var(--ok-soft); color: var(--ok); }
.recordmeta .badge.warn { background: var(--warn-soft); color: var(--warn); }
.recordmeta .badge.bad { background: var(--bad-soft); color: var(--bad); }
.nextstrip { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); }
.moremenu { position: relative; }
.moremenu summary { list-style: none; cursor: pointer; }
.moremenu summary::-webkit-details-marker { display: none; }
.moreitems { position: absolute; right: 0; z-index: 25; display: flex; flex-direction: column; gap: var(--space-2); min-width: 200px; margin-top: var(--space-1); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.moreitems .button { width: 100%; }
.activitychips { margin-bottom: var(--space-2); }
@media (max-width: 520px) {
	.moreitems { left: 0; right: auto; }
}

/* The three bands of every home (docs/16 §6). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi.tile { display: block; color: var(--text); text-decoration: none; }
a.kpi.tile:hover { background: var(--surface-2); }
.tile .n { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.tile .l { display: block; }
/* One link tile stays tile-sized instead of filling the row. */
.tiles.linktiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.linktile .l { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.tilehint { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.tilehint.late { color: var(--bad); }
.workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.wqueues, .wmine { min-width: 0; }
.workspace .wlist { grid-template-columns: minmax(0, 1fr); }
.homecap { margin: var(--space-6) 0 var(--space-3); }
@media (max-width: 1000px) {
	.workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The company dashboard's tables (P1b-06): every column stays on a phone. */
.ovwrap { overflow-x: auto; }
table.ov { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
table.ov th { text-align: left; font: var(--fw-semibold) var(--fs-xs) var(--font); color: var(--text-2); background: var(--surface-2); padding: var(--space-2); }
table.ov td { padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
table.ov .num { text-align: right; white-space: nowrap; }
table.ov td.num { font-weight: var(--fw-semibold); }

/* One list for every page (docs/16 §5). */
.listbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.listbar[hidden], .listfoot[hidden] { display: none; }
.listsearch { flex: 1 1 200px; min-width: 0; width: auto; }
.listfilter { flex: 0 1 auto; min-width: 0; }
.listfilter select { width: auto; max-width: 100%; }
.tabcount { font-weight: var(--fw-regular); color: var(--text-3); }
.listfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch); margin-top: var(--space-3); }
.listtable tbody tr { cursor: pointer; }
.listtable tbody tr:hover { background: var(--surface-2); }
.listtable td { vertical-align: middle; }
.visuallyhidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Store operations (P3): customer orders, returns, pieces out and back, QR tags. Tokens only. */
.opslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.opsrow { display: flex; flex-direction: column; gap: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) 14px; background: var(--surface); color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; min-height: var(--touch); }
.opsrow .late { color: var(--bad); font-weight: var(--fw-semibold); }
.opsrow .soon { color: var(--warn); font-weight: var(--fw-semibold); }
.opsform { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.opsform .field { flex: 1 1 180px; }
.opslinks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.opsnote { margin: 0 0 var(--space-2); }
.opsmeasure { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2) var(--space-3); }
.warnpill { background: var(--warn-soft); color: var(--warn); }
.scanphoto { display: block; width: 100%; max-width: 320px; border-radius: var(--radius); margin-bottom: var(--space-3); }
.orderphoto { display: block; width: 100%; max-height: 240px; object-fit: contain; margin-bottom: var(--space-2); border-radius: var(--radius); background: var(--surface-2); }

/* AI listing drafts (P3-07) */
.aidraftbox { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.aidraftbox .field textarea, .aidraftbox .field input { width: 100%; }
.aidraftbox .crow { flex-wrap: wrap; gap: var(--space-2); }
.aichecklist { display: grid; gap: var(--space-4); }
.aichecklist .card { display: grid; gap: var(--space-3); }
.aidrafttext { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Designer additions (P6): weave techniques, looms, design library, boards, materials. Tokens only. */
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.libcard { display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--surface); min-width: 0; }
.libcard.off { opacity: 0.7; }
.libcard h3 { margin: 0; overflow-wrap: anywhere; }
.libcard p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.libphotos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.libphoto { position: relative; display: block; }
.libphoto img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.libactions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.pickchecks { display: flex; flex-direction: column; gap: var(--space-1); max-height: 50vh; overflow-y: auto; }
.pickchecks label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); }
.chiplist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pickline { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); }
.okpill { background: var(--ok-soft); color: var(--ok); }
.loomjob { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.libcard .late { color: var(--bad); font-weight: var(--fw-semibold); }
.loommonths { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); }
.loommonth { display: flex; flex-direction: column; align-items: center; padding: var(--space-1) 0; border-radius: var(--radius); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.loommonth.busy { background: var(--accent-soft); }
.badpill { background: var(--bad-soft); color: var(--bad); }
.libperiod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.libperiod .input { width: auto; }
.libperiod .chip { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }
.libdesign { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--surface); color: var(--text); text-decoration: none; min-height: var(--touch); }
.libdesign img, .libnothumb { flex: 0 0 72px; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); background: var(--neutral-soft); }
.libdesignbody { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; overflow-wrap: anywhere; }
.boardgroups { display: flex; flex-direction: column; gap: var(--space-3); }
.boardgroups h2 { margin: 0 0 var(--space-3); }
.libdesign.plain { border: 0; padding: 0; background: transparent; }
.libdesignbody .late { color: var(--bad); font-weight: var(--fw-semibold); }
.upphoto { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius); }
.upgrid { margin-top: var(--space-3); }
.rangekey { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.rangekeyitem { padding: var(--space-1) var(--space-2); border-radius: var(--radius); }
.rangetable { width: 100%; border-collapse: separate; border-spacing: var(--space-2); table-layout: fixed; }
.rangetable th { text-align: left; vertical-align: top; }
.rangetable thead th:first-child { width: 130px; }
.rangetable td { vertical-align: top; background: var(--surface-2); border-radius: var(--radius); padding: var(--space-2); }
.rangeline { display: none; }
.rangecard { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); margin-bottom: var(--space-2); border-radius: var(--radius); border: 1px solid var(--border); color: var(--text); text-decoration: none; overflow-wrap: anywhere; min-height: var(--touch); }
.rangecard:last-child { margin-bottom: 0; }
.p-new { background: var(--surface); border-style: dashed; border-color: var(--border-strong); }
.p-wip { background: var(--accent-soft); }
.p-review { background: var(--warn-soft); }
.p-approved { background: var(--ok-soft); }
.rangeunplaced { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.bulkscroll { overflow-x: auto; }
.bulktable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bulktable th, .bulktable td { padding: var(--space-2); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.bulktable tfoot th { border-bottom: 0; }
.bulktable th:first-child, .bulktable td:first-child { position: sticky; left: 0; background: var(--surface); white-space: normal; min-width: 110px; }
.bulktable .num { text-align: right; font-variant-numeric: tabular-nums; }
.bulktable td.late { color: var(--bad); font-weight: var(--fw-semibold); }
@media (max-width: 760px) {
	.rangetable, .rangetable tbody, .rangetable tr, .rangetable td, .rangetable th { display: block; width: auto; }
	.rangetable thead { display: none; }
	.rangetable tbody th { margin-top: var(--space-3); }
	.rangetable td { margin-top: var(--space-2); }
	.rangetable td.emptycell { display: none; }
	.rangeline { display: block; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
}