/*
Theme Name: Baipaz
Theme URI: https://baipaz.com
Description: Child theme of Blocksy for baipaz.com. Owns fonts, design tokens and global CSS as they move out of EMCP snippets. See migration-plan-snippets-to-plugin.md step 2.
Author: Juwan Rodriguez
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baipaz-child
*/

/* ==========================================================================
   Baipaz child theme - global CSS
   --------------------------------------------------------------------------
   This sheet is REGISTERED in functions.php and PRINTED at wp_head 351, not
   enqueued normally. Read the comment block in functions.php before changing
   that: a plain enqueue lands the <link> 49 positions earlier, behind 23
   Ultimate Member stylesheets, and silently hands the cascade to them.

   ORDER IN THIS FILE IS THE CASCADE. Sections appear in the wp_head priority
   order of the snippets they replace, so a fold is a relocation and not a
   cascade change. DO NOT REORDER.

   Fold rules (migration phase 3, from memory/child-theme-css-fold-continuation.md):
   1. Nothing lands here until the snippet it came from is deactivated in the
      SAME session. Two live copies of the same CSS is a cascade bug waiting
      to happen.
   2. Hardcoded values are swapped for var(--...) as each section lands
      (step C is a rule applied DURING the fold, never a later pass). Always
      with a literal fallback, so a section never depends on a token whose
      owner has not been folded yet.
   3. The five wp_footer preview layers (1683/1684/1685/1686/1688) still
      out-cascade everything here. They retire only when every owner they
      touch is folded.
   4. 1688's `.caps h2` and `.ghead2 h2` rules are DELETED on purpose so
      Market's and Community's label rows stay 13px UPPERCASE. Never re-add
      them here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   [1377 @200] Typography - force Inter site-wide.          FOLDED 2026-07-27
   Verbatim from snippet 1377 (backups-css-fold-2026-07-27/snippet_1377_BEFORE.php).

   The snippet also echoed two <link> tags - a fonts.gstatic.com preconnect and
   the Inter request itself. A stylesheet cannot carry those, so they moved to
   functions.php as wp_enqueue_style + wp_resource_hints. Read the comment there
   before deciding that request is redundant: Blocksy only asks for Inter
   400-700, and weight 800 is the computed weight on 240 elements site-wide.

   NO TOKEN SWAP HERE, deliberately. 1402 defines --bpz-font as
   "Inter",system-ui,-apple-system,sans-serif, which is NOT the stack below - the
   fallback chains differ. Adopting the token would be a behaviour change wearing
   the costume of a step-C adoption. Unifying the two stacks is a step-B decision,
   not part of a relocation.

   Relocation proof: moving <style id="bpz-typography"> from document position 78
   to immediately after this stylesheet's own <link> (84) produced a ZERO
   computed-style diff on People, Market, Events, Community and Account. The only
   wp_head block it crosses that is not itself a fold target is 1404 @320, which
   sets no font-family at all.
   -------------------------------------------------------------------------- */
html,body,button,input,select,textarea,optgroup,h1,h2,h3,h4,h5,h6,p,a,ul,ol,li,label,td,th,blockquote,figcaption,.entry-content,[class*="bpz-"]{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;}
/* keep icon glyphs + svg out of the override (they carry their own font-family) */
.bpz-cardico,svg,svg *{font-family:revert !important;}


