/*
 * Calibre brand on Frappe v16 (Espresso). Only Frappe's own colour variables are overridden, so upgrades keep
 * working; no component is restyled. Colours are Calibre HK's tokens (brand #15457A, accent #2563EB).
 */
:root,
[data-theme="light"] {
	--calibre-brand: #15457a;
	--calibre-brand-hover: #123b69;
	--calibre-brand-active: #0f3159;
	--calibre-accent: #2563eb;

	--primary: var(--calibre-brand);
	--primary-color: var(--calibre-brand);
	--brand-color: var(--calibre-brand);
	--btn-primary: var(--calibre-brand);
	--progress-bar-bg: var(--calibre-accent);
	--checkbox-color: var(--calibre-brand);
	--date-active-bg: var(--calibre-brand);
}

[data-theme="dark"] {
	--calibre-brand: #3b82f6;
	--calibre-brand-hover: #4f8ff7;
	--calibre-brand-active: #2f6fd8;
	--calibre-accent: #3b82f6;

	--primary: var(--calibre-brand);
	--primary-color: var(--calibre-brand);
	--brand-color: var(--calibre-brand);
	--btn-primary: var(--calibre-brand);
	--progress-bar-bg: var(--calibre-accent);
	--checkbox-color: var(--calibre-brand);
	--date-active-bg: var(--calibre-brand);
}

/*
 * Espresso solid buttons (primary actions) take the Calibre colour, with white text in both themes. Espresso sets
 * these on each button; only the default (gray) theme is remapped, so red "danger" buttons stay red.
 */
.es-button:not([data-theme]) {
	--bt-solid-bg: var(--calibre-brand);
	--bt-solid-bg-hover: var(--calibre-brand-hover);
	--bt-solid-bg-active: var(--calibre-brand-active);
	--bt-solid-fg: #ffffff;
}

.btn.btn-primary {
	color: #ffffff;
}

