/* ==========================================================================
   eTranslator – design system (2026 redesign)
   --------------------------------------------------------------------------
   1. Tokens & reset
   2. Layout: header, nav, page, footer
   3. Components: cards, buttons, badges, forms, tables, alerts, modal, uploader
   4. Legacy compatibility (markup produced by libETranslator / ajaxETranslator)
   5. Responsive rules
   ========================================================================== */

/* 1. Tokens & reset --------------------------------------------------------- */
:root {
	--green: #84c225;
	--green-600: #6fa61c;
	--green-700: #587f18;
	--green-50: #f3f9e6;
	--green-100: #e4f2c6;

	--ink-900: #1b2430;
	--ink-700: #2f3a48;
	--ink-500: #5f6b7a;
	--ink-400: #8a94a3;
	--ink-300: #c3cad4;
	--line: #e3e7ec;
	--bg: #f4f6f5;
	--card: #ffffff;

	--red: #d3382c;
	--red-50: #fdecea;
	--amber: #c77700;
	--amber-50: #fff4e0;
	--blue: #2464c7;
	--blue-50: #e8f0fc;
	--purple: #8a3fbf;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
	--shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .25);
	--font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
	--container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-700);
	background: var(--bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink-900); line-height: 1.25; font-weight: 700; font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
b, strong { font-weight: 600; color: var(--ink-900); }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.brand-e { color: var(--green); font-weight: 700; }

/* 2. Layout ----------------------------------------------------------------- */
.site-header {
	background: var(--card);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
	color: var(--ink-900);
	text-decoration: none !important;
	white-space: nowrap;
}
.brand__name { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-family: var(--font-display); }
.brand__sub { font-size: 11px; color: var(--ink-400); margin-top: 3px; letter-spacing: .2px; }
.brand__words { display: flex; flex-direction: column; }
.brand__mark { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 8px rgba(88,127,24,.35)); }
/* header C: green edge + subtle dot texture */
.site-header { background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23dfe6d9'/%3E%3C/svg%3E"); }
.site-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--green), var(--green-700)); }
.site-header__inner { min-height: 68px; }
.main-nav--public { justify-content: center; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; color: var(--ink-700); padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid transparent; }
.user-chip:hover { background: var(--bg); border-color: var(--line); }
.user-chip__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--green-100); color: var(--green-700); font: 700 12px/30px var(--font-display); text-align: center; letter-spacing: .5px; }
.user-chip__name { font-size: 13px; font-weight: 600; }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; }
.main-nav a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	color: var(--ink-500);
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
}
.main-nav a:hover { background: var(--bg); color: var(--ink-900); }
.main-nav a.is-active { color: var(--green-700); background: var(--green-50); }

.user-area { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-area__name { font-size: 13px; color: var(--ink-500); }
.user-area__name b { color: var(--ink-900); }
.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	width: 42px; height: 38px;
	cursor: pointer;
	color: var(--ink-700);
}
.nav-toggle svg { width: 22px; height: 22px; }

.page { flex: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 28px 20px 40px; }
.page--narrow { max-width: 860px; }
.page-header { margin-bottom: 20px; }
.page-header h1 { margin-bottom: 4px; }
.page-header .lead { color: var(--ink-500); max-width: 80ch; margin: 0; }
.page-header .lead b { color: var(--ink-700); }

.site-footer {
	border-top: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-400);
	font-size: 12px;
}
.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.site-footer a { color: var(--ink-500); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stack > * + * { margin-top: 20px; }
.muted { color: var(--ink-400); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* 3. Components ------------------------------------------------------------- */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px 22px;
}
.card + .card { margin-top: 20px; }
.card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -4px 0 14px;
	flex-wrap: wrap;
}
.card__header h2, .card__header h3 { margin: 0; }
.card__header .card__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card--accent { border-top: 3px solid var(--green); }
.card--flush { padding: 0; }
.card--flush .card__header { padding: 18px 22px 0; margin-bottom: 12px; }