/* --------------------------------------------------------------------------
   [1402 @300] Design system - canonical tokens + components. FOLDED 2026-07-27
   Verbatim from snippet 1402 (backups-css-fold-2026-07-27/snippet_1402_BEFORE.php).

   THIS SECTION MUST STAY ABOVE [1498]. 1498 redefines --bpz-green,
   --bpz-green-accent, --bpz-green-deep and --theme-palette-color-1/2, and
   --bpz-green-deep carries NO !important - it beats the value below by source
   order alone. Move this section under [1498] and the site's greens change.

   NO TOKEN SWAP IN THE BATCH 1 RULES BELOW, and the reason is not caution, it
   is arithmetic: #00a651 is this section's OWN --bpz-green, but [1498]
   redefines that token to #0A8534. Rewriting `background:#00a651` as
   `var(--bpz-green,#00a651)` would therefore RE-COLOUR every one of those
   controls. Token adoption is only value-preserving when no later layer
   redefines the token - here one does. Batch 1 is step-B material anyway
   (`.um-button`, `.elementor-button-link`, the #um_account_submit_* IDs and
   `.bpz-sol-cbtn` are all in the button family); it moves verbatim now and gets
   reconciled when that family is consolidated. `border-radius:9999px` ->
   var(--bpz-r-pill,9999px) IS value-preserving and is the safe first swap when
   that time comes.

   Crossings resolved by hook+priority, not by title: the only ACTIVE wp_head
   snippets between 200 and 400 are 1377 @200, 1402 @300, 1404 @320 and
   1681 @350. Moving to 351 therefore crosses 1404 (higher specificity AND the
   identical #00a651 - wins either way) and 1681 (disjoint selectors; its :root
   block owns the --bpz-text- and --bpz-lead- families, this one owns the greens
   and the radii).

   NEVER write a token glob as --bpz-text-<star>/--bpz-lead-<star> in a comment
   here. That sequence closes the comment early and the CSS that follows is
   parsed as a selector and DROPPED. It cost this section its whole :root block
   on the first write; CSSOM read 21 rules where the file has 22, and the fold's
   deactivation simulation is what caught it.
   -------------------------------------------------------------------------- */
:root{
--bpz-green:#00a651;--bpz-green-accent:#1ea64e;--bpz-green-deep:#0c5a34;
--bpz-ink:#1f2a28;--bpz-name:#3d5a2b;--bpz-text:#374151;--bpz-muted:#6b7280;--bpz-soft:#9aa3a1;
--bpz-border:#eef1f0;--bpz-tint:#fbfdfc;--bpz-chip:#ecfff5;
--bpz-r-card:18px;--bpz-r-pill:9999px;--bpz-r-ctl:12px;
--bpz-shadow:0 6px 20px rgba(17,24,28,.08);--bpz-shadow-hover:0 12px 30px rgba(17,24,28,.13);
--bpz-font:"Inter",system-ui,-apple-system,sans-serif;
}
.bpz-ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:var(--bpz-r-pill);background:var(--bpz-green);color:#fff;font-family:var(--bpz-font);font-weight:700;font-size:14.5px;line-height:1;border:0;cursor:pointer;text-decoration:none;transition:filter .15s ease,transform .15s ease,box-shadow .15s ease;}
.bpz-ds-btn:hover{filter:brightness(.95);transform:translateY(-1px);}
.bpz-ds-btn--2{background:#fff;color:var(--bpz-green-accent);border:1px solid var(--bpz-green-accent);}
.bpz-ds-btn--2:hover{background:var(--bpz-chip);filter:none;}
.bpz-ds-card{background:#fff;border:1px solid var(--bpz-border);border-radius:var(--bpz-r-card);box-shadow:var(--bpz-shadow);}
.bpz-ds-card--hover{transition:box-shadow .18s ease,transform .18s ease;}
.bpz-ds-card--hover:hover{box-shadow:var(--bpz-shadow-hover);transform:translateY(-2px);}
.bpz-ds-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--bpz-r-pill);background:var(--bpz-chip);color:var(--bpz-green-accent);font-family:var(--bpz-font);font-weight:800;font-size:13px;}
.bpz-ds-sechead{font-family:var(--bpz-font);font-weight:800;font-size:22px;color:var(--bpz-ink);}