/* WhatsApp panel (top of Client, Watch, Receipt, Request, Expected parcel, Assessment) */
.calibre-wa {
	/* WhatsApp's own chat colours, light and dark */
	--wa-head: #008069; --wa-head-text: #fff; --wa-bg: #efeae2; --wa-in: #fff; --wa-out: #d9fdd3; --wa-text: #111b21;
	--wa-meta: #667781; --wa-bar: #f0f2f5; --wa-input: #fff; --wa-send: #00a884; --wa-read: #53bdeb;
	position: fixed; top: var(--navbar-height, 48px); right: 0; bottom: 0; z-index: 1030; width: min(420px, 100vw);
	display: flex; flex-direction: column; background: var(--wa-bg); color: var(--wa-text);
	box-shadow: -8px 0 24px rgb(0 0 0 / 0.18); transform: translateX(105%); transition: transform 0.22s ease; visibility: hidden;
}
[data-theme="dark"] .calibre-wa {
	--wa-head: #202c33; --wa-head-text: #e9edef; --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef;
	--wa-meta: #8696a0; --wa-bar: #202c33; --wa-input: #2a3942; --wa-send: #00a884;
}
.calibre-wa.open { transform: none; visibility: visible; }
.calibre-wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--wa-head); color: var(--wa-head-text); }
.calibre-wa-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.25); font-weight: 600; flex: none; }
.calibre-wa-who { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.calibre-wa-who strong, .calibre-wa-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calibre-wa-who small { opacity: 0.8; }
.calibre-wa-icon { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 50%; cursor: pointer; }
.calibre-wa-icon:hover { background: rgb(127 127 127 / 0.2); }
.calibre-wa-thread { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 12px 14px; }
.calibre-wa-thread > .text-muted { align-self: center; background: var(--wa-in); color: var(--wa-meta); padding: 4px 10px; border-radius: 8px; }
.calibre-wa-msg { max-width: 80%; padding: 6px 9px 4px; border-radius: 8px; background: var(--wa-in); box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13); align-self: flex-start; }
.calibre-wa-msg.out { align-self: flex-end; background: var(--wa-out); }
.calibre-wa-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.calibre-wa-meta { font-size: 11px; color: var(--wa-meta); text-align: right; margin-top: 2px; }
.calibre-wa-send { display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; background: var(--wa-bar); color: var(--wa-meta); }
.calibre-wa-send textarea { flex: 1; min-width: 0; resize: none; min-height: 40px; max-height: 140px; border: 0; border-radius: 8px; padding: 9px 12px; background: var(--wa-input); color: var(--wa-text); font-size: 14px; outline: none; }
.calibre-wa-send-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--wa-send); color: #fff; font-size: 16px; cursor: pointer; flex: none; }
.calibre-wa-note { padding: 10px 14px; background: var(--wa-bar); color: var(--wa-meta); font-size: 13px; }
.calibre-wa-img { display: block; max-width: 240px; max-height: 240px; border-radius: 6px; margin-bottom: 4px; }
.calibre-wa-file { display: inline-block; margin-bottom: 4px; overflow-wrap: anywhere; }
.calibre-wa-load { margin-bottom: 4px; }
/* the header button: WhatsApp green, with a count of messages waiting for a reply */
.calibre-wa-btn { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.calibre-wa-badge { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #008069; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
@media (max-width: 640px) { .calibre-wa { width: 100vw; } }

/* Clean desk (calibre_ui.js adds body.calibre-clean): only Frappe tools staff don't use and could be confused by.
   Kept on purpose: comment counts (approval notes are comments), Attachments (filed PDFs), "Last edited by".
   Also hidden: the ◀ ▶ record arrows and the sidebar's app switcher (Calibre is the only workspace).
   Admins bring the rest back with "Show admin tools" in a record's ⋯ menu. */
.calibre-clean .list-row-like,
.calibre-clean .list-liked-by-me,
.calibre-clean .like-action,
.calibre-clean .list-paging-area .es-tab-buttons .es-pill:nth-child(n+3),
.calibre-clean .layout-side-section.right .form-assignments,
.calibre-clean .layout-side-section.right .form-tags,
.calibre-clean .layout-side-section.right .form-shared,
.calibre-clean .grid-heading-row .grid-static-col .settings-icon,
.calibre-clean .grid-heading-row .col.d-flex .btn-open-row-settings,
.calibre-clean .new-timeline .timeline-content.action-buttons,
.calibre-clean .page-head .prev-doc,
.calibre-clean .page-head .next-doc,
.calibre-clean a.sidebar-header .drop-icon { display: none !important; }
/* lists: the List / Report / Kanban switcher opens other pages */
.calibre-clean .page-head .view-switcher { display: none !important; }
/* the workspace name stays as a plain label (it linked to the apps screen; the switcher to other apps is gone) */
.calibre-clean a.sidebar-header { pointer-events: none; }

/* Dashboard is managers-only (the workspace refuses others); hide its sidebar link for staff */
body.calibre-staff .sidebar-item-container[data-id="Dashboard"] { display: none; }

/* Home › Quick actions: a tile with a count ("WhatsApp inbox · 3 received") wraps instead of cutting its name */
.shortcut-widget-box .widget-head { flex-wrap: wrap; row-gap: 6px; }
.shortcut-widget-box .widget-title .ellipsis { white-space: normal; overflow: visible; }

/* Lists: one search box (calibre_ui.js) in place of the row of filter boxes, for everyone (28 Oct 2026: with admin tools
   on they stacked down the side of every list). The Filter button stays for exact filters. */
.page-form .standard-filter-section { display: none !important; }
.calibre-list-search { flex: 1 1 280px; max-width: 460px; margin: 3px 8px 0 0; padding-top: 5px; }
/* same height, line and look as the Filters and sort buttons beside it */
.calibre-list-search input { height: 29px; padding: 4px 10px; font-size: var(--text-base, 14px); }

/* Receive a parcel (page/receive): phone-first steps inside Calibre, in Calibre's colours (light and dark) */
.calibre-receive {
	--rc-panel: var(--card-bg, #fff); --rc-panel-2: var(--subtle-fg, #f7f7f7); --rc-line: var(--border-color, #e2e2e2);
	--rc-ink: var(--text-color, #171717); --rc-muted: var(--text-muted, #6b6b6b); --rc-brand: var(--primary, #15457a);
	--rc-soft: var(--bg-blue, #e8f0fb); --rc-bad: var(--red-600, #c53030); --rc-bad-soft: var(--bg-red, #fdecec);
	--rc-warn: var(--yellow-700, #8a5a12); --rc-warn-soft: var(--bg-yellow, #fdf5e2); --rc-ok: var(--green-700, #2f6b3b); --rc-ok-soft: var(--bg-green, #e8f5ec);
	max-width: 640px; margin: 0 auto; padding: 8px 20px 96px; display: grid; gap: 12px; color: var(--rc-ink);
}
.calibre-receive .sub { color: var(--rc-muted); font-size: 13px; margin: 0; }
.calibre-receive .card { background: var(--rc-panel); border: 1px solid var(--rc-line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.calibre-receive .card h2 { font-size: 15px; font-weight: 600; margin: 0; }
.calibre-receive .muted { color: var(--rc-muted); font-size: 13px; margin: 0; }
.calibre-receive .choice, .calibre-receive .hits { display: grid; gap: 8px; }
.calibre-receive .opt { text-align: left; width: 100%; border: 1px solid var(--rc-line); background: var(--rc-panel); color: var(--rc-ink); border-radius: 12px; padding: 12px; font: inherit; display: grid; gap: 2px; cursor: pointer; }
.calibre-receive .opt[aria-pressed="true"] { border-color: var(--rc-brand); background: var(--rc-soft); }
.calibre-receive .opt b { font-size: 15px; } .calibre-receive .opt span { color: var(--rc-muted); font-size: 13px; }
.calibre-receive label.f { display: grid; gap: 4px; font-size: 13px; color: var(--rc-muted); margin: 0; }
.calibre-receive label.f .hint { font-size: 12px; }
.calibre-receive input, .calibre-receive select, .calibre-receive textarea { font: inherit; color: var(--rc-ink); background: var(--control-bg, var(--rc-panel)); border: 1px solid var(--rc-line); border-radius: 10px; padding: 10px 12px; width: 100%; min-height: 44px; }
.calibre-receive textarea { min-height: 70px; }
.calibre-receive .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.calibre-receive .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.calibre-receive .chip { border: 1px solid var(--rc-line); background: var(--rc-panel); color: var(--rc-ink); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14px; min-height: 40px; cursor: pointer; }
.calibre-receive .chip[aria-pressed="true"] { background: var(--rc-brand); border-color: var(--rc-brand); color: #fff; }
.calibre-receive .watch { border: 1px solid var(--rc-line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: var(--rc-panel-2); }
.calibre-receive .watch.off { opacity: 0.55; }
.calibre-receive .watch-head { display: flex; align-items: center; gap: 8px; } .calibre-receive .watch-head b { flex: 1; }
.calibre-receive .photos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.calibre-receive .photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rc-line); }
.calibre-receive .btn { border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 600; min-height: 48px; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.calibre-receive .btn.primary { background: var(--rc-brand); color: #fff; }
.calibre-receive .btn.ghost { background: var(--rc-panel); color: var(--rc-ink); border: 1px solid var(--rc-line); }
.calibre-receive .btn.small { min-height: 40px; padding: 8px 12px; font-weight: 500; display: inline-block; }
.calibre-receive .alert { border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0; }
.calibre-receive .alert.bad { background: var(--rc-bad-soft); color: var(--rc-bad); }
.calibre-receive .alert.warn { background: var(--rc-warn-soft); color: var(--rc-warn); }
.calibre-receive .alert.ok { background: var(--rc-ok-soft); color: var(--rc-ok); }
.calibre-receive .in { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
/* the Receive button stays at the bottom of the screen while the steps scroll */
.calibre-receive .bar { position: sticky; bottom: 0; z-index: 5; background: var(--rc-panel); border-top: 1px solid var(--rc-line);
	margin: 0 -20px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); }
.calibre-receive .bar .btn { width: 100%; }
.calibre-receive [hidden] { display: none !important; }
/* Phones: the list search takes the full width above the Filters and sort buttons; Frappe's phone-only ID box goes */
@media (max-width: 767px) {
	.calibre-list-search { flex: 0 0 auto; width: 100%; max-width: none; margin: 0 0 4px; padding: 0; order: -1 !important; }
}
.calibre-clean .mobile-id-filter { display: none !important; }
/* Receive on a phone: a margin at the screen edges, the Receive bar still edge to edge */
@media (max-width: 767px) {
	.calibre-receive { padding-left: 12px; padding-right: 12px; }
	.calibre-receive .bar { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
}

/* Phone tab bar (calibre_tabs.js; tabs set in Calibre Settings › Phone tabs) */
.calibre-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; justify-content: space-around;
	background: var(--card-bg, #fff); border-top: 1px solid var(--border-color, #e2e2e2);
	padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.calibre-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px;
	color: var(--text-muted, #6b6b6b); background: none; border: 0; text-decoration: none !important; font-size: 11px; line-height: 1.2; }
.calibre-tab.active { color: var(--primary, #15457a); font-weight: 600; }
.calibre-tab-icon { position: relative; display: inline-flex; }
.calibre-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calibre-tab-badge { position: absolute; top: -5px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
	background: var(--red-500, #e03e3e); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
/* room for the bar: page content, the Receive button and the WhatsApp panel sit above it */
body.calibre-has-tabs .page-container, body.calibre-has-tabs .layout-main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.calibre-has-tabs .calibre-receive .bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
body.calibre-has-tabs .calibre-wa { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .calibre-tabs { display: none; } }
/* Phones: More (tab bar) replaces the ☰ menu button; pages below a tab show ← Back in its place */
body.calibre-has-tabs .page-head .sidebar-toggle-btn { display: none !important; }
.calibre-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 4px 0 -8px;
	border-radius: 50%; color: var(--text-color, #171717); flex: none; }
.calibre-back:active { background: var(--subtle-fg, #f3f3f3); }
/* Phones: search as an icon beside Filters and sort (opens the box), and no page-size buttons (rows load as you scroll) */
.calibre-search-icon { display: none; }
@media (max-width: 767px) {
	.calibre-search-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 29px; margin-right: 6px;
		border-radius: 8px; background: var(--control-bg, #f3f3f3); color: var(--text-color, #171717); }
	.calibre-search-icon.active { background: var(--primary, #15457a); color: #fff; }
	.calibre-list-search { display: none; }
	.calibre-list-search.open { display: block; }
	.calibre-clean .list-paging-area .es-tab-buttons { display: none !important; }
	.calibre-clean .list-paging-area .btn-more { opacity: 0.6; }
}

/* Receive: the client asked us to arrange insurance on this parcel */
.calibre-receive .calibre-insure, .calibre-insure { display: block; color: var(--orange-600, #b45309); font-weight: 600; }
/* Receive: no ID on file for the client (option B, 28 Oct 2026) */
.calibre-id-warn { padding: 10px 12px; margin: 8px 0; border-radius: 8px; background: var(--red-50, #fef2f2); color: var(--red-700, #b91c1c); }
.calibre-id-warn .f { color: var(--text-color, #171717); margin-top: 8px; }

/* Condition check (page/assess): Calibre Manila's assessment form, on the Receive page's colours and controls */
.calibre-assess { max-width: 760px; }
.calibre-assess .ca-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.calibre-assess .ca-head .back { color: var(--rc-muted); font-size: 13px; text-decoration: none; }
.calibre-assess .state { font-size: 12px; color: var(--rc-muted); }
.calibre-assess .state.ok { color: var(--rc-ok); } .calibre-assess .state.bad { color: var(--rc-bad); font-weight: 600; }
.calibre-assess .ca-title h1 { font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.calibre-assess .ca-title p { margin: 4px 0 0; }
.calibre-assess .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: var(--rc-ink); }
.calibre-assess .card h2 { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--rc-muted); }
.calibre-assess .rest-no { margin: 4px 0 10px; }
.calibre-assess .card h2 .count { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; background: var(--rc-panel-2); border-radius: 6px; padding: 2px 8px; }
.calibre-assess .card h2 .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.calibre-assess .card label.f i { font-style: normal; opacity: 0.8; }
.calibre-assess .item { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--rc-line); }
.calibre-assess .card h2 + .item { border-top: 0; padding-top: 0; }
.calibre-assess .item > b, .calibre-assess .item-head b { font-size: 14px; }
.calibre-assess .item-head { display: flex; align-items: center; gap: 8px; }
.calibre-assess .item-head .scored { margin-left: auto; font-size: 12px; color: var(--rc-muted); font-weight: 600; }
.calibre-assess .item-head .x { margin-left: auto; border: 0; background: none; color: var(--rc-muted); font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
/* tap choices: one row of equal buttons (Manila's segmented control); pills for inclusions */
.calibre-assess .seg { display: flex; gap: 4px; background: var(--rc-panel-2); padding: 4px; border-radius: 12px; }
.calibre-assess .seg button { flex: 1 1 0; min-width: 0; min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--rc-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calibre-assess .seg button[aria-pressed="true"] { background: var(--rc-panel); color: var(--rc-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.calibre-assess .seg.pills { background: none; padding: 0; gap: 6px; }
.calibre-assess .seg.pills button { background: var(--rc-panel-2); border-radius: 999px; }
.calibre-assess .seg.pills button[aria-pressed="true"] { background: var(--rc-ink); color: var(--rc-panel); box-shadow: none; }
.calibre-assess .seg button:disabled { cursor: default; }
.calibre-assess .seg button:disabled:not([aria-pressed="true"]) { opacity: 0.45; }
.calibre-assess .row.solo { grid-template-columns: 1fr; }
.calibre-assess textarea { min-height: 44px; resize: vertical; }
.calibre-assess .note-row { display: flex; gap: 8px; align-items: flex-start; }
.calibre-assess .note-row > input, .calibre-assess .note-row > textarea { flex: 1; min-width: 0; }
.calibre-assess .thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.calibre-assess .note-row .thumbs { flex: 0 1 auto; justify-content: flex-end; max-width: 50%; }
.calibre-assess .thumb { position: relative; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rc-line); border-radius: 10px; overflow: hidden; background: var(--rc-panel-2); cursor: pointer; }
.calibre-assess .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.calibre-assess .thumb.off img { opacity: 0.4; }
.calibre-assess .thumb .star { position: absolute; left: 2px; top: 0; color: #f5c84c; font-size: 13px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }
.calibre-assess .thumb .mk { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border: 2px solid #d62828; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.calibre-assess .cam { width: 48px; height: 48px; margin: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--rc-brand); color: var(--rc-brand); background: var(--rc-soft); cursor: pointer; flex: none; }
.calibre-assess .add-inc { display: flex; gap: 8px; } .calibre-assess .add-inc input { flex: 1; min-width: 0; } .calibre-assess .add-inc .btn { white-space: nowrap; }
.calibre-assess .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calibre-assess .grid2 .opt { min-height: 48px; align-content: center; }
.calibre-assess .overall { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--rc-panel-2); border-radius: 12px; padding: 12px 14px; }
.calibre-assess .overall > div:first-child { display: grid; gap: 2px; }
.calibre-assess .overall .big { font-size: 32px; font-weight: 700; line-height: 1; text-align: right; }
.calibre-assess .overall .big small { font-size: 14px; color: var(--rc-muted); font-weight: 600; }
.calibre-assess .overall .big span { display: block; font-size: 12px; font-weight: 600; color: var(--rc-muted); margin-top: 4px; }
.calibre-assess .summary { margin: 0; font-size: 15px; line-height: 1.55; background: var(--rc-panel-2); border-radius: 12px; padding: 12px 14px; }
.calibre-assess .alert .links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.calibre-assess .alert .link { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.calibre-assess .alert.muted-b { background: var(--rc-panel-2); color: var(--rc-muted); }
.calibre-assess .round { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--rc-line); color: var(--rc-ink); text-decoration: none; font-size: 14px; }
.calibre-assess .round.on { font-weight: 600; }
.calibre-assess .bar-row { display: flex; flex-wrap: wrap; gap: 8px; } .calibre-assess .bar-row .btn { flex: 1 1 auto; }
.calibre-assess .btn.warn { color: var(--rc-warn); border-color: var(--rc-warn); }
.ca-sheet-img { display: grid; gap: 6px; margin-bottom: 8px; } .ca-sheet-img img { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 10px; background: #000; }
@media (max-width: 767px) {
	.calibre-assess .seg button { font-size: 12px; }
	.calibre-assess .note-row { flex-wrap: wrap; } .calibre-assess .note-row .thumbs { max-width: none; justify-content: flex-start; }
}
@media (max-width: 420px) { .calibre-assess .grid2 { grid-template-columns: 1fr; } }

/* Photo markup (assess): full screen, black, red marks */
.calibre-markup { position: fixed; inset: 0; z-index: 2000; background: #000; color: #fff; display: flex; flex-direction: column; touch-action: none; user-select: none; }
.calibre-markup .mk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.calibre-markup .mk-top > div { text-align: center; display: grid; } .calibre-markup .mk-top b { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.calibre-markup .mk-top span { font-size: 11px; opacity: 0.6; }
.calibre-markup button { font: inherit; color: #fff; background: none; border: 0; cursor: pointer; }
.calibre-markup .mk-top button[data-a="cancel"] { width: 40px; height: 40px; border-radius: 50%; font-size: 18px; }
.calibre-markup .mk-top .use { background: #d62828; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.calibre-markup .mk-top .use:disabled { opacity: 0.5; }
.calibre-markup .mk-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.calibre-markup canvas { max-width: 100%; max-height: 100%; border-radius: 6px; touch-action: none; }
.calibre-markup .mk-bottom { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; justify-items: center; }
.calibre-markup .mk-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 4px; width: min(320px, 100%); }
.calibre-markup .mk-tools button { min-height: 40px; border-radius: 9px; font-size: 13px; font-weight: 600; opacity: 0.7; }
.calibre-markup .mk-tools button[aria-pressed="true"] { background: #d62828; opacity: 1; }
.calibre-markup .mk-help { margin: 0; font-size: 11px; opacity: 0.7; }
.calibre-markup .mk-acts { display: flex; gap: 32px; } .calibre-markup .mk-acts button { padding: 8px; font-size: 12px; font-weight: 600; }
.calibre-markup .mk-acts button:disabled { opacity: 0.3; }
.calibre-assess .ca-switch { display: flex; align-items: flex-start; gap: 10px; width: 100%; justify-self: stretch; margin: 0; padding: 8px 0; border-top: 1px solid var(--rc-line); cursor: pointer; }
.calibre-assess .ca-switch span { flex: 1; min-width: 0; }
.calibre-assess .card h2 + .ca-switch { border-top: 0; }
.calibre-assess .ca-switch input { width: 20px; min-height: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rc-brand); }
.calibre-assess .ca-switch span { display: grid; gap: 1px; } .calibre-assess .ca-switch b { font-size: 14px; font-weight: 600; } .calibre-assess .ca-switch small { color: var(--rc-muted); font-size: 12px; }
.calibre-assess .thumb.private::after { content: "🔒"; position: absolute; right: 1px; top: 0; font-size: 10px; }
/* a completed report: its actions in a compact row (wrapping on phones), not full-width stacked buttons */
.calibre-assess .bar .bar-row .btn { width: auto; flex: 1 1 auto; min-height: 42px; padding: 8px 12px; font-size: 13px; display: inline-block; white-space: nowrap; }
@media (max-width: 520px) { .calibre-assess .bar .bar-row .btn { flex: 1 1 calc(50% - 8px); } .calibre-assess .bar .bar-row .btn.primary { flex-basis: 100%; } }

/* Photos (page/photos): photographer's shoots, on the check screen's look */
.calibre-photos .back.link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--rc-muted); cursor: pointer; }
.calibre-photos .ph-watches { display: grid; gap: 8px; }
.calibre-photos .ph-watch { display: flex; gap: 12px; align-items: center; }
.calibre-photos .ph-watch img, .calibre-photos .ph-noimg { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: var(--rc-panel-2); }
.calibre-photos .ph-watch > span { display: grid; gap: 2px; min-width: 0; }
.calibre-photos .ph-watch em { font-style: normal; color: var(--rc-brand); }
.calibre-photos .ph-shoot { width: 100%; border: 0; border-top: 1px solid var(--rc-line); background: none; font: inherit; color: var(--rc-ink); cursor: pointer; align-items: center; text-align: left; }
.calibre-photos .chip-s { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--rc-panel-2); color: var(--rc-muted); white-space: nowrap; }
.calibre-photos .chip-s.ok { background: var(--rc-ok-soft); color: var(--rc-ok); } .calibre-photos .chip-s.warn { background: var(--rc-warn-soft); color: var(--rc-warn); }
.calibre-photos .ph-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calibre-photos .ph-add .btn { margin: 0; }
.calibre-photos .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.calibre-photos .ph-photo { margin: 0; border: 1px solid var(--rc-line); border-radius: 12px; overflow: hidden; background: var(--rc-panel); display: grid; }
.calibre-photos .ph-photo.hero { border-color: #c9a646; box-shadow: 0 0 0 2px rgba(201, 166, 70, 0.35); }
.calibre-photos .ph-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--rc-panel-2); }
.calibre-photos .ph-photo figcaption { padding: 8px; display: grid; gap: 6px; }
.calibre-photos .ph-photo input[data-caption] { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.calibre-photos .ph-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calibre-photos .chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; border: 1px solid var(--rc-line); background: var(--rc-panel); color: var(--rc-muted); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.calibre-photos .chip.on { background: var(--rc-ink); border-color: var(--rc-ink); color: var(--rc-panel); }
.calibre-photos .chip input { width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; }
.calibre-photos .ph-tools .x { margin-left: auto; border: 0; background: none; color: var(--rc-muted); font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 520px) { .calibre-photos .ph-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }
.calibre-photos .ph-photo video { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #000; }

/* Media as a drive: folders and items as a grid or a list, sorting, selecting, and the viewer */
.calibre-photos .ph-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calibre-photos .ph-spacer { flex: 1; }
.calibre-photos .ph-search { flex: 1 1 200px; min-width: 0; width: auto; }
.calibre-photos .ph-table td .flags { flex-wrap: nowrap; }
.calibre-photos .ph-bar .btn.small { white-space: nowrap; }
.calibre-photos .ph-sort { width: auto; min-height: 36px; padding: 4px 28px 4px 10px; font-size: 13px; }
.calibre-photos .ph-view { padding: 3px; flex: none; }
.calibre-photos .ph-view button { min-height: 30px; width: 34px; flex: none; display: grid; place-items: center; }
.calibre-photos .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.calibre-photos .chip.bad { color: var(--rc-bad); border-color: var(--rc-bad); }
.calibre-photos .chip-s.gold { background: #f6efdc; color: #7d6a2e; }
.calibre-photos .ph-crumbs { font-size: 13px; color: var(--rc-muted); display: flex; gap: 6px; align-items: center; min-width: 0; }
.calibre-photos .ph-crumbs b { color: var(--rc-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calibre-photos .ph-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; color: var(--rc-muted); text-align: center; }
.calibre-photos .ph-empty p { margin: 0; }
/* folders */
.calibre-photos .ph-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.calibre-photos .ph-folder { display: grid; padding: 0; text-align: left; border: 1px solid var(--rc-line); border-radius: 14px; overflow: hidden; background: var(--rc-panel); color: var(--rc-ink); font: inherit; cursor: pointer; }
.calibre-photos .ph-folder:hover { border-color: var(--rc-brand); }
.calibre-photos .ph-folder .cover { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--rc-panel-2); color: var(--rc-muted); }
.calibre-photos .ph-folder .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calibre-photos .vbadge { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; }
.calibre-photos .vbadge svg { width: 14px; height: 14px; }
.calibre-photos .ph-folder .meta { display: grid; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.calibre-photos .ph-folder .meta b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calibre-photos .ph-folder .meta .muted { font-size: 12px; }
.calibre-photos .ph-folder .row2 { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.calibre-photos .ph-folder .row2 .muted { white-space: nowrap; font-size: 11px; }
/* tables (list views) */
.calibre-photos .ph-table { overflow-x: auto; border: 1px solid var(--rc-line); border-radius: 12px; background: var(--rc-panel); }
.calibre-photos .ph-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calibre-photos .ph-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rc-muted); padding: 8px 10px; border-bottom: 1px solid var(--rc-line); white-space: nowrap; }
.calibre-photos .ph-table td { padding: 6px 10px; border-bottom: 1px solid var(--rc-line); vertical-align: middle; white-space: nowrap; }
.calibre-photos .ph-table td b { display: block; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.calibre-photos .ph-table td .muted { display: block; font-size: 11px; }
.calibre-photos .ph-table tbody tr { cursor: pointer; } .calibre-photos .ph-table tbody tr:hover { background: var(--rc-panel-2); }
.calibre-photos .ph-table tr:last-child td { border-bottom: 0; }
.calibre-photos .ph-table td.t { width: 52px; position: relative; }
.calibre-photos .ph-table td.t img, .calibre-photos .ph-table td.t video { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; background: var(--rc-panel-2); }
.calibre-photos .ph-table td.t .vplay { position: absolute; left: 10px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.calibre-photos .ph-table td.t .vplay svg { width: 16px; height: 16px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)); }
.calibre-photos .ph-fic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--rc-panel-2); color: var(--rc-muted); }
.calibre-photos .ph-fic svg { width: 22px; height: 22px; }
/* items as a grid */
.calibre-photos .ph-photo { cursor: pointer; }
.calibre-photos .ph-photo.picked { border-color: var(--rc-brand); box-shadow: 0 0 0 2px var(--rc-soft); }
.calibre-photos .ph-media { position: relative; }
.calibre-photos .ph-media img, .calibre-photos .ph-media video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #111; }
.calibre-photos .ph-media .vplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.calibre-photos .ph-media .vplay svg { width: 40px; height: 40px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
.calibre-photos .ph-pick { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--rc-brand); }
.calibre-photos .ph-photo figcaption { padding: 8px 10px 10px; display: grid; gap: 2px; min-width: 0; }
.calibre-photos .ph-photo figcaption b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calibre-photos .ph-photo figcaption .muted { font-size: 11px; }
.calibre-photos .flags { display: flex; gap: 4px; flex-wrap: wrap; min-height: 4px; }
.calibre-photos .ph-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--rc-soft); font-size: 13px; }
.calibre-photos .ph-bulk b { margin-right: 4px; }
/* the viewer */
.calibre-viewer { position: fixed; inset: 0; z-index: 1100; background: #0b0f11; color: #fff; display: flex; flex-direction: column; }
.calibre-viewer button, .calibre-viewer a { font: inherit; color: #fff; }
.calibre-viewer .v-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; font-size: 13px; }
.calibre-viewer .v-top button { border: 0; background: rgba(255, 255, 255, 0.1); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.calibre-viewer .v-top span { flex: 1; opacity: 0.7; }
.calibre-viewer .v-dl { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 600; font-size: 12px; }
.calibre-viewer .v-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 48px 1fr 48px 300px; align-items: center; gap: 8px; padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.calibre-viewer .v-stage { min-height: 0; height: 100%; display: grid; place-items: center; }
.calibre-viewer .v-stage img, .calibre-viewer .v-stage video { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 6px; }
.calibre-viewer .v-nav { border: 0; background: rgba(255, 255, 255, 0.08); height: 64px; border-radius: 12px; font-size: 32px; line-height: 1; cursor: pointer; }
.calibre-viewer .v-nav:disabled { opacity: 0.2; cursor: default; }
.calibre-viewer .v-info { align-self: stretch; overflow-y: auto; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px; display: grid; gap: 12px; align-content: start; font-size: 13px; }
.calibre-viewer .v-info label { display: grid; gap: 4px; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.calibre-viewer .v-info input { font: inherit; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 8px 10px; }
.calibre-viewer dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.calibre-viewer dt { color: rgba(255, 255, 255, 0.55); font-weight: 400; } .calibre-viewer dd { margin: 0; word-break: break-all; }
.calibre-viewer .v-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.calibre-viewer .chip { border: 1px solid rgba(255, 255, 255, 0.3); background: none; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.calibre-viewer .chip.on { background: #fff; color: #111; border-color: #fff; }
.calibre-viewer .chip.bad { border-color: #f08a80; color: #f08a80; }
.calibre-viewer .mono { font-variant-numeric: tabular-nums; font-size: 12px; }
@media (max-width: 860px) {
	.calibre-viewer .v-body { grid-template-columns: 40px 1fr 40px; grid-template-rows: 1fr auto; overflow-y: auto; }
	.calibre-viewer .v-stage img, .calibre-viewer .v-stage video { max-height: 55vh; }
	.calibre-viewer .v-info { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .calibre-photos .ph-folders { grid-template-columns: 1fr 1fr; gap: 8px; } .calibre-photos .ph-folder .meta { padding: 8px; } }

/* Help (page/help): guides by section, What's new, and one guide with screenshots */
.calibre-help { max-width: 980px; margin: 0 auto; padding: 12px 20px 80px; color: var(--text-color, #171717); }
.calibre-help .muted { color: var(--text-muted, #6b6b6b); }
.calibre-help .h-head input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-color, #e2e2e2); border-radius: 12px; background: var(--control-bg, #fff); color: inherit; font: inherit; }
.calibre-help .h-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
.calibre-help .h-sec { margin-bottom: 18px; }
.calibre-help .h-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6b6b); margin: 0 0 8px; }
.calibre-help .h-item { display: grid; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--border-color, #e2e2e2); background: var(--card-bg, #fff); color: inherit; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font: inherit; cursor: pointer; }
.calibre-help .h-item:hover { border-color: var(--primary, #15457a); }
.calibre-help .h-item b { font-size: 14px; } .calibre-help .h-item span { font-size: 13px; color: var(--text-muted, #6b6b6b); }
.calibre-help .h-news { border: 1px solid var(--border-color, #e2e2e2); background: var(--card-bg, #fff); border-radius: 14px; padding: 14px 16px; position: sticky; top: 70px; }
.calibre-help .h-news h2 { font-size: 15px; margin: 0 0 10px; }
.calibre-help .h-news ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.calibre-help .h-news li { font-size: 13px; line-height: 1.45; } .calibre-help .h-news li p { margin: 0; display: inline; }
.calibre-help .h-day { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted, #6b6b6b); }
.calibre-help .h-crumbs { font-size: 13px; color: var(--text-muted, #6b6b6b); margin-bottom: 8px; }
.calibre-help .link { border: 0; background: none; padding: 0; color: var(--primary, #15457a); font: inherit; cursor: pointer; }
.calibre-help .h-article { background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e2e2e2); border-radius: 16px; padding: 20px 24px 28px; }
.calibre-help .h-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calibre-help .h-title h1 { font-size: 24px; margin: 0; }
.calibre-help .h-summary { font-size: 15px; color: var(--text-muted, #6b6b6b); margin: 6px 0 14px; }
.calibre-help .h-body { font-size: 15px; line-height: 1.6; max-width: 72ch; }
.calibre-help .h-body h2 { font-size: 18px; margin: 26px 0 8px; } .calibre-help .h-body h3 { font-size: 15px; margin: 18px 0 6px; }
.calibre-help .h-body ol, .calibre-help .h-body ul { padding-left: 22px; } .calibre-help .h-body li { margin: 4px 0; }
.calibre-help .h-body img { display: block; max-width: 100%; border: 1px solid var(--border-color, #e2e2e2); border-radius: 10px; margin: 10px 0 4px; cursor: zoom-in; }
.calibre-help .h-body img + em, .calibre-help .h-body p > em:only-child { display: block; font-size: 12px; color: var(--text-muted, #6b6b6b); }
.calibre-help .h-body blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--primary, #15457a); background: var(--subtle-fg, #f7f7f7); border-radius: 0 10px 10px 0; }
.calibre-help .h-body blockquote p { margin: 0; }
.calibre-help .h-body code { font-family: inherit; font-size: inherit; font-weight: 600; background: none; padding: 0; }
.calibre-help .h-body table { border-collapse: collapse; font-size: 14px; margin: 10px 0; } .calibre-help .h-body th, .calibre-help .h-body td { border: 1px solid var(--border-color, #e2e2e2); padding: 6px 10px; text-align: left; }
@media (max-width: 767px) { .calibre-help { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 860px) { .calibre-help .h-layout { grid-template-columns: 1fr; } .calibre-help .h-news { position: static; order: -1; } .calibre-help .h-article { padding: 16px; } }
.calibre-help-btn { margin-right: 6px; }

/* Media uses the width like a drive; the check screen and Receive stay a readable column */
.calibre-assess.calibre-photos { max-width: 1120px; }

/* Import data (26 Oct 2026) */
.calibre-import { max-width: 980px; margin: 0 auto; padding: 12px 20px 80px; }
.calibre-import .lead { font-size: 15px; margin-bottom: 12px; }
.calibre-import .steps { display: grid; gap: 12px; padding-left: 20px; margin-bottom: 20px; }
.calibre-import .steps .file { margin-left: 8px; font-weight: 600; }
.calibre-import .muted { color: var(--text-muted); margin-left: 8px; }
.calibre-import .alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; }
.calibre-import .alert.bad { background: var(--bg-red, #fdecec); }
.calibre-import .alert.ok { background: var(--bg-green, #e8f5ec); }
.calibre-import .problems td:nth-child(2) { text-align: right; width: 60px; }
@media (max-width: 767px) { .calibre-import { padding-left: 12px; padding-right: 12px; } }

/* What a field or section is for: an ⓘ beside the label, the text on hover or tap (calibre_hints.js) */
.calibre-hint-moved { display: none !important; }
.calibre-hint {
	display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px;
	border: 1px solid var(--gray-400, #c0c6cc); border-radius: 50%; color: var(--text-muted, #6b7280);
	font: italic 600 9px/1 Georgia, serif; vertical-align: 1px; cursor: help; user-select: none;
}
.calibre-hint:hover, .calibre-hint:focus { border-color: var(--calibre-brand); color: var(--calibre-brand); outline: none; }
.section-head .calibre-hint { margin-left: 6px; }
.calibre-hint-pop {
	position: fixed; z-index: 1060; max-width: 300px; padding: 8px 10px; border-radius: 6px;
	background: var(--gray-900, #1f272e); color: #fff; font-size: 12px; line-height: 1.45; font-weight: 400;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18); pointer-events: none; opacity: 0; transition: opacity .12s;
}
.calibre-hint-pop.show { opacity: 1; }
[data-theme="dark"] .calibre-hint-pop { background: var(--gray-100, #f4f5f6); color: var(--gray-900, #1f272e); }
@media (pointer: coarse) { .calibre-hint { width: 18px; height: 18px; font-size: 11px; } }