/* ==========================================================================
   The Mukhtar partner till.

   Composed entirely from the shared tokens. No literal colour, radius,
   duration or font size below this header, because the moment one appears
   this app has started disagreeing with the other five.

   Every choice here is about a real counter: an old Android phone, bright
   overhead lighting, a queue, poor wifi, and staff who started last week.
   Golootlo's customer app is rated 4.8 and their cashier app 2.9, and almost
   every complaint about a counter refusing a discount traces back to that
   2.9. The till is what decides whether the product works, at every kind of
   partner: a restaurant, a shop, a gym, a salon or a spa.
   ========================================================================== */

@import url('tokens.css');

/* Operator density, not consumer. Same tokens, one attribute: the split
   Stripe makes between a surface people browse and a surface people work. */
:root { }
body { }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  /* A till does not scroll sideways and must not rubber-band. */
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Nothing under 16px anywhere in this app. A cracked screen under a bright
   light at arm's length is the design constraint, not a phone in a hand. */
body, input, button { font-size: var(--t-body); }

.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
  background: var(--ground);
  padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-4)
           calc(var(--s-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen[hidden] { display: none; }

/* --- Sign in -----------------------------------------------------------
   The sign-in screen has its own stylesheet, signin.css, because it wears
   the website's colours rather than these tokens. */
.fine { color: var(--ink-3); font-size: var(--t-sm); line-height: var(--lh-sm); margin-top: var(--s-6); }

.field { display: block; margin-bottom: var(--s-4); }
.field .label {
  display: block; margin-bottom: var(--s-2);
  font-weight: var(--w-med); color: var(--ink-2);
}
.field input {
  width: 100%;
  /* 56px, not 44. A thumb on a greasy counter, in a hurry. */
  min-height: 56px; padding: 0 var(--s-4);
  font: var(--w-med) var(--t-h3) / 56px var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink); background: var(--surface);
  border: var(--stroke-focus) solid var(--hairline-strong);
  border-radius: var(--r-field);
  transition: border-color var(--t-quick) var(--ease);
}
.field input::placeholder { color: var(--ink-mute); letter-spacing: .1em; }
.field input:focus-visible { border-color: var(--brand); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 var(--s-5);
  font: var(--w-bold) var(--t-body) / 1 var(--font);
  border: var(--stroke) solid transparent; border-radius: var(--r-field);
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease),
              border-radius var(--t-quick) var(--ease);
}
.btn:active { border-radius: var(--r-field-press); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:active { background: var(--brand-press); }
.btn-primary[disabled] { background: var(--surface-2); color: var(--ink-mute); cursor: default; }
.btn-block { width: 100%; }
.btn.big { min-height: 68px; font-size: var(--t-h3); }

.btn-quiet {
  appearance: none; background: none; border: 0;
  min-height: 56px; padding: 0 var(--s-4);
  font: var(--w-med) var(--t-body) / 1 var(--font);
  color: var(--link); cursor: pointer;
}
.btn-quiet.wide { width: 100%; }

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: var(--stroke) solid var(--hairline);
}
.who { min-width: 0; }
.who strong { display: block; font-weight: var(--w-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { display: block; font-size: var(--t-sm); color: var(--ink-3); }

/* --- Scanning ----------------------------------------------------------- */
.stage { flex: 1; display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-4); }

.scan-wrap {
  position: relative; flex: 1; min-height: 240px;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--ink-ground);
  display: grid; place-items: center;
}
.scan-wrap video { width: 100%; height: 100%; object-fit: cover; }

/* A square the cashier aims at. Without one, people hold the phone too far
   back and blame the app when nothing happens. */
.reticle {
  position: absolute; width: min(62%, 240px); aspect-ratio: 1;
  border: var(--stroke-nav) solid var(--on-ink);
  border-radius: var(--r-card);
  opacity: .9;
}
.scan-hint {
  position: absolute; bottom: var(--s-4); left: var(--s-4); right: var(--s-4);
  margin: 0; text-align: center;
  color: var(--on-ink); font-weight: var(--w-med);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.fallback { flex: 1; }
.fallback-why { color: var(--ink-2); margin: 0 0 var(--s-4); }

/* --- Sheets: verdict, bill, done --------------------------------------- */
.sheet { justify-content: space-between; }
.sheet-actions { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); }

