/*
 * Account surfaces — artboard 13 (`/account/`), the sign-in page, and the
 * shell the phase 8 organization console will build on.
 *
 * Roadmap #56 phase 7. Loaded only on those pages (see
 * ltsq_enqueue_account_styles), because every selector here is scoped to a
 * class that appears nowhere else on the site.
 *
 * Everything comes from the tokens in ltsq-tokens.css. If a hex appears below
 * it is either a status colour the design defines only here, or the amber
 * "in review" trio that orgState.ts introduced and that this file mirrors so
 * the web and the app describe an organization's standing identically.
 */

/* --------------------------------------------------------------------------
 * Shell
 * ------------------------------------------------------------------------ */

/*
 * Side gutter inside the wrapper: these are Divi full-width builder pages with
 * nothing else padding them, so below ~1290px the content ran to the viewport
 * edge (review §5.2: Contact, Organization, Compose, Account at 390px). The
 * wider max-width keeps the content at x=100 at 1440.
 */
.ltsq-account {
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin: 0 auto;
	padding-inline: var(--lts-gutter);
	box-sizing: border-box;
}

/* Signed out (the sign-in prompt and the browser-saved list, issue #333):
   no title band above it, so it needs its own room. */
.ltsq-account--signedout { padding-block: 32px 48px; }
.ltsq-account--signedout .ltsq-account__cards { margin-top: 24px; }
/* A link inside a sentence is underlined, not told apart by colour alone (WCAG 1.4.1). */
.ltsq-signup__signin a { text-decoration: underline; }

.ltsq-account__band {
	border-bottom: var(--lts-rule-section);
	padding: var(--lts-space-5) 0 var(--lts-space-4);
}

.ltsq-account__kicker {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-account__title {
	margin: 10px 0 0;
	font-family: var(--lts-font-display);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lts-ink);
}

.ltsq-account__lede {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-dek);
	max-width: 66ch;
}

.ltsq-account__pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.ltsq-account__pill {
	border: 1px solid var(--lts-border);
	color: var(--lts-text-muted);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 4px 9px;
}

.ltsq-account__pill--on {
	background: var(--lts-teal);
	border-color: var(--lts-teal);
	color: #fff;
}

.ltsq-account__grid {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 0 36px;
	padding: 26px 0 44px;
}

.ltsq-account__nav,
.ltsq-account__main { min-width: 0; }

/* --------------------------------------------------------------------------
 * Left nav
 * ------------------------------------------------------------------------ */

.ltsq-account__menuitem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-bottom: 1px solid var(--lts-border);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	font-weight: 600;
	line-height: 1.4;
	color: var(--lts-ink) !important;
	text-decoration: none;
	transition: background var(--lts-transition);
}

.ltsq-account__menuitem .ltsq-icon { color: var(--lts-text-muted); }

.ltsq-account__menuitem:hover,
.ltsq-account__menuitem:focus { background: var(--lts-surface); }

.ltsq-account__menuitem.is-current {
	background: var(--lts-ink);
	border-bottom-color: var(--lts-ink);
	color: #fff !important;
	font-weight: 700;
}