/* buttons */
.btn, input[type="button"], input[type="submit"], button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-700);
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover { background: var(--bg); border-color: var(--ink-300); color: var(--ink-900); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}
.btn-primary, input[type="submit"] { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover, input[type="submit"]:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-50); border-color: var(--red); color: var(--red); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-xs { padding: 4px 8px; font-size: 12px; }
.btn-icon { padding: 6px; width: 32px; height: 32px; }
.btn-icon svg { width: 18px; height: 18px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* badges (statuses) */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	background: var(--bg);
	color: var(--ink-500);
	border: 1px solid var(--line);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.badge-danger { background: var(--red-50); color: var(--red); border-color: #f5c6c1; }
.badge-warning { background: var(--amber-50); color: var(--amber); border-color: #f7dfb0; }
.badge-info { background: var(--blue-50); color: var(--blue); border-color: #c5d8f6; }
.badge-purple { background: #f3e8fb; color: var(--purple); border-color: #e0c8f0; }
.badge-neutral { background: var(--bg); color: var(--ink-500); }

/* forms */
label { font-weight: 500; color: var(--ink-700); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], select, textarea {
	font: inherit;
	font-size: 14px;
	color: var(--ink-900);
	background: var(--card);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-sm);
	padding: 9px 11px;
	max-width: 100%;
	transition: border-color .12s, box-shadow .12s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(132, 194, 37, .2);
	outline: none;
}
input[readonly] { background: var(--bg); }
select { padding-right: 28px; }
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); width: 16px; height: 16px; vertical-align: -3px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; }
.field .hint { font-size: 12px; color: var(--ink-400); }
.form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mandatory { color: var(--red); font-weight: 700; }

/* alerts */
.alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink-700);
	margin: 0 0 16px;
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-success { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.alert-danger { background: var(--red-50); border-color: #f5c6c1; color: var(--red); }
.alert-warning { background: var(--amber-50); border-color: #f7dfb0; color: #8a5200; }
.alert-info { background: var(--blue-50); border-color: #c5d8f6; color: var(--blue); }
.empty {
	padding: 26px 16px;
	text-align: center;
	color: var(--ink-400);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: #fafbfa;
}

/* data tables (page-level lists) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -22px; padding: 0 22px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 11px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-400); font-weight: 600; white-space: nowrap; }
table.data tbody tr:hover { background: #fafcf6; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .actions { white-space: nowrap; }
table.data .actions .btn + .btn { margin-left: 4px; }
.task-id { font-weight: 700; font-size: 15px; color: var(--ink-900); white-space: nowrap; }
.task-id:hover { color: var(--green-700); }

/* key/value definition lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--ink-500); white-space: nowrap; }
.kv dd { margin: 0; color: var(--ink-900); font-weight: 500; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.fact__label { font-size: 12px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .4px; }
.fact__value { font-weight: 600; color: var(--ink-900); margin-top: 2px; overflow-wrap: anywhere; }

/* modal (replaces the absolutely positioned popups) */
.modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(17, 24, 39, .55);
	z-index: 100;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
	animation: fadeIn .12s ease-out;
}
.modal {
	background: var(--card);
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
	width: 100%;
	max-width: 820px;
	animation: pop .15s ease-out;
	max-height: calc(100vh - 80px);
	display: flex;
	flex-direction: column;
}
.modal--sm { max-width: 520px; }
.modal--lg { max-width: 1040px; }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal__header h2 { margin: 0; font-size: 17px; }
.modal__body { padding: 20px; overflow: auto; }
.modal__close { flex: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
body.modal-open { overflow: hidden; }


/* modal without an explicit title: the response carries its own subtitle, so the
   header collapses to a floating close button */
.modal__header--bare { border-bottom: 0; padding: 0; position: relative; }
.modal__header--bare h2 { display: none; }
.modal__header--bare .modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--card); }
.modal__header--bare + .modal__body { padding-top: 22px; }
.modal__body > table:first-child, .modal__body > .legacy > table:first-child { border: 0 !important; box-shadow: none; width: 100% !important; background: transparent !important; }
.modal__body table[bgcolor] { background: transparent !important; border: 0 !important; }
.modal__body > table:first-child > tbody > tr > td.font-subtitle:first-child { font-size: 17px; padding: 0 30px 12px 0; }

/* toasts */
#etr-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--ink-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 13.5px; animation: pop .15s ease-out; pointer-events: auto; }
.toast-success { background: var(--green-700); }
.toast-danger { background: var(--red); }
.toast.is-hiding { opacity: 0; transition: opacity .3s; }
.toast table { color: inherit; }
#divStayTopLeft { display: none; }

/* loading spinner */
.spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.loading-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--ink-400); }

/* uploader */
.uploader { }
.uploader__drop {
	border: 2px dashed var(--ink-300);
	border-radius: var(--radius);
	background: #fafbfa;
	padding: 34px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .12s, background .12s;
	color: var(--ink-500);
}
.uploader__msg { display: contents; }   /* the .dz-message wrapper (makes every part of the zone clickable) adds no box */
.uploader__drop:hover, .uploader__drop.dz-drag-hover { border-color: var(--green); background: var(--green-50); }
.uploader__drop svg { width: 40px; height: 40px; color: var(--green); margin-bottom: 8px; }
.uploader__drop strong { display: block; font-size: 15px; color: var(--ink-900); margin-bottom: 2px; }
.uploader__drop .hint { font-size: 12px; color: var(--ink-400); }
.uploader__file {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	margin-top: 12px;
}
.uploader.has-file .uploader__file { display: flex; }
.uploader.has-file .uploader__drop { padding: 14px; font-size: 13px; }
.uploader.has-file .uploader__drop svg, .uploader.has-file .uploader__drop strong { display: none; }
.uploader__icon { width: 38px; height: 38px; border-radius: 8px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; flex: none; }
.uploader__meta { flex: 1; min-width: 0; }
.uploader__name { font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.uploader__size { font-size: 12px; color: var(--ink-400); }
.uploader__progress { margin-top: 12px; display: none; }
.uploader.is-uploading .uploader__progress, .uploader.is-finalizing .uploader__progress { display: block; }
.progress { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--green-600), var(--green)); border-radius: 999px; transition: width .2s linear; }
.progress__bar.is-indeterminate { width: 40% !important; animation: indeterminate 1.2s infinite ease-in-out; }
@keyframes indeterminate { 0% { margin-left: -40% } 100% { margin-left: 100% } }
.uploader__stats { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-500); margin-top: 6px; flex-wrap: wrap; }
.uploader__stats b { color: var(--ink-900); }
.uploader__actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.uploader__result { margin-top: 14px; }
.uploader.is-uploading .uploader__drop, .uploader.is-finalizing .uploader__drop { pointer-events: none; opacity: .6; }
.uploader.is-done .uploader__drop, .uploader.is-done .uploader__file, .uploader.is-done .uploader__actions, .uploader.is-done .uploader__progress { display: none; }
.rules { font-size: 13px; color: var(--ink-500); margin: 0 0 14px; padding-left: 1.2em; }
.rules li + li { margin-top: 3px; }

