/* ref: spec/PLAN.md C2; rtl-arabic-ui skill. Logical properties only; no letter-spacing; Arabic body 18px / 1.8. */
:root {
  --paper: #f3f5f4; --card: #ffffff; --ink: #14212b; --muted: #55656f; --line: #d6dde0; --soft: #eaf0ef;
  --accent: #0b5a63; --accent-2: #e3f0f1; --on-accent: #ffffff;
  --in: #12663f; --out: #a1301f; --block: #b42318; --review: #965800; --info: #34587a; --ok: #1b6b44;
  --block-bg: #fdecea; --review-bg: #fff4e0; --info-bg: #e9f0f8; --ok-bg: #e5f4ec;
  --font: "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); line-height: 1.8; }
:lang(ar), :lang(ar) * { letter-spacing: normal; }
h1, h2, h3 { line-height: 1.4; margin-block: 0 .5em; font-weight: 700; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { margin-block: 0 .6em; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
bdi, .num { unicode-bidi: isolate; }
.num { direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; }

/* shell */
header.top { position: sticky; inset-block-start: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem;
  padding: .5rem 1rem; background: var(--ink); color: #fff; }
header.top a { color: #fff; text-decoration: none; }
.brand { font-weight: 700; font-size: 1.2rem; }
header.top nav { display: flex; gap: .3rem; flex-wrap: wrap; }
header.top nav a { padding: .2rem .8rem; border-radius: 999px; }
header.top nav a.on { background: #fff; color: var(--ink); font-weight: 700; }
.who { margin-inline-start: auto; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .9rem; }
.who input[type=date] { font: inherit; font-size: .85rem; padding: .1rem .4rem; border-radius: 6px; border: 0; }
button.link { background: none; border: 0; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; padding: .2rem; }
main { max-inline-size: 1180px; margin-inline: auto; padding: 1.2rem 1rem 4rem; }
main.narrow { max-inline-size: 460px; padding-block-start: 12vh; }
#toast { position: fixed; inset-block-end: 1rem; inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: 92vw; background: var(--ink); color: #fff;
  padding: .6rem 1.2rem; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
#toast.show { opacity: 1; }
#toast.bad { background: var(--block); }

/* generic */
.box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; margin-block-end: 1rem; }
.box.err { border-color: var(--block); background: var(--block-bg); }
.err { color: var(--block); }
button, .btn { font: inherit; min-block-size: 44px; padding: .4rem 1.1rem; border-radius: 10px; border: 1.5px solid var(--accent); background: var(--card); color: var(--accent); cursor: pointer; font-weight: 600; }
button.primary { background: var(--accent); color: var(--on-accent); }
button.danger { border-color: var(--block); color: var(--block); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link:disabled { opacity: 1; }
input, select, textarea { font: inherit; padding: .35rem .6rem; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); max-inline-size: 100%; }
textarea { inline-size: 100%; min-block-size: 5rem; }
label { display: block; font-weight: 600; margin-block: .5rem .15rem; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-block: .4rem; }
.chip { font-size: .8rem; line-height: 1.5; padding: .05rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); }
.chip.sev-BLOCK { background: var(--block-bg); border-color: var(--block); color: var(--block); }
.chip.sev-REVIEW { background: var(--review-bg); border-color: var(--review); color: var(--review); }
.chip.sev-INFO { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.chip.hint { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.chip.risk-high { background: var(--block-bg); color: var(--block); border-color: var(--block); }
.chip.risk-medium { background: var(--review-bg); color: var(--review); border-color: var(--review); }
.chip.risk-low { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.money.in .num { color: var(--in); } .money.out .num { color: var(--out); }
.flow { font-size: .8rem; color: var(--muted); margin-inline-start: .3rem; }
.cur { font-size: .85em; color: var(--muted); }
.tbl { inline-size: 100%; border-collapse: collapse; background: var(--card); }
.tbl th, .tbl td { padding: .45rem .7rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.tbl th { background: var(--soft); font-size: .9rem; }
.tbl .n { text-align: end; white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* home: what to do now */
.hero { display: grid; gap: .8rem; margin-block-end: 1.2rem; }
.hero h1 small { display: block; font-size: 1rem; font-weight: 400; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.tile { display: block; text-align: start; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: .7rem 1rem; text-decoration: none; color: var(--ink); font-weight: 400; min-block-size: 0; }
.tile b { display: block; font-size: 2.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile.next { border-color: var(--accent); background: var(--accent-2); box-shadow: 0 0 0 2px var(--accent); }
.tile .tag { display: block; font-size: .8rem; color: var(--accent); font-weight: 700; }
.nextline { font-size: 1.15rem; font-weight: 600; }
.banner-done { background: var(--ok-bg); border: 1.5px solid var(--ok); color: var(--ok); border-radius: 14px; padding: 1rem 1.3rem; }
.banner-done h2 { margin: 0; font-size: 1.6rem; }
.drop { display: block; text-align: center; border: 2.5px dashed var(--accent); border-radius: 14px; padding: 1.4rem 1rem; background: var(--accent-2); cursor: pointer; font-weight: 400; }
.drop.over { background: #cfe5e7; }
.drop b { font-size: 1.2rem; display: block; }
.drop input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.results { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.results li { padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.results li.ok { border-color: var(--ok); background: var(--ok-bg); }
.results li.blocked { border-color: var(--block); background: var(--block-bg); }
.results .fl { margin-block: .3rem 0; font-size: .95rem; }
details > summary { cursor: pointer; font-weight: 600; padding-block: .2rem; }
.group { margin-block: 1.6rem; }
.group > h2 { display: flex; gap: .6rem; align-items: baseline; }
.group > h2 .count { font-size: .9rem; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 .7rem; }

/* decision card */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; }
.card.risk-high { border-color: var(--block); } .card.risk-medium { border-color: var(--review); }
.card-top { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: center; margin-block-end: .6rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.side { background: var(--soft); border-radius: 12px; padding: .8rem 1rem; }
.side h3 { font-size: .95rem; color: var(--muted); font-weight: 600; margin: 0; }
.side .txt { font-size: 1.1rem; font-weight: 600; word-break: break-word; }
.side .big { font-size: 1.9rem; line-height: 1.4; font-weight: 700; }
.why { margin-block: .8rem; padding: .6rem 1rem; border-inline-start: 5px solid var(--accent); background: var(--accent-2); border-radius: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block-start: .8rem; }
.actions .grow { flex: 1 1 auto; }
.reasons { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .6rem; }
.keys { color: var(--muted); font-size: .9rem; margin-block-start: .8rem; }
img.evidence { max-inline-size: 100%; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; background: #fff; }

/* match detail */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.detail .box { margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.pick-list { max-block-size: 18rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pick-list label { display: flex; gap: .6rem; align-items: baseline; margin: 0; padding: .35rem .7rem; font-weight: 400; border-block-end: 1px solid var(--line); }
.pick-list input { inline-size: 1.2rem; block-size: 1.2rem; flex: none; }
.diffbox { font-size: 1.4rem; font-weight: 700; padding: .5rem 1rem; border-radius: 10px; background: var(--soft); }
.diffbox.bad { background: var(--review-bg); color: var(--review); } .diffbox.good { background: var(--ok-bg); color: var(--ok); }
ol.history { margin: 0; padding-inline-start: 1.3rem; }

/* statement */
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem; }
.sheet h1, .sheet .sub { text-align: center; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.line { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-block-end: 1px dotted var(--line); align-items: baseline; }
.line.total { font-weight: 700; border-block-start: 2px solid var(--ink); border-block-end: 3px double var(--ink); margin-block-start: .4rem; }
.line .amt { text-align: end; white-space: nowrap; }
.sheet details { border-block-end: 1px dotted var(--line); }
.sheet details > summary { display: flex; justify-content: space-between; gap: 1rem; list-style: none; padding-block: .3rem; }
.sheet details > summary::-webkit-details-marker { display: none; }
.sheet .items { font-size: .9rem; margin-block-end: .5rem; }
.sub-note { font-size: .85rem; color: var(--muted); font-weight: 400; }
.verdict { margin-block-start: 1rem; padding: .7rem 1rem; border-radius: 10px; font-weight: 700; font-size: 1.15rem; }
.verdict.good { background: var(--ok-bg); color: var(--ok); border: 1.5px solid var(--ok); }
.verdict.bad { background: var(--block-bg); color: var(--block); border: 1.5px solid var(--block); }
.sign { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 1.2rem; font-size: .95rem; color: var(--muted); flex-wrap: wrap; }

/* flags */
.flag { background: var(--card); border: 1px solid var(--line); border-inline-start: 6px solid var(--review); border-radius: 10px; padding: .8rem 1.1rem; margin-block-end: .8rem; }
.flag.sev-BLOCK { border-inline-start-color: var(--block); } .flag.sev-INFO { border-inline-start-color: var(--info); }
.flag p { margin-block-end: .3rem; }
.flag .msg { font-size: 1.1rem; font-weight: 600; }

@media (max-width: 760px) {
  html { font-size: 17px; }
  .pair, .detail, .sides { grid-template-columns: 1fr; }
  .sides { gap: 1rem; }
  .who { margin-inline-start: 0; inline-size: 100%; }
  .tbl { font-size: .9rem; }
  .side .big { font-size: 1.6rem; }
  .actions button { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.grow { flex: 1 1 auto; }
.row > div { flex: 1 1 9rem; min-inline-size: 0; }
.row > div > input, .row > div > select { inline-size: 100%; }
.scroll-x > .tbl { min-inline-size: 38rem; }
@media (max-width: 760px) {
  header.top { gap: .1rem .8rem; padding: .3rem .8rem; }
  header.top nav a { padding: .05rem .6rem; }
  .who { gap: .2rem .7rem; font-size: .8rem; flex-wrap: nowrap; }
  .who input[type=date] { inline-size: 7.6rem; }
  .who .user { max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}