/**
 * Weather self-contained cards — chrome + modal styles.
 *
 * Ported verbatim from the Daily Lawn Weather Briefing reference page so a
 * `[tmb_weather … card="true"]` shortcode renders an exactly-styled card on any
 * Nexus Client site. Only enqueued when a card-mode shortcode is present.
 *
 * NOTE: the reference page's global base resets (`*`, `body`, `h1–h4`, `p`,
 * `a`, typography) are DELIBERATELY omitted here — injecting them into a live
 * client theme would clobber its typography. `box-sizing` is the only base
 * behavior the cards depend on, and it is scoped to card/modal descendants
 * below. Every text element inside the card/modal sets its own margins, so the
 * cards are self-contained without the page's global `p {}` / heading resets.
 */

/* ── Design tokens (needed — every rule below references these) ── */
:root {
	--tw-navy:        #1A2954;
	--tw-navy-deep:   #0F1A3C;
	--tw-green:       #599634;
	--tw-green-soft:  #ECFDF5;
	--tw-amber:       #F59E0B;
	--tw-amber-soft:  #FEF3C7;
	--tw-red:         #DC2626;
	--tw-red-soft:    #FEE2E2;
	--tw-sky-1:       #DBEAFE;
	--tw-sky-2:       #93C5FD;
	--tw-purple:      #7C3AED;
	--tw-purple-soft: #EDE9FE;
	--tw-teal:        #0D9488;
	--tw-teal-soft:   #CCFBF1;
	--tw-ink:         #1F2937;
	--tw-ink-soft:    #4B5563;
	--tw-ink-mute:    #6B7280;
	--tw-line:        #E5E7EB;
	--tw-line-soft:   #F3F4F6;
	--tw-bg:          #F6F8FA;
	--tw-white:       #FFFFFF;
	--tw-shadow-sm:   0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
	--tw-shadow-md:   0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
	--tw-shadow-lg:   0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);
	--tw-radius-sm:   6px;
	--tw-radius:      10px;
	--tw-radius-lg:   16px;
	--tw-radius-xl:   24px;
}

/* Scoped box-sizing — the only base reset the cards rely on. */
.tw-widget, .tw-widget *, .tw-widget *::before, .tw-widget *::after,
.tw-modal, .tw-modal *, .tw-modal *::before, .tw-modal *::after {
	box-sizing: border-box;
}

/* Kill theme-injected underlines. Default host themes underline body links
   (often via `.entry-content a` / `a:hover`), which leaks into the weather
   widgets, cards and modal. Nothing in these components should be underlined,
   so strip text-decoration on the roots + every descendant in all link states.
   Scoped to the weather containers and marked !important so it wins over the
   host theme regardless of stylesheet load order or pseudo-class specificity.
   `.tw-card-data` is included as a standalone target because the shortcode can
   render it outside a `.tw-widget` wrapper. */
.tw-widget, .tw-widget *,
.tw-modal, .tw-modal *,
.tw-card-data, .tw-card-data * {
	text-decoration: none !important;
}

.no-border-no-padding {
	border: 0 !important;
	padding: 0 !important;
}

/* ── .tw-card-data shortcode-host overrides ── */
.tw-widget--heat .tw-card-data,
.tw-widget--rain .tw-card-data,
.tw-widget--cold .tw-card-data,
.tw-widget--severe .tw-card-data,
.tw-widget--forecast .tw-card-data,
/* Service Planning cards (7-9, 12-13) that show an outlook widget
   get the same chrome-strip as the Weather Conditions row so the
   inner hero card sits flush with the surrounding white card. */
.tw-widget--service.tw-widget--outlook .tw-card-data,
/* Historical & Trends cards (14-20) reuse the outlook chrome. */
.tw-widget--history.tw-widget--outlook .tw-card-data {
	border: none !important;
	padding: 0px !important;
	margin-top: 20px;
}

.tw-card-data {
	border-color: var(--tw-navy) !important;
}

