/**
 * Thrift Weekly Community — theme refinements.
 *
 * Loaded after tokens.css, community.css and feed.css, and after the inline
 * custom properties the dashboard palette emits. Everything here reads from
 * tokens, so changing a colour in Finds → Settings → Appearance restyles the
 * whole community and no rule in this file needs to change.
 *
 * DESIGN POSITION
 *
 * The homepage uses three strong colours. Used everywhere they cancel each
 * other out and nothing reads as important, so they are spent deliberately.
 * The authoritative role list is in the REFINEMENT PASS at the bottom of this
 * file, which supersedes anything earlier — in short:
 *
 *   Pink   primary action, active tab, an upvote you cast
 *   Lime   confirmation only: published, saved, form success
 *   Cyan   information: links, Editor's Pick, focus
 *   Gold   Find of the Week, and nothing else
 *   Slate  a downvote you cast
 *
 * Surfaces and text stay neutral so those reads keep their meaning. Type is
 * 600/700, sentence case, with uppercase reserved for small labels — weight
 * carries hierarchy, not volume. Radii are square-ish (8/12px) rather than
 * pills, so controls read as controls.
 */

/* ==========================================================================
   Type — calmer than the hero treatment, still clearly the same family
   ========================================================================== */

.twc-card__title,
.twc-single__title,
.twc-form__title,
.twc-panel__title,
.twc-comments__title,
.twc-archive__title,
.twc-dash__row-title {
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	letter-spacing: -0.01em;
}

.twc-single__title {
	letter-spacing: -0.02em;
}

/* Uppercase is reserved for small labels, where it aids scanning rather than
   shouting. */
.twc-flag,
.twc-badge,
.twc-form__legend,
.twc-stats__label,
.twc-status__label {
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
}

.twc-btn,
.twc-feed__cta {
	font-weight: 700;
	letter-spacing: 0.005em;
	text-transform: none;
}

/* ==========================================================================
   Buttons — label colour derived from the chosen accent, so a light action
   colour gets dark text automatically and contrast never breaks.
   ========================================================================== */

.twc-btn--primary,
.twc-feed__cta {
	background: var(--twc-teal);
	color: var(--twc-on-action, #0B0B0E);
	border-color: transparent;
}

.twc-btn--primary:hover,
.twc-btn--primary:focus-visible,
.twc-feed__cta:hover,
.twc-feed__cta:focus-visible {
	background: var(--twc-teal-dark);
	color: var(--twc-on-action, #0B0B0E);
}

.twc-btn--ghost {
	background: transparent;
	border-color: var(--twc-gray-border);
	color: var(--twc-ink);
}

.twc-btn--ghost:hover,
.twc-btn--ghost:focus-visible {
	border-color: var(--twc-border-strong);
	background: color-mix(in srgb, var(--twc-ink) 6%, transparent);
	color: var(--twc-ink);
}

.twc-btn--danger {
	color: var(--twc-danger, #E5484D);
	border-color: var(--twc-gray-border);
}

/* ==========================================================================
   Surfaces — one border, one radius, no shadow stack
   ========================================================================== */

.twc-card,
.twc-panel,
.twc-about,
.twc-stats,
.twc-dash__row,
.twc-single__main,
.twc-status__tile {
	background: var(--twc-white);
	border: 1px solid var(--twc-gray-border);
	border-radius: var(--twc-radius);
	box-shadow: none;
}

.twc-card {
	transition: border-color 140ms ease;
}

.twc-card:hover {
	border-color: var(--twc-border-strong);
}

/* Curated finds get a tinted left edge rather than a glowing outline — the
   status is legible without the card competing with its own content. */
.twc-card:has( .twc-flag--gold ) {
	border-left: 3px solid var(--twc-gold);
}

.twc-card:has( .twc-flag--teal ) {
	border-left: 3px solid var(--twc-cyan);
}

/* ==========================================================================
   Tabs and pills
   ========================================================================== */

.twc-feed__tabs {
	border-bottom-color: var(--twc-gray-border);
	gap: 2px;
}

.twc-feed__tab {
	border-radius: 0;
	padding: 10px 14px;
	font-weight: 600;
	box-shadow: inset 0 -2px 0 transparent;
}

.twc-feed__tab:hover {
	background: transparent;
	color: var(--twc-ink);
	box-shadow: inset 0 -2px 0 var(--twc-gray-border);
}

.twc-feed__tab.is-active {
	color: var(--twc-brand, var(--twc-orange));
	box-shadow: inset 0 -2px 0 var(--twc-brand, var(--twc-orange));
	background: transparent;
}

.twc-pill {
	background: transparent;
	border-color: var(--twc-gray-border);
	color: var(--twc-ink-muted);
	font-weight: 600;
}

.twc-pill:hover {
	border-color: var(--twc-border-strong);
	color: var(--twc-ink);
}

.twc-pill.is-active {
	background: color-mix(in srgb, var(--twc-brand, var(--twc-orange)) 14%, var(--twc-white));
	border-color: var(--twc-brand, var(--twc-orange));
	color: var(--twc-brand, var(--twc-orange));
}

.twc-pill__count {
	margin-left: 6px;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Vote rail
   ========================================================================== */

.twc-vote__btn,
.twc-cvote__btn {
	color: var(--twc-ink-subtle);
}

.twc-vote__btn:hover,
.twc-cvote__btn:hover {
	background: color-mix(in srgb, var(--twc-ink) 7%, transparent);
	color: var(--twc-ink);
}

.twc-vote__up.is-active,
.twc-cvote__up.is-active {
	color: var(--twc-brand, var(--twc-orange));
}

.twc-vote__down.is-active,
.twc-cvote__down.is-active {
	color: var(--twc-cyan);
}

.twc-vote__score {
	color: var(--twc-ink);
	font-weight: 700;
}

.twc-vote__up.is-active ~ .twc-vote__score {
	color: var(--twc-brand, var(--twc-orange));
}

/* ==========================================================================
   Flags and badges — tinted, bordered, never solid neon
   ========================================================================== */

.twc-flag--gold {
	background: var(--twc-gold-tint);
	color: var(--twc-gold);
	border: 1px solid color-mix(in srgb, var(--twc-gold) 35%, transparent);
}

.twc-flag--teal {
	background: var(--twc-cyan-tint);
	color: var(--twc-cyan);
	border: 1px solid color-mix(in srgb, var(--twc-cyan) 35%, transparent);
}

.twc-card__cat {
	background: transparent;
	border: 1px solid var(--twc-gray-border);
	color: var(--twc-ink-muted);
	font-weight: 600;
}

.twc-card__cat:hover {
	border-color: var(--twc-cyan);
	color: var(--twc-cyan);
}

.twc-badge--ok { background: var(--twc-teal-tint); color: var(--twc-teal-dark); }
.twc-badge--pending { background: var(--twc-gold-tint); color: var(--twc-gold); }
.twc-badge--draft { background: color-mix(in srgb, var(--twc-ink) 8%, transparent); color: var(--twc-ink-muted); }
.twc-badge--danger { background: var(--twc-orange-tint); color: var(--twc-brand, var(--twc-orange)); }

/* ==========================================================================
   Forms
   ========================================================================== */

.twc-form__input,
.twc-comment-form__input {
	background: color-mix(in srgb, var(--twc-ink) 4%, var(--twc-white));
	border-color: var(--twc-gray-border);
	color: var(--twc-ink);
}

.twc-form__input::placeholder,
.twc-comment-form__input::placeholder {
	color: var(--twc-ink-subtle);
}

.twc-form__input:focus,
.twc-comment-form__input:focus {
	border-color: var(--twc-cyan);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--twc-cyan) 18%, transparent);
}

.twc-form__section {
	margin: 0;
	padding: var(--twc-space-4) var(--twc-space-5) var(--twc-space-5);
	border: 1px solid var(--twc-gray-border);
	border-radius: var(--twc-radius);
	background: color-mix(in srgb, var(--twc-ink) 3%, var(--twc-white));
}

.twc-form__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--twc-space-2);
	padding: 0 var(--twc-space-2);
	font-family: var(--twc-font-display);
	font-size: var(--twc-fs-small);
	color: var(--twc-ink);
}

.twc-form__legend-note {
	font-family: var(--twc-font-body);
	font-size: var(--twc-fs-small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--twc-ink-subtle);
}

.twc-form__file {
	background: color-mix(in srgb, var(--twc-ink) 4%, var(--twc-white));
	border-color: var(--twc-gray-border);
	color: var(--twc-ink-muted);
}

.twc-form__notice.is-success {
	background: var(--twc-teal-tint);
	color: var(--twc-teal-dark);
}

.twc-form__notice.is-error {
	background: var(--twc-orange-tint);
	color: var(--twc-brand, var(--twc-orange));
}

.twc-gate,
.twc-empty,
.twc-comments__gate {
	background: color-mix(in srgb, var(--twc-ink) 3%, var(--twc-white));
	border-color: var(--twc-gray-border);
	color: var(--twc-ink-muted);
}

/* ==========================================================================
   Dashboard status strip
   ========================================================================== */

.twc-status {
	display: flex;
	flex-direction: column;
	gap: var(--twc-space-4);
	margin-bottom: var(--twc-space-5);
}

.twc-status__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--twc-space-3);
}

.twc-status__tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--twc-space-4);
}

.twc-status__tile--pending {
	border-left: 3px solid var(--twc-gold);
}

.twc-status__num {
	font-family: var(--twc-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--twc-ink);
	font-variant-numeric: tabular-nums;
}

.twc-status__label {
	font-family: var(--twc-font-body);
	font-size: 11px;
	color: var(--twc-ink-subtle);
}

.twc-status__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--twc-space-2);
}

.twc-status__note {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--twc-radius);
	background: var(--twc-gold-tint);
	border: 1px solid color-mix(in srgb, var(--twc-gold) 30%, transparent);
	font-family: var(--twc-font-body);
	font-size: var(--twc-fs-meta);
	line-height: var(--twc-lh-meta);
	color: var(--twc-ink);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.twc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--twc-space-2);
	margin-bottom: var(--twc-space-4);
	font-family: var(--twc-font-body);
	font-size: var(--twc-fs-small);
	color: var(--twc-ink-subtle);
}

.twc-crumbs a { color: var(--twc-ink-muted); text-decoration: none; }
.twc-crumbs a:hover { color: var(--twc-cyan); }
.twc-crumbs__current { color: var(--twc-ink); }

/* ==========================================================================
   Swiper gallery
   ========================================================================== */

.twc-swiper {
	display: flex;
	flex-direction: column;
	gap: var(--twc-space-2);
}

.twc-swiper__main {
	width: 100%;
	border-radius: var(--twc-radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--twc-ink) 5%, var(--twc-white));
	border: 1px solid var(--twc-gray-border);
}

.twc-swiper__main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
}

.twc-swiper__main .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twc-swiper__thumbs {
	width: 100%;
}

.twc-swiper__thumbs .swiper-slide {
	width: 78px;
	height: 78px;
	border-radius: var(--twc-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 140ms ease, border-color 140ms ease;
}

.twc-swiper__thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twc-swiper__thumbs .swiper-slide-thumb-active,
.twc-swiper__thumbs .swiper-slide:hover {
	opacity: 1;
	border-color: var(--twc-brand, var(--twc-orange));
}

/* Swiper's own controls, restyled to the token palette. */
.twc-swiper .swiper-button-prev,
.twc-swiper .swiper-button-next {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--twc-white) 88%, transparent);
	border: 1px solid var(--twc-gray-border);
	color: var(--twc-ink);
	backdrop-filter: blur(6px);
}

.twc-swiper .swiper-button-prev::after,
.twc-swiper .swiper-button-next::after {
	font-size: 15px;
	font-weight: 700;
}

.twc-swiper .swiper-pagination-bullet {
	background: var(--twc-ink-subtle);
	opacity: 0.4;
}

.twc-swiper .swiper-pagination-bullet-active {
	background: var(--twc-brand, var(--twc-orange));
	opacity: 1;
}

.twc-swiper__counter {
	align-self: flex-end;
	font-family: var(--twc-font-body);
	font-size: var(--twc-fs-small);
	color: var(--twc-ink-subtle);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.twc-swiper__thumbs .swiper-slide {
		width: 58px;
		height: 58px;
	}

	.twc-swiper .swiper-button-prev,
	.twc-swiper .swiper-button-next {
		display: none;
	}
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.twc-lightbox {
	background: color-mix(in srgb, var(--twc-gray-light) 94%, #000);
}

.twc-lightbox__nav,
.twc-lightbox__close {
	background: color-mix(in srgb, var(--twc-ink) 12%, transparent);
	color: var(--twc-ink);
}

.twc-lightbox__nav:hover,
.twc-lightbox__close:hover {
	background: color-mix(in srgb, var(--twc-ink) 22%, transparent);
}

.twc-lightbox__counter {
	color: var(--twc-ink-muted);
}

/* ==========================================================================
   Misc surfaces
   ========================================================================== */

.twc-comment__children { border-left-color: var(--twc-gray-border); }

.twc-sort.is-active {
	background: color-mix(in srgb, var(--twc-brand, var(--twc-orange)) 12%, var(--twc-white));
	border-color: color-mix(in srgb, var(--twc-brand, var(--twc-orange)) 35%, transparent);
	color: var(--twc-brand, var(--twc-orange));
}

.twc-panel--award {
	border-left: 3px solid var(--twc-gold);
	background: var(--twc-white);
}

.twc-rail__link:hover .twc-rail__title { color: var(--twc-cyan); }

.twc-mobilenav {
	background: var(--twc-white);
	border-top-color: var(--twc-gray-border);
}

.twc-mobilenav__item--cta {
	background: var(--twc-brand, var(--twc-orange));
	color: var(--twc-on-primary, #fff);
}

.twc-feed__item[data-twc-parked="1"] {
	background: transparent;
	opacity: 0.2;
}

.twc-toast {
	background: var(--twc-ink);
	color: var(--twc-white);
}

.twc-archive,
.twc-singlepage {
	background: var(--twc-gray-light);
	color: var(--twc-ink);
}

.twc-singlepage__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: var(--twc-space-4);
	padding-block: var(--twc-space-5) var(--twc-space-7);
}

/* ==========================================================================
   Focus
   ========================================================================== */

.twc-btn:focus-visible,
.twc-pill:focus-visible,
.twc-feed__tab:focus-visible,
.twc-vote__btn:focus-visible,
.twc-cvote__btn:focus-visible,
.twc-save:focus-visible,
.twc-sort:focus-visible,
.twc-form__input:focus-visible,
.twc-swiper__main .swiper-slide:focus-visible {
	outline: 2px solid var(--twc-cyan);
	outline-offset: 2px;
}

/* ==========================================================================
   REFINEMENT PASS
   --------------------------------------------------------------------------
   Loaded last, so these rules win over everything above. Nothing here changes
   behaviour — only shape, colour role and typography.

   THE COLOUR SYSTEM, RESTATED

   The previous pass used lime for the primary button. Lime is a very loud
   colour to hand the most-repeated element on the page, and it left pink —
   the brand's strongest asset — with nothing important to do. Roles are now:

     Pink   PRIMARY ACTION. Buttons, the active tab, an upvote you have cast.
            The one colour that means "this is the thing to press".
     Lime   CONFIRMATION ONLY. Published badge, saved state, form success.
            Rare by design, so it still registers as good news.
     Cyan   INFORMATION. Links, Editor's Pick, focus rings.
     Gold   AWARD. Find of the Week and nothing else.
     Slate  A cast downvote. Deliberately unrewarding — downvoting should not
            feel as good as upvoting, and colouring it like a brand accent
            quietly encourages it.

   Surfaces and text stay neutral so those four reads keep their meaning.
   ========================================================================== */

:root {
	/* Square-ish, not pills. Buttons read as controls rather than tags. */
	--twc-radius-btn: 8px;
	--twc-radius-chip: 6px;
	--twc-radius-card: 12px;

	/* A cast downvote: present, legible, not celebratory. */
	--twc-down: color-mix( in srgb, var(--twc-ink-muted) 80%, var(--twc-cyan) );
}

/* ==========================================================================
   Anchors — no underline anywhere in the community UI
   ========================================================================== */

.twc-feed a,
.twc-card a,
.twc-single a,
.twc-singlepage a,
.twc-archive a,
.twc-dash a,
.twc-panel a,
.twc-sidebar a,
.twc-rail a,
.twc-comments a,
.twc-form a,
.twc-crumbs a,
.twc-swiper a,
.twc-status a,
.twc-empty a,
.twc-gate a,
.twc-mobilenav a,
.twc-share a,
.twc-marketplace a {
	text-decoration: none;
}

/* Prose is the one exception, and only on hover: a link inside someone's
   story or comment needs an affordance, or it is indistinguishable from
   emphasis. It is still undecorated at rest, as asked. */
.twc-single__story a:hover,
.twc-comment__text a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Buttons — square radius, pink primary, consistent sizing
   ========================================================================== */

.twc-btn,
.twc-feed__cta {
	border-radius: var(--twc-radius-btn);
	padding: 10px 18px;
	font-weight: 600;
	letter-spacing: 0;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.twc-btn--lg {
	padding: 13px 24px;
}

/* Primary is now the brand pink. Its label colour is derived from the chosen
   background by the plugin, so contrast survives a palette change. */
.twc-btn--primary,
.twc-feed__cta {
	background: var(--twc-brand, var(--twc-orange));
	color: var(--twc-on-primary, #fff);
	border: 1px solid transparent;
}

.twc-btn--primary:hover,
.twc-btn--primary:focus-visible,
.twc-feed__cta:hover,
.twc-feed__cta:focus-visible {
	background: color-mix( in srgb, var(--twc-brand, var(--twc-orange)) 86%, #000 );
	color: var(--twc-on-primary, #fff);
}

.twc-btn--ghost {
	background: transparent;
	border: 1px solid var(--twc-gray-border);
	color: var(--twc-ink);
}

.twc-btn--ghost:hover,
.twc-btn--ghost:focus-visible {
	border-color: var(--twc-border-strong);
	background: color-mix( in srgb, var(--twc-ink) 5%, transparent );
}

.twc-btn--danger {
	background: transparent;
	border: 1px solid var(--twc-gray-border);
	color: var(--twc-danger, #E5484D);
}

.twc-btn--danger:hover,
.twc-btn--danger:focus-visible {
	border-color: var(--twc-danger, #E5484D);
	background: color-mix( in srgb, var(--twc-danger, #E5484D) 10%, transparent );
	color: var(--twc-danger, #E5484D);
}

/* ==========================================================================
   Action buttons — comments, share, save, reply, sort
   One visual family, so a row of them reads as a toolbar rather than as
   four unrelated controls.
   ========================================================================== */

.twc-card__action,
.twc-save,
.twc-commentcount,
.twc-comment__reply,
.twc-share__link,
.twc-sort {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid transparent;
	border-radius: var(--twc-radius-btn);
	background: transparent;
	font-family: var(--twc-font-body);
	font-size: var(--twc-fs-meta);
	font-weight: 500;
	line-height: 1.2;
	color: var(--twc-ink-muted);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.twc-card__action:hover,
.twc-save:hover,
.twc-commentcount:hover,
.twc-comment__reply:hover,
.twc-share__link:hover,
.twc-sort:hover {
	background: color-mix( in srgb, var(--twc-ink) 6%, transparent );
	border-color: var(--twc-gray-border);
	color: var(--twc-ink);
}

/* Saved is a confirmation, so it is the one place lime appears in a toolbar. */
.twc-save.is-saved {
	color: var(--twc-teal);
	border-color: color-mix( in srgb, var(--twc-teal) 32%, transparent );
	background: var(--twc-teal-tint);
}

.twc-save.is-saved svg path {
	fill: currentColor;
}

.twc-sort {
	padding: 6px 11px;
	font-family: var(--twc-font-display);
	font-weight: 600;
	font-size: var(--twc-fs-pill);
}

.twc-sort.is-active {
	background: color-mix( in srgb, var(--twc-brand, var(--twc-orange)) 12%, transparent );
	border-color: color-mix( in srgb, var(--twc-brand, var(--twc-orange)) 34%, transparent );
	color: var(--twc-brand, var(--twc-orange));
}

.twc-comment__reply {
	padding: 5px 10px;
	font-size: var(--twc-fs-small);
}

.twc-share__list {
	gap: var(--twc-space-1);
}

.twc-share__link {
	border-color: var(--twc-gray-border);
	font-size: var(--twc-fs-small);
}

.twc-marketplace__link {
	border-radius: var(--twc-radius-btn);
	padding: 11px 16px;
	font-weight: 600;
	text-decoration: none;
}

.twc-marketplace__link:hover {
	border-color: var(--twc-cyan);
	color: var(--twc-cyan);
	background: color-mix( in srgb, var(--twc-cyan) 7%, transparent );
}

/* ==========================================================================
   Thumbs — outline at rest, filled once cast
   ========================================================================== */

.twc-vote,
.twc-cvote {
	gap: 2px;
}

.twc-vote__btn,
.twc-cvote__btn {
	width: 34px;
	height: 30px;
	border-radius: var(--twc-radius-chip);
	border: 1px solid transparent;
	color: var(--twc-ink-subtle);
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.twc-cvote__btn {
	width: 28px;
	height: 26px;
}

.twc-vote__btn:hover,
.twc-cvote__btn:hover {
	background: color-mix( in srgb, var(--twc-ink) 7%, transparent );
	border-color: var(--twc-gray-border);
	color: var(--twc-ink);
}

/* Upvote cast — brand pink, icon filled. */
.twc-vote__up.is-active,
.twc-cvote__up.is-active {
	color: var(--twc-brand, var(--twc-orange));
	background: color-mix( in srgb, var(--twc-brand, var(--twc-orange)) 12%, transparent );
	border-color: color-mix( in srgb, var(--twc-brand, var(--twc-orange)) 30%, transparent );
}

/* Downvote cast — slate. Registered, acknowledged, not rewarded. */
.twc-vote__down.is-active,
.twc-cvote__down.is-active {
	color: var(--twc-down);
	background: color-mix( in srgb, var(--twc-ink) 8%, transparent );
	border-color: var(--twc-gray-border);
}

.is-active .twc-thumb .twc-thumb__hand,
.is-active .twc-thumb .twc-thumb__cuff {
	fill: currentColor;
	fill-opacity: 0.18;
}

.twc-vote__score {
	min-width: 2.5ch;
	padding-inline: 2px;
	color: var(--twc-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The score only takes the accent once this visitor has actually voted, so
   the colour means "you did this" rather than decorating every card. */
.twc-vote:has( .twc-vote__up.is-active ) .twc-vote__score,
.twc-cvote:has( .twc-cvote__up.is-active ) .twc-cvote__score {
	color: var(--twc-brand, var(--twc-orange));
}

.twc-vote:has( .twc-vote__down.is-active ) .twc-vote__score,
.twc-cvote:has( .twc-cvote__down.is-active ) .twc-cvote__score {
	color: var(--twc-down);
}

/* ==========================================================================
   Chips, pills, tabs — square, quieter
   ========================================================================== */

.twc-pill,
.twc-card__cat,
.twc-flag,
.twc-badge {
	border-radius: var(--twc-radius-chip);
}

.twc-pill {
	padding: 7px 13px;
	font-weight: 600;
}

.twc-pill.is-active {
	background: var(--twc-brand, var(--twc-orange));
	border-color: var(--twc-brand, var(--twc-orange));
	color: var(--twc-on-primary, #fff);
}

.twc-card__cat {
	padding: 3px 9px;
	background: transparent;
	border: 1px solid var(--twc-gray-border);
	color: var(--twc-ink-muted);
	font-weight: 600;
}

.twc-card__cat:hover {
	border-color: var(--twc-cyan);
	color: var(--twc-cyan);
}

.twc-feed__tab.is-active {
	color: var(--twc-brand, var(--twc-orange));
	box-shadow: inset 0 -2px 0 var(--twc-brand, var(--twc-orange));
}

/* ==========================================================================
   Surfaces — slightly softer radius, unchanged structure
   ========================================================================== */

.twc-card,
.twc-panel,
.twc-about,
.twc-stats,
.twc-dash__row,
.twc-single__main,
.twc-status__tile,
.twc-empty,
.twc-gate,
.twc-comments__gate,
.twc-status__note,
.twc-swiper__main {
	border-radius: var(--twc-radius-card);
}

.twc-form__input,
.twc-comment-form__input,
.twc-form__file,
.twc-form__section {
	border-radius: var(--twc-radius-btn);
}

.twc-gallery__thumb,
.twc-swiper__thumbs .swiper-slide,
.twc-strip {
	border-radius: var(--twc-radius-chip);
}

/* The circular mobile CTA stays circular — it is a floating action button,
   not a bar control, and squaring it would lose that distinction. */
.twc-mobilenav__item--cta {
	border-radius: 50%;
}

/* ==========================================================================
   Focus — one ring everywhere
   ========================================================================== */

.twc-btn:focus-visible,
.twc-pill:focus-visible,
.twc-feed__tab:focus-visible,
.twc-vote__btn:focus-visible,
.twc-cvote__btn:focus-visible,
.twc-save:focus-visible,
.twc-sort:focus-visible,
.twc-card__action:focus-visible,
.twc-comment__reply:focus-visible,
.twc-share__link:focus-visible,
.twc-marketplace__link:focus-visible,
.twc-form__input:focus-visible {
	outline: 2px solid var(--twc-cyan);
	outline-offset: 2px;
}

/* ==========================================================================
   Submit form — keep the detail fields visible
   --------------------------------------------------------------------------
   The four optional fields (price, source, condition, location) live in a
   <fieldset>. Themes and builders reset fieldsets more aggressively than any
   other element — display:contents, visibility:hidden and height:0 are all
   common — and any of those makes the fields look like they were never
   built. These declarations restate the intended box so an inherited reset
   cannot collapse it.
   ========================================================================== */

.twc-form .twc-form__section {
	display: block;
	visibility: visible;
	opacity: 1;
	height: auto;
	max-height: none;
	overflow: visible;
	min-inline-size: 0; /* Browsers give fieldset a min-content floor by default. */
}

.twc-form .twc-form__legend {
	visibility: visible;
	opacity: 1;
	float: none;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	position: static;
}

.twc-form .twc-form__grid {
	display: grid;
	visibility: visible;
}

.twc-form .twc-form__grid > .twc-form__row {
	display: flex;
}