/**
 * TurtleReport app shell and base elements. Every rule is scoped to body.tly-shell,
 * so only TurtleReport screens change. Colours, type and sizes come from tokens.css.
 */

/* Canvas */
body.tly-shell,
body.tly-shell #wpwrap,
body.tly-shell #wpcontent,
body.tly-shell #wpbody,
body.tly-shell #wpbody-content { background: var(--tly-bg); }
body.tly-shell #wpcontent { padding-left: 0; }
body.rtl.tly-shell #wpcontent { padding-right: 0; }
/* Without the JS viewport enhancement, retain normal WordPress page scrolling. */
body.tly-shell #wpbody { min-height: calc(100vh - 32px); }
@media (max-width: 782px) { body.tly-shell #wpbody { min-height: calc(100vh - 46px); } }
body.tly-shell #wpbody-content { padding-bottom: 48px; font-family: var(--tly-font); color: var(--tly-ink-2); font-size: var(--tly-text-base); line-height: var(--tly-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.tly-shell #wpfooter { padding-left: var(--tly-gutter); padding-right: var(--tly-gutter); color: var(--tly-muted); background: transparent; }
body.tly-shell #wpfooter a { color: var(--tly-muted); }
body.tly-shell #screen-meta-links { display: none; }

/*
 * Shell layout. Sidebar layout: native WordPress menu | TurtleReport sidebar | content.
 * Follow Core's expanded, user-folded and responsive menu widths independently.
 * The sidebar is fixed; #wpbody is padded by its width. Desktop content scrolls
 * inside the viewport, independently of both navigation columns. Core retains
 * its own menu scrolling/pinning when a long WordPress menu needs more space.
 * Under 783px use native page scrolling and a TurtleReport drawer.
 * Header layout (a viewer with one report): a slim sticky bar, no sidebar.
 *
 * Only #wpbody (and the header bar) leave the flow. #wpcontent must stay static:
 * a fixed #wpcontent would become a stacking context around Core's admin bar,
 * letting the admin menu paint over the bar's left items.
 */
body.tly-shell { --tly-menu-w: 160px; }
body.tly-shell.folded { --tly-menu-w: 36px; }
@media (max-width: 960px) { body.tly-shell.auto-fold { --tly-menu-w: 36px; } }
body.tly-layout-sidebar { --tly-side-w: 248px; }
body.tly-layout-sidebar.tly-side-collapsed { --tly-side-w: 64px; }

body.tly-layout-sidebar #wpbody { padding-left: var(--tly-side-w); transition: padding var(--tly-dur) var(--tly-ease); }
body.tly-layout-sidebar #wpfooter { padding-left: calc(var(--tly-side-w) + var(--tly-gutter)); }
@media (min-width: 783px) {
	body.tly-viewport #wpbody { position: fixed; top: 32px; bottom: 0; left: var(--tly-menu-w); right: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; box-sizing: border-box; }
	body.tly-viewport.tly-layout-header #wpbody { top: calc(32px + var(--tly-bar-h)); }
	body.tly-viewport #wpbody-content { flex: 1 0 auto; float: none; display: flow-root; padding-bottom: var(--tly-space-6); }
	/* Short pages keep Core's footer at the bottom of the pane; long pages push it below the content. */
	body.tly-viewport #wpbody #wpfooter { position: static; flex: none; margin: auto 0 0; padding-left: var(--tly-gutter); padding-right: var(--tly-gutter); }
	body.tly-viewport .tly-topbar { position: fixed; top: 32px; left: var(--tly-menu-w); right: 0; }
	body.rtl.tly-viewport #wpbody, body.rtl.tly-viewport .tly-topbar { left: 0; right: var(--tly-menu-w); }
}
body.tly-shell .tly-side a:focus, body.tly-shell .tly-side button:focus,
body.tly-shell .tly-topbar a:focus, body.tly-shell .tly-topbar button:focus,
body.tly-shell .tly-mobilebar button:focus { outline: none; box-shadow: none; }
body.tly-shell .tly-side a:focus-visible, body.tly-shell .tly-side button:focus-visible,
body.tly-shell .tly-topbar a:focus-visible, body.tly-shell .tly-topbar button:focus-visible,
body.tly-shell .tly-mobilebar button:focus-visible { outline: none; box-shadow: var(--tly-focus); }

/* sidebar */
.tly-side { position: fixed; top: 32px; bottom: 0; left: var(--tly-menu-w); z-index: 100; display: flex; flex-direction: column; width: var(--tly-side-w); box-sizing: border-box; background: var(--tly-surface); border-right: 1px solid var(--tly-line); font-family: var(--tly-font); font-size: var(--tly-text-base); color: var(--tly-ink-2); transition: width var(--tly-dur) var(--tly-ease); }
.tly-side *, .tly-topbar *, .tly-mobilebar * { box-sizing: border-box; }
.tly-side-head { display: flex; align-items: center; gap: var(--tly-space-2); flex: none; height: var(--tly-bar-h); padding: 0 var(--tly-space-4); border-bottom: 1px solid var(--tly-line); }
.tly-brand-link { display: flex; align-items: center; gap: var(--tly-space-2); min-width: 0; flex: 1; color: var(--tly-ink); text-decoration: none; font-weight: var(--tly-weight-semibold); font-size: var(--tly-text-md); letter-spacing: var(--tly-tracking-tight); border-radius: var(--tly-radius-sm); }
.tly-brand-link:hover, .tly-brand-link:focus { color: var(--tly-ink); }
.tly-mark { flex: none; display: block; color: var(--tly-primary); }
.tly-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tly-brand-logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
/* Logos are usually drawn for white paper (the PDF and e-mail put them on a white chip too): give them the same light chip on a dark sidebar so dark lettering stays readable. */
body.tly-shell.tly-theme-dark .tly-brand-logo { background: var(--tly-p-white); padding: var(--tly-space-1) var(--tly-space-2); border-radius: var(--tly-radius-sm); box-sizing: content-box; height: 24px; }
@media (prefers-color-scheme: dark) {
	body.tly-shell.tly-theme-system .tly-brand-logo { background: var(--tly-p-white); padding: var(--tly-space-1) var(--tly-space-2); border-radius: var(--tly-radius-sm); box-sizing: content-box; height: 24px; }
}
.tly-side-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: var(--tly-space-3) var(--tly-space-3) var(--tly-space-4); scrollbar-width: thin; }
.tly-side-group + .tly-side-group { margin-top: var(--tly-space-5); }
.tly-side-label { display: flex; align-items: center; justify-content: space-between; gap: var(--tly-space-2); height: 28px; padding: 0 var(--tly-space-2); color: var(--tly-muted); font-size: var(--tly-text-xs); font-weight: var(--tly-weight-semibold); }
.tly-side-count { padding: 0 var(--tly-space-2); border-radius: var(--tly-radius-sm); background: var(--tly-flat-bg); color: var(--tly-ink-2); font-size: var(--tly-text-xs); letter-spacing: 0; line-height: var(--tly-badge-h); }
.tly-side-filter { position: relative; display: block; margin: 2px 0 var(--tly-space-2); }
.tly-side-filter .tly-ico { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: block; color: var(--tly-muted); pointer-events: none; }
body.tly-shell .tly-side-filter input { width: 100%; height: 32px; min-height: 32px; padding: 0 var(--tly-space-3) 0 var(--tly-space-8); border: 1px solid var(--tly-line-input); border-radius: var(--tly-radius); background: var(--tly-surface); color: var(--tly-ink); font: var(--tly-text-sm) var(--tly-font); box-shadow: none; }
body.tly-shell .tly-side-filter input:focus { border-color: var(--tly-accent); box-shadow: var(--tly-focus); outline: none; }
.tly-side-list { margin: 0; padding: 0; list-style: none; }
.tly-side-list li { margin: 0 0 2px; }
.tly-side-item { display: flex; align-items: center; gap: var(--tly-space-2); min-height: 40px; padding: var(--tly-space-1) var(--tly-space-2); border-radius: var(--tly-radius); color: var(--tly-ink-2); text-decoration: none; font-weight: var(--tly-weight-medium); line-height: var(--tly-leading-tight); transition: background-color var(--tly-dur) var(--tly-ease), color var(--tly-dur) var(--tly-ease); }
.tly-side-item:hover, .tly-side-item:focus { background: var(--tly-hover); color: var(--tly-ink); }
.tly-side-item.is-active { background: var(--tly-active); color: var(--tly-ink); }
.tly-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--tly-radius-sm); background: var(--tly-flat-bg); color: var(--tly-ink-2); font-size: var(--tly-text-xs); font-weight: var(--tly-weight-semibold); }
.tly-avatar .tly-ico { display: block; width: 16px; height: 16px; }
.tly-side-item.is-active .tly-avatar { background: var(--tly-primary); color: var(--tly-on-primary); }
.tly-avatar.is-ghost { background: transparent; border: 1px dashed var(--tly-line-strong); color: var(--tly-muted); }
.tly-side-add { margin-top: 2px; color: var(--tly-muted); }
.tly-side-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; color: var(--tly-muted); }
.tly-side-item:hover .tly-side-icon, .tly-side-item.is-active .tly-side-icon { color: var(--tly-ink); }
.tly-side-icon .tly-ico { display: block; }
.tly-alert-dot { position: absolute; top: 3px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--tly-bad); box-shadow: 0 0 0 2px var(--tly-surface); }
.tly-side-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tly-side-name, .tly-side-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tly-side-meta { margin-top: 1px; color: var(--tly-muted); font-size: var(--tly-text-xs); font-weight: var(--tly-weight); }
.tly-side-empty { margin: var(--tly-space-1) var(--tly-space-2) var(--tly-space-2); color: var(--tly-muted); font-size: var(--tly-text-sm); }
.tly-side-foot { flex: none; padding: var(--tly-space-2) var(--tly-space-3) var(--tly-space-3); border-top: 1px solid var(--tly-line); }
.tly-side-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--tly-space-1); margin-top: 2px; }
.tly-mobilebar, .tly-side-backdrop, .tly-side-head .tly-drawer-close { display: none; }

