/* =====================================================================
   MESteel v2 — shared stylesheet
   Tokens, base, layout primitives, header/footer/mobile menu and the
   components reused on every page (tier badge, paywall tile, ticker).

   Lifted verbatim from design/homepage.html. Values here are FINAL —
   see design/README.md. Page-specific CSS belongs in the page view,
   never in this file, and never a second copy of the header/footer.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#0F172A;
  --blue:#1F3F8F;
  --navy:#0F1F4A;
  --blue-10:#E8EEFA;
  --bg:#F3F6FB;
  --line:#E3E8EF;
  --mute:#64748B;
  --faint:#94A3B8;
  --green:#047857;
  --green-10:#D1FAE5;
  --red:#DC2626;
  --shadow:0 2px 10px rgba(15,31,74,.06);

  /* Sell / Buy accents (design/README.md) */
  --sell:#15803D;   --sell-10:#DCFCE7;
  --buy:#C2410C;    --buy-10:#FFEDD5;
  /* The default for anything themed by data-kind but drawn outside one. */
  --accent:var(--blue); --accent-10:var(--blue-10);
  --success:#16A34A;
  --error:#DC2626;  --error-10:#FEF2F2;
  --up:#4ADE80;     --dn:#F87171;

  /* Dropdown chevron. Every select in the design uses appearance:none,
     which strips the native arrow without drawing a replacement — leaving
     a dropdown indistinguishable from a text box. Defined once here in
     --mute so it stays on-theme; the register reference already reserves
     24px of right padding for exactly this. */
  --chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Placeholder text. Chrome's own default is around #757575 — dark
     enough to read as a filled-in value — so a hint sits a step lighter
     than --faint. Applied once in the base below. */
  --placeholder:#A8B4C6;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
/* Alpine hides x-show elements only once it boots; x-cloak covers the gap. */
[x-cloak]{display:none!important}
/* One rule for every form on the site. opacity:1 because Firefox dims
   placeholders on top of whatever colour it is given. */
::placeholder{color:var(--placeholder);opacity:1}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy)}
a{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:800}
img{max-width:100%}

/* ---------- Layout primitives ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.sec{padding-top:48px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.sec-h h2{font-size:30px}
.sec-h a{font-size:14px;font-weight:700;display:inline-flex;gap:4px}
.sec-h a:hover{color:var(--navy);transform:translateX(3px)}
.sec-h .hr{display:flex;align-items:center;gap:12px}
.grad{height:6px;border-radius:3px;margin:-8px 0 16px;background:linear-gradient(90deg,#F4CB2A 0,#E9762B 30%,#9FB4CF 32%,#C2CEDC 58%,#B5D0EA 60%,#CBDFF0 70%,#C5CBD2 72%,#D8DBDE 100%)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border-radius:999px;padding:10px 18px;cursor:pointer;border:0;font-family:inherit}
.btn,button{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:hover,button:not(:disabled):hover{transform:translateY(-1px)}
.btn:active,button:not(:disabled):active{transform:translateY(0)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(31,63,143,.3)}
.btn-blue,.btn-blue:hover{color:#fff}
.btn-blue:hover{background:var(--navy);box-shadow:0 8px 22px rgba(31,63,143,.4)}
/* Selling is green, buying is orange — everywhere, so a member can
   tell the two apart before reading the label. */