.ltsq-account__menuitem.is-current .ltsq-icon { color: #fff; }

/* Last item has no rule under it — the nav ends, it does not continue. */
.ltsq-account__menuitem:last-child { border-bottom: 0; }

.ltsq-account__count {
	margin-left: auto;
	background: var(--lts-teal);
	color: #fff;
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	padding: 2px 7px;
	line-height: 1.5;
}

.ltsq-account__menuitem.is-current .ltsq-account__count {
	background: #fff;
	color: var(--lts-ink);
}

/* --------------------------------------------------------------------------
 * Badges panel
 * ------------------------------------------------------------------------ */

.ltsq-account__nav .ltsq-panel { margin-top: var(--lts-space-4); }

.ltsq-account__badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/*
 * Unearned rungs are shown, not hidden — the ladder is the feature, and a
 * milestone you cannot see coming is not a milestone. Rendered as an outline
 * rather than a dimmed fill so it reads as "not yet" rather than "broken".
 */
.ltsq-account__badge {
	border: 1px dashed var(--lts-border);
	color: var(--lts-text-muted);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 4px 8px;
}

.ltsq-account__badge.is-earned {
	background: var(--lts-teal);
	border: 1px solid var(--lts-teal);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Filter chips
 * ------------------------------------------------------------------------ */

.ltsq-account__chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 18px;
}

.ltsq-account__chip {
	background: #fff;
	border: 1px solid var(--lts-border);
	color: var(--lts-text-muted) !important;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 600;
	line-height: 1.4;
	padding: 8px 14px;
	text-decoration: none;
	transition: border-color var(--lts-transition);
}

.ltsq-account__chip:hover,
.ltsq-account__chip:focus { border-color: var(--lts-teal); }

.ltsq-account__chip.is-current {
	background: var(--lts-ink);
	border-color: var(--lts-ink);
	color: #fff !important;
}

.ltsq-account__chipcount { opacity: .75; }

.ltsq-account__chipspacer { flex: 1; }

/* --------------------------------------------------------------------------
 * Submission cards
 *
 * The left border is the STATUS colour, not the stream colour — see
 * ltsq_account_submission_card_html() for why this one surface inverts the
 * site's rule. A published card falls through to --lts-stream, which its
 * data-stream attribute has already rebound.
 * ------------------------------------------------------------------------ */

.ltsq-account__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ltsq-account__cards {
	display: flex;
	flex-direction: column;
	gap: var(--lts-space-3);
}

.ltsq-subcard {
	border: 1px solid var(--lts-border);
	border-left: 4px solid var(--lts-stream);
	background: var(--lts-surface);
	padding: 16px 18px;
}

.ltsq-subcard[data-state="needs_revision"] { border-left-color: var(--lts-sev-important); }
.ltsq-subcard[data-state="under_review"]   { border-left-color: var(--lts-notice); }

.ltsq-subcard__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ltsq-subcard__status {
	background: var(--lts-stream);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 3px 8px;
}

.ltsq-subcard[data-state="needs_revision"] .ltsq-subcard__status { background: var(--lts-sev-important); }
.ltsq-subcard[data-state="under_review"] .ltsq-subcard__status   { background: var(--lts-notice); }

/*
 * The amber "being reviewed" trio, and the muted "paused" treatment. Lifted
 * from orgState.ts's orgStatusPill() so an organization's standing reads the
 * same on the website as in the app — three states that people persistently
 * try to conflate, and none of which ever says "official".
 */
.ltsq-subcard__status--review {
	background: #FBF8EE;
	border: 1px solid #E8DFC0;
	color: #8A6D00;
}

.ltsq-subcard__status--muted {
	background: var(--lts-surface);
	border: 1px solid var(--lts-border);
	color: var(--lts-text-muted);
}

.ltsq-subcard__meta {
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--lts-text-muted);
}

.ltsq-subcard__title {
	margin: 10px 0 6px;
	font-family: var(--lts-font-ui);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lts-ink);
}

.ltsq-subcard__title a { color: var(--lts-ink) !important; text-decoration: none; }
.ltsq-subcard__title a:hover { color: var(--lts-stream-text) !important; }

.ltsq-subcard__body {
	margin: 0 0 8px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-muted);
}

.ltsq-subcard__link {
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lts-stream-text) !important;
	text-decoration: none;
}

.ltsq-subcard__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
 * The review-feedback panel
 *
 * A required compensating control (CLAUDE.md, 2026-08-27). Given a white ground
 * inside the tinted card and its own amber rule, so it reads as a quoted
 * message from someone rather than as more of the card's own furniture.
 * ------------------------------------------------------------------------ */

.ltsq-feedback {
	border: 1px solid var(--lts-border);
	border-left: 3px solid var(--lts-notice);
	background: #fff;
	padding: 12px 14px;
	margin-top: 6px;
}

.ltsq-feedback__kicker {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-feedback__body {
	margin: 6px 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-dek);
}

/* --------------------------------------------------------------------------
 * Resubmit disclosure
 *
 * <details>/<summary> so the form is one click away with no JavaScript. The
 * summary is styled as the primary button the artboard draws; the marker is
 * removed because a disclosure triangle next to a button label reads as a
 * dropdown, which this is not.
 * ------------------------------------------------------------------------ */

/* Both action forms sit in the flex row rather than each starting a block. */
.ltsq-resubmit-form,
.ltsq-discard-form { margin: 0; }