.tly-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tly-space-2); min-width: var(--tly-ctl); height: var(--tly-ctl); padding: 0 var(--tly-space-2); border: 0; border-radius: var(--tly-radius); background: transparent; color: var(--tly-ink-2); font: var(--tly-weight-medium) var(--tly-text-sm) var(--tly-font); cursor: pointer; }
.tly-icon-btn:hover { background: var(--tly-hover); color: var(--tly-ink); }
.tly-ico { width: 18px; height: 18px; display: block; flex: none; }
.tly-theme-btn .tly-ico { display: none; }
.tly-theme-light .tly-theme-btn .tly-ico-light, .tly-theme-dark .tly-theme-btn .tly-ico-dark, .tly-theme-system .tly-theme-btn .tly-ico-system { display: block; }
.tly-theme-btn .tly-side-text { flex: none; }

.tly-theme { position: relative; }
.tly-menu { position: absolute; z-index: 101; min-width: 150px; margin: 0; padding: var(--tly-space-1); list-style: none; background: var(--tly-surface); border-radius: var(--tly-radius); box-shadow: var(--tly-shadow-pop); }
.tly-theme[data-placement=above] .tly-menu { left: 0; bottom: calc(100% + 6px); }
.tly-theme[data-placement=below] .tly-menu { right: 0; top: calc(100% + 6px); }
.tly-menu li { margin: 0; }
.tly-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--tly-space-3); width: 100%; padding: var(--tly-space-2) var(--tly-space-3); border: 0; border-radius: var(--tly-radius-sm); background: none; color: var(--tly-ink-2); font: var(--tly-weight-medium) var(--tly-text-sm)/var(--tly-leading-tight) var(--tly-font); text-align: left; cursor: pointer; }
.tly-menu button:hover, .tly-menu button:focus-visible { background: var(--tly-hover); color: var(--tly-ink); outline: none; }
.tly-menu button[aria-checked=true] { color: var(--tly-ink); }
.tly-menu button[aria-checked=true]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tly-accent-mark); }

