/* miware_site.css -- the Mi-Ware website's look (Vince 28 Oct 17:40):
   dark blue background; every border a ~5 px blue sapphire crystal band with a 1 px gold edge OUTSIDE it;
   side bars adjustable from 1/5 to 2/5 of the width, the centre taking the rest; the "Made by Mi-Ware" plate top centre. */
:root {
  --navy-0: #040b1f;            /* page, deepest */
  --navy-1: #071534;            /* page */
  --navy-2: #0b1d45;            /* panels */
  --navy-3: #12295e;            /* raised */
  --ink: #e6eeff;               /* text */
  --ink-dim: #9fb3dc;           /* secondary text */
  --gold: #d4af37;              /* the 1 px outside edge, accents */
  --gold-hi: #f3d27a;
  --sapphire: url("../assets/sapphire_tile.png");
  --band: 5px;                  /* the crystal border's thickness */
  --gutter: 10px;               /* the drag handles between columns */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }        /* the hidden attribute wins over any display rule (a .request{display:block} once hid nothing) */
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #12306f 0%, var(--navy-1) 45%, var(--navy-0) 100%) fixed;
  color: var(--ink); font-family: "Segoe UI", "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
}
a { color: var(--gold-hi); }

/* THE MI-WARE FRAME: a 5 px sapphire band (the crystal texture painted only in the border area) and a 1 px gold line just
   outside it. Any element with class "frame" gets it. The texture is scaled so its facets read at 5 px. */
.frame {
  border: var(--band) solid transparent;
  background:
    linear-gradient(var(--navy-2), var(--navy-2)) padding-box,
    var(--sapphire) border-box;
  background-size: auto, 96px 96px;
  outline: 1px solid var(--gold);               /* outline sits OUTSIDE the border: the gold edge */
  position: relative;
}

/* THE MOVING LIGHT (Vince 28 Oct 18:17: "a slow back and forth invisible light source"): one soft beam of light sweeps
   slowly left to right and back across the whole screen. It is painted only on the sapphire bands (a mask keeps the
   inside of every panel untouched) and fixed to the screen, not to each panel, so every border lights up in turn as the
   one beam passes -- like a lamp moving over cut stone. */
/* site.js moves the light: every animation frame it sets --lx on each framed panel = where the beam is, measured from that
   panel's own left edge, so one beam crosses the whole screen and lights each border as it passes. (A CSS-only version
   with a screen-fixed background did not repaint in Chrome: measured 18:19, two pictures 5 s apart were identical.) */
.frame::before {
  content: ""; position: absolute; inset: calc(-1 * var(--band)); padding: var(--band); pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(190, 225, 255, 0.12) 30%, rgba(240, 250, 255, 0.95) 50%,
              rgba(190, 225, 255, 0.12) 70%, transparent 100%) no-repeat;
  background-size: 260px 100%;
  background-position: calc(var(--lx, -400px) - 130px) 0;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* THE SPLIT CHOICE above the menu: Showroom | plate | Creation Hub. The "Made by Mi-Ware" plate sits between the two halves
   (Vince 28 Oct 17:48: moved down from the page top, 50% bigger -- 52 px -> 78 px tall), framed by a gold line each side. */
body { padding-top: 18px; }
.split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin: 0 18px 12px; padding: 0; }
.split .badge { display: flex; align-items: center; justify-content: center; padding: 6px 16px;
  border-left: 1px solid var(--gold); border-right: 1px solid var(--gold);
  background: radial-gradient(closest-side, rgba(90,150,255,0.18), transparent); }
/* 29 Oct 07:49, Vince: "the badge should be prominent and readable" -- 78 px -> 132 px, with a soft gold glow behind it */
.plate { display: block; height: 132px; width: auto; filter: drop-shadow(0 0 10px rgba(212,175,55,0.35)) drop-shadow(0 3px 8px rgba(0,0,0,0.7)); }
.split .badge { padding: 8px 22px; }
.split button {
  appearance: none; border: 0; cursor: pointer; padding: 14px 10px; font: 600 20px/1.2 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em; color: var(--ink-dim); background: transparent; text-transform: uppercase; transition: background .2s, color .2s;
}
.split button:hover { color: var(--ink); background: rgba(80, 140, 255, 0.10); }
.split button[aria-pressed="true"] { color: var(--gold-hi); background: linear-gradient(180deg, rgba(60,120,255,0.25), rgba(20,50,140,0.15)); }
.split small { display: block; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-dim); margin-top: 2px; }

