/* ==========================================================================
   DealR — Design System  (prototype)
   Typography, colour, surface, control and motion language.
   ========================================================================== */

@font-face{font-family:"Inter";src:url(fonts/inter-latin.woff2) format("woff2-variations"),url(fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand foundation. Neutral black through white — no blue cast, because the
     accent has to be the only colour in the room. */
  --void:#050505;
  --ground:#0A0A0A;
  --raise-1:#151515;
  --raise-2:#1E1E1E;
  --raise-3:#262626;
  --raise-4:#323232;

  --ink:#F5F5F5;
  --ink-2:#A1A1AA;
  /* The two quiet greys still have to be readable: #71717A missed AA on the
     base ground and #52525B missed it everywhere. They keep their step apart,
     both lifted until the quieter of the two clears 4.5:1 on a raised panel. */
  --ink-3:#9A9AA3;
  --ink-4:#8B8B94;

  --rule:rgba(245,245,245,.08);
  --rule-2:rgba(245,245,245,.16);

  /* DealR orange is the identity, and it is rationed: primary actions, active
     and selected states, live indicators, focus. Nothing decorative. */
  --accent:#FF6A2A;
  --accent-lift:#FF8452;
  --accent-deep:#D9501A;
  --accent-wash:rgba(255,106,42,.12);

  /* Functional only. */
  --success:#22C55E;
  --danger:#EF4444;
  --warning:#F59E0B;

  /* Legacy aliases — the codebase was built on these names before the brand
     landed. Kept so nothing silently loses its colour. */
  --cyan:var(--accent);
  --cyan-lift:var(--accent-lift);
  --cyan-deep:var(--accent-deep);
  --cyan-wash:var(--accent-wash);
  --amber:var(--warning);
  --amber-wash:rgba(245,158,11,.12);

  /* Editorial light band — neutral white, not warm cream. */
  --bone:#F5F5F5;
  --bone-2:#E7E7E9;
  --bone-ink:#0A0A0A;
  --bone-ink-2:#52525B;

  --f-display:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-text:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,monospace;

  /* Near-sharp throughout. The logo and banner are hard geometry; soft cards
     fought them. Circles are reserved for avatars and status dots, so a
     rectangle next to a circle reads as a deliberate contrast. */
  --r-sharp:0;
  --r-dense:2px;
  --r-control:4px;
  --r-panel:5px;
  --r-stage:6px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s;
  --t-mid:.28s;
  --t-slow:.55s;

  --lift:0 1px 0 rgba(255,255,255,.04),0 18px 40px -20px rgba(0,0,0,.85);
  --stage:0 50px 100px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);

  --gutter:clamp(20px,4vw,64px);
  --shell:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{
  margin:0;min-width:320px;
  font-family:var(--f-text);font-size:15px;line-height:1.55;
  background:transparent;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* [hidden] is only a UA-level display:none, so any author rule that sets a
   display value beats it. Everything the viewer system hides has one. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#0A0A0A}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.shell{width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto}
.shell-wide{width:min(1560px,100% - var(--gutter)*2);margin-inline:auto}
.bleed{width:100%}

/* --------------------------------------------------------------------------
   Typography — five roles. No ad-hoc sizes anywhere in the prototype.
   -------------------------------------------------------------------------- */
.display,.h1,.h2,.h3{
  font-family:var(--f-display);
  font-weight:700;letter-spacing:-.028em;line-height:1.02;margin:0;
  text-wrap:balance;
}
.display{font-size:clamp(42px,6vw,86px);letter-spacing:-.035em;line-height:1}
.h1{font-size:clamp(33px,4.2vw,58px);letter-spacing:-.032em;line-height:1.04}
.h2{font-size:clamp(26px,2.9vw,42px);letter-spacing:-.028em;line-height:1.08}
.h3{font-size:clamp(17px,1.3vw,20px);letter-spacing:-.015em;line-height:1.25;font-weight:650}

/* Emphasis inside a heading is a weight change, not a second typeface. */
.serif{font-weight:400;letter-spacing:-.02em;color:var(--ink-2)}

.lead{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--ink-2);max-width:52ch;margin:0}
.body{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0}
.meta{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Section label. Replaces the tiny cyan-dot uppercase eyebrow that was on
   every section: a hairline plus sentence case reads calmer and more edited. */
.label{
  display:inline-flex;align-items:center;gap:13px;
  font-size:12.5px;font-weight:550;letter-spacing:0;color:var(--ink-3);
}
.label:before{content:"";width:28px;height:1px;background:var(--rule-2)}
.label.live:after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px var(--cyan-wash);animation:beat 3.2s var(--ease) infinite;
}
@keyframes beat{0%,88%,100%{opacity:1}92%{opacity:.35}}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border:0;border-radius:var(--r-control);
  background:var(--cyan);color:#04100f;
  font-size:14.5px;font-weight:640;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast);
}
.btn:hover{background:var(--cyan-lift)}
.btn:active{transform:translateY(1px);background:var(--accent-deep)}
.btn .arw{transition:transform var(--t-mid) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.btn.ghost:hover{background:rgba(255,255,255,.05);border:1px solid var(--ink-4)}
.btn.sm{min-height:38px;padding:0 15px;font-size:13.5px;border-radius:8px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r-dense)}