/* collapsed rail (desktop) */
@media (min-width: 783px) {
	.tly-side-collapsed .tly-side-head { justify-content: center; padding: 0; }
	.tly-side-collapsed .tly-brand-link { flex: none; }
	.tly-side-collapsed .tly-brand-name,
	.tly-side-collapsed .tly-side .tly-side-text,
	.tly-side-collapsed .tly-side-filter,
	.tly-side-collapsed .tly-side-empty,
	.tly-side-collapsed .tly-side-label span { display: none; }
	.tly-side-collapsed .tly-brand-logo { max-width: 36px; height: 28px; object-position: center; }
	.tly-side-collapsed .tly-side-body { padding: var(--tly-space-3) var(--tly-space-3); }
	.tly-side-collapsed .tly-side-label { height: 1px; margin: 0 var(--tly-space-2) var(--tly-space-3); padding: 0; background: var(--tly-line); }
	.tly-side-collapsed .tly-side-group:first-child .tly-side-label { display: none; }
	.tly-side-collapsed .tly-side-item { justify-content: center; padding: var(--tly-space-1) 0; }
	.tly-side-collapsed .tly-side-foot { padding: var(--tly-space-2) var(--tly-space-3) var(--tly-space-3); }
	.tly-side-collapsed .tly-side-tools { flex-direction: column; }
	.tly-side-collapsed .tly-theme[data-placement=above] .tly-menu { left: calc(100% + 10px); bottom: 0; }
	.tly-side-collapsed .tly-collapse-btn .tly-ico { transform: scaleX(-1); }
}