.btn-sell{background:var(--sell);box-shadow:0 6px 18px rgba(21,128,61,.28)}
.btn-buy{background:var(--buy);box-shadow:0 6px 18px rgba(194,65,12,.28)}
.btn-sell,.btn-buy,.btn-sell:hover,.btn-buy:hover{color:#fff}
.btn-sell:hover,.btn-buy:hover{filter:brightness(.92)}
.btn-ghost{background:none;color:#334155;font-weight:600;padding:9px 14px}
.btn-line{background:#fff;border:1px solid var(--line);color:#334155}
.btn-line:hover,.btn-ghost:hover{background:var(--blue-10);color:var(--blue)}

/* ---------- Header / nav ---------- */
.nav{display:flex;align-items:center;gap:32px;height:76px}
/* width:auto is required — the <img> carries width/height attributes (so the
   browser can reserve space and avoid layout shift), and those act as
   presentational hints. Without this the logo renders 196px wide at 34px
   tall instead of 133px, stretching the wordmark. */
.nav img{height:34px;width:auto;border-radius:5px}
.nav nav{display:flex;gap:26px;font-size:14px;font-weight:600;color:#334155;flex-wrap:nowrap;white-space:nowrap}
.nav nav a{color:#334155;padding:8px 12px;border-radius:999px;margin:0 -4px}
.nav nav a:hover{background:var(--blue-10);color:var(--blue)}
.nav nav a.on{color:var(--blue)}
.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center;min-width:0}
/* Real company names run long ("HIGHWAY STAR GENERAL TRADING LLC"), and an
   unconstrained button pushed the main nav onto two lines. Truncate instead;
   the full name stays in the title attribute. */
.btn-account{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:38px;padding-top:0;padding-bottom:0}
@media (max-width:1279px){.btn-account{max-width:120px}}
/* 1024-1150px is the band between the mobile menu (<=1023) and the 1280
   design width. The reference overflows badly here (scrollWidth 1275 at
   1024); tightening the nav gap keeps ours within the viewport. */
@media (min-width:1024px) and (max-width:1150px){
  .nav nav{gap:12px}
  .nav nav a{padding:8px 7px;margin:0}
  .nav{gap:12px}
}
.nav nav .mcta{display:none}
/* Overlaid header (homepage hero); other pages use .site-header--solid */
.site-header{position:absolute;left:0;right:0;z-index:2}
.site-header--solid{position:relative;background:#fff;border-bottom:1px solid var(--line)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);flex:none}
body.menu-open{overflow:hidden}

/* ---------- Shared components ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
a.card,a.tile,.card a.tile,a.co{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.card:hover,a.tile:hover,a.co:hover{transform:scale(1.02);box-shadow:0 12px 28px rgba(15,31,74,.16);border-color:#B7C4E4}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-10);padding:6px 12px;border-radius:999px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--blue)}

.tile{padding:14px 16px;display:flex;align-items:center;gap:12px;color:inherit}
.tile .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.tile .ic svg{width:26px;height:26px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile.hot .ic svg{stroke:#3A2A0A}
.tile b{display:block;font-size:14px;line-height:1.2}
.tile small{display:block;font-size:12px;color:var(--mute);margin-top:2px}

/* Tier badge — Full / Brief member */
.pill{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;margin-left:auto}
.pill.full{color:var(--blue);background:var(--blue-10)}
.pill.brief{color:var(--mute);background:#F1F5F9}

/* Sell / Buy tag */
.tag{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px}
/* One colour language site-wide: GREEN is selling / an offer, ORANGE is
   buying / an inquiry. The tokens existed but the tag used blue for buy,
   which put the same colour on "wanted" as on every neutral chip. */
.tag.sell{color:var(--sell);background:var(--sell-10)}
.tag.buy{color:var(--buy);background:var(--buy-10)}

/* Anything inside a themed block reads --accent instead of naming a
   colour, so a card, a button and a header stay in step. */
[data-kind="offer"],[data-kind="sell"]{--accent:var(--sell);--accent-10:var(--sell-10)}
[data-kind="inquiry"],[data-kind="buy"]{--accent:var(--buy);--accent-10:var(--buy-10)}

.avatar{width:48px;height:48px;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center;flex:none;overflow:hidden}
/* With a logo the tile becomes a white frame around it, so a mark with
   its own colours is not laid over the brand blue. */
.avatar.img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.avatar img{width:100%;height:100%;object-fit:contain}
.avatar.brief{background:#F1F5F9;color:var(--mute)}

/* Paywall tile — shown to non-members in place of contact data */
.unlock{margin-top:auto;background:var(--blue-10);border-radius:14px;padding:14px 16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;color:var(--blue)}

/* Price ticker */
.ticker{margin-top:-20px;position:relative;display:flex;gap:28px;align-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--navy);color:#fff;border-radius:999px;padding:13px 26px;box-shadow:0 12px 30px rgba(15,31,74,.25)}
.ticker .lbl{color:#93A9E8;letter-spacing:.1em;font-size:11px}
.ticker .up{color:var(--up)}
.ticker .dn{color:var(--dn)}
.ticker .all{margin-left:auto;color:#93A9E8;font-weight:600}
.ticker .all:hover{color:#fff;transform:translateX(3px)}

/* Ad slot placeholder */
/* ---------- The pill ----------
   A checkbox that reads as a choice rather than a form control: the
   register wizard, the dashboard pickers and the back office all use
   it, so it lives here rather than in any one of their stylesheets.

   Markup is a <button data-on> with a <span class="tick"> inside —
   not an <input>, because the tick is drawn rather than native. */
/* The pill, verbatim from the reference's [data-chip]. Blue for an
   activity; the sell / buy accents on steps 5 and 6. */
.pill-opt{display:inline-flex;align-items:center;gap:6px;min-height:40px;white-space:nowrap;padding:0 14px;border-radius:999px;border:1px solid #DDE4F0;background:#fff;color:#334155;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.pill-opt:hover{border-color:var(--blue);transform:none}
/* flex:none, or the tick is a flex item that shrinks: a long label
   squeezes it horizontally and a border-radius:50% circle comes out an
   ellipse. The mobile rules already carried this; the base rule did
   not. */
.pill-opt .tick{display:none;flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:10px;font-weight:800;
  place-items:center;margin-left:-4px}
.pill-opt[data-on="true"]{background:var(--blue-10);border-color:var(--blue-10);color:var(--blue)}
.pill-opt[data-on="true"] .tick{display:grid}
.pill-opt[data-kind="sell"] .tick{background:#047857}
.pill-opt[data-kind="sell"][data-on="true"]{background:#D1FAE5;border-color:#D1FAE5;color:#065F46}
.pill-opt[data-kind="buy"] .tick{background:#C2410C}
.pill-opt[data-kind="buy"][data-on="true"]{background:#FFEDD5;border-color:#FFEDD5;color:#C2410C}

@media (max-width:639px){
  /* The reference keeps its chips nowrap at every width, so a name like
     "Merchant Bars (rounds, flats, squares, tees, hexagons)" pushes the
     page sideways on a phone. Let a long one wrap instead. */
  .pill-opt{white-space:normal;text-align:left;max-width:100%;line-height:1.35;
            padding-top:8px;padding-bottom:8px}
  .pill-opt .tick{flex:none}
}

.ad{border:1.5px dashed #B7C4E4;background:repeating-linear-gradient(135deg,#F3F6FB 0 12px,#EAF0FA 12px 24px);border-radius:14px;display:grid;place-items:center;color:var(--mute);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Horizontal scroller arrows (mobile tiles) */
.arrows{display:none;gap:8px;flex:none}
.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;font-family:inherit}
.arrows button:active{background:var(--bg)}

/* Searchable dropdown (combobox) — mesteel.combo() in mesteel.js.
   The field shell is the host page's own (.f on register, .field on the
   directory); everything from the chevron inwards lives here so both
   pages get the same control. */
.combo{position:relative;--chev-inset:18px}
.combo-row{display:flex;align-items:center;gap:8px;padding-right:calc(var(--chev-inset) + 28px)}
.combo-input{flex:1;min-width:0;cursor:pointer}
.combo-input::placeholder{font-weight:600}
.combo.is-open .combo-input{cursor:text}
/* Drawn rather than set as a background image, so it can flip when open. */
/* Inset by the field's own 18px, so the caret lines up with the text
   rather than sitting against the border. */
.combo-chev{position:absolute;right:var(--chev-inset);top:50%;transform:translateY(-50%);width:22px;height:22px;
            display:grid;place-items:center;color:var(--mute);pointer-events:none;
            transition:transform .18s ease,color .18s ease}
/* Stays slate when open — the reference keeps it grey and lets the blue
   ring carry the state. */
.combo.is-open .combo-chev{transform:translateY(-50%) rotate(180deg)}
/* Broad and shallow: a caret off the 24px icon grid is a third of this
   width and reads as a full stop next to 16px type. */
.combo-chev svg{width:22px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none;
                stroke-linecap:round;stroke-linejoin:round}

/* At least as wide as its field, but free to grow for a long option —
   "Membership, then A-Z" hangs off a 200px control, and the directory's
   176px country field would otherwise wrap "Turks & Caicos Is". */
.combo-list{position:absolute;left:0;right:auto;width:max-content;min-width:100%;
            max-width:min(420px,calc(100vw - 32px));
            top:calc(100% + 10px);z-index:60;background:#fff;
            border-radius:16px;padding:8px;max-height:296px;overflow-y:auto;overscroll-behavior:contain;
            box-shadow:0 24px 60px rgba(15,31,74,.18),0 0 0 1px rgba(15,31,74,.06);
            animation:comboIn .16s ease-out}
@keyframes comboIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.combo-list::-webkit-scrollbar{width:10px}
.combo-list::-webkit-scrollbar-track{background:transparent}
.combo-list::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:999px;border:3px solid #fff}
/* The dial-code field is 112px wide; its panel is not. */
.combo-list.wide{right:auto;min-width:280px}
/* Anchored right — set in the markup for a toolbar control, and added
   by openList() when a panel would otherwise run off the viewport. */
.combo-list.combo-right{left:auto;right:0}

.combo-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 12px;white-space:nowrap;
           border:0;border-radius:12px;background:none;font:inherit;font-size:15.5px;font-weight:800;
           color:var(--ink);text-align:left;cursor:pointer;letter-spacing:-.01em}
.combo-opt:hover{transform:none}
.combo-opt:hover,.combo-opt.on{background:var(--bg)}
.combo-opt[aria-selected="true"]{background:var(--blue-10)}
/* The unmatched remainder recedes, so the typed run reads as the match. */
.combo-opt .pre,.combo-opt .post{color:var(--mute);font-weight:600}
.combo-opt[aria-selected="true"] .pre,.combo-opt[aria-selected="true"] .post{color:var(--ink);font-weight:700}
.combo-opt .sub{color:var(--mute);font-weight:600;font-size:13.5px}
.combo-opt .tick{margin-left:auto;flex:none;color:var(--blue);font-size:15px;font-weight:800}
.combo-none{padding:18px 12px;color:var(--mute);font-size:13.5px;font-weight:600}

/* Bare shell — no box, for a control that sits inline in a toolbar
   (the directory's Show / Sort). The label runs alongside the value. */
.combo-bare{display:inline-flex;align-items:center;gap:6px;--chev-inset:0px}
.combo-bare .lbl{font-size:inherit;color:var(--mute);white-space:nowrap}
.combo-bare .combo-row{padding-right:22px}
.combo-bare .combo-input{font:inherit;font-weight:800;color:var(--ink);border:0;background:none;
                         outline:0;padding:0;width:var(--combo-w,140px);cursor:pointer}
.combo-bare .combo-chev{width:16px;height:16px}
.combo-bare .combo-chev svg{width:16px;height:8px;stroke-width:2.6}
.combo-bare.is-open .combo-input{color:var(--blue)}

/* ISO2 sits under the image, so a country with no SVG still gets a chip. */
.combo-flag{position:relative;width:22px;height:16px;flex:none;border-radius:3px;overflow:hidden;
            background:#EEF2F9;color:var(--faint);font-size:8px;font-weight:800;
            display:grid;place-items:center;box-shadow:0 0 0 1px rgba(15,31,74,.12)}
.combo-flag.blank{visibility:hidden}
.combo-flag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Footer ---------- */
/* Scoped to the site footer. As a bare `footer` selector this painted
   every <footer> element on the site navy — the invoice document has
   one of its own, and its grey small print ended up on a dark band.
   The descendant rules below stay as they are; they only ever match
   inside this one. */
footer.site-footer{background:linear-gradient(180deg,var(--blue),var(--navy));
  color:#fff;margin-top:24px}
footer .wrap{padding:56px 48px 28px;display:block;color:#fff}
footer .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.15)}
footer .brand img{height:44px;width:auto}
footer .brand p{margin:16px 0 0;font-size:14px;line-height:1.6;color:#B8C4E6;max-width:320px}
footer .brand .social{display:flex;gap:8px;margin-top:20px}
footer .social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff}
footer .social a:hover{background:#fff;color:var(--blue)}
footer .social svg{width:20px;height:20px;fill:currentColor}
footer .col h4{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93A9E8}
footer .col nav{display:flex;flex-direction:column;gap:0}
footer .col nav a{color:#DCE3F5;font-size:14.5px;font-weight:600;padding:6px 0;display:inline-block}
footer .col nav a:hover{color:#fff}
footer .fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-top:22px;font-size:12.5px;color:#93A9E8}
footer .fbot nav{display:flex;gap:18px;flex-wrap:wrap}
footer .fbot nav a{color:#B8C4E6}
footer .fbot nav a:hover{color:#fff}

/* ---------- Responsive: tablet (<=1023px) ---------- */
@media (max-width:1023px){
  .wrap{padding:0 24px}
  .nav{gap:16px}
  .nav nav{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;gap:0;padding:8px 24px 32px;font-size:18px;overflow:auto;z-index:50;border-top:1px solid var(--line)}
  .nav nav.open{display:flex}
  .nav nav a{padding:16px 0;border-bottom:1px solid #F1F5F9;min-height:44px;display:flex;align-items:center}
  .nav nav .mcta{display:flex;gap:10px;margin-top:20px}
  .nav nav .mcta a{flex:1;border:0;padding:14px;justify-content:center;min-height:48px;font-size:15px}
  .nav nav .mcta .btn-ghost{background:var(--bg);color:var(--ink)}
  /* `.nav nav a` (0,2,1) outranks `.btn-blue` (0,1,0), so the reference
     renders the mobile Join CTA as slate-on-blue (~2.5:1). Restore white
     text per design/README.md "keep text readable — never black". */
  .nav nav .mcta .btn-blue{color:#fff}
  .burger{display:inline-flex}
  .nav .right{gap:8px}
  .nav .right .btn-ghost{display:none}
  .btn{min-height:44px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid6{grid-template-columns:repeat(3,1fr)}
  .ticker{flex-wrap:wrap;border-radius:20px;gap:12px 20px}
  .ticker .all{margin-left:0;width:100%}
  .scroller .arrows{display:none}
  .unlock{min-height:48px}
  footer .wrap{padding:44px 24px 24px}
  footer .ftop{grid-template-columns:1fr 1fr;gap:32px 24px}
  footer .brand{grid-column:1/-1}
  footer .fbot{flex-direction:column;text-align:center;justify-content:center}
  footer .fbot nav{justify-content:center}
  footer .col nav a{padding:10px 0}
}

/* ---------- Responsive: mobile (<=639px) ---------- */
@media (max-width:639px){
  .wrap{padding:0 16px}
  .nav .right .btn-blue{padding:10px 14px;font-size:13px}
  .ad{height:auto!important;min-height:64px;padding:14px;text-align:center}
  .sec{padding-top:36px}
  .sec-h{flex-direction:column;align-items:flex-start;gap:4px}
  .sec-h h2{font-size:24px}
  .scroller{position:relative}
  .scroller .sec-h{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .scroller .sec-h .hr a{display:none}
  .scroller .grid4,.scroller .grid6{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 6px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}
  .scroller .grid4::-webkit-scrollbar,.scroller .grid6::-webkit-scrollbar{display:none}
  .scroller .tile{flex:0 0 200px;scroll-snap-align:start;min-height:72px}
  .scroller .arrows{display:flex}
  .ticker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap;gap:20px;border-radius:999px;font-size:12px;padding:12px 18px}
  .ticker::-webkit-scrollbar{display:none}
  .ticker>*{flex:none}
  .ticker .all{width:auto;margin-left:8px;padding-right:6px}
  .co{flex-wrap:wrap}
  .co .pill{margin-left:auto}
  footer .wrap{padding:36px 16px 20px}
  footer .ftop{grid-template-columns:1fr;gap:28px}
}

/* ---------- Account menu (header, signed in) ----------
   design/dashboard.html keeps this in the header; it is the only one in
   the app, so pages must not draw a second. */
.acct{position:relative;flex:none}
.acct > button{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px 4px 4px;min-height:40px;color:var(--ink);font:inherit;cursor:pointer;max-width:230px}
.acct > button:hover{border-color:var(--blue);transform:none}
.acct .ini{width:32px;height:32px;border-radius:10px;background:var(--blue);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;flex:none;overflow:hidden}
/* With a logo the tile is a frame, not a coloured badge. */
.acct .ini.img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.acct .ini img{width:100%;height:100%;object-fit:contain}
.acct .nm{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .cv{font-size:10px;color:var(--mute);flex:none}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);width:280px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(15,31,74,.18);padding:8px;z-index:60}
.acct-menu .who{display:flex;gap:12px;align-items:center;padding:10px 12px 12px;border-bottom:1px solid #F1F5F9;margin-bottom:6px}
.acct-menu .who .ini{width:40px;height:40px;border-radius:12px;background:var(--blue-10);color:var(--blue)}
/* Scoped to the text block. Unscoped, ".acct-menu .who span" also matched
   the initials chip and its display:block beat the grid centring on
   ".acct .ini", pushing "ME" into the corner of its square. */
.acct-menu .who > div{min-width:0}
.acct-menu .who > div b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu .who > div span{display:block;font-size:12px;color:var(--mute);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);padding:10px 12px;border-radius:12px;cursor:pointer;min-height:42px;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover{background:var(--bg);color:var(--ink);transform:none}
.acct-menu .danger,.acct-menu .danger:hover{color:var(--red)}
/* Fixed box with its own line-height so a text glyph and an emoji sit
   on the same centre line. */
.acct-menu .ic{width:20px;height:20px;flex:none;color:var(--faint);font-size:13px;line-height:20px;text-align:center;font-style:normal}

/* Soft page ground — the dashboard sits on --bg, not white. */
body.bg-soft{background:var(--bg)}

/* =====================================================================
   Page hero — the photo band on /news, /prices, /events and /jobs.

   Shared rather than per-page because these four are the same component,
   and because the directory learned the hard way that a second copy of a
   hero drifts. The photograph and its crop come in as custom properties
   from partials/page-hero.php, so a page swaps its own image in without
   a rule here changing.
   ===================================================================== */
.ed-hero{--hero-img:url(../img/hero-warehouse.jpg);--hero-pos:center 65%;
         position:relative;height:300px;background:var(--hero-img) var(--hero-pos)/cover}
/* The wash keeps the left half readable while the photograph survives on
   the right; the bottom fade hands over to the page's own background. */
.ed-hero:before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.14) 100%)}
.ed-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,rgba(244,247,252,0),var(--bg))}
.ed-hero > *{position:relative;z-index:1}

.ed-hero .head{position:absolute;left:0;right:0;bottom:26px}
.ed-hero .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ed-hero .line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:10px}
.ed-hero h1{font-size:44px;line-height:1;letter-spacing:-.03em;margin:0}
.ed-hero .meta{font-size:13px;font-weight:700;color:var(--mute);background:rgba(255,255,255,.72);
               border-radius:999px;padding:5px 12px}
.ed-hero p{margin:12px 0 0;font-size:15px;line-height:1.55;color:#475569;max-width:60ch;
           text-shadow:0 1px 0 rgba(255,255,255,.6)}

@media (max-width:767px){
  .ed-hero{height:auto;padding:104px 0 26px}
  .ed-hero:after{display:none}
  .ed-hero .head{position:relative;bottom:auto}
  .ed-hero h1{font-size:31px}
  .ed-hero p{font-size:14.5px}
}

/* A slot that has something in it stops being a dashed placeholder. */
.ad[data-filled="true"]{border:0;background:none;padding:0;height:auto!important;min-height:0}
.ad-link{display:block;line-height:0}
.ad-link img{display:block;max-width:100%;height:auto;border-radius:10px}

/* ---------- Password strength ----------
   The bar from design/register.html: a thin track under the field with a
   word beside it. Shown only where a password is being chosen — on a
   sign-in form it would tell an attacker how close they are getting. */
.pw-meter{display:flex;align-items:center;gap:10px;margin-top:8px}
.pw-track{flex:1;height:4px;border-radius:2px;background:#F1F5F9;
  overflow:hidden;display:block}
.pw-track i{display:block;height:100%;border-radius:2px;width:0;
  transition:width .3s ease,background-color .3s ease}
.pw-label{font-size:11px;font-weight:700;min-width:40px;text-align:right}

/* ---------- Attached files ----------
   One grid for all four listing types — an offer, an inquiry, a vacancy
   and a candidate — because a spec sheet looks the same whatever it is
   hanging off, and three near-copies of this would drift apart.

   A photo is drawn as itself; everything else gets a paper glyph with
   its extension on it, cut from one element so there is no icon font and
   no SVG to keep in step between the PHP and the Alpine pages. Whether a
   tile is a link at all is Core\FileKind's decision, not the palette's. */
.doc-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.ch + .doc-grid,.hint + .doc-grid{margin-top:12px}
.doc-tile{position:relative;padding:8px;background:var(--bg);border-radius:14px;
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}
.doc-tile.can-open:hover{background:var(--blue-10);
  transform:translateY(-2px);box-shadow:var(--shadow)}
/* The whole tile is the hit target, not just the filename. */
.doc-open{display:flex;flex-direction:column;gap:8px;color:inherit}
a.doc-open:hover{color:inherit}
a.doc-open:focus-visible{outline:2px solid var(--blue);outline-offset:3px;
  border-radius:10px}
/* Over the thumbnail, so removing a file never costs a grid column. */
.doc-del{position:absolute;top:12px;right:12px;border:0;cursor:pointer;
  font:800 10.5px/1 Manrope,system-ui,sans-serif;color:#fff;letter-spacing:.04em;
  background:rgba(15,31,74,.72);border-radius:999px;padding:5px 9px}
.doc-del:hover{background:var(--red)}

.doc-thumb{aspect-ratio:4/3;border-radius:10px;background:#fff;
  display:grid;place-items:center;overflow:hidden}
.doc-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.doc-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.doc-meta b{font-size:12.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.doc-meta span{font-size:11px;font-weight:600;color:var(--faint)}

/* The paper glyph. The notch in the clip-path is the folded corner, and
   ::after is a plain rectangle that the same clip cuts in half — so the
   fold is one shape, not two elements that have to line up. */
.ft-icon{position:relative;width:46px;height:58px;background:var(--fk,#475569);
  clip-path:polygon(0 0,68% 0,100% 22%,100% 100%,0 100%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.ft-icon:after{content:'';position:absolute;top:0;right:0;
  width:32%;height:22%;background:rgba(255,255,255,.42)}
.ft-icon b{font-size:10px;font-weight:800;color:#fff;letter-spacing:.05em}

/* Conventional file colours, each dark enough for white 10px bold on it.
   .ft-host is for anywhere else that hosts a glyph without being a full
   tile — the dashboard gallery drops one into its own thumb. */
.doc-tile[data-kind="pdf"],  .ft-host[data-kind="pdf"]  {--fk:#B91C1C}
.doc-tile[data-kind="sheet"],.ft-host[data-kind="sheet"]{--fk:#047857}
.doc-tile[data-kind="doc"],  .ft-host[data-kind="doc"]  {--fk:#1F3F8F}
.doc-tile[data-kind="image"],.ft-host[data-kind="image"]{--fk:#6D28D9}
/* Fills the thumb it sits in, so the whole square is the hit target. */
.ft-host{display:grid;place-items:center;width:100%;height:100%}
.ft-host:hover{background:var(--blue-10)}

/* Not a member: the list is public, the bytes are not, so the tile says
   so instead of offering a link that would only 403. */
.doc-tile.locked{cursor:default}
.doc-tile.locked .doc-thumb{background:repeating-linear-gradient(
  45deg,#fff,#fff 6px,#F8FAFC 6px,#F8FAFC 12px)}
.doc-lock{font-size:11px;font-weight:800;color:var(--mute)}
.doc-note{margin:10px 0 0;font-size:12.5px;color:var(--mute);font-weight:600}
.doc-note a{font-weight:700}

/* ---------- A file on its way up ----------
   The same tile as an attached file, with the transfer drawn over its
   thumbnail. A queued image shows itself (from a blob URL, so nothing
   has to reach the server first); everything else shows its glyph.

   The ring is one element: a conic-gradient sweeps to --p percent and an
   inset pseudo-element punches the middle out. No second arc to keep in
   register, and no SVG. */
.doc-tile.queued .doc-thumb{position:relative}
.doc-prog{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(15,31,74,.55);border-radius:10px}
.doc-prog .ring{position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(#fff calc(var(--p,0) * 1%),rgba(255,255,255,.28) 0)}
.doc-prog .ring:before{content:'';position:absolute;inset:4px;
  border-radius:50%;background:var(--navy)}
.doc-prog b{position:relative;font-size:10.5px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums}

/* No total to divide by — show motion rather than a number that would
   be invented. */
.doc-prog.busy .ring{background:conic-gradient(#fff 0 25%,rgba(255,255,255,.28) 0);
  animation:doc-spin .9s linear infinite}
@keyframes doc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .doc-prog.busy .ring{animation-duration:2.4s}
}

/* Done, and refused. Both stay on screen: a file that vanished on
   success leaves no trace it went, and one that vanished on failure
   takes its reason with it. */
.doc-tile.done .doc-thumb:after{content:'✓';position:absolute;right:6px;bottom:6px;
  width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center}
.doc-tile.bad{background:var(--error-10)}
.doc-tile.bad .doc-thumb{outline:2px solid var(--red);outline-offset:-2px}
.doc-tile.bad .doc-meta span{color:var(--red)}