/* THE CORDON — INTERFACE PIECES (ui.css) · built only on the rulebook (cordon.css)
   Colour by layer: pieces use only the --layer-* colours, so each piece takes its colours
   from the layer it sits on. Every surface carries .on-chalk or .on-oxblood (see cordon.css). */

/* ---------- BUTTONS ---------- */
.btn{
  --b-fill:var(--layer-action); --b-ink:var(--layer-action-text); --b-edge:var(--layer-action); --b-focus:var(--layer-focus);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:2px var(--s5) 0;border-radius:var(--radius);
  border:1.5px solid var(--b-edge);background:var(--b-fill);color:var(--b-ink);
  font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  cursor:pointer;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap;
}
.btn{transition:background-color .15s,border-color .15s,color .15s;}
.btn{box-sizing:border-box;} /* a link styled as a button measures the same as a real button */
/* HOVER = highlight (founder 2026-09-28): the fill shifts one step */
.btn-main:hover,.btn-main.is-hover{--b-fill:var(--layer-action-hover);--b-edge:var(--layer-action-hover);}
.btn-second:hover,.btn-second.is-hover,.btn-danger:hover,.btn-danger.is-hover{--b-fill:var(--layer-tint);}
.btn[disabled]:hover{--b-fill:var(--layer-tint);--b-edge:var(--layer-tint);}
.btn:focus-visible,.btn.is-focus{outline:2px solid var(--b-focus);outline-offset:3px;}
.btn[disabled]{--b-fill:var(--layer-tint);--b-ink:var(--layer-text-soft);--b-edge:var(--layer-tint);cursor:not-allowed;text-decoration:none;}
.btn.is-busy{cursor:progress;gap:10px;}
/* the "working" sign everywhere: the loading graphic's tiny version (loader.js), the × marks running into place */
.cc-loader svg{display:block;width:100%;height:100%;}
@keyframes cc-x-run{0%{transform:translateX(-300px);opacity:0}35%{transform:none;opacity:1}80%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.cc-x-run{animation:cc-x-run 1.8s cubic-bezier(.2,.8,.2,1) infinite both;}
@media (prefers-reduced-motion: reduce){ .cc-x-run{animation:none;} }
.cc-loader[data-size="tiny"]{display:inline-block;flex:none;width:14px;height:22px;}

.btn-second{--b-fill:transparent;--b-ink:var(--layer-action);--b-edge:var(--layer-action);}
.btn-danger{--b-fill:transparent;--b-ink:var(--layer-alert-text);--b-edge:var(--layer-alert);} /* Claret on Chalk; Gold outline + Cream text on Oxblood */
.btn-google{--b-fill:var(--layer-google-fill);--b-ink:var(--layer-google-ink);--b-edge:var(--layer-google-edge);text-transform:none;letter-spacing:.02em;font-size:15px;font-family:var(--font-body);}
.btn-google .g{width:18px;height:18px;flex:none;}

.btn-small{min-height:34px;padding:2px var(--s4) 0;font-size:12px;}
.btn-full{width:100%;white-space:normal;text-align:center;} /* a long label wraps inside a full-width button instead of being cut off */
.btn-google.btn-full{white-space:nowrap;} /* the Google button always stays on one line */

/* text button = looks like a link */
.btn-text{background:none;border:none;padding:var(--s1) 0;cursor:pointer;
  font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--layer-text);
  text-decoration:underline;text-decoration-color:var(--layer-accent);text-decoration-thickness:1px;text-underline-offset:4px;}
.btn-text:hover,.btn-text.is-hover{text-decoration-thickness:2px;}
a.btn-text{display:inline-block;line-height:normal;} /* a link styled as a text button sits exactly like a real one */
.btn-text:focus-visible,.btn-text.is-focus{outline:2px solid var(--layer-focus);outline-offset:3px;}

/* icon button: 24px line icon in a 44px tap area */
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--radius);color:var(--layer-text);cursor:pointer;padding:0;}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.icon-btn:hover{background:var(--layer-tint);}
.icon-btn:focus-visible,.icon-btn.is-focus{outline:2px solid var(--layer-focus);outline-offset:1px;}


/* ---------- SITE HEADER (clean: masthead left; database + profile / log in / menu right) ---------- */
.site-hdr{background:var(--layer-ground);height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(var(--gutter),4.33vw,63px) 0 clamp(var(--gutter),calc(7.1vw - 10.6px),93px);border-radius:var(--radius);}
.site-hdr img{height:var(--hdr-mast-h);display:block;margin-left:2.75px;} /* masthead sits 3px inside the margin line — the approved position */
.site-hdr .right{display:flex;align-items:center;gap:var(--s2);}
.site-hdr.phone{padding:0 var(--gutter);}
.site-hdr.phone img{height:40px;margin-left:2px;}

/* site footer: same Oxblood as the header; every colour solid, nothing under 12px */
.site-ftr{background:var(--layer-ground);border-top:1px solid var(--layer-line);padding:20px 0;}
.site-ftr .row{padding:0 clamp(var(--gutter),4.33vw,63px) 0 clamp(var(--gutter),calc(7.1vw - 10.6px),93px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.site-ftr img{height:23px;display:block;margin-left:3px;} /* lines up with the header masthead */
.site-ftr .links{display:flex;gap:18px;flex-wrap:wrap;}
.site-ftr .links a{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--layer-text);text-decoration:none;}
.site-ftr .socials{display:flex;align-items:center;gap:15px;}
.site-ftr .socials a{display:inline-flex;color:var(--layer-text);}
.site-ftr .socials svg{width:19.2px;height:19.2px;margin:-1.6px;fill:currentColor;display:block;} /* the Remix icons leave a 2px margin in their 24px square: drawn at 19.2px the shape is ~16px, and the -1.6px margin keeps each icon's 16px footprint and centre, so nothing moves */
.site-ftr .dom{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--layer-text-soft);}
.site-ftr a:focus-visible{outline:2px solid var(--layer-focus);outline-offset:2px;}
.site-ftr.phone{max-width:390px;}
.site-ftr.phone .row{padding:0 var(--gutter);}
.site-ftr.phone img{margin-left:2.25px;}
/* phone footer links: About · Terms · Write for Us — Privacy, Refunds and Contact show on wide screens only */
.site-ftr.phone .ftr-wide-only{display:none;}
@media (max-width:720px){ .site-ftr .ftr-wide-only{display:none;} }
@container (max-width:720px){ .site-ftr .ftr-wide-only{display:none;} }

