/* ============================================================
   GOBSTAGRAM — DESIGN REDUX v3
   Loaded LAST (see includes/header.php) so it wins every cascade
   tie against gobstagram.css and the older patch stylesheets.

   What this file does:
   1. Defines the Theme Contract v2 tokens (--g-*) at :root using
      Palette v3 (the owner's 64-colour palette, every pairing
      measured for WCAG contrast — see project/research/palette-v3.md
      in the design handoff bundle).
   2. Defines the literal Win98 tri-tone bevel technique
      (--g-bevel98-*), built from those tokens.
   3. "Retires the old presets" (owner's redux directive): the whole
      site now reads the same tokens the opt-in profile-theme-v2 path
      used to gate behind a flag, instead of the hardcoded v1 hex.
   4. Recolours + rebevels the sitewide chrome (shell, header, nav,
      boxes/bands, every button family, inputs, tables, swiper
      controls) with the new palette and the 98.css bevel.
   5. Widens the fixed shell 800px -> 900px.

   Component-level surfaces (post card, composer, profile, pagination)
   have their own dedicated stylesheets loaded after this one; this
   file is the shared foundation they all build on.
   ============================================================ */

/* ============================================================
   1. THEME CONTRACT — canonical tokens, Palette v3 defaults.
   Same 91-key contract the profile Theme Studio already edits
   (see includes/composer_theme.php) — now seeded here as the
   sitewide default instead of only inside body.profile-theme-v2.
   ============================================================ */
