/*
 * SOLNRUS Process Guides - live coach chrome.
 *
 * EVERY COLOUR HERE IS A THEME TOKEN THAT ALREADY EXISTS.
 * There are seven SOLNRUS themes plus a dark variant of each, and they are
 * generated - so a stylesheet that invents its own token gets `var(--made-up)`
 * with no value, which resolves to nothing and paints a white panel on a dark
 * theme. Every custom property used below is declared by solnrus_theme.css;
 * the fallbacks after each comma are there for the moment before the theme
 * stylesheet has applied, not as a licence to use an undeclared name.
 *
 * NOTHING HERE SETS A `background` SHORTHAND ON A LAYERED SURFACE, and no
 * declaration contains a `;` inside a url() - both are how a SOLNRUS stylesheet
 * has been broken before.
 *
 * SCOPING: every selector starts `.sol-gm`. Two modules once defined the same
 * class and load order silently decided which won, so nothing in this file is
 * a bare element or a shared name.
 */

/* ------------------------------------------------------- the header button */

.solnrus-guide-launch {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--sol-gold-soft, rgba(197, 160, 70, .45));
	background-color: transparent;
	color: var(--sol-text, #1c2430);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease;
}
/* Related to Ask SOLNRUS, distinct from it: Ask is the filled spark, Guide Me
   is the outlined target. Same size, same pill, same gold family - so they read
   as a pair - with the fill reserved for the one that is a conversation. */