/* ---------- FORM FIELDS ---------- */
.field{--f-bg:var(--layer-field);--f-ink:var(--layer-text);--f-edge:var(--layer-text-soft);--f-focus:var(--layer-text);--f-help:var(--layer-text-soft);--f-err:var(--layer-alert);
  display:flex;flex-direction:column;gap:6px;min-width:0;}
.field > label,.field > .flabel{font-family:var(--font-label);font-size:13px;letter-spacing:.04em;color:var(--f-ink);}
.field .control{position:relative;display:flex;align-items:center;}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;min-height:44px;padding:11px 14px 9px;border-radius:var(--radius);
  border:1.5px solid var(--f-edge);background:var(--f-bg);color:var(--f-ink);
  font-family:var(--font-body);font-size:16px;line-height:1.3;outline:none;appearance:none;-webkit-appearance:none;}
.field textarea{min-height:96px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--f-help);opacity:1;}
.field input:focus,.field select:focus,.field textarea:focus,.field.is-focus input{border-color:var(--f-focus);box-shadow:0 0 0 1px var(--f-focus);}
.field .help{font-family:var(--font-label);font-size:13px;color:var(--f-help);letter-spacing:.02em;}
.field.is-error input,.field.is-error select{border-color:var(--f-err);box-shadow:0 0 0 1px var(--f-err);}
.field .msg{display:flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:13px;letter-spacing:.02em;}
.field.is-error .msg{color:var(--layer-alert-text);} .field.is-error .msg svg{color:var(--f-err);}
.field.is-ok .msg{color:var(--f-ink);}
.field .msg svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.field.is-disabled input,.field input:disabled{background:var(--layer-off);border-color:var(--layer-off-line);color:var(--layer-text-soft);cursor:not-allowed;}
/* icons inside a field */
.field .control.has-lead input{padding-left:42px;} .field .control.has-trail input{padding-right:46px;}
.field .lead{position:absolute;left:12px;width:20px;height:20px;color:var(--f-help);pointer-events:none;}
.field .lead svg,.field .trail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.field .trail{position:absolute;right:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--f-ink);cursor:pointer;border-radius:var(--radius);}
.field .trail:focus-visible{outline:2px solid var(--f-focus);outline-offset:-2px;}
.field .chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:12px;height:12px;pointer-events:none;color:var(--f-ink);display:flex;}
.field .chev svg{width:12px;height:12px;fill:currentColor;stroke:none;}
.field select{padding-right:40px;cursor:pointer;}
/* ---------- DROP-DOWN LIST (desktop: our own list, by dropdown.js; phones keep the phone's own picker) ---------- */
/* the closed field: a button drawn exactly like .field select; the real select stays in the form, hidden */
.field .dd-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;}
.field .dd-btn{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:11px 40px 9px 14px;border-radius:var(--radius);
  border:1.5px solid var(--f-edge);background:var(--f-bg);color:var(--f-ink);text-align:left;cursor:pointer;
  font-family:var(--font-body);font-size:16px;line-height:1.3;outline:none;appearance:none;-webkit-appearance:none;margin:0;}
.field .dd-val{display:block;min-height:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.field .dd-btn:focus-visible,.field .dd.is-open .dd-btn{border-color:var(--f-focus);box-shadow:0 0 0 1px var(--f-focus);}
.field.is-error .dd-btn{border-color:var(--f-err);box-shadow:0 0 0 1px var(--f-err);}
.field .dd-btn:disabled,.field.is-disabled .dd-btn{background:var(--layer-off);border-color:var(--layer-off-line);color:var(--layer-text-soft);cursor:not-allowed;}
.field .dd.is-disabled .chev{color:var(--layer-text-soft);}
.field .dd.is-open .chev svg{transform:rotate(180deg);}
/* the list panel: as the Stats database panels (.db-panel) — the layer's own ground, a thin edge, no shadow */
.dd-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;box-sizing:border-box;
  background:var(--layer-ground);border:1px solid var(--layer-menu-edge);border-radius:var(--radius);
  padding:4px 0;max-height:calc(6 * 44px + 10px);overflow-y:auto;overflow-x:hidden;outline:none;}
.dd-panel[hidden]{display:none;}
.dd-panel.is-up{top:auto;bottom:calc(100% + 4px);}
.dd-panel.is-static{position:relative;top:auto;margin-top:-2px;}   /* the always-open example on the kit sheet: 4px under the field, as the live list */
.dd-opt{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:4px 14px 2px;box-sizing:border-box;cursor:pointer;
  font-family:var(--font-body);font-size:16px;line-height:1.3;color:var(--layer-text);overflow-wrap:anywhere;}
.dd-opt-t{flex:1 1 auto;min-width:0;}
.dd-opt.is-active{background:var(--layer-tint);}
.dd-panel.is-kbd .dd-opt.is-active{outline:2px solid var(--layer-focus);outline-offset:-2px;}
.dd-opt[aria-disabled="true"]{color:var(--layer-text-soft);cursor:not-allowed;}
.dd-tick{flex:none;width:16px;height:16px;display:flex;color:var(--layer-accent);visibility:hidden;}
.dd-tick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dd-opt[aria-selected="true"] .dd-tick{visibility:visible;}
/* checkbox + radio */
.choice{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--layer-text);cursor:pointer;}
.choice input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--layer-text-soft);background:transparent;cursor:pointer;display:grid;place-content:center;}
.choice input[type=checkbox]{border-radius:var(--radius);}
.choice input[type=radio]{border-radius:50%;}
.choice input:checked{background:var(--layer-action);border-color:var(--layer-action);}
.choice input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid var(--layer-action-text);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);}
.choice input[type=radio]:checked{background:transparent;}
.choice input[type=radio]:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--layer-action);}
.choice input:focus-visible,.choice.is-focus input{outline:2px solid var(--layer-focus);outline-offset:2px;}
.choice input:disabled{background:var(--layer-off);border-color:var(--layer-off-line);cursor:not-allowed;}
.choice.is-disabled{color:var(--layer-text-soft);cursor:not-allowed;}
fieldset.group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
fieldset.group legend{font-family:var(--font-label);font-size:13px;letter-spacing:.04em;margin-bottom:8px;padding:0;color:var(--layer-text);}


