/* ============ WEBSITE BUILDER CANVAS (Master 3169:19015) ============
   Create Website session: preview / edit mode / code / publish / sync / collab.
   Agent A build. All Agos-chrome uses var(--…) tokens.
   Raw literal values appear ONLY inside 3 clearly-commented, token-exempt zones:
     (1) .wc-site*  = the generated website preview (site-side design, outside DS)
     (2) .wc-code   = code-editor syntax theme (domain affordance, rule X)
     (3) presence / selection chrome colors (Figma-style editor overlays)
   =================================================================== */

/* =============================================================================
   CANVAS BAR EXTRAS — URL pill + disabled publish
   ============================================================================= */
.wc-urlbar    { display: flex; align-items: center; gap: var(--space-4);
                height: 32px; min-width: 300px; padding: 0 var(--space-3) 0 var(--space-5);
                background: var(--surface-hover); border-radius: var(--radius-md);
                font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.wc-urlbar__mon { font-size: 14px; color: var(--text-faint); }
.wc-urlbar__path{ flex: 1 1 auto; color: var(--text-secondary); }
.wc-urlbar__rl  { display: inline-flex; align-items: center; justify-content: center;
                  width: 24px; height: 24px; border-radius: var(--radius-xs); color: var(--text-muted); cursor: pointer; }
.wc-urlbar__rl:hover { background: var(--surface); }
.wc-urlbar__rl .ph { font-size: 14px; }

.btn[disabled] { opacity: .4; pointer-events: none; }

/* segmented item used as a route link (canvas-bar) */
.segmented__item[href] { text-decoration: none; }

/* =============================================================================
   FLOATING PILLS — Edit (preview) / Editing presence (collab)
   ============================================================================= */
.wc-pill      { position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
                display: inline-flex; align-items: center; gap: var(--space-4);
                height: 36px; padding: 0 var(--space-6); background: var(--surface);
                border: 1px solid var(--border); border-radius: var(--radius-full);
                box-shadow: 0 4px 16px rgba(0,0,0,.12);
                font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); color: var(--text-primary);
                text-decoration: none; cursor: pointer; z-index: 5; }
.wc-pill .ph  { font-size: 15px; color: var(--text-secondary); }

/* =============================================================================
   CHAT — result card + reactions
   ============================================================================= */
.wc-result    { display: flex; align-items: center; gap: var(--space-5);
                background: var(--surface); border: 1px solid var(--border);
                border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.wc-result__b { flex: 1 1 auto; min-width: 0; }
.wc-result__t { font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-result__d { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); margin-top: 2px; }
.wc-react     { display: flex; align-items: center; gap: var(--space-6); }
.wc-react .ph { font-size: 16px; color: var(--text-muted); cursor: pointer; }
.wc-react .ph:hover { color: var(--text-secondary); }

/* extra composer chips (link count / folder) */
.wc-cmp-chip  { display: inline-flex; align-items: center; gap: var(--space-3); height: 24px; padding: 0 var(--space-4);
                border-radius: var(--radius-sm); color: var(--text-muted);
                font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); cursor: pointer; max-width: 72px; }
.wc-cmp-chip:hover { background: var(--surface-hover); }
.wc-cmp-chip .ph { font-size: 14px; }
.wc-cmp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================================
   PUBLISH popover wizard (anchored to Publish, right-aligned, 340)
   ============================================================================= */
.wc-pop       { width: 340px; padding: var(--space-7); gap: var(--space-6); }
.wc-pop__head { display: flex; align-items: center; margin-bottom: var(--space-2); }
.wc-pop__title{ flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-pop__x    { color: var(--text-faint); font-size: 16px; cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; }
.wc-pop .field + .field { margin-top: var(--space-6); }
.wc-pop__foot { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-7); }
.wc-pop__foot .wc-pop__spacer { flex: 1 1 auto; }
.wc-addrow    { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5);
                color: var(--text-secondary); font: var(--type-b3-weight) var(--type-b3-size)/1 var(--font-sans); cursor: pointer; }
.wc-addrow .ph { font-size: 16px; color: var(--text-muted); }