/* Ramp's approval-card idea: the whole card carries the verdict colour,
   because a cashier with a queue reads a colour field faster than an icon. */
.verdict {
  margin: auto 0;
  border-radius: var(--r-card); padding: var(--s-6) var(--s-5);
  border: var(--stroke-focus) solid;
  background: var(--ok-wash); border-color: var(--ok); color: var(--ok);
  text-align: center;
}
.verdict[data-tone='stop'] { background: var(--stop-wash); border-color: var(--stop); color: var(--stop); }
.verdict[data-tone='warn'] { background: var(--warn-wash); border-color: var(--warn); color: var(--warn); }

.verdict .guest {
  margin: var(--s-3) 0 0;
  font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1);
  font-weight: var(--w-med); color: var(--ink);
}
.verdict .employer { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-h3); }
.verdict .deal {
  margin: var(--s-5) 0 0;
  font-size: var(--t-h2); line-height: var(--lh-h2);
  font-weight: var(--w-bold);
}
.verdict .exclusions {
  margin: var(--s-4) 0 0; color: var(--ink-2);
  font-size: var(--t-sm); line-height: var(--lh-sm);
}

/* --- The bill ----------------------------------------------------------- */
#bill .over { text-align: center; margin-bottom: var(--s-2); }
.amount {
  margin: 0; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: var(--w-med);
}
.amount-for { margin: var(--s-2) 0 0; text-align: center; color: var(--ink-3); }

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-4);
}
.keypad button {
  appearance: none; cursor: pointer;
  /* Big. This is the control people use most and mis-tap most. */
  min-height: 72px;
  font: var(--w-med) var(--t-h2) / 1 var(--font-mono);
  color: var(--ink); background: var(--surface);
  border: var(--stroke) solid var(--hairline-strong);
  border-radius: var(--r-card);
  transition: background-color var(--t-quick) var(--ease),
              border-radius var(--t-quick) var(--ease);
}
.keypad button:active { background: var(--surface-2); border-radius: var(--r-card-press); }
.keypad .del { color: var(--stop); }

/* --- Done --------------------------------------------------------------- */
.done-card {
  margin: auto 0;
  background: var(--surface); border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-card); padding: var(--s-6) var(--s-5);
  text-align: center;
}
.big-money {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: var(--w-med);
  color: var(--brand);
}
.breakdown { margin: var(--s-5) 0 0; text-align: left; }
.breakdown > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: var(--stroke) solid var(--hairline);
}
.breakdown dt { color: var(--ink-2); margin: 0; }
.breakdown dd {
  margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--w-med);
}
.breakdown .owed dt, .breakdown .owed dd { color: var(--ink); font-weight: var(--w-bold); }

/* --- Messages -----------------------------------------------------------
   Every failure is a sentence a person can act on, in the tone of the thing
   that went wrong. Nothing fails quietly in here. */
.note {
  margin-top: var(--s-4);
  border-radius: var(--r-field); padding: var(--s-4);
  border: var(--stroke-focus) solid; font-weight: var(--w-med);
  line-height: var(--lh-sm);
}
.note[data-tone='stop'] { background: var(--stop-wash); border-color: var(--stop); color: var(--stop); }
.note[data-tone='warn'] { background: var(--warn-wash); border-color: var(--warn); color: var(--warn); }
.note[data-tone='ok']   { background: var(--ok-wash);   border-color: var(--ok);   color: var(--ok); }
.note[data-tone='info'] { background: var(--info-wash); border-color: var(--info); color: var(--info); }

.over { color: var(--ink-3); }
.hr { height: var(--stroke); background: var(--hairline); border: 0; margin: var(--s-5) 0 0; }

/* The till is used under overhead light on cheap panels. Dark mode there is
   unreadable, so this app does not follow the system. It is always light. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}