/* ---------- NAVIGATION ---------- */
/* tabs: for switching views inside one page. The row never wraps — it scrolls
   sideways when it doesn't fit — and the hairline always runs the full width. */
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;
  padding:4px 4px 0;border-bottom:1px solid var(--layer-line);scrollbar-width:none;-ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{position:relative;flex:none;min-height:44px;padding:2px var(--s4) 0;display:inline-flex;align-items:center;
  font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--layer-text-soft);background:none;border:none;cursor:pointer;white-space:nowrap;}
.tab:hover,.tab.is-hover{color:var(--layer-text);background:var(--layer-tint);}
.tab:focus-visible,.tab.is-focus{outline:2px solid var(--layer-focus);outline-offset:2px;}
.tab[aria-selected="true"],.tab.is-current{color:var(--layer-text);}
.tab[aria-selected="true"]::after,.tab.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--layer-accent);}

/* page numbers: for long lists */
.pager{display:flex;align-items:center;gap:var(--s1);width:100%;}
.pager-nums{display:flex;align-items:center;gap:var(--s1);margin:0 var(--s3);}
.pagenum{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  font-family:var(--font-label);font-size:15px;font-variant-numeric:tabular-nums;color:var(--layer-text);
  background:none;border:none;border-radius:var(--radius);cursor:pointer;padding:4px 0 0;box-sizing:border-box;}
.pagenum:hover,.pagenum.is-hover{background:var(--layer-tint);}
.pagenum.is-current,.pagenum[aria-current="page"]{background:var(--layer-action);color:var(--layer-action-text);}
.pagenum:focus-visible,.pagenum.is-focus{outline:2px solid var(--layer-focus);outline-offset:2px;}
.pager-gap{color:var(--layer-text-soft);font-family:var(--font-label);font-size:15px;padding:0 2px;}
.btn-text[aria-disabled="true"]{color:var(--layer-text-soft);text-decoration:none;cursor:not-allowed;pointer-events:none;}
.pager-count{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);display:none;}
.pager-phone{justify-content:space-between;}
.pager-phone .pager-count{display:inline;}
/* below 520px the real pager collapses the same way the phone demo does */
@media (max-width:520px){
  .pager{justify-content:space-between;}
  .pager-nums{display:none;}
  .pager .pager-count{display:inline;}
}

/* phone menu: opens from the header, continues it as one Oxblood block */
.phone-menu-frame{width:100%;max-width:390px;}
.phone-menu-frame .site-hdr{border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--layer-line);}
.phone-menu{background:var(--layer-ground);display:flex;flex-direction:column;border-radius:0 0 var(--radius) var(--radius);padding-bottom:var(--s5);}
.menu-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 var(--gutter);
  font-family:var(--font-display);font-size:19px;color:var(--layer-text);text-decoration:none;
  border-bottom:1px solid var(--layer-line);}
.menu-row:hover,.menu-row.is-hover{background:var(--layer-tint);}
.menu-row:focus-visible,.menu-row.is-focus{outline:2px solid var(--layer-focus);outline-offset:-2px;}
.menu-row.is-current,.menu-row[aria-current="page"]{box-shadow:inset 2px 0 0 var(--layer-accent);}
.menu-icon{width:20px;height:20px;flex:none;color:var(--layer-text);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.menu-extra{margin-top:var(--s5);display:flex;flex-direction:column;}
.menu-extra .btn-text{margin:var(--s4) var(--gutter);align-self:flex-start;}
.menu-toggle svg[hidden]{display:none;}

/* ---------- MESSAGES & POP-UPS ---------- */
/* alerts: in the page. Icon carries the meaning, never colour alone. */
.alert{display:grid;grid-template-columns:20px 1fr auto;gap:var(--s3);align-items:start;
  width:100%;box-sizing:border-box;
  background:var(--layer-tint);border-radius:var(--radius);padding:var(--s4) var(--s5);max-width:var(--measure);}
.alert-icon{width:20px;height:20px;flex:none;color:var(--layer-text);margin-top:1px;}
.alert-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.alert-body{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.alert-body h4{font-family:var(--font-display);font-weight:600;font-size:16px;margin:0;color:var(--layer-text);}
.alert-body p{font-family:var(--font-body);font-size:16px;line-height:1.5;margin:0;color:var(--layer-text);}
.alert-body .btn-text{align-self:flex-start;}
.alert.problem{border:1.5px solid var(--layer-alert);}
.alert.problem .alert-icon{color:var(--layer-alert);}
.alert > .icon-btn{margin-top:-8px;margin-right:-8px;}

/* pop-ups: the page stays in view behind, blurred (founder 2026-10-08); Oxblood card with a Gold frame (Chalk card with a Claret frame works too).
   Desktop: heading, text and buttons centred; buttons stacked, the more prominent on top, each its own width (text + padding).
   Phone: buttons stacked, full width, the more prominent on top. A close × is optional.
   The one exception: the account page's Choose photo pop-up keeps Upload a photo and Save side by side (set on that page).
   The demo screen is a query container so its contents can respond to its own
   rendered width — the same demo box works whether it's shown wide or
   narrow, and whether the whole page is wide or narrow. */
.msg-screen{position:relative;width:100%;min-width:0;height:560px;background:var(--layer-ground);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;padding:var(--s4) var(--gutter);box-sizing:border-box;container-type:inline-size;}
.msg-screen.phone{height:520px;}
.popup[hidden]{display:none;}
.toast[hidden]{display:none;}
.btn[hidden]{display:none;}
.popup{position:relative;width:100%;max-width:420px;background:var(--layer-ground);border-radius:var(--radius);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);box-sizing:border-box;}
.popup::before{content:"";position:absolute;inset:8px;border:1px solid var(--layer-accent);border-radius:var(--radius);pointer-events:none;} /* every pop-up: a thin frame in its accent — Gold on Oxblood, Claret on Chalk */
.popup-close{position:absolute;top:var(--s3);right:var(--s3);}
.popup-mark{height:40px;display:block;margin:0 auto;}
.popup-title{font-family:var(--font-display);font-weight:600;font-size:24px;margin:0;color:var(--layer-text);}
.popup-sub{font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--layer-text-soft);margin:0;}
.popup-msg{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--layer-text);margin:0;}
.popup-title,.popup-sub,.popup-msg{text-align:center;}   /* every pop-up: centred (founder 2026-10-16) */
.popup-actions{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--s3);align-self:stretch;}
.popup-actions .btn{width:auto;}   /* desktop: buttons stacked and centred, each its own width (text + padding); the more prominent button is written first, so it sits on top; in delete confirmations that is the safe choice, Cancel (founder 2026-10-17) */
/* phone: buttons stacked, full width, the more prominent button on top */
@container (max-width:420px){
  .popup-actions{align-items:stretch;}
  .popup-actions .btn{width:100%;}
}
@media (max-width:720px){
  .popup-actions{align-items:stretch;}
  .popup-actions .btn{width:100%;}
}