:root{
/* ---- Palette v3 ramps ---- */
--g-navy-950:#101114;--g-navy-900:#1d3c66;--g-navy-800:#1d2247;--g-navy-700:#28628f;--g-navy-600:#258cb8;--g-navy-500:#33408f;--g-navy-450:#496ccc;--g-navy-400:#5897f5;--g-navy-300:#7fbef5;--g-navy-200:#42ceeb;--g-navy-100:#d7e0d9;
--g-orange-950:#33211b;--g-orange-900:#52321d;--g-orange-850:#8f4a39;--g-orange-800:#8f4a39;--g-orange-750:#855d30;--g-orange-700:#cc7041;--g-orange-650:#8f4a39;--g-orange-600:#eb9b54;--g-orange-500:#eb9b54;--g-orange-450:#f59f7f;--g-orange-400:#f5db93;--g-orange-300:#f5be6c;--g-orange-250:#f5ccb0;--g-orange-200:#fae7d2;--g-orange-100:#fae7d2;--g-orange-75:#f3e3e3;--g-orange-50:#fcfff2;
--g-orange-line:#cc7041;--g-orange-line-soft:#f5ccb0;--g-orange-line-hard:#8f4a39;
--g-signal:#cc7041;--g-signal-deep:#8f4a39;
--g-steel-700:#1d2247;--g-steel-600:#7f8582;--g-steel-500:#a6ada9;--g-steel-400:#bfc7c1;--g-steel-300:#d7e0d9;--g-steel-100:#f3e3e3;
--g-black:#101114;--g-ink:#272829;--g-ink-soft:#3b3d3d;--g-gray-800:#3b3d3d;--g-gray-700:#585c5b;--g-gray-500:#7f8582;--g-gray-400:#a6ada9;--g-gray-300:#bfc7c1;--g-gray-200:#d7e0d9;--g-gray-125:#f3e3e3;--g-gray-100:#f3e3e3;--g-gray-50:#fcfff2;--g-white:#fcfff2;
--g-danger:#991f2f;--g-danger-deep:#5c1a33;--g-danger-ink:#991f2f;--g-danger-bg:#f3e3e3;--g-danger-bg-soft:#f5ccb0;--g-danger-line:#e53737;
--g-success:#227a2e;--g-success-deep:#1d522b;--g-success-ink:#1d522b;--g-success-bg:#f7fac8;
--g-warn-bg:#f5db93;--g-warn-bg-alt:#f7fac8;--g-warn-ink:#52321d;--g-warn-line:#b88c33;
--g-focus:#313199;--g-focus-alt:#33408f;
--g-link:#1d3c66;--g-link-hashtag:#28628f;--g-link-hashtag-hover:#1d3c66;--g-link-mention:#8f4a39;--g-link-mention-hover:#52321d;--g-link-blog:#28628f;
--g-ph-avatar:#a6ada9;--g-ph-photo:#bfc7c1;--g-ph-portrait:#f5ccb0;--g-ph-portrait-ink:#52321d;
--g-dark-900:#101114;--g-dark-800:#16272c;--g-dark-700:#272829;--g-dark-600:#3b3d3d;--g-dark-line:#3b3d3d;--g-dark-ink:#fcfff2;--g-dark-ink-soft:#d7e0d9;--g-dark-ink-mute:#bfc7c1;
--g-discord:#543fe0;

/* ---- Surfaces ---- */
--g-surface-canvas:#1d3c66;--g-surface-shell:#fcfff2;--g-surface-panel:#fcfff2;
--g-surface-post:#fcfff2;--g-surface-elevated:#fae7d2;--g-surface-inset:#d7e0d9;
/* ---- Text ---- */
--g-text-primary:#101114;--g-text-canvas:#fcfff2;--g-text-secondary:#3b3d3d;
--g-text-muted:#585c5b;--g-text-inverse:#fcfff2;--g-text-heading:#8f4a39;
/* ---- Links and focus ---- */
--g-link-text:#1d3c66;--g-link-hover:#8f4a39;--g-link-visited:#8f3370;--g-focus-ring:#313199;
/* ---- Borders ---- */
--g-border-default:#cc7041;--g-border-subtle:#f5ccb0;--g-border-strong:#8f4a39;
/* ---- Header and navigation ---- */
--g-header-surface:#28628f;--g-header-text:#fcfff2;
--g-nav-surface:#1d3c66;--g-nav-text:#fcfff2;--g-nav-activeSurface:#f5be6c;--g-nav-activeText:#52321d;
/* ---- Profile identity ---- */
--g-identity-surface:#28628f;--g-identity-text:#fcfff2;--g-identity-meta:#d7e0d9;
--g-profile-avatarShape:square;
/* ---- Profile blocks ---- */
--g-block-surface:#fcfff2;--g-block-headerSurface:#f5be6c;--g-block-headerText:#52321d;
/* ---- Posts ---- */
--g-post-surface:#fcfff2;--g-post-headerSurface:#fae7d2;--g-post-text:#101114;--g-post-muted:#585c5b;
--g-post-mediaMat:#101114;--g-post-border:#cc7041;
--g-post-actionSurface:#fae7d2;--g-post-actionText:#52321d;--g-post-actionActive:#991f2f;
--g-post-quoteSurface:#d7e0d9;--g-post-commentSurface:#f3e3e3;--g-post-menuSurface:#fcfff2;
/* ---- Inputs ---- */
--g-input-surface:#fcfff2;--g-input-text:#101114;--g-input-placeholder:#585c5b;--g-input-border:#8f4a39;
/* ---- Buttons ---- */
--g-button-surface:#f5be6c;--g-button-text:#52321d;--g-button-border:#8f4a39;--g-button-hover:#f5db93;
--g-button-active:#eb9b54;--g-button-activeText:#33211b;--g-button-disabled:#bfc7c1;--g-button-disabledText:#585c5b;
/* ---- Tables and lists ---- */
--g-table-labelSurface:#fae7d2;--g-table-valueSurface:#fcfff2;--g-table-border:#f5ccb0;
--g-list-divider:#f5ccb0;--g-list-hover:#fae7d2;
/* ---- Media ---- */
--g-media-tileSurface:#fae7d2;--g-media-tileBorder:#cc7041;
--g-media-captionSurface:#101114;--g-media-captionText:#fcfff2;--g-media-objectFit:cover;
/* ---- Disclosures ---- */
--g-disclosure-surface:#fae7d2;--g-disclosure-text:#52321d;
/* ---- Polls and progress ---- */
--g-poll-track:#f5ccb0;--g-poll-fill:#eb9b54;--g-poll-mine:#8f4a39;
--g-progress-track:#f5ccb0;--g-progress-fill:#eb9b54;--g-countdown-number:#8f4a39;
/* ---- Now Playing ---- */
--g-playlist-stage:#101114;--g-playlist-control:#f5be6c;--g-playlist-active:#eb9b54;
/* ---- Social blocks ---- */
--g-social-surface:#d7e0d9;--g-social-header:#1d3c66;--g-social-text:#101114;--g-social-border:#28628f;
/* ---- Geometry ---- */
--g-geometry-borderWidth:1px;--g-geometry-cornerRadius:0px;--g-geometry-sectionGap:10px;--g-geometry-shadowPanel:none;
/* ---- Typography ---- */
--g-typography-bodyFont:Verdana,Arial,sans-serif;--g-typography-headingFont:Verdana,Arial,sans-serif;
--g-family-ui:Verdana,Arial,Helvetica,sans-serif;--g-family-display:Arial,Helvetica,sans-serif;
--g-family-serif:Georgia,'Times New Roman',serif;--g-family-mono:ui-monospace,Menlo,Consolas,monospace;
/* ---- Canvas / cursor ---- */
--g-canvas-pattern:none;--g-canvas-repeat:repeat;--g-canvas-position:top left;--g-canvas-pattern-image:none;--g-canvas-pattern-size:12px 12px;
--g-cursor-style:default;--g-profile-avatarRadius:0;

/* ---- Fixed layout widths — widened per the redux (was 800px) ---- */
--g-w-shell:900px;--g-w-feed:560px;--g-w-side:300px;--g-w-prof-left:305px;--g-w-prof-right:565px;--g-gutter-shell:10px;--g-gap-col:20px;

/* ---- Win98 tri-tone bevels (98.css technique). Kept here as reference/
   documentation ONLY — do NOT use var(--g-bevel98-raised) etc. directly.
   A custom property that itself contains var() references to other custom
   properties gets those references substituted ONCE, at whichever element
   first declares it (here, :root) — the result inherits down as a frozen
   value, it is not re-resolved per descendant. Concretely: a themed
   profile (body.profile-theme-v2, or the Theme Studio's live preview,
   which override --g-surface-elevated/--g-border-strong/--g-button-*
   scoped to a subtree) would still render bevels in the SITE DEFAULT
   colours, not the theme's own palette, if a rule used
   box-shadow:var(--g-bevel98-raised). Confirmed empirically (Chromium):
   var() chained through an intermediate custom property does not
   re-theme; var() used directly in the consuming property does. So every
   actual consumer below inlines the four-layer recipe with DIRECT
   var(--g-surface-elevated) / var(--g-border-strong) / var(--g-button-*)
   references instead of going through --g-bevel98-*. If you add a new
   beveled element, copy the inline recipe from an existing rule (e.g.
   .g-bevel below) — do not reach for var(--g-bevel98-raised). ---- */
--g-bevel98-raised:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);
--g-bevel98-sunken:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border);
--g-bevel98-raised-thick:inset 2px 2px 0 var(--g-surface-elevated),inset -2px -2px 0 var(--g-border-strong),inset 3px 3px 0 var(--g-button-surface),inset -3px -3px 0 var(--g-button-border);
--g-bevel98-sunken-thick:inset -2px -2px 0 var(--g-surface-elevated),inset 2px 2px 0 var(--g-border-strong),inset -3px -3px 0 var(--g-button-surface),inset 3px 3px 0 var(--g-button-border);
--g-bevel98-disabled:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-gray-300,#bfc7c1),inset 2px 2px 0 var(--g-button-disabled),inset -2px -2px 0 var(--g-gray-300,#bfc7c1);
--g-bevel98-field:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-input-surface),inset 2px 2px 0 var(--g-input-border);
--g-bevel98-window:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-surface-panel),inset -2px -2px 0 var(--g-border-default);
--g-focus-outline:2px solid var(--g-focus-ring);--g-focus-offset:1px;