/* upload square + title row */
.wc-iconrow   { display: flex; align-items: center; gap: var(--space-4); }
.wc-upload    { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-lg);
                border: 0.5px solid var(--border-strong); background: var(--surface);
                display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; }
.wc-upload .ph{ font-size: 16px; }

/* dashed drop area */
.wc-drop      { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
                min-height: 120px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
                color: var(--text-faint); font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); cursor: pointer; }
.wc-drop .ph  { font-size: 18px; color: var(--text-muted); }

/* radio rows (visibility) */
.wc-radio     { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5);
                border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.wc-radio + .wc-radio { margin-top: var(--space-4); }
.wc-radio--on { border-color: var(--border-active); }
.wc-radio__dot{ width: 18px; height: 18px; flex: 0 0 18px; border-radius: var(--radius-full);
                border: 1.5px solid var(--border-strong); margin-top: 1px; position: relative; }
.wc-radio--on .wc-radio__dot { border-color: var(--neutral-900); }
.wc-radio--on .wc-radio__dot::after { content: ""; position: absolute; inset: 3px; border-radius: var(--radius-full); background: var(--neutral-900); }
.wc-radio__t  { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-radio__d  { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); margin-top: 2px; }

/* review summary rows */
.wc-review    { display: flex; flex-direction: column; gap: var(--space-4);
                background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.wc-review__r { display: flex; justify-content: space-between; gap: var(--space-5); }
.wc-review__k { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted); }
.wc-review__v { font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }

/* =============================================================================
   EDIT panel (floating property inspector, 340) + accordion
   ============================================================================= */
.wc-edit      { position: absolute; top: var(--space-6); right: var(--space-6); width: 340px; z-index: 6;
                background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
                box-shadow: 0 8px 28px rgba(0,0,0,.14); display: flex; flex-direction: column;
                max-height: calc(100% - var(--space-11)); }
.wc-edit__head{ display: flex; align-items: center; padding: var(--space-6) var(--space-6) var(--space-5); }
.wc-edit__title { flex: 1 1 auto; font: var(--type-s1-weight) var(--type-s1-size)/1.3 var(--font-sans); color: var(--text-primary); }
.wc-edit__x   { color: var(--text-faint); font-size: 16px; cursor: pointer; text-decoration: none; display: inline-flex; }
.wc-edit__foot{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6);
                border-top: 1px solid var(--border); }
.wc-edit__inp { flex: 1 1 auto; border: 0; outline: 0; background: transparent;
                font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-edit__inp::placeholder { color: var(--text-faint); }

/* accordion — piggybacks on .tabs/.tab + data-panel handler, restyled to a stack */
.wc-acc       { display: block; gap: 0; flex: 1 1 auto; overflow-y: auto; }
.wc-acc__head { display: flex; align-items: center; gap: var(--space-4); height: 44px; padding: 0 var(--space-6);
                border: 0; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
                margin-top: -1px; color: var(--text-primary); font: var(--fw-medium) var(--type-b3-size)/1 var(--font-sans); }
.wc-acc__head .ph--lead { font-size: 16px; color: var(--text-secondary); }
.wc-acc__head .ph--chev { margin-left: auto; font-size: 14px; color: var(--text-faint); transition: transform .12s; }
.wc-acc__head.tab--active { color: var(--text-primary); font-weight: var(--fw-medium); }
.wc-acc__head.tab--active .ph--chev { transform: rotate(180deg); }
.wc-acc__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.wc-acc__box  { border: 0.5px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-5);
                display: flex; flex-direction: column; gap: var(--space-5); }

/* compact controls inside edit panel */
.wc-lbl       { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.wc-inp       { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-5);
                border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
                font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-inp .ph   { font-size: 13px; color: var(--text-faint); }
.wc-inp--area { min-height: 56px; align-items: flex-start; padding: var(--space-4) var(--space-5); white-space: pre-line; }
.wc-sel       { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
                border: 0.5px solid var(--border-strong); background: var(--surface);
                font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); cursor: pointer; }