/* toasts: short, bottom-centre, disappear on their own */
.toast{display:inline-flex;align-items:center;gap:var(--s3);background:var(--layer-ground);color:var(--layer-text);
  font-family:var(--font-body);font-size:15px;border-radius:var(--radius);min-height:44px;
  padding:0 var(--s4);max-width:420px;box-sizing:border-box;white-space:nowrap;}
.on-oxblood .toast.on-oxblood{box-shadow:inset 0 0 0 1px var(--layer-accent);} /* on an Oxblood page the Oxblood toast gets a thin Gold edge */
.on-oxblood .on-chalk .toast.on-oxblood{box-shadow:none;}   /* (a Chalk page inside an Oxblood frame keeps the plain toast) */
.toast-icon{width:18px;height:18px;flex:none;color:var(--layer-text);}
.toast-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.msg-screen-chalk{position:relative;width:100%;min-width:0;height:300px;background:var(--layer-ground);border:1px solid var(--layer-line);
  border-radius:var(--radius);box-sizing:border-box;container-type:inline-size;}
.toast-pinned{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);}
.msg-screen-chalk.phone{width:100%;max-width:390px;}
/* narrow screen: toast goes full width minus the phone side margin (20px) each side, 16px up */
@container (max-width:420px){
  .toast-pinned{left:var(--gutter);right:var(--gutter);bottom:16px;transform:none;width:auto;max-width:none;}
}

/* an Oxblood bar on a Chalk page (cookie strip, renewal banner, gift bar): the pop-up's thin Gold frame, just inside its edge */
.bar-frame{position:relative;}
.bar-frame::before{content:"";position:absolute;inset:8px;border:1px solid var(--layer-accent);border-radius:var(--radius);pointer-events:none;}

/* cookie notice: pinned strip, equal-weight buttons */
.cookie-strip{position:absolute;left:0;right:0;bottom:0;background:var(--layer-ground);
  padding:var(--s4) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);box-sizing:border-box;}
.cookie-text{font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--layer-text);margin:0;max-width:60%;}
.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);flex:none;} /* Decline and Accept always the same width */
.cookie-strip.bar-frame{position:absolute;padding:var(--s5) var(--s6);}
.cookie-strip.phone-cookie{flex-direction:column;align-items:stretch;}
.cookie-strip.phone-cookie .cookie-text{max-width:none;margin-bottom:var(--s2);}
.cookie-strip.phone-cookie .cookie-actions{width:100%;}
.cookie-strip.phone-cookie .cookie-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
.cookie-strip.phone-cookie .cookie-actions .btn{padding-left:var(--s3);padding-right:var(--s3);}
/* narrow screen: strip stacks the same way automatically */
@container (max-width:420px){
  .cookie-strip{flex-direction:column;align-items:stretch;}
  .cookie-strip .cookie-text{max-width:none;margin-bottom:var(--s2);}
  .cookie-strip .cookie-actions{width:100%;}
  .cookie-strip .cookie-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cookie-strip .cookie-actions .btn{padding-left:var(--s3);padding-right:var(--s3);}
}