/* header layout (single report) */
.tly-topbar { position: sticky; top: 32px; z-index: 99; display: flex; align-items: center; justify-content: space-between; gap: var(--tly-space-4); height: var(--tly-bar-h); padding: 0 var(--tly-gutter); background: var(--tly-surface); box-shadow: var(--tly-shadow-bar); font-family: var(--tly-font); }
.tly-topbar .tly-brand-link { flex: 0 1 auto; }

/* phones: drawer */
@media (max-width: 782px) {
	body.tly-layout-sidebar #wpbody { padding-left: 0; }
	body.tly-layout-sidebar #wpfooter { padding-left: var(--tly-gutter); }
	.tly-mobilebar { position: sticky; top: 46px; z-index: 99; display: flex; align-items: center; gap: var(--tly-space-2); height: 52px; padding: 0 var(--tly-space-2); background: var(--tly-surface); border-bottom: 1px solid var(--tly-line); font-family: var(--tly-font); }
	.tly-mobilebar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tly-ink); font-weight: var(--tly-weight-semibold); font-size: var(--tly-text-md); }
	.tly-side { top: 0; left: 0; z-index: 100001; width: min(300px, 86vw); transform: translateX(-105%); transition: transform .2s var(--tly-ease); box-shadow: none; }
	body.tly-drawer-open .tly-side { transform: none; box-shadow: var(--tly-shadow-pop); }
	body.tly-drawer-open .tly-side-backdrop { display: block; position: fixed; inset: 0; z-index: 100000; background: var(--tly-overlay); }
	body.tly-drawer-open { overflow: hidden; }
	.tly-side-head .tly-drawer-close { display: inline-flex; flex: none; }
	.tly-topbar { top: 46px; }
	.tly-side-item { min-height: 44px; }
}
@media (max-width: 600px) {
	/* Core's mobile toolbar is absolute; place our bar below it initially, then
	 * let it stick to the window after the toolbar has scrolled out of view. */
	.tly-mobilebar, .tly-topbar { top: 0; }
	body.tly-shell #wpcontent { padding-top: 48px; }
	body.tly-shell #wpbody { padding-top: 0; }
}

/* right-to-left */
body.rtl .tly-side { left: auto; right: var(--tly-menu-w); border-right: 0; border-left: 1px solid var(--tly-line); }
body.rtl.tly-layout-sidebar #wpbody { padding-left: 0; padding-right: var(--tly-side-w); }
body.rtl.tly-layout-sidebar #wpfooter { padding-left: var(--tly-gutter); padding-right: calc(var(--tly-side-w) + var(--tly-gutter)); }
body.rtl .tly-side-filter .tly-ico { left: auto; right: 10px; }
body.rtl.tly-shell .tly-side-filter input { padding: 0 var(--tly-space-8) 0 var(--tly-space-3); }
body.rtl .tly-alert-dot { right: auto; left: 2px; }
body.rtl .tly-theme[data-placement=above] .tly-menu { left: auto; right: 0; }
body.rtl .tly-collapse-btn .tly-ico { transform: scaleX(-1); }
@media (min-width: 783px) { body.rtl.tly-side-collapsed .tly-collapse-btn .tly-ico { transform: none; } body.rtl.tly-side-collapsed .tly-theme[data-placement=above] .tly-menu { right: calc(100% + 10px); left: auto; } }
@media (max-width: 782px) {
	body.rtl.tly-layout-sidebar #wpbody { padding-right: 0; }
	body.rtl .tly-side { right: 0; transform: translateX(105%); }
	body.rtl.tly-drawer-open .tly-side { transform: none; }
}

/* Page container + header */
body.tly-shell .wrap { max-width: var(--tly-content-max); margin: 0 auto; padding: var(--tly-space-8) var(--tly-gutter) 0; box-sizing: content-box; }
body.tly-shell .wrap h1,
body.tly-shell .wrap h2,
body.tly-shell .wrap h3 { color: var(--tly-ink); font-family: var(--tly-font); }
.tly-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tly-space-3) var(--tly-space-4); flex-wrap: wrap; min-height: var(--tly-ctl); margin: 0 0 var(--tly-space-5); }
.tly-page-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.tly-shell .wrap .tly-page-head h1 { margin: 0; padding: 0; font-size: var(--tly-text-xl); line-height: 28px; font-weight: var(--tly-weight-semibold); letter-spacing: var(--tly-tracking-tight); }
.tly-page-sub { margin: 0; color: var(--tly-muted); font-size: var(--tly-text-sm); }
.tly-page-actions { display: flex; align-items: center; gap: var(--tly-space-2); flex-wrap: wrap; }
.tly-back { display: inline-flex; align-items: center; gap: var(--tly-space-2); margin: 0 0 var(--tly-space-2); color: var(--tly-muted); font-size: var(--tly-text-sm); font-weight: var(--tly-weight-medium); text-decoration: none; }
body.tly-shell .wrap a.tly-back { color: var(--tly-muted); }
body.tly-shell .wrap a.tly-back:hover { color: var(--tly-ink); }
body.tly-shell .wp-header-end { display: none; }
.tly-app > .tly-page-head { margin-bottom: 0; }

/* Text + links */
body.tly-shell .wrap p,
body.tly-shell .wrap li,
body.tly-shell .wrap td,
body.tly-shell .wrap th,
body.tly-shell .wrap label { font-family: var(--tly-font); }
body.tly-shell .wrap a { color: var(--tly-accent); text-decoration: none; }
body.tly-shell .wrap a:hover { color: var(--tly-accent-hover); text-decoration: underline; }
body.tly-shell .wrap a.button:hover, body.tly-shell .wrap a.tly-btn:hover { text-decoration: none; }
body.tly-shell .wrap a:focus { box-shadow: var(--tly-focus); outline: none; border-radius: var(--tly-radius-sm); }
body.tly-shell .wrap .description, body.tly-shell .wrap p.description { max-width: var(--tly-measure); color: var(--tly-muted); font-size: var(--tly-text-sm); font-style: normal; }
/*
 * Core resets. Each matches the specificity of the core rule it replaces and loads after
 * it (:where() adds nothing), so core no longer decides spacing and any component wins.
 */
:where(body.tly-shell .wrap) p { margin: 0 0 var(--tly-space-3); }
:where(body.tly-shell .wrap) p.description { margin: var(--tly-space-2) 0 0; }
:where(body.tly-shell .wrap) h2 { margin: var(--tly-space-8) 0 var(--tly-space-3); font-size: var(--tly-text-md); line-height: 24px; }
:where(body.tly-shell .wrap) h3 { margin: var(--tly-space-5) 0 var(--tly-space-2); font-size: var(--tly-text-base); line-height: 20px; }
:where(body.tly-shell .wrap) input, :where(body.tly-shell .wrap) select, :where(body.tly-shell .wrap) textarea { margin: 0; }
:where(body.tly-shell .wrap) input[type=checkbox], :where(body.tly-shell .wrap) input[type=radio] { margin: 0; }
body.tly-shell .wrap code { background: var(--tly-subtle); color: var(--tly-ink); border: 1px solid var(--tly-line); border-radius: var(--tly-radius-sm); font-family: var(--tly-font-mono); font-size: var(--tly-text-xs); padding: 2px var(--tly-space-2); }
body.tly-shell .wrap hr { border: 0; border-top: 1px solid var(--tly-line); }