/* ---- 98.css scrollbar recipe (used on scrollable modules) ---- */
--g-scroll-track:var(--g-surface-inset);--g-scroll-face:var(--g-surface-shell);
}

/* Round avatars are handled by the live contract, which emits
   --g-profile-avatarRadius directly (composer_theme_css) and mirrors it in the
   preview via [data-theme-avatar-shape]. A [data-g-avatar] attribute is never
   written by anything, so the selector it used to carry has been removed. */

/* ============================================================
   2. SITEWIDE ACTIVATION — the tokens above now drive the whole
   site by default (redux directive: "Full v2 — retire old
   presets"), not just the opt-in profile-theme-v2 path.
   ============================================================ */
body{background:var(--g-surface-canvas);cursor:var(--g-cursor-style)}
a{color:var(--g-link-text)}
a:hover{color:var(--g-link-hover)}
a:visited{color:var(--g-link-visited)}
:focus-visible{outline:2px solid var(--g-focus-ring);outline-offset:2px}

#shell{width:var(--g-w-shell);background:var(--g-surface-shell);border-left-color:var(--g-surface-shell);border-right-color:var(--g-surface-shell)}
#feedcol{width:var(--g-w-feed)}
#sidecol{width:var(--g-w-side)}
#leftcol{width:var(--g-w-prof-left)}
#rightcol{width:var(--g-w-prof-right)}

#header{background:var(--g-header-surface);border-bottom-color:var(--g-border-strong)}
#header .logo{color:var(--g-header-text)}
#header .logo span{color:var(--g-identity-meta)}
#header .search{color:var(--g-header-text)}
#header .search .auth a,#header .search .auth a:visited{color:var(--g-header-text)!important}

#navbar,#navbar.nav-flat{background:var(--g-nav-surface);color:var(--g-nav-text)}
#navbar a{color:var(--g-nav-text)}
#navbar a:hover{color:var(--g-nav-activeText);background:var(--g-nav-activeSurface);text-decoration:none}
#navbar a.active{color:var(--g-nav-activeText);background:var(--g-nav-activeSurface);font-weight:bold;text-decoration:none}
#navbar a,#navbar a.active{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px}
#navbar .nav-sep{color:var(--g-nav-text);opacity:.5}

/* ---- boxes / bands ---- */
.box .hd{background:var(--g-block-headerSurface);border:var(--g-geometry-borderWidth) solid var(--g-border-strong);border-bottom:0;color:var(--g-block-headerText)}
.box .bd{border:var(--g-geometry-borderWidth) solid var(--g-border-default);background:var(--g-surface-panel);color:var(--g-text-primary)}
/* --g-band-bg was a v1 leftover that Theme Contract v2 never emits, so this
   always fell through to the fallback anyway. Both halves now name tokens the
   Theme Studio actually offers (Foundation → border.strong, Sections & text →
   text.inverse), which is what makes the band themeable at all. */