/* login card */
.login-card { max-width: 420px; margin: 0 auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.feature-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; }
.feature-list svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }

/* 4. Legacy compatibility --------------------------------------------------
   Markup produced by libETranslator.php / ajaxETranslator.php still uses
   nested tables and a handful of old class names. These rules make that
   output look like the rest of the redesign without touching the PHP. */
.font-general-use, .font-subtitle, .titlu_e-translator, .zona1 { font-family: inherit; }
.font-general-use { font-size: 13.5px; color: var(--ink-700); }
.font-subtitle { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.titlu_e-translator { font-size: 18px; font-weight: 600; color: var(--ink-900); }
.link { color: var(--green-700); text-decoration: underline; text-decoration-color: rgba(88, 127, 24, .35); }
.link:hover { color: var(--green-600); }
.linkGeneral { color: var(--ink-500); font-size: 13px; }
.linkGeneral:hover { color: var(--ink-900); }
.legacy table { border-collapse: separate; max-width: 100%; }
.legacy table[width]:not([width="100%"]) { width: auto !important; }
.legacy td { vertical-align: top; }
.legacy td[style*="border: dotted"], .legacy table[style*="border: dotted"], .legacy table[style*="border: dashed"], .legacy table[style*="border:dashed"] {
	border: 1px solid var(--line) !important;
	border-radius: var(--radius);
	background: var(--card);
}
.legacy table[style*="border: dotted"] > tbody > tr > td.font-subtitle,
.legacy table[style*="border: dashed"] > tbody > tr > td.font-subtitle { padding: 10px 12px 6px; }
.legacy input[type="text"], .legacy input[type="password"], .legacy select, .legacy textarea { padding: 7px 9px; font-size: 13.5px; }
.legacy input[type="button"] { padding: 7px 12px; font-size: 13px; }
.legacy img[src*="close.jpg"] { display: none; } /* modal has its own close button */
.legacy img[src*="mandatory.jpg"] { vertical-align: middle; }
.legacy .bck_text { opacity: 1; background: var(--bg); border-color: var(--line); border-radius: var(--radius-sm); }
.legacy font { font-family: inherit; }
.legacy td[style*="white-space: nowrap"] { white-space: normal !important; }
.legacy td[nowrap], .legacy tr[style*="white-space: nowrap"] td { white-space: normal !important; }
/* 'View variants' rows */
.legacy tr[style*="color:#BBBBBB"] { color: var(--ink-500) !important; }
/* status badge tables produced in PHP strings */
.legacy .status-badge table { display: inline-table; }

/* dhtmlgoodies calendar popup used on invoices/schedule */
#calendarDiv { z-index: 200 !important; font-family: var(--font) !important; }


/* ---- polish ---- */
.grid-2 > .card, .split > .card { margin-top: 0; }
.card--flush table.data th:first-child, .card--flush table.data td:first-child { padding-left: 22px; }
.card--flush table.data th:last-child, .card--flush table.data td:last-child { padding-right: 22px; }
.user-area__name { white-space: nowrap; }
@media (max-width: 1150px) { .user-chip__name { display: none; } .user-chip { padding-right: 4px; } }
/* legacy bordered tables placed directly in a card: the card is the border */
.card > table[style*="border: dotted"], .card > table[style*="border: dashed"], .card > table[style*="border:dashed"] { border: 0 !important; box-shadow: none; border-radius: 0; width: 100% !important; }
.card > table[style*="border"] > tbody > tr > td.font-subtitle { padding: 0 0 12px 0 !important; }
.card > table[style*="border"] > tbody > tr > td.font-subtitle table.font-subtitle td { padding: 0; }
.card > table[style*="border"] td.font-subtitle { font-size: 18px; }
/* profile: professional information rows */
.kv--profile { grid-template-columns: 240px 1fr; gap: 0 24px; }
.kv--profile dt, .kv--profile dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv--profile dt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--ink-900); white-space: normal; }
.kv--profile dd { font-weight: 400; }
.kv--profile dt:nth-last-of-type(1), .kv--profile dd:last-of-type { border-bottom: 0; }
.kv--profile dd table { margin: 0; }
.kv--profile dd img[src*="mandatory"] { vertical-align: middle; }
@media (max-width: 640px) {
	.kv--profile { grid-template-columns: 1fr; }
	.kv--profile dt { border-bottom: 0; padding-bottom: 4px; }
}
.facts .fact__value:empty::before { content: "–"; color: var(--ink-300); }
/* messages block produced by showComposeMessageButton() */
.card > div > table.font-general-use[style*="border"] { border: 0 !important; }


