/* Shell grammar lifted from GOALS-FINAL.html. Colour, type, space, control height from tokens. */

/* Zone layout + shelf + goal island. Colour, type, space, control height from tokens. */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
 margin:0;
 background:var(--bg);
 color:var(--text-primary);
 font-family:var(--font-body);
 font-size:var(--type-body-default-size);
 font-weight:var(--type-body-default-weight);
 line-height:var(--type-body-default-leading);
 letter-spacing:var(--type-body-default-tracking);
 -webkit-font-smoothing:antialiased;
 overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,figure,figcaption{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Catalog form controls draw their own focus ring on the .pm-textfield__control wrapper
   (text-field.css:143). The inner input/select/textarea must not add a second, square ring. */
.pm-textfield__input:focus-visible,.pm-textfield__textarea:focus-visible,.pm-textfield select:focus-visible{outline:none}
/* Safari/Chrome autofill paints its own yellow/white box inside the field. Keep it on-theme (tokens only). */
.pm-textfield__input:-webkit-autofill,.pm-textfield__input:-webkit-autofill:hover,.pm-textfield__input:-webkit-autofill:focus{
 -webkit-text-fill-color:var(--text-primary);
 -webkit-box-shadow:0 0 0 1000px var(--surface-1) inset;
 box-shadow:0 0 0 1000px var(--surface-1) inset;
 transition:background-color 9999s ease-out 0s;
 caret-color:var(--text-primary);
}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-5);top:var(--space-3);z-index:90;background:var(--bg);border:1px solid var(--border);padding:var(--space-2) var(--space-3)}

.shell{width:100%;max-width:1280px;margin-inline:auto;padding:0 var(--space-5) var(--space-8);min-width:0;overflow-x:clip}
@media(max-width:640px){
 .shell{padding:0 var(--space-4) var(--space-8)}
 /* 375 header: one compact row that wraps, not three ragged rows (pixel-review-1 SRC-5).
    Since the founder ruling of 23 Aug the row holds three items only — brand, the name
    button and Dark/Light — so a wrap makes two rows, never the old ragged three. */
 .themer{flex:0 0 auto;align-self:flex-start}
 .zA-r{flex-wrap:wrap;justify-content:flex-start;gap:var(--space-3)}
 /* PROPOSED FOR THE CATALOG: overflow cue on .pm-dtabs--scroll (same as admin.css rail). Layout only. */
 .zB{-webkit-mask-image:linear-gradient(to right,rgb(0 0 0) calc(100% - 24px),transparent);mask-image:linear-gradient(to right,rgb(0 0 0) calc(100% - 24px),transparent)}
}

.stick{
 position:sticky;top:0;z-index:40;
 background:var(--bg);
 border-bottom:1px solid var(--border);
}
.zA{
 display:flex;align-items:center;justify-content:space-between;
 gap:var(--space-3);min-height:56px;flex-wrap:wrap;
}
.brand{
 font-size:var(--type-title-container-size);
 font-weight:var(--type-title-container-weight);
 letter-spacing:var(--type-title-container-tracking);
}
.brand span{color:var(--text-muted);font-weight:var(--type-body-default-weight)}
.zA-r{display:flex;align-items:center;gap:var(--space-4);font-size:var(--type-body-default-size);color:var(--text-muted)}
.themer{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-control);overflow:hidden}
.themer button{
 height:var(--control-h);padding:0 var(--space-3);background:transparent;border:0;
 color:var(--text-muted);cursor:pointer;
 font-size:var(--type-meta-default-size);
}
.themer button[aria-pressed="true"]{background:var(--surface-2);color:var(--text-primary)}

/* Header account menu (founder ruling 23 Aug 2026: Profile / Settings, Back office, Admin and
   Sign out live in the name menu; the rail is work only). LAYOUT AND POSITION ONLY around the
   shipped catalog .pm-dropdown — the trigger keeps .pm-btn's 36px box and the panel keeps its
   own surface, hairline, radius, elevation, type and item geometry. */
