/* Mubdi's window in Aleem's identity (Aleem 2.1.27's app.css, the parts Mubdi's shell uses, with their change numbers
   where Aleem gives them). Every colour, radius and glow comes from the active style's tokens (styles/window.css), so
   switching styles restyles everything and changes no function. The only literal colours are the swatches that
   preview each style in the settings. Text sizes never go under 12px and follow the device's own text size. */
/* C-47: the smallest text: 12px, and 14px for Arabic while its switch is on (Naskh needs the extra size) */
:root { --side: clamp(15rem, 19vw, 22rem); --measure: 72rem; --min-text: 12px; --small: max(var(--min-text), .8rem); }
:root.ui-text-14:lang(ar) { --min-text: 14px; }
* { box-sizing: border-box; }
html { font-size: clamp(1rem, .3vw + .82rem, 1.45rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--font-ui); line-height: var(--leading); transition: background-color .25s, color .25s;
}
button, input, textarea, select { font: inherit; color: inherit; }
/* C-199: no text box has a corner that drags it bigger or smaller */
textarea { resize: none; }
h1, h2, h3, h4 { line-height: 1.4; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
@supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; flex: none; }
[dir="rtl"] .mirror { transform: scaleX(-1); }
.hint { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .88rem); }
.status { min-height: 1.6em; margin: .8rem 0 0; font-size: max(var(--min-text), .9rem); color: hsl(var(--signature-text)); }
.status.is-error { color: hsl(var(--foreground)); font-weight: 700; }
:root[data-scheme="dark"] { color-scheme: dark; }
:root[data-scheme="light"] { color-scheme: light; }

/* -- marks ------------------------------------------------------------------------------- */
.mark { display: inline-block; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-tile); overflow: hidden; flex: none; }
.mark img { width: 100%; height: 100%; display: block; }
.mark.xl { width: clamp(4.6rem, 9vw, 6.4rem); height: clamp(4.6rem, 9vw, 6.4rem); }

/* -- buttons ------------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; cursor: pointer;
  border-radius: calc(var(--radius) * .7); padding: .55rem 1.3rem; border: 1px solid transparent; text-decoration: none;
}
.btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn.outline { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-color: hsl(var(--border)); }
.btn.small { padding: .3rem .95rem; font-size: max(var(--min-text), .9rem); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.danger { border-color: hsl(var(--destructive)); }
.btn.danger:not(.outline) { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.icon-btn { background: transparent; border: 0; color: inherit; cursor: pointer; padding: .35rem; border-radius: .6rem;
  display: inline-grid; place-items: center; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mini-btn {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: calc(var(--radius) * .4); padding: .05rem .55rem; cursor: pointer; font-size: max(var(--min-text), .82rem);
  white-space: nowrap;
}
.mini-btn.danger { border-color: hsl(var(--destructive) / .7); }

/* -- what shows until the window starts; never a blank page ------------------------------------- */
.boot {
  position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 1.3rem;
  padding: 2rem 1rem; background: hsl(var(--background)); color: hsl(var(--foreground)); text-align: center;
}
.boot-bar { display: block; width: 7.5rem; height: .3rem; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: hsl(var(--signature));
  animation: boot-slide 1.1s ease-in-out infinite alternate; }
