/* =====================================================================
   MASCULINE FRAME · Access Hub design language, applied to the site
   Loaded after chrome.css on every page. One layer, so the port is
   reviewable and reversible: it changes GEOMETRY, SURFACE and FOCUS only.
   Copy, colour roles, layout and the DRAW / RISE / RAKE / LIVE motion
   vocabulary are untouched.

   Source: MF-Design-Language.pdf (the panel's shipped globals.css).
     1. nothing is square · 14 / 10 / 8 / 999 on a size-tied scale
     2. nothing is a flat fill · edge + gradient + shadow, all three
     3. warm neutrals (in ds/colors_and_type.css)
     4. bronze classifies, olive acts
   ===================================================================== */

/* --- focus · olive, because focus is live interaction ---------------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mf-olive-mid); outline-offset: 2px;
}

/* --- lifted panels · a card sits above the page --------------------- */
.panel, .surf__card, .pconv, .target, .priv__card, .wipe, .runs,
.wf-tri__c, .wf-not, .wf-leave__c, .lgnote, .reply, .builder__media {
  border-radius: var(--mf-radius-panel);
  border-color: var(--mf-edge);
  background-image: var(--mf-panel-grad);
  box-shadow: var(--mf-shadow-lift);
}
/* the window mocks keep their own deep drop; they are held further off the page */
.win {
  border-radius: var(--mf-radius-panel); border-color: var(--mf-edge); overflow: hidden;
  background-image: var(--mf-panel-grad);
  box-shadow: inset 0 1px 0 rgba(226,176,131,0.024), 0 40px 90px -40px rgba(0,0,0,0.9);
}
/* an image frame carries no gradient: the photograph is the surface */
.builder__media { background-image: none; }

/* --- recessed strips · a well sits below the panel it is in ---------- */
.panel__note, .pr-flag, .shop__why, .pf, .dcard, .tgconv {
  border-radius: var(--mf-radius-control);
  border-color: var(--mf-edge-soft);
  box-shadow: var(--mf-shadow-recessed);
}

/* --- chat bubbles --------------------------------------------------- */
.chat .u { border-radius: var(--mf-radius-panel) var(--mf-radius-panel) 4px var(--mf-radius-panel); border-color: var(--mf-edge-soft); }
.chat .b, .pchat .u { border-radius: var(--mf-radius-panel); }
.chat .b { border-color: var(--mf-edge-soft); }

/* --- data surfaces · the row rule is softer than a panel hairline ---- */
.included p, .incl p, .wkst > li, .phz, .revparts li, .lgtoc--m a {
  border-top-color: var(--mf-row-rule);
}
.included, .incl, .wkst, .revparts { border-bottom-color: var(--mf-row-rule); }