/* ---------- CARDS ---------- */
/* article card: flat on Chalk, no box/border/shadow. The whole card is a link. */
.cards-wrap{width:100%;max-width:var(--wide);min-width:0;container-type:inline-size;}
.acard{display:block;text-decoration:none;color:inherit;border-radius:var(--radius);}
.acard:focus-visible,.acard.is-focus{outline:2px solid var(--layer-focus);outline-offset:4px;}
.acard-pic{background:var(--placeholder);aspect-ratio:3/2;border-radius:var(--radius);width:100%;}
.acard-body{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.acard-headline{font-family:var(--font-display);font-weight:600;color:var(--layer-text);margin:0;}
.acard:hover .acard-headline,.acard.is-hover .acard-headline{
  text-decoration:underline;text-decoration-color:var(--layer-accent);text-decoration-thickness:1px;text-underline-offset:4px;}
.acard-standfirst{font-family:var(--font-body);color:var(--layer-text-soft);margin:0;font-size:var(--fs-box);line-height:var(--lh-box);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.acard-meta{font-family:var(--font-label);font-size:13px;line-height:1.6;color:var(--layer-text-soft);margin:0;}
.member-mark{position:relative;display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:3.25px 8px 0;box-sizing:border-box; /* 3.25px top: measured on the rendered pixels — the capitals' centre sits on the box's centre */
  background:none;box-shadow:inset 0 0 0 1px var(--layer-accent);color:var(--layer-accent);border-radius:var(--radius);
  font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  vertical-align:middle;}
.member-mark svg{width:12px;height:12px;flex:none;transform:translateY(-1.75px);fill:none;stroke:var(--layer-accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}

/* large: picture 7/12, text 5/12 */
.acard-large{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:start;}
.acard-large .acard-pic{grid-column:1/8;}
.acard-large .acard-body{grid-column:8/13;}
.acard-large .acard-headline{font-size:32px;}
@container (max-width:640px){
  .acard-large{grid-template-columns:1fr;}
  .acard-large .acard-pic,.acard-large .acard-body{grid-column:1/-1;}
}

/* standard: three across, equal gutters */
.cards-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.acard-standard{display:flex;flex-direction:column;gap:var(--s3);}
.acard-standard .acard-headline{font-size:20px;}
@container (max-width:640px){
  .cards-row3{grid-template-columns:1fr;}
}

/* row: picture left, headline + meta right, hairline between rows */
.acard-rows{display:flex;flex-direction:column;}
.acard-row{display:flex;gap:var(--s4);align-items:center;padding:var(--s4) 0;}
.acard-rows .acard-row:first-child{padding-top:0;}
.acard-rows .acard-row:not(:last-child){border-bottom:1px solid var(--layer-line);}
.acard-row .acard-pic{width:120px;flex:none;}
.acard-row .acard-body{gap:var(--s2);}
.acard-row .acard-headline{font-size:17px;}

/* read-more card: the one boxed card — grey box, Claret edge on the left, picture left; for lists like the Archive.
   Writer, date and read time run together on one line, as on the other cards. Narrow (phone): a smaller picture. */
.rm-card{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;box-sizing:border-box;
  padding:14px 18px 14px 14px;text-decoration:none;color:var(--layer-text);
  background:var(--layer-tint);border-left:var(--accent-edge);border-radius:var(--radius);}
.rm-card .rm-pic{position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:var(--radius);background:var(--placeholder);}
.rm-card .rm-text{min-width:0;}
.rm-card .rm-headline{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3;margin:6px 0 0;}
.rm-card .rm-standfirst{font-family:var(--font-body);font-size:var(--fs-box);line-height:var(--lh-box);color:var(--layer-text-soft);margin:8px 0 0;}
.rm-card .rm-meta{font-family:var(--font-label);font-size:13px;letter-spacing:.04em;color:var(--layer-text-soft);margin:8px 0 0;}
.rm-card:hover .rm-headline,.rm-card.is-hover .rm-headline{text-decoration:underline;text-decoration-color:var(--layer-accent);text-underline-offset:3px;}
.rm-card:focus-visible,.rm-card.is-focus{outline:2px solid var(--layer-focus);outline-offset:3px;}
.rm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);}
@container (max-width:720px){
  .rm-list{grid-template-columns:minmax(0,1fr);}
  .rm-card{grid-template-columns:120px 1fr;gap:12px;padding:12px;}
  .rm-card .rm-headline{font-size:16px;}
}

/* writer chip */
.chip{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;color:inherit;border-radius:var(--radius);}
.chip-pic{width:40px;height:40px;border-radius:50%;background:var(--placeholder);flex:none;display:block;}
.chip-text{display:flex;flex-direction:column;gap:2px;}
.chip-name{font-family:var(--font-body);font-size:16px;color:var(--layer-text);}
.chip-role{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);}
.chip:hover .chip-name,.chip.is-hover .chip-name{text-decoration:underline;text-decoration-color:var(--layer-accent);text-underline-offset:3px;}
.chip:focus-visible,.chip.is-focus{outline:2px solid var(--layer-focus);outline-offset:3px;}
.chip.small .chip-pic{width:28px;height:28px;}
.chip.small .chip-name{font-size:14px;}

/* pricing card: the Chalk card has a thin Claret frame; the Oxblood card has no frame. The plan name is Gold on Oxblood (the Membership page), Claret on Chalk (the Oxblood screen) */
.price-card{position:relative;background:var(--layer-ground);border-radius:var(--radius);padding:var(--s6);
  max-width:380px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--s4);}
.price-card::before{content:"";position:absolute;inset:8px;border:1px solid var(--layer-card-frame);border-radius:var(--radius);pointer-events:none;}
.price-plan{font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--layer-accent);margin:0;}
.price-amount{display:flex;align-items:baseline;gap:6px;}
.price-amount .num{font-family:var(--font-display);font-weight:600;font-size:48px;color:var(--layer-text);}
.price-amount .period{font-family:var(--font-body);font-size:16px;color:var(--layer-text-soft);}
.price-hr{border:none;border-top:1px solid var(--layer-line);margin:0;}
.price-benefits{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none;}
.price-benefits li{display:flex;align-items:center;gap:var(--s3);font-family:var(--font-body);font-size:16px;color:var(--layer-text);}
.price-benefits svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--layer-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.price-login{align-self:center;}

/* members-only cut-off: text stops, a rule, an Oxblood panel — no fade */
.cutoff-col{width:100%;max-width:var(--measure);min-width:0;}
.cutoff-col > p{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--layer-text);margin:0 0 var(--s4);}
.cutoff-rule{border:none;border-top:var(--rule-section);margin:0 0 var(--s5);}
.cutoff-panel{position:relative;background:var(--layer-ground);border-radius:var(--radius);padding:var(--s6);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s4);box-sizing:border-box;container-type:inline-size;}   /* centred, on the page and as a pop-up (founder 2026-10-16) */
.cutoff-panel::before{content:"";position:absolute;inset:8px;border:1px solid var(--layer-accent);border-radius:var(--radius);pointer-events:none;} /* the members-only panel: thin Gold frame, on the page and in the gift pop-ups */
.cutoff-panel .lock{width:20px;height:20px;color:var(--layer-accent);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.cutoff-heading{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--layer-text);margin:0;}
.cutoff-message{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--layer-text);margin:0;}
/* Become a member: its own width (text + padding) on desktop, full width on a phone, like every pop-up button; Log in sits centred under it */
.cutoff-actions{display:flex;flex-direction:column;align-items:center;gap:var(--s4);align-self:stretch;}
.cutoff-actions .btn{width:auto;}
@media (max-width:720px){ .cutoff-actions{align-items:stretch;} .cutoff-actions .btn{width:100%;} .cutoff-actions .btn-text{align-self:center;} }

/* ---------- STATS DATABASE ---------- */
/* shared grid unit: keeps every piece's left/right edge aligned */
.db-grid-wrap{width:100%;max-width:var(--wide);min-width:0;container-type:inline-size;}

/* sidebar */
.db-sidebar{width:240px;max-width:100%;box-sizing:border-box;border-right:1px solid var(--layer-line);padding-bottom:var(--s3);}
.db-group{font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--layer-text-soft);padding:0 var(--s4);margin:var(--s4) 0 var(--s2);}
.db-sidebar .db-group:first-child{margin-top:var(--s3);}
.db-item{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s4) 2px;
  font-family:var(--font-body);font-size:16px;color:var(--layer-text);text-decoration:none;box-sizing:border-box;}
.db-item svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--layer-text-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.db-item:hover,.db-item.is-hover{background:var(--layer-tint);}
.db-item:focus-visible,.db-item.is-focus{outline:2px solid var(--layer-focus);outline-offset:-2px;}
.db-item.is-current{color:var(--layer-text);}
.db-item.is-current::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--layer-accent);}

