/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/**
 * Yusaso Teal — canonical universal presentation and UI primitives.
 *
 * css_visual_catalog.css owns editable visual tokens. This file consumes those tokens
 * for shared presentation. Feature stylesheets own their empirical geometry.
 */
/* ==========================================================================
 Document foundation
 ========================================================================== */
/* Form sizing is empirical geometry owned by page_actions.css. */
/* One teal glow, with borders removed from non-feature cards.
 :root {
 --card-glow-inner: var(--primary-color);
 --card-glow-outer: var(--primary-color);
 }
 */
main.content {
    /*background-color: var(--primary-transparent);*/
    background: var(--primary-color);
    color: var(--primary-font-color);
}

/* Universal links retain one predictable state palette. */
a,a:link {
    color: var(--primary-link-color);
    text-decoration: none;
}

a:visited {
    color: var(--primary-link-color);
}

a:hover,a:focus-visible {
    color: var(--primary-link-hover-color);
}

a:active {
    color: var(--primary-link-active-color);
}

/* Oct 19 2026 - #807 her request (primitive, every page): a link inside any paragraph defaults to the paragraph's own text size. */
p a,
.page_description p a {
    font-size: inherit;
}

/* Oct 13 2026 - her request: ul, ol and li are primitives, so their text color lives here at the top level (it was inside the max-width:767px block, so lists only got the token on phones). */
ol, ul, li {
    color: var(--primary-font-color);
}

/* Unclassified content links use the same readable size as ordinary paragraphs. */
:is(.page_content_header, .page_heading) {
    align-self: start;
    height: auto;
}

/* Ordinary paragraphs use their native spacing. Extra room belongs to the page header. */
/*

 .page_heading > .page_content_top_actions,.page_content_header .page_content_top_actions {
 position: static;
 top: auto;
 margin: 0;
 min-height: 2.25rem;
 overflow: visible;
 }

 .page_heading:not(:has(> .page_content_top_actions)) > .page_content_top_actions,.page_content_header:not(:has(.page_content_top_actions)) .page_content_top_actions {
 height: 0;
 min-height: 0;
 margin: 0;
 padding: 0;
 }

 .page_description,.page_header_description,.communication_page_description,.post_composer_page > .page_description {
 box-sizing: border-box;
 width: 100%;
 min-height: 3rem;
 margin: 0 0 1rem;
 padding: .35rem .5rem;
 clear: both;
 }

 :is(.page_description, .page_header_description, .communication_page_description):empty {
 height: 0;
 min-height: 0;
 margin: 0;
 padding: 0;
 }

 */
fieldset {
    padding-bottom: 5px;
}

legend {
    color: var(--primary-font-color);
}

/* One shared top-right close control for every public popup. Positioned to
 sit ON the corner of whichever element it's a child of (half overlapping
 the edge, like a badge), not floated inside the padding and not pushed
 fully outside. Its positioned ancestor needs `position: relative` (or
 fixed/absolute) of its own - true for every dialog/panel this is used in
 today - and must NOT clip overflow, or the overlapping half gets cut off. */
.popup_corner_close {
    display: grid;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 2147483647;
    box-sizing: border-box;
    place-items: center;
    place-content: center;
    /* Issue #80: the hidden text node is a 2nd (empty) grid item - center the whole track set so the X itself sits dead center */
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    margin: 0;
    padding: 0;
    /* Oct 5 2026 - Issue #80: no nudge hack; the X is a drawn shape centered by the grid, not a font glyph */
    overflow: visible;
    color: var(--new-base-aesthetics-popup-corner-close-text-color) !important;
    -webkit-text-fill-color: var(--new-base-aesthetics-popup-corner-close-text-color) !important;
    background: var(--primary-color);
    background-image: none;
    border: 1px solid var(--primary-font-color);
    border-radius: 50%;
    pointer-events: auto;
    touch-action: manipulation;
    text-decoration: none;
    cursor: pointer;
}

/* Oct 5 2026 - Issue #80 (her directive: ONE close (x), no more whack-a-mole): the (x) is ONE SVG shape painted with currentColor through a mask, centered by the button's grid, identical at every screen size and in every popup. Replaces the text × glyph + padding nudge (desktop) and the gradient X (<=480px, and a scoped duplicate in post_layout.css). */
.popup_corner_close::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3L13 13M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3L13 13M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Oct 5 2026 - Issue #80: header.js injects a catalog glyph <span data-ui-role-icon> into the button; it was a 2nd grid item beside the SVG (X rode low/off-center). The SVG ::before is the one X. */
.popup_corner_close > [data-ui-role-icon] {
    display: none !important;
}

.popup_corner_close:is(:hover,:focus-visible) {
    color: var(--new-base-aesthetics-popup-corner-close-text-color) !important;
    -webkit-text-fill-color: var(--new-base-aesthetics-popup-corner-close-text-color) !important;
    background: var(--primary-color);
    border-color: var(--focus-ring-color);
}

/* Oct 10 2026 - #386/#388 (supersedes #250's 10px): popups are compact. The header bar (title + corner (x)) has no margin around it and its title and (x) no margin of their own, so the header is just the (x) button's height, and the content under it is spaced only by the standard gap. */
:is(dialog, [popover]) > .content_action_bar, :is(dialog, [popover]) > form > .content_action_bar, .popup_zone_header {
    margin-block: 0 var(--margin-bottom-15);
    /* Oct 13 2026 - her request: 10px below every popup header (supersedes #386/#388's 0) */
}

:is(dialog, [popover]) > .content_action_bar > :is(h1, h2, h3, button), :is(dialog, [popover]) > form > .content_action_bar > :is(h1, h2, h3, button), .popup_zone_header > :is(h1, h2, h3) {
    margin-block: 0;
}

/* Oct 13 2026 - her request: popup header titles wear one header colour (the (x) keeps its own canon style) (--popup-header-text-color). Not the FULL header, which keeps its own SWITCH token (--persona-full-header-text-color). */
:is(dialog, [popover]) > .content_action_bar > :is(h1, h2, h3), :is(dialog, [popover]) > form > .content_action_bar > :is(h1, h2, h3), .popup_zone_header > :is(h1, h2, h3) {
    color: var(--popup-header-text-color);
}

/* MINI: its header reads the MINI SWITCH tokens, so the viewed person's theme wins. */
.persona_mini_content .content_action_bar:has(> .persona_popup_controls) {
    margin-block: 0 var(--persona-mini-header-margin-bottom);
    color: var(--persona-mini-header-text-color);
}

.persona_mini_content .content_action_bar:has(> .persona_popup_controls) > :is(h1, h2, h3) {
    color: inherit;
}

/* FULL: the header is sticky and paints the popup surface, so its 10px is padding (a margin would show the scrolling content through the gap). */
.persona_full_view_content > header.content_action_bar {
    margin-block: 0;
    padding-bottom: var(--persona-full-header-margin-bottom);
}

:is(dialog, [popover]):not(.persona_action_menu_items) :is(.button_bar, .public_form_stack), .post_delete_form {
    gap: var(--standard-button-gap, 4px);
}

/* Sept 22 2026 - "it has no wrapper, it's pushing the post content left
 too... clean popups that properly wrap" - same defect class as
 .post_delete_form (posts.css): this small link-entry popup (post
 composer/reply toolbar via post_runtime.js, and the message composer
 toolbar via message_composer.js) is a plain, unstyled <div> toggled
 with [hidden] - it never had ANY background/border/padding/position
 rule anywhere, only a z-index bump scoped to .communication_page
 (messaging.css). Given the shared close button lives inside it at two
 different DOM depths (a sibling of its toolbar in the Post composer,
 a child of .composer_toolbar_free in Messages), position:absolute
 would need a positioned ancestor that isn't reliably the same element
 in both places - so this stays a normal in-flow block instead, but
 with the full popup card surface everything else on the site gets, so
 it reads as a wrapped popup and drops in below its toolbar rather than
 sitting bare in the row and shoving sibling content sideways. */
.compact_link_popup {
    box-sizing: border-box;
    width: min(20rem, 100%);
    margin-top: .5rem;
    padding: .75rem;
    color: var(--popup-text-color);
    background-color: color-mix(in srgb, var(--popup-background-color) calc(var(--popup-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-background-image), var(--popup-background-gradient);
    background-repeat: var(--popup-background-repeat), var(--popup-background-repeat);
    border: var(--border-1) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-backdrop);
}

.compact_link_popup[hidden] {
    display: none;
}

.compact_link_popup label {
    display: grid;
    gap: .35rem;
}

/* Popup placement is owned by the stylesheet for the component that renders it. */
/* Shared small-text typography primitive. */
/* Oct 6 2026 - her request: p.small, a paragraph smaller than regular text and larger than metadata's tiny text. Size = --paragraph-small-font-size in css_visual_catalog.css. */
/* One ordinary button presentation. Specialized controls remain explicitly excluded.
 :is(button, input[type="submit"], input[type="reset"], input[type="button"], a.button):not( .popup_corner_close, .public_widget_toggle, .widget_toggle, .widget_navigation_button, .toolbar_tooltip_control, .post_action_icon, .post_image_open, .post_see_more,
 .mobile_navigation_button, .account_menu_button, .password_visibility_toggle, .persona_switcher_select, .button_danger, [role="tab"], [data-ui-icon-only="1"], [data-post-image-open], [data-color-choice], [data-background-choice], [data-message-background-choice], [data-composer-background-choice], [data-composer-frame-choice]):not([role="toolbar"] *, .quick_post *, .post_composer *, .post_composer_page *) {
 display: inline-flex;
 box-sizing: border-box;
 width: auto;
 min-width: 0;
 max-width: max-content;
 min-height: 2.25rem;
 margin: 0;
 padding: .45rem .75rem;
 align-items: center;
 justify-content: center;
 justify-self: start;
 color: var(--primary-font-color);
 background: var(--primary-color);
 background-image: none;
 border: 1px solid var(--secondary-accent-color);
 border-radius: var(--radius-small);
 font: 400 1rem/1.2 Arial, Helvetica, sans-serif;
 font-weight: 400;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 }
 */
/* Shared pointer primitive for semantic clickable areas. Disabled controls are
 excluded so their owning disabled presentation remains authoritative. */
:is(a[href],button,summary,select,label[for],input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"],[role="button"],[role="link"],[role="tab"],[role="menuitem"],[popovertarget]):not(:disabled):not([aria-disabled="true"]) {
    cursor:pointer;
}

/* Oct 13 2026 - her request: every link takes the universal link colors (a / a:link / a:visited / a:hover / a:active above) unless a component sets its own (main nav, widget and menu links). This rule used to set color on every a[href] too, which beat the link rules at higher specificity, so plain links showed the body font color. Controls keep their font color here; anchors do not. */
:is(button,summary:not(.toggle_div_summary_header),select,label[for],input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"],[role="button"],[role="link"]:not(a),[role="tab"],[role="menuitem"],[popovertarget]:not(a)):not(:disabled):not([aria-disabled="true"]) {
    color: var(--primary-font-color);
}

/*
 section.page_content_header,.page_content_header {
 padding: 5px;
 background: color-mix(in srgb, var(--primary-color) 70%, transparent);
 }
 */
/* Oct 16 2026 - one presentation for every Backgrounds-section image or gradient (zero specificity, so an owning file can still set its own). */
:where(
    .public_widget, .widget_card, .public_widget_header, .widget_header, .public_widget_content, .widget_content, .public_widget_footer, .widget_footer,
    .feature_wrapper, .feature_wrapper > .card_header, .feature_wrapper > .content_action_bar, .feature_card, .nested_card,
    .feed_card, .post_card_header, .post_card_body, .post_card_actions,
    .site_footer, .page_content_header, .popup_zone_header, .popup_zone_footer
) {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Expanding div (details/summary) - the one owner for Max Theme Editor groups, Edit Persona interests, Affiliations and Credentials.
   The summary is a header (secondary*); the section that opens is content (primary*). */
.toggle_div {
    overflow: hidden;
    border: var(--border-1) solid var(--secondary-border-color);
    border-radius: var(--radius-large);
}

.toggle_div_summary_header {
    padding: .7rem .85rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--secondary-font-color);
    background: var(--secondary-color);
}

.toggle_div[open] > .toggle_div_summary_header {
    border-bottom: var(--border-1) solid var(--secondary-border-color);
}

.toggle_div_details_content {
    padding: .75rem;
    color: var(--primary-font-color);
    background: var(--primary-color);
}

/* Processing popup presentation moved to cards.css, the shared popup surface owner. */
/* Native popover visibility contract. */
[popover] {
    display: none;
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
    padding: .75rem;
    overflow: auto;
    background-color: color-mix(in srgb, var(--popup-background-color) calc(var(--popup-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-background-image), var(--popup-background-gradient);
    background-repeat: var(--popup-background-repeat), var(--popup-background-repeat);
    border: var(--border-1) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-backdrop);
}

[popover]:popover-open {
    display: block;
}

/* Shared message dialog used for Composer success notices and confirmations. */
/* Sept 30 2026 - fixed a real parse-breaking typo found while chasing the
 tooltip report below: this comment used to spell its two token names
 back to back with a slash between them and no space, which (combined
 with the asterisk wildcard already in each name) accidentally formed
 the two characters that end a CSS comment, closing it early and
 dumping the rest of this note as raw, invalid top-level CSS. Confirmed
 via a real browser parse (not just reading the file) that this
 silently dropped a number of real rules further down the stylesheet -
 .ui_global_tooltip among them, which is the actual reason the tooltip
 fix below wasn't taking effect until this got fixed too. Rewritten
 below with the two names spelled out separately and a word between
 them, so the comment-closing sequence can't form by accident again.
 Sept 29 2026 - her instruction: wire the hot-zone tokens for this
 dialog's surface and footer into this shared dialog. Surface (this
 dialog's own background/shadow) and footer (.button_bar's
 background/shadow) are simple property swaps on the elements that
 already exist. (The 8 corner/border zone-frame tokens are FULL-popup
 only - see persona.css's .persona_full_view_content > .popup_zone_frame
 block, not this shared dialog.) */
.yusaso_message_dialog {
    box-sizing: border-box;
    width: min(24rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    color: var(--popup-text-color);
    background-color: var(--theme-zone-popup-surface-background-color);
    background-image: var(--theme-zone-popup-surface-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--border-1) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--radius-large);
    box-shadow: inset var(--theme-zone-popup-surface-inner-glow), var(--theme-zone-popup-surface-outer-glow), var(--theme-zone-popup-surface-shadow);
    overflow-x: hidden;
    overflow-y: auto;
}

.yusaso_message_dialog::backdrop {
    background: var(--new-base-aesthetics-yusaso-message-dialog-backdrop-background-color);
    background: rgb(from var(--popup-backdrop-color) r g b / var(--popup-backdrop-opacity));
}

/* Oct 1 2026 - her "pop up the post including all its comments" instruction
 (post_popup.js). The base .yusaso_message_dialog's 24rem width (above)
 fits a short form, not a real .post_card plus an expanded comment
 thread - widened just for this one dialog. Scroll/max-height is already
 handled by the base rule's own overflow-y:auto + max-height above, not
 duplicated here. .post_popup_body only resets the padding the dialog's
 own child selectors assume a <form> provides (this dialog has none) so
 the moved-in .post_card keeps its normal spacing. */
.post_popup_dialog {
    width: min(40rem, calc(100vw - 2rem));
}

.post_popup_body {
    padding: 1rem;
}

/* Oct 10 2026 #402 - the post popup has no <form> wrapper (a header inside "dialog > form" gets the 1rem form padding; a header directly in the dialog gets none - this rule covers every form-less popup), so its header (title + close) sat flush on the dialog edge, outside the ring. Same 1rem inset the form gives every other popup header. */
dialog.popup_zone > .popup_zone_header {
    box-sizing: border-box;
    padding: 1rem 1rem 0;
}

.yusaso_message_dialog > form {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
}

.yusaso_message_dialog :is(h2, p) {
    margin: 0;
    color: inherit;
}

.yusaso_message_dialog .button_bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Sept 22 2026 - "corner (x) button... cut off" (Leave Chat, Device
 Settings, and every generic confirm/notice popup built from this one
 shared dialog - header.js's messageDialog). Same root cause as the
 Sept 21 image-popup fix (image_popup.css): .popup_corner_close's own
 transform: translate(50%, -50%) badge-overlap was never reset for
 anything living inside this dialog, and this dialog's overflow-x:
 hidden above (kept on purpose, to stop a horizontal scrollbar on long
 content) clips the half of the badge that straddles the edge.
 Neutralized the same way - a flush inset button instead of a
 straddling badge - via a descendant selector so it covers the close
 button whether it's a direct child of the dialog (Device Settings,
 which has no <form> wrapper - see call_device_dialog.js) or nested one
 level down inside "> form" (every other yusaso_message_dialog popup). */
.yusaso_message_dialog .popup_corner_close {
    top: .5rem;
    right: .5rem;
    transform: none;
}

:where(.button_bar, .public_form_stack) {
    gap: calc(2 * var(--zone-10));
}

.yusaso_message_dialog .button_bar {
    gap: max(0.5rem, calc(2 * var(--zone-10)));
}

/* Oct 10 2026 #407 - every card/popup/widget header, footer and action bar that holds nothing takes no space at all (0 height, no ring padding, no margin, no grid gap) until something is put in it. Applies sitewide to all cards. */
:is(.content_action_bar, .card_header, .popup_zone_header, .popup_zone_footer, .public_widget_header, .widget_header, .public_widget_footer, .widget_footer, .page_content_top_actions, .page_content_bottom_actions):not(:has(*)):not(:has(> :is(img, svg, input, button, a))) {
    display: none !important;
}

/* Oct 10 2026 #409 - her request (top-level cards only; nested cards such as the shop's are untouched): ONE spacing rule for every card, page or popup (popups use the same cards). The card shell is feature_wrapper > feature_card > card_wrapper; the wrapper's own padding is the only inset above and below the content. The bordered feature_card takes no extra top/bottom padding or margin and the card_wrapper takes no top/bottom margin, so no empty band shows above or below the content. The popup-scoped copies of these lines were removed from composer_popup.css. */
.feature_wrapper:not(:is(.feature_card, .card_wrapper, .nested_card) *) > .feature_card {
    padding-block: 0 !important;
    margin-block: 0 !important;
}

.feature_wrapper:not(:is(.feature_card, .card_wrapper, .nested_card) *) > .feature_card > .card_wrapper {
    margin-block: 0 !important;
}

/* Oct 10 2026 - her rule: ALL cards work the same - any structural part of a card, widget or post that is an empty div takes no space (display none, 0 height) until something is put in it. Nested cards (a card inside a card, e.g. the shop) are not touched. */
:is(.feature_card, .card_wrapper, .post_card_body, .post_card_header, .post_card_actions, .post_embed_region, .public_widget_content, .widget_content, .post_hashtags, .button_bar):not(:is(.card_wrapper, .nested_card, .feature_card) *):empty {
    display: none !important;
}

/* Oct 10 2026 - her request: metadata text (date stamps, added/removed lines, chat pop-out time, form helper text) is the primitive <small>, which already reads --font-sm. Only the badge persona type stays on --font-xs. */
/* Oct 11 2026 - her report (1440px): a sideways scrollbar. The full-width header's theme zone ring (and any other full-width ring) sits --zone-t outside its host, past the viewport edge. The page never scrolls sideways; sticky headers are unaffected. */
html, body.public_shell {
    overflow-x: clip;
}

/* Oct 14 2026 - her ruling: popup headers and footers wear the header/footer colors (the popup body keeps the popup background). */
:is(dialog, [popover]) > .content_action_bar, :is(dialog, [popover]) > form > .content_action_bar, .popup_zone_header {
    background-color: color-mix(in srgb, var(--popup-header-background-color) calc(var(--popup-header-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-header-background-image), var(--popup-header-background-gradient);
    background-repeat: var(--popup-header-background-repeat), var(--popup-header-background-repeat);
    box-shadow: var(--popup-header-shadow);
    border-color: var(--popup-header-border-color);
}

.popup_zone_footer {
    background-color: color-mix(in srgb, var(--popup-footer-background-color) calc(var(--popup-footer-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-footer-background-image), var(--popup-footer-background-gradient);
    background-repeat: var(--popup-footer-background-repeat), var(--popup-footer-background-repeat);
    box-shadow: var(--popup-footer-shadow);
    border-color: var(--popup-footer-border-color);
    color: var(--popup-footer-text-color);
}