@keyframes boot-slide { from { transform: translateX(-60%); } to { transform: translateX(210%); } }
.boot-late, .boot-off { margin: 0; max-width: 28rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.boot-late { visibility: hidden; animation: boot-late 0s 12s forwards; }
@keyframes boot-late { to { visibility: visible; } }

/* -- sign-in -------------------------------------------------------------------------------- */
.gate { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; padding: 2rem 1rem .5rem; }
.gate-card {
  align-self: center; justify-self: center; display: grid; justify-items: center; gap: .7rem; text-align: center;
  width: min(100%, 26rem); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 2.2rem 1.6rem 1.6rem;
  box-shadow: 0 1.6rem 4rem hsl(var(--deep) / .35);
}
.gate-card h1 { font-size: 2.3rem; margin: .2rem 0 0; color: hsl(var(--signature-text)); }
.tagline { margin: 0 0 .8rem; color: hsl(var(--muted-foreground)); }
.gate-note { min-height: 1.6em; margin: .2rem 0 0; font-size: max(var(--min-text), .92rem); }
.login-form { display: grid; gap: .45rem; width: 100%; text-align: start; }
.login-form label { font-weight: 700; font-size: max(var(--min-text), .88rem); }
.login-form input {
  width: 100%; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .5rem .8rem; font: inherit; text-align: left;
}
.login-form .btn { margin-top: .3rem; }
/* the access code and its eye, one field */
.secret { position: relative; }
.secret input { padding-inline-start: 2.8rem; }
.secret .eye { position: absolute; inset-block: 0; inset-inline-start: .3rem; color: hsl(var(--muted-foreground)); }
.secret .eye .shut, .secret .eye[aria-pressed="true"] .open { display: none; }
.secret .eye[aria-pressed="true"] .shut { display: block; }
.gate .foot { margin-inline-start: 0; }
/* C-45: on a phone the card; on a tablet it widens and says what Mubdi does; on a wide screen two columns */
.gate-hero, .gate-form { display: contents; }
.gate-points { display: none; }
@media (min-width: 48rem) {
  .gate-card { width: min(100%, 38rem); padding: 2.6rem 2.4rem 2rem; }
  .gate-points {
    display: grid; gap: .45rem; list-style: none; margin: 0 0 .9rem; padding: 0; text-align: start; width: 100%;
    color: hsl(var(--card-foreground));
  }
  .gate-points li { position: relative; padding-inline-start: 1.5rem; line-height: 1.7; }
  .gate-points li::before {
    content: ""; position: absolute; inset-inline-start: .15rem; top: .62em; width: .6rem; height: .6rem; border-radius: 50%;
    background: hsl(var(--signature)); box-shadow: 0 0 .6rem hsl(var(--signature) / .5);
  }
}
@media (min-width: 68rem) {
  .gate { padding-inline: max(2rem, env(safe-area-inset-left, 0px)) max(2rem, env(safe-area-inset-right, 0px)); }
  .gate-card {
    width: min(92vw, 84rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
    justify-items: stretch; gap: 0; padding: 0; text-align: start; overflow: hidden;
  }
  .gate-hero {
    display: grid; align-content: center; justify-items: start; gap: .8rem; position: relative; isolation: isolate;
    padding: clamp(2.6rem, 4vw, 5rem); min-height: min(38rem, 78vh); border-inline-end: 1px solid hsl(var(--border));
    background: linear-gradient(160deg, hsl(var(--signature) / .12), transparent 55%), hsl(var(--card));
  }
  .gate-hero::before {
    content: ""; position: absolute; z-index: -1; inset: 8% 46% 8% 3%; background: hsl(var(--signature) / .16);
    -webkit-mask: url(assets/brain-lines.png) center / contain no-repeat;
    mask: url(assets/brain-lines.png) center / contain no-repeat;
  }
  .gate-hero .mark.xl { width: clamp(6rem, 7vw, 8rem); height: clamp(6rem, 7vw, 8rem); }
  .gate-hero h1 { font-size: clamp(3rem, 3.6vw, 4.6rem); line-height: 1.2; }
  .gate-hero .tagline { font-size: 1.25rem; margin: 0 0 .6rem; }
  .gate-points { max-width: 34rem; font-size: 1.05rem; }
  .gate-form {
    display: grid; align-content: center; justify-items: stretch; gap: .75rem; text-align: center;
    padding: clamp(2.2rem, 3.6vw, 4.5rem); width: min(100%, 34rem); justify-self: center;
  }
}

/* -- the app frame: the band, the side list with the stage, the footer -------------------------------- */
.app { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "band" "shell" "foot"; }
.app > .band { grid-area: band; }
.app > .shell { grid-area: shell; }
.app > .foot { grid-area: foot; }
.band {
  display: flex; align-items: center; gap: .8rem; padding: .55rem clamp(.7rem, 2.4vw, 2.4rem);
  background: hsl(var(--header)); color: hsl(var(--header-foreground)); border-bottom: 1px solid hsl(var(--signature) / .5);
}
:root[data-style="dhakaa"] .band .mark { background: hsl(var(--card)); padding: .16rem; border-radius: .6rem; }
.identity { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1 1 auto; }
.names { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.names strong { font-size: 1.2rem; }
.names .tag { font-size: var(--small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-badge {
  flex: none; border-radius: 999px; padding: 0 .7rem; font-size: var(--small); font-weight: 700; line-height: 1.8;
  background: hsl(var(--header-foreground)); color: hsl(var(--header)); white-space: nowrap;
}
.band-actions { margin-inline-start: auto; display: flex; gap: .4rem; flex: none; }
.band-btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid hsl(var(--header-foreground) / .4);
  background: transparent; color: inherit; border-radius: 999px; padding: .32rem .9rem; cursor: pointer; white-space: nowrap;
}
.band-btn.round { width: 2.4rem; height: 2.4rem; padding: 0; justify-content: center; }
.band-btn.strong { background: hsl(var(--header-foreground)); color: hsl(var(--header)); border-color: hsl(var(--header-foreground)); font-weight: 700; }
.band-btn:disabled { opacity: .45; cursor: not-allowed; }
:root[data-mode="day"] #toggle-mode .sun, :root:not([data-mode="day"]) #toggle-mode .moon { display: none; }
:root[data-style="dhakaa"] #toggle-mode .moon { display: inline; }
:root[data-style="dhakaa"] #toggle-mode .sun { display: none; }
/* C-176: «توحيد لون القوائم مع النمط»: the bar takes the style's own colour: its deep tone on a light style, its lifted
   tone on a dark one; everything on the bar reads its colours from these two */
:root[data-bar-tone="bar"][data-scheme="light"] .band { --header: var(--deep); --header-foreground: var(--background); }
:root[data-bar-tone="bar"][data-scheme="dark"] .band { --header: var(--secondary); --header-foreground: var(--secondary-foreground); }
:root[data-bar-tone="bar"][data-style="dhakaa"] .band .mark { background: hsl(var(--card)); }

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

/* -- the side list: Mubdi's sections, on the model of Aleem's conversation log (C-146): one row each, a hairline
   between rows, two alternating grounds, and the open one with a gold bar, a stronger ground and a gold title -- */
.history {
  border-inline-end: 1px solid hsl(var(--border)); padding: 1rem .7rem .8rem; display: flex; flex-direction: column;
  min-height: 0; background: hsl(var(--background)); overflow-y: auto;
}
.history h2 { font-size: max(var(--min-text), .85rem); color: hsl(var(--muted-foreground)); margin: 0 0 .4rem; padding-inline: .55rem; }
.history ul { list-style: none; margin: 0; padding: 0; min-height: 0; flex: 0 0 auto; border: 1px solid hsl(var(--border)); border-radius: .7rem; }
.history li { position: relative; display: flex; align-items: center; }
.history li.lg-row { background: hsl(var(--row-a)); border-bottom: 1px solid hsl(var(--border) / .6); }
.history li.lg-row:nth-child(even) { background: hsl(var(--row-b)); }
.history li.lg-row:first-child { border-start-start-radius: .7rem; border-start-end-radius: .7rem; }
.history li.lg-row:last-child { border-bottom: 0; border-end-start-radius: .7rem; border-end-end-radius: .7rem; }
.history li .open-conv {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; text-align: start; background: transparent; border: 0;
  border-radius: inherit; padding: .55rem .75rem; cursor: pointer; color: hsl(var(--foreground));
}
.history li .open-conv .ic { width: 1.15rem; height: 1.15rem; color: hsl(var(--signature-text)); }
.history li .conv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li .open-conv:hover { background: hsl(var(--foreground) / .06); }
.history li.lg-row:has(> .open-conv[aria-current="page"]) { background: hsl(var(--row-cur)); }
.history li.lg-row:has(> .open-conv[aria-current="page"])::before {
  content: ""; position: absolute; inset-block: .3rem; inset-inline-start: 0; width: .22rem; border-radius: 99px;
  background: hsl(var(--row-bar)); }
.history li .open-conv[aria-current="page"] { font-weight: 700; }
.history li .open-conv[aria-current="page"] .conv-title { color: hsl(var(--row-title)); }
.spend {
  margin-top: auto; text-align: start; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--card-foreground)); border-radius: calc(var(--radius) * .6); padding: .55rem .75rem; cursor: pointer;
  font-size: max(var(--min-text), .86rem); line-height: 1.6;
}
.history .spend { margin-top: 1rem; }
.spend b { color: hsl(var(--signature-text)); }
.spend-line { display: block; }
/* the tracks of the bars read on every style's card, by night too: the muted ink, faint */
.meter { display: block; height: .35rem; margin-top: .35rem; border-radius: 99px; background: hsl(var(--muted-foreground) / .2); overflow: hidden; }
.meter i { display: block; height: 100%; background: hsl(var(--signature)); border-radius: 99px; }
.meter.hot i { background: hsl(var(--primary)); }
.meter.over i { background: hsl(var(--destructive)); }

/* -- the stage: one section at a time ----------------------------------------------------------- */
.stage { overflow: auto; padding: clamp(1rem, 3vw, 2.4rem) clamp(.8rem, 3vw, 2.4rem) 1.2rem; }
.sec { width: min(100%, var(--measure)); margin-inline: auto; display: grid; gap: .8rem; align-content: start; }
.sec > * { margin: 0; }
.sec-title { font-size: clamp(1.35rem, 1vw + 1rem, 1.9rem); color: hsl(var(--signature-text)); }
.sec h3 { font-size: 1.05rem; color: hsl(var(--signature-text)); margin: .4rem 0 0; }
.card {
  display: grid; gap: .7rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: clamp(.9rem, 2vw, 1.3rem);
}
.card h3 { margin: 0; }
.k { font-weight: 700; font-size: max(var(--min-text), .95rem); }

/* the figures: Aleem's totals, its credit bars and its last days (the ledger and the health windows) */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; }
.total { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: calc(var(--radius) * .6); padding: .55rem .75rem; min-width: 0; }
.total .k { display: block; font-size: max(var(--min-text), .82rem); color: hsl(var(--muted-foreground)); font-weight: 400; }
.total .v { display: block; font-weight: 700; font-size: 1.1rem; color: hsl(var(--signature-text)); white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.tile { display: grid; gap: .45rem; align-content: start; min-width: 0; background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .85rem 1rem; }
.tile.wide { grid-column: 1 / -1; }
.tile h3 { margin: 0; font-size: 1rem; }
.credit { display: grid; gap: .3rem; }
.credit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .7rem; }
.credit-big { font-weight: 700; font-size: 1.25rem; color: hsl(var(--signature-text)); white-space: nowrap; }
.credit-bar { display: block; height: .6rem; border-radius: 99px; background: hsl(var(--muted-foreground) / .2); overflow: hidden; }
.credit-bar i { display: block; height: 100%; background: hsl(var(--signature)); border-radius: 99px; }
.credit-bar.over i { background: hsl(var(--destructive)); }
.credit-nums { font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); }
.day-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; height: 7.5rem; align-items: end; }
.day-bars .day { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; align-items: end; text-align: center; min-width: 0; }
.day-bars .day i { display: block; background: hsl(var(--signature) / .75); border-radius: .25rem .25rem 0 0; min-height: 2px; }
.day-bars .day.today i { background: hsl(var(--signature)); }
.day-bars small { font-size: max(var(--min-text), .72rem); color: hsl(var(--muted-foreground)); white-space: nowrap; min-height: 1.4em; }
.day-bars .amt { font-size: max(var(--min-text), .7rem); color: hsl(var(--card-foreground)); white-space: nowrap; overflow: hidden; }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: 999px;
  padding: .1rem .85rem; cursor: pointer; font-size: max(var(--min-text), .86rem);
}
.chip[aria-checked="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); font-weight: 700; }
.badge { display: inline-block; white-space: nowrap; border: 1px solid hsl(var(--border)); border-radius: 999px;
  padding: 0 .6rem; line-height: 1.7; font-size: max(var(--min-text), .8rem); color: hsl(var(--foreground)); }
.badge.ok { border-color: hsl(var(--tone-pos)); color: hsl(var(--tone-pos)); font-weight: 700; }
.badge.no { border-color: hsl(var(--tone-neg)); color: hsl(var(--tone-neg)); font-weight: 700; }
.badge.strong { border-color: hsl(var(--signature)); color: hsl(var(--signature-text)); font-weight: 700; }
:root { --tone-neg: 0 78% 74%; --tone-pos: 142 52% 64%; }
:root[data-mode="day"], :root[data-style="dhakaa"] { --tone-neg: 0 72% 38%; --tone-pos: 145 70% 24%; }

/* -- the record tables (C-181): a header row in the style's secondary ground, then the rows in two alternating tones;
   numbers, badges and time stamps keep one line, only a record's own text wraps; it fits a 360 px phone ---------- */
:root { --row-a: 216 69% 11.1%; --row-b: 216 66% 14.8%; --row-cur: 216 62% 19%; --row-bar: var(--signature);
  --row-title: var(--signature-text); }
:root[data-style="aleem-mukhtalif"][data-mode="day"] { --row-a: 44 50% 95.5%; --row-b: 42 42% 89.5%; --row-cur: 41 48% 83%;
  --row-bar: 38 70% 25%; --row-title: 38 70% 25%; }
:root[data-style="dhakaa"] { --row-a: 210 25% 97.5%; --row-b: 212 25% 93.5%; --row-cur: 213 38% 89%;
  --row-bar: 26 90% 29%; --row-title: 26 90% 29%; }
:root[data-style="annabi-dhahabi"] { --row-a: 348 71% 6.9%; --row-b: 349 64% 11.6%; --row-cur: 349 60% 16.2%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="annabi-dhahabi"][data-mode="day"] { --row-a: 40 80% 96.5%; --row-b: 38 48% 89.5%; --row-cur: 352 32% 88%;
  --row-bar: 42 79% 22%; --row-title: 42 79% 22%; }
:root[data-style="mawthooq"] { --row-a: 219 94% 9.3%; --row-b: 219 86% 13.4%; --row-cur: 219 80% 17.8%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="mawthooq"][data-mode="day"] { --row-a: 213 60% 98.5%; --row-b: 214 55% 94.5%; --row-cur: 215 52% 88.5%;
  --row-bar: 40 100% 20%; --row-title: 40 100% 20%; }
:root[data-style="akhdar-dhahabi"] { --row-a: 158 63% 6.5%; --row-b: 157 56% 10.6%; --row-cur: 157 52% 14.6%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="akhdar-dhahabi"][data-mode="day"] { --row-a: 48 70% 96.5%; --row-b: 48 38% 89.5%; --row-cur: 150 22% 87%;
  --row-bar: 42 79% 22%; --row-title: 42 79% 22%; }
/* «عليم العصبوني» has no row tones in Aleem 2.1.27, so by day its rows took the navy of the default night; here they
   take the style's own grounds, by night and by day */
:root[data-style="aleem-asabouni"] { --row-a: 228 52% 8.5%; --row-b: 227 46% 12%; --row-cur: 224 44% 17%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="aleem-asabouni"][data-mode="day"] { --row-a: 205 60% 98%; --row-b: 207 42% 92.5%; --row-cur: 200 42% 86%;
  --row-bar: 192 75% 26%; --row-title: 192 75% 26%; }
.rec-wrap { min-width: 0; max-width: 100%; }
.rec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: max(var(--min-text), .86rem);
  font-variant-numeric: tabular-nums; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); }