/* panel header */
.db-panelhdr{border-top:var(--rule-section);padding-top:var(--s4);display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap;}
.db-title{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--layer-text);margin:0;}
.db-desc{font-family:var(--font-body);font-size:15px;color:var(--layer-text-soft);margin:4px 0 0;}
.db-actions{display:flex;align-items:center;gap:var(--s3);}

/* number tiles */
.db-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);}
@container (max-width:640px){ .db-tiles{grid-template-columns:repeat(2,1fr);} }
.db-tile{border-top:1px solid var(--layer-line);padding-top:var(--s3);display:flex;flex-direction:column;gap:6px;min-width:0;}
.db-tile-label{font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--layer-text-soft);margin:0;}
.db-tile-num{font-family:var(--font-display);font-weight:600;font-size:36px;color:var(--layer-text);font-variant-numeric:tabular-nums;margin:0;}
.db-tile-change{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);display:flex;align-items:center;gap:4px;margin:0;}
.db-spark{display:block;}
.db-spark polyline{stroke:var(--layer-accent);} /* the trend line takes the accent: Claret on Chalk, Gold on Oxblood */

/* data table */
.db-table-wrap{width:100%;overflow-x:auto;container-type:inline-size;}
.db-table{width:100%;border-collapse:collapse;min-width:600px;}
.db-table-narrow{min-width:0;}
.db-table-compact{min-width:0;}
.db-table th{font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--layer-text-soft);text-align:left;font-weight:400;padding:0 var(--s3) var(--s2) 0;border-bottom:1.5px solid var(--layer-text);white-space:nowrap;}
.db-table td{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--layer-line);
  font-family:var(--font-body);font-size:15px;color:var(--layer-text);white-space:nowrap;}
.db-table td.db-num{font-family:var(--font-label);font-variant-numeric:tabular-nums;}
.db-table th.db-num,.db-table td.db-num{text-align:right;}
.db-table tbody tr:hover{background:var(--layer-tint);}
.db-sort{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;
  display:inline-flex;align-items:center;gap:4px;text-transform:inherit;letter-spacing:inherit;}
.db-sort-hint{opacity:0;color:var(--layer-text-soft);}
.db-sort:hover .db-sort-hint{opacity:1;}
.db-sort.is-sorted{color:var(--layer-text);}
.db-table-scroll{max-height:320px;overflow:auto;}
.db-table-scroll thead th{position:sticky;top:0;background:var(--layer-ground);z-index:2;}
.db-table th:first-child,.db-table td:first-child{position:sticky;left:0;background:var(--layer-ground);
  padding-left:0;border-right:1px solid var(--layer-line);z-index:1;}
.db-table-scroll thead th:first-child{z-index:3;}
/* narrow container: keep the pinned first column short so number columns are visible.
   table-layout:fixed is needed — max-width alone isn't reliably honoured by an
   auto-layout table's column-sizing algorithm. */
@container (max-width:400px){
  .db-table{table-layout:fixed;}
  .db-table th:first-child,.db-table td:first-child{width:120px;max-width:120px;overflow:hidden;text-overflow:ellipsis;}
}
.db-table-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap;}
.db-count{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);margin:0;}

/* filter bar */
.db-filterbar{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;}
.db-filterbar[hidden]{display:none;}
.db-filterbar .field{flex:1 1 140px;min-width:0;}
.db-filterbar-stack{flex-direction:column;align-items:stretch;margin-top:var(--s3);}
.db-filterbar-stack .field,.db-filterbar-stack .db-fieldlike{max-width:none;}
.db-fieldlike{display:flex;flex-direction:column;gap:6px;flex:1 1 160px;min-width:0;}
.db-fieldlike-label{font-family:var(--font-label);font-size:13px;letter-spacing:.04em;color:var(--layer-text);}
.db-trigger{min-height:44px;padding:0 var(--s3) 1px;border:1.5px solid var(--layer-text-soft);border-radius:var(--radius);
  background:none;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-body);font-size:15px;color:var(--layer-text);cursor:pointer;width:100%;box-sizing:border-box;
  white-space:nowrap;overflow:hidden;min-width:0;text-align:left;}
.db-trigger span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.db-trigger svg{width:12px;height:12px;flex:none;fill:var(--layer-text);stroke:none;}
.db-trigger .db-trigger-ico{width:20px;height:20px;fill:none;stroke:var(--layer-text-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.db-trigger:hover{border-color:var(--layer-text);}
.db-trigger:focus-visible{outline:2px solid var(--layer-focus);outline-offset:2px;}
.db-chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.db-chips-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);}
.db-chips-row .btn-text{flex:none;white-space:nowrap;}
.db-chip{display:inline-flex;align-items:center;gap:0;height:44px;padding:2px 0 0 14px;box-sizing:border-box;
  background:var(--layer-tint);border-radius:var(--radius);font-family:var(--font-label);font-size:13px;color:var(--layer-text);}
.db-chip button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;color:var(--layer-text);cursor:pointer;border-radius:var(--radius);}
.db-chip button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
.db-chip button:hover{background:var(--layer-ground);}
.db-chip button:focus-visible{outline:2px solid var(--layer-focus);outline-offset:1px;}

/* shared flyout panel: multi-select, saved views, export menu — no shadow, border separates */
.db-panel{background:var(--layer-ground);border:1px solid var(--layer-text-soft);border-radius:var(--radius);width:100%;box-sizing:border-box;}
.db-panel-pad{padding:var(--s3);}
.db-panel-list{display:flex;flex-direction:column;max-height:180px;overflow:auto;padding:0 0 var(--s2);}
.db-panel-choice{padding:0 var(--s3);min-height:40px;}
.db-panel-foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);padding:var(--s3);border-top:1px solid var(--layer-line);}

/* date range */
.db-cal{width:356px;max-width:100%;background:var(--layer-ground);border:1px solid var(--layer-text-soft);border-radius:var(--radius);
  padding:var(--s4);box-sizing:border-box;}
.db-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);}
.db-cal-month{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--layer-text);margin:0;}
.db-cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-family:var(--font-label);font-size:12px;color:var(--layer-text-soft);margin-bottom:var(--s2);}
.db-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.db-day{width:100%;aspect-ratio:1;max-width:44px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-label);font-size:14px;color:var(--layer-text);border-radius:var(--radius);
  cursor:pointer;background:none;border:1px solid transparent;box-sizing:border-box;font-variant-numeric:tabular-nums;
  padding-top:4px;}
.db-day:hover{background:var(--layer-tint);}
.db-day:focus-visible{outline:2px solid var(--layer-focus);outline-offset:2px;}
.db-day.is-between{background:var(--layer-tint);}
.db-day.is-end{background:var(--layer-action);color:var(--layer-action-text);}
.db-day.is-today{border-color:var(--layer-text);}
.db-day-empty{cursor:default;pointer-events:none;}

/* slider */
.db-slider-block{width:280px;max-width:100%;}
.db-slider-labels{display:flex;justify-content:space-between;font-family:var(--font-label);font-size:13px;
  color:var(--layer-text-soft);font-variant-numeric:tabular-nums;margin-bottom:2px;}
.db-slider-value{color:var(--layer-text);}
.db-slider-current{font-family:var(--font-label);font-size:13px;color:var(--layer-text);
  font-variant-numeric:tabular-nums;margin:0 0 4px;}
.db-track-wrap{position:relative;height:44px;display:flex;align-items:center;}
.db-track-base{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--layer-line);transform:translateY(-50%);}
.db-track-fill{position:absolute;top:50%;height:2px;background:var(--layer-action);transform:translateY(-50%);}
.db-slider{position:absolute;left:0;top:0;z-index:1;-webkit-appearance:none;appearance:none;
  width:100%;height:44px;background:none;margin:0;}
.db-slider::-webkit-slider-runnable-track{height:2px;background:transparent;}
.db-slider::-moz-range-track{height:2px;background:transparent;border:none;}
.db-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--layer-ground);border:2px solid var(--layer-action);margin-top:-9px;cursor:pointer;pointer-events:auto;}
.db-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--layer-ground);
  border:2px solid var(--layer-action);cursor:pointer;pointer-events:auto;}
.db-slider:hover::-webkit-slider-thumb,.db-slider:hover::-moz-range-thumb{background:var(--layer-tint);}
.db-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--layer-focus);outline-offset:2px;}
.db-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--layer-focus);outline-offset:2px;}
.db-track-wrap .db-slider{pointer-events:none;}
.db-track-wrap .db-slider::-webkit-slider-thumb{pointer-events:auto;}
.db-track-wrap .db-slider::-moz-range-thumb{pointer-events:auto;}

/* saved views / export: rows reuse the panel look */
.db-view-row{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:44px;box-sizing:border-box;
  padding:0 var(--s3) 2px;font-family:var(--font-body);font-size:16px;color:var(--layer-text);text-decoration:none;}
.db-view-row svg:first-of-type{width:16px;height:16px;flex:none;fill:none;stroke:var(--layer-text-soft);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.db-view-row:hover{background:var(--layer-tint);}
.db-view-row:focus-visible{outline:2px solid var(--layer-focus);outline-offset:-2px;}
.db-view-row.is-current::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--layer-accent);}
.db-view-more{margin-left:auto;flex:none;opacity:0;}
.db-view-row:hover .db-view-more,.db-view-more:focus-visible{opacity:1;}


/* put together: a full dashboard screen inside a demo frame */
.db-shell-frame{width:100%;border:1px solid var(--layer-line);border-radius:var(--radius);overflow:hidden;container-type:inline-size;}
.db-shell{display:flex;width:100%;align-items:stretch;}
.db-shell-sidebar{width:200px;}
.db-shell-main{flex:1;min-width:0;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5);box-sizing:border-box;}
.db-shell-main-phone{padding:var(--s4);gap:var(--s4);}
.db-shell-main .db-tiles{gap:var(--s4);}
@container (max-width:640px){ .db-shell{flex-direction:column;} .db-shell-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--layer-line);} }

/* ---------- MEMBERSHIP & JOINING ---------- */
/* step indicator: three equal bars; done + current Oxblood, upcoming a hairline */
.mb-cols{display:grid;gap:var(--s6);width:100%;max-width:420px;min-width:0;}
.mb-col{width:100%;min-width:0;}
.mb-steps-wrap{width:100%;min-width:0;container-type:inline-size;}
.mb-steps-count{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);margin:0 0 var(--s2);}
.mb-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);}
.mb-steps li{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.mb-bar{display:block;height:3px;background:var(--layer-line);border-radius:var(--radius);}
.mb-steps li.is-done .mb-bar,.mb-steps li.is-current .mb-bar{background:var(--layer-action);}
.mb-step-name{display:flex;align-items:center;gap:4px;font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--layer-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:var(--s3);box-sizing:border-box;min-width:0;}
.mb-steps li.is-current .mb-step-name{color:var(--layer-text);}
.mb-step-name svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
/* names must never touch: measured, the widest name (tick + text, 116px) plus 12px clearance needs 128px per segment,
   i.e. a 400px column. Below that — or whenever a name is cut off (the script adds .is-compact) — only the current
   name is shown, left-aligned under the bars. */
@container (max-width:399px){
  .mb-steps li{display:contents;}
  .mb-steps .mb-bar{grid-row:1;}
  .mb-steps .mb-step-name{display:none;}
  .mb-steps li.is-current .mb-step-name{display:flex;grid-row:2;grid-column:1/-1;}
}
.mb-steps-wrap.is-compact .mb-steps li{display:contents;}
.mb-steps-wrap.is-compact .mb-steps .mb-bar{grid-row:1;}
.mb-steps-wrap.is-compact .mb-steps .mb-step-name{display:none;}
.mb-steps-wrap.is-compact .mb-steps li.is-current .mb-step-name{display:flex;grid-row:2;grid-column:1/-1;}
/* top banner: full width, grey-tint, hairline below; scrolls with the page */
.mb-banner{width:100%;background:var(--layer-tint);border-bottom:1px solid var(--layer-line);box-sizing:border-box;container-type:inline-size;}
.mb-banner-in{max-width:var(--wide);margin:0 auto;min-height:56px;padding:var(--s3) var(--s5);box-sizing:border-box;
  display:flex;align-items:center;gap:var(--s4);}
.mb-banner-msg{flex:1;min-width:0;margin:0;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--layer-text);}
.mb-banner-actions{display:flex;align-items:center;gap:var(--s2);flex:none;}
@container (max-width:520px){
  .mb-banner-in{display:grid;grid-template-columns:1fr auto;align-items:start;gap:var(--s3);padding:var(--s4) var(--gutter);}
  .mb-banner-msg{grid-column:1;grid-row:1;padding-top:var(--s2);}
  .mb-banner-actions{display:contents;}
  .mb-banner-actions .icon-btn{grid-column:2;grid-row:1;margin:0 -8px 0 0;}
  .mb-banner-actions .btn{grid-column:1/-1;grid-row:2;width:100%;}
}
.mb-page-under{padding:var(--s6) var(--s5);}

