/**
 * GBDS Design Criteria — WordPress-side adjustments.
 * The app's own look comes from ds-styles.css plus the inline tokens on the
 * template root; this file only reconciles it with the theme/Elementor shell.
 */

/**
 * Brand tokens for anything rendered OUTSIDE the app root (the submit bar
 * lives on document.body). ds-styles.css puts its own --color-accent on
 * :root — the warm orange #c67139 of its "Organic" theme — while the real GBDS
 * palette only exists as an inline override on the template's root div.
 * Reusing --color-accent out here would silently paint the button orange, so
 * the brand values get their own namespace.
 */
:root {
	--gbds-accent: #6f675c;
	--gbds-accent-600: #5d564c;
	--gbds-ink: #2b2722;
	--gbds-font: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* One corner radius for every control, matching the upload slots. */
	--gbds-radius: 12px;
	/* One hover treatment for every button: deep warm grey, cream lettering. */
	--gbds-hover-bg: #3b362f;
	--gbds-hover-text: #f5f1e7;
}

/**
 * Hover.
 *
 * ds-styles.css gives each button variant its own hover (accent-600 fill for
 * primary, a faint ink tint for secondary and ghost). These replace all of them
 * with the single deep-warm-grey / cream pairing.
 *
 * Specificity is chosen to clear the design system's own hover rules —
 * `.btn-primary:hover` is (0,2,0) and the segmented control's
 * `.seg-opt:not(:has(input:checked)):hover` is (0,3,1) — without `!important`.
 *
 * Tabs and the TH/EN chips are untouched: the runtime writes their background
 * and colour as inline styles, which outrank any stylesheet, so they keep their
 * selected/idle look while being hovered.
 */
.gbds-dc-app .btn:hover,
.gbds-dc-app .btn:focus-visible {
	background: var(--gbds-hover-bg);
	color: var(--gbds-hover-text);
}

.gbds-dc-app .seg-opt:not(:has(input:checked)):hover {
	background: var(--gbds-hover-bg);
	color: var(--gbds-hover-text);
}

/**
 * Squared-off controls.
 *
 * ds-styles.css ends with `.btn, .tag, .seg, .input { border-radius: 999px }`,
 * which made every field, button, tab and pill a capsule. The brief is rounded
 * rectangles throughout, matching the upload slots, so those four are re-pointed
 * at --gbds-radius here rather than by editing the vendored design system.
 * Two classes deep (0,2,0) beats ds-styles' (0,1,0), so no !important is needed.
 *
 * Progress bars and the range-slider track keep their inline 999px: a radius is
 * capped at half the box height, so on a 8–14px bar both values render the same
 * fully-round end. Cards and dialogs are untouched — they were never capsules.
 */
.gbds-dc-app .btn,
.gbds-dc-app .tag,
.gbds-dc-app .seg,
.gbds-dc-app .input {
	border-radius: var(--gbds-radius);
}

/**
 * Cards and dialogs too. Their `calc(var(--radius-lg) * 1.15)` = 32px reads fine
 * on a tall section card, but the project-picker rows are only ~68px high, so a
 * 32px radius rounded them into capsules as well.
 *
 * The tab and TH/EN chips are NOT here — the runtime writes their radius as an
 * inline style built in JS (CHIP_IDLE), which no stylesheet can outrank, so that
 * constant is set to 12px in app.html instead.
 */
.gbds-dc-app .card,
.gbds-dc-app .dialog {
	border-radius: var(--gbds-radius);
}

/**
 * Site font inside the app.
 *
 * The export hard-codes the Apple system stack into --font-heading/--font-body
 * as an INLINE style on its root div, so a normal rule cannot reach it — hence
 * the attribute selector plus !important, which is the one case where a
 * stylesheet can beat an inline declaration. Redefining the two custom
 * properties re-points every heading, label, input and button in one move,
 * because the design system only ever reads them through var().
 *
 * Thai previously fell back to whatever the OS provided (Thonburi on a Mac,
 * Leelawadee on Windows), so the questionnaire looked different per machine.
 * IBM Plex Sans Thai covers Latin too, so one family now serves both scripts.
 */
.gbds-dc-app [style*="--font-body"] {
	--font-heading: var(--gbds-font) !important;
	--font-body: var(--gbds-font) !important;
	/* Thai ascenders and vowel marks need more room than the export's
	   Latin-tuned leading, which crowded them into the line above. */
	line-height: 1.6;
}

/* The app draws its own full-height surface — let it run edge to edge inside
   whatever Elementor container the Shortcode widget sits in. */
.gbds-dc-app {
	width: 100%;
}

/* The wordmark already reads "gbds — Greenbox design", so the template's
   adjacent "GBDS" text label would say the brand name twice. One logo. */
.gbds-dc-app .nav-brand {
	display: none;
}

/* Header layout, swapped 2026-08-03 on request.
   Top row = identity: who is signed in, and which project. Tab row = tools:
   the save note, the project-type switch and TH/EN. The identity group carries
   its own margin-left:auto inline, so the badge no longer needs one; the tools
   group is pushed right from here. */
.gbds-dc-app .gbds-project-tag {
	text-align: right;
}

.gbds-dc-app .gbds-headtools {
	margin-left: auto;
}

/* พอมีตัวสลับโปรเจกต์เพิ่มเข้ามา แถวบนแน่นขึ้นจนคำว่า "เข้าระบบ" ถูกหักคำ
   กลางคำเป็นสองบรรทัด — คำสั้นๆ แบบนี้ห้ามหัก */
.gbds-dc-app .gbds-headid > .text-muted {
	white-space: nowrap;
}

/* ตัวสลับโปรเจกต์ — ทำให้หน้าตาเหมือนป้ายชื่อโปรเจกต์เดิม ไม่ใช่ dropdown
   ของฟอร์ม เพราะมันอยู่ในหัวเว็บไม่ใช่ในแบบสอบถาม */
.gbds-dc-app .gbds-project-switch {
	font: inherit;
	font-family: var(--font-heading);
	font-size: 12px;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-divider);
	border-radius: var(--gbds-radius, 12px);
	padding: 5px 26px 5px 12px;
	max-width: 220px;
	cursor: pointer;
	/* ลูกศรวาดเอง เพราะ appearance:none ทำให้ลูกศรเดิมของเบราว์เซอร์หายไป */
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.gbds-dc-app .gbds-project-switch:hover,
.gbds-dc-app .gbds-project-switch:focus-visible {
	border-color: var(--color-accent);
	outline: 0;
}

/* The way back to the project list. An <a> styled as a button: Hello
   Elementor's reset paints links, and the design system's .btn only fully
   describes a <button>, so the colour and the underline are stated here. */