.acct{position:relative;display:inline-block;min-width:0}
.acct__btn{min-width:0;max-width:100%}
.acct__btn .pm-btn__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__chev{flex:none}
.acct .pm-dropdown__panel{inset-inline-end:0;inset-inline-start:auto}
.acct__head{
 display:flex;flex-direction:column;gap:var(--space-1);
 padding:var(--space-3) var(--space-2);
 border-bottom:1px solid var(--border);
 margin-bottom:var(--space-1);min-width:0;
}
.acct__name{
 font-size:var(--type-title-container-size);
 font-weight:var(--type-title-container-weight);
 line-height:var(--type-title-container-leading);
 letter-spacing:var(--type-title-container-tracking);
 color:var(--text-primary);
 overflow-wrap:anywhere;white-space:normal;
}
.acct__role{
 font-size:var(--type-meta-default-size);
 line-height:var(--type-meta-default-leading);
 color:var(--text-muted);
 overflow-wrap:anywhere;white-space:normal;
}
.acct__sep{height:1px;background:var(--border);margin:var(--space-1) 0}
@media(max-width:640px){
 /* the shipped panel declares min-width:300px and the shell has 343px of room at 375.
    The header row wraps, so the trigger sits at the START edge and the panel follows it,
    capped to the viewport. Position and size only — no colour, no type, no control height. */
 .acct .pm-dropdown__panel{inset-inline-start:0;inset-inline-end:auto;min-width:0;width:min(320px,calc(100vw - var(--space-4) * 2))}
}

.foot{margin-top:var(--space-8);color:var(--text-muted);font-size:var(--type-meta-default-size)}

.zB{
 overflow-x:auto;scrollbar-width:none;
 margin:0 calc(var(--space-5)*-1);padding:0 var(--space-5);
}
.zB::-webkit-scrollbar{display:none}
@media(max-width:640px){.zB{margin:0 calc(var(--space-4)*-1);padding:0 var(--space-4)}}

/* Title + period. Catalog .pm-page-header owns the row. Underline rail is page layout. */
.pagehead{
 margin-top:var(--space-6);
 margin-bottom:var(--space-6);
 padding-bottom:var(--space-3);
 border-bottom:1px solid var(--border);
 align-items:flex-end;
}
.pagehead .pm-page-header__actions{align-items:flex-end}

/* PROPOSED FOR THE CATALOG: .seg — 36px underline rail, not a capsule. */
.seg{display:flex;gap:var(--space-1);min-width:0;flex-wrap:wrap}
.seg button{
 height:var(--control-h);padding:0 var(--space-3);background:transparent;border:0;
 color:var(--text-muted);cursor:pointer;
 font-size:var(--type-body-default-size);font-weight:var(--type-body-strong-weight);
 border-bottom:2px solid transparent;margin-bottom:-1px;
 border-radius:0;
}
.seg button[aria-selected="true"]{
 color:var(--text-primary);font-weight:var(--type-body-strong-weight);border-bottom-color:var(--accent);
}

/* coarse-pointer bump removed — founder ruling: control height is 36px on every surface (LAW). */

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

@media print{
 .themer,.skip{display:none!important}
 .stick{position:static}
}

/* PROPOSED FOR THE CATALOG (status.css): .pm-status__sr is position:absolute but .pm-status
   is not a containing block, so inside a scrolling .pm-table-wrap the hidden span escapes the
   wrap and widens the document (measured: +73px at 375 on /admin/activity, 2026-08-23).
   Positioning only; no colour, type, space or control-height here. */
.pm-status{position:relative}

/* PROPOSED FOR THE CATALOG (text-field.css:231): the helper is position:absolute and occupies no layout
   space, so it lands in the row gap and touches the next label (pixel-review-1 SRC-2). Positioning only. */
.pm-textfield__helper{position:static;margin-top:var(--space-1)}

/* PROPOSED FOR THE CATALOG (button.css:299-301): disabled fills are light-scale primitives with no dark
   override, so a disabled button outshines the live one on a dark card (pixel-review-1 SRC-4). Tokens only. */
[data-theme="dark"] .pm-btn:disabled,[data-theme="dark"] .pm-btn[disabled],[data-theme="dark"] .pm-btn[aria-disabled="true"],[data-theme="dark"] .pm-btn.is-disabled{--_bgD:var(--surface-2);--_fgD:var(--text-muted);--_bdD:var(--border)}