/* Link with a travelling rule instead of a pill */
.link{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);
  padding-bottom:3px;
  background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0 1px no-repeat;
  transition:background-size var(--t-mid) var(--ease),color var(--t-fast);
}
.link:hover{background-size:100% 1px;color:var(--cyan)}
.link .arw{transition:transform var(--t-mid) var(--ease)}
.link:hover .arw{transform:translateX(4px)}

.field{
  min-height:44px;padding:0 14px;
  background:var(--raise-1);border:1px solid var(--rule);border-radius:var(--r-control);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-wash)}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.panel{background:var(--raise-1);border-radius:var(--r-panel);box-shadow:var(--lift)}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* Editorial band: the light break in a long dark run. Re-maps tokens so
   every child component works unchanged inside it. */
.bone{
  background:var(--bone);color:var(--bone-ink);
  --ink:var(--bone-ink);--ink-2:var(--bone-ink-2);--ink-3:#5D626A;--ink-4:#666B73;
  --rule:rgba(10,10,10,.12);--rule-2:rgba(10,10,10,.22);
  --raise-1:#FFFFFF;--raise-2:#FAFAFA;--raise-3:#E7E7E9;
  --accent:#D2500F;--cyan:#D2500F;--cyan-lift:#B8450D;--cyan-wash:rgba(210,80,15,.1);--accent-wash:rgba(210,80,15,.1);
  --amber:#8A5A06;--amber-wash:rgba(138,90,6,.1);
  --lift:0 1px 0 rgba(255,255,255,.9),0 16px 36px -18px rgba(10,10,10,.18);
}
.bone .btn{color:#FFFFFF}
.bone .btn.ghost{color:var(--bone-ink)}

/* --------------------------------------------------------------------------
   Motion — Level 1 defaults
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-out),transform .8s var(--ease-out)}
.reveal.seen{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}

/* A mask wipe for display lines — heavier than a fade, used only on headlines. */
.wipe{display:block;overflow:hidden}
.wipe>*{display:block;transform:translateY(105%);transition:transform .9s var(--ease-out)}
.seen .wipe>*,.wipe.seen>*{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .wipe>*{transform:none!important}
}

/* --------------------------------------------------------------------------
   Persona visibility
   Driven entirely by data-viewer on <html>, which is set in the document head
   before first paint. Doing this in JS after load made the header visibly
   rearrange itself on every navigation.
   -------------------------------------------------------------------------- */
html[data-viewer="out"]     [data-when]:not([data-when~="out"]),
html[data-viewer="trader"]  [data-when]:not([data-when~="trader"]),
html[data-viewer="owner"]   [data-when]:not([data-when~="owner"]),
html[data-viewer="owner-x"] [data-when]:not([data-when~="owner-x"]),
html[data-viewer="admin"]   [data-when]:not([data-when~="admin"]),
html[data-viewer="out"]     [data-not~="out"],
html[data-viewer="trader"]  [data-not~="trader"],
html[data-viewer="owner"]   [data-not~="owner"],
html[data-viewer="owner-x"] [data-not~="owner-x"],
html[data-viewer="admin"]   [data-not~="admin"]{display:none!important}

/* --------------------------------------------------------------------------
   Page transitions
   Cross-document view transitions where supported; a short fade everywhere
   else. Navigation should feel continuous, not like a reload.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto}

/* The swap.

   The old page settles back and dims; the new one arrives from just below it
   and comes up to meet the reader. The outgoing half is deliberately shorter
   than the incoming one and they overlap, so the eye is handed forward rather
   than shown two separate animations. ~420ms end to end: long enough to read
   as a movement, short enough that nobody waits for it.

   This used to be an 180ms/260ms straight opacity crossfade, which at those
   durations is not perceived as a transition at all -- pages simply snapped. */
::view-transition-old(root){
  animation:dealrPageOut .26s cubic-bezier(.4,0,.9,.3) both;
  transform-origin:50% 40%;
}
::view-transition-new(root){
  animation:dealrPageIn .42s cubic-bezier(.16,.84,.3,1) both;
  transform-origin:50% 60%;
}
@keyframes dealrPageOut{
  from{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
  to{opacity:0;transform:scale(.985) translateY(-8px);filter:blur(2px)}
}
@keyframes dealrPageIn{
  from{opacity:0;transform:scale(1.008) translateY(18px)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}

/* The chrome does not travel with the content.

   These used to be declared `view-transition-name:none`, which is the opposite
   of what the comment beside them claimed: `none` removes an element's own
   snapshot, so the header was captured inside the root snapshot and faded out
   and back on every navigation along with everything else -- the single
   biggest reason a page change read as a reload. A real name gives each one
   its own snapshot, and a matching name in the next document means the browser
   morphs it rather than replacing it. */
.site-header{view-transition-name:dealr-header}
.app-rail{view-transition-name:dealr-rail}
::view-transition-old(dealr-header),::view-transition-new(dealr-header),
::view-transition-old(dealr-rail),::view-transition-new(dealr-rail){
  animation:none;mix-blend-mode:normal;height:100%;
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:dealrPageOut .001s linear both}
  ::view-transition-new(root){animation:dealrFade .18s linear both}
  @keyframes dealrFade{from{opacity:0}to{opacity:1}}
}

/* Browsers without cross-document view transitions get the arrival half of the
   same movement, applied to the page itself on load. It costs nothing on
   navigation -- there is no outgoing animation to wait through -- so a page
   change still reads as an arrival rather than a snap.

   Gated on support so browsers that do run the transition above never play
   both. */
@supports not (view-transition-name:none){
  @media (prefers-reduced-motion:no-preference){
    main.page,main#main{animation:dealrPageIn .42s cubic-bezier(.16,.84,.3,1) both}
  }
}

/* --------------------------------------------------------------------------
   The veil
   Shown only while something is genuinely being waited on: authentication, a
   gated console that has not resolved, or a navigation slower than its grace
   period. It covers the page so an unfinished protected view never flashes.
   -------------------------------------------------------------------------- */
.dealr-veil{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  /* Opaque. At 92% the half-built page underneath showed through, which is
     the thing the veil exists to prevent. */
  background:var(--void);
  opacity:0;transition:opacity .22s var(--ease-out);
  pointer-events:none;
}
.dealr-veil.on{opacity:1;pointer-events:auto}
.dealr-veil-core{display:grid;justify-items:center;gap:18px;padding:0 24px;text-align:center}
.dealr-veil-mark{width:40px;height:40px;opacity:.92;animation:veilMark 1.6s var(--ease) infinite}
.dealr-veil-track{width:132px;height:2px;border-radius:2px;background:var(--rule-2);overflow:hidden}
.dealr-veil-track i{display:block;width:40%;height:100%;border-radius:2px;background:var(--accent);animation:veilTrack 1.15s var(--ease) infinite}
.dealr-veil-copy{margin:0;font-size:13px;letter-spacing:.01em;color:var(--ink-3)}
.dealr-veil-copy:empty{display:none}
@keyframes veilMark{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
@keyframes veilTrack{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

@media (prefers-reduced-motion:reduce){
  .dealr-veil{transition:none}
  .dealr-veil-mark,.dealr-veil-track i{animation:none}
  .dealr-veil-track i{width:100%}
}

/* --------------------------------------------------------------------------
   Wide content scrolls inside itself
   A table with six columns cannot fit a 375px phone, and letting it push the
   document wider is the single most visible way a layout looks unfinished on a
   phone. The table scrolls; the page does not.
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll>.table{min-width:520px}
@media (max-width:640px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table thead,.table tbody{min-width:520px}
  .table tbody{display:table;width:100%}
  .table thead{display:table;width:100%}
}