.gbds-dc-app .gbds-home-link {
	text-decoration: none;
	color: var(--color-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.gbds-dc-app .gbds-home-link:hover {
	background: var(--gbds-hover-bg, #3b362f);
	color: var(--gbds-hover-text, #f5f1e7);
}

/* The signed-in name. Filled rather than outlined, so at a glance it reads as
   "you" and the outlined badge beside it reads as "the project". */
.gbds-dc-app .gbds-user-tag {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ds-styles.css paints <body> with its "Organic" theme background (#f5ead8),
   which flashed warm beige before React had drawn the app over it — and was
   the whole screen whenever the app failed. This stylesheet only loads on
   pages carrying the app, so re-pointing body at the real page colour is safe;
   `html body` outscores ds-styles' bare `body`, which the runtime hoists into
   the head after this file. */
html body {
	background: #efece6;
}

.gbds-dc-app .elementor-widget-container,
.elementor-widget-shortcode:has(.gbds-dc-app) .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/**
 * Hello Elementor's reset paints every <button> with a #c36 border and text.
 * A blanket `.gbds-dc-app button { background: none }` used to sit here to undo
 * it — but that selector scores (0,1,1) and so outranked the design system's own
 * `.btn-primary` (0,1,0), silently stripping the green fill off every primary
 * button in the app. "เปิดดูข้อมูล" was white-on-white as a result.
 *
 * It was never needed: every `.btn` gets its background, border and colour from
 * ds-styles.css, and every button without that class carries an inline style.
 * Both already outrank Hello. Only the focus ring is neutralised here, and via
 * :where() so this rule can never outrank the design system.
 */
.gbds-dc-app :where(button) {
	outline: 0;
	box-shadow: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Upload slots — <image-slot> re-implemented by gbds-dc-app.js against the
   Media Library. Only the HOST is styled here; its contents live in a shadow
   root (React renders these elements and must keep believing they are empty).
   The corner radius is keyed off the template's own attributes because the
   `style` attribute belongs to React and must not be written to.
   ────────────────────────────────────────────────────────────────────────── */
.gbds-dc-app image-slot {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border-radius: 12px;
	background: var(--color-neutral-100, #f7f5f2);
	border: 1.5px dashed var(--color-neutral-300, #dcd7cf);
	color: var(--color-neutral-600, #7a7368);
	transition: border-color .15s ease, background .15s ease;
}

.gbds-dc-app image-slot[radius="16"] { border-radius: 16px; }
.gbds-dc-app image-slot[shape="rect"] { border-radius: 0; }
.gbds-dc-app image-slot[shape="pill"] { border-radius: 999px; }
.gbds-dc-app image-slot[shape="circle"] { border-radius: 50%; }

.gbds-dc-app image-slot:hover,
.gbds-dc-app image-slot[data-drag] {
	border-color: var(--color-accent, #6f675c);
	background: var(--color-accent-100, #f4f2ee);
}

/* A filled slot keeps a solid edge — the dashed "drop here" affordance is
   only meaningful while it is empty. The element reports its own state via
   data-state, since :has() cannot see through a shadow boundary. */
.gbds-dc-app image-slot[data-state="filled"] {
	border-style: solid;
	border-color: var(--color-neutral-300, #dcd7cf);
	background: var(--color-neutral-100, #f7f5f2);
}

/* ──────────────────────────────────────────────────────────────────────────
   Submit bar — the export had no way to send anything to GBDS.
   ────────────────────────────────────────────────────────────────────────── */
.gbds-submit-bar {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 40px);
}

.gbds-submit-bar[hidden] {
	display: none;
}

/* Selectors here are deliberately two classes deep. Hello Elementor's
   reset.css styles `[type="button"]` with a #c36 border, and that attribute
   selector scores the same (0,1,0) as a lone `.gbds-submit-btn` — on a tie the
   later stylesheet wins, and Hello's loads after this one. `.gbds-submit-bar
   .gbds-submit-btn` scores (0,2,0) and wins outright, no !important needed.
   The app's own `.btn` elements carry no type attribute, so they are safe. */
.gbds-submit-bar .gbds-submit-btn {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--gbds-accent, #6f675c);
	border: 0;
	border-radius: var(--gbds-radius, 12px);
	padding: 13px 26px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
	transition: background .15s ease;
}

.gbds-submit-bar .gbds-submit-btn:hover:not(:disabled),
.gbds-submit-bar .gbds-submit-btn:focus-visible {
	background: var(--gbds-hover-bg, #3b362f);
	color: var(--gbds-hover-text, #f5f1e7);
}

.gbds-submit-bar .gbds-submit-btn:disabled {
	opacity: .6;
	cursor: default;
}

.gbds-submit-msg {
	font-size: 13px;
	background: #fff;
	color: var(--gbds-ink, #2b2722);
	border-radius: var(--gbds-radius, 12px);
	padding: 8px 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.gbds-submit-msg:empty {
	display: none;
}

.gbds-submit-bar.is-sent .gbds-submit-msg {
	color: #2c6e2f;
}

.gbds-submit-bar.is-error .gbds-submit-msg {
	color: #b3261e;
}

@media (max-width: 700px) {
	.gbds-submit-bar {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
		justify-content: flex-end;
	}
}

/* Long tables/heatmaps scroll inside their own box rather than pushing the
   page sideways. */
.gbds-dc-app table {
	max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive
   The Claude Design export ships no media queries at all — it leans on
   auto-fit/minmax grids, which do collapse, but two shells are pinned open
   and drag the whole page sideways on a phone:
     1. the questionnaire's section <nav> (inline min-width:210px + flex-shrink:0)
     2. the sticky header's right-hand group (inline margin-left:auto, no wrap)
   Both are overridden here rather than in app.html so a re-export stays clean.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

	/* [ section nav | content ] stacks instead of sitting side by side */
	.gbds-dc-app div:has(> nav) {
		flex-wrap: wrap;
	}

	.gbds-dc-app nav {
		position: static !important;
		min-width: 0 !important;
		width: 100%;
		flex-direction: row !important;
		flex-wrap: wrap;
	}

	.gbds-dc-app nav .btn {
		font-size: 13px;
		padding-inline: 10px;
	}

	/* Nothing inside the app may push the page wider than the screen. */
	.gbds-dc-app [style*="min-width"] {
		max-width: 100%;
	}

	/* A segmented control whose options are full Thai sentences (the feng-shui
	   choice) wraps mid-pill on a phone and leaves a half-rounded stub hanging
	   below the row. Marked segs become a full-width stack instead. */
	.gbds-dc-app .gbds-seg-stack {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		border-radius: var(--gbds-radius, 12px);
	}

	.gbds-dc-app .gbds-seg-stack .seg-opt {
		width: 100%;
		border-left: 0;
	}

	.gbds-dc-app .gbds-seg-stack .seg-opt + .seg-opt {
		border-top: 1px solid var(--color-divider);
	}
}

/* The header only runs out of room on a phone — a tablet still fits brand,
   save-note and language buttons on one line, so it keeps the original row. */
@media (max-width: 700px) {

	.gbds-dc-app .nav {
		flex-wrap: wrap;
		row-gap: 10px;
		padding-inline: 16px;
	}

	.gbds-dc-app .nav > div {
		min-width: 0;
		flex-wrap: wrap;
	}

	.gbds-dc-app .nav > div:last-child {
		margin-left: 0 !important;
		width: 100%;
	}

	/* A pill whose label wraps to several lines renders as a circle and
	   collides with its neighbour — square it off once it can wrap. */
	.gbds-dc-app .nav .tag {
		border-radius: 12px;
		white-space: normal;
		text-align: left;
	}

	/* The project badge can't share a row with the sign-in block on a phone —
	   pinned right it gets squeezed into a one-word-per-line column. */
	.gbds-dc-app .gbds-project-tag {
		width: 100%;
		text-align: left;
		white-space: normal;
	}

	.gbds-dc-app .gbds-user-tag {
		max-width: 100%;
	}

	/* Same for the tools now sharing the tab row: they get their own line, with
	   the save note on a line of its own so the language buttons don't end up
	   one per row behind it. */
	.gbds-dc-app .gbds-tabrow {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.gbds-dc-app .gbds-headtools {
		margin-left: 0;
		width: 100%;
		flex-wrap: wrap;
	}

	.gbds-dc-app .gbds-headtools > .text-muted {
		width: 100%;
	}
}

/* Signed in with no house open — nothing typed on this page is kept.
   The opposite of the quiet line below: this one must be impossible to miss,
   because every other signal on the page says the form is working. */
.gbds-noproject {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100002;   /* above the submit bar, and above the WP admin bar */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 20px;
	background: #b3261e;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}

.gbds-noproject__btn {
	flex: none;
	padding: 8px 18px;
	border-radius: 999px;
	background: #fff;
	color: #b3261e;
	font-weight: 600;
	text-decoration: none;
}

/* Signed out. Not an error — the public questionnaire is meant to work this
   way — so it is stated rather than shouted. It sits at the TOP because the
   submit bar is at the bottom and still works for a guest; the red one above
   can cover that corner precisely because it has also taken the button away. */
.gbds-noproject--guest {
	top: 0;
	bottom: auto;
	background: #3f3a33;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.gbds-noproject--guest .gbds-noproject__btn {
	background: var(--color-accent, #b08d57);
	color: #fff;
}

/* Sync status — a quiet line in the corner; the household should notice it
   only when a save is in flight or has failed. */
.gbds-sync {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 60;
	padding: 8px 14px;
	border-radius: 12px;
	background: #fff;
	color: #7a7368;
	font-size: 13px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

.gbds-sync.is-saving,
.gbds-sync.is-saved { opacity: 1; }
.gbds-sync.is-error,
.gbds-sync.is-conflict { opacity: 1; color: #b3261e; }

/* ---------------------------------------------------------------------------
   The GBDS read-only view of a household's brief (?gbds_view=<id>).
   --------------------------------------------------------------------------- */

.gbds-staffbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 10px 20px;
	margin: 0 0 12px;
	background: #38332d;
	color: #f5f1e7;
	font-size: 13px;
	border-radius: 12px;
}

.gbds-staffbar__tag {
	font-weight: 700;
	letter-spacing: .06em;
	font-size: 11px;
	border: 1px solid #7a7368;
	border-radius: 999px;
	padding: 2px 9px;
}

.gbds-staffbar__name { font-weight: 600; font-size: 15px; }
.gbds-staffbar__note { color: #cfc7b8; font-size: 12.5px; }
.gbds-staffbar__link { margin-left: auto; color: #f5f1e7; font-size: 12.5px; }

.gbds-staffbar .gbds-staffbar__back {
	color: #f5f1e7;
	font-size: 12.5px;
	text-decoration: none;
	border: 1px solid #7a7368;
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}

.gbds-staffbar .gbds-staffbar__back:hover { background: #4a443c; }

/* Editing is switched off in the browser as well, but the guarantee is not
   here — sync.js returns before it installs anything, so nothing typed on this
   page can reach the household's answers whatever the CSS does. This is only
   so the view reads as a document rather than as a form waiting to be filled. */
.gbds-dc-app--staff input,
.gbds-dc-app--staff textarea,
.gbds-dc-app--staff select {
	pointer-events: none;
}

/* Not image-slot. Blocking pointer events there stopped the architect opening
   a title deed or a site photograph at full size — the files they came to the
   page for. The element has its own read-only mode (`readonly`, set in
   gbds-dc-app.js): it opens what it holds and refuses to replace or delete it,
   which is the behaviour wanted here. */
.gbds-dc-app--staff image-slot { cursor: zoom-in; }

.gbds-dc-app--staff input,
.gbds-dc-app--staff textarea,
.gbds-dc-app--staff select {
	background: #f7f5f2;
	color: #2b2722;
	border-style: dashed;
}

/* Buttons that would change an answer, hidden rather than disabled: a row of
   greyed-out "remove" buttons is noise on a page nobody can edit. */
.gbds-dc-app--staff .gbds-submit-bar { display: none; }

/* โหมดแก้ไขแทนลูกค้า (staff-edit.js) — คืนฟิลด์ให้พิมพ์ได้และหน้าตากลับเป็น
   ฟอร์มปกติ สองคลาสชนะบล็อกด้านบนด้วย specificity ไม่ใช้ !important
   การเขียนจริงออกทาง /staff-personal เท่านั้น ซึ่งจดชื่อผู้แก้และเวลาเสมอ —
   sync.js ยังหยุดตายบน staff เหมือนเดิม */
.gbds-dc-app--staff.gbds-dc-app--staffedit input,
.gbds-dc-app--staff.gbds-dc-app--staffedit textarea,
.gbds-dc-app--staff.gbds-dc-app--staffedit select {
	pointer-events: auto;
	background: #ffffff;
	color: #2b2722;
	border-style: solid;
}

.gbds-staffbar__edit { display: inline-flex; gap: 8px; margin-left: 8px; }

.gbds-staffbar .gbds-staffbar__edit button {
	color: #2b2722;
	background: #f5f1e7;
	font-size: 12.5px;
	border: 1px solid #7a7368;
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
	cursor: pointer;
}

.gbds-staffbar .gbds-staffbar__edit button:hover { background: #ffffff; }
.gbds-staffbar .gbds-staffbar__edit button[disabled] { opacity: .6; cursor: default; }

.gbds-staffbar .gbds-staffbar__edit button.is-ghost {
	background: transparent;
	color: #f5f1e7;
}

.gbds-staffbar .gbds-staffbar__edit button.is-ghost:hover { background: #4a443c; }

/* แถบเสนอกู้การแก้ไขของทีมงานที่ค้างอยู่ — ตำแหน่งและ z-index ตามบทเรียน
   .gbds-rescue: ต้องหลบ admin bar (99999) และต้องกดปุ่มได้จริง (hit test) */
.gbds-staffrestore {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 16px;
	background: #3b362f;
	color: #f5f1e7;
	font-size: 13.5px;
}

.gbds-staffrestore button {
	color: #2b2722;
	background: #f5f1e7;
	font-size: 12.5px;
	border: 1px solid #7a7368;
	border-radius: 999px;
	padding: 4px 14px;
	white-space: nowrap;
	cursor: pointer;
}

.gbds-staffrestore button:hover { background: #ffffff; }
.gbds-staffrestore button.is-ghost { background: transparent; color: #f5f1e7; }
.gbds-staffrestore button.is-ghost:hover { background: #4a443c; }

/* ปฏิทิน popup ของวันเกิด — เลือกปีจากตารางก่อน แล้วเดือน แล้ววัน
   ใช้ .dialog-backdrop/.dialog ของ design system เป็นโครง เพิ่มเฉพาะ grid */
.gbds-dc-app .gbds-datebtn { text-align: left; cursor: pointer; }

.gbds-dc-app .gbds-datepick { width: min(400px, calc(100vw - 40px)); }

.gbds-dc-app .gbds-datepick-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 12px 0;
	flex-wrap: wrap;
}

.gbds-dc-app .gbds-datepick-grid { display: grid; gap: 6px; }
.gbds-dc-app .gbds-datepick-grid--year,
.gbds-dc-app .gbds-datepick-grid--month { grid-template-columns: repeat(3, 1fr); }
.gbds-dc-app .gbds-datepick-grid--day { grid-template-columns: repeat(7, 1fr); }

.gbds-dc-app .gbds-datepick-dow {
	font-size: 11px;
	text-align: center;
	color: var(--color-neutral-500, #978f84);
	padding: 2px 0;
}

.gbds-dc-app .gbds-datepick-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 8px 4px;
	font: inherit;
	font-size: 13.5px;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-divider, #dcd7cf);
	border-radius: var(--gbds-radius, 12px);
	cursor: pointer;
	color: inherit;
}

.gbds-dc-app .gbds-datepick-cell small { font-size: 10px; opacity: .55; }

.gbds-dc-app .gbds-datepick-cell:hover {
	background: var(--gbds-hover-bg, #3b362f);
	color: var(--gbds-hover-text, #f5f1e7);
}

@media print {
	.gbds-staffbar { display: none; }
}

/* Unsaved answers found in this browser. Unlike the sync line this one is meant
   to be noticed and answered — it sits across the top rather than in a corner,
   because the household is about to be shown an empty form that is not the
   whole truth. */
.gbds-rescue {
	position: fixed;
	/* Not `top: 0`. WordPress shows the admin bar to every signed-in user,
	   subscribers included, and it sits at z-index 99999 — the bar rendered
	   underneath it and the buttons could not be clicked at all. Found by a
	   hit test in the browser: the element on top was `.ab-item`. */
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	/* Offsetting below the admin bar is not enough on its own. Its items reach
	   further down the page than its 32px would suggest — a hit test at the
	   middle of this bar's button still returned `.ab-item`, so the click never
	   arrived and the prompt looked broken while its code was fine. Sitting
	   above 99999 makes it reachable whatever the admin bar's own geometry. */
	z-index: 100001;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 20px;
	background: #38332d;
	color: #f5f1e7;
	font-size: 13.5px;
	line-height: 1.6;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.gbds-rescue__text { flex: 1 1 320px; }
.gbds-rescue__warn { flex: 1 1 100%; font-size: 12px; color: #cfc7b8; order: 3; }
.gbds-rescue__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Two classes deep, the same reason as everywhere else in this theme: Hello
   Elementor's reset styles [type="button"] at (0,1,0) and loads after us. */
.gbds-rescue .gbds-rescue__btn {
	font: inherit;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 12px;
	border: 1px solid #7a7368;
	background: transparent;
	color: #f5f1e7;
	cursor: pointer;
}

.gbds-rescue .gbds-rescue__btn--go {
	background: #f5f1e7;
	border-color: #f5f1e7;
	color: #2b2722;
	font-weight: 600;
}

.gbds-rescue .gbds-rescue__btn[disabled] { opacity: .6; cursor: default; }

/* Older WordPress does not set the custom property, so pin the two heights it
   actually uses: 32px on desktop, 46px below 783px where the bar gets taller. */
body.admin-bar .gbds-rescue { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .gbds-rescue { top: 46px; }
}