/* THE MENU BAR */
.menubar { margin: 0 18px 14px; display: flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 46px; }
.menubar a { color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 4px; font-weight: 500; }
.menubar a:hover, .menubar a[aria-current="page"] { background: rgba(80, 140, 255, 0.16); color: var(--gold-hi); }
.menubar .spacer { flex: 1; }
.menubar .signin { border: 1px solid var(--gold); }

/* THE THREE COLUMNS: left bar | centre | right bar, with drag handles. Widths are set by site.js (1/5..2/5 each). */
.layout { display: flex; align-items: stretch; margin: 0 18px 18px; min-height: calc(100vh - 220px); }
.sidebar { flex: 0 0 var(--w, 22%); min-width: 0; padding: 16px; }   /* no overflow:auto: the light on the border would give it scrollbars */
.centre { flex: 1 1 auto; min-width: 0; padding: 22px; }
.gutter { flex: 0 0 var(--gutter); cursor: col-resize; position: relative; }
.gutter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 46px; transform: translate(-50%, -50%);
  border-left: 1px solid rgba(212,175,55,0.55); border-right: 1px solid rgba(212,175,55,0.55); }
.gutter:hover::after, .gutter.dragging::after, .gutter:focus::after { border-color: var(--gold-hi); }
body.resizing { cursor: col-resize; user-select: none; }

/* SIDEBAR CONTENT */
.sidebar h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); }
.sidebar nav a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; border-radius: 4px; }
.sidebar nav a:hover { background: rgba(80, 140, 255, 0.14); }
.wallet { margin-top: 18px; padding: 12px; text-align: center; }
.wallet .amount { font-size: 26px; font-weight: 700; color: var(--gold-hi); }
.wallet .hint { font-size: 12px; color: var(--ink-dim); }
.apps { list-style: none; margin: 0; padding: 0; }
.apps li { padding: 10px 6px; border-bottom: 1px solid rgba(111, 162, 255, 0.18); }
.apps b { color: var(--ink); } .apps span { display: block; font-size: 13px; color: var(--ink-dim); }

/* THE LANDING: a headline, then 2 x 3 blocks, each a large picture over its words */
.hero { text-align: center; margin: 6px 0 22px; }
.hero h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.02em; }
.hero h1 em { font-style: normal; color: var(--gold-hi); }
.hero p { margin: 8px auto 0; max-width: 60ch; color: var(--ink-dim); }
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.block { display: flex; flex-direction: column; padding: 0; }
.block .pic { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, rgba(70,130,255,0.35), rgba(5,15,45,0.9)), var(--navy-3); }
.block .pic img { width: 78%; height: auto; }
.block .words { padding: 14px 16px 18px; border-top: 1px solid rgba(212,175,55,0.5); }
.block h3 { margin: 0 0 6px; font-size: 20px; color: var(--gold-hi); }
.block p { margin: 0; color: var(--ink); }
.block p + ul { margin-top: 10px; }
.block .steps, .block .gets { margin: 0; padding-left: 1.3em; }
.block .steps li, .block .gets li { margin: 4px 0; }
.block .steps li::marker { color: var(--gold-hi); font-weight: 700; }
.block .gets li::marker { color: var(--gold-hi); }
.block b { color: var(--gold-hi); font-weight: 600; }

footer.site-foot { text-align: center; color: var(--ink-dim); font-size: 13px; padding: 0 0 18px; }
footer.site-foot a { color: var(--ink-dim); text-decoration: none; }
footer.site-foot a:hover { color: var(--gold-hi); text-decoration: underline; }
/* the tagline under the top row (Vince's banner, 29 Oct): "Software, made to order. Type what you want. Approve the mock. Pay when it's built." */
.tagline { margin: -2px 18px 12px; text-align: center; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.04em; color: var(--ink-dim); }
.tagline b { color: var(--gold-hi); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-right: 10px; }

/* THE LANDING v3 (Vince 29 Oct 07:49): two halves under the menu -- the Showroom left, the Creation Hub right -- with a
   drag handle between them (1/3..2/3). The menu bar carries the wallet pills and the basket on this page. */