.tmb-weather--full .tmb-weather__forecast {
	gap: 4px !important;
}
/* Force the [tmb_weather] outer wrappers to behave inside our cards. */
.tw-card-data .tmb-weather {
	display: block !important;
	width: 100% !important;
}
.tw-card-data .tmb-weather__strip {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: 8px;
	width: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   WIDGET GRID — optional section wrappers (inert unless the author
   also uses these classes around a group of cards).
   ────────────────────────────────────────────────────────────── */
.tw-widgets {
	padding: 3rem 0 4rem;
	background: var(--tw-bg);
}
.tw-widgets__subhead {
	display: flex; align-items: center; gap: .75rem;
	margin: 3rem 0 1.25rem;
	font-size: 1.25rem;
	color: var(--tw-navy);
	font-weight: 700;
	margin-top: 30px;
	padding-top: 0px;
}
.tw-widgets__subhead::before {
	content: ""; display: block;
	width: 6px; height: 28px; border-radius: 3px;
	background: var(--tw-green);
}
.tw-widgets__subhead--alerts::before { background: var(--tw-red); }
.tw-widgets__subhead--service::before { background: var(--tw-amber); }
.tw-widgets__subhead--history::before { background: var(--tw-teal); }
.tw-widgets__subhead--health::before { background: var(--tw-purple); }
.tw-widgets__subhead-meta { margin-left: auto; font-size: .85rem; font-weight: 500; color: var(--tw-ink-mute); }

.tw-widgets__grid {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tw-widget {
	position: relative;
	display: flex; flex-direction: column; gap: .65rem;
	/* Standalone breathing room — a shortcode-dropped card always keeps at
	   least 20px of clear air above and below itself (zeroed inside the
	   briefing grid below, where the grid gap owns the spacing). */
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 1.25rem;
	background: var(--tw-white);
	border: 1px solid var(--tw-navy);
	border-radius: var(--tw-radius);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tw-widgets__grid .tw-widget { margin-top: 0; margin-bottom: 0; }
.tw-widget:hover { transform: translateY(-2px); border-color: var(--tw-sky-2); box-shadow: var(--tw-shadow-md); }
.tw-widget__head {
	display: flex; align-items: center; gap: .65rem;
}
.tw-widget__icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	font-size: 1.25rem;
}
.tw-widget--heat   .tw-widget__icon { background: var(--tw-amber-soft); color: var(--tw-amber); }
.tw-widget--rain   .tw-widget__icon { background: var(--tw-sky-1);     color: var(--tw-navy); }
.tw-widget--cold   .tw-widget__icon { background: #E0F2FE;             color: #0284C7; }
.tw-widget--severe .tw-widget__icon { background: var(--tw-red-soft);  color: var(--tw-red); }
.tw-widget--forecast .tw-widget__icon { background: var(--tw-teal-soft); color: var(--tw-teal); }
.tw-widget--lawn   .tw-widget__icon { background: var(--tw-green-soft); color: var(--tw-green); }
.tw-widget--service .tw-widget__icon { background: #FFF7ED; color: #C2410C; }
.tw-widget--history .tw-widget__icon { background: #F1F5F9; color: #0F172A; }
.tw-widget--health .tw-widget__icon { background: var(--tw-purple-soft); color: var(--tw-purple); }

.tw-widget__title { font-size: 1rem; font-weight: 700; color: var(--tw-navy); margin: 0; }
.tw-widget__desc { font-size: .85rem; color: var(--tw-ink-soft); margin: 0; }

/* Location bar — centered city/state line between the description and the
   data slot. With multiple ZIPs the label becomes a pill <select> switcher
   (data-tw-loc-switch); weather-cards.js suppresses the card anchor's
   navigation for clicks inside the bar. */
.tw-widget__loc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	text-align: center;
}
.tw-widget__loc-pin { font-size: 1.4rem; line-height: 1; }
.tw-widget__loc-label {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--tw-ink);
}
/* Scoped as `.tw-widget select.…` with explicit geometry resets (a few
   !important) so page-builder themes that style every <select> globally —
   Salient's 100%-width form selects broke the pill on fairwaygreen.com —
   can't distort the switcher. */
.tw-widget select.tw-widget__loc-select,
.tw-widget__loc-select {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--tw-ink);
	background-color: var(--tw-white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234B5563'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: .85rem;
	border: 1px solid var(--tw-line);
	border-radius: 999px;
	padding: .2rem 1.6rem .2rem .8rem;
	cursor: pointer;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	display: inline-block;
	line-height: 1.3;
	box-shadow: none;
	vertical-align: middle;
}
.tw-widget__loc-select:focus {
	outline: 2px solid var(--tw-line);
	outline-offset: 1px;
}
/* Data-slot refresh in flight (location switch) — dim until the swap lands. */
.tw-widget.is-tw-loc-loading .tw-card-data {
	opacity: .45;
	transition: opacity .15s ease;
	pointer-events: none;
}

/* N-day forecast table inside a card (format="forecast" card="true") —
   fill the card width so the table reads as the card's data slot
   (replaces the hand-rolled .forecast-wrap customizer CSS on MRW). */
.tw-widget .tmb-weather--format-forecast,
.tw-widget .tmb-weather--format-forecast .tmb-weather__forecast {
	width: 100%;
}

/* Widget footer — reusable pattern for cards that have an info
   icon. `margin-top: auto` pins the footer to the bottom of the
   flex card; the info button sits flush left, the existing CTA
   text/link slides to the right via `justify-content: space-between`. */
.tw-widget__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .65rem;
	margin-top: auto;
	padding-top: .65rem;
}
/* Inside the footer, the existing .tw-widget__cta no longer needs
   its own `margin-top: auto` — the footer owns the bottom-pinning.
   It's harmless in a row flex container, but we strip the
   `padding-top` so the cta doesn't shift relative to the icon. */
.tw-widget__footer .tw-widget__cta {
	padding-top: 0;
}

/* ── .tw-info-btn reusable info button ── */
.tw-info-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--tw-line);
	background: var(--tw-white);
	color: var(--tw-ink-soft);
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tw-info-btn:hover {
	background: var(--tw-navy);
	color: var(--tw-white);
	border-color: var(--tw-navy);
	transform: scale(1.05);
}
.tw-info-btn:focus-visible {
	outline: 2px solid var(--tw-sky-2);
	outline-offset: 2px;
}
.tw-info-btn svg {
	width: 18px;
	height: 18px;
}

/* ── .tw-modal full modal system ── */
.tw-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.tw-modal[hidden] { display: none; }
.tw-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}
.tw-modal__panel {
	position: relative;
	width: 100%;
	max-width: 820px;
	max-height: calc(100vh - 2rem);
	display: flex;
	flex-direction: column;
	background: var(--tw-white);
	border-radius: var(--tw-radius-lg);
	box-shadow: var(--tw-shadow-lg);
	overflow: hidden;
	animation: tw-modal-rise .22s ease;
}
@keyframes tw-modal-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.tw-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--tw-line);
}
.tw-modal__header h2 {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--tw-navy);
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	line-height: 1.2;
}
.tw-modal__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 1.3rem;
	flex-shrink: 0;
}
.tw-modal__title-icon--heat { background: var(--tw-amber-soft); }
.tw-modal__title-icon--cold { background: #E0F2FE; }
.tw-modal__title-icon--rain { background: var(--tw-sky-1); }
.tw-modal__title-icon--severe { background: var(--tw-red-soft); }
.tw-modal__title-icon--forecast { background: var(--tw-teal-soft); }
.tw-modal__title-icon--service { background: #FFEDD5; }
.tw-modal__title-icon--service-warn { background: var(--tw-red-soft); }
.tw-modal__title-icon--history { background: #F1F5F9; }
.tw-modal__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--tw-ink-mute);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	padding: .25rem .6rem;
	border-radius: var(--tw-radius-sm);
	flex-shrink: 0;
}
.tw-modal__close:hover { color: var(--tw-navy); background: var(--tw-line-soft); }
.tw-modal__close:focus-visible { outline: 2px solid var(--tw-sky-2); outline-offset: 2px; }

.tw-modal__body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}
.tw-modal__lead {
	font-size: 1rem;
	color: var(--tw-ink);
	margin: 0 0 1.5rem;
	line-height: 1.55;
}
.tw-modal__section { margin-top: 1.75rem; }
.tw-modal__section:first-of-type { margin-top: 0; }
.tw-modal__section h3 {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tw-ink-soft);
	margin: 0 0 .85rem;
}