/* ===== Batch 1: normalize off-brand controls to the Directory benchmark ===== */
/* Primary CTAs across pages -> solid directory green, full pill (kill gradients / old hue) */
.bpz-sol-cbtn,.bpz-sol-searchbtn,.bpz-ev-cbtn,.bpz-ev-searchbtn,.bpz-btn.bpz-btn-primary,.um-button:not(.um_account_inactive),.elementor-button-link{
background:#00a651 !important;background-image:none !important;color:#fff !important;border-radius:9999px !important;box-shadow:none !important;
}
/* Account submit button is ID-styled by 1357 (gradient) - beat it with an ID-level override */
#um_account_submit_general,#um_account_submit_password,#um_account_submit_privacy,#um_account_submit_delete,.um-account .um-form .um-button:not(.um_account_inactive){
background:#00a651 !important;background-image:none !important;color:#fff !important;border-radius:9999px !important;box-shadow:none !important;
}
.bpz-sol-cbtn:hover,.bpz-sol-searchbtn:hover,.bpz-ev-cbtn:hover,.bpz-ev-searchbtn:hover,.bpz-btn.bpz-btn-primary:hover,.um-button:not(.um_account_inactive):hover{filter:brightness(.95) !important;}
/* Off-brand color fixes */
.bpz-ev-mon{color:#1ea64e !important;}
.um-account-icon,.um-account-icon i,.um-faicon-user,[class*="um-account"] i{color:#00a651 !important;}
.um-request-button{background:#00a651 !important;border-color:#00a651 !important;color:#fff !important;}
.elementor-social-icon{background-color:#00a651 !important;}


/* --------------------------------------------------------------------------
   [1496 @330] A11Y - site-wide keyboard focus ring.           FOLDED 2026-07-27
   Verbatim from snippet 1496 (backups-css-fold-2026-07-27/snippet_1496_BEFORE.php),
   with the one hardcoded green swapped for the token it already equals.
   #0A8534 is --bpz-green as 1498 redefines it; the fallback keeps the ring
   visible if the token owner is ever absent.
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bpz-green,#0A8534) !important;outline-offset:2px !important;border-radius:4px;}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;}


/* --------------------------------------------------------------------------
   [1498 @340] Greens to AA contrast - token override.       FOLDED 2026-07-27
   Verbatim from snippet 1498 (backups-css-fold-2026-07-27/snippet_1498_BEFORE.php).
   This IS the token definition layer, so there is nothing here to swap for a
   var() reference - it is what everything else references.
   It overrides the [1402] greens above it and must stay BELOW that section
   forever. Note --bpz-green-deep carries NO !important: it beats 1402's value
   by source order alone, which is exactly why the order of these sections is
   load-bearing rather than cosmetic.
   -------------------------------------------------------------------------- */
:root{
  --bpz-green:#0A8534 !important;
  --bpz-green-accent:#0C5A34 !important;
  --bpz-green-deep:#00452B;
  --theme-palette-color-1:#0A8534 !important;
  --theme-palette-color-2:#0C5A34 !important;
}


/* --------------------------------------------------------------------------
   [1681 @350] Type-scale tokens + 16px input floor.        FOLDED 2026-07-27
   Verbatim from snippet 1681 (backups-css-fold-2026-07-27/snippet_1681_BEFORE.php).

   THIS SECTION STAYS LAST. The snippet's own header states the contract: it must
   sit after 1402 @300 / 1404 @320 / 1496 @330 / 1498 @340 so its tokens
   out-cascade the design-system layer. Section order in this file reproduces
   that, and 350 -> 351 is a one-slot move that crosses nothing - the resolved
   ACTIVE wp_head set between 200 and 400 is 1377, 1402, 1404 and 1681 only.

   Nothing here is token-adopted, and there is nothing to adopt: this section IS
   a token definition layer. Its --bpz-text- and --bpz-lead- families still have
   ZERO consumers site-wide, so the only day-one visible rule is the input floor
   at the bottom.

   The floor is FLOOR-ONLY (max()) and head-level by design: deliberate
   higher-specificity footer specs still win, and 1408's mobile search clamp
   survives untouched. That is settled, not a defect.
   -------------------------------------------------------------------------- */
:root{
  /* ── Functional roles — constant across devices; never scale these with viewport ── */
  --bpz-text-micro:.75rem;       /* 12px  timestamps, legal, tertiary  */
  --bpz-text-secondary:.875rem;  /* 14px  secondary info               */
  --bpz-text-nav:.875rem;        /* 14px  navigation labels            */
  --bpz-text-ui:1rem;            /* 16px  body, buttons, inputs, tabs  */
  --bpz-text-reading:1.0625rem;  /* 17px  bios, posts, descriptions    */

  /* ── Heading roles — fluid mobile→desktop (px at 390 → px at ≥1280) ── */
  --bpz-text-card-title:clamp(1.125rem, 1.05rem + .3vw, 1.25rem);  /* 18 → 20 */
  --bpz-text-section:clamp(1.375rem, 1.1rem + 1vw, 1.75rem);       /* 22 → 28 */
  --bpz-text-page:clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);         /* 28 → 36 */
  --bpz-text-display:clamp(2rem, 1.25rem + 3vw, 3rem);             /* 32 → 48 */

  /* ── Leading ── */
  --bpz-lead-small:1rem;         /* 16px  micro                        */
  --bpz-lead-tight:1.25rem;      /* 20px  secondary, buttons, tabs     */
  --bpz-lead-body:1.5rem;        /* 24px  ui body                      */
  --bpz-lead-reading:1.625rem;   /* 26px = 1.53 on 17px reading; 27 below */
  --bpz-lead-heading:1.2;        /* unitless — pairs with fluid page/display */
  --bpz-lead-subhead:1.25;       /* unitless — pairs with fluid section/card */
}
@media (min-width:745px){:root{
  --bpz-text-micro:.8125rem;     /* 13px */
}}
@media (min-width:1025px){:root{
  --bpz-text-nav:.9375rem;       /* 15px */
  --bpz-lead-reading:1.6875rem;  /* 27px */
}}

/* ── Rule-3 floor: text-entry controls never below 16px (kills iOS input-focus zoom).
      max() raises small controls only — larger sizes pass through unchanged. ── */
body input[type="text"],
body input[type="search"],
body input[type="email"],
body input[type="url"],
body input[type="password"],
body input[type="tel"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input:not([type]),
body select,
body textarea{
  font-size:max(16px, 1em) !important;
}

/* ==========================================================================
   .bpz-px-empty  -  the last-resort profile message
   Added 2026-07-28, group Q follow-up.

   WHY IT IS HERE AND NOT IN SNIPPET 1670 (the profile CSS layer)

   1670 emits through bpz_pf3_css(), which 1494 calls INSIDE
   bpz_pf3_render_inner() at offset 18757. Every .bpz-px-empty site is on a
   path where that output does not exist:

     1494 bpz_pf3_render() catch      the catch DISCARDS render_inner's whole
                                      return value and emits only the <p>
     1494 render_inner  "Profile unavailable."   early return, before 18757
     1494 render_inner  uid < 1                  early return, before 18757
     core social/privacy.php:243      returns WITHOUT calling bpz_pf3_render
     child privacy-ui.php:30          same dispatch, bpz_pv_private_card fallback

   So a rule in 1670 would style none of them - the element only ever appears
   when 1670's stylesheet is absent. It has to live somewhere printed
   unconditionally, and style.css is printed site-wide at wp_head 351.

   It also cannot be a snippet: an ACTIVE 48,600 B body is a full re-emission,
   and this is four declarations. A theme file is the cheaper and safer owner.

   The look is the retired .bpz-tab-empty vocabulary from profile-tabs.php,
   preserved deliberately - that file was cut in the same session and this was
   the site's established empty-state language. 15px clears the 12px floor.
   ========================================================================== */

.bpz-px-empty{
	max-width:560px;
	margin:48px auto;
	padding:36px 24px;
	font-family:"Inter",sans-serif;
	font-size:15px;
	line-height:1.5;
	text-align:center;
	color:#68716f;
	background:#fbfdfc;
	border:1px dashed #dfe4e2;
	border-radius:16px;
}


/* ==========================================================================
   [1249] bpz-ink-css  -  the INK frame vocabulary
   Folded from bpz_ink_frame_css() on 2026-07-27, migration phase 3 step B.

   SOURCE: snippet 1249, byte offset 10902, 13598 B, sha256 6a2a976b...
   The block was emitted INLINE on four surfaces by four snippets that all
   guard the same helper with function_exists - 1249 (init 6), 1489 (10),
   1488 (26) and 1531 (41). The child theme loads before init, so
   functions.php now defines bpz_ink_frame_css() as a stub returning an empty
   string and all four snippets skip their own copy. To revert: restore the
   real function body in functions.php and delete this section.

   MUST STAY LAST IN THIS FILE. Measured on Events before the fold, the child
   stylesheet is at document position 75 and the inline bpz-ink-css block was
   at 83, so ink won every tie against the sections above it. Section order in
   this file IS the cascade; anywhere but last hands those ties to
   1377 / 1402 / 1496 / 1498 / 1681.

   The page-scoped chrome rules below are the 10 body.page-id-N occurrences
   the PHP built from its argument, enumerated for the four surfaces that call
   it. Everything after them is .ink-frame-scoped and was already static.
   ========================================================================== */

/* page chrome - the four surfaces that call the helper: 1064 Events,
   1066 Market, 1203 Community, 998 profile. Grouped rather than repeated
   once per id, so relocating the block does not inflate the !important
   count the consolidation program measures. */
body.page-id-1064 #header.ct-header,body.page-id-1064 #bpz-mnav,body.page-id-1064 .bpz-acct,body.page-id-1064 #bpz-toplogo,body.page-id-1064 #bpz-acctpage,body.page-id-1064 #bpz-acctpage-bd,body.page-id-1066 #header.ct-header,body.page-id-1066 #bpz-mnav,body.page-id-1066 .bpz-acct,body.page-id-1066 #bpz-toplogo,body.page-id-1066 #bpz-acctpage,body.page-id-1066 #bpz-acctpage-bd,body.page-id-1203 #header.ct-header,body.page-id-1203 #bpz-mnav,body.page-id-1203 .bpz-acct,body.page-id-1203 #bpz-toplogo,body.page-id-1203 #bpz-acctpage,body.page-id-1203 #bpz-acctpage-bd,body.page-id-998 #header.ct-header,body.page-id-998 #bpz-mnav,body.page-id-998 .bpz-acct,body.page-id-998 #bpz-toplogo,body.page-id-998 #bpz-acctpage,body.page-id-998 #bpz-acctpage-bd{display:none !important}
body.page-id-1064 #main-container,body.page-id-1066 #main-container,body.page-id-1203 #main-container,body.page-id-998 #main-container{padding-top:0 !important}
body.page-id-1064 article .entry-content,body.page-id-1066 article .entry-content,body.page-id-1203 article .entry-content,body.page-id-998 article .entry-content{margin-top:0 !important;padding-top:0 !important}
body.page-id-1064,body.page-id-1066,body.page-id-1203,body.page-id-998{background:#fff}
@media (max-width:744px){body.page-id-1064,body.page-id-1066,body.page-id-1203,body.page-id-998{padding-bottom:104px}}
.ink-frame{--ink:#16181C;--muted:#5E6573;--faint:#9BA1A6;--hair:#EBEDEC;--paper:#FFF;--wash:#FAFBFA;
--g:#078D2C;--g-deep:#00452B;--r-photo:14px;--font:'Inter',system-ui,sans-serif;
--ease:cubic-bezier(.25,.6,.3,1)}
.ink-frame,.ink-bnav{font-family:var(--font);color:#16181C;-webkit-font-smoothing:antialiased;line-height:1.45;font-size:14px}
.ink-frame *,.ink-bnav *{margin:0;padding:0;box-sizing:border-box}
.ink-frame button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.ink-frame a,.ink-bnav a{color:inherit;text-decoration:none}
.ink-frame img{display:block;width:100%;height:100%;object-fit:cover}
.ink-frame svg{display:block}
.ink-frame ::selection{background:#d8efe0}
.ink-frame .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ink-frame .i18{width:18px;height:18px}
.ink-frame :focus-visible,.ink-bnav :focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:4px}
.ink-frame .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ink-frame .display{font-weight:800;letter-spacing:-.045em;line-height:1.02}
.ink-frame .stars{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700}
.ink-frame .stars .star{width:13px;height:13px;fill:var(--g);stroke:none;flex:none}
.ink-frame .stars em{font-style:normal;color:var(--muted);font-weight:500;font-size:12px}
.ink-frame .vmark{display:inline-flex;align-items:center;gap:4px;color:var(--g);font-size:12px;font-weight:700}
.ink-frame .vmark .icon{width:13px;height:13px;stroke-width:2.4}
.ink-frame .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--g);color:#fff;border-radius:999px;font-size:14px;font-weight:700;padding:12px 22px;transition:background .15s ease,transform .1s ease}
.ink-frame .cta:hover{background:#067424}.ink-frame .cta:active{transform:scale(.98)}
.ink-frame .quiet{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--hair);border-radius:999px;font-size:13px;font-weight:600;padding:8px 13px;color:var(--ink);background:var(--paper);transition:border-color .15s ease,background .15s ease}
.ink-frame .quiet:hover{border-color:#D6DAD8;background:var(--wash)}
.ink-frame{max-width:1560px;margin:0 auto;min-height:100vh}
/* Bottom-nav clearance for the flat bar. Folded from includes/ink-bottom-nav-flat.php (v6/v7,
   wp_footer @185) on 2026-07-28: it lived there only because 1249/1489/1488/1494 were past the
   ~48KB snippet read ceiling, and that reason is gone. 86px = People's 56 + its .cta2 30px
   trailing margin, because every .ink-frame surface ends FLUSH. VERIFY BY THE GAP (padding +
   trailing margin - nav height = 34px), NEVER by the padding number. Nothing later in the
   cascade sets padding-bottom on .ink-frame - censused 2026-07-28 across style.css, every
   includes/ file and all 12 live snippets. */
@media (max-width:744px){.ink-frame{padding-bottom:calc(86px + env(safe-area-inset-bottom))}}
.ink-frame .nav-l,.ink-frame .rail-r{display:none}
.ink-frame .main{min-width:0}
.ink-frame .phead{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top));background:var(--paper);border-bottom:1px solid var(--hair)}
.ink-frame .mark{font-size:19px;font-weight:800;letter-spacing:-.035em}
.ink-frame .mark i{font-style:normal;color:var(--g)}
.ink-frame .phead .sp{flex:1}
.ink-frame .hbtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
.ink-frame .hbtn:hover{background:var(--wash)}
.ink-frame .meav{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--hair)}
.ink-bnav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:flex;gap:2px;width:min(402px,calc(100% - 28px));padding:8px;border-radius:26px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:0 14px 44px rgba(22,24,28,.16)}
.ink-bnav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:19px;font-size:11px;font-weight:600;color:#525A66;transition:color .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}
.ink-bnav a:active{transform:scale(.97)}
.ink-bnav a .icon{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ink-bnav a:active .icon{transform:scale(.9)}
.ink-bnav a.on{color:#16181C}
.ink-bnav a.on .icon{stroke-width:2.1;color:#078D2C;filter:drop-shadow(0 0 6px rgba(7,141,44,.22))}
.ink-bnav a.on::before{content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);width:52px;height:38px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(7,141,44,.22),transparent)}
.ink-bnav a.on::after{content:"";width:4px;height:4px;border-radius:50%;background:#078D2C;margin-top:1px;box-shadow:0 0 8px rgba(7,141,44,.3)}
@media (prefers-reduced-motion:reduce){.ink-bnav a,.ink-bnav a .icon{transition:none}}
.ink-frame .nav-l a{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink);width:fit-content}
.ink-frame .nav-l a:hover{background:var(--wash)}
.ink-frame .nav-l a.on{font-weight:800}
.ink-frame .nav-l .icon{width:23px;height:23px}
.ink-frame .nav-l .cta{margin-top:14px;width:90%;padding:13px}
.ink-frame .nav-l .meline{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px}
.ink-frame .nav-l .meline:hover{background:var(--wash)}
.ink-frame .nav-l .meline .meav{width:36px;height:36px}
.ink-frame .nav-l .meline b{display:block;font-size:14px;font-weight:700}
.ink-frame .nav-l .meline span{display:block;font-size:12px;color:var(--muted)}
.ink-frame .rail-r .box{border:1px solid var(--hair);border-radius:16px;padding:16px;margin-bottom:16px}
.ink-frame .rail-r h3{font-size:16px;font-weight:800;margin-bottom:4px}
.ink-frame .rail-r .boxsub{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:12px}
.ink-frame .rail-r .deepnote{background:var(--g-deep);color:#fff;border:none}
.ink-frame .rail-r .deepnote h3{color:#fff}
.ink-frame .rail-r .deepnote p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.75);margin-bottom:12px}
.ink-frame .rail-r .deepnote .cta{background:#fff;color:var(--g-deep);font-size:13px;padding:9px 16px}
.ink-frame .rail-r .deepnote .cta:hover{background:#eef7f1}
.ink-frame .rrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.ink-frame .rrow:first-of-type{border-top:none}
.ink-frame .rrow .pav{width:38px;height:38px;border-radius:10px;overflow:hidden;flex:none;background:#DDE1DF}
.ink-frame .rrow b{display:block;font-size:14px;font-weight:700}
.ink-frame .rrow span{display:block;font-size:12px;color:var(--muted);font-weight:500}
.ink-frame .dhead{padding:26px 18px 0}
.ink-frame .dhead .display{font-size:clamp(28px,7vw,36px);max-width:16ch;margin-top:8px;letter-spacing:-.04em;line-height:1.04}
.ink-frame .dhead .display i{font-style:normal;color:var(--g)}
.ink-frame .dhead .sub{margin-top:10px;font-size:16px;color:var(--muted);font-weight:500;max-width:46ch}
.ink-frame .sinput{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:12px;padding:12px 14px;margin:18px 18px 0;transition:border-color .2s ease,box-shadow .2s ease}
.ink-frame .sinput:focus-within{border-color:var(--g);box-shadow:0 0 0 4px rgba(7,141,44,.1)}
.ink-frame .sinput .icon{color:var(--muted);flex:none}
.ink-frame .sinput input{flex:1;border:none;outline:none;font-family:var(--font);font-size:15px;min-width:0;background:none;color:var(--ink)}
.ink-frame .sinput input::placeholder{color:var(--faint)}
.ink-frame .scopes{display:flex;margin-top:14px;border-bottom:1px solid var(--hair);padding:0 10px}
.ink-frame .scope{padding:11px 14px 13px;font-size:14px;font-weight:600;color:var(--muted);position:relative;white-space:nowrap}
.ink-frame .scope:hover{color:var(--ink)}
.ink-frame .scope.on{color:var(--ink);font-weight:700}
.ink-frame .scope.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--g)}
.ink-frame .fbar{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 2px;align-items:center}
.ink-frame .fwrap{position:relative;flex:none}
.ink-frame .fbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);transition:border-color .15s ease,background .15s ease}
.ink-frame .fbtn:hover{border-color:#D6DAD8;background:var(--wash)}
.ink-frame .fbtn .icon{width:14px;height:14px;color:var(--g)}
.ink-frame .fbtn b{font-weight:700}
.ink-frame .fbtn::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);flex:none}
.ink-frame .fwrap.open .fbtn{border-color:var(--ink)}
.ink-frame .pop{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;box-shadow:0 8px 26px rgba(22,24,28,.13);padding:6px;display:none;z-index:80}
.ink-frame .fwrap.open .pop{display:block}
.ink-frame .fwrap.right .pop{left:auto;right:0}
.ink-frame .pop a{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink)}
.ink-frame .pop a:hover{background:var(--wash)}
.ink-frame .pop a.sel{color:var(--g);font-weight:700}
.ink-frame .pop a.sel::after{content:"\2713";margin-left:auto;font-weight:800}
.ink-frame .sortwrap{margin-left:auto}
.ink-frame [hidden]{display:none!important}
.ink-frame .backrow{display:flex;align-items:center;gap:12px;padding:18px 18px 0;flex-wrap:wrap}
.ink-frame .backrow .rq{font-size:13px;color:var(--muted);font-weight:500}
.ink-frame .backrow .rq b{color:var(--ink);font-weight:800}
.ink-frame .caps{display:flex;align-items:baseline;gap:12px;padding:28px 18px 12px}
.ink-frame .caps h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ink-frame .caps .n{font-size:12px;font-weight:700;color:var(--g)}
.ink-frame .caps a{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.ink-frame .caps a:hover{color:var(--ink)}
.ink-frame .metaline{padding:2px 18px 0;font-size:13px;color:var(--muted);font-weight:500}
.ink-frame .metaline b{color:var(--ink);font-weight:800}
.ink-frame .more{display:flex;justify-content:center;align-items:center;gap:10px;padding:22px 18px 30px}
.ink-frame .more .pg{font-size:13px;color:var(--muted);font-weight:600}
@media (prefers-reduced-motion:reduce){.ink-frame *,.ink-bnav *{animation:none!important;transition:none!important}}
@media (min-width:745px){
.ink-bnav,.ink-frame .phead{display:none}
.ink-frame{display:grid;grid-template-columns:76px minmax(0,1fr)}
.ink-frame .nav-l{display:flex;flex-direction:column;align-items:center;gap:4px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-right:1px solid var(--hair)}
.ink-frame .nav-l::-webkit-scrollbar{display:none}
body.admin-bar .ink-frame .nav-l{top:32px;height:calc(100vh - 32px);height:calc(100dvh - 32px)}
.ink-frame .nav-l .mark{font-size:22px;margin-bottom:14px}
.ink-frame .nav-l .mark span{display:none}
.ink-frame .nav-l a{padding:12px;border-radius:50%}
.ink-frame .nav-l a b{display:none}
.ink-frame .nav-l .cta{width:44px;height:44px;padding:0;border-radius:50%;margin-top:10px}
.ink-frame .nav-l .cta b{display:none}
.ink-frame .nav-l .meline{padding:0;margin-top:auto}
.ink-frame .nav-l .meline .tx{display:none}
.ink-frame .main{border-right:1px solid var(--hair)}
.ink-frame .dhead{padding:26px 34px 0}
.ink-frame .sinput{margin:18px 34px 0}
.ink-frame .scopes{padding:0 26px}
.ink-frame .fbar{padding:14px 34px 2px}
.ink-frame .caps{padding:30px 34px 12px}
.ink-frame .metaline{padding:2px 34px 0}
.ink-frame .backrow{padding:18px 34px 0}
.ink-frame .more{padding:24px 34px 34px}
}
/* 745-782px: WordPress renders the admin bar at 46px, not 32px. Folded from snippet 1700
   (wp_footer @188, 2026-07-28). MUST stay after the plain (min-width:745px) block above —
   the two ranges overlap and source order is what makes 46 beat 32. */
@media (min-width:745px) and (max-width:782px){
body.admin-bar .ink-frame .nav-l{top:46px;height:calc(100vh - 46px);height:calc(100dvh - 46px)}
}
@media (min-width:1025px){
.ink-frame{grid-template-columns:250px minmax(0,1fr) 340px}
.ink-frame .nav-l{align-items:stretch;padding:18px 14px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.ink-frame .nav-l .mark{font-size:22px;padding:0 12px;margin-bottom:16px}
.ink-frame .nav-l .mark span{display:inline}
.ink-frame .nav-l a{border-radius:999px;padding:11px 12px}
.ink-frame .nav-l a b{display:inline}
.ink-frame .nav-l .cta{width:88%;height:auto;padding:13px;border-radius:999px}
.ink-frame .nav-l .cta b{display:inline}
.ink-frame .nav-l .meline{padding:10px 12px}
.ink-frame .nav-l .meline .tx{display:block}
.ink-frame .rail-r{display:block;position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 20px;scrollbar-width:none}
.ink-frame .rail-r::-webkit-scrollbar{display:none}
.ink-frame .dhead{padding:26px 38px 0}
.ink-frame .sinput{margin:18px 38px 0}
.ink-frame .scopes{padding:0 30px}
.ink-frame .fbar{padding:14px 38px 2px}
.ink-frame .caps{padding:30px 38px 12px}
.ink-frame .metaline{padding:2px 38px 0}
.ink-frame .backrow{padding:18px 38px 0}
.ink-frame .more{padding:24px 38px 34px}
}
@media (min-width:1440px){
.ink-frame .dhead{padding:26px 48px 0}
.ink-frame .sinput{margin:18px 48px 0}
.ink-frame .scopes{padding:0 40px}
.ink-frame .fbar{padding:14px 48px 2px}
.ink-frame .caps{padding:32px 48px 12px}
.ink-frame .metaline{padding:2px 48px 0}
.ink-frame .backrow{padding:18px 48px 0}
.ink-frame .more{padding:26px 48px 36px}
}