.band{background:var(--g-border-strong);color:var(--g-text-inverse)}
.stories{border-color:var(--g-border-default);background:var(--g-surface-panel)}
.miniprof{border-color:var(--g-border-default);background:var(--g-surface-panel)}
.blogentry{border-color:var(--g-border-default);background:var(--g-surface-panel)}
.blogtitle{color:var(--g-text-heading)}
.blogbody a{color:var(--g-link-blog)}
.blogbody blockquote{border-left-color:var(--g-border-default);background:var(--g-surface-elevated);color:var(--g-text-secondary)}
.bulletin{border-color:var(--g-border-default);background:var(--g-surface-panel)}
.bulletin .bsubject{color:var(--g-text-heading)}
table.info caption{background:var(--g-header-surface);color:var(--g-header-text);border-color:var(--g-border-strong)}
table.info th,table.info td{border-color:var(--g-border-default)}
table.info th{background:var(--g-table-labelSurface);color:var(--g-text-heading)}
table.comments td{border-color:var(--g-border-default)}
table.comments td.who{background:var(--g-surface-elevated)}
table.msghead th,table.msghead td{border-color:var(--g-border-default)}
table.msghead th{background:var(--g-table-labelSurface);color:var(--g-text-heading)}
.notiflist li.unseen{background:var(--g-list-hover);border-left-color:var(--g-border-default)}
.resultlist li,.bloglist li,.sugg li{border-bottom-color:var(--g-border-subtle)}
.taglist li{border-bottom-color:var(--g-nav-surface)}
.taglist .hashtag{color:var(--g-navy-300)}
.taglist .hashtag:hover{color:var(--g-nav-activeSurface)}
a.hashtag{color:var(--g-link-hashtag)}
a.hashtag:hover{color:var(--g-link-hashtag-hover)}
.flash{background:var(--g-warn-bg);border-color:var(--g-border-default);color:var(--g-warn-ink)}
.online{color:var(--g-signal-deep)}
.friendcount b{color:var(--g-danger)}
.commentcount b{color:var(--g-danger)}
.delwall{color:var(--g-danger)}
.charcnt.warn{color:var(--g-orange-700)}
.charcnt.over{color:var(--g-danger)}
.notif-badge{background:var(--g-danger)}
#footer{border-top-color:var(--g-border-subtle);color:var(--g-text-muted)}
.dots-drop,.repost-drop{background:var(--g-post-menuSurface);border-color:var(--g-border-default)}
.dots-drop a,.repost-drop a{color:var(--g-link-text);border-bottom-color:var(--g-border-subtle)}
.dots-drop a:hover,.repost-drop a:hover{background:var(--g-list-hover)}
.dots-drop a.danger{color:var(--g-danger)}
.story .ring{background:var(--g-signal)}
.story.seen .ring{background:var(--g-steel-400)}
.pgthumb{background:var(--g-surface-elevated);border-color:var(--g-border-default)}
.pgthumb:hover{border-color:var(--g-border-strong)}
.ac-drop{background:var(--g-nav-surface);border-color:var(--g-border-default)}
.ac-drop li:hover,.ac-drop li.ac-sel{background:var(--g-navy-800);color:var(--g-nav-activeSurface)}

/* ============================================================
   3. WIN98 BEVEL — every button family loses the single-colour
   outset border and gains the literal tri-tone box-shadow.
   Colour is owned entirely here; nothing above sets it inline.
   ============================================================ */
.btn,.bigbtn,a.bigbtn-inline,.pact,.pl-btn,.player .btn,.pnl-tools .tool,
input[type=submit],input[type=button],input[type=reset],
.searchform input[type=submit],#header .search .headsearch input[type=submit],
.mailtabs a,.top8picker .slotrow select,.th-preset button,
.gallery .swiper-button-next,.gallery .swiper-button-prev,
#lb-prev,#lb-next,.crop-icon-button,.composer-theme-convert,
.composer-block-tools button,.composer-inspector-tabs button{
  background:var(--g-button-surface);color:var(--g-button-text);
  border:0;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);border-radius:var(--g-geometry-cornerRadius);
  cursor:pointer;
}
.btn:hover:not(:disabled),.bigbtn:hover,a.bigbtn-inline:hover,.pact:hover,.pl-btn:hover,
.player .btn:hover,.pnl-tools .tool:hover,
input[type=submit]:hover,input[type=button]:hover,
.searchform input[type=submit]:hover,
.gallery .swiper-button-next:hover,.gallery .swiper-button-prev:hover{
  background:var(--g-button-hover);
}
.btn:active,.bigbtn:active,a.bigbtn-inline:active,.pact:active,.pact.on,.pl-btn:active,
.player .btn:active,.pnl-tools .tool:active,.pnl-tools .tool.on,
input[type=submit]:active,input[type=button]:active,
.searchform input[type=submit]:active,
.gallery .swiper-button-next:active,.gallery .swiper-button-prev:active,
#lb-prev:active,#lb-next:active,.mailtabs a.on{
  box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border);background:var(--g-button-active);color:var(--g-button-activeText);
  border-style:solid;
}
.btn.busy{background:var(--g-border-strong);color:var(--g-text-inverse);box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border)}
.btn:disabled,input[type=submit]:disabled{background:var(--g-button-disabled);color:var(--g-button-disabledText);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-gray-300,#bfc7c1),inset 2px 2px 0 var(--g-button-disabled),inset -2px -2px 0 var(--g-gray-300,#bfc7c1);cursor:default}
.btn:disabled:active{box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-gray-300,#bfc7c1),inset 2px 2px 0 var(--g-button-disabled),inset -2px -2px 0 var(--g-gray-300,#bfc7c1)}
/* "Big"/primary emphasis gets the thicker 2px reading edge */
.bigbtn,a.bigbtn-inline,.pact-primary,.searchform input[type=submit],.mailtabs a.compose{box-shadow:inset 2px 2px 0 var(--g-surface-elevated),inset -2px -2px 0 var(--g-border-strong),inset 3px 3px 0 var(--g-button-surface),inset -3px -3px 0 var(--g-button-border)}
.bigbtn:active,a.bigbtn-inline:active,.pact-primary:active,.pact-primary.on{box-shadow:inset -2px -2px 0 var(--g-surface-elevated),inset 2px 2px 0 var(--g-border-strong),inset -3px -3px 0 var(--g-button-surface),inset 3px 3px 0 var(--g-button-border)}
/* Secondary/"plain" family (steel) keeps a visibly cooler face than primary */
.btn.plain{background:var(--g-steel-300);color:var(--g-nav-surface);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border)}
.btn.plain:hover{background:var(--g-steel-200,var(--g-steel-300))}
.btn.plain:active{background:var(--g-steel-400);box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border)}
:is(.btn,.bigbtn,.pact,.pl-btn,input[type=submit],input[type=button]):focus-visible{outline:2px solid var(--g-focus-ring);outline-offset:2px}