/* Definition list — "What the numbers mean" style. Two-column
   on wide viewports, stacked on narrow. */
.tw-modal__defs {
	display: grid;
	grid-template-columns: minmax(140px, max-content) 1fr;
	column-gap: 1.25rem;
	row-gap: .75rem;
	margin: 0;
}
.tw-modal__defs dt {
	font-weight: 700;
	color: var(--tw-navy);
	font-size: .9rem;
}
.tw-modal__defs dd {
	margin: 0;
	color: var(--tw-ink-soft);
	font-size: .9rem;
	line-height: 1.45;
}

/* "Why it matters" bullet list — keeps the strong/lead concept on
   the first phrase, with the explanation trailing. */
.tw-modal__bullets {
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	color: var(--tw-ink-soft);
	font-size: .9rem;
	line-height: 1.45;
}
.tw-modal__bullets li strong { color: var(--tw-navy); }

/* Themed bullet variants — drop the default disc marker and use an
   emoji that matches the card's category. Reusable: add a new
   `.tw-modal__bullets--<kind> li::before { content: "<escape>" }`
   block for each new card variant (cold/rain/severe/forecast).

   Emoji are written as CSS Unicode ESCAPES, not literal characters:
   themes/hosts that serve stylesheets without a UTF-8 charset parse raw
   emoji bytes as Latin-1 and render mojibake ("🌧" — seen live on
   fairwaygreen.com/Salient). Escapes are charset-immune.
   list-style is !important because page-builder themes re-apply content
   list markers with higher-specificity rules. */
.tw-modal__bullets[class*="tw-modal__bullets--"] {
	list-style: none !important;
	padding-left: 0;
	margin-left: 0;
}
.tw-modal__bullets[class*="tw-modal__bullets--"] li {
	position: relative;
	padding-left: 1.85rem;
	list-style: none !important;
	margin-left: 0;
}
.tw-modal__bullets[class*="tw-modal__bullets--"] li::before {
	position: absolute;
	left: 0;
	top: .05rem;
	font-size: 1rem;
	line-height: 1.4;
}
.tw-modal__bullets--heat li::before { content: "\01F321\FE0F"; }          /* 🌡️ */
.tw-modal__bullets--rain li::before { content: "\01F327\FE0F"; }          /* 🌧️ */
.tw-modal__bullets--cold li::before { content: "\2744\FE0F"; }            /* ❄️ */
.tw-modal__bullets--severe li::before { content: "\26C8\FE0F"; }          /* ⛈️ */
.tw-modal__bullets--forecast li::before { content: "\01F4C5"; }           /* 📅 */
.tw-modal__bullets--best-day li::before { content: "\2B50"; }             /* ⭐ */
.tw-modal__bullets--worst-day li::before { content: "\26A0\FE0F"; }       /* ⚠️ */
.tw-modal__bullets--weekend li::before { content: "\01F6CB\FE0F"; }       /* 🛋️ */
.tw-modal__bullets--uv li::before { content: "\2600\FE0F"; }              /* ☀️ */
.tw-modal__bullets--spray-wind li::before { content: "\01F32C\FE0F"; }    /* 🌬️ */
.tw-modal__bullets--hourly-window li::before { content: "\23F0"; }        /* ⏰ */
.tw-modal__bullets--daylight li::before { content: "\01F305"; }           /* 🌅 */
.tw-modal__bullets--yesterday li::before { content: "\23EA"; }            /* ⏪ */
.tw-modal__bullets--rain-history li::before { content: "\01F327\FE0F"; }  /* 🌧️ */
.tw-modal__bullets--vs-normal li::before { content: "\01F4CA"; }          /* 📊 */
.tw-modal__bullets--temp-trend li::before { content: "\01F4C8"; }         /* 📈 */
.tw-modal__bullets--streak li::before { content: "\01F3C3"; }             /* 🏃 */
.tw-modal__bullets--notable li::before { content: "\01F4CC"; }            /* 📌 */

/* 3-tier action grid — matches the severity ladder the renderer
   already uses (0 / 1-2 / 3+ days breach). */