/* Buttons */
body.tly-shell .wrap .button,
body.tly-shell .wrap .page-title-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--tly-space-2); min-height: var(--tly-ctl); height: auto; margin: 0; padding: 0 var(--tly-space-4); border: 1px solid var(--tly-line-strong); border-radius: var(--tly-radius); background: var(--tly-surface); color: var(--tly-ink); font: var(--tly-weight-medium) var(--tly-text-sm)/var(--tly-leading-tight) var(--tly-font); letter-spacing: var(--tly-tracking); text-shadow: none; box-shadow: var(--tly-shadow-xs); vertical-align: middle; transition: background-color var(--tly-dur) var(--tly-ease), border-color var(--tly-dur) var(--tly-ease); top: 0; }
body.tly-shell .wrap .button:hover,
body.tly-shell .wrap .page-title-action:hover { background: var(--tly-hover); border-color: var(--tly-line-strong); color: var(--tly-ink); }
body.tly-shell .wrap .button:focus,
body.tly-shell .wrap .page-title-action:focus { box-shadow: var(--tly-focus); outline: none; border-color: var(--tly-accent); }
body.tly-shell .wrap .button-primary,
body.tly-shell .wrap .page-title-action { background: var(--tly-primary); border-color: var(--tly-primary); color: var(--tly-on-primary); }
body.tly-shell .wrap .button-primary:hover,
body.tly-shell .wrap .page-title-action:hover { background: var(--tly-primary-hover); border-color: var(--tly-primary-hover); color: var(--tly-on-primary); }
body.tly-shell .wrap .button-small { min-height: var(--tly-ctl-sm); padding: 0 var(--tly-space-3); font-size: var(--tly-text-xs); }
body.tly-shell .wrap .button-link,
body.tly-shell .wrap .button-link-delete { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--tly-accent); font-weight: var(--tly-weight-medium); }
body.tly-shell .wrap .button-link-delete,
body.tly-shell .wrap a.submitdelete,
body.tly-shell .wrap .tly-danger-link { color: var(--tly-bad-ink); }
body.tly-shell .wrap .button-link:hover,
body.tly-shell .wrap .button-link-delete:hover { background: none; text-decoration: underline; }
body.tly-shell .wrap .button[disabled],
body.tly-shell .wrap .button:disabled { opacity: .55; background: var(--tly-surface) !important; color: var(--tly-muted) !important; border-color: var(--tly-line) !important; }
body.tly-shell .wrap .button .dashicons { line-height: var(--tly-leading-none); }

/* Fields */
body.tly-shell .wrap input[type=text],
body.tly-shell .wrap input[type=email],
body.tly-shell .wrap input[type=url],
body.tly-shell .wrap input[type=search],
body.tly-shell .wrap input[type=number],
body.tly-shell .wrap input[type=password],
body.tly-shell .wrap input[type=date],
body.tly-shell .wrap select,
body.tly-shell .wrap textarea { min-height: var(--tly-ctl); padding: 0 var(--tly-space-3); border: 1px solid var(--tly-line-input); border-radius: var(--tly-radius); background-color: var(--tly-surface); color: var(--tly-ink); font: var(--tly-text-base) var(--tly-font); box-shadow: var(--tly-shadow-xs); transition: border-color var(--tly-dur) var(--tly-ease), box-shadow var(--tly-dur) var(--tly-ease); }
body.tly-shell .wrap textarea { padding: var(--tly-space-2) var(--tly-space-3); line-height: var(--tly-leading); }
body.tly-shell .wrap select { padding-right: var(--tly-space-8); line-height: var(--tly-leading-tight); }
body.tly-shell .wrap input:hover,
body.tly-shell .wrap select:hover,
body.tly-shell .wrap textarea:hover { border-color: var(--tly-ink-2); color: var(--tly-ink); }
body.tly-shell .wrap input:focus,
body.tly-shell .wrap select:focus,
body.tly-shell .wrap textarea:focus { border-color: var(--tly-accent); box-shadow: var(--tly-focus); outline: none; }
body.tly-shell .wrap input::placeholder,
body.tly-shell .wrap textarea::placeholder { color: var(--tly-muted); opacity: 1; }
body.tly-shell .wrap input[type=checkbox],
body.tly-shell .wrap input[type=radio] { accent-color: var(--tly-primary); border-color: var(--tly-line-input); background: var(--tly-surface); box-shadow: none; }
body.tly-shell .wrap input[type=checkbox]:focus,
body.tly-shell .wrap input[type=radio]:focus { box-shadow: var(--tly-focus); border-color: var(--tly-accent); }
body.tly-shell .wrap input[type=checkbox]:checked { background: var(--tly-primary); border-color: var(--tly-primary); }
body.tly-shell .wrap 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"); }
body.tly-shell.tly-theme-dark .wrap input[type=checkbox]:checked::before { filter: invert(1); }
@media (prefers-color-scheme: dark) {
	body.tly-shell.tly-theme-system .wrap input[type=checkbox]:checked::before { filter: invert(1); }
}
body.tly-shell .wrap input[type=radio]:checked::before { background: var(--tly-primary); }
body.tly-shell .wrap .regular-text { width: 100%; max-width: 25em; }
body.tly-shell .wrap .large-text { width: 100%; max-width: 640px; }