.wc-sel .ph   { margin-left: auto; font-size: 14px; color: var(--text-muted); }
.wc-fld       { display: flex; flex-direction: column; gap: var(--space-3); }
.wc-grid2     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.wc-colorbox  { display: flex; align-items: center; gap: var(--space-4); min-height: 36px; padding: 0 var(--space-5);
                border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); }
.wc-swatch    { width: 16px; height: 16px; flex: 0 0 16px; border-radius: var(--radius-2xs); background: #161818; } /* preview-side fill sample */
.wc-colorbox__hex { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-colorbox__pct { padding-left: var(--space-5); border-left: 1px solid var(--border);
                    font: var(--type-b3-weight) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-secondary); }
/* direction segmented */
.wc-dir       { display: inline-flex; background: var(--surface-hover); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.wc-dir__i    { width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
                border-radius: var(--radius-xs); color: var(--text-muted); cursor: pointer; }
.wc-dir__i .ph{ font-size: 14px; }
.wc-dir__i--on{ background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-1); }

/* =============================================================================
   CHANGES bar (floating, bottom-center) — edit mode
   ============================================================================= */
.wc-changes   { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
                display: inline-flex; align-items: center; gap: var(--space-5);
                height: 44px; padding: 0 var(--space-4) 0 var(--space-6); background: var(--surface);
                border: 1px solid var(--border); border-radius: var(--radius-full);
                box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 6; }
.wc-changes__n{ font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.wc-changes__n b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.wc-changes__clear { color: var(--text-secondary); background: none; border: 0; cursor: pointer;
                     font: var(--fw-medium) var(--type-c1-size)/1 var(--font-sans); }
.wc-changes__x { color: var(--text-faint); font-size: 15px; cursor: pointer; display: inline-flex; text-decoration: none; }

/* =============================================================================
   CODE view — file tree + editor with line numbers (rule X domain affordance)
   ============================================================================= */
.wc-code-wrap { flex: 1 1 0; min-height: 0; display: flex; }
.wc-tree      { width: 208px; flex: 0 0 208px; padding: var(--space-5) var(--space-4); overflow-y: auto;
                border-right: 1px solid var(--border); }
.wc-tree .tree-row { height: 32px; }
.wc-tree__caret { font-size: 13px !important; color: var(--text-faint) !important; }
.wc-editor    { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
.wc-editor__tools { position: absolute; top: var(--space-4); right: var(--space-6); display: flex; gap: var(--space-3); z-index: 2; }
.wc-editor__tools .ph { font-size: 16px; color: var(--text-faint); cursor: pointer; }
.wc-code      { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; padding: var(--space-6) 0; }
.wc-gutter    { flex: 0 0 auto; padding: 0 var(--space-5) 0 var(--space-6); text-align: right;
                white-space: pre; font: 12px/20px var(--font-mono); color: #b3b5b5; user-select: none; } /* editor theme */
.wc-code pre  { margin: 0; flex: 1 1 auto; font: 12px/20px var(--font-mono); color: #3a3d3e;
                white-space: pre; padding-right: var(--space-8); }                            /* editor theme */
.wc-code .cm  { color: #8b8d8d; }     /* comment  */
.wc-code .kw  { color: #7c4dff; }     /* keyword  */
.wc-code .fn  { color: #2f7de1; }     /* function */
.wc-code .str { color: #d07a00; }     /* string   */
.wc-code .num { color: #0a805b; }     /* number   */
.wc-code .op  { color: #8b8d8d; }     /* operator */
.wc-code .pr  { color: #2faaab; }     /* property */

/* =============================================================================
   SYNC — GitHub banner + changes-diff popover
   ============================================================================= */
.wc-banner    { position: absolute; top: var(--space-6); left: var(--space-6); right: var(--space-6); z-index: 6;
                display: flex; align-items: center; gap: var(--space-5);
                background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
                box-shadow: 0 4px 16px rgba(0,0,0,.10); padding: var(--space-5) var(--space-6); }
.wc-banner__ic{ font-size: 22px; color: var(--text-primary); flex: 0 0 auto; }
.wc-banner__b { flex: 1 1 auto; min-width: 0; }
.wc-banner__t { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); }
.wc-banner__d { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-faint); margin-top: 2px; }
.wc-banner__act { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }

.wc-diff      { width: 300px; padding: var(--space-6); gap: var(--space-2); }
.wc-diff__head{ display: flex; align-items: center; margin-bottom: var(--space-4); }
.wc-diff__title { flex: 1 1 auto; font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); }
.wc-diff__x   { color: var(--text-faint); font-size: 16px; cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; }
.wc-diff__row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.wc-diff__row--sel { background: var(--surface-hover); }
.wc-diff__b   { flex: 1 1 auto; min-width: 0; }
.wc-diff__name{ font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); }
.wc-diff__stat{ margin-top: 2px; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); display: flex; gap: var(--space-4); }
.wc-add       { color: var(--success-700); }
.wc-del       { color: var(--danger-700); }
.wc-diff__time{ font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); flex: 0 0 auto; }
.wc-diff__foot{ display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/* =============================================================================
   COLLAB — remote presence cursor + name tag (editor overlay chrome)
   ============================================================================= */
.wc-cursor    { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wc-cursor__ptr { font-size: 18px; color: #7c4dff; line-height: 1; }        /* presence color */
.wc-cursor__tag { margin-left: 12px; padding: 2px var(--space-4); border-radius: var(--radius-xs);
                  background: #7c4dff; color: #fff; font: var(--fw-medium) var(--type-c3-size)/1.4 var(--font-sans); } /* presence color */

/* =============================================================================
   PREVIEW SITE — token-exempt zone. This is the *generated website* being edited
   (Studio/Mono). Its design lives outside the Agos DS, mirroring the Figma preview,
   so literal colors / sizes here are intentional and must not use Agos tokens.
   ============================================================================= */
.wc-site      { min-height: 100%; background: #efeee8; font-family: var(--font-sans); }
.wc-nav       { display: flex; align-items: center; gap: var(--space-8);
                padding: 22px 40px; border-bottom: 1px solid #dedcd3; }
.wc-logo      { font-size: 18px; font-weight: 700; color: #161818; letter-spacing: -.2px; }
.wc-nav__links{ margin-left: auto; display: flex; align-items: center; gap: 34px; }
.wc-nav__links a { font-size: 15px; color: #2b2b28; text-decoration: none; }
.wc-nav__cta  { margin-left: 40px; height: 40px; padding: 0 20px; background: transparent;
                border: 1px solid #161818; border-radius: 2px; color: #161818; font-size: 14px; cursor: pointer; }
.wc-hero      { padding: 60px 40px 72px; }
.wc-hero__cap { font-size: 13px; font-weight: 500; letter-spacing: 2px; color: #8b8a82; }
.wc-hero__title { margin: 44px 0 0; font-size: 72px; line-height: 1.02; font-weight: 700;
                  letter-spacing: -1.5px; color: #1a1a18; }
.wc-hero__muted { color: #9b9a92; }
.wc-hero__body{ margin: 56px 0 0; max-width: 780px; font-size: 20px; line-height: 1.5; color: #6b6a63; }
/* selection chrome overlaid on the preview (editor affordance) */
.wc-hero__title.is-sel { outline: 2px dashed #4c8dff; outline-offset: 10px; }         /* editor selection */
.wc-hero__title.is-picked { outline: 2px solid #4c8dff; outline-offset: 10px; background: rgba(76,141,255,.06); } /* editor selection */

/* =============================================================================
   ARTICLE PUBLISH CANVAS (Master 1957:9997 + Publish-to extension)
   Article approval canvas: split Publish button, pattern tabs, score donut
   (reuses .ws-score), Summary, Publish-to destination chips, image diff,
   redline diff blocks. White canvas (not canvas-float). Screen: chat-article-publish.
   ============================================================================= */
.ap-canvas    { background: var(--surface); }                       /* white canvas, not N100 */
.ap-body      { display: block; padding: var(--space-8) var(--space-6); background: var(--surface); }
.ap-doc       { width: 100%; max-width: 640px; margin: 0 auto; }

/* ---- Article card ---------------------------------------------------------- */
.ap-card      { border: 1px solid var(--border); border-radius: var(--radius-lg);
                background: var(--surface); margin-bottom: var(--space-8); }
.ap-card__head{ display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); }
.ap-card__titles { flex: 1 1 auto; min-width: 0; }
.ap-card__t   { font: var(--type-b4-weight) var(--type-b4-size)/1.3 var(--font-sans); color: var(--text-primary); }
.ap-card__url { margin-top: 2px; font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-faint); }
.ap-card__acts{ display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }
.ap-card__body{ padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-7); }

/* ---- Split Publish button (black, main + caret) ---------------------------- */
.ap-split     { display: inline-flex; }
.ap-split .btn{ border-radius: 0; }
.ap-split__main  { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.ap-split__caret { padding: 0 var(--space-4); border-left: 1px solid var(--white-30);
                   border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.ap-split__caret .ph { font-size: 14px; }

/* ---- Pattern tab chips ----------------------------------------------------- */
.ap-tabs      { display: flex; gap: var(--space-4); }
.ap-tab       { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-5);
                border-radius: var(--radius-full); color: var(--text-muted); cursor: pointer;
                font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); }
.ap-tab--on   { background: var(--surface-hover); color: var(--text-primary); }

/* ---- Section label --------------------------------------------------------- */
.ap-label     { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans);
                color: var(--text-muted); margin-bottom: var(--space-4); }

/* ---- Summary (N50 filled) -------------------------------------------------- */
.ap-summary   { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.ap-summary p { margin: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.7 var(--font-sans); color: var(--text-secondary); }

/* ---- Publish to — destination chips (X / website blog / add) --------------- */
.ap-dests     { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Image diff (Current / New placeholders) ------------------------------- */
.ap-imgs      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ap-img       { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
                background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200)); }
.ap-img__tag  { position: absolute; top: var(--space-4); left: var(--space-4); }
.ap-img__acts { position: absolute; right: var(--space-4); bottom: var(--space-4); display: flex; gap: var(--space-3); }
.ap-tag--dark { background: var(--neutral-900); color: var(--white); }

/* ---- Redline diff body ----------------------------------------------------- */
.ap-diff      { display: flex; flex-direction: column; gap: var(--space-5); }
.ap-diff__h1  { font: var(--type-h3-weight) var(--type-h3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ap-diff__h2  { font: var(--type-b2-weight) var(--type-b2-size)/1.5 var(--font-sans); color: var(--text-primary); }
.ap-h4        { font: var(--fw-semibold) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.ap-para      { font: var(--type-b3-weight) var(--type-b3-size)/1.7 var(--font-sans); color: var(--text-secondary); margin: 0; }
.ap-para--faint { color: var(--text-faint); }
.ap-del       { color: var(--text-faint); text-decoration: line-through; }
.ap-add       { color: var(--success-700); }
.ap-block     { border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
                display: flex; flex-direction: column; gap: var(--space-4); }
.ap-block--del{ background: var(--danger-50); }
.ap-block--add{ background: var(--success-50); }
.ap-blabel    { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); }
.ap-blabel--del { color: var(--danger-700); }
.ap-blabel--add { color: var(--success-700); }
.ap-verdict-row { display: flex; justify-content: flex-end; }
.ap-verdict   { display: inline-flex; align-items: center; gap: var(--space-3); height: 24px; padding: 0 var(--space-4);
                border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface);
                color: var(--text-secondary); font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.ap-verdict .ph { font-size: 13px; }
.ap-verdict--ok .ph { color: var(--success-700); }
.ap-verdict--no .ph { color: var(--danger-700); }
.ap-ol        { margin: 0; padding-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
.ap-ol li     { font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-secondary); }


/* ==== Site /blog page (token-exempt site design + Agos published banner) ==== */
.wc-published     { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-7);
                    background: var(--success-50); border-bottom: 1px solid var(--success-100);
                    font: var(--type-b4-weight) var(--type-b4-size)/1.4 var(--font-sans); color: var(--text-primary); }
.wc-published > i { color: var(--success-700); font-size: 18px; flex: 0 0 auto; }
.wc-published span{ flex: 1 1 auto; min-width: 0; }
.wc-published__link { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto;
                    color: var(--success-700); font-weight: var(--fw-medium); text-decoration: none; }
.wc-published__link .ph { font-size: 14px; }
.wc-nav__links a.is-here { color: #161818; font-weight: 600; }
/* blog index — Studio/Mono aesthetic (literal site colors, outside DS) */
.wc-blog          { padding: 56px 40px 8px; }
.wc-blog__cap     { font-size: 13px; font-weight: 500; letter-spacing: 2px; color: #8b8a82; }
.wc-blog__title   { margin: 20px 0 44px; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -1px; color: #1a1a18; }
.wc-post          { display: block; text-decoration: none; cursor: pointer; }
.wc-post--feat    { padding: 32px 0 40px; border-top: 1px solid #dedcd3; border-bottom: 1px solid #dedcd3; }
.wc-post__meta    { font-size: 13px; letter-spacing: .4px; color: #8b8a82; }
.wc-post__h       { margin: 14px 0 0; font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; color: #1a1a18; }
.wc-post__h3      { margin: 12px 0 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: #1a1a18; }
.wc-post__ex      { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #6b6a63; max-width: 720px; }
.wc-post__more    { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #1a1a18; }
.wc-post-grid     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; padding: 40px 0 8px; }
.wc-post-grid .wc-post__ex { font-size: 15px; }
.wc-foot          { padding: 40px; border-top: 1px solid #dedcd3; font-size: 13px; color: #8b8a82; }


/* Destination — single-destination picker (Figma "Posting account" field, input-styled) */
.ap-picker        { display: flex; align-items: center; gap: var(--space-5); width: 100%; text-align: left;
                    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
                    padding: var(--space-4) var(--space-5); cursor: pointer; }
.ap-picker:hover  { border-color: var(--border-strong); }
.ap-picker__ic    { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
                    border-radius: var(--radius-md); background: var(--surface-subtle); }
.ap-picker__ic .ph{ font-size: 16px; color: var(--text-primary); }
.ap-picker__ic--site { background: var(--primary-50); }
.ap-picker__ic--site .ph { color: var(--primary-700); }
.ap-picker__b     { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ap-picker__t     { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ap-picker__d     { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-picker__cx    { font-size: 14px; color: var(--text-muted); flex: 0 0 auto; }
/* picker dropdown items */
.ap-pick          { align-items: center; gap: var(--space-4); }
.ap-pick__b       { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ap-pick__t       { font: var(--type-b3-weight) var(--type-b3-size)/1.3 var(--font-sans); color: var(--text-primary); }
.ap-pick__d       { font: var(--type-c2-weight) var(--type-c2-size)/1.3 var(--font-sans); color: var(--text-muted); }
.ap-pick__ck      { font-size: 15px; color: var(--neutral-900); flex: 0 0 auto; }
.ap-pick:not(.ap-pick--on) .ap-pick__ck { visibility: hidden; }
.menu__sep        { height: 1px; background: var(--border); margin: var(--space-3) 0; }

/* Publish confirmation modal — destination summary (selection lives in the card's Destination field) */
.ap-pub__seclabel { font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); color: var(--text-muted);
                    text-transform: uppercase; letter-spacing: .4px; margin: 0 0 var(--space-4); }
.ap-confirm       { display: flex; align-items: center; gap: var(--space-5);
                    border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.ap-confirm__ic   { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
                    border-radius: var(--radius-md); background: var(--surface-subtle); }
.ap-confirm__ic .ph { font-size: 16px; color: var(--text-primary); }
.ap-confirm__b    { flex: 1 1 auto; min-width: 0; }
.ap-confirm__t    { font: var(--fw-medium) var(--type-b3-size)/1.4 var(--font-sans); color: var(--text-primary); }
.ap-confirm__d    { font: var(--type-c1-weight) var(--type-c1-size)/1.4 var(--font-sans); color: var(--text-muted);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pub__foot     { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8) var(--space-8); }

/* confirm destination icon matches the picker's site tint */
.ap-confirm__ic.ap-picker__ic--site { background: var(--primary-50); }
.ap-confirm__ic.ap-picker__ic--site .ph { color: var(--primary-700); }