/*
  Jaroura site. One stylesheet, no framework, no external request, no script.

  Every colour, size, corner and gap below is transcribed from the app's own
  theme so the site and the product are one design:

    app/src/main/java/com/jaroura/ledger/ui/theme/Color.kt    the M3 scheme
    .../ui/theme/Type.kt      the M3 type scale at 1.2, and the two line heights
    .../ui/theme/Shape.kt     4 / 8 / 12 / 16 / 28
    .../ui/theme/Spacing.kt   the 4dp grid

  Do not hand-pick a value here. If one is wrong, it is wrong in the app too and
  belongs in Color.kt, which is itself a transcription of the Material Theme
  Builder export at the repository root.
*/

/* ---------- Type: Tajawal for everything read, Marhey for the wordmark ----- */

/*
  Tajawal, not IBM Plex Sans Arabic (which the spec named and the app dropped on
  2026-08-23): an Arabic-first face where the Latin is the companion. Three
  weights and no more — Tajawal goes 500 to 700, so 600 would be a synthesised
  face nobody drew, and the app's scale is Normal, Medium, Bold.
*/
@font-face {
  font-family: "Tajawal";
  src: url("/fonts/tajawal-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("/fonts/tajawal-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("/fonts/tajawal-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/*
  The wordmark and nothing else, exactly as in the app.

  **Subset to the five letters of «جرورة»** — 2.8 KB, from 72 KB for the whole
  family. Marhey is a variable font whose wght axis runs 300 to 700 and the
  subset keeps GSUB, GDEF and GPOS, so the letters still join; the range is
  declared rather than one weight so the browser varies the real font instead
  of synthesising a face nobody drew. Regenerate it with `subset-font` from
  `app/src/main/res/font/marhey.ttf` if the wordmark ever changes a character.
*/
@font-face {
  font-family: "Marhey";
  src: url("/fonts/marhey-wordmark.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* --- The M3 scheme, light. Seed #047DB7. ------------------------------- */
  --primary: #28638A;
  --on-primary: #FFFFFF;
  --primary-container: #CBE6FF;
  --on-primary-container: #004B71;

  --secondary: #50606F;
  --secondary-container: #D3E5F6;
  --on-secondary-container: #394956;

  --tertiary: #65587B;
  --tertiary-container: #EBDCFF;
  --on-tertiary-container: #4D4162;

  --surface: #F7F9FF;
  --on-surface: #181C20;
  --on-surface-variant: #41474D;
  --outline: #72787E;
  --outline-variant: #C1C7CE;

  --surface-container-low: #F1F4F9;
  --surface-container: #EBEEF3;

  /* The card surface and the one line colour, from the foot of Color.kt. */
  --card: #FFFFFF;
  --card-outline: #E5E7EB;

  /*
    The three account states. `settled` exists because M3 has no success role,
    `primary` means "pressable" and `error` is reserved for a genuine validation
    failure — debt is not an error and nothing here may borrow that red.
  */
  --settled: #286A45;
  --settled-container: #ADF2C5;
  --on-settled-container: #07522E;
  --due-container: #FFDBA4;
  --on-due-container: #604111;

  /* --- Type. The M3 baseline x 1.2, as one factor rather than 13 numbers. -- */
  --display-small: 2.7rem;      /* 36 x 1.2 */
  --headline-small: 1.8rem;     /* 24 x 1.2 */
  --title-large: 1.65rem;       /* 22 x 1.2 */
  --title-medium: 1.1875rem;    /* 16 x 1.2 */
  --body-large: 1.1875rem;
  --body-medium: 1.0625rem;     /* 14 x 1.2 */
  --label-small: 0.8125rem;     /* 11 x 1.2 */

  /*
    Prose 1.6, figures 1.3. Arabic diacritics and descenders clip at Latin
    defaults; Arabic-Indic digits have neither, so a figure in a prose line box
    sits in empty space.
  */
  --prose-line: 1.6;
  --numeric-line: 1.3;

  /* --- The 4dp grid, at the five steps the app spends from. --------------- */
  --xs: 0.25rem;
  --sm: 0.5rem;
  --md: 0.75rem;
  --lg: 1rem;
  --xl: 1.5rem;
  --xxl: 2rem;

  /* --- The M3 shape scale, unmodified. ----------------------------------- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  --measure: 38rem;
  --font: "Tajawal", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #97CCF8;
    --on-primary: #00344F;
    --primary-container: #004B71;
    --on-primary-container: #CBE6FF;

    --secondary: #B8C8D9;
    --secondary-container: #394956;
    --on-secondary-container: #D3E5F6;

    --tertiary: #D0C0E8;
    --tertiary-container: #4D4162;
    --on-tertiary-container: #EBDCFF;

    --surface: #101417;
    --on-surface: #E0E3E8;
    --on-surface-variant: #C1C7CE;
    --outline: #8B9198;
    --outline-variant: #41474D;

    --surface-container-low: #181C20;
    --surface-container: #1C2024;

    /*
      Not the light values inverted: inverting a near-white gives a near-black
      that swallows every card. The card takes the dark scheme's own
      surface-container-low, and the line its outline-variant.
    */
    --card: #181C20;
    --card-outline: #41474D;

    --settled: #91D5AA;
    --settled-container: #07522E;
    --on-settled-container: #ADF2C5;
    --due-container: #604111;
    --on-due-container: #FFDBA4;
  }
}

/* ---------- Base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: var(--body-large);
  line-height: var(--prose-line);
  /*
    Zero tracking everywhere, against the M3 scale's 0.1-0.5sp. Arabic is a
    connected script and positive tracking pulls the joins apart.
  */
  letter-spacing: 0;
}

.page {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--xl) var(--lg) var(--xxl);
}

/* No elevation anywhere in this app: M3 replaced elevation overlays with the
   surface-container ladder, so a raised thing asks for a container role. */

a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* The focus ring is primary, never error: error keeps its meaning. */
a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--shape-xs);
}

h1, h2, h3 { margin: 0; line-height: var(--prose-line); }
h2 {
  font-size: var(--headline-small);
  font-weight: 400;          /* M3 headlines are Normal weight */
  margin-block: var(--xxl) var(--md);
}
h3 {
  font-size: var(--title-medium);
  font-weight: 500;
  margin-block: var(--xl) var(--sm);
}
p { margin-block: 0 var(--lg); }
p:last-child { margin-block-end: 0; }

/* ---------- The brand ---------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--lg);
  margin-block-end: var(--xl);
}
.brand img { width: 64px; height: 64px; flex: none; }

/*
  The wordmark is Marhey and nothing else is. It does not follow the body face,
  and it is the same word in both languages: a brand name is not translated.
*/
.wordmark {
  font-family: "Marhey", var(--font);
  /* Normal, not bold: the app's BrandWordmark is displaySmall, which is
     FontWeight.Normal, and a logo does not gain a weight on the web. */
  font-weight: 400;
  font-size: var(--display-small);
  line-height: var(--numeric-line);
  margin: 0;
}
.wordmark.small { font-size: var(--title-large); }
.tagline {
  font-size: var(--title-medium);
  color: var(--on-surface-variant);
  margin: 0;
}

/*
  The promise About is built to make good on. Its wording is load-bearing and
  «دفترك» is the shopkeeper's own word for the ledger, not the app's name.
*/
.promise {
  font-size: var(--title-large);
  line-height: var(--prose-line);
  margin-block: 0 var(--md);
}

.lead { font-size: var(--body-large); color: var(--on-surface-variant); }

/* ---------- Cards: outlined, never filled, never raised ------------------ */

.card {
  background: var(--card);
  border: 1px solid var(--card-outline);
  border-radius: var(--shape-md);
  padding: var(--lg);
  margin-block: var(--lg);
}
.card > :first-child { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }

/*
  One card carries a tone as part of what it says, and the tone is the message.
  Everything else takes the card surface.
*/
.card.toned {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
}
/* Links inherit the tone; a filled button on it keeps its own on-colour, or
   `color: inherit` wins on specificity and paints dark text on a dark fill. */
.card.toned a:not(.button) { color: inherit; }

/*
  The download. It is the one thing this page exists to do, so it gets the
  primary container rather than the card surface — the tone is the message, the
  same licence the contact card takes.

  Prominence comes from size, placement and this container, not from a brighter
  fill: the brand blue #047DB7 is more saturated than `primary` and measures
  *worse* against both white text (4.54 against 6.48) and the page behind it,
  and this app is read on a cheap LCD in daylight. A button that shouts and
  cannot be read is not more obvious.
*/
.card.accent {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: transparent;
  text-align: center;
}
.card.accent a:not(.button) { color: inherit; }

/* ---------- The ledger preview ------------------------------------------- */

/*
  What the app's list actually looks like, drawn from the same parts: a 44dp
  avatar in the customer accent, the name, the line under it, the figure, and a
  status badge. It replaces a drawing of ruled paper, which showed a notebook
  rather than the product.
*/
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding-block: var(--md);
}
.ledger li + li { border-block-start: 1px solid var(--card-outline); }

.avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--shape-full);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  display: grid;
  place-items: center;
  /* A fixed fraction of the circle — 45% of the diameter — never a type role:
     a role grows with the text setting and the circle cannot follow it. */
  font-size: 19.8px;
  font-weight: 500;
  line-height: 1;
}

.who { flex: 1; min-width: 0; }
.who .name {
  display: block;
  font-size: var(--title-medium);
  font-weight: 500;
}
.who .what {
  display: block;
  font-size: var(--label-small);
  color: var(--on-surface-variant);
}

.amount {
  font-size: var(--title-medium);
  font-weight: 700;
  line-height: var(--numeric-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Money still out reads in the accent for its side; a customer is tertiary. */
  color: var(--tertiary);
}
/* The currency is set smaller than the figure, proportionally, as AmountText
   does — in em, so it holds at every text size. Never a symbol. */
.amount .unit { font-size: 0.72em; }

.badge {
  flex: none;
  font-size: var(--label-small);
  font-weight: 500;
  padding: var(--xs) var(--sm);
  border-radius: var(--shape-full);
  background: var(--settled-container);
  color: var(--on-settled-container);
}
.badge.due { background: var(--due-container); color: var(--on-due-container); }

.settled-amount { color: var(--settled); }

/* ---------- Lists ------------------------------------------------------- */

.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li {
  position: relative;
  padding-inline-start: var(--xl);
  margin-block-end: var(--md);
}
.plain-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--xs);
  inset-block-start: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--shape-full);
  background: var(--primary);
}
.plain-list li:last-child { margin-block-end: 0; }

/* ---------- Buttons: Material's own, at a 48px target ------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin-block: var(--lg) 0;
}
.actions.center { justify-content: center; }

/*
  The page's single primary action: full width to the card's inset, centred,
  and 56px rather than the 48px minimum — this is the one button on the site a
  shopkeeper is looking for before they have read anything.
*/
.button.block {
  width: 100%;
  min-height: 56px;
  font-size: var(--title-medium);
}

/*
  A filled confirm and an outlined companion, the primary action first in
  start-to-end order. M3's default 40dp container is under the 48dp touch
  target for a button hit without looking down, which is why the padding is
  stated rather than defaulted.
*/
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--md) var(--xl);
  border-radius: var(--shape-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--body-medium);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.5;
}
.button:hover { text-decoration: none; }
.button.secondary {
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--outline);
}

/* ---------- Facts ------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sm) var(--lg);
  margin: 0;
  font-size: var(--body-medium);
}
.facts dt { color: var(--on-surface-variant); }
.facts dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }

/*
  A phone number, a version and a hash are isolated left-to-right wherever they
  are drawn. Digits and `+` and `-` are neutral to the bidi algorithm, so in an
  Arabic paragraph they resolve to the paragraph's direction and a number comes
  out reversed. An isolate also stops the run influencing the words around it.
*/
.ltr { direction: ltr; unicode-bidi: isolate; }
.hash {
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--label-small);
  overflow-wrap: anywhere;
  text-align: start;
  color: var(--on-surface-variant);
}

.under-button {
  font-size: var(--body-medium);
  margin-block: var(--md) 0;
}

.note {
  font-size: var(--body-medium);
  color: var(--on-surface-variant);
  margin-block: var(--lg) 0;
}

/* ---------- Footer ------------------------------------------------------ */

footer {
  margin-block-start: var(--xxl);
  padding-block-start: var(--lg);
  border-block-start: 1px solid var(--card-outline);
  color: var(--on-surface-variant);
  font-size: var(--body-medium);
}
footer p { margin-block-end: var(--sm); }
footer .en { direction: ltr; text-align: start; }

/* ---------- The privacy page ------------------------------------------- */

.policy h1 {
  font-size: var(--headline-small);
  font-weight: 400;
  margin-block: var(--sm) var(--xs);
}
.policy .updated { color: var(--on-surface-variant); font-size: var(--body-medium); }
.policy section { margin-block-start: var(--xl); }
.policy .back { font-size: var(--body-medium); }
.english {
  direction: ltr;
  text-align: start;
  margin-block-start: var(--xxl);
  padding-block-start: var(--lg);
  border-block-start: 1px solid var(--card-outline);
}

/* ---------- Narrow phones ---------------------------------------------- */

@media (max-width: 26rem) {
  :root { --display-small: 2.2rem; }
  .brand { gap: var(--md); }
  .brand img { width: 52px; height: 52px; }
  .facts { grid-template-columns: 1fr; gap: var(--xs) 0; }
  .facts dd { margin-block-end: var(--md); }
  .ledger li { flex-wrap: wrap; }
}