/* ---- Sunken 98 fields ---- */
.authform input[type=text],.authform input[type=password],.authform textarea,.authform input[type=file],
#header .search .headsearch input[type=text],.searchform input[type=text],
.cmp-bar input[type=text],.reply-box .addc input[type=text],.post .addc input[type=text],
form.addc input[type=text],form.addc textarea,#global-search{
  background:var(--g-input-surface);color:var(--g-input-text);
  border:0;box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-input-surface),inset 2px 2px 0 var(--g-input-border);padding:4px;
}
.authform input[type=text]:focus-visible,.authform textarea:focus-visible,
#global-search:focus-visible,.searchform input[type=text]:focus-visible,
.cmp-bar input[type=text]:focus-visible,form.addc input[type=text]:focus-visible{
  outline:2px solid var(--g-focus-ring);outline-offset:1px;
}
.authform label{color:var(--g-text-heading)}

/* ============================================================
   4. SCROLLBAR — 98.css dithered scrollbar utility, for any
   internal scroller (profile post box, long module bodies).
   ============================================================ */
.g-scroll98{scrollbar-color:var(--g-button-surface) var(--g-surface-inset);scrollbar-width:auto}
.g-scroll98::-webkit-scrollbar{width:17px;height:17px}
.g-scroll98::-webkit-scrollbar-track{background-color:var(--g-surface-inset);background-image:repeating-conic-gradient(var(--g-surface-shell) 0% 25%,var(--g-surface-inset) 0% 50%);background-size:2px 2px}
.g-scroll98::-webkit-scrollbar-thumb{background:var(--g-button-surface);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border)}
.g-scroll98::-webkit-scrollbar-thumb:active{background:var(--g-button-active);box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border)}
.g-scroll98::-webkit-scrollbar-corner{background:var(--g-surface-inset)}

/* ============================================================
   5. POST CARD — carry the Theme Contract outward. post-card-
   refresh.css sets --pc-* to literal v2 hex unconditionally and
   only reads --g-post-* inside the opt-in .theme-v2 scope; this
   makes every .post everywhere (home feed, blog comments, a
   profile that never opted into Theme Studio) read the v3
   contract by default, same specificity, later in the cascade.
   ============================================================ */