.tw-modal__tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}
.tw-modal__tier {
	padding: .95rem;
	background: var(--tw-line-soft);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
}
.tw-modal__tier-badge {
	display: inline-block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .2rem .6rem;
	border-radius: 999px;
	margin-bottom: .55rem;
}
.tw-modal__tier--calm .tw-modal__tier-badge { background: #DBEAFE; color: #1E3A8A; }
.tw-modal__tier--watch .tw-modal__tier-badge { background: var(--tw-amber-soft); color: #92400e; }
.tw-modal__tier--alert .tw-modal__tier-badge { background: var(--tw-red-soft); color: #991B1B; }
.tw-modal__tier p {
	margin: 0;
	font-size: .85rem;
	color: var(--tw-ink-soft);
	line-height: 1.4;
}
/* City/state line rendered with the modal title (updated live by the
   card's location switcher via [data-tw-modal-loc]). */
.tw-modal__title-loc {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--tw-ink-soft);
	margin-top: .15rem;
}

/* Fine-print line under a tier grid (e.g. "percentages are of the X″
   target") — mirrors the tier body type at a quieter weight. */
.tw-modal__note {
	margin: .65rem 0 0;
	font-size: .8rem;
	color: var(--tw-ink-soft);
	line-height: 1.4;
}

/* Modal footer — sibling of `.tw-modal__body` inside the panel
   (NOT a child of the body). `flex-shrink: 0` so it never collapses
   when the body content exceeds the viewport; the body owns the
   scroll, the footer stays pinned. */
.tw-modal__footer {
	flex-shrink: 0;
	padding: 1.1rem 1.5rem;
	border-top: 1px solid var(--tw-line);
	background: var(--tw-white);
	display: flex;
	justify-content: flex-end;
	box-shadow: 0 -4px 12px rgba(15, 23, 42, .04);
}
.tw-modal__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.4rem;
	background: var(--tw-green);
	color: var(--tw-white) !important;
	text-decoration: none;
	font-weight: 700;
	border-radius: 999px;
	transition: background .15s ease;
}
.tw-modal__cta:hover { background: #4a8129; }

@media (max-width: 640px) {
	.tw-modal__defs { grid-template-columns: 1fr; row-gap: .25rem; }
	.tw-modal__defs dt { margin-top: .75rem; }
	.tw-modal__defs dt:first-of-type { margin-top: 0; }
	.tw-modal__tiers { grid-template-columns: 1fr; }
}

/* ── .tw-card-data box + .tw-widget__cta (later cascade wins box chrome) ── */
.tw-card-data {
	padding: .65rem .8rem;
	background: none !important;
	border: 1px solid var(--tw-navy);
	border-radius: var(--tw-radius-sm);
	font-size: .9rem;
	color: var(--tw-ink);
	min-height: 56px;
}
.tw-widget__cta {
	display: inline-flex; align-items: center; gap: .35rem;
	margin-top: auto;
	font-size: .8rem; font-weight: 700; text-decoration: none;
	color: var(--tw-green);
	padding-top: .35rem;
}
.tw-widget__cta:hover { color: #4a8129; }
.tw-widget__cta::after { content: "→"; transition: transform .15s ease; }
.tw-widget__cta:hover::after { transform: translateX(3px); }

/* ── Responsive: widget grid columns ── */
@media (max-width: 960px) {
	.tw-widgets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.tw-widgets__grid { grid-template-columns: 1fr; }
}

/* ── Form-gated subscribe CTAs ──
   Subscribe CTAs ship hidden; weather-cards.js adds `tw-cards-has-form` to
   <body> only when a registration <form> exists on the page (any form
   plugin). Click then smooth-scrolls to the form instead of navigating.
   No form → the CTAs (and the modal footer bar that would hold one) never
   appear. */
.tw-widget__cta[data-tw-subscribe],
.tw-modal__cta[data-tw-subscribe] {
	display: none;
}
body.tw-cards-has-form .tw-widget__cta[data-tw-subscribe],
body.tw-cards-has-form .tw-modal__cta[data-tw-subscribe] {
	display: inline-flex;
}
body:not(.tw-cards-has-form) .tw-modal__footer:has(> .tw-modal__cta[data-tw-subscribe]) {
	display: none;
}

/* Gated CTA is now an interactive control in its own right — cursor +
   focus ring to match the info button. */
.tw-widget__cta[data-tw-subscribe] { cursor: pointer; }
.tw-widget__cta[data-tw-subscribe]:focus-visible {
	outline: 2px solid var(--tw-sky-2);
	outline-offset: 2px;
	border-radius: var(--tw-radius-sm);
}