.rec-table th { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 700; text-align: start;
  padding: .4rem .35rem; white-space: nowrap; word-break: keep-all; vertical-align: bottom; }
.rec-table thead th:first-child { border-start-start-radius: calc(var(--radius) * .6 - 1px); }
.rec-table thead th:last-child { border-start-end-radius: calc(var(--radius) * .6 - 1px); }
.rec-table td { padding: .4rem .35rem; text-align: start; vertical-align: top; border-top: 1px solid hsl(var(--border) / .6);
  background: hsl(var(--row-a)); color: hsl(var(--foreground)); overflow-wrap: break-word; }
.rec-table > tbody > tr:nth-child(even) > td { background: hsl(var(--row-b)); }
.rec-table.groups > tbody > tr > td { background: hsl(var(--row-a)); }
.rec-table.groups > tbody:nth-of-type(even) > tr > td { background: hsl(var(--row-b)); }
.rec-table.groups > tbody > tr + tr > td { border-top: 0; padding-top: 0; }
.rec-table > tbody:last-child > tr:last-child > :first-child { border-end-start-radius: calc(var(--radius) * .6 - 1px); }
.rec-table > tbody:last-child > tr:last-child > :last-child { border-end-end-radius: calc(var(--radius) * .6 - 1px); }
.rec-table .what { min-width: 3.5rem; unicode-bidi: plaintext; }
.rec-table .what b { font-weight: 700; }
.rec-table .sub { display: block; color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .8rem); overflow-wrap: anywhere; }
.rec-table .num, .rec-table .at, .rec-table .tight, .rec-table .act { white-space: nowrap; width: 1%; }
.rec-table .num { font-weight: 700; }
.rec-table th.num, .rec-table td.num { text-align: center; }
.rec-table .at { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .78rem); }
.rec-table .act { text-align: end; }
.rec-table .act > * + * { margin-inline-start: .25rem; }
.rec-table tr.empty td { color: hsl(var(--muted-foreground)); text-align: center; }
.rec-table .mini-btn, .rec-table .act button { min-height: 2rem; min-width: 2rem; }
.rec-table .en { direction: ltr; unicode-bidi: isolate; text-align: left; display: block; font-size: max(var(--min-text), .82rem); }
.rec-table .uid { display: inline-block; font-family: var(--font-mono); line-height: 1.35; font-size: max(var(--min-text), .7rem);
  color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.rec-table tr.now > td, .rec-table tbody.now > tr > td { background: hsl(var(--row-cur)); }
.rec-table tbody.now > tr:first-child > td:first-child { box-shadow: inset -.22rem 0 0 hsl(var(--row-bar)); }
[dir="ltr"] .rec-table tbody.now > tr:first-child > td:first-child { box-shadow: inset .22rem 0 0 hsl(var(--row-bar)); }
.rec-table input[type="checkbox"] { accent-color: hsl(var(--signature)); width: 1.1rem; height: 1.1rem; }
/* a plan's facts: two pairs to a row */
.rec-table.facts th { background: hsl(var(--secondary)); border-top: 1px solid hsl(var(--border) / .6); white-space: nowrap; width: 1%; }
.rec-table.facts tr:first-child th { border-top: 0; }
.rec-table.facts td { width: 49%; }
.rec-table.facts tr:first-child th:first-child { border-start-start-radius: calc(var(--radius) * .6 - 1px); }
.rec-table.facts tr:first-child td:last-child { border-start-end-radius: calc(var(--radius) * .6 - 1px); }
/* each scene's fields under its row */
.rec-table .edit { display: grid; gap: .25rem; padding-bottom: .55rem; }
.rec-table .edit label { font-weight: 700; font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); }
.rec-table .edit textarea, .rec-table .edit input {
  width: 100%; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .45); padding: .35rem .6rem; line-height: 1.6; min-height: 2.4rem;
}
.rec-table .edit textarea { min-height: 4.2rem; }
.rec-table .edit textarea.en { direction: ltr; text-align: left; font-size: max(var(--min-text), .84rem); }