.solnrus-guide-launch:hover,
.solnrus-guide-launch.is-open {
	background-color: var(--sol-gold-soft, rgba(197, 160, 70, .16));
	border-color: var(--sol-gold, #c5a046);
}
.solnrus-guide-launch:focus-visible,
.sol-gm-float:focus-visible,
.sol-gm-panel :focus-visible,
.sol-gm-coach :focus-visible {
	outline: var(--sol-focus-ring-width, 2px) solid var(--sol-focus-ring, #3b82f6);
	outline-offset: 2px;
}
.solnrus-guide-launch .solnrus-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* The float, for a phone and for a route with no header. It stands down the
   moment a header launcher is on screen - the shell already maintains that
   body class for Ask SOLNRUS, and reusing it means the two controls can never
   disagree about whether a header exists. */
/*
 * Geometry mirrors `.solnrus-ask-float` exactly - same right edge, same safe
 * area, same shrink to a 48px circle below 992px - and sits one row above it,
 * so the two read as a stack rather than as two unrelated things that happen to
 * be in the corner. `z-index` is one below Ask's 1030 + the drawer's 1055, so it
 * can never cover either.
 */
.sol-gm-float {
	position: fixed;
	right: max(22px, env(safe-area-inset-right, 0px));
	bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 54px);
	z-index: 1029;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid var(--sol-gold-soft, rgba(197, 160, 70, .5));
	background-color: var(--sol-surface-raised, #fff);
	color: var(--sol-text, #1c2430);
	font-size: 13px;
	font-weight: 600;
	box-shadow: var(--sol-shadow-md, 0 6px 20px rgba(10, 20, 35, .16));
	cursor: pointer;
}
body.solnrus-ask-header-live .sol-gm-float { display: none; }
/* Never above the open navigation drawer or its scrim - the same rule the shell
   applies to its own float, for the same reason. */
body.solnrus-nav-open .sol-gm-float {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
@media print {
	.sol-gm-float,
	.sol-gm-layer,
	.sol-gm-panel,
	.sol-gm-backdrop,
	.sol-gm-toast { display: none !important; }
}
.sol-gm-float .solnrus-icon { width: 17px; height: 17px; }

/* ------------------------------------------------------------- the drawer */

.sol-gm-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1055;
	background-color: var(--sol-overlay-backdrop, rgba(12, 20, 32, .42));
}
.sol-gm-backdrop[hidden] { display: none; }

.sol-gm-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1056;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background-color: var(--sol-surface, #fff);
	border-left: 1px solid var(--sol-border, #e3e7ee);
	box-shadow: var(--sol-shadow-lg, -12px 0 40px rgba(10, 20, 35, .18));
	color: var(--sol-text, #1c2430);
	/* The drawer scrolls itself and never the page behind it, which is what
	   keeps a long catalog from producing a horizontal scrollbar at 200% text. */
	overflow: hidden;
}
.sol-gm-panel[hidden] { display: none; }

.sol-gm-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 12px;
	border-bottom: 1px solid var(--sol-border-subtle, #eef1f5);
}
.sol-gm-head h2 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; }
.sol-gm-eyebrow {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .12em;
	font-weight: 700;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 0;
	background-color: transparent;
	color: var(--sol-text-muted, #6b7685);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}
.sol-gm-x:hover { background-color: var(--sol-surface-subtle, #f4f6f9); }

.sol-gm-search { padding: 12px 18px 6px; }
.sol-gm-search input {
	width: 100%;
	padding: 9px 12px;
	border-radius: var(--sol-radius-md, 10px);
	border: 1px solid var(--sol-input-border, #d8dee7);
	background-color: var(--sol-input-bg, #fff);
	color: var(--sol-input-text, #1c2430);
	font-size: 13.5px;
}
.sol-gm-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 18px 18px;
	-webkit-overflow-scrolling: touch;
}
.sol-gm-section {
	margin: 14px 0 8px;
	font-size: 10.5px;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-empty { margin: 24px 0; color: var(--sol-text-muted, #6b7685); font-size: 13.5px; }

.sol-gm-card {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 9px;
	padding: 12px 13px;
	border-radius: var(--sol-radius-md, 12px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-raised, #fff);
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.sol-gm-card:hover {
	border-color: var(--sol-gold, #c5a046);
	background-color: var(--sol-surface-subtle, #f8fafc);
}
.sol-gm-card b { display: block; font-size: 14px; line-height: 1.35; margin: 7px 0 3px; }
.sol-gm-card small {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-card-top { display: flex; flex-wrap: wrap; gap: 5px; }
.sol-gm-card-foot {
	display: block;
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	background-color: var(--sol-gold-soft, rgba(197, 160, 70, .18));
	color: var(--sol-gold-ink, #6a5320);
}
.sol-gm-badge.is-quiet {
	background-color: var(--sol-surface-subtle, #f1f4f8);
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-badge.is-ok {
	background-color: var(--sol-success-bg, #e7f6ec);
	color: var(--sol-success-text, #1d6b38);
}
.sol-gm-badge.is-warn {
	background-color: var(--sol-warning-bg, #fdf3e2);
	color: var(--sol-warning-text, #8a5a13);
}
.sol-gm-foot-note {
	padding: 10px 18px;
	border-top: 1px solid var(--sol-border-subtle, #eef1f5);
	font-size: 11.5px;
	color: var(--sol-text-muted, #6b7685);
}

/* ---------------------------------------------------------- the mode dialog */

.sol-gm-mode-lead { margin: 0 0 12px; color: var(--sol-text-muted, #6b7685); font-size: 13.5px; }
.sol-gm-mode {
	padding: 11px 13px;
	margin-bottom: 9px;
	border-radius: var(--sol-radius-md, 10px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-subtle, #f8fafc);
}
.sol-gm-mode b { display: block; font-size: 13.5px; }
.sol-gm-mode small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-mode em {
	display: inline-block;
	margin-top: 6px;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--sol-gold-ink, #6a5320);
}

/* ------------------------------------------------------------ the spotlight */

.sol-gm-layer {
	position: fixed;
	inset: 0;
	z-index: 1060;
	/* The LAYER ignores the pointer so the four panes decide for themselves.
	   The hole between them has no element at all, which is what lets the
	   person click the product's own control. */
	pointer-events: none;
}
.sol-gm-pane {
	position: fixed;
	background-color: var(--sol-overlay-backdrop, rgba(12, 20, 32, .44));
	/* The dimmed area DOES take the pointer: clicking away from the highlighted
	   control should do nothing rather than quietly operate the page behind the
	   dimming, which would be a click the person could not see the target of. */
	pointer-events: auto;
}
/* ...EXCEPT WHILE A DIALOG IS OPEN (LEARNGEN-1G). A step's control often opens a
   dialog - a confirmation, the Regenerate window, a menu, a form - and the panes,
   above the dialog, took every click meant for it: "Publish revision" could be
   pressed and its "Yes" could not. With a dialog open there is no page behind the
   dimming left to operate by accident - the dialog's own backdrop covers it - so
   the dialog gets the pointer back. Bootstrap marks the body `modal-open`; it also
   drops that class when one dialog closes as the next opens (a menu that opens the
   Regenerate window), so the open dialog itself is asked too - in a rule of its
   own, so a browser without :has() still keeps the first. */
body.modal-open .sol-gm-pane { pointer-events: none; }
body:has(.modal.show) .sol-gm-pane { pointer-events: none; }
.sol-gm-ring {
	position: fixed;
	border-radius: 10px;
	border: 2px solid var(--sol-gold, #c5a046);
	box-shadow: 0 0 0 3px var(--sol-gold-soft, rgba(197, 160, 70, .35));
	pointer-events: none;
}
.sol-gm-layer.is-untargeted .sol-gm-ring { display: none; }

.sol-gm-coach {
	position: fixed;
	z-index: 1061;
	width: min(340px, calc(100vw - 24px));
	padding: 14px 15px 12px;
	border-radius: var(--sol-radius-lg, 14px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-raised, #fff);
	color: var(--sol-text, #1c2430);
	box-shadow: var(--sol-shadow-lg, 0 18px 44px rgba(10, 20, 35, .24));
	pointer-events: auto;
}
.sol-gm-coach:focus { outline: none; }
.sol-gm-coach-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.sol-gm-count {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-title { margin: 6px 0 4px; font-size: 15.5px; line-height: 1.3; }
.sol-gm-text { margin: 0; font-size: 13.5px; line-height: 1.5; }
.sol-gm-note,
.sol-gm-material {
	margin: 8px 0 0;
	padding: 7px 9px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.45;
}
.sol-gm-note {
	background-color: var(--sol-info-bg, #eaf2fd);
	color: var(--sol-info-text, #1c4b7d);
}
.sol-gm-material {
	background-color: var(--sol-warning-bg, #fdf3e2);
	color: var(--sol-warning-text, #8a5a13);
	font-weight: 600;
}
.sol-gm-note[hidden], .sol-gm-material[hidden] { display: none; }

.sol-gm-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.sol-gm-back, .sol-gm-next {
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-action-secondary-bg, #f2f5f9);
	color: var(--sol-action-secondary-text, #2a3442);
	max-width: 100%;
}
.sol-gm-next {
	border-color: var(--sol-action-primary-border, #c5a046);
	background-color: var(--sol-action-primary-bg, #c5a046);
	color: var(--sol-action-primary-text, #23180a);
}
.sol-gm-back:disabled { opacity: .45; cursor: default; }
/* The waiting state is not a disabled button wearing a label: it says what it
   is waiting for, and it is visibly not a button you can press, because
   pressing it is not what completes the step. */
.sol-gm-next.is-waiting {
	border-color: var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-subtle, #f4f6f9);
	color: var(--sol-text-muted, #6b7685);
	cursor: default;
	font-weight: 500;
	white-space: normal;
	text-align: left;
	line-height: 1.35;
}
.sol-gm-dots { display: inline-flex; gap: 4px; }
.sol-gm-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--sol-border-strong, #c7cedb);
}
.sol-gm-dots i.is-on { background-color: var(--sol-gold, #c5a046); }
.sol-gm-dots i.is-done { background-color: var(--sol-gold-soft, rgba(197, 160, 70, .55)); }

.sol-gm-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1062;
	padding: 6px 14px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	background-color: var(--sol-info, #2f6fb0);
	color: var(--sol-text-inverse, #fff);
	pointer-events: none;
}

/* ---------------------------------------------------------------- the toast */

.sol-gm-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1070;
	max-width: min(340px, calc(100vw - 32px));
	padding: 11px 14px;
	border-radius: var(--sol-radius-md, 12px);
	border: 1px solid var(--sol-success-border, #bfe3cb);
	background-color: var(--sol-success-bg, #e7f6ec);
	color: var(--sol-success-text, #1d6b38);
	box-shadow: var(--sol-shadow-md, 0 8px 24px rgba(10, 20, 35, .18));
}
.sol-gm-toast b { display: block; font-size: 13.5px; }
.sol-gm-toast small { display: block; font-size: 12px; margin-top: 2px; }
.sol-gm-toast.is-out { opacity: 0; transition: opacity .5s ease; }

/* Screen-reader announcement channel. Present in the accessibility tree,
   absent from the layout - not display:none, which would stop it being read. */
.sol-gm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.sol-gm-panel {
		width: 100vw;
		top: auto;
		height: 88vh;
		border-left: 0;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		border-top: 1px solid var(--sol-border, #e3e7ee);
	}
	/* On a phone the coach is a sheet at the foot rather than a card chasing a
	   control around a 390px viewport, where "beside the target" has nowhere to
	   go and every position clips. The spotlight still marks the control. */
	.sol-gm-coach {
		top: auto !important;
		left: 8px !important;
		right: 8px;
		bottom: 8px;
		width: auto;
	}
	/* Below 768px the float is a circle, like Ask's, and stacks above it. */
	.sol-gm-float {
		bottom: calc(18px + env(safe-area-inset-bottom, 0px) + 56px);
		right: calc(14px + env(safe-area-inset-right, 0px));
		width: 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
	}
	.sol-gm-float span { display: none; }
	.sol-gm-float .solnrus-icon { width: 21px; height: 21px; }
}

@media (max-width: 380px) {
	.sol-gm-foot { gap: 6px; }
	.sol-gm-back, .sol-gm-next { padding: 7px 10px; font-size: 12px; }
}

/* Reduced motion: the smooth scroll is chosen in JS from the same query, and
   the only transitions left are colour changes, which are removed here rather
   than shortened. */
@media (prefers-reduced-motion: reduce) {
	.solnrus-guide-launch,
	.sol-gm-card,
	.sol-gm-toast { transition: none; }
}

/* Windows high contrast: the dimming disappears entirely in forced colours, so
   the ring has to carry the whole message on its own. */
@media (forced-colors: active) {
	.sol-gm-ring { border: 3px solid Highlight; box-shadow: none; }
	.sol-gm-pane { background-color: transparent; }
	.sol-gm-coach { border: 1px solid CanvasText; }
}

/* --------------------------------------------- the Ask SOLNRUS guide offer */
/*
 * Lives here rather than in the Ask page's own inline <style> so the offer is
 * themed by the same tokens as the rest of the coach, and so the Ask page's
 * stylesheet does not have to know the guide system exists.
 */
.sol-gm-offer {
	margin-top: 16px;
	padding: 15px 18px;
	border-radius: 14px;
	border: 1px solid var(--sol-gold-soft, rgba(197, 160, 70, .5));
	background-color: var(--sol-surface, #fff);
}
.sol-gm-offer[hidden] { display: none; }
.sol-gm-offer-lead {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sol-text, #1c2430);
}
.sol-gm-offer-list { display: grid; gap: 9px; }
.sol-gm-offer-list button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 13px;
	border-radius: var(--sol-radius-md, 12px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-raised, #fff);
	color: inherit;
	cursor: pointer;
}
.sol-gm-offer-list button:hover { border-color: var(--sol-gold, #c5a046); }
.sol-gm-offer-list b { display: block; font-size: 13.5px; }
.sol-gm-offer-list small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-offer-list em {
	display: block;
	margin-top: 5px;
	font-style: normal;
	font-size: 11.5px;
	color: var(--sol-text-muted, #6b7685);
}

/* ---------------------------------- the portal's own two-choice dialog */
/*
 * Used where frappe.ui.Dialog is not loaded - the TimeClock portal. Eleven
 * lines of chrome, because all it has to be is two buttons over a backdrop.
 */
.sol-gm-modal {
	position: fixed;
	inset: 0;
	z-index: 1065;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background-color: var(--sol-overlay-backdrop, rgba(12, 20, 32, .5));
}
.sol-gm-modal-box {
	width: min(420px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	padding: 18px 20px;
	border-radius: var(--sol-radius-lg, 16px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-raised, #fff);
	color: var(--sol-text, #1c2430);
	box-shadow: var(--sol-shadow-lg, 0 20px 50px rgba(10, 20, 35, .3));
}
.sol-gm-modal-box h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.sol-gm-modal-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 6px;
}

/* --------------------------------------------- TimeClock surface tweaks */
/*
 * THE PORTAL DOES NOT LOAD THE THEME ENGINE.
 *
 * It is a standalone kiosk page with its own palette (`--tc-*`, declared in its
 * own <style>), served to a client administrator who has no SOLNRUS session and
 * therefore no theme. Every `var(--sol-...)` above would fall through to its
 * light fallback on a navy kiosk - the exact failure a SOLNRUS stylesheet has
 * had before, where two undeclared tokens painted white panels under a dark
 * theme.
 *
 * So the tokens are DECLARED here for that surface, mapped onto the palette the
 * portal already has. Nothing above is duplicated or overridden: the shared
 * rules stay one set of rules, and this block is the only thing that differs.
 */
body.timesheet-submission-portal {
	--sol-text: #17222d;
	--sol-text-muted: #68737d;
	--sol-text-inverse: #fffdf8;
	--sol-surface: #fffdf8;
	--sol-surface-raised: #ffffff;
	--sol-surface-subtle: #f5f1e8;
	--sol-border: #ded4c0;
	--sol-border-subtle: #ece5d6;
	--sol-border-strong: #cfc7b8;
	--sol-gold: #c5a059;
	--sol-gold-soft: rgba(197, 160, 89, .28);
	--sol-gold-ink: #7c5c18;
	--sol-overlay-backdrop: rgba(3, 9, 14, .62);
	--sol-radius-sm: 8px;
	--sol-radius-md: 10px;
	--sol-radius-lg: 16px;
	--sol-shadow-md: 0 14px 38px rgba(0, 0, 0, .3);
	--sol-shadow-lg: 0 24px 72px rgba(0, 0, 0, .38);
	--sol-focus-ring: #efd076;
	--sol-focus-ring-width: 2px;
	--sol-info: #123148;
	--sol-info-bg: #e8f0f6;
	--sol-info-text: #123148;
	--sol-warning-bg: #fdf3e2;
	--sol-warning-text: #8a5a13;
	--sol-success-bg: #eaf8f2;
	--sol-success-text: #086447;
	--sol-success-border: #bfe3cb;
	--sol-danger-text: #8b2f37;
	--sol-input-bg: #ffffff;
	--sol-input-border: #cfc7b8;
	--sol-input-text: #17222d;
	--sol-action-primary-bg: #06131e;
	--sol-action-primary-border: #c5a059;
	--sol-action-primary-text: #fffdf8;
	--sol-action-secondary-bg: #ffffff;
	--sol-action-secondary-text: #06131e;
	--sol-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/*
 * The portal's header sits on navy, so the button in it is the one thing that
 * cannot take the card palette above - it takes the portal's own
 * `.tc-admin-link` treatment instead, which is what every other control in that
 * bar already looks like.
 */
body.timesheet-submission-portal .solnrus-guide-launch {
	padding: 11px 15px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 9px;
	border: 1px solid rgba(197, 160, 89, .4);
	background-color: rgba(255, 255, 255, .06);
	color: #f0dcb0;
}
body.timesheet-submission-portal .solnrus-guide-launch:hover,
body.timesheet-submission-portal .solnrus-guide-launch.is-open {
	background-color: rgba(255, 255, 255, .13);
	border-color: #efd076;
}
body.timesheet-submission-portal .sol-gm-panel {
	width: min(440px, 100vw);
}
body.timesheet-submission-portal .sol-gm-float { display: none; }

/* The portal's Ask drawer reuses .sol-gm-panel; these are the three parts it
   has that the guide drawer does not. */
.sol-gm-ask-lead {
	margin: 4px 0 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sol-text-muted, #6b7685);
}
.sol-gm-ask-suggest { display: grid; gap: 8px; margin-bottom: 14px; }
.sol-gm-ask-suggest button {
	text-align: left;
	padding: 10px 12px;
	border-radius: var(--sol-radius-md, 10px);
	border: 1px solid var(--sol-border, #e3e7ee);
	background-color: var(--sol-surface-subtle, #f6f8fb);
	color: inherit;
	font-size: 13px;
	cursor: pointer;
}
.sol-gm-ask-suggest button:hover { border-color: var(--sol-gold, #c5a046); }
.sol-gm-ask-compose {
	display: flex;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid var(--sol-border-subtle, #eef1f5);
}
.sol-gm-ask-compose input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border-radius: var(--sol-radius-md, 10px);
	border: 1px solid var(--sol-input-border, #d8dee7);
	background-color: var(--sol-input-bg, #fff);
	color: var(--sol-input-text, #1c2430);
	font-size: 13.5px;
}
.sol-gm-ask-compose .sol-gm-next { flex: 0 0 auto; }
/* Inside the portal's Ask drawer the offer band is already in a panel, so it
   loses the second border rather than drawing a box inside a box. */
.sol-gm-panel .sol-gm-offer {
	margin-top: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}