/* WordPress form tables */
body.tly-shell .wrap .form-table { margin-top: 0; }
/* Labels centre on a 36px control: 12px cell padding + 18px = 20px label padding + half of a 20px line. */
body.tly-shell .wrap .form-table th { width: var(--tly-label-col); padding: var(--tly-space-5) var(--tly-space-5) var(--tly-space-3) 0; color: var(--tly-ink); font-weight: var(--tly-weight-medium); font-size: var(--tly-text-sm); line-height: 20px; }
/* Rows that start with a checkbox or text line up with its first line instead. */
body.tly-shell .wrap .form-table tr:has(> td > :is(label.tly-check, fieldset, p:not(.tly-slack-state), .tly-sub):first-child) > th { padding-top: var(--tly-space-3); }
body.tly-shell .wrap .form-table td { padding: var(--tly-space-3) 0; color: var(--tly-ink-2); font-size: var(--tly-text-base); }
:where(body.tly-shell .wrap) .form-table td p { margin: var(--tly-space-2) 0 0; font-size: inherit; }
:where(body.tly-shell .wrap) .form-table td > :first-child { margin-top: 0; }
:where(body.tly-shell .wrap) .form-table td fieldset label { margin: 0 var(--tly-space-4) var(--tly-space-2) 0 !important; line-height: var(--tly-leading); }
body.tly-shell .wrap .form-table tr + tr th,
body.tly-shell .wrap .form-table tr + tr td { border-top: 1px solid var(--tly-line); }

/* Cards */
.tly-card-ui,
body.tly-shell .wrap .tly-panel { background: var(--tly-surface); border: 1px solid var(--tly-line); border-radius: var(--tly-radius); box-shadow: var(--tly-shadow-xs); }
body.tly-shell .wrap .tly-panel { margin: 0 0 var(--tly-space-5); padding: 0 var(--tly-space-5) var(--tly-space-3); }
body.tly-shell .wrap .tly-panel > h2:first-child { display: flex; align-items: center; gap: var(--tly-space-2); margin: 0 calc(-1 * var(--tly-space-5)) var(--tly-space-3); padding: var(--tly-space-4) var(--tly-space-5); border-bottom: 1px solid var(--tly-line); font-size: var(--tly-text-md); font-weight: var(--tly-weight-semibold); line-height: 24px; }
body.tly-shell .wrap .tly-panel > h2:first-child + .description { margin-top: 0; }
body.tly-shell .wrap .tly-panel h3 { font-size: var(--tly-text-base); font-weight: var(--tly-weight-semibold); }

/* Notices */
body.tly-shell .wrap .notice,
body.tly-shell .wrap div.updated,
body.tly-shell .wrap div.error,
body.tly-shell #wpbody-content > .notice { margin: 0 0 var(--tly-space-4); padding: var(--tly-space-3) var(--tly-space-4); border: 1px solid var(--tly-line); border-left-width: 4px; border-radius: var(--tly-radius); background: var(--tly-surface); color: var(--tly-ink-2); box-shadow: var(--tly-shadow-xs); }
body.tly-shell #wpbody-content > .notice { margin-left: var(--tly-gutter); margin-right: var(--tly-gutter); }
body.tly-shell .wrap .notice p { margin: var(--tly-space-1) 0; padding: 0; font-size: var(--tly-text-sm); }
body.tly-shell .notice-success, body.tly-shell div.updated { border-left-color: var(--tly-good) !important; }
body.tly-shell .notice-error, body.tly-shell div.error { border-left-color: var(--tly-bad) !important; }
body.tly-shell .notice-warning { border-left-color: var(--tly-warn) !important; }
body.tly-shell .notice-info { border-left-color: var(--tly-accent) !important; }
body.tly-shell .notice.inline { margin: var(--tly-space-2) 0; }
body.tly-shell .notice-dismiss::before { color: var(--tly-muted); }
body.tly-shell .wrap .notice a,
body.tly-shell #wpbody-content > .notice a { color: var(--tly-accent); }

