/* Stockpile theme: the screens' own content (headings, notices, cards, tables,
   badges, forms, buttons, the Appearance widgets). Colors and sizes come from
   tokens.css. The app shell (sidebar, top bar, main area) is in shell.css.
   Loaded by the app shell and the login screen. */

/* =========================================================================
   0. Base. The app shell loads none of WordPress's admin stylesheets, so the
   element defaults the screens were built on (from WordPress's common, forms,
   buttons and list-table styles) are restated here, scoped to the app.
   ========================================================================= */
body.sp-app { margin: 0; line-height: 1.4em; }
:where(body.sp-app) :is(h1, h2, h3, h4, h5, h6) { display: block; font-weight: 600; }
:where(body.sp-app) h1 { font-size: 2em; margin: 0.67em 0; }
:where(body.sp-app) :is(h2, h3) { font-size: 1.3em; margin: 1em 0; }
:where(body.sp-app) h4 { font-size: 1em; margin: 1.33em 0; }
:where(body.sp-app) p { font-size: 13px; line-height: 1.5; margin: 1em 0; }
:where(body.sp-app) :is(ul, ol) { padding: 0; }
:where(body.sp-app) ul { list-style: none; }
:where(body.sp-app) ol { list-style-type: decimal; margin-left: 2em; }
:where(body.sp-app) :is(li, dd) { margin-bottom: 6px; }
:where(body.sp-app) :is(b, strong) { font-weight: 600; }
:where(body.sp-app) img { border: none; }
:where(body.sp-app) a { transition-property: border, background, color; transition-duration: 0.05s; transition-timing-function: ease-in-out; }
:where(body.sp-app) :is(code, kbd) { padding: 3px 5px 2px; margin: 0 1px; background: rgba(0, 0, 0, 0.07); font-size: 13px; font-family: Consolas, Monaco, monospace; direction: ltr; unicode-bidi: embed; }
:where(body.sp-app) hr { border: 0; border-top: 1px solid var(--sp-border); border-bottom: 0; }
:where(body.sp-app) .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
:where(body.sp-app) .screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: 10px 16px; z-index: 100000; top: 6px; left: 6px; background: var(--sp-surface); color: var(--sp-primary); border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow-lg); }
:where(body.sp-app) .hidden { display: none; }
:where(body.sp-app) .wp-heading-inline { display: inline-block; margin-right: 5px; }
:where(body.sp-app) .wp-header-end { visibility: hidden; margin: -2px 0 0; }
:where(body.sp-app) .description { margin: 2px 0 5px; color: var(--sp-muted); }
:where(body.sp-app) :is(p.description, span.description) { font-size: 13px; font-style: normal; }