.ltsq-resubmit-form { flex: 0 1 auto; }

.ltsq-resubmit { display: inline-block; }

.ltsq-resubmit > summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	list-style: none;
}

.ltsq-resubmit > summary::-webkit-details-marker { display: none; }
.ltsq-resubmit > summary::marker { content: ""; }

.ltsq-resubmit[open] {
	display: block;
	width: 100%;
	margin-top: 4px;
}

.ltsq-resubmit[open] > summary { margin-bottom: var(--lts-space-3); }

/* --------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------ */

.ltsq-field {
	display: block;
	margin: 0 0 var(--lts-space-2);
	max-width: 60ch;
}

.ltsq-field__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-label);
	font-weight: 700;
	color: var(--lts-ink);
}

.ltsq-field__input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	background: #fff;
	padding: 10px 12px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-input);
	line-height: 1.5;
	color: var(--lts-ink);
}

.ltsq-field__input:focus {
	outline: 2px solid var(--lts-teal);
	outline-offset: -2px;
	border-color: var(--lts-teal);
}

.ltsq-field__help {
	margin: 0 0 var(--lts-space-3);
	max-width: 60ch;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--lts-text-muted);
}

.ltsq-account__form { margin-bottom: var(--lts-space-4); }

/* --------------------------------------------------------------------------
 * Notices and empty states
 * ------------------------------------------------------------------------ */

.ltsq-account__notice {
	border: 1px solid var(--lts-border);
	border-left: 4px solid var(--lts-teal);
	background: var(--lts-surface);
	padding: 12px 16px;
	margin: var(--lts-space-3) 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	color: var(--lts-ink);
}

.ltsq-account__notice.is-error {
	border-left-color: var(--lts-alert);
	color: var(--lts-alert);
}

.ltsq-empty {
	border: 1px dashed var(--lts-border);
	background: var(--lts-surface);
	padding: var(--lts-space-5) var(--lts-space-4);
	text-align: center;
}

.ltsq-empty__title {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-empty__body {
	margin: var(--lts-space-2) auto 0;
	max-width: 52ch;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Sign-in
 *
 * The markup is wp_login_form()'s — core's own, posting to wp-login.php with
 * core's nonce and rate limiting. Only the styling is ours, which is why every
 * selector below is one of WordPress's class names rather than one of ours.
 * ------------------------------------------------------------------------ */

.ltsq-signin {
	max-width: calc(460px + (var(--lts-gutter) * 2));
	margin: 0 auto;
	padding: var(--lts-space-5) var(--lts-gutter) var(--lts-space-5);
	box-sizing: border-box;
}

#ltsq-login { margin-top: var(--lts-space-4); }

#ltsq-login p { margin: 0 0 var(--lts-space-3); }

#ltsq-login label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-label);
	font-weight: 700;
	color: var(--lts-ink);
}

#ltsq-login input[type="text"],
#ltsq-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	background: #fff;
	padding: 11px 12px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-input);
	color: var(--lts-ink);
}

#ltsq-login input:focus {
	outline: 2px solid var(--lts-teal);
	outline-offset: -2px;
	border-color: var(--lts-teal);
}

#ltsq-login .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--lts-text-muted);
}

#ltsq-login .login-remember input { width: auto; }

#ltsq-login .login-submit input[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: var(--lts-radius);
	background: var(--lts-teal);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-button);
	font-weight: 700;
	padding: 12px 16px;
	cursor: pointer;
}

#ltsq-login .login-submit input[type="submit"]:hover { background: var(--lts-teal-pressed); }

