/* ============================================================================
   CANIPUS · BUYER · 391 (19 Oct 2026). The one buyer page and what every page
   shares when a buyer acts (the sheet, the toast, the chips). The portal's
   dress: navy ground, glass, teal for the live things, gold for the italic
   phrase, Instrument Serif, Jost, IBM Plex Mono. Phone under 700, laptop 920 up.
   ============================================================================ */
:root{
  --by-ink:#0A1428; --by-navy:#0D1830; --by-navy2:#13223E;
  --by-hair:rgba(153,189,208,0.14); --by-hair2:rgba(153,189,208,0.26);
  --by-glass:linear-gradient(180deg, rgba(20,36,66,0.78), rgba(10,20,40,0.84));
  --by-teal:#40C9BE; --by-teal-hi:#B8F1EC; --by-teal-lo:#1E8F86;
  --by-gold:#DDB972; --by-gold-hi:#F8E7BE; --by-amber:#FFC46B; --by-red:#FF8A7A; --by-ok:#5FD8A8;
  --by-silver:#C3D0DE; --by-silver-hi:#F4F8FC; --by-silver-lo:#7F93A9;
  --by-serif:'Instrument Serif', Georgia, serif; --by-sans:Jost, 'Segoe UI', system-ui, sans-serif; --by-mono:'IBM Plex Mono', ui-monospace, monospace;
  --by-btn:linear-gradient(180deg, #6BE0D6, #40C9BE 52%, #2AAFA4);
}

/* ---------- shared: the sheet, the toast, the chips, the inputs ---------- */
.by-veil{ position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,10,22,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .22s ease; }
.by-veil.on{ opacity:1; }
.by-sheet{ width:100%; max-width:560px; max-height:92vh; overflow:auto; box-sizing:border-box; padding:16px 22px 28px; background:linear-gradient(180deg, rgba(20,36,66,0.98), rgba(10,20,40,0.99)); border:1px solid var(--by-hair2); border-radius:24px 24px 0 0; box-shadow:0 -30px 60px -30px rgba(0,0,0,0.9); color:var(--by-silver); font-family:var(--by-sans); transform:translateY(14px); transition:transform .22s ease; }
.by-veil.on .by-sheet{ transform:none; }
@media (min-width:700px){ .by-veil{ align-items:center; padding:24px; } .by-sheet{ border-radius:24px; max-height:88vh; } }
.by-sheet-head{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 12px; padding:6px 0 10px; }
.by-sheet-head .by-k{ flex:1 1 100%; }
.by-sheet-head h2{ margin:0; flex:1 1 auto; font-family:var(--by-serif); font-weight:400; font-size:30px; line-height:34px; color:var(--by-silver-hi); }
.by-sheet-head h2 em{ font-style:italic; color:var(--by-gold); }
.by-x{ flex:none; width:40px; height:40px; border-radius:20px; border:1px solid var(--by-hair2); background:transparent; color:var(--by-silver); font-size:22px; line-height:1; cursor:pointer; }
.by-sheet-body{ display:flex; flex-direction:column; gap:10px; }
.by-toast{ position:fixed; left:50%; bottom:24px; z-index:1300; transform:translate(-50%, 20px); max-width:min(92vw, 520px); padding:12px 18px; border-radius:14px; background:#F4F8FC; color:var(--by-ink); font:500 14px/20px var(--by-sans); box-shadow:0 20px 50px -20px rgba(0,0,0,0.9); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
.by-toast.on{ opacity:1; transform:translate(-50%, 0); }
.by-k{ display:block; font:500 11px/16px var(--by-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--by-teal); }
.by-k.gold{ color:var(--by-gold); }
.by-k.dim{ color:var(--by-silver-lo); }
.by-lbl{ display:block; font:500 11px/16px var(--by-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--by-silver-lo); margin-top:6px; }
.by-lede{ margin:0; font:400 15px/22px var(--by-sans); color:var(--by-silver); }
.by-fine{ margin:0; font:400 12px/18px var(--by-sans); color:var(--by-silver-lo); }
.by-msg{ min-height:18px; font:400 13px/18px var(--by-sans); color:var(--by-red); }
.by-msg.ok{ color:var(--by-ok); }
.by-chips{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.by-chips.four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.by-chips.flow{ display:flex; flex-wrap:wrap; }
@media (min-width:700px){ .by-chips{ grid-template-columns:repeat(3, minmax(0,1fr)); } .by-chips.two{ grid-template-columns:repeat(2, minmax(0,1fr)); } .by-chips.four{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.by-chip{ box-sizing:border-box; min-height:46px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; font:400 15px/20px var(--by-sans); text-align:left; color:var(--by-silver); background:var(--by-glass); border:1px solid rgba(153,189,208,0.24); border-radius:14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.by-chip:hover{ border-color:rgba(64,201,190,0.45); }
.by-chip.on{ color:var(--by-ink); font-weight:600; background:var(--by-btn); border-color:transparent; }
.by-chips.four .by-chip{ justify-content:center; padding:10px 6px; font-size:14px; }
.by-chip-x{ margin-left:4px; width:22px; height:22px; border-radius:11px; border:0; background:rgba(10,20,40,0.25); color:inherit; font-size:16px; line-height:1; cursor:pointer; }
.by-in{ box-sizing:border-box; width:100%; height:50px; padding:0 14px; font:400 16px var(--by-sans); color:var(--by-silver-hi); background:rgba(10,20,40,0.6); border:1px solid rgba(153,189,208,0.28); border-radius:12px; outline:none; }
.by-in:focus{ border-color:rgba(64,201,190,0.6); }
.by-in.mono{ font-family:var(--by-mono); letter-spacing:.06em; }
.by-in.ok{ border-color:rgba(64,201,190,0.6); }
select.by-in{ appearance:none; -webkit-appearance:none; }
.by-two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.by-btn{ height:54px; padding:0 22px; border:0; border-radius:14px; background:var(--by-btn); color:var(--by-ink); font:600 17px var(--by-sans); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35); }
.by-btn:disabled{ opacity:.55; cursor:default; }
.by-btn.quiet{ background:transparent; color:var(--by-silver-hi); border:1px solid rgba(153,189,208,0.3); box-shadow:none; font-weight:400; }
.by-btn.small{ height:42px; padding:0 16px; font-size:15px; border-radius:12px; }
.by-link{ background:none; border:0; padding:0; color:var(--by-teal); font:400 14px/20px var(--by-sans); cursor:pointer; text-align:left; }
.by-card{ box-sizing:border-box; padding:16px 18px; display:flex; flex-direction:column; gap:10px; background:var(--by-glass); border:1px solid rgba(153,189,208,0.2); border-radius:18px; }
.by-row{ display:flex; flex-direction:column; gap:6px; }
.by-list{ display:flex; flex-direction:column; gap:8px; }
.by-place{ display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 14px; background:var(--by-glass); border:1px solid rgba(153,189,208,0.24); border-radius:14px; color:var(--by-silver); font:400 13px/18px var(--by-sans); cursor:pointer; }
.by-place b{ font-size:16px; line-height:21px; color:var(--by-silver-hi); font-weight:500; }
.by-place small{ color:var(--by-silver-lo); }
.by-spec{ position:relative; display:flex; flex-direction:column; gap:8px; }
.by-spec input{ box-sizing:border-box; width:100%; height:50px; padding:0 14px; font:400 16px var(--by-sans); color:var(--by-silver-hi); background:rgba(10,20,40,0.6); border:1px solid rgba(153,189,208,0.28); border-radius:12px; outline:none; }
.by-spec input:focus{ border-color:rgba(64,201,190,0.6); }
.by-spec-res{ display:flex; flex-direction:column; gap:2px; max-height:260px; overflow:auto; }
.by-spec-branch{ font:500 10px/14px var(--by-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--by-silver-lo); padding:8px 4px 2px; }
.by-spec-hit{ text-align:left; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--by-silver-hi); font:400 15px/20px var(--by-sans); cursor:pointer; }
.by-spec-hit:hover{ background:rgba(64,201,190,0.1); }
.by-spec-hit mark{ background:none; color:var(--by-teal-hi); }
.by-spec-none{ padding:8px 4px; font:400 13px/18px var(--by-sans); color:var(--by-silver-lo); }
.by-spec-pick{ display:flex; flex-wrap:wrap; gap:8px; }
.by-spec-pick .by-chip{ min-height:38px; padding:6px 8px 6px 14px; }

/* ---------- the one page ---------- */
body.by-page{ margin:0; min-height:100vh; background:radial-gradient(900px 500px at 70% 0%, rgba(64,201,190,0.12), transparent 70%), var(--by-navy); color:var(--by-silver); font-family:var(--by-sans); -webkit-font-smoothing:antialiased; }
body.by-page a{ color:var(--by-teal); }
[hidden]{ display:none !important; }
.by-shell{ display:flex; flex-wrap:wrap; min-height:100vh; }
.by-side{ display:none; }
.by-main{ flex:999 1 560px; min-width:0; box-sizing:border-box; padding:16px 20px 110px; }
@media (min-width:920px){
  .by-side{ display:flex; flex:0 0 240px; flex-direction:column; gap:20px; box-sizing:border-box; padding:28px 16px; border-right:1px solid var(--by-hair); background:rgba(10,20,40,0.5); position:sticky; top:0; height:100vh; }
  .by-main{ padding:28px 40px 60px; max-width:1200px; }
}
.by-brand{ padding:0 14px; font-family:var(--by-serif); font-size:26px; line-height:30px; color:var(--by-silver-hi); text-decoration:none; }
.by-brand span{ color:var(--by-teal); }
.by-rooms{ display:flex; flex-direction:column; gap:2px; }
.by-room{ display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 14px; border-radius:12px; font:400 15px var(--by-sans); color:var(--by-silver); text-decoration:none; }
.by-room:hover{ background:rgba(153,189,208,0.06); }
.by-room.on{ background:rgba(64,201,190,0.12); color:var(--by-silver-hi); }
.by-room small{ font:500 11px var(--by-mono); color:var(--by-teal); }
.by-side .by-k{ padding:0 14px; }
.by-acct{ margin-top:auto; box-sizing:border-box; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--by-glass); border:1px solid rgba(153,189,208,0.2); border-radius:16px; font:400 13px/18px var(--by-sans); }
.by-acct b{ display:block; font-weight:400; font-size:15px; line-height:20px; color:var(--by-silver-hi); }
.by-acct small{ display:block; font-size:12px; color:var(--by-silver-lo); }
.by-acct a{ text-decoration:none; color:var(--by-silver); }
.by-acct a.add{ color:var(--by-teal); }
.by-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.by-top .by-brand{ padding:0; font-size:24px; line-height:28px; }
@media (min-width:920px){ .by-top .by-brand{ display:none; } }
.by-you{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:20px; border:1px solid rgba(153,189,208,0.3); color:var(--by-silver); text-decoration:none; }
.by-you svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.by-pf{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.by-pf::-webkit-scrollbar{ display:none; }
.by-pill{ flex:none; display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:17px; border:1px solid rgba(153,189,208,0.28); background:transparent; color:var(--by-silver); font:400 13px var(--by-sans); white-space:nowrap; cursor:pointer; text-decoration:none; }
.by-pill.on{ background:var(--by-btn); color:var(--by-ink); font-weight:600; border-color:transparent; }
.by-head{ display:flex; flex-direction:column; gap:10px; }
.by-head h1{ margin:0; font-family:var(--by-serif); font-weight:400; font-size:36px; line-height:40px; color:var(--by-silver-hi); text-wrap:pretty; }
.by-head h1 em{ font-style:italic; color:var(--by-gold); }
@media (min-width:700px){ .by-head h1{ font-size:44px; line-height:48px; } }
.by-interests{ display:flex; flex-direction:column; gap:20px; max-width:720px; margin:12px auto 0; }
.by-interests .by-btn{ align-self:flex-start; min-width:220px; }
.by-pane{ display:none; }
.by-pane.on{ display:block; animation:byRise .3s ease both; }
@keyframes byRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.by-frame{ width:100%; border:0; display:block; min-height:70vh; background:transparent; }
.by-frame.tall{ min-height:100vh; }
.by-empty{ box-sizing:border-box; padding:28px 22px; border:1px dashed rgba(153,189,208,0.3); border-radius:18px; color:var(--by-silver-lo); font:400 15px/22px var(--by-sans); }
.by-empty b{ display:block; font-family:var(--by-serif); font-weight:400; font-size:26px; line-height:30px; color:var(--by-silver-hi); margin-bottom:6px; }
.by-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:flex; justify-content:space-around; padding:8px 8px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--by-hair); background:rgba(10,20,40,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
@media (min-width:920px){ .by-tabs{ display:none; } }
.by-tab{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:60px; padding:6px 4px; font:400 11px/14px var(--by-sans); color:var(--by-silver-lo); text-decoration:none; background:none; border:0; cursor:pointer; }
.by-tab.on{ color:var(--by-teal-hi); }
.by-tab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.by-wait{ padding:40px 0; text-align:center; color:var(--by-silver-lo); font:400 14px var(--by-sans); }
.by-wait i{ display:inline-block; width:14px; height:14px; margin-right:8px; border-radius:7px; border:2px solid rgba(153,189,208,0.3); border-top-color:var(--by-teal); vertical-align:-2px; animation:bySpin .9s linear infinite; }
@keyframes bySpin{ to{ transform:rotate(360deg); } }
.by-note{ box-sizing:border-box; padding:14px 16px; display:flex; flex-direction:column; gap:6px; background:linear-gradient(180deg, rgba(221,185,114,0.1), rgba(10,20,40,0.84)); border:1px solid rgba(221,185,114,0.35); border-radius:14px; font:400 13px/19px var(--by-sans); }