/* Form controls. Same selector weight as WordPress's forms.css; .sp-app stands in for .wp-admin. */
:where(body.sp-app) :is(td, textarea, input, select, button) { font-family: inherit; font-size: inherit; font-weight: inherit; }
:where(body.sp-app) :is(td) { line-height: inherit; }
:where(body.sp-app) :is(input, select, textarea, button) { box-sizing: border-box; }
:where(body.sp-app) :is(input, textarea) { font-size: 14px; }
:where(body.sp-app) :is(input, select) { margin: 0 1px; }
:where(body.sp-app) textarea { overflow: auto; padding: 8px 12px; line-height: 1.42857143; resize: vertical; }
:where(body.sp-app) label { vertical-align: middle; cursor: pointer; }
:where(body.sp-app) :is(input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"]),
:where(body.sp-app) select, :where(body.sp-app) textarea { box-shadow: 0 0 0 transparent; border-radius: 2px; border: 1px solid #949494; background-color: #fff; color: #1e1e1e; }
:where(body.sp-app) :is(input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"]) { padding: 0 12px; min-height: 40px; }
:where(body.sp-app) select { padding: 0 24px 0 12px; line-height: 2.71428571; min-height: 40px; }
:where(body.sp-app) ::-webkit-datetime-edit { line-height: 1.85714286; }
:where(body.sp-app) input[type="search"] { -webkit-appearance: textfield; }
.sp-app select { font-size: 14px; line-height: 2.71428571; color: #1e1e1e; border-color: #949494; box-shadow: none; border-radius: 2px; padding: 0 24px 0 12px; min-height: 40px; max-width: 25rem; -webkit-appearance: none; background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%; background-size: 16px 16px; cursor: pointer; vertical-align: middle; }
.sp-app select[multiple] { height: auto; padding-right: 8px; background: #fff; }
/* Short fields never cut their value off: they grow with what is typed (field-sizing), from a
   minimum that holds a few characters. Without field-sizing they are wide enough for typical values.
   Context rules set a min-width, not a width, so they can still grow. */
:where(body.sp-app) .small-text { width: 7em; padding: 0 6px; }
:where(body.sp-app) label input.small-text { margin-top: -4px; }
:where(body.sp-app) input[type="number"].small-text { width: 8em; padding-right: 0; }
@supports (field-sizing: content) {
	:where(body.sp-app) input.small-text { field-sizing: content; width: auto; min-width: 4.5em; max-width: 100%; }
}
:where(body.sp-app) .regular-text { width: 25em; }
:where(body.sp-app) .large-text { width: 99%; }
:where(body.sp-app) :is(input[type="checkbox"], input[type="radio"]) { border: 1px solid #1e1e1e; border-radius: 2px; background: #fff; color: #1e1e1e; box-shadow: none; clear: none; cursor: pointer; display: inline-block; line-height: 0; height: 1rem; margin: -0.25rem 0.25rem 0 0; outline: 0; padding: 0 !important; text-align: center; vertical-align: middle; width: 1rem; min-width: 1rem; -webkit-appearance: none; appearance: none; transition: 0.05s border-color ease-in-out; }
:where(body.sp-app) td > input[type="checkbox"], .sp-app p :is(input[type="checkbox"], input[type="radio"]) { margin-top: 0; }
.sp-app p label input[type="radio"] { margin-top: -2px; }
:where(body.sp-app) input[type="radio"] { display: inline-flex; border-radius: 50%; margin-right: 0.25rem; align-items: center; justify-content: center; }
:where(body.sp-app) input:disabled, :where(body.sp-app) input.disabled, :where(body.sp-app) select:disabled, :where(body.sp-app) select.disabled, :where(body.sp-app) textarea:disabled, :where(body.sp-app) textarea.disabled { background: #f0f0f0; border-color: #cccccc; box-shadow: none; color: #949494; }
:where(body.sp-app) input[type="checkbox"]:disabled, :where(body.sp-app) input[type="checkbox"].disabled, :where(body.sp-app) input[type="radio"]:disabled, :where(body.sp-app) input[type="radio"].disabled,
:where(body.sp-app) input[type="checkbox"]:disabled:checked::before, :where(body.sp-app) input[type="radio"]:disabled:checked::before { opacity: 0.7; cursor: default; }
:where(body.sp-app) :is(input[type="checkbox"], input[type="radio"]):checked::before { float: left; display: inline-block; vertical-align: middle; width: 1rem; -webkit-font-smoothing: antialiased; }
:where(body.sp-app) input[type="checkbox"]:checked::before { content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E"); margin: -0.1875rem 0 0 -0.25rem; height: 1.3125rem; width: 1.3125rem; }
:where(body.sp-app) input[type="radio"]:checked::before { content: ""; border-radius: 50%; width: 0.5rem; height: 0.5rem; margin: auto; background-color: #fff; outline: 4px solid transparent; }

/* Buttons. WordPress scopes these to .wp-core-ui; .sp-app keeps the same weight. */
.sp-app :is(.button, .button-primary, .button-secondary) { display: inline-block; text-decoration: none; font-size: 13px; line-height: 2.15384615; min-height: 30px; margin: 0; padding: 0 10px; cursor: pointer; border-width: 1px; border-style: solid; -webkit-appearance: none; border-radius: 3px; white-space: nowrap; box-sizing: border-box; vertical-align: top; }
.sp-app .button-link { margin: 0; padding: 0; box-shadow: none; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left; text-decoration: underline; transition-property: border, background, color; transition-duration: 0.05s; transition-timing-function: ease-in-out; }
.sp-app p .button { vertical-align: baseline; }
:where(body.sp-app) p.submit { text-align: left; max-width: 100%; }

/* Tables. */
:where(body.sp-app) .widefat { border-spacing: 0; width: 100%; clear: both; margin: 0; }
:where(body.sp-app) .widefat * { word-wrap: break-word; }
:where(body.sp-app) .widefat :is(td, th) { padding: 8px 10px; }
:where(body.sp-app) .widefat td { vertical-align: top; }
:where(body.sp-app) .widefat td, :where(body.sp-app) .widefat td p, :where(body.sp-app) .widefat td ol, :where(body.sp-app) .widefat td ul { font-size: 13px; line-height: 1.5em; }
:where(body.sp-app) .widefat th, :where(body.sp-app) .widefat thead td, :where(body.sp-app) .widefat tfoot td { text-align: left; line-height: 1.3em; font-weight: 400; }
:where(body.sp-app) .widefat th:not(tbody th), :where(body.sp-app) .widefat thead td, :where(body.sp-app) .widefat tfoot td { font-size: 14px; }
:where(body.sp-app) .widefat :is(thead th, thead td, tfoot th, tfoot td) { line-height: 1.4em; }
:where(body.sp-app) .widefat td p { margin: 2px 0 0.8em; }
:where(body.sp-app) .form-table { border-collapse: collapse; margin-top: 0.5em; width: 100%; clear: both; }
:where(body.sp-app) .form-table, :where(body.sp-app) .form-table td, :where(body.sp-app) .form-table th, :where(body.sp-app) .form-table td p { font-size: 14px; }
:where(body.sp-app) .form-table td { margin-bottom: 9px; padding: 15px 10px; line-height: 1.3; vertical-align: middle; }
:where(body.sp-app) .form-table th { vertical-align: top; text-align: left; padding: 20px 10px 20px 0; width: 200px; line-height: 1.3; font-weight: 600; text-shadow: none; }
:where(body.sp-app) .form-table td p { margin-top: 4px; margin-bottom: 0; }
:where(body.sp-app) .tablenav { clear: both; height: 32px; margin: 6px 0 4px; vertical-align: middle; }

/* Notices. */
:where(body.sp-app) .notice, :where(body.sp-app) div.updated, :where(body.sp-app) div.error { background: #fff; border: none; border-left: 4px solid #c3c4c7; box-shadow: none; margin: 5px 15px 2px; padding: 8px 12px; }
:where(body.sp-app) .notice p, :where(body.sp-app) div.updated p, :where(body.sp-app) div.error p { margin: 0.5em 0; padding: 0; font-size: 13px; line-height: 1.54; color: #1e1e1e; }
:where(body.sp-app) .wrap .notice, :where(body.sp-app) .wrap div.updated, :where(body.sp-app) .wrap div.error { margin: 5px 0 15px; }
.sp-app .notice.is-dismissible { padding-right: 48px; position: relative; }
:where(body.sp-app) .notice-dismiss { position: absolute; top: 12px; right: 12px; border: none; margin: 0; padding: 0; background: none; color: #1e1e1e; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
:where(body.sp-app) .notice-dismiss:hover::before, :where(body.sp-app) .notice-dismiss:active::before { color: #1e1e1e; opacity: 0.7; }
:where(body.sp-app) .notice-dismiss::before { background: none; color: #1e1e1e; content: "\f335"; display: block; font: normal 20px/1 dashicons; height: 1em; text-align: center; width: 1em; -webkit-font-smoothing: antialiased; }
/* =========================================================================
   4. Page base
   ========================================================================= */
body.sp-shell { font-family: var(--sp-font); font-size: var(--sp-font-size); color: var(--sp-text); -webkit-font-smoothing: antialiased; }
body.sp-app { background: var(--sp-bg); }
body.sp-shell .wrap { margin: var(--sp-space-lg) 0 0 0; max-width: none; color: var(--sp-text); }
body.sp-shell #sp-main h1, body.sp-shell #sp-main h2, body.sp-shell #sp-main h3, body.sp-shell #sp-main h4 { color: var(--sp-text); }
body.sp-shell a { color: var(--sp-primary); text-decoration: none; }
body.sp-shell a:hover { color: var(--sp-primary-hover); }
body.sp-shell a:focus { box-shadow: none; outline: 2px solid var(--sp-primary-ring); outline-offset: 2px; border-radius: 4px; }
body.sp-shell .wrap p, body.sp-shell .wrap td, body.sp-shell .wrap th, body.sp-shell .wrap label { font-size: var(--sp-font-size); }
body.sp-shell.sp-skin-console .widefat thead th,
body.sp-shell.sp-skin-console .sp-header-fields label,
body.sp-shell.sp-skin-console .sp-badge,
body.sp-shell.sp-skin-console .widefat td code { font-family: var(--sp-font-mono); }

/* =========================================================================
   7. Page header, notices, cards
   ========================================================================= */
body.sp-shell .wrap h1,
body.sp-shell .wrap h1.wp-heading-inline { font-family: var(--sp-font-heading); font-size: var(--sp-heading-size); font-weight: var(--sp-heading-weight); letter-spacing: var(--sp-heading-spacing); color: var(--sp-text); padding: 0; margin: 0 0 6px 0; line-height: 1.3; }
body.sp-shell .wrap h1.wp-heading-inline { margin-right: 10px; }
body.sp-shell .wrap h2 { font-family: var(--sp-font-heading); font-size: 16px; font-weight: 600; color: var(--sp-text); margin: var(--sp-space-xl) 0 var(--sp-space-sm); }
body.sp-shell .wrap h3 { font-family: var(--sp-font-heading); font-size: 14px; font-weight: 600; color: var(--sp-text); margin: 0 0 6px; }
body.sp-shell .wrap h4 { color: var(--sp-text); }
body.sp-shell .wrap > .description,
body.sp-shell .wrap > p.description { color: var(--sp-muted); margin: 0 0 var(--sp-space-lg); max-width: none; }
body.sp-shell hr.wp-header-end { margin: 0 0 16px; border: 0; }
body.sp-shell .page-title-action,
body.sp-shell .page-title-action:active {
	display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
	margin: 0 4px 6px 0; padding: 6px 12px; min-height: 0; line-height: 1.4;
	font-family: var(--sp-font); font-size: 13px; font-weight: 500;
	color: var(--sp-text-2); background: var(--sp-surface); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow);
}
body.sp-shell .page-title-action:hover { color: var(--sp-primary); border-color: var(--sp-primary); background: var(--sp-surface); }

body.sp-shell .notice,
body.sp-shell div.updated,
body.sp-shell div.error {
	margin: 0 0 var(--sp-space-md) 0; padding: var(--sp-space-sm) 40px var(--sp-space-sm) var(--sp-space-md); border: 1px solid var(--sp-border); border-left-width: 1px;
	border-radius: var(--sp-radius); background: var(--sp-surface); box-shadow: var(--sp-shadow); font-family: var(--sp-font); color: var(--sp-text);
}
body.sp-shell .notice p,
body.sp-shell .notice a,
body.sp-shell .notice strong { margin: 0; color: inherit; }
body.sp-shell .notice a { text-decoration: underline; }
body.sp-shell .notice-success { border-color: var(--sp-success-border); background: var(--sp-success-bg); color: var(--sp-success-fg); }
body.sp-shell .notice-error { border-color: var(--sp-danger-border); background: var(--sp-danger-bg); color: var(--sp-danger-fg); }
body.sp-shell .notice-warning { border-color: var(--sp-warn-border); background: var(--sp-warn-bg); color: var(--sp-warn-fg); }
body.sp-shell .notice-info { border-color: var(--sp-primary); background: var(--sp-primary-soft); color: var(--sp-primary); }
body.sp-shell .notice.is-dismissible .notice-dismiss { top: 50%; right: 8px; transform: translateY(-50%); padding: 6px; color: inherit !important; background: transparent; border-radius: 6px; }
body.sp-shell .notice.is-dismissible .notice-dismiss:before { color: inherit !important; opacity: 0.75; }
body.sp-shell .notice.is-dismissible .notice-dismiss:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
body.sp-shell .notice.is-dismissible .notice-dismiss:hover:before { opacity: 1; }

body.sp-shell .sp-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); padding: var(--sp-space-lg) var(--sp-space-xl); margin: 0 0 var(--sp-space-lg); max-width: none; color: var(--sp-text); }
body.sp-shell .sp-card-wide { max-width: none; overflow-x: auto; }
body.sp-shell .sp-card h2 { margin-top: 0; }
body.sp-shell .sp-card h2 + * { margin-top: 0; }
body.sp-shell .sp-card h2:not(:first-child) { margin-top: 24px; }
body.sp-shell .sp-kv { grid-template-columns: 200px 1fr; gap: var(--sp-space-sm) var(--sp-space-md); }
body.sp-shell .sp-kv dt { color: var(--sp-muted); }
body.sp-shell .sp-kv dd { color: var(--sp-text); }
body.sp-shell .sp-actions { gap: 32px; }
body.sp-shell pre.sp-notes { font-family: var(--sp-font); font-size: 13px; color: var(--sp-text-2); background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); padding: 12px; }
body.sp-shell .sp-muted { color: var(--sp-muted); }
body.sp-shell .sp-cell-note { display: inline-block; color: var(--sp-muted); font-size: 12px; line-height: 1.35; max-width: 16em; white-space: normal; }
body.sp-shell a.sp-cell-note:hover { color: var(--sp-primary); }
body.sp-shell .sp-text-danger { color: var(--sp-danger-fg); font-weight: 600; }

/* Bulk actions above a list. */
body.sp-shell .sp-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-space-sm); margin: 0 0 var(--sp-space-sm); }
body.sp-shell .sp-bulk-count { color: var(--sp-muted); font-size: 13px; margin-right: auto; }
body.sp-shell .widefat .check-column { width: 36px; padding-left: var(--sp-space-sm); padding-right: 0; vertical-align: middle; }
body.sp-shell .widefat .check-column input { margin: 0; }

/* Production week view. */
body.sp-shell .sp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-space-sm); margin-bottom: var(--sp-space-sm); }
body.sp-shell .sp-week-day { display: flex; flex-direction: column; gap: 6px; min-height: 180px; padding: var(--sp-space-sm); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); min-width: 0; }
body.sp-shell .sp-week-day.is-today { border-color: var(--sp-primary); box-shadow: inset 0 0 0 1px var(--sp-primary); }
body.sp-shell .sp-week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-muted); }
body.sp-shell .sp-week-head a { color: var(--sp-text); text-transform: none; letter-spacing: 0; }
body.sp-shell .sp-week-empty { margin: 0; color: var(--sp-placeholder); font-size: 12px; }
body.sp-shell .sp-week-run { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; border-left: 3px solid var(--sp-success-border); background: var(--sp-success-bg); color: var(--sp-success-fg); text-decoration: none; min-width: 0; }
body.sp-shell .sp-week-run-expiring { border-left-color: var(--sp-warn-border); background: var(--sp-warn-bg); color: var(--sp-warn-fg); }
body.sp-shell .sp-week-run-depleted { border-left-color: var(--sp-border-strong); background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); }
body.sp-shell .sp-week-run-expired { border-left-color: var(--sp-danger-border); background: var(--sp-danger-bg); color: var(--sp-danger-fg); }
body.sp-shell .sp-week-run:hover { filter: brightness(0.97); }
body.sp-shell .sp-week-run-title { font-weight: 600; font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
body.sp-shell .sp-week-run-meta { font-size: 11.5px; line-height: 1.3; opacity: 0.85; overflow-wrap: anywhere; }
@media (max-width: 960px) { body.sp-shell .sp-week { grid-template-columns: 1fr; } body.sp-shell .sp-week-day { min-height: 0; } }

/* Dashboard activity feed. */
body.sp-shell .sp-activity { margin: 0; padding: 0; list-style: none; }
body.sp-shell .sp-activity li { display: flex; gap: var(--sp-space-sm); align-items: flex-start; margin: 0; padding: var(--sp-space-sm) 0; border-bottom: 1px solid var(--sp-border); }
body.sp-shell .sp-activity li:last-child { border-bottom: 0; }
body.sp-shell .sp-activity .dashicons { flex: 0 0 auto; width: 28px; height: 28px; font-size: 16px; line-height: 28px; text-align: center; border-radius: 50%; background: var(--sp-primary-soft); color: var(--sp-primary); }
body.sp-shell .sp-activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.sp-shell .sp-activity-body a { color: var(--sp-text); overflow-wrap: anywhere; }
body.sp-shell .sp-activity-body a:hover { color: var(--sp-primary); }
body.sp-shell .sp-activity-meta { color: var(--sp-muted); font-size: 12px; }

/* =========================================================================
   8. Tables
   ========================================================================= */
body.sp-shell .wrap table.widefat {
	border: 1px solid var(--sp-border); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); background: var(--sp-surface); color: var(--sp-text);
	border-collapse: separate; border-spacing: 0; overflow: hidden; font-family: var(--sp-font); margin: 0 0 var(--sp-space-lg);
}
body.sp-shell .widefat thead th,
body.sp-shell .widefat tfoot th { background: var(--sp-table-head-bg); color: var(--sp-table-head-text); font-size: var(--sp-table-head-size); font-weight: 600; letter-spacing: 0.02em; text-transform: var(--sp-table-head-transform); padding: var(--sp-space-sm) var(--sp-space-md); border-bottom: 1px solid var(--sp-border); border-top: 0; }
body.sp-shell .widefat tfoot th { border-top: 1px solid var(--sp-border); border-bottom: 0; color: var(--sp-text); text-transform: none; font-size: var(--sp-font-size); }
body.sp-shell .widefat td { padding: var(--sp-cell-pad); color: var(--sp-text); vertical-align: middle; border-top: 1px solid var(--sp-border); }
body.sp-shell .widefat th, body.sp-shell .widefat td { text-align: left; }
body.sp-shell .widefat th.sp-num, body.sp-shell .widefat td.sp-num,
body.sp-shell .widefat thead th.sp-num, body.sp-shell .widefat tfoot th.sp-num { text-align: right; }
body.sp-shell .widefat thead th { vertical-align: bottom; white-space: nowrap; }
body.sp-shell .widefat thead th.sp-num { white-space: normal; }
body.sp-shell .widefat tbody tr:first-child td { border-top: 0; }
body.sp-shell .widefat tbody th { border-top: 1px solid var(--sp-border); }
body.sp-shell .widefat tbody tr:first-child th { border-top: 0; }
body.sp-shell .widefat.striped > tbody > :nth-child(odd),
body.sp-shell ul.striped > :nth-child(odd),
body.sp-shell .alternate { background: transparent; }
body.sp-shell .widefat tbody tr:hover td { background: var(--sp-surface-2); }
body.sp-shell .widefat td code { font-family: var(--sp-font-mono); background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); border-radius: 6px; padding: 2px 7px; font-size: 12px; white-space: nowrap; }
body.sp-shell .widefat td strong { font-weight: 600; }
body.sp-shell .sp-lots table.widefat { box-shadow: none; margin: 8px 0 4px; }
body.sp-shell .sp-lots table.widefat thead th { padding: var(--sp-space-xs) var(--sp-space-sm); }
body.sp-shell .sp-lots table.widefat td { padding: var(--sp-space-xs) var(--sp-space-sm); font-size: 13px; }
body.sp-shell .sp-lots summary { font-size: 12.5px; font-weight: 500; color: var(--sp-primary); }
body.sp-shell .sp-card table.sp-lines { box-shadow: none; margin: 0 0 12px; }
body.sp-shell .sp-lines td { padding: var(--sp-space-sm); }
body.sp-shell .sp-lines thead th { padding: var(--sp-space-sm); }
body.sp-shell .sp-lines select.sp-line-item { min-width: 220px; }
body.sp-shell .sp-lines input.sp-line-text { min-width: 120px; }
body.sp-shell .widefat tbody th.check-column input,
body.sp-shell .widefat thead td.check-column input,
body.sp-shell .widefat tfoot td.check-column input { margin: 0; vertical-align: middle; }

/* =========================================================================
   9. Badges
   ========================================================================= */
body.sp-shell .sp-badge { padding: 2px 10px; border-radius: var(--sp-radius-pill); font-size: 12px; font-weight: 500; line-height: 20px; border: 1px solid transparent; }
body.sp-shell .sp-badge-active, body.sp-shell .sp-badge-ok { background: var(--sp-success-bg); color: var(--sp-success-fg); border-color: var(--sp-success-border); }
body.sp-shell .sp-badge-hold, body.sp-shell .sp-badge-expiring { background: var(--sp-warn-bg); color: var(--sp-warn-fg); border-color: var(--sp-warn-border); }
body.sp-shell .sp-badge-depleted { background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); border-color: var(--sp-border); }
body.sp-shell .sp-badge-low, body.sp-shell .sp-badge-expired { background: var(--sp-danger-bg); color: var(--sp-danger-fg); border-color: var(--sp-danger-border); }
body.sp-shell .sp-badge-ordered { background: var(--sp-primary-soft); color: var(--sp-primary); border-color: color-mix(in srgb, var(--sp-primary) 30%, transparent); }

/* =========================================================================
   10. Forms and buttons
   ========================================================================= */
body.sp-shell .sp-filters { gap: var(--sp-space-sm); margin: 0 0 var(--sp-space-md); }
body.sp-shell .sp-filters label { color: var(--sp-text-2); font-size: 13px; }
body.sp-shell input[type="text"],
body.sp-shell input[type="search"],
body.sp-shell input[type="number"],
body.sp-shell input[type="email"],
body.sp-shell input[type="date"],
body.sp-shell input[type="password"],
body.sp-shell select,
body.sp-shell textarea {
	font-family: var(--sp-font); font-size: var(--sp-font-size); color: var(--sp-text);
	background-color: var(--sp-surface); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm);
	box-shadow: none; min-height: var(--sp-control-h); padding: 0 var(--sp-control-pad); line-height: 1.4;
}
body.sp-shell textarea { padding: var(--sp-space-sm) var(--sp-control-pad); }
body.sp-shell select, body.sp-shell input.sp-suggest { padding-right: 32px; background-repeat: no-repeat; background-size: 16px 16px; background-position: right 10px top 55%; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23667085%22%2F%3E%3C%2Fsvg%3E"); }
body.sp-shell.sp-mode-dark select, body.sp-shell.sp-mode-dark input.sp-suggest,
html.sp-dark-pref body.sp-shell.sp-mode-auto select, html.sp-dark-pref body.sp-shell.sp-mode-auto input.sp-suggest { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a6b0c3%22%2F%3E%3C%2Fsvg%3E"); }
body.sp-shell select option { background: var(--sp-surface); color: var(--sp-text); }
/* A closed select is one line: a long choice is cut with an ellipsis, never wrapped. */
body.sp-shell select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Customizable select (Chromium 135+). The dropdown list becomes fully themed:
   surface, border, hover and selected colors follow the skin and highlight.
   Browsers without support keep the native list. */
@supports (appearance: base-select) {
	body.sp-shell select,
	body.sp-shell select::picker(select) { appearance: base-select; }
	body.sp-shell select { display: inline-flex; align-items: center; cursor: pointer; }
	body.sp-shell select::picker-icon { display: none; }
	body.sp-shell select:open { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-ring); }
	body.sp-shell select::picker(select) {
		background: var(--sp-surface); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
		box-shadow: var(--sp-shadow-lg); padding: var(--sp-space-xs); margin: 4px 0 0; min-width: anchor-size(width); max-height: 320px; overflow: auto;
		font-family: var(--sp-font); font-size: var(--sp-font-size);
	}
	body.sp-shell select option { display: flex; align-items: center; gap: 8px; padding: calc(var(--sp-space-xs) + 3px) var(--sp-space-sm); border-radius: 6px; cursor: pointer; background: transparent; color: var(--sp-text); }
	body.sp-shell select option::checkmark { display: none; }
	body.sp-shell select option:hover,
	body.sp-shell select option:focus-visible { background: var(--sp-primary-soft); color: var(--sp-primary); outline: none; }
	body.sp-shell select option:checked { background: var(--sp-primary); color: var(--sp-on-primary); }
	body.sp-shell select option:disabled { color: var(--sp-muted); cursor: default; }
	body.sp-shell select optgroup { padding: var(--sp-space-xs) 0; }
	body.sp-shell select optgroup::label,
	body.sp-shell select optgroup label { padding: var(--sp-space-xs) var(--sp-space-sm); color: var(--sp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
}
body.sp-shell input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; }
body.sp-shell input[type="radio"] { border: 1px solid var(--sp-border-strong); background: var(--sp-surface); border-radius: 50%; box-shadow: none; width: 16px; height: 16px; }
body.sp-shell input[type="radio"]:checked { border-color: var(--sp-primary); background: var(--sp-primary); }
body.sp-shell input[type="radio"]:checked::before { background: var(--sp-on-primary); }
/* Checkboxes: a custom 18px box. The tick is drawn with borders and centred by the grid, so it
   sits in the middle in every skin (the WordPress SVG tick needed per-skin nudging and sat off). */
body.sp-shell input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; box-sizing: border-box;
	width: 18px; height: 18px; min-width: 18px; margin: 0 6px 0 0; padding: 0 !important; vertical-align: middle;
	border: 1.5px solid var(--sp-border-strong); border-radius: 5px; background: var(--sp-surface); box-shadow: none;
	cursor: pointer; transition: background-color 0.12s, border-color 0.12s;
}
body.sp-shell input[type="checkbox"]::before {
	content: ""; float: none; display: block; width: 5px; height: 9px; margin: 0 0 2px; filter: none;
	border: solid var(--sp-on-primary, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.12s;
}
body.sp-shell input[type="checkbox"]:hover:not(:disabled) { border-color: var(--sp-primary); }
body.sp-shell input[type="checkbox"]:checked { border-color: var(--sp-primary); background: var(--sp-primary); }
body.sp-shell input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
body.sp-shell input[type="checkbox"]:disabled { opacity: 0.55; cursor: default; }
body.sp-shell input:focus,
body.sp-shell select:focus,
body.sp-shell textarea:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-ring); outline: none; color: var(--sp-text); background-color: var(--sp-surface); }
body.sp-shell select:focus,
body.sp-shell select:active,
body.sp-shell select:open,
body.sp-shell select:focus-visible { color: var(--sp-text) !important; background-color: var(--sp-surface); }
body.sp-shell select:hover,
body.sp-shell input[type="text"]:hover,
body.sp-shell input[type="search"]:hover,
body.sp-shell input[type="number"]:hover,
body.sp-shell input[type="email"]:hover,
body.sp-shell input[type="date"]:hover,
body.sp-shell input[type="password"]:hover,
body.sp-shell textarea:hover { color: var(--sp-text) !important; background-color: var(--sp-surface); border-color: var(--sp-border-strong); }
body.sp-shell select:hover:focus,
body.sp-shell input:hover:focus,
body.sp-shell textarea:hover:focus { border-color: var(--sp-primary); }
body.sp-shell input::placeholder,
body.sp-shell textarea::placeholder { color: var(--sp-placeholder); }
body.sp-shell .form-table { margin: 0; }
body.sp-shell .form-table th { font-family: var(--sp-font); font-weight: 500; color: var(--sp-text-2); padding: var(--sp-space-md) var(--sp-space-md) var(--sp-space-md) 0; width: 220px; }
body.sp-shell .form-table td { padding: var(--sp-space-sm) 0; color: var(--sp-text); }
body.sp-shell .form-table tr { border-bottom: 1px solid var(--sp-border); }
body.sp-shell .form-table tr:last-child { border-bottom: 0; }
body.sp-shell .form-table td .description,
body.sp-shell .sp-inline-help { color: var(--sp-muted); font-size: 12.5px; }
body.sp-shell .form-table td label { color: var(--sp-text-2); }
body.sp-shell .form-table th, body.sp-shell .form-table td, body.sp-shell .form-table td p { color: var(--sp-text-2); }
body.sp-shell .form-table td .description { color: var(--sp-muted); }
body.sp-shell .wrap .form-wrap label, body.sp-shell .wrap .description { color: var(--sp-muted); }
body.sp-shell code { background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); }
body.sp-shell input.code, body.sp-shell textarea.code, body.sp-shell input.regular-text.code { background: var(--sp-surface) !important; color: var(--sp-text) !important; font-family: var(--sp-font-mono); }
/* Required fields: a quiet marker after the label. */
body.sp-shell .form-table tr:has(td [required]) th label::after,
body.sp-shell .sp-header-fields label:has([required])::after,
body.sp-shell .sp-lines th[data-required]::after { content: " *"; color: var(--sp-primary); font-weight: 600; }
body.sp-shell .sp-required-note { color: var(--sp-muted); font-size: 12px; margin: var(--sp-space-xs) 0 0; }
body.sp-shell .sp-required-note::before { content: "* "; color: var(--sp-primary); font-weight: 600; }
body.sp-shell input:user-invalid,
body.sp-shell select:user-invalid,
body.sp-shell textarea:user-invalid { border-color: var(--sp-danger-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-danger-fg) 25%, transparent); }
body.sp-shell .sp-header-fields label { color: var(--sp-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
body.sp-shell .sp-header-fields input,
body.sp-shell .sp-header-fields select { margin-top: var(--sp-space-xs); text-transform: none; letter-spacing: 0; font-weight: 400; }
body.sp-shell .sp-header-fields { gap: var(--sp-space-md); margin-bottom: var(--sp-space-md); }
body.sp-shell .sp-on-hand { font-weight: 600; font-variant-numeric: tabular-nums; }
body.sp-shell p.submit { margin: var(--sp-space-sm) 0 0; padding: 0; }

/* Buttons keep the extra class of weight they had as .wp-core-ui rules: .sp-app in the app,
   .wp-core-ui on the login screen. */
body.sp-shell:is(.sp-app, .wp-core-ui) .button,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-secondary {
	font-family: var(--sp-font); font-size: var(--sp-font-size); font-weight: 500; color: var(--sp-text-2);
	background: var(--sp-surface); border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm);
	box-shadow: var(--sp-shadow); min-height: var(--sp-control-h); line-height: calc(var(--sp-control-h) - 2px); padding: 0 var(--sp-space-md); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body.sp-shell:is(.sp-app, .wp-core-ui) .button:hover,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-secondary:hover { color: var(--sp-primary); border-color: var(--sp-primary); background: var(--sp-surface); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button:focus,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary:focus { box-shadow: 0 0 0 3px var(--sp-primary-ring); outline: none; }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary:active { color: var(--sp-on-primary) !important; background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; box-shadow: var(--sp-shadow); text-shadow: none; }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary:hover { background: var(--sp-primary-hover) !important; border-color: var(--sp-primary-hover) !important; color: var(--sp-on-primary) !important; }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link { color: var(--sp-primary); font-family: var(--sp-font); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link:hover { color: var(--sp-primary-hover); }
body.sp-shell .sp-remove-line { color: var(--sp-placeholder); }
body.sp-shell .sp-remove-line:hover { color: var(--sp-danger-fg); }

body.sp-shell .tablenav { height: auto; margin: 0; }
body.sp-shell .tablenav .tablenav-pages { float: none; margin: 0; }
body.sp-shell .tablenav-pages .page-numbers { display: inline-block; min-width: 32px; padding: 0 8px; line-height: 32px; text-align: center; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); background: var(--sp-surface); color: var(--sp-text-2); margin-right: 4px; font-size: 13px; }
body.sp-shell .tablenav-pages .page-numbers.current { background: var(--sp-primary); border-color: var(--sp-primary); color: var(--sp-on-primary); }
body.sp-shell .tablenav-pages .page-numbers:hover { border-color: var(--sp-primary); color: var(--sp-primary); }

/* Interactive states: hover, focus, active and disabled on buttons, links and controls. */
body.sp-shell:is(.sp-app, .wp-core-ui) .button:active,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-secondary:active { background: var(--sp-surface-2); border-color: var(--sp-border-strong); box-shadow: none; transform: translateY(0); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button.disabled,
body.sp-shell:is(.sp-app, .wp-core-ui) .button:disabled,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary.disabled,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary:disabled { opacity: 0.5; cursor: not-allowed; color: var(--sp-muted) !important; background: var(--sp-surface-2) !important; border-color: var(--sp-border) !important; box-shadow: none !important; }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link:focus,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sp-primary-ring); border-radius: 4px; }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link-delete,
body.sp-shell a.submitdelete,
body.sp-shell .submitdelete { color: var(--sp-danger-fg); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link-delete:hover,
body.sp-shell a.submitdelete:hover { color: var(--sp-danger-fg); text-decoration: underline; }
body.sp-shell .page-title-action:focus,
body.sp-shell .page-title-action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sp-primary-ring); color: var(--sp-primary); border-color: var(--sp-primary); }
body.sp-shell .notice.is-dismissible .notice-dismiss:hover:before,
body.sp-shell .notice.is-dismissible .notice-dismiss:active:before,
body.sp-shell .notice.is-dismissible .notice-dismiss:focus:before { color: inherit; opacity: 1; }
body.sp-shell .notice.is-dismissible .notice-dismiss:focus { outline: none; box-shadow: 0 0 0 3px var(--sp-primary-ring); border-radius: 4px; }
body.sp-shell .tablenav-pages a:focus,
body.sp-shell details summary:focus,
body.sp-shell input[type="checkbox"]:focus,
body.sp-shell input[type="radio"]:focus,
body.sp-shell input[type="color"]:focus,
body.sp-shell .sp-swatch:focus { outline: none; box-shadow: 0 0 0 3px var(--sp-primary-ring); }
body.sp-shell .sp-lots summary::marker { color: var(--sp-primary); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button-primary:active { background: var(--sp-primary-hover) !important; }
body.sp-shell ::selection { background: var(--sp-primary-soft); color: var(--sp-text); }
body.sp-shell img.avatar { background: var(--sp-surface-2); color: transparent; border-radius: 50%; border: 1px solid var(--sp-border); }
body.sp-shell:is(.sp-app, .wp-core-ui) .button .dashicons,
body.sp-shell:is(.sp-app, .wp-core-ui) .button-link .dashicons { color: inherit; }

/* =========================================================================
   11. Appearance page widgets
   ========================================================================= */
body.sp-shell .sp-skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-space-md); }
body.sp-shell .sp-skin-card { position: relative; display: block; border: 2px solid var(--sp-border); border-radius: var(--sp-radius); padding: var(--sp-space-sm); background: var(--sp-surface); cursor: pointer; transition: border-color 0.15s; }
body.sp-shell .sp-skin-card:hover { border-color: var(--sp-border-strong); }
body.sp-shell .sp-skin-card:has(input:checked) { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-ring); }
body.sp-shell .sp-skin-card input { position: absolute; opacity: 0; pointer-events: none; }
body.sp-shell .sp-skin-preview { display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 14px 1fr; height: 96px; border: 1px solid var(--sp-border); border-radius: 6px; overflow: hidden; background: var(--pv-bg); margin-bottom: 10px; }
body.sp-shell .sp-skin-preview .pv-top { grid-column: 1 / -1; background: var(--pv-top); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
body.sp-shell .sp-skin-preview .pv-side { background: var(--pv-side); border-right: 1px solid rgba(0, 0, 0, 0.08); }
body.sp-shell .sp-skin-preview .pv-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
body.sp-shell .sp-skin-preview .pv-card { display: block; height: 22px; background: var(--pv-card); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; }
body.sp-shell .sp-skin-preview .pv-card-short { width: 60%; height: 14px; }
body.sp-shell .sp-skin-name { display: block; font-weight: 600; color: var(--sp-text); margin-bottom: 2px; }
body.sp-shell .sp-skin-desc { display: block; color: var(--sp-muted); font-size: 12.5px; line-height: 1.4; }
body.sp-shell .sp-mode-row, body.sp-shell .sp-accent-row, body.sp-shell .sp-spacing-row { display: flex; flex-wrap: wrap; gap: var(--sp-space-sm); align-items: center; }
body.sp-shell .sp-pill-button { border: 1px solid var(--sp-border-strong); font-family: var(--sp-font); font-size: var(--sp-font-size); line-height: 1.4; }
body.sp-shell .sp-pill-button .sp-muted { margin-left: 4px; font-weight: 400; }
body.sp-shell .sp-pill-button.is-active { background: var(--sp-primary); border-color: var(--sp-primary); color: var(--sp-on-primary); }
body.sp-shell .sp-pill-button.is-active .sp-muted { color: inherit; opacity: 0.8; }
body.sp-shell .sp-spacing-slider { display: flex; align-items: center; gap: var(--sp-space-md); margin-top: var(--sp-space-md); max-width: 520px; }
body.sp-shell .sp-spacing-slider input[type="range"] { flex: 1 1 auto; accent-color: var(--sp-primary); min-height: 0; }
body.sp-shell .sp-spacing-slider code { font-family: var(--sp-font-mono); background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); border-radius: 6px; padding: 2px 7px; font-size: 12px; min-width: 44px; text-align: center; }
body.sp-shell .wrap form > p.description { margin: 0 0 var(--sp-space-sm); color: var(--sp-muted); }
body.sp-shell .sp-pill-option { position: relative; display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-pill); background: var(--sp-surface); color: var(--sp-text-2); cursor: pointer; font-weight: 500; }
body.sp-shell .sp-pill-option input { position: absolute; opacity: 0; pointer-events: none; }
body.sp-shell .sp-pill-option:has(input:checked) { background: var(--sp-primary); border-color: var(--sp-primary); color: var(--sp-on-primary); }
body.sp-shell .sp-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--sp-surface); box-shadow: 0 0 0 1px var(--sp-border-strong); background: var(--swatch); cursor: pointer; padding: 0; transition: transform 0.1s; }
body.sp-shell .sp-swatch:hover { transform: scale(1.08); }
body.sp-shell .sp-swatch.is-active { box-shadow: 0 0 0 2px var(--sp-text); }
body.sp-shell .sp-accent-custom { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; color: var(--sp-text-2); }
body.sp-shell .sp-accent-custom input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); background: var(--sp-surface); cursor: pointer; min-height: 0; }
body.sp-shell .sp-accent-custom code { font-family: var(--sp-font-mono); background: var(--sp-neutral-bg); color: var(--sp-neutral-fg); border-radius: 6px; padding: 2px 7px; font-size: 12px; }