/* ---- overflow safety ---- */
.facts > div, .kv > dd, .grid-2 > *, .split > *, .hero > *, .card { min-width: 0; }
.card { overflow-wrap: anywhere; }
/* Invoices > Compute: whole words in this table (5 Nov 2026); if it does not fit the card, it scrolls */
#displayOrderForms { overflow-x: auto; overflow-wrap: normal; }
#displayOrderForms > table { width: 100%; }
.card .table-wrap, .modal__body .table-wrap { max-width: 100%; }
@media (max-width: 820px) {
	html, body { overflow-x: hidden; }
	.badge { white-space: normal; text-align: left; }
	.facts { grid-template-columns: 1fr 1fr; }
	.card__header .card__actions { max-width: 100%; }
}


/* ---- landing page ---- */
.page--landing { max-width: 1160px; }
.landing-hero { display: grid; grid-template-columns: 1.25fr .8fr; gap: 40px; align-items: center; padding: 18px 0 34px; }
.landing-hero .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.landing-hero h1 { font-size: 40px; letter-spacing: -.8px; line-height: 1.1; margin-bottom: 14px; }
.landing-hero .lead { font-size: 16px; max-width: 56ch; margin-bottom: 22px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0 0 18px; }
.stat__value { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ink-900); letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; color: var(--ink-500); }
.landing-hero__login .login-card { box-shadow: 0 24px 50px -20px rgba(88, 127, 24, .35), var(--shadow); }
body.has-landing { background: radial-gradient(900px 420px at 15% -10%, var(--green-100) 0%, rgba(228, 242, 198, 0) 60%), var(--bg); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.tile { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.tile__icon { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.tile__icon svg { width: 22px; height: 22px; }
.tile__value { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ink-900); line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.tile__label { font-weight: 600; color: var(--ink-700); margin-top: 2px; }
.tile__sub { font-size: 12.5px; color: var(--ink-400); margin-top: 2px; }

.charts { margin-bottom: 20px; }
.chart { width: 100%; height: auto; display: block; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__bar { fill: var(--green-100); transition: fill .12s; }
.chart__bar--last, .chart__item:hover .chart__bar { fill: var(--green); }
.chart__value { font: 600 12px var(--font); fill: var(--ink-500); }
.chart__label { font: 12px var(--font); fill: var(--ink-400); }
.hbars { display: grid; gap: 9px; }
.hbars__row { display: grid; grid-template-columns: 78px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.hbars__label { font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.hbars__track { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.hbars__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--green-600), var(--green)); border-radius: 999px; }
.hbars__row:first-child .hbars__bar { background: var(--green-700); }
.hbars__value { text-align: right; color: var(--ink-500); font-variant-numeric: tabular-nums; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.feature__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--ink-900); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { margin-bottom: 6px; }
.feature p { margin: 0; color: var(--ink-500); font-size: 13.5px; }

@media (max-width: 960px) {
	.landing-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 8px; }
	.landing-hero h1 { font-size: 30px; }
	.tiles, .features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.tiles, .features { grid-template-columns: 1fr; }
	.stat-row { gap: 10px 22px; }
	.stat__value { font-size: 24px; }
	.hbars__row { grid-template-columns: 64px 1fr 46px; }
}


/* ---- hero band (landing) ---- */
.hero-band { position: relative; overflow: hidden; width: 100vw; margin: -28px 0 0 calc(50% - 50vw); padding: 64px 20px 100px; color: #fff;
	background: radial-gradient(700px 380px at 78% 30%, rgba(132,194,37,.28) 0%, rgba(132,194,37,0) 65%), linear-gradient(160deg, #141b26 0%, var(--ink-900) 55%, #1f2c1c 100%); }
.hero-band__art { position: absolute; inset: 0; pointer-events: none; }
/* anchored to the centred content column (not the viewport), so the network always sits in the
   gap between the headline and the login card, whatever the screen width or how many languages
   the database returns */
.hero-band__art .network { position: absolute; left: calc(50% + 73px); top: 50%; transform: translate(-50%, -50%); width: 1080px; max-width: none; height: auto; opacity: .9; }
.hero-band__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27,36,48,.97) 0%, rgba(27,36,48,.95) calc(50% + 40px), rgba(27,36,48,.5) calc(50% + 120px), rgba(27,36,48,0) calc(50% + 280px)); }
.hero-band__inner { position: relative; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.hero-band__text h1 { color: #fff; font-size: 46px; line-height: 1.06; letter-spacing: -.025em; margin: 14px 0 16px; max-width: 13ch; }
.hero-band__text .lead { color: rgba(255,255,255,.78); font-size: 16.5px; max-width: 54ch; margin-bottom: 26px; }
.hero-band__text .lead b { color: #fff; }
.eyebrow--dark { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); background: rgba(132,194,37,.12); border: 1px solid rgba(132,194,37,.35); border-radius: 999px; padding: 5px 12px; }
.hero-band__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.btn-lg { padding: 13px 20px; font-size: 15px; }
.btn-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.btn-dark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.hero-band__proof { display: flex; gap: 8px 26px; flex-wrap: wrap; color: rgba(255,255,255,.65); font-size: 13.5px; }
.hero-band__proof b { color: #fff; font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-right: 4px; font-variant-numeric: tabular-nums; }
.hero-band__login .login-card { box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.hero-band__login .login-card h2 { font-size: 19px; }
.network__link { stroke: var(--green); stroke-opacity: .35; stroke-linecap: round; }
.network__node circle { fill: rgba(132,194,37,.22); stroke: var(--green); stroke-width: 2; }
.network__node text, .network__hub text { font: 700 13px var(--font-display); fill: #fff; letter-spacing: .5px; }
.network__hub circle { fill: var(--green); }
.network__hub .network__halo { fill: var(--green); fill-opacity: .18; animation: halo 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.network__hub text { fill: #14210a; font-size: 15px; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .5 } 50% { transform: scale(1.18); opacity: 1 } }
.page--landing .tiles { margin-top: -52px; position: relative; }
@media (max-width: 960px) {
	.hero-band { padding: 40px 16px 80px; margin: -20px 0 0 calc(50% - 50vw); }
	.hero-band__inner { grid-template-columns: 1fr; gap: 26px; }
	.hero-band__text h1 { font-size: 34px; max-width: none; }
	.hero-band__art .network { width: 900px; left: 60%; top: 40%; opacity: .35; }
	.hero-band__art::after { background: linear-gradient(180deg, rgba(27,36,48,.5) 0%, rgba(27,36,48,.75) 100%); }
}


/* ---- availability schedule ---- */
.sched__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sched__legend { display: flex; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--ink-500); flex-wrap: wrap; }
.sched__key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 10px; }
.sched__key:first-child { margin-left: 0; }
.sched__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sched__title { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); margin-bottom: 8px; text-align: center; }
.sched__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sched__wd { font-size: 11px; color: var(--ink-400); text-align: center; padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.sched__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; color: var(--ink-700); background: var(--bg); font-variant-numeric: tabular-nums; }
.sched__day.is-blank { background: transparent; }
.sched__day.is-weekend { color: var(--ink-400); }
.sched__day.is-past { opacity: .55; }
.sched__day.is-today { outline: 2px solid var(--ink-900); outline-offset: -2px; font-weight: 700; color: var(--ink-900); }
.sched__day.is-free, .sched__key.is-free { background: var(--green-100); color: var(--green-700); }
.sched__day.is-partial, .sched__key.is-partial { background: #f7dfb0; color: #8a5200; }
.sched__day.is-busy, .sched__key.is-busy { background: #f5c6c1; color: #8f1d14; }
.sched__list { display: grid; gap: 10px; }
.sched__entry { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.sched__entry-when { font-size: 14px; }
.sched__entry-meta { grid-column: 1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sched__entry-actions { grid-column: 2; grid-row: 1 / span 2; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg__item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: 13.5px; }
.seg__item input { margin: 0; }
.seg__item.is-free { color: var(--green-700); } .seg__item.is-busy { color: var(--red); } .seg__item.is-partial { color: var(--amber); }
.seg__item:has(input:checked) { background: var(--bg); border-color: var(--ink-300); box-shadow: inset 0 0 0 1px var(--ink-300); }
@media (max-width: 960px) { .sched__months { grid-template-columns: 1fr; } .sched__entry { grid-template-columns: 1fr; } .sched__entry-actions { grid-column: 1; grid-row: auto; } }


/* ---- create account / recover ---- */
.join { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; padding: 14px 0 20px; }
.join__intro h1 { font-size: 38px; letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 12px; max-width: 14ch; }
.join__intro .lead { font-size: 16px; max-width: 58ch; }
.join__steps { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.join__steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.join__num { width: 38px; height: 38px; border-radius: 50%; background: var(--ink-900); color: var(--green); font: 800 16px/38px var(--font-display); text-align: center; }
.join__steps b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink-900); margin-bottom: 2px; }
.join__steps span { color: var(--ink-500); font-size: 13.5px; }
.join__facts { display: flex; gap: 28px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.join__facts b { display: block; font: 800 24px/1.1 var(--font-display); color: var(--ink-900); }
.join__facts span { font-size: 12.5px; color: var(--ink-500); }
.join__req li span { color: var(--ink-500); font-size: 13.5px; }
.join__form { position: sticky; top: 88px; }
.join__form .card { box-shadow: 0 24px 50px -24px rgba(88,127,24,.35), var(--shadow); }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 999px; padding: 4px 12px; font-family: var(--font-display); }
@media (max-width: 960px) { .join { grid-template-columns: 1fr; gap: 24px; } .join__form { position: static; } .join__intro h1 { font-size: 30px; max-width: none; } }


/* ---- join page (create account) ---- */
.join-band { position: relative; overflow: hidden; width: 100vw; margin: -28px 0 0 calc(50% - 50vw); padding: 56px 20px 64px;
	background: radial-gradient(800px 420px at 85% 15%, rgba(132,194,37,.28) 0%, rgba(132,194,37,0) 65%), linear-gradient(180deg, #f6faf0 0%, #ffffff 100%); border-bottom: 1px solid var(--line); }
.join-band__art { position: absolute; inset: 0; pointer-events: none; }
.join-band__art .network { position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%); width: 1160px; max-width: none; height: auto; }
.network--light .network__link { stroke: var(--green-700); stroke-opacity: .18; }
.network--light .network__node circle { fill: #fff; stroke: var(--green); stroke-opacity: .7; }
.network--light .network__node text { fill: var(--green-700); fill-opacity: .8; }
.network--light .network__hub circle { fill: var(--green); }
.network--light .network__hub .network__halo { fill-opacity: .14; }
.join-band__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f7faf2 0%, rgba(247,250,242,.92) 36%, rgba(247,250,242,.3) 48%, rgba(247,250,242,0) 56%); }
.join-band__inner { position: relative; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.join-band__text h1 { font-size: 42px; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 14px; max-width: 22ch; }
.join-band__text .lead { font-size: 16.5px; max-width: 56ch; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 700 13px var(--font-display); color: var(--ink-900); letter-spacing: .3px; box-shadow: var(--shadow); }
.chip--hot { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.chip--more { background: transparent; box-shadow: none; color: var(--ink-500); font-weight: 600; border-style: dashed; }
.join-band__facts { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.join-band__facts b { display: block; font: 800 26px/1.1 var(--font-display); color: var(--ink-900); }
.join-band__facts span { font-size: 12.5px; color: var(--ink-500); }
.join-band__form .card { box-shadow: 0 30px 60px -24px rgba(88,127,24,.45), var(--shadow); }
.section-head { text-align: center; margin: 44px 0 22px; }
.section-head h2 { font-size: 26px; margin: 12px 0 0; letter-spacing: -.02em; }
.journey__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: j; position: relative; }
.journey__steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; border-top: 2px dashed var(--green-100); }
.journey__steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px 18px; box-shadow: var(--shadow); }
.journey__steps li::before { counter-increment: j; content: counter(j); position: absolute; top: -12px; left: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font: 800 13px/26px var(--font-display); text-align: center; box-shadow: 0 0 0 4px #fff; }
.journey__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-50); color: var(--green-700); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.journey__icon svg { width: 22px; height: 22px; }
.journey__steps b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink-900); margin-bottom: 4px; }
.journey__steps span { font-size: 13.5px; color: var(--ink-500); }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.benefit { background: var(--ink-900); color: #fff; border-radius: var(--radius); padding: 22px 20px; }
.benefit__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(132,194,37,.15); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.benefit__icon svg { width: 20px; height: 20px; }
.benefit h3 { color: #fff; font-size: 16px; margin-bottom: 6px; }
.benefit p { margin: 0; color: rgba(255,255,255,.7); font-size: 13.5px; }
.join-req { margin-top: 28px; }
.join-req__list { grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 4px; }
.join-req__list span { color: var(--ink-500); font-size: 13.5px; }
@media (max-width: 960px) {
	.join-band { padding: 36px 16px 40px; margin: -20px 0 0 calc(50% - 50vw); }
	.join-band__inner { grid-template-columns: 1fr; gap: 26px; }
	.join-band__text h1 { font-size: 32px; max-width: none; }
	.join-band__art .network { width: 900px; left: 60%; top: 45%; opacity: .5; }
	.journey__steps { grid-template-columns: 1fr 1fr; } .journey__steps::before { display: none; }
	.benefits { grid-template-columns: 1fr 1fr; }
	.join-req__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .journey__steps, .benefits { grid-template-columns: 1fr; } }


/* ---- order form preview ---- */
.of-preview__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-right: 36px; }
.of-confirm { position: sticky; top: -20px; z-index: 2; background: var(--card); padding-bottom: 8px; margin-bottom: 8px; }
.of-confirm__box { border: 1px solid var(--green-100); background: var(--green-50); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 10px; }
.of-confirm__text { display: flex; flex-direction: column; gap: 2px; }
.of-preview__doc { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; overflow: auto; background: #fff; }
.of-preview__doc table { max-width: 100%; }

.refs-table td.file-name { font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; min-width: 200px; }
.refs-table td.muted { max-width: 520px; }
.stack > .card + .card { margin-top: 20px; }

/* "Needs your attention" strip */
.attention { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius); background: #fff; padding: 16px 18px; margin: 0 0 22px; box-shadow: var(--shadow); }
.attention__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.attention__head svg { width: 20px; height: 20px; color: var(--amber); flex: none; }
.attention__head h2 { font-size: 16px; margin: 0; }
.attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.attention__item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.attention__item:first-child { border-top: 0; }
.attention__icon { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg); color: var(--ink-500); }
.attention__icon svg { width: 17px; height: 17px; }
.attention__item--danger .attention__icon { background: var(--red-50); color: var(--red); }
.attention__item--warning .attention__icon { background: var(--amber-50); color: #8a5200; }
.attention__item--info .attention__icon { background: var(--blue-50); color: var(--blue); }
.attention__text { flex: 1 1 auto; font-size: 14px; line-height: 1.45; }
.attention__item > .btn { flex: none; }
@media (max-width: 640px) {
	.attention__item { flex-wrap: wrap; }
	.attention__text { flex-basis: calc(100% - 42px); }
	.attention__item > .btn { margin-left: 42px; }
}

/* captcha (login / recover) */
[hidden] { display: none !important; } /* .field sets display:flex, which would beat the browser's [hidden] rule */
.captcha__row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.captcha__img { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.captcha__img img { display: block; width: 180px; height: 56px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; user-select: none; }
.captcha__refresh { flex: none; color: var(--ink-500); }
.captcha__refresh:hover { color: var(--green-700); }
.captcha__input { flex: 1 1 120px; min-width: 120px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 18px; letter-spacing: .28em; text-transform: uppercase; height: 56px; text-align: center; }
.captcha__input::placeholder { letter-spacing: .1em; font-size: 14px; }
#loginMessage:empty, #recoverMessage:empty { display: none; }
#loginMessage .alert, #recoverMessage .alert { margin-bottom: 14px; }

/* 5. Responsive --------------------------------------------------------------- */
@media (max-width: 960px) {
	.hero { grid-template-columns: 1fr; }
	.grid-2, .split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	.site-header__inner { flex-wrap: wrap; gap: 12px; min-height: 58px; padding: 8px 16px; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.main-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; order: 3; margin: 0; padding: 6px 0 10px; border-top: 1px solid var(--line); }
	.main-nav.is-open { display: flex; }
	.main-nav a { padding: 11px 10px; }
	.user-area { order: 4; margin-left: 0; width: 100%; justify-content: space-between; display: none; padding: 10px 0 4px; border-top: 1px solid var(--line); }
	.main-nav.is-open + .user-area, .site-header.is-open .user-area { display: flex; }
	.page { padding: 20px 16px 32px; }
	.card { padding: 16px; }
	.table-wrap { margin: 0 -16px; padding: 0 16px; }
	.modal-backdrop { padding: 12px; align-items: flex-start; }
	.modal { max-height: calc(100vh - 24px); }
	.modal__body { padding: 16px; }
	h1 { font-size: 21px; }
	.brand__name { font-size: 23px; }
}
@media (max-width: 640px) {
	/* card layout for the main task lists */
	table.data.stack-sm thead { display: none; }
	table.data.stack-sm, table.data.stack-sm tbody, table.data.stack-sm tr, table.data.stack-sm td { display: block; width: 100%; }
	table.data.stack-sm tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; margin-bottom: 12px; background: var(--card); }
	table.data.stack-sm td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
	table.data.stack-sm td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-400); font-weight: 600; text-align: left; }
	table.data.stack-sm td.num { text-align: right; }
	table.data.stack-sm td.actions { justify-content: flex-end; }
	.facts { grid-template-columns: 1fr 1fr; }
	.kv { grid-template-columns: 1fr; gap: 2px 0; }
	.kv dt { margin-top: 8px; font-size: 12px; }
	.legacy table, .legacy tbody, .legacy tr, .legacy td { max-width: 100%; }
	.legacy td[width] { width: auto !important; }
	.card__header { flex-direction: column; align-items: flex-start; }
	.btn-block-sm { width: 100%; }
}
@media print {
	.site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
	body { background: #fff; }
	.card { box-shadow: none; }
}

/* working documents: every column shrinks to its content, the file name takes the rest */
.files-table th, .files-table td { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.files-table th.col-file, .files-table td.file-name { width: 100%; white-space: normal; min-width: 240px; font-weight: 500; overflow-wrap: anywhere; }
/* download / upload are icon buttons here: the label lives in title + aria-label */
.files-table .actions .btn-icon { width: 30px; height: 30px; padding: 0; }
.files-table .actions .btn-icon svg { width: 16px; height: 16px; }
.files-table .actions .btn + .btn { margin-left: 6px; }
.files-table .actions .btn-icon.is-off { opacity: .4; cursor: not-allowed; }

/* ---- task page: a file's other versions (30 Oct 2026, replaces the 15 Oct panel) ---- */

/* 1. one small chip inside the file's own row replaces the full-width bar under it */
.vchip {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 10px 2px 7px;
	font: inherit; font-size: 12px; font-weight: 600; color: var(--green-700);
	background: var(--green-50); border: 1px solid var(--green-100); border-radius: 999px; cursor: pointer;
}
.vchip:hover { background: var(--green-100); }
.vchip svg { width: 12px; height: 12px; transition: transform .15s; }
.vchip[aria-expanded="true"] svg { transform: rotate(90deg); }
.vchip[aria-expanded="true"] { background: var(--green); border-color: var(--green); color: #14240a; }

/* the file that is open stays visibly joined to its list */
.files-table tr.file-row.is-open > td { background: #fbfdf7; border-bottom-color: transparent; }

/* 2. the list: a rule down the left ties it to the file above; no repeated file name, no title */
.files-table tr.variants-row > td { padding: 0 0 14px; background: #fbfdf7; }
/* The table scrolls sideways when the window is narrow. The list is therefore pinned to the visible part of the
   table (sticky) and as wide as that part (100cqw), so a long name wraps and the download icon is never scrolled away.
   The first width is the fallback for browsers without container units. */
.table-wrap { container-type: inline-size; }
.vlist { margin: 0 0 0 34px; padding: 2px 0 2px 16px; border-left: 3px solid var(--green);
	position: sticky; left: 34px; box-sizing: border-box; white-space: normal;   /* the table cells are nowrap; a long name must wrap here */ width: calc(100vw - 150px); width: calc(100cqw - 48px); }
.vitem {
	display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 34px; align-items: center; gap: 14px;
	padding: 8px 4px; border-bottom: 1px dashed var(--line);
}
.vitem:last-child { border-bottom: 0; }
.vname { font-weight: 500; color: var(--ink-900); overflow-wrap: anywhere; }
.vname--same { font-weight: 400; color: var(--ink-400); }   /* same name as the file above: say less */
.vmeta { font-size: 12.5px; color: var(--ink-400); white-space: nowrap; }

/* 3. a stage is a colour, not a column: Initial / DTP / Revised / Typesetting / Final */
.vstage {
	display: inline-flex; align-items: center; justify-content: center; min-width: 84px;
	padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.vstage--initial { background: var(--bg); color: var(--ink-500); border: 1px solid var(--line); }
.vstage--dtp { background: var(--blue-50); color: var(--blue); }
.vstage--revised { background: #f3eafa; color: var(--purple); }
.vstage--typesetting { background: var(--amber-50); color: var(--amber); }
.vstage--final { background: var(--green-100); color: var(--green-700); }

.card__header .vall { margin-left: auto; }
@media (max-width: 760px) {
		.vlist { left: 12px; margin-left: 12px; width: calc(100vw - 96px); width: calc(100cqw - 24px); }
	.vitem { grid-template-columns: minmax(0, 1fr) 34px; row-gap: 4px; }
	.vitem .vstage { grid-column: 1; justify-self: start; }
	.vitem .vname { grid-column: 1; } .vitem .vmeta { grid-column: 1; }
	.vitem .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
.vitem--empty { display: block; color: var(--ink-500); }
.vstage--translation { background: #f3eafa; color: var(--purple); }
.card__actions .vall { margin-right: 8px; }