.ltsq-signin__links {
	margin-top: var(--lts-space-3);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * 390px
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	/*
	 * A flex column with explicit order, not a one-column grid.
	 *
	 * The nav and the badges panel are both inside the <aside>, so stacking the
	 * grid put BADGES above the submissions the reader opened the page to see.
	 * `display: contents` on the aside dissolves it for layout only — its two
	 * children become direct flex items — and order puts them where they belong
	 * without changing the markup or the desktop grid.
	 */
	.ltsq-account__grid {
		display: flex;
		flex-direction: column;
		gap: var(--lts-space-4) 0;
	}

	.ltsq-account__nav { display: contents; }

	.ltsq-account__menu { order: 1; }
	.ltsq-account__main { order: 2; }
	.ltsq-account__nav .ltsq-panel { order: 3; margin-top: 0; }

	.ltsq-account__title { font-size: 30px; }

	/* The nav becomes a scrolling strip, matching what screen 21 does to the
	 * site nav. */
	.ltsq-account__menu {
		display: flex;
		overflow-x: auto;
		border-bottom: 1px solid var(--lts-border);
	}

	.ltsq-account__menuitem {
		flex: none;
		border-bottom: 0;
		white-space: nowrap;
		min-height: 44px;
	}

	.ltsq-account__chip,
	.ltsq-subcard__actions .ltsq-btn { min-height: 44px; display: inline-flex; align-items: center; }

}

/* --------------------------------------------------------------------------
 * The organization console — artboards 19 and 20 (phase 8)
 *
 * Builds on the account shell above: same grid, same nav, same panels, same
 * subcards. Only what is genuinely new to these two screens is below.
 * ------------------------------------------------------------------------ */

.ltsq-orgconsole__band {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.ltsq-orgconsole__bandtext { flex: 1; min-width: 280px; }

.ltsq-orgtile {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	background: var(--lts-directory);
	color: #fff;
	font-family: var(--lts-font-display);
	font-size: 26px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ltsq-orgconsole .ltsq-account__title {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: 36px;
}

.ltsq-orgconsole__verified { display: inline-flex; color: var(--lts-teal); }
.ltsq-orgconsole__verified .ltsq-icon { color: var(--lts-teal); }

/*
 * TRUSTED PUBLISHER is the Developing Story blue, not the teal of VERIFIED.
 * Two different claims — one about identity, one about what the platform lets
 * you do — and giving them the same colour is how they get conflated.
 */
.ltsq-account__pill--trusted {
	background: var(--lts-story);
	border-color: var(--lts-story);
	color: #fff;
}

.ltsq-orgconsole__navcount {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--lts-text-muted);
}

.ltsq-account__menuitem.is-current .ltsq-orgconsole__navcount { color: rgba(255, 255, 255, .75); }

/* --------------------------------------------------------------------------
 * Stat cells
 * ------------------------------------------------------------------------ */

.ltsq-orgconsole__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 26px;
}

.ltsq-orgstat {
	border: 1px solid var(--lts-border);
	border-top: 3px solid var(--lts-stream);
	padding: 14px;
}

.ltsq-orgstat__n {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lts-ink);
}

.ltsq-orgstat__label {
	margin: 4px 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------ */

/* The trusted-publishing explainer. Blue left rule, matching the TRUSTED
 * PUBLISHER badge, so the badge and the sentence explaining it read as one
 * thing. */
.ltsq-panel--trusted {
	border-left: 4px solid var(--lts-story);
	background: var(--lts-surface);
}

.ltsq-panel--trusted .ltsq-panel__title .ltsq-icon { color: var(--lts-story); }

/* Panels 2 and 3 of the composer rail carry no stream accent at all: they are
 * statements about the platform's rules rather than about a content type. */
.ltsq-panel--plain { border-left: 1px solid var(--lts-border); background: #fff; }

.ltsq-panel__title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ltsq-panel__list {
	margin: 0;
	padding-left: 18px;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--lts-text-muted);
}

.ltsq-orgconsole__sechead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.ltsq-orgconsole__sechead .ltsq-sechead__title { flex: 1; margin: 0; }

.ltsq-sechead__title--ruled {
	margin-top: 32px;
	padding-bottom: 10px;
	border-bottom: var(--lts-rule-section);
}

/* --------------------------------------------------------------------------
 * Activity table
 * ------------------------------------------------------------------------ */

/* Its own scroll container, never the page's — the E2E contract and the
 * responsive pass both require that the body never scrolls horizontally. */
.ltsq-orgtable__scroll { overflow-x: auto; }

.ltsq-orgtable {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
}

.ltsq-orgtable thead tr { border-bottom: var(--lts-rule-section); }

.ltsq-orgtable th {
	text-align: left;
	padding: 10px 12px;
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-orgtable td { padding: 13px 12px; }
.ltsq-orgtable tbody tr { border-bottom: 1px solid var(--lts-border); }
.ltsq-orgtable tbody tr:last-child { border-bottom: 0; }

.ltsq-orgtable th:first-child,
.ltsq-orgtable td:first-child { padding-left: 0; }

.ltsq-orgtable th:last-child,
.ltsq-orgtable td:last-child { padding-right: 0; }

.ltsq-orgtable__item { font-weight: 600; color: var(--lts-ink); }
.ltsq-orgtable__muted { color: var(--lts-text-muted); }

.ltsq-orgtable__type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--lts-fs-meta);
	color: var(--lts-text-muted);
	white-space: nowrap;
}