/* profile header */
.mb-profile-wrap{width:100%;max-width:var(--measure);min-width:0;container-type:inline-size;}
.mb-profile{padding-bottom:var(--s5);border-bottom:var(--rule-section);display:flex;flex-direction:column;align-items:flex-start;}
.mb-profile-row{display:flex;align-items:center;gap:var(--s5);width:100%;}
.mb-avatar{width:96px;height:96px;border-radius:50%;background:var(--placeholder);flex:none;display:block;}
.mb-profile-id{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0;}
.mb-name{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.15;color:var(--layer-text);margin:0;}
.mb-since{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);margin:0;}
.mb-bio{font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--layer-text);margin:var(--s4) 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mb-profile .btn{margin-top:var(--s4);}
@container (max-width:420px){
  .mb-profile-row{flex-direction:column;align-items:flex-start;gap:var(--s3);}
  .mb-avatar{width:72px;height:72px;}
  .mb-name{font-size:26px;}
}

/* photo upload */
.mb-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:var(--s5);width:100%;}
.mb-states .state{width:100%;min-width:0;}
.mb-photo-wrap{width:100%;min-width:0;container-type:inline-size;}
.mb-photo{display:flex;align-items:center;gap:var(--s5);}
.mb-circle{width:96px;height:96px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;background:var(--layer-tint);color:var(--layer-text-soft);}
.mb-circle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.mb-circle.has-photo{background:var(--placeholder);}
.mb-circle.is-error{border:1.5px solid var(--layer-alert);}
.mb-circle .cc-loader,.mb-frame .cc-loader{width:20px;height:31px;color:var(--layer-text-soft);}
.mb-photo-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0;}
.mb-photo-btns{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.mb-help{font-family:var(--font-label);font-size:13px;color:var(--layer-text-soft);margin:0;}
@container (max-width:340px){
  .mb-photo{flex-direction:column;align-items:flex-start;gap:var(--s3);}
}

/* booking slot: a fixed-size frame so the page never jumps while the calendar loads */
.mb-slot{width:100%;max-width:var(--measure);min-width:0;container-type:inline-size;}
.mb-frame{width:100%;height:640px;border:1px solid var(--layer-line);border-radius:var(--radius);background:var(--layer-ground);
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.mb-frame.is-loaded{background:var(--placeholder);}
.mb-slot .btn-text{margin-top:var(--s3);}
@container (max-width:420px){ .mb-frame{height:560px;} }

/* pricing tiers: side by side when wide, one compact row per tier when the container is narrow */
.mb-tiers-wrap{width:100%;min-width:0;container-type:inline-size;}
.mb-tiers-wide{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:var(--s5);align-items:stretch;}
.mb-tiers-wide .price-card{max-width:none;height:100%;padding:var(--s5);}
.mb-tiers-wide .price-amount{flex-wrap:wrap;}
.mb-tiers-wide .price-amount .num{font-size:40px;}
.mb-tiers-wide .btn{padding-left:var(--s3);padding-right:var(--s3);}
.mb-tiers-wide .price-benefits{flex:1;}
.mb-tiers-compact{display:none;}
.mb-tiers-login{display:block;margin:var(--s4) auto 0;}
.mb-tiers-compact .mb-tiers-login{margin-top:var(--s4);}
/* phone tier list: a box like the pricing card (Claret frame on the Chalk version, none on Oxblood) — the layer class decides the colours */
.mb-tierlist{position:relative;background:var(--layer-ground);border-radius:var(--radius);padding:9px 0;}
.mb-tierlist::before{content:"";position:absolute;inset:8px;border:1px solid var(--layer-card-frame);border-radius:var(--radius);pointer-events:none;}
.mb-tier{margin:0 9px;}
.mb-tier + .mb-tier{border-top:1px solid var(--layer-line);}
.mb-tier-h{margin:0;font:inherit;}
.mb-tier-row{width:100%;min-height:64px;padding:0 15px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:none;border:none;border-radius:var(--radius);cursor:pointer;text-align:left;color:var(--layer-text);}
.mb-tier-row:hover,.mb-tier-row.is-hover{background:var(--layer-tint);}
.mb-tier-row:focus-visible,.mb-tier-row.is-focus{outline:2px solid var(--layer-focus);outline-offset:-2px;}
.mb-tier-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.mb-tier-name{font-family:var(--font-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--layer-accent);}
.mb-tier-price{display:flex;align-items:baseline;gap:6px;}
.mb-tier-price .num{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.15;color:var(--layer-text);}
.mb-tier-price .period{font-family:var(--font-body);font-size:15px;color:var(--layer-text-soft);}
.mb-tier-row svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--layer-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.mb-tier-row[aria-expanded="true"] svg{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){ .mb-tier-row svg{transition:none;} }
.mb-tier-body{padding:var(--s2) 15px var(--s5);}
.mb-tier-body .price-benefits{margin:0 0 var(--s4);}
.mb-tier-body[hidden]{display:none;}
/* breakpoints, measured: the cards' narrowest usable width is 224px each, so 2 tiers need 473px and 3 tiers need 721px.
   2 tiers switch to the compact list under 560px (cards under ~268px feel cramped); 3 tiers under 721px. */
@container (max-width:559px){
  .mb-tiers-2 .mb-tiers-wide,.mb-tiers-2 .mb-tiers-login-wide{display:none;}
  .mb-tiers-2 .mb-tiers-compact{display:block;}
}
@container (max-width:720px){
  .mb-tiers-3 .mb-tiers-wide,.mb-tiers-3 .mb-tiers-login-wide{display:none;}
  .mb-tiers-3 .mb-tiers-compact{display:block;}
}