/* List tables */
body.tly-shell .wrap .wp-list-table { border: 1px solid var(--tly-line); border-radius: var(--tly-radius); border-spacing: 0; border-collapse: separate; overflow: hidden; background: var(--tly-surface); box-shadow: var(--tly-shadow-xs); }
/* A table inside a panel is already framed by the panel: keep only the header rule and row dividers. */
@media (min-width: 783px) { body.tly-shell .wrap .tly-panel .wp-list-table { border-width: 1px 0 0; border-radius: 0; } }
body.tly-shell .wrap .wp-list-table thead th,
body.tly-shell .wrap .wp-list-table thead td { padding: var(--tly-space-3) var(--tly-space-4); background: var(--tly-subtle); border-bottom: 1px solid var(--tly-line); color: var(--tly-muted); font-size: var(--tly-text-xs); font-weight: var(--tly-weight-medium); line-height: var(--tly-leading-snug); letter-spacing: .02em; }
body.tly-shell .wrap .wp-list-table td,
body.tly-shell .wrap .wp-list-table th.check-column,
body.tly-shell .wrap .wp-list-table tbody th { padding: var(--tly-space-4) var(--tly-space-4); border-bottom: 1px solid var(--tly-line); color: var(--tly-ink-2); font-size: var(--tly-text-sm); line-height: var(--tly-leading); background: var(--tly-surface); box-shadow: none; }
body.tly-shell .wrap .wp-list-table tbody tr:last-child td,
body.tly-shell .wrap .wp-list-table tbody tr:last-child th { border-bottom: 0; }
body.tly-shell .wrap .wp-list-table tbody tr:hover td,
body.tly-shell .wrap .wp-list-table tbody tr:hover th { background: var(--tly-hover); }
body.tly-shell .wrap .wp-list-table.striped > tbody > :nth-child(odd) { background: transparent; }
body.tly-shell .wrap .wp-list-table tfoot { display: none; }
body.tly-shell .wrap .wp-list-table .row-title,
body.tly-shell .wrap .wp-list-table strong { color: var(--tly-ink); font-weight: var(--tly-weight-semibold); }
body.tly-shell .wrap .wp-list-table a.row-title { text-decoration: none; }
body.tly-shell .wrap .row-actions { color: var(--tly-muted); }
body.tly-shell .wrap .widefat { border-color: var(--tly-line); background: var(--tly-surface); color: var(--tly-ink-2); box-shadow: none; }
body.tly-shell .wrap .widefat th, body.tly-shell .wrap .widefat td { color: var(--tly-ink-2); line-height: var(--tly-leading); }
/* Core paints these for a white page; follow the theme instead. */
body.tly-shell .wrap .widefat :is(p, ol, ul) { color: inherit; }
body.tly-shell .wrap .widefat.striped:not(.wp-list-table) > tbody > :nth-child(odd) { background: var(--tly-subtle); }
body.tly-shell .wrap .widefat thead th, body.tly-shell .wrap .widefat tbody th { color: var(--tly-ink); }
body.tly-shell .wrap .subsubsub, body.tly-shell .wrap .subsubsub .count { color: var(--tly-muted); }

/* Media modal stays WordPress-styled */
body.tly-shell .media-modal input, body.tly-shell .media-modal select { font-family: inherit; }

@media (max-width: 782px) {
	body.tly-shell .wrap { padding-top: var(--tly-space-5); }
	body.tly-shell .wrap .form-table th,
	body.tly-shell .wrap .form-table td { display: block; width: auto; }
	body.tly-shell .wrap .form-table th { padding: var(--tly-space-4) 0 var(--tly-space-1); }
	body.tly-shell .wrap .form-table td { margin: 0; padding: 0 0 var(--tly-space-3); }
	body.tly-shell .wrap .form-table tr + tr td { border-top: 0; }
	/* Touch size: buttons and fields share the large control height on phones. */
	body.tly-shell .wrap .button { min-height: var(--tly-ctl-lg); }
	body.tly-shell .wrap :is(input[type=text], input[type=email], input[type=url], input[type=search], input[type=number], input[type=password], input[type=date], select) { min-height: var(--tly-ctl-lg); }
}
@media (prefers-reduced-motion: reduce) {
	body.tly-shell * { transition: none !important; }
}

/* fieldsets carry no chrome of their own */
body.tly-shell .wrap fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }