/* ==========================================================================
   Businessly — "The Register"
   Grounded in the bahi khata the reader already keeps: ruled rows, a madder-red
   margin line down the contents column, and money set in tabular figures.

   Two rules that keep this file honest:
   1. Everything is styled through tokens. Dark theme redefines tokens only —
      never component rules inside a media query.
   2. Spacing and borders use LOGICAL properties (inline-start/end), so the Urdu
      RTL pages mirror correctly without a second stylesheet.

   Typography note: this ships with a system stack rather than self-hosted
   webfonts. Bahnschrift and Urdu Typesetting are present on Windows (the PC
   audience), Roboto/Noto on Android. That is zero payload and zero 404s. If
   subset webfonts are added later, swap the @font-face in here — nothing else
   needs to change.
   ========================================================================== */

:root{
  /* paper & ink */
  --paper:#f7f5ef;
  --panel:#fffefb;
  --panel-2:#f1efe7;
  --ink:#14201a;
  --ink-2:#5a675e;
  --ink-3:#8b978f;
  --rule:#e2ded1;
  --rule-2:#cfcabb;

  /* brand & semantics — money colours stay distinct from the brand */
  --green:#00694a;
  --green-soft:#eaf2ee;
  --madder:#a8332a;
  --madder-soft:#f8ece9;
  --gold:#8a6400;
  --gold-soft:#fbf2dc;
  --in:#0f7d55;
  --out:#c4453a;

  --shadow:0 1px 2px rgba(20,32,26,.05), 0 6px 20px rgba(20,32,26,.06);
  --shadow-lg:0 2px 6px rgba(20,32,26,.07), 0 18px 48px rgba(20,32,26,.11);

  --display:"Bahnschrift","Archivo Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,"SF Mono",monospace;
  --urdu:"Noto Nastaliq Urdu","Urdu Typesetting","Jameel Noori Nastaleeq",serif;

  --measure:68ch;
  --side:250px;
  --rail:280px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#121713;
    --panel:#19201b;
    --panel-2:#202822;
    --ink:#e9efe9;
    --ink-2:#aab8ae;
    --ink-3:#7d8b82;
    --rule:#2a332d;
    --rule-2:#3a453e;
    --green:#4ecf9e;
    --green-soft:#16251e;
    --madder:#e9897d;
    --madder-soft:#2b1b18;
    --gold:#d9ae4a;
    --gold-soft:#2a2313;
    --in:#4ecf9e;
    --out:#f08a7e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.32);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#121713; --panel:#19201b; --panel-2:#202822;
  --ink:#e9efe9; --ink-2:#aab8ae; --ink-3:#7d8b82;
  --rule:#2a332d; --rule-2:#3a453e;
  --green:#4ecf9e; --green-soft:#16251e; --madder:#e9897d; --madder-soft:#2b1b18;
  --gold:#d9ae4a; --gold-soft:#2a2313; --in:#4ecf9e; --out:#f08a7e;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.32);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --paper:#f7f5ef; --panel:#fffefb; --panel-2:#f1efe7;
  --ink:#14201a; --ink-2:#5a675e; --ink-3:#8b978f;
  --rule:#e2ded1; --rule-2:#cfcabb;
  --green:#00694a; --green-soft:#eaf2ee; --madder:#a8332a; --madder-soft:#f8ece9;
  --gold:#8a6400; --gold-soft:#fbf2dc; --in:#0f7d55; --out:#c4453a;
  --shadow:0 1px 2px rgba(20,32,26,.05), 0 6px 20px rgba(20,32,26,.06);
  --shadow-lg:0 2px 6px rgba(20,32,26,.07), 0 18px 48px rgba(20,32,26,.11);
}

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

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* Urdu needs materially more line height, and Nastaliq is never set small. */
html[lang="ur"] body{ font-family:var(--urdu); font-size:17.5px; line-height:2.15 }
html[lang="ur"] .mono, html[lang="ur"] code, html[lang="ur"] .num{ font-family:var(--mono) }

h1,h2,h3,h4{ font-family:var(--display); margin:0; line-height:1.16; text-wrap:balance; font-weight:600 }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4{
  font-family:var(--urdu); line-height:1.9; font-weight:600;
}
p{margin:0}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--green); outline-offset:2px; border-radius:3px;
}
img{max-width:100%; display:block}
code{
  font-family:var(--mono); font-size:.88em;
  background:var(--panel-2); border:1px solid var(--rule);
  border-radius:4px; padding:1px 5px;
}
.num,table td.num{ font-variant-numeric:tabular-nums }