.ltsq-orgtable__swatch,
.ltsq-orgcompose__swatch {
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--lts-stream);
}

/* --------------------------------------------------------------------------
 * Status badges
 *
 * PUBLISHED — REVIEW AFTER is the durable skipped-pre-publication-review flag
 * CLAUDE.md's 2026-09-08 exception requires be visible. It gets the Directory
 * green rather than the teal of an ordinary PUBLISHED, because "live, and an
 * editor has not read it yet" is a different fact from "live" and a member
 * scanning the column has to be able to tell them apart at a glance.
 * ------------------------------------------------------------------------ */

.ltsq-orgstatus {
	display: inline-block;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 3px 8px;
	white-space: nowrap;
}

.ltsq-orgstatus--live   { background: var(--lts-teal); color: #fff; }
.ltsq-orgstatus--auto   { background: var(--lts-directory); color: #fff; }
.ltsq-orgstatus--review { background: var(--lts-notice); color: #fff; }

.ltsq-orgstatus--muted {
	background: var(--lts-surface);
	border: 1px solid var(--lts-border);
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Team
 * ------------------------------------------------------------------------ */

.ltsq-orgteam {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.ltsq-orgmember {
	border: 1px solid var(--lts-border);
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ltsq-orgmember__avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	background: var(--lts-teal);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ltsq-orgmember__text { flex: 1; min-width: 0; }

/* Team management on the website (issue #336). */
.ltsq-orgmember__remove { margin: 4px 0 0; }
.ltsq-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lts-font-ui);
	font-size: 13px;
	color: var(--lts-alert);
	text-decoration: underline;
	cursor: pointer;
}
.ltsq-orgmember__remove .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
#ltsq-org-invite { margin-top: 24px; }
.ltsq-orginvite + .ltsq-orginvite { margin-top: 16px; padding-top: 16px; border-top: var(--lts-rule-hairline); }
.ltsq-orginvite__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }

.ltsq-orgmember__name {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 15px;
	font-weight: 700;
	color: var(--lts-ink);
}

.ltsq-orgmember__role {
	margin: 2px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	color: var(--lts-text-muted);
}

.ltsq-orgmember--invite {
	border: 2px dashed var(--lts-border);
	gap: 10px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	font-weight: 700;
	color: var(--lts-ink) !important;
	text-decoration: none;
}

.ltsq-orgmember--invite:hover,
.ltsq-orgmember--invite:focus {
	border-color: var(--lts-teal);
	color: var(--lts-teal) !important;
}

/* --------------------------------------------------------------------------
 * Composer
 * ------------------------------------------------------------------------ */

.ltsq-orgcompose__band {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ltsq-orgcompose__as {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--lts-border);
	background: var(--lts-surface);
	padding: 8px 12px;
}

/* The composer's chip sits on white, not on the charcoal masthead, so the two
 * lines invert from the switcher's. */
.ltsq-identity__kicker--dark { color: var(--lts-text-muted); }

.ltsq-identity__name--dark {
	color: var(--lts-ink);
	display: flex;
	align-items: center;
	gap: 5px;
}

.ltsq-identity__name--dark .ltsq-icon { color: var(--lts-teal); }

.ltsq-orgcompose__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 0 40px;
	padding: 26px 0 44px;
}

.ltsq-orgcompose__main { min-width: 0; }

.ltsq-orgcompose__rail {
	min-width: 0;
	border-left: 2px solid var(--lts-border);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ltsq-orgcompose__rail .ltsq-panel { margin: 0; }

.ltsq-orgcompose__tabs {
	display: flex;
	border-bottom: 1px solid var(--lts-border);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.ltsq-orgcompose__tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	font-weight: 600;
	line-height: 1.4;
	color: var(--lts-text-muted) !important;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.ltsq-orgcompose__tab:first-child { padding-left: 0; }

.ltsq-orgcompose__tab:hover,
.ltsq-orgcompose__tab:focus { color: var(--lts-ink) !important; }

.ltsq-orgcompose__tab.is-current {
	color: var(--lts-ink) !important;
	font-weight: 700;
	border-bottom-color: var(--lts-stream);
}

/*
 * The form is a grid child of .ltsq-orgcompose__grid and so is the rail, but
 * they are wrapped in one <form> so the rail's submit button posts the form's
 * fields. display:contents dissolves the form for layout and leaves the two
 * columns where the grid put them.
 */
.ltsq-orgcompose__form { display: contents; }

.ltsq-orgcompose__main .ltsq-field { max-width: 660px; }

.ltsq-field__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 660px;
}

.ltsq-field__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ltsq-field__row .ltsq-field { max-width: none; }

.ltsq-field__req { color: var(--lts-alert); }

/* A checkbox with its label beside it: all-day and the event categories in
   the organization composer (issue #182). */
.ltsq-field__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 16px 8px 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-input);
	color: var(--lts-ink);
}

fieldset.ltsq-field { border: 0; padding: 0; }

/* "On dates I pick" in the organization composer (issue #183): one row per
   day. The label wraps its input here, so the input takes the full cell. */
.ltsq-orgcompose__dates { max-width: 660px; }
.ltsq-orgcompose__daterow { margin-bottom: 8px; }
.ltsq-orgcompose__daterow .ltsq-field__label .ltsq-field__input { display: block; width: 100%; margin-top: 6px; }
.ltsq-orgcompose__dateremove {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lts-font-ui);
	font-size: 13px;
	color: var(--lts-text-muted);
	text-decoration: underline;
	cursor: pointer;
}
.ltsq-field__error { font-family: var(--lts-font-ui); font-size: 13px; color: var(--lts-alert); }
/* A field a validation error named (issue #334): the colour is not the only signal, the message sits beside it. */
.ltsq-field.is-invalid .ltsq-field__input { border-color: var(--lts-alert); box-shadow: inset 0 0 0 1px var(--lts-alert); }
.ltsq-field.is-invalid .ltsq-field__error { margin: 4px 0 0; font-weight: 600; }

fieldset.ltsq-field legend { padding: 0; }

.ltsq-orgcompose__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ltsq-orgcompose__submit {
	background: var(--lts-stream);
	border: 0;
	color: #fff !important;
	font-family: var(--lts-font-ui);
	font-size: 15px;
	font-weight: 700;
	padding: 14px;
	cursor: pointer;
	text-align: center;
}

.ltsq-orgcompose__actions .ltsq-btn--secondary { text-align: center; }

/* --------------------------------------------------------------------------
 * 390px
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.ltsq-orgconsole__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ltsq-orgteam { grid-template-columns: minmax(0, 1fr); }

	.ltsq-orgconsole .ltsq-account__title { font-size: 28px; }

	.ltsq-orgtile { width: 48px; height: 48px; flex: 0 0 48px; font-size: 20px; }

	/* The rail goes under the form and loses its left rule — a 2px vertical
	 * line across the full width of a phone reads as a broken border rather
	 * than as a column edge. */
	.ltsq-orgcompose__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lts-space-4) 0;
	}

	.ltsq-orgcompose__rail {
		border-left: 0;
		border-top: 2px solid var(--lts-border);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	.ltsq-field__row,
	.ltsq-field__row--3 { grid-template-columns: minmax(0, 1fr); }

	.ltsq-orgcompose__tab { min-height: 44px; }

	/*
	 * The identity chip wraps to its own row rather than sharing one with the
	 * heading. At 375px the heading's min-width left the chip 52px — enough for
	 * the avatar and nothing else, so the one line that says WHICH
	 * organization you are about to post as was squeezed out of existence. On
	 * the composer that is the single most important thing on the screen.
	 */
	.ltsq-orgcompose__bandtext,
	.ltsq-orgconsole__bandtext { min-width: 100%; }

	.ltsq-orgcompose__as { width: 100%; box-sizing: border-box; }

	/* 44px, including the submit button. A governance-critical control that is
	 * hard to hit is a governance-critical control people mis-tap. */
	.ltsq-orgcompose__submit,
	.ltsq-orgcompose__actions .ltsq-btn {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ----------------------------------------------------------------------
 * Directory and advertiser self-service (inc/directory-selfserve.php)
 * -------------------------------------------------------------------- */

.ltsq-account__h2 {
	margin: var(--lts-space-5) 0 var(--lts-space-3);
	font-family: var(--lts-font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-account__h2:first-child { margin-top: 0; }

.ltsq-account__notice.is-success {
	border-left-color: var(--lts-directory);
}

.ltsq-bizsignup .ltsq-form__row input {
	width: 100%;
	max-width: 420px;
}

.ltsq-bizlinks {
	margin: 0 0 var(--lts-space-4);
	padding-left: 1.2em;
	font-family: var(--lts-font-ui);
	line-height: 1.9;
}

/* .ltsq-bizlistings was the listings table's only rule. The listings are rows
   now, in ltsq-ad-flow.css section F2. */

.ltsq-addlisting-gate,
.ltsq-addlisting-note {
	margin: 0 0 var(--lts-space-4);
	padding: var(--lts-space-4);
	border: 1px solid var(--lts-border);
	border-left: 4px solid var(--lts-directory);
	background: var(--lts-surface);
	font-family: var(--lts-font-ui);
	line-height: 1.6;
}

.ltsq-addlisting-note { padding: var(--lts-space-3) var(--lts-space-4); }
.ltsq-addlisting-note p,
.ltsq-addlisting-gate p:last-child { margin-bottom: 0; }

.ltsq-addlisting-gate h2 {
	margin-top: 0;
	font-family: var(--lts-font-display);
	color: var(--lts-ink);
}

.ltsq-addlisting-gate__actions .ltsq-btn,
.ltsq-selfserve-links .ltsq-btn { margin: 0 var(--lts-space-2) var(--lts-space-2) 0; }

/* The /add-listing/ front door (roadmap #63, inc/organization-listing.php):
   find it, claim it, or name it. Each step is its own panel. */
.ltsq-frontdoor.ltsq-frontdoor { margin: 0 0 var(--lts-space-4); }

/* Divi styles text inputs at (0,1,1); the doubled class wins, as elsewhere. */
.ltsq-frontdoor .ltsq-field__input.ltsq-field__input {
	padding: 10px 12px;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	font-size: var(--lts-fs-input);
	line-height: 1.5;
}

.ltsq-frontdoor__results.ltsq-frontdoor__results,
.ltsq-frontdoor__list.ltsq-frontdoor__list {
	list-style: none !important;
	margin: 0 0 var(--lts-space-3);
	padding: 0 !important;
}

.ltsq-frontdoor__result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lts-space-2) var(--lts-space-3);
	padding: var(--lts-space-2) 0;
	border-bottom: 1px solid var(--lts-border);
	font-family: var(--lts-font-ui);
}

.ltsq-frontdoor__result .ltsq-btn { margin-left: auto; }
.ltsq-frontdoor__cat { color: var(--lts-text-muted); }
.ltsq-frontdoor__list li { margin: 0 0 var(--lts-space-2); }

/* .ltsq-tiers__price / __choose lived here until 2026-09-17. The tier table is
   now the tier columns, in ltsq-ad-flow.css section G. */

/* The ad chooser, sign-up steps, checkout, upload and BOTH halves of
 * Listings & ads live in ltsq-ad-flow.css (inc/ad-purchase-flow.php,
 * inc/ad-upload.php, inc/directory-selfserve.php). */

/* Editor dashboard view, /account/?view=dashboard (inc/dashboard-handoff.php,
   roadmap #59): the signed-in device list and the recent sign-ins. */
.ltsq-dashboard-sessions {
	list-style: none;
	margin: 0 0 var(--lts-space-3);
	padding: 0;
}

.ltsq-dashboard-sessions__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lts-space-2);
	padding: var(--lts-space-2) 0;
	border-bottom: 1px solid var(--lts-border);
}

.ltsq-dashboard-sessions__row:last-child { border-bottom: 0; }

.ltsq-dashboard-sessions__row form { margin: 0; flex: none; }