.post{
  --pc-surface:var(--g-post-surface,#fcfff2);
  --pc-header:var(--g-post-headerSurface,#fae7d2);
  --pc-text:var(--g-post-text,#101114);
  --pc-muted:var(--g-post-muted,#585c5b);
  --pc-link:var(--g-link-text,#1d3c66);
  --pc-link-hover:var(--g-link-hover,#8f4a39);
  --pc-border:var(--g-post-border,#cc7041);
  --pc-subtle-border:var(--g-border-subtle,#f5ccb0);
  --pc-media:var(--g-post-mediaMat,#101114);
  --pc-action-surface:var(--g-post-actionSurface,#fae7d2);
  --pc-action-text:var(--g-post-actionText,#52321d);
  --pc-action-active:var(--g-post-actionActive,#991f2f);
  --pc-action-hover:var(--g-button-hover,#f5db93);
  --pc-quote:var(--g-post-quoteSurface,#d7e0d9);
  --pc-comment:var(--g-post-commentSurface,#f3e3e3);
  --pc-menu:var(--g-post-menuSurface,#fcfff2);
  --pc-input:var(--g-input-surface,#fcfff2);
  --pc-input-text:var(--g-input-text,#101114);
  --pc-input-border:var(--g-input-border,#8f4a39);
  --pc-focus:var(--g-focus-ring,#313199);
  --pc-inset:12px;
  --pc-inset-compact:9px;
}
/* Post action buttons pick up the bevel too — the redux moves the
   action row from flat ghost buttons to real beveled controls
   matching the rest of the site, with more weight: 36px rows,
   16px icons, 10px gaps, counts set back in muted colour. */
.post .acts{gap:10px;min-height:auto;padding:8px var(--pc-inset)}
.post .acts .ico,.post .acts .repost-caret{
  background:var(--g-button-surface);color:var(--g-button-text);
  border:0;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);
  min-height:36px;padding:8px 10px;gap:6px;
}
.post .acts .pxi{width:16px;height:16px;flex-basis:16px}
.post .acts .ico:hover:not([disabled]){background:var(--g-button-hover)}
.post .acts .ico:active:not([disabled]),.post .acts .ico[aria-pressed="true"]:not([disabled]),
.post .acts .liked,.post .acts .saved,.post .acts .reposted{
  box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border);background:var(--g-button-active);color:var(--g-button-activeText);
}
/* Counts take their button's own label colour. They used to be set back in
   --pc-muted-strong, which read --g-post-mutedStrong: a token this file
   declares at :root but that the server contract has no member for (the post
   family stops at post.muted, see composer_theme_token_definitions). Theme
   Studio therefore could never override it, so every themed profile kept the
   :root #3b3d3d -- fine on the default peach at 6.5:1, invisible on a dark
   profile at 1.5:1. Mapping it to post.muted themes correctly but drops the
   default theme to 4.0:1, under AA, so the set-back look is what goes.
   inherit is legible in every theme by construction, and is what the pressed
   state already did. */
.post .acts .likecount,.post .acts b{color:inherit;font-weight:bold;font-variant-numeric:tabular-nums}
.post .acts .ico:is(:active,[aria-pressed="true"]) b,
.post .acts .liked b,.post .acts .saved b,.post .acts .reposted b{color:inherit}
.post .acts .repost-caret{padding:8px 8px;margin-left:2px}
/* Reserve enough width for each button's longer state (label text changes
   Like<->Liked / Repost<->Reposted, plus a count appearing) so pressing it
   doesn't visibly resize the button and shove its neighbours sideways.
   Sized to the longest common case (one-digit count); a genuinely large
   count is rare and allowed to grow past this floor rather than clip. */
.post .acts .likebtn{min-width:90px}
.post .acts .repost-btn{min-width:114px}
.post .cmts .c,.post .acts .ico{font-size:12px}
.post .acts .ico:focus-visible,.post .acts .repost-caret:focus-visible{outline:2px solid var(--g-focus-ring);outline-offset:2px}

/* ============================================================
   6. CHROME ICONS — window controls, disclosure, search, loading.
   Separate vocabulary from the posting-UI .pxi set (pixel-posting-
   icons.css): mask-image on images/ui/chrome-icons/, same technique.
   ============================================================ */
.gic{
  display:inline-block;width:14px;height:14px;flex:0 0 14px;vertical-align:-2px;
  background-color:currentColor;background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  image-rendering:pixelated;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}
.gic-close{-webkit-mask-image:url('../images/ui/chrome-icons/close.svg');mask-image:url('../images/ui/chrome-icons/close.svg')}
.gic-spinner{-webkit-mask-image:url('../images/ui/chrome-icons/spinner.svg');mask-image:url('../images/ui/chrome-icons/spinner.svg')}
.gic-chevron-up{-webkit-mask-image:url('../images/ui/chrome-icons/chevron-up.svg');mask-image:url('../images/ui/chrome-icons/chevron-up.svg')}
.gic-chevron-down{-webkit-mask-image:url('../images/ui/chrome-icons/chevron-down.svg');mask-image:url('../images/ui/chrome-icons/chevron-down.svg')}
.gic-search{-webkit-mask-image:url('../images/ui/chrome-icons/search.svg');mask-image:url('../images/ui/chrome-icons/search.svg')}
.gic-cog{-webkit-mask-image:url('../images/ui/chrome-icons/cog.svg');mask-image:url('../images/ui/chrome-icons/cog.svg')}
.gic-spin{animation:g-spin 1s linear infinite}
@keyframes g-spin{from{transform:rotate(0)}to{transform:rotate(359deg)}}
@media (forced-colors:active){.gic{background-color:ButtonText}}

/* ============================================================
   7. PAGINATION — numbered pager (includes/pagination.php) and the
   AJAX "Load more" button (js/app.js loadMore(), #load_more_btn).
   ============================================================ */
.g-pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 0;padding:6px 0}
.g-pager-nav{display:inline-flex;align-items:center;gap:5px}
.g-pager-nav[aria-disabled="true"]{background:var(--g-button-disabled);color:var(--g-button-disabledText);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-gray-300,#bfc7c1),inset 2px 2px 0 var(--g-button-disabled),inset -2px -2px 0 var(--g-gray-300,#bfc7c1);cursor:default}
.g-pager-nav .gic{background-color:currentColor}
.g-pager-nums{display:inline-flex;align-items:center;gap:3px}
.g-pager-num{min-width:26px;text-align:center;padding:3px 6px}
.g-pager-current{background:var(--g-button-active);color:var(--g-button-activeText);box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border)}
.g-pager-ellipsis{padding:0 3px;color:var(--g-text-muted)}

/* AJAX "Load more" — chevron leads the label per the redux review. */
.loadmore-wrap{text-align:center;margin:10px 0}
.bigbtn.loadmore,#load_more_btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:160px}
.bigbtn.loadmore::before,#load_more_btn::before{content:"";display:inline-block;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('../images/ui/chrome-icons/chevron-down.svg') center/contain no-repeat;mask:url('../images/ui/chrome-icons/chevron-down.svg') center/contain no-repeat}
.bigbtn.loadmore:disabled::before,#load_more_btn:disabled::before{animation:g-spin 1s linear infinite;-webkit-mask-image:url('../images/ui/chrome-icons/spinner.svg');mask-image:url('../images/ui/chrome-icons/spinner.svg')}
.bigbtn.loadmore.loadmore-retry::before,#load_more_btn.loadmore-retry::before{-webkit-mask-image:url('../images/ui/chrome-icons/close.svg');mask-image:url('../images/ui/chrome-icons/close.svg')}

/* ---- Profile: identity header, blocks, pinned post, post-box scrollbar ---- */
.prof-head{box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-surface-panel),inset -2px -2px 0 var(--g-border-default);background:var(--g-surface-panel);border:0;padding:14px}
.prof-name{color:var(--g-text-heading)}
.prof-handle,.blogcard-t,.g-explore-people .nm a{overflow-wrap:anywhere}
.pblock{box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-surface-panel),inset -2px -2px 0 var(--g-border-default);background:var(--g-block-surface);border:0}
.pb-hd{background:var(--g-block-headerSurface);color:var(--g-block-headerText);border:0}
.pb-hd-x,.pb-hd-x a{color:inherit}
.post-pinflag{margin-bottom:0!important;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);background:var(--g-button-surface)}
.post-pinflag .pinned-badge{display:flex;align-items:center;gap:5px;padding:4px 8px;font:bold 10px Arial,sans-serif;color:var(--g-button-text);text-transform:uppercase;letter-spacing:.04em}
.post-pinflag+.post{border-top:0}
.profile-posts,.profile-rail-row .profile-post-panel .profile-posts{scrollbar-color:var(--g-button-surface) var(--g-surface-inset)!important}
.profile-posts::-webkit-scrollbar,.profile-rail-row .profile-post-panel .profile-posts::-webkit-scrollbar{width:17px}
.profile-posts::-webkit-scrollbar-track,.profile-rail-row .profile-post-panel .profile-posts::-webkit-scrollbar-track{background-color:var(--g-surface-inset);background-image:repeating-conic-gradient(var(--g-surface-shell) 0% 25%,var(--g-surface-inset) 0% 50%);background-size:2px 2px}
.profile-posts::-webkit-scrollbar-thumb,.profile-rail-row .profile-post-panel .profile-posts::-webkit-scrollbar-thumb{background:var(--g-button-surface);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border)}
.profile-post-panel,.profile-rail-row .profile-post-panel{border:0!important;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-surface-panel),inset -2px -2px 0 var(--g-border-default);background:var(--g-surface-panel)!important}

/* ---- Blog index/detail ---- */
.tagchip{display:inline-block;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);background:var(--g-button-surface);color:var(--g-button-text);padding:2px 7px;font-size:10px;margin:0 4px 4px 0}
.tagchip:hover{background:var(--g-button-hover);color:var(--g-button-text);text-decoration:none}
/* Blog index cards and rail blocks use the same semantic contract as profile content. */
#content.blogsindex .crumbs,#content.blogsindex .pb-sub,#content.blogsindex .blogcard-meta,#content.blogsindex .blogcard-counts,#content.blogsindex .empty-state{color:var(--g-text-muted)}
#content.blogsindex .blogcard{border:var(--g-geometry-borderWidth) solid var(--g-post-border);background:var(--g-post-surface);color:var(--g-post-text);padding:12px}
#content.blogsindex .blogcard-av,#content.blogsindex .pb-wallav{background:var(--g-media-tileSurface);border-color:var(--g-media-tileBorder)}
#content.blogsindex .blogcard-x{color:var(--g-post-text)}
#content.blogsindex a.blogcard-t,#content.blogsindex a.blogcard-t:visited{color:var(--g-text-heading);font:bold 15px Georgia,'Times New Roman',serif}
#content.blogsindex a.blogcard-t:hover,#content.blogsindex a.blogcard-t:focus-visible{color:var(--g-link-hover)}
#content.blogsindex .tagchip,#content.blogsindex .tagchip:visited{color:var(--g-button-text)}
#content.blogsindex .pblock .pb-bd{background:var(--g-block-surface);border:0;color:var(--g-text-primary)}
#content.blogsindex .pb-list li,#content.blogsindex .pb-wallrow{border-bottom-color:var(--g-list-divider)}
#content.blogsindex .empty-state a:not(.bigbtn-inline){color:var(--g-link-text)}
#content.blogsindex .empty-state a:not(.bigbtn-inline):hover,#content.blogsindex .empty-state a:not(.bigbtn-inline):focus-visible{color:var(--g-link-hover)}
.prof-tabs{background:var(--g-nav-surface);border-color:var(--g-border-default)}
.prof-tabs .ptab{background:var(--g-nav-surface);border-color:var(--g-border-default);color:var(--g-nav-text)}
.prof-tabs .ptab.on,.prof-tabs .ptab:hover{background:var(--g-nav-activeSurface);border-color:var(--g-border-default);color:var(--g-nav-activeText)}
/* Profile feed components retain semantic theme tokens inside the legacy rail layout. */
#content.profilepage .profile-rail-row .profile-post-panel{background:var(--g-block-surface)!important;color:var(--g-text-primary)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-tabs .ptab{background:var(--g-nav-surface);border-color:var(--g-border-default);color:var(--g-nav-text)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-tabs .ptab.on,#content.profilepage .profile-rail-row .profile-post-panel .prof-tabs .ptab:hover{background:var(--g-nav-activeSurface);border-color:var(--g-border-default);color:var(--g-nav-activeText)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-composer{background:var(--g-post-surface);border-color:var(--g-post-border);color:var(--g-post-text)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-composer:hover{background:var(--g-post-surface)}
#content.profilepage .profile-rail-row .profile-post-panel .pc-av{background:var(--g-media-tileSurface);border-color:var(--g-media-tileBorder)}
#content.profilepage .profile-rail-row .profile-post-panel .pc-fld{background:var(--g-input-surface);border-color:var(--g-input-border);color:var(--g-input-placeholder)}
#content.profilepage .profile-rail-row .profile-post-panel .pc-btn{background:var(--g-button-surface);border:0;color:var(--g-button-text);box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-composer:hover .pc-btn{background:var(--g-button-hover)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-composer:active .pc-btn{background:var(--g-button-active);color:var(--g-button-activeText);box-shadow:inset -1px -1px 0 var(--g-surface-elevated),inset 1px 1px 0 var(--g-border-strong),inset -2px -2px 0 var(--g-button-surface),inset 2px 2px 0 var(--g-button-border)}
#content.profilepage .profile-rail-row .profile-post-panel .prof-composer:focus-visible{outline:2px solid var(--g-focus-ring);outline-offset:2px}
#content.profilepage .profile-rail-row .profile-post-panel .profile-posts,#content.profilepage .profile-rail-row .profile-post-panel .profile-posts>.loadmore-wrap{background:var(--g-post-surface);border-color:var(--g-post-border);color:var(--g-post-text)}
#content.profilepage .profile-rail-row .profile-post-panel .profile-posts>.post{background:var(--g-post-surface);border-color:var(--g-post-border);color:var(--g-post-text)}
#content.profilepage .profile-rail-row .profile-post-panel .profile-posts>.post .top{background:var(--g-post-headerSurface);border-color:var(--g-post-border);color:var(--g-post-text)}
#content.profilepage .profile-rail-row .profile-post-panel .empty-state{color:var(--g-text-muted)}
#content.profilepage .profile-rail-row .profile-post-panel .empty-state a:not(.bigbtn-inline){color:var(--g-link-text)}
#content.profilepage .profile-rail-row .profile-post-panel .empty-state a:not(.bigbtn-inline):hover,#content.profilepage .profile-rail-row .profile-post-panel .empty-state a:not(.bigbtn-inline):focus-visible{color:var(--g-link-hover)}

/* ---- Explore page ---- */
.g-explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 0}
.g-explore-tile{display:block;aspect-ratio:1;border:var(--g-geometry-borderWidth) solid var(--g-border-default);background:var(--g-ph-photo);overflow:hidden}
.g-explore-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity var(--g-motion-fast)}
.g-explore-tile:hover img{opacity:.82}
.g-explore-people{padding:6px 0}
.g-explore-tags{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.g-tag-chip{display:inline-flex;align-items:center;gap:6px;box-shadow:inset 1px 1px 0 var(--g-surface-elevated),inset -1px -1px 0 var(--g-border-strong),inset 2px 2px 0 var(--g-button-surface),inset -2px -2px 0 var(--g-button-border);background:var(--g-surface-elevated);color:var(--g-block-headerText);padding:6px 10px;font-size:11px}
.g-tag-chip:hover{background:var(--g-button-hover);text-decoration:none}
.g-tag-chip span{color:var(--g-text-muted);font-weight:bold}
@media (max-width:620px){.g-explore-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- Discord mark — third-party brand, plain <img>, not masked ---- */
.g-discord-mark{width:14px;height:14px;vertical-align:-2px;margin-right:5px;filter:brightness(0) saturate(100%)}
.g-discord-btn{display:inline-flex;align-items:center;padding:3px 9px;font:bold 10px Verdana,sans-serif;text-decoration:none!important}
.g-discord-btn .g-discord-mark{filter:none}
#header .search .auth{display:flex;align-items:center;justify-content:flex-end;gap:6px}

/* ---- Sidebar Discord widget + ad slot ---- */
.g-discord-widget .hd{display:flex;align-items:center}
.g-discord-widget .hd .g-discord-mark{filter:none}
.g-discord-status{font-size:10px;color:var(--g-text-muted)}
.g-discord-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g-success);margin-right:4px}
.g-sidead{text-align:center}
.g-sidead .adlabel{font-size:9px;color:var(--g-text-muted);display:block;margin-bottom:4px}
.g-sidead-slot{width:300px;height:250px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:var(--g-surface-inset);border:1px dashed var(--g-border-default);color:var(--g-text-muted);font-size:11px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:920px){
  #shell{width:100%;max-width:900px}
}

/* ============================================================
   8. MOBILE COLUMN RESET — narrow-viewport override for the
   fixed-width columns above (gobstagram.css's legacy floats and
   this file's own --g-w-feed/--g-w-side/--g-w-prof-* widths).
   Loaded after both, so it wins the cascade at <=620px without
   needing !important. Do NOT reach for overflow-x:hidden instead
   of this — that hides content, it doesn't fix the layout.
   ============================================================ */
@media (max-width: 620px) {
  #shell {
    width: 100%;
    max-width: none;
    border-left-width: 0;
    border-right-width: 0;
  }

  #content {
    padding: 8px 6px;
    min-width: 0;
    box-sizing: border-box;
  }

  #feedcol,
  #sidecol,
  #leftcol,
  #rightcol {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #sidecol {
    margin-top: 12px;
  }

  .post,
  .gallery,
  .post-swiper,
  .post-swiper .swiper-slide,
  .gallery .swiper-pagination,
  .prof-composer,
  .feed-tabs,
  #compose,
  .cmp-bar,
  .prof-body,
  .prof-feed,
  .prof-rail {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .prof-body {
    flex-wrap: wrap;
  }

  .prof-feed,
  .prof-rail {
    width: 100%;
  }

  .post .cap,
  .post .top,
  .post .acts,
  .post .cmts,
  .post .addc {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ---- Step 1.2: header stacks instead of packing into one row ---- */
@media (max-width: 620px) {
  #header {
    padding: 8px;
  }

  #header .logo,
  #header .search {
    float: none;
    width: 100%;
    box-sizing: border-box;
  }

  #header .search {
    padding-top: 8px;
    text-align: left;
  }

  #header .search .headsearch {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  #header .search .headsearch input[type="text"] {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  #navbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
  }

  #navbar .nav-sep {
    display: none;
  }
}

/* ---- Step 1.3: media obeys the available width instead of spilling ---- */
@media (max-width: 620px) {
  .gallery img,
  .post img,
  .profilepage img {
    max-width: 100%;
  }
}

/* post-card-refresh.css's own <=540px rule shrinks .post .acts .ico to
   3px/4px padding, but it loads before this file, so our unconditional
   bevel sizing above wins the cascade at every width unless re-scaled
   here — without this, the action row stays desktop-sized on phones. */
@media (max-width:540px){
  .post .acts{gap:4px;padding:6px var(--pc-inset)}
  .post .acts .ico{min-height:32px;padding:6px 7px;gap:4px}
  .post .acts .repost-caret{padding:6px 6px}
  .post .acts .pxi{width:14px;height:14px;flex-basis:14px}
}