/* A worked calculation. Set in the data face with tabular figures so the
   columns line up the way a ledger's do. */
pre.calc{
  font-family:var(--mono); font-size:14px; line-height:1.75;
  font-variant-numeric:tabular-nums;
  background:var(--panel); border:1px solid var(--rule);
  border-inline-start:3px solid var(--madder);
  border-radius:0 9px 9px 0; padding:14px 18px; margin:16px 0;
  overflow-x:auto; color:var(--ink);
}
html[dir="rtl"] pre.calc{ border-radius:9px 0 0 9px }
pre.calc code{ background:none; border:0; padding:0; font-size:inherit }

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--green); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ inset-inline-start:0 }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 22px;
  background:var(--panel);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600 }
.brand:hover{text-decoration:none}
.brand .mark{
  width:28px; height:28px; border-radius:7px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:16px; font-weight:700; flex:none;
}
.brand .bn{ font-family:var(--display); font-size:17px }
html[lang="ur"] .brand .bn{ font-family:var(--urdu) }
.brand .bs{ color:var(--ink-3); font-size:13px; font-weight:400 }

.switches{ margin-inline-start:auto; display:flex; gap:9px; align-items:center }

.seg{
  display:flex; border:1px solid var(--rule-2); border-radius:7px;
  overflow:hidden; background:var(--paper);
}
.seg button, .seg a{
  font-family:var(--display); font-size:13px; font-weight:500;
  padding:6px 12px; border:0; background:transparent; color:var(--ink-2);
  cursor:pointer; line-height:1.5; white-space:nowrap;
}
html[lang="ur"] .seg button, html[lang="ur"] .seg a{ font-family:var(--urdu); font-size:14px }
.seg button[aria-pressed="true"]{ background:var(--green); color:#fff }
.seg a:hover, .seg button:hover:not([aria-pressed="true"]){ background:var(--panel-2); text-decoration:none }

/* --------------------------------------------------------------------------
   Shell: contents index | reading column | screenshot rail
   -------------------------------------------------------------------------- */

.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); align-items:start }

.side{
  position:sticky; top:49px; align-self:start;
  height:calc(100vh - 49px); overflow-y:auto;
  background:var(--panel);
  border-inline-end:1px solid var(--rule);
  padding:18px 0 40px;
  /* the register's margin rule */
  background-image:linear-gradient(to bottom, var(--madder), var(--madder));
  background-size:1px 100%;
  background-position:right 20px top;
  background-repeat:no-repeat;
}
html[dir="rtl"] .side{ background-position:left 20px top }
@media (prefers-color-scheme: dark){ .side{ background-blend-mode:normal } }

.nav-grp{
  font-family:var(--display); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
  padding:16px 20px 5px;
}
html[lang="ur"] .nav-grp{ font-family:var(--urdu); font-size:12.5px; letter-spacing:0; text-transform:none }
.nav-grp:first-child{ padding-top:0 }
.side a{
  display:block; padding:5px 20px; font-size:14px; color:var(--ink-2);
}
html[lang="ur"] .side a{ font-size:15.5px; line-height:2 }
.side a:hover{ background:var(--panel-2); color:var(--ink); text-decoration:none }
.side a.on{
  background:var(--green-soft); color:var(--green); font-weight:600;
  box-shadow:inset 3px 0 0 var(--green);
}
html[dir="rtl"] .side a.on{ box-shadow:inset -3px 0 0 var(--green) }

.main{ min-width:0; padding:30px 34px 70px }
.doc{ display:grid; grid-template-columns:minmax(0,1fr) var(--rail); gap:36px; align-items:start }
.body{ min-width:0; max-width:var(--measure) }

.kicker{
  font-family:var(--display); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--madder);
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
html[lang="ur"] .kicker{ font-family:var(--urdu); font-size:13px; letter-spacing:0; text-transform:none }
.kicker::before{ content:""; width:22px; height:2px; background:var(--madder); flex:none }

h1.t{ font-size:clamp(26px,3.4vw,36px); margin-bottom:10px }
.blurb{ color:var(--ink-2); font-size:17.5px; margin-bottom:22px; max-width:60ch }
html[lang="ur"] .blurb{ font-size:18px }

.body h2{
  font-size:22px; margin:34px 0 10px; padding-top:14px;
  border-top:1px solid var(--rule);
}
.body h3{ font-size:17.5px; margin:22px 0 6px; color:var(--ink) }
.body p{ margin:11px 0 }
.body ul,.body ol{ margin:11px 0; padding-inline-start:24px }
.body li{ margin:5px 0 }
.body hr{ border:0; border-top:1px solid var(--rule); margin:26px 0 }

/* UI labels — [[Label]] in the Markdown. These are what check_guide.py verifies
   against the app's own strings, so they must remain visually distinct. */
kbd.ui{
  font-family:var(--body); font-size:.93em; font-weight:600;
  background:var(--panel); border:1px solid var(--rule-2);
  border-bottom-width:2px; border-radius:5px; padding:1px 7px;
  color:var(--ink); white-space:nowrap;
}
html[lang="ur"] kbd.ui{ font-family:var(--urdu) }

/* --------------------------------------------------------------------------
   Ruled tables — the register's own device
   -------------------------------------------------------------------------- */

.tw{ overflow-x:auto; border:1px solid var(--rule); border-radius:9px; background:var(--panel); margin:16px 0 }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:420px }
html[lang="ur"] table{ font-size:16px }
th{
  text-align:start; font-family:var(--display); font-weight:600; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding:11px 15px; border-bottom:1px solid var(--rule-2); background:var(--panel-2);
  white-space:nowrap;
}
html[lang="ur"] th{ font-family:var(--urdu); font-size:13.5px; letter-spacing:0; text-transform:none }
td{ padding:11px 15px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2) }
tr:last-child td{ border-bottom:none }
td strong{ color:var(--ink) }

/* --------------------------------------------------------------------------
   Callouts & steps
   -------------------------------------------------------------------------- */

.cal{
  border-inline-start:3px solid var(--green);
  background:var(--green-soft);
  padding:12px 16px; border-radius:0 9px 9px 0; margin:16px 0;
}
html[dir="rtl"] .cal{ border-radius:9px 0 0 9px }
.cal-t{
  display:block; font-family:var(--display); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:4px; color:var(--green);
}
html[lang="ur"] .cal-t{ font-family:var(--urdu); font-size:13px; letter-spacing:0; text-transform:none }
.cal p{ margin:5px 0 }
.cal-warn{ border-inline-start-color:var(--gold); background:var(--gold-soft) }
.cal-warn .cal-t{ color:var(--gold) }
.cal-note{ border-inline-start-color:var(--rule-2); background:var(--panel-2) }
.cal-note .cal-t{ color:var(--ink-3) }

.steps ol{ counter-reset:s; list-style:none; padding-inline-start:0; margin:14px 0 }
.steps ol li{
  position:relative; padding-inline-start:40px; padding-block:6px; margin:6px 0;
  border-bottom:1px solid var(--rule);
}
.steps ol li:last-child{ border-bottom:none }
.steps ol li::before{
  counter-increment:s; content:counter(s);
  position:absolute; inset-inline-start:0; top:8px;
  width:26px; height:26px; border-radius:50%;
  background:var(--green); color:#fff;
  font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}

/* --------------------------------------------------------------------------
   Platform blocks
   With JS the inactive one is hidden. WITHOUT JS both render, each under its
   own visible heading — degraded, but never wrong.
   -------------------------------------------------------------------------- */

.plat{
  border:1px solid var(--rule); border-radius:9px;
  padding:12px 16px; margin:16px 0; background:var(--panel);
}
.plat-t{
  display:block; font-family:var(--display); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
html[lang="ur"] .plat-t{ font-family:var(--urdu); font-size:13px; letter-spacing:0; text-transform:none }
.plat p:first-of-type{ margin-top:0 }
.plat p:last-child{ margin-bottom:0 }
.plat.unavail{
  border-color:var(--madder); background:var(--madder-soft);
  border-inline-start-width:3px;
}
.plat.unavail .plat-t{ color:var(--madder) }

/* JS adds .js to <html>; only then do we hide the inactive platform. */
html.js .plat[data-platform="android"]{ display:none }
html.js .plat[data-platform="windows"]{ display:none }
html.js[data-platform="android"] .plat[data-platform="android"]{ display:block }
html.js[data-platform="windows"] .plat[data-platform="windows"]{ display:block }
html.js figure[data-platform]{ display:none }
html.js[data-platform="android"] figure[data-platform="android"]{ display:block }
html.js[data-platform="windows"] figure[data-platform="windows"]{ display:block }

/* --------------------------------------------------------------------------
   Screenshot rail
   -------------------------------------------------------------------------- */

.rail{ display:flex; flex-direction:column; gap:24px; position:sticky; top:70px }
.rail figure{ margin:0; text-align:center }
.rail figcaption{ color:var(--ink-3); font-size:12.5px; margin-top:9px; line-height:1.5 }
html[lang="ur"] .rail figcaption{ font-size:14px; line-height:1.9 }

.phoneframe{
  border:7px solid #16231c; border-radius:24px; background:#16231c;
  overflow:hidden; box-shadow:var(--shadow-lg); max-width:250px; margin:0 auto;
}
.phoneframe img{ border-radius:17px }
.deskframe{
  border:1px solid var(--rule-2); border-radius:9px; overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--panel);
}
/* Desktop shots run under the article at full column width — a wide, short
   screenshot squeezed into the 280px rail is unreadable. */
figure.wide{ margin:26px 0 0; text-align:center }
figure.wide figcaption{ color:var(--ink-3); font-size:12.5px; margin-top:9px }
html[lang="ur"] figure.wide figcaption{ font-size:14px }

/* on this page */
.toc{ margin-top:8px; border-top:1px solid var(--rule); padding-top:14px }
.toc b{
  display:block; font-family:var(--display); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
html[lang="ur"] .toc b{ font-family:var(--urdu); font-size:13px; letter-spacing:0; text-transform:none }
.toc a{ display:block; font-size:13.5px; color:var(--ink-2); padding:3px 0 }
html[lang="ur"] .toc a{ font-size:15px }

/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */

.pager{ display:flex; gap:14px; margin-top:40px; padding-top:24px; border-top:1px solid var(--rule) }
.pg{
  display:flex; flex-direction:column; gap:3px; max-width:48%;
  padding:12px 17px; border:1px solid var(--rule); border-radius:11px;
  background:var(--panel); box-shadow:var(--shadow);
}
.pg:hover{ border-color:var(--green); text-decoration:none }
.pg.next{ margin-inline-start:auto; text-align:end }
.pg-l{ font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
html[lang="ur"] .pg-l{ font-family:var(--urdu); font-size:13px; letter-spacing:0; text-transform:none }
.pg-t{ font-size:15px; font-weight:600; color:var(--green) }

/* --------------------------------------------------------------------------
   Hub
   -------------------------------------------------------------------------- */

.hub{ max-width:1100px; margin:0 auto; padding:44px 26px 80px }
.hub-h{ margin-bottom:34px }
.hub-h h1{ font-size:clamp(30px,4.4vw,44px); max-width:20ch }
.hub-h p{ color:var(--ink-2); font-size:18.5px; margin-top:12px; max-width:60ch }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px }
.hb{
  background:var(--panel); border:1px solid var(--rule); border-radius:12px;
  padding:20px 22px; box-shadow:var(--shadow);
}
.hb h2{ font-size:18px; margin-bottom:6px }
.hb-b{ color:var(--ink-3); font-size:14px; margin-bottom:12px }
html[lang="ur"] .hb-b{ font-size:15.5px }
.hb ul{ list-style:none; margin:0; padding:0 }
.hb li{ padding:4px 0; border-top:1px solid var(--rule) }
.hb li:first-child{ border-top:none }
.hb li a{ font-size:14.5px; color:var(--ink-2); display:block }
html[lang="ur"] .hb li a{ font-size:16px }
.hb li a:hover{ color:var(--green) }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

.mobpick{ display:none }

@media (max-width:1080px){
  .doc{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:20px }
  .rail figure{ max-width:250px }
  .toc{ width:100% }
}
@media (max-width:860px){
  .shell{ grid-template-columns:minmax(0,1fr) }
  .side{ display:none }
  .main{ padding:20px 18px 60px }
  .mobpick{
    display:block; width:100%; margin:0 0 18px;
    font:inherit; font-size:15px; font-weight:600;
    background:var(--panel); color:var(--ink);
    border:1px solid var(--rule-2); border-radius:9px; padding:10px 12px;
  }
  .top{ padding:9px 16px }
  .brand .bs{ display:none }
}
@media (max-width:520px){
  .switches{ width:100%; margin-inline-start:0 }
  .pg{ max-width:100% }
  .pager{ flex-direction:column }
  .pg.next{ margin-inline-start:0; text-align:start }
}

@media print{
  .top,.side,.pager,.toc,.mobpick{ display:none }
  .doc{ grid-template-columns:1fr }
  body{ background:#fff }
  html.js .plat[data-platform]{ display:block !important }
}