.menubar .purse { margin: 0 8px; }
.menubar .pill { padding: 6px 12px; font-size: 14px; }
.halves { display: flex; align-items: stretch; margin: 0 18px 18px; min-height: calc(100vh - 290px); }
.half { flex: 1 1 0; min-width: 0; padding: 22px 26px 26px;
  background: linear-gradient(180deg, #0e2252, #050d26) padding-box, var(--sapphire) border-box; background-size: auto, 96px 96px; }
#half-showroom { flex: 0 0 calc(var(--w, 50%) - var(--gutter) / 2); }
.half h2 { margin: 0 0 10px; font: 700 clamp(24px, 2.4vw, 32px)/1.1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-hi); }
.half h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); }
.half .lead { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.half p { margin: 0 0 12px; line-height: 1.5; }
.half .pitch-line { color: var(--ink-dim); }
.half .help { font-size: 13px; color: var(--ink-dim); }
.made { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(212,175,55,0.5); border-radius: 4px;
  background: rgba(4,11,31,0.5); font-weight: 600; color: var(--gold-hi); }
.made img { height: 34px; width: auto; }
.catalogue { list-style: none; margin: 0; padding: 0; }
.catalogue li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head buy" "words buy"; gap: 2px 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(111,162,255,0.18); }
.catalogue .head { grid-area: head; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.catalogue .title { color: var(--ink); text-decoration: none; }
.catalogue .title b { font-size: 17px; font-weight: 600; }
.catalogue .title:hover b { color: var(--gold-hi); text-decoration: underline; }
.catalogue .kind { margin-left: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7fb2ff; }
.catalogue .price { margin-left: auto; font-weight: 700; color: var(--gold-hi); }
.catalogue .words { grid-area: words; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.catalogue .words b { color: var(--ink); font-weight: 600; }
.catalogue .buy { grid-area: buy; appearance: none; cursor: pointer; min-width: 92px; padding: 9px 12px; border-radius: 4px; text-transform: uppercase;
  font: 600 13px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; color: var(--ink); background: #050a18; border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,0.3); transition: box-shadow .2s, background .2s, color .2s; }
.catalogue .buy:hover { box-shadow: 0 0 18px rgba(243,210,122,0.6); }
.catalogue .buy[aria-pressed="true"] { color: var(--navy-0); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.kit { margin: 0 0 14px; padding-left: 1.2em; }
.kit li { margin: 6px 0; line-height: 1.45; } .kit li::marker { color: var(--gold-hi); }
.kit b, .half .firstones b { color: var(--gold-hi); font-weight: 600; }
.half .firstones { padding: 10px 12px; border: 1px solid rgba(243,210,122,0.6); border-radius: 4px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,0.14), rgba(4,11,31,0.45)); }
.go { display: block; margin-top: 16px; padding: 14px; text-align: center; border-radius: 4px; text-decoration: none; text-transform: uppercase;
  font: 600 15px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; color: var(--ink); background: #050a18; border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(212,175,55,0.35); transition: box-shadow .2s; }
.go:hover { box-shadow: 0 0 22px rgba(243,210,122,0.6); color: var(--gold-hi); }
.go:focus-visible, .catalogue .buy:focus-visible, .gutter:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
@media (max-width: 980px) {
  .halves { flex-direction: column; gap: 18px; }
  #half-showroom { flex-basis: auto; }
  .half { padding: 16px 14px 18px; }
  .menubar { flex-wrap: wrap; row-gap: 6px; padding: 6px 8px; }
  .plate { height: 96px; }
  .split { grid-template-columns: 1fr 1fr; }          /* the badge on its own row above the two buttons */
  .split .badge { grid-column: 1 / -1; order: -1; border: 0; border-bottom: 1px solid var(--gold); }
  .split button { font-size: 15px; padding: 10px 6px; min-width: 0; }
  .split button + .badge + button { border-left: 1px solid var(--gold); }
}

/* THE TOP BAR of the Showroom and Creation Hub pages (Vince's concept art, 28 Oct 18:33): wordmark left, the Showroom /
   Creation Hub switch centre, the two wallet pills (SR = Showroom credit, CH = Creation Hub credit) and the basket right.
   Moved here from showroom.css on 29 Oct so both pages share one copy. */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 18px 14px; }
.wordmark { justify-self: start; font: 800 26px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; color: var(--gold-hi);
  text-decoration: none; text-shadow: 0 0 14px rgba(212,175,55,0.35); }
.switch { display: flex; border: 1px solid var(--gold); border-radius: 4px; overflow: hidden; background: rgba(5,15,45,0.7); }
.switch a { padding: 9px 18px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 14px; }
.switch a + a { border-left: 1px solid var(--gold); }
.switch a[aria-current="page"] { color: #7fb2ff; background: linear-gradient(180deg, rgba(60,120,255,0.22), rgba(20,50,140,0.12)); }
.switch a[aria-current="page"]::before { content: "[ "; } .switch a[aria-current="page"]::after { content: " ]"; }
.switch a:hover { background: rgba(80,140,255,0.16); }
.purse { justify-self: end; display: flex; gap: 10px; align-items: center; position: relative; }
.pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: 999px; font: 600 16px/1 "Segoe UI", system-ui, sans-serif;
  color: var(--ink); text-decoration: none; background: radial-gradient(120% 140% at 50% 0%, rgba(80,140,255,0.35), rgba(8,20,60,0.9)); border: 1px solid #5d8fe0; }
.pill small { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); }
.pill.ch { border-color: var(--gold); background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,0.30), rgba(30,24,8,0.9)); }
button.pill { cursor: pointer; }
.pill.basket { border-color: var(--gold); background: rgba(5,15,45,0.85); }
.pill.basket b { color: var(--gold-hi); }
.pill { white-space: nowrap; }
.pill.signin-pill { border-color: var(--gold); background: rgba(5,15,45,0.85); color: var(--gold-hi); }
.pill.signin-pill:hover { background: rgba(212,175,55,0.14); }
.pill:focus-visible, .switch a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* THE BASKET (opens under the basket pill) */
.basket-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); z-index: 20; padding: 14px 16px;
  background: linear-gradient(var(--navy-2), var(--navy-2)) padding-box, var(--sapphire) border-box; background-size: auto, 96px 96px;
  border: var(--band) solid transparent; outline: 1px solid var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.basket-panel[hidden] { display: none; }
.basket-panel h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); }
.basket-panel ul { list-style: none; margin: 0; padding: 0; }
.basket-panel li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(111,162,255,0.18); }
.basket-panel li span { flex: 1; } .basket-panel li b { color: var(--ink); font-weight: 600; }
.basket-panel li button { appearance: none; border: 1px solid rgba(212,175,55,0.6); background: transparent; color: var(--ink-dim);
  border-radius: 3px; cursor: pointer; padding: 2px 8px; }
.basket-panel li button:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.basket-panel .total { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 700; color: var(--gold-hi); }
.basket-panel .checkout { display: block; width: 100%; margin-top: 10px; appearance: none; cursor: pointer; padding: 10px; border-radius: 4px;
  text-transform: uppercase; font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; color: var(--ink); background: #050a18;
  border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(212,175,55,0.3); }
.basket-panel .checkout[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.basket-panel .note { margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); }
.basket-panel .empty { color: var(--ink-dim); margin: 4px 0; }

/* the toast that says what just happened ("Coil added to your basket", "Brief saved") */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; padding: 10px 18px; border-radius: 4px;
  background: rgba(5,12,34,0.95); border: 1px solid var(--gold); color: var(--ink); opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* narrow screens: the top bar stacks; the three-way switch and the four pills shrink to fit a 390 px phone (29 Oct) */
@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr; justify-items: center; row-gap: 8px; }
  .wordmark, .purse { justify-self: center; }
  .switch { max-width: calc(100vw - 36px); }
  .switch a { padding: 8px 9px; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
  .purse { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: calc(100vw - 36px); }
  .pill { padding: 6px 10px; font-size: 13px; }
}

/* narrow screens: the columns stack, no dragging */
@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar { flex-basis: auto !important; }
  .gutter { display: none; }
  .blocks { grid-template-columns: 1fr; }
}

/* ---- the account pill (Phase 2 Stage 2, 5 Nov 2026): who is signed in, and Sign out ---- */
.pill.account { border-color: var(--gold); background: rgba(5,15,45,0.85); color: var(--ink); gap: 8px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pill.account b { color: var(--gold-hi); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pill.account .badge { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.pill.signout { border-color: rgba(212,175,55,0.5); background: transparent; color: var(--ink-dim); }
.pill.signout:hover { color: var(--gold-hi); border-color: var(--gold); }
.signbox .note.bad { color: #ffb48c; }
.signbox label.tick small { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 2px; }

/* 5 Nov 2026 (Stage 4): no wallet in the business model (pay the quote at approval; credit only for refunds), so the two
   wallet pills are hidden rather than removed -- Vince's design notes decide their final fate. The account pill keeps the
   top bar on one line. */
.pill.sr, .pill.ch { display: none; }
.pill.account { max-width: 220px; }
.pill.account b { max-width: 110px; white-space: nowrap; }

.pill.wallet { border-color: rgba(212,175,55,0.7); background: radial-gradient(120% 140% at 50% 0%, rgba(60,110,220,0.30), rgba(5,15,45,0.9)); color: var(--ink); gap: 6px; }
.pill.wallet b { color: var(--gold-hi); }
.pill.wallet small.reserved { color: var(--ink-dim); text-transform: none; letter-spacing: 0; font-size: 11px; }