/* -- the director's desk ------------------------------------------------------------------------------ */
/* the idea's box: Aleem's message box (C-2: a thin gold edge and a soft glow while writing, while its switch is on) */
.idea-box { display: flex; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); border-radius: 1.2rem; padding: .3rem; }
.idea-box:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.idea-box textarea { flex: 1; border: 0; background: transparent; color: hsl(var(--foreground)); padding: .45rem .7rem;
  line-height: 1.7; outline: none; min-height: 4.6rem; }
.idea-box textarea::placeholder { color: hsl(var(--muted-foreground)); }
.ui-gold-edges .idea-box { border-color: hsl(var(--signature) / .9); }
.ui-gold-edges .idea-box:focus-within { outline: 1px solid hsl(var(--signature)); outline-offset: 1px; box-shadow: 0 0 .9rem hsl(var(--signature) / .3); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.fields label { display: grid; gap: .25rem; font-weight: 700; font-size: max(var(--min-text), .88rem); min-width: 0; }
.fields input, .fields select, .field-grid select, .fact-add input, .sc-form input {
  width: 100%; min-width: 0; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .45rem .7rem; font-weight: 400;
}
.pref-group { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); padding: .5rem .8rem .7rem; margin: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pref-group legend { font-weight: 700; padding: 0 .3rem; font-size: max(var(--min-text), .9rem); }
.pref-group label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; cursor: pointer; }
.pref-group input { accent-color: hsl(var(--signature)); width: 1.05rem; height: 1.05rem; margin: 0; }
.result { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.screen-wrap { position: sticky; top: 0; }
.screen-wrap .row .btn { flex: 1 1 auto; }
.screen { position: relative; overflow: hidden; border-radius: calc(var(--radius) * .7); background: hsl(var(--deep));
  aspect-ratio: 16 / 9; width: 100%; margin-inline: auto; }
/* a tall or square film keeps its shape at a width of its own (a grid item with a ratio is not stretched) */
.screen[data-ratio="9:16"] { aspect-ratio: 9 / 16; width: min(100%, 20rem, 38vh); justify-self: center; }
.screen[data-ratio="1:1"] { aspect-ratio: 1; width: min(100%, 28rem, 62vh); justify-self: center; }
.frame { position: absolute; inset: -8%; opacity: 0; transition: transform linear, opacity .6s; }
.frame.on { opacity: 1; }
/* the film's own captions keep a light ink on the dark shade in both modes, as a film does */
.cap { position: absolute; inset-inline: 0; bottom: 0; margin: 0; padding: 1.5rem 1.2rem 1rem; font-size: 1.1rem; text-align: center;
  color: hsl(43 50% 92%); background: linear-gradient(transparent, hsl(218 80% 6% / .85)); }
.onscreen { position: absolute; top: 12%; inset-inline: 8%; margin: 0; text-align: center; font-size: clamp(1.2rem, 3.2vw, 2.4rem);
  font-weight: 700; color: hsl(43 50% 92%); text-shadow: 0 2px 18px hsl(0 0% 0% / .6); }
.cap:empty, .onscreen:empty { display: none; }
.bar { height: .35rem; border-radius: 99px; background: hsl(var(--muted-foreground) / .2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: hsl(var(--signature)); transition: width .3s linear; }
.decide { justify-content: flex-start; }
.plan h3 { font-size: 1.2rem; }
.plan .hint { margin: 0; }
.fact-add { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.fact-add input { flex: 1 1 12rem; width: auto; }
.field-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem .8rem; align-items: center; max-width: 34rem; }
.field-grid label { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.queue-acts { justify-content: flex-start; }

/* -- side windows: one at a time, from the start side, over a shared scrim (C-118: M3, M9) ----------------- */
.panel {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(31rem, 94vw); background: hsl(var(--popover));
  color: hsl(var(--popover-foreground)); border-inline-end: .3rem solid hsl(var(--signature)); padding: 1rem 1.3rem 2rem;
  overflow: auto; z-index: 20; box-shadow: 0 0 2.5rem hsl(var(--deep) / .4);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky;
  top: calc(-1rem - env(safe-area-inset-top, 0px)); z-index: 2; background: hsl(var(--popover));
  margin-inline: -1.3rem; padding: .6rem 1.3rem; border-bottom: 1px solid hsl(var(--border)); }
.panel-head h2 { margin: 0; font-size: 1.3rem; color: hsl(var(--signature-text)); }
.panel-lead { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .9rem); margin: .4rem 0 .8rem; }
.panel h3 { font-size: 1.02rem; margin: 1.1rem 0 .5rem; color: hsl(var(--signature-text)); }
.panel label { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.set-group + .set-group { border-top: 1px solid hsl(var(--border)); margin-top: 1rem; }
.styles { display: grid; gap: .5rem; }
.style-opt {
  display: flex; align-items: center; gap: .6rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--card-foreground)); border-radius: calc(var(--radius) * .6); padding: .5rem .8rem; cursor: pointer; text-align: start;
}
.style-opt[aria-checked="true"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .35); font-weight: 700; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid hsl(var(--border)); display: block; }
/* swatches that preview each style, whatever style is active (Aleem's, exactly) */
.dots .d1 { background: #061427; } .dots .d2 { background: #daa93e; }
.dots .d3 { background: #f2ecde; } .dots .d4 { background: #ae7d29; }
.dots .d5 { background: #ffffff; } .dots .d6 { background: #0f3461; }
.dots .d7 { background: #140206; } .dots .d8 { background: #d4af37; }
.dots .d9 { background: #f8f1e4; } .dots .d10 { background: #6b1520; }
.dots .d11 { background: #000c24; } .dots .d12 { background: #feaf14; }
.dots .d13 { background: #f3f7fc; } .dots .d14 { background: #00205b; }
.dots .d15 { background: #03110c; } .dots .d16 { background: #d4af35; }
.dots .d17 { background: #f5f2e5; } .dots .d18 { background: #15563e; }
.dots .d19 { background: #060a18; } .dots .d20 { background: #25cbe4; }
.dots .d21 { background: #edf3f8; } .dots .d22 { background: #1a889e; }
#view-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#view-modes .style-opt { justify-content: center; }
.panel .pref-group { margin: .6rem 0; }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .6rem 0; padding: .7rem .9rem;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); background: hsl(var(--card));
}
.switch-row .text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.switch { display: inline-flex; align-items: center; gap: .5rem; flex: none; background: transparent; border: 0; padding: .2rem; cursor: pointer; }
.switch-track { position: relative; width: 2.75rem; height: 1.55rem; border-radius: 999px; background: hsl(var(--muted));
  box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: background .15s ease; }
.switch-knob { position: absolute; top: .18rem; inset-inline-start: .18rem; width: 1.19rem; height: 1.19rem; border-radius: 50%;
  background: hsl(var(--card-foreground)); transition: inset-inline-start .15s ease; }
.switch[aria-checked="true"] .switch-track { background: hsl(var(--primary)); box-shadow: none; }
.switch[aria-checked="true"] .switch-knob { inset-inline-start: calc(100% - 1.37rem); background: hsl(var(--primary-foreground)); }
.switch-state { min-width: 3.4em; font-size: max(var(--min-text), .86rem); color: hsl(var(--muted-foreground)); }
.switch[aria-checked="true"] .switch-state { color: hsl(var(--signature-text)); font-weight: 700; }
/* C-124: the settings as tabs: a row that scrolls sideways under the window's head, one section at a time */
.set-tabs { position: sticky; top: calc(2.9rem - env(safe-area-inset-top, 0px)); z-index: 1; display: flex; gap: .35rem; overflow-x: auto;
  scrollbar-width: none; margin-inline: -1.3rem; padding: .45rem 1.3rem; background: hsl(var(--popover)); border-bottom: 1px solid hsl(var(--border)); }
.set-tabs::-webkit-scrollbar { display: none; }
.panel-head:has(.set-tabs) { flex-wrap: wrap; row-gap: .45rem; padding-bottom: 0; }
.panel-head .set-tabs { position: static; flex: 1 0 100%; border-bottom: 0; border-top: 1px solid hsl(var(--border)); }
.set-tab { flex: none; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
  border-radius: 999px; padding: .3rem .85rem; font: inherit; font-size: max(var(--min-text), .88rem); cursor: pointer; white-space: nowrap; }
.set-tab[aria-selected="true"] { background: hsl(var(--signature) / .16); color: hsl(var(--signature-text)); border-color: hsl(var(--signature)); font-weight: 700; }
.sc-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem .6rem; align-items: center; margin-top: .4rem; }
.sc-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 30rem) { .sc-form { grid-template-columns: minmax(0, 1fr); } }
.scrim { position: fixed; inset: 0; background: hsl(var(--deep) / .5); z-index: 15; }

/* C-21: one dialog frame for the confirmations */
.confirm { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: hsl(var(--deep) / .55); }
.confirm[hidden] { display: none; }
.confirm-box {
  width: min(100%, 26rem); background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .7rem;
  box-shadow: 0 1rem 3rem hsl(var(--deep) / .45);
}
.confirm-box h2 { margin: 0; font-size: 1.1rem; }
.confirm-box p { margin: 0; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.confirm-box .row { justify-content: flex-start; }

.foot {
  margin-inline-start: var(--side); text-align: center; color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .78rem);
  line-height: 1.6; padding: .1rem 1rem .5rem; display: flex; flex-direction: column;
}

/* C-31: the band's brain pulses while Mubdi writes a plan (Aleem's «دماغ يتحرك مع التفكير») */
:root[data-brain="think"] .band .mark { animation: alm-brain-pulse 1.5s ease-in-out infinite; }
/* C-27: the brain mark in the style's colour comes from its picture (app.js); C-175: «عليم العصبوني»'s network */
#neural { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  color: hsl(var(--signature)); opacity: .5; }
#neural[hidden] { display: none; }
:root[data-mode="day"] #neural { opacity: .38; }
#neural .ax { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: .6; }
#neural .n { fill: currentColor; fill-opacity: .5; }
#neural .n.hub { fill-opacity: .8; }
#neural .sp { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-opacity: .85;
  stroke-dasharray: 7 100; stroke-dashoffset: 107; animation: synapse 7s linear infinite; }
@keyframes synapse { to { stroke-dashoffset: 0; } }
#neural .s1 { animation-delay: -1.7s; } #neural .s2 { animation-delay: -3.4s; } #neural .s3 { animation-delay: -5.1s; }
#neural .s4 { animation-delay: -.9s; } #neural .s5 { animation-delay: -2.6s; } #neural .s6 { animation-delay: -4.3s; }
/* behind the network the window keeps its own ground: the body is transparent there, the page's ground on <html> */
:root[data-style="aleem-asabouni"] { background: hsl(var(--background)); }
:root[data-style="aleem-asabouni"] body { background: transparent; }
:root[data-style="aleem-asabouni"] .history { background: hsl(var(--background) / .82); }

/* -- narrow screens: the side list becomes a drawer from the start side, opened by the band's first button -- */
.only-narrow { display: none; }
@media (max-width: 900px) {
  :root { --side: 0px; }
  .only-narrow { display: inline-grid; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* closed, the drawer casts no shadow onto the screen's edge and takes no focus */
  .history {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(20rem, 86vw); z-index: 20;
    transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
  }
  [dir="ltr"] .history { transform: translateX(-100%); }
  .history.open { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 0 0 2rem hsl(var(--deep) / .4); }
  :root[data-style="aleem-asabouni"] .history { background: hsl(var(--background)); }
  .band { gap: .35rem; padding-inline: .5rem; }
  .band-actions { gap: .3rem; }
  .band-btn { width: 2.3rem; height: 2.3rem; padding: 0; justify-content: center; }
  .band-btn .long { display: none; }
  .names .tag { display: none; }
  .mark { width: 2.3rem; height: 2.3rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .result { grid-template-columns: minmax(0, 1fr); }
  .screen-wrap { position: static; }
}
@media (max-width: 640px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .plan-badge { display: none; }
  .names strong { font-size: 1.05rem; }
}
@media (max-width: 360px) {
  .band { gap: .25rem; padding-inline: .4rem; }
  .band-actions { gap: .2rem; }
  .band-btn, .band .mark { width: 2.15rem; height: 2.15rem; }
  .identity { gap: .4rem; }
  .names { display: none; }
}
/* 2.1.13: view mode (phone or desktop), chosen in settings; auto by screen width. C-164: the brand mark keeps its
   own rounded square */
html.m-phone { font-size: 15px; }
html.m-phone .band { gap: .2rem; padding-inline: .35rem; }
html.m-phone .band-actions { gap: .2rem; }
html.m-phone .band-btn, html.m-phone .band .mark { width: 2.05rem; height: 2.05rem; padding: 0; justify-content: center; }
html.m-phone .band-btn .long, html.m-phone .names .tag, html.m-phone .plan-badge { display: none; }
html.m-phone .band-btn .ic { width: 1.05rem; height: 1.05rem; }
html.m-desk { font-size: clamp(1.05rem, .3vw + .85rem, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .frame { transition: opacity .2s !important; }
  .boot-late { animation: boot-late 0s 12s forwards !important; }
  #neural .sp { stroke-dasharray: none; stroke-opacity: .45; }
}
@media print {
  .band, .history, .foot, .panel, .scrim { display: none !important; }
  .app { display: block; height: auto; }
}

/* the visible screen's full height where the browser knows it; room for the system bars drawn edge to edge */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .gate { min-height: 100dvh; }
  .app { height: 100dvh; }
}
.band { padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
.foot { padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.gate { padding-top: calc(2rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.app { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.panel { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.history { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }