/* HODL Digital Services — kiosk.
 *
 * Every token below is from HODL-BRAND-GUIDE.md, which takes them from the live
 * hodlservices.ca theme. Warm near-black with a single gold accent; no second brand colour,
 * no gradients except the gold button, no drop shadows — depth comes from the background
 * steps alone.
 *
 * WHAT IS DELIBERATELY NOT THE WEBSITE, because this is a cash machine at arm's length in a
 * convenience store, not a page on a phone:
 *
 *   TYPE IS MUCH LARGER. The guide's body is 15–16px. A customer reads this standing back
 *   from a cabinet, often older, often in poor light, and the screens here start at 24px.
 *   The RATIOS and the weights are the brand; the absolute sizes cannot be.
 *
 *   TOUCH TARGETS ARE MUCH BIGGER than the guide's 44px minimum. A resistive kiosk panel
 *   with a gloved or dry finger is not a phone screen.
 *
 *   THERE IS NO GREEN. An earlier version kept green for the confirm button, reasoning that
 *   a gold Finish beside a gold Rate panel put two meanings in one colour. Alex overruled it
 *   after looking at the live site - "get rid of the green, just use the gold everywhere" -
 *   and hodlservices.ca settles it: every action on that site is gold, primary as the
 *   gradient with near-black text, secondary as a gold outline. Green appears nowhere.
 *
 *   The concern it was answering is real but is solved by WEIGHT, not by hue, which is what
 *   the site does: exactly one filled gold button per screen is the action, everything else
 *   is an outline or a plain panel. Red stays, because an error must not be a shade of the
 *   brand colour.
 *
 * FONTS ARE SELF-HOSTED (kiosk/fonts.css). The guide links them from Google; a cabinet must
 * not depend on reaching Google to render, the CSP here is 'self' everywhere, and Barlow 300
 * has no fallback — the signature light-plus-heavy headline would collapse to one weight.
 */
:root {
  /* Surfaces — warm near-black, each step slightly lighter */
  --bg:      #0B0A08;
  --panel:   #171310;
  --panel-2: #1F1A14;
  --line:    #2A2416;

  /* Text */
  --text:    #E7E2D3;
  --text-2:  #C9C4B4;
  --muted:   #9A9484;

  /* Brand — gold is the only brand colour. Do not introduce a second accent. */
  --gold:    #F4C500;
  --gold-hi: #FFDE59;   /* top stop of the button gradient ONLY - never a flat fill */
  --orange:  #E8891C;   /* means Buy Only. Not decorative. */

  /* Functional */
  /* Kept as a token because the brand defines it, but NOT used anywhere on the kiosk. On the
     website it means "open now" beside a machine listing; a kiosk has no such state, and a
     second action colour is exactly what Alex asked to remove. */
  --green:   #3ECF8E;
  --red:     #E2555A;

  /* Kiosk roles, mapped onto the brand palette so the rest of this file is unchanged. */
  --accent:      var(--gold);     /* every action is gold. See the note above. */
  --accent-text: #141200;         /* gold as a BACKGROUND always takes near-black text */
  --warn:        var(--gold);
  --danger:      var(--red);

  --display: Barlow, Helvetica, Arial, sans-serif;
  --body:    "Open Sans", Arial, sans-serif;
  --radius:  10px;
}
* { box-sizing: border-box; }
/* THE PAGE BACKGROUND LIVES ON html, NOT body, SO THE GLOW HAS SOMEWHERE TO SIT.
   A z-index:-1 pseudo-element paints behind its own element's background, so with the colour
   on body the gold bloom was drawn and then immediately covered by near-black - it simply
   vanished, with no error and nothing in the CSS looking wrong. With the fill on html and
   body transparent, body::before lands between the two. */
html { background: var(--bg); }
html, body { margin: 0; height: 100%; background-color: transparent; color: var(--text);
  font-family: var(--body); -webkit-user-select: none; user-select: none; }
html { background-color: var(--bg); }
body { display: flex; flex-direction: column; min-height: 100vh; touch-action: manipulation; }
.hidden { display: none !important; }

/* Gold as a BACKGROUND always takes near-black text. White on gold fails contrast badly. */
.banner { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #141200;
  text-align: center; font-weight: 800; padding: 8px 12px; letter-spacing: .04em;
  font-family: var(--body); }
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 20px; max-width: 980px; width: 100%; margin: 0 auto; text-align: center; }

/* THE SIGNATURE HEADLINE: Barlow 300 in white, with the emphasised span at 700 in gold, on
   the same line. Light and heavy together is the whole effect - never set it all bold. */
h1 { font-family: var(--display); font-weight: 300; color: #fff;
     font-size: 46px; margin: 0; line-height: 1.15; }
h2 { font-family: var(--display); font-weight: 300; color: #fff;
     font-size: 36px; margin: 0; line-height: 1.2; }
h1 b, h2 b, .gold { font-weight: 700; color: var(--gold); }
p, li { font-size: 24px; line-height: 1.4; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 18px; }
.big-number { font-family: var(--display); font-size: 76px; font-weight: 700; color: #fff;
  letter-spacing: .01em; }
.mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }

.btn { min-height: 84px; min-width: 260px; padding: 16px 36px; font-size: 30px; font-weight: 700; border-radius: 18px;
  border: 3px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.btn:active { transform: scale(.98); }
/* The brand button: the only gradient anywhere, near-black text, one per screen. White on
   gold fails contrast badly, so the text colour is not negotiable. */
.btn.primary, .btn.gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #141200; border-color: var(--gold); }
.btn.primary:active, .btn.gold:active { filter: brightness(1.05); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
/* The outline pair, for anything secondary sitting beside a gold action - what the site uses
   for "Use my location" next to "Find a Machine Near You". */
.btn.outline { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
/* A backup path, not a choice competing with the primary action. Underlined and in the
   muted colour so it reads as "help if you need it" - but still a full-height touch
   target, because the people most likely to need it are the ones who find the scanner
   hard to use, and a small link on a touchscreen is its own obstacle. */
.btn.link { background: transparent; border-color: transparent; color: var(--muted);
  font-size: 26px; font-weight: 600; text-decoration: underline; min-width: 0; }
.row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; width: 100%; }
.row.subtle { margin-top: 4px; }
.col { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: center; }

/* Radius scaled up from the brand's 10px: these are hand-sized panels on a large screen,
   and 10px at this size reads as a square. Border, background steps and the absence of any
   drop shadow are the brand's - depth comes from the surface steps alone. */
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 20px; padding: 22px 28px; width: 100%; }
.card:hover { background: var(--panel-2); }
.card.warn { border-color: var(--warn); }
.card.bad { border-color: var(--danger); }
.card.good { border-color: var(--accent); }
.kv { display: flex; justify-content: space-between; gap: 20px; font-size: 24px; padding: 6px 0; text-align: left; }
.kv span:last-child { font-weight: 700; text-align: right; }

.display { background: var(--panel); border: 3px solid var(--line); border-radius: 16px; min-height: 88px; width: 100%;
  font-size: 42px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; letter-spacing: .08em; }
.display.address { font-size: 26px; letter-spacing: 0; justify-content: flex-start; text-align: left; }
.display.entry { font-size: 28px; letter-spacing: 0; justify-content: flex-start; text-align: left; min-height: 68px; cursor: pointer; }
.display.entry.active { border-color: var(--accent); }
.display.entry.placeholder { color: var(--muted); }

/* The always-available way out. Big enough to hit on a touchscreen, far enough from the
   primary buttons that it is not pressed by accident, and out of the content flow so
   every screen gets it without having to remember to add one. */
.exit { position: fixed; top: 18px; right: 18px; z-index: 40; width: 76px; height: 76px;
  border-radius: 50%; border: 3px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 34px; line-height: 1; cursor: pointer; }
.exit:hover, .exit:focus-visible { color: var(--fg); border-color: var(--accent); outline: none; }
.exit:disabled { opacity: .4; }

.pad { display: grid; grid-template-columns: repeat(3, 110px); gap: 14px; }
.key { min-height: 88px; font-size: 36px; font-weight: 700; border-radius: 16px; border: 2px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; }
.key:active { background: #22365a; }
.kbd { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kbd .krow { display: flex; gap: 8px; }
.kbd .key { min-width: 66px; min-height: 66px; font-size: 26px; padding: 0 6px; }
.kbd .key.wide { min-width: 130px; }
.field { width: 100%; }
.field input { width: 100%; font-size: 26px; padding: 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--panel); color: var(--text); -webkit-user-select: text; user-select: text; text-align: center; }

.error { color: var(--danger); font-size: 24px; min-height: 32px; font-weight: 600; }
.notice { color: var(--warn); font-size: 24px; font-weight: 600; }
.timer { font-variant-numeric: tabular-nums; }
.timer.low { color: var(--warn); }
.timer.expired { color: var(--danger); }
.bar { height: 10px; width: 100%; background: var(--panel); border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); }
/* A brand chip: fully rounded, panel background, line border. The old #0a1424 was a leftover
   from the blue palette and read as a foreign object on the warm ground. */
.pill { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text-2); font-size: 18px; }
.warnicon { font-size: 72px; }

.card.terms { text-align: left; white-space: pre-wrap; font-size: 20px; line-height: 1.5; max-height: 46vh; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.cam { width: 100%; max-width: 640px; border-radius: 18px; border: 3px solid var(--line); background: #000; }

/* Developer panel: simulation only */
.dev { background: #241a05; border: 2px dashed var(--warn); border-radius: 14px; padding: 12px; margin: 8px 12px 12px;
  font-size: 15px; color: #ffe2a3; -webkit-user-select: text; user-select: text; }
.dev h3 { margin: 0 0 8px; font-size: 16px; }
.dev .drow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dev button { padding: 8px 10px; font-size: 15px; border-radius: 8px; border: 1px solid var(--warn); background: #3a2a08; color: #ffe2a3; cursor: pointer; }
.dev button.on { background: var(--warn); color: #201400; }
.dev pre { margin: 6px 0 0; font-size: 12px; white-space: pre-wrap; }

@media (max-width: 800px) { h1 { font-size: 34px; } .big-number { font-size: 56px; } }

/* ---------------------------------------------------------------- cash screen
   TWO PANELS SIDE BY SIDE: what went in, what comes out. Modelled on the screen
   the previous operator's machines show, which Alex photographed and asked us to
   match - not for the look, but because putting those two numbers next to each
   other is the one comparison a customer feeding notes actually wants to make.
   Stacked vertically, as ours were, you cannot see both at a glance.

   Grid, not flex, so the two panels are exactly equal width whatever is in them.
   A customer reading "$20" beside "0.00014780" must not see the boxes move as
   each note goes in. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
.pair > .card { margin: 0; text-align: center; }
.pair .label { color: var(--muted); font-size: 20px; margin: 0 0 6px; }
.pair .limit { color: var(--muted); font-size: 16px; margin: 10px 0 0; }
/* The two headline figures. Smaller than .big-number because there are now two of
   them and a coin amount is long - 0.00014780 must not wrap, on any coin. */
.pair .figure { font-size: 44px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.pair .figure.coin { font-size: 36px; word-break: break-all; }

/* The rate, given its own panel at the top rather than buried under the figures.
   It is the number a customer is most likely to be checking against their phone. */
.rates { text-align: center; padding: 16px 24px; }
.rates .label { color: var(--muted); font-size: 18px; margin: 0 0 4px; }
.rates .value { font-size: 26px; font-weight: 700; color: var(--gold); }

/* "Insert bills now" - the instruction, made unmissable. Their screen puts this in
   yellow and it is the right call: a customer holding a note needs to know the
   machine is ready for it, and that is a different thing from the heading. */
.callout { font-size: 30px; font-weight: 800; color: var(--warn); margin: 4px 0 0; }

/* A phone is not a kiosk, but the dev panel and the browser tests both run narrow.
   Below this the panels stack rather than squeezing two long numbers side by side. */
@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .pair .figure { font-size: 38px; }
}

/* FOCUS IS ALWAYS VISIBLE - brand guide section 7, and not negotiable. A kiosk is driven by
   touch, but it is also driven by staff with a keyboard during setup and by anyone using an
   assistive device. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The signature hero treatment: a gold radial bloom from the top-left and a faint gold dot
   grid. Applied to the welcome screen only - on every screen it would compete with the
   figures a customer is trying to read while feeding notes into a machine. */
/* FIXED, NOT ABSOLUTE. .screen is capped at 980px and centred, so an absolutely positioned
   bloom stopped at the content column with hard vertical edges down both sides - visible in
   the first capture as a lighter rectangle floating on the page. The hero treatment is meant
   to be the whole surface behind the content. */
.glow::before, .glow::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.glow::before { background: radial-gradient(circle at 25% 0%, rgba(244,197,0,.26), transparent 55%); }
.glow::after  { background-image: radial-gradient(rgba(244,197,0,.22) 1px, transparent 1px);
                background-size: 26px 26px; opacity: .3; }

/* ------------------------------------------------------------------ coin tiles
   The mark, the name and the ticker in one button, so the whole tile is a single
   touch target. Splitting the icon out would give a customer something that looks
   pressable and is not - the worst kind of control on a touchscreen. */
.btn.coin { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-width: 200px; min-height: 200px; padding: 20px; }
/* The marks carry their own colours now, so nothing here tints them. Slightly larger than
   the gold outlines were, because a filled disc reads smaller than an outline at the same
   box size and these are meant to be spotted from a step back. */
.coin-mark { width: 84px; height: 84px; flex: none; }
.coin-name { font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff;
  line-height: 1.1; }
/* The ticker under the name: a customer who knows "BTC" but not "Bitcoin", or the other
   way round, recognises one of the two. Colour is never the only signal - brand guide 7. */
.coin-code { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.row.coins { gap: 22px; }
/* No colour change on press - these are other people's marks and recolouring them on touch
   would look like a rendering fault. The button itself already responds. */
.btn.coin:active { transform: scale(.98); }