/* Fekrah (فكره) — styles. Right-to-left first; logical properties throughout so English blocks mirror
   correctly. Light and dark themes are token sets on :root; the twelve colour families of the house colour
   system are .fam-0 … .fam-11, each setting --fam for the current theme. */

/* Fonts: css/fonts.css (bundled, SIL Open Font License; see licenses/). */

/* ---------- tokens ---------- */
:root {
  --bg: #ffffff;
  --bg-2: #f4f6f9;
  --surface: #ffffff;
  --line: #e3e8ef;
  --line-2: #d3dbe6;
  --ink: #172033;
  --ink-2: #4b5568;
  --ink-3: #7a8496;
  --brand: #0f3460;
  --brand-2: #274870;
  --brand-ink: #ffffff;
  --brand-soft: #e7edf6;
  --danger: #c0392b;
  --ok: #27ae60;
  --hit: #ffe08a;
  --hl-yellow: #fff1a1;
  --hl-green: #c8f0d3;
  --hl-blue: #cfe4ff;
  --hl-pink: #ffd2e6;
  --hl-orange: #ffdfbd;
  --shadow: 0 1px 2px rgba(15, 52, 96, .06), 0 4px 14px rgba(15, 52, 96, .07);
  --shadow-up: 0 -2px 12px rgba(15, 52, 96, .08);
  --radius: 16px;
  --tabbar: 64px;
  --app-font: 'Noto Naskh Arabic', 'Traditional Arabic', 'Times New Roman', serif;
  --note-lh: 1.95;      /* the distance between a note's lines, and below: between its paragraphs and list items */
  --note-pgap: .35em;
  --note-ligap: .12em;
  --ui: var(--app-font);
  --note-font: var(--app-font);
  --note-size: 12pt;    /* a note's plain text and its title, in points (Settings set both on <html>) */
  --title-size: 18pt;
  --sel: color-mix(in srgb, #3390ff 30%, transparent);   /* the whole note selected: the title drawn as the text's selection */
  --rail-w: clamp(210px, 15vw, 300px);
  --list-w: clamp(340px, 27vw, 540px);
  color-scheme: light;
}
/* The interface in English (en.html): its words in the phone's own sans-serif; Arabic in it (a note's title on its
   card, say) still in the font chosen in Settings, which also stays the notes' own. */
:root[lang="en"] { --ui: system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, var(--app-font); }
:root[data-theme="dark"] {
  --sel: color-mix(in srgb, #8ab4f8 34%, transparent);
  --bg: #0e131b;
  --bg-2: #121925;
  --surface: #151d29;
  --line: #243044;
  --line-2: #2f3d55;
  --ink: #e9eef6;
  --ink-2: #aeb8c8;
  --ink-3: #7d889b;
  --brand: #8fb3e6;
  --brand-2: #a9c4ec;
  --brand-ink: #0b1220;
  --brand-soft: #1b2a42;
  --danger: #ef7d71;
  --ok: #4fd18a;
  --hit: #6d5a14;
  --hl-yellow: rgba(250, 204, 21, .30);
  --hl-green: rgba(74, 222, 128, .26);
  --hl-blue: rgba(96, 165, 250, .28);
  --hl-pink: rgba(244, 114, 182, .28);
  --hl-orange: rgba(251, 146, 60, .28);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-up: 0 -2px 12px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
/* The app's colour (Settings > «المظهر»): the twelve families, each as the brand colour in both themes (darker than
   the family's own where white text sits on it). Navy, the first, is the tokens above. */
:root[data-accent="orange"] { --brand: #b4490b; --brand-soft: #f7ebe4; }
:root[data-accent="orange"][data-theme="dark"] { --brand: #f2a35e; --brand-soft: #3d3533; }
:root[data-accent="purple"] { --brand: #6c3483; --brand-soft: #efe9f1; }
:root[data-accent="purple"][data-theme="dark"] { --brand: #c39bd8; --brand-soft: #343448; }
:root[data-accent="green"] { --brand: #1b7a43; --brand-soft: #e6f0ea; }
:root[data-accent="green"][data-theme="dark"] { --brand: #5fd394; --brand-soft: #223e3c; }
:root[data-accent="maroon"] { --brand: #9b2335; --brand-soft: #f4e7e9; }
:root[data-accent="maroon"][data-theme="dark"] { --brand: #f2919c; --brand-soft: #3d323e; }
:root[data-accent="teal"] { --brand: #0e7490; --brand-soft: #e4f0f3; }
:root[data-accent="teal"][data-theme="dark"] { --brand: #40b4cd; --brand-soft: #1d3847; }
:root[data-accent="gold"] { --brand: #8a5a00; --brand-soft: #f2ede3; }
:root[data-accent="gold"][data-theme="dark"] { --brand: #e2aa45; --brand-soft: #3a362e; }
:root[data-accent="pink"] { --brand: #b0185f; --brand-soft: #f6e6ed; }
:root[data-accent="pink"][data-theme="dark"] { --brand: #f07ab2; --brand-soft: #3c2e42; }
:root[data-accent="grey"] { --brand: #4a5568; --brand-soft: #ebecee; }
:root[data-accent="grey"][data-theme="dark"] { --brand: #a3aec2; --brand-soft: #2f3745; }
:root[data-accent="indigo"] { --brand: #3730a3; --brand-soft: #e9e8f5; }
:root[data-accent="indigo"][data-theme="dark"] { --brand: #a29ef5; --brand-soft: #2e344e; }
:root[data-accent="brown"] { --brand: #7c4d33; --brand-soft: #f1ebe9; }
:root[data-accent="brown"][data-theme="dark"] { --brand: #cf9f7f; --brand-soft: #363438; }
:root[data-accent="sky"] { --brand: #0369a1; --brand-soft: #e3eff5; }
:root[data-accent="sky"][data-theme="dark"] { --brand: #4bb9f0; --brand-soft: #1f394d; }
/* Line spacing (Settings): «مريحة» is Fekrah's original; the tighter ones also close the gap between paragraphs,
   which is most of what a line typed after Enter is apart from the one before it. */
:root[data-spacing="tight"] { --note-lh: 1.5; --note-pgap: 0em; --note-ligap: 0em; }
:root[data-spacing="medium"] { --note-lh: 1.7; --note-pgap: .15em; --note-ligap: .05em; }
:root[data-spacing="relaxed"] { --note-lh: 1.95; --note-pgap: .35em; --note-ligap: .12em; }
:root[data-spacing="wide"] { --note-lh: 2.3; --note-pgap: .6em; --note-ligap: .2em; }

/* the twelve families: base colour, and the same family lifted for dark backgrounds */
.fam-0 { --fam: #0f3460; } .fam-1 { --fam: #e67e22; } .fam-2 { --fam: #6c3483; } .fam-3 { --fam: #27ae60; }
.fam-4 { --fam: #c0392b; } .fam-5 { --fam: #0e7490; } .fam-6 { --fam: #b7770d; } .fam-7 { --fam: #c0186c; }
.fam-8 { --fam: #4a5568; } .fam-9 { --fam: #3730a3; } .fam-10 { --fam: #7c4d33; } .fam-11 { --fam: #0284c7; }
[data-theme="dark"] .fam-0 { --fam: #7ea6dd; } [data-theme="dark"] .fam-1 { --fam: #f2a35e; }
[data-theme="dark"] .fam-2 { --fam: #b583d1; } [data-theme="dark"] .fam-3 { --fam: #52cf87; }
[data-theme="dark"] .fam-4 { --fam: #ec766a; } [data-theme="dark"] .fam-5 { --fam: #40b4cd; }
[data-theme="dark"] .fam-6 { --fam: #e2aa45; } [data-theme="dark"] .fam-7 { --fam: #ee6aa8; }
[data-theme="dark"] .fam-8 { --fam: #a3aec2; } [data-theme="dark"] .fam-9 { --fam: #8f8af0; }
[data-theme="dark"] .fam-10 { --fam: #c3906f; } [data-theme="dark"] .fam-11 { --fam: #4bb9f0; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: clamp(16px, calc(16px + (100vw - 1600px) * .004), 22px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--ui);
  font-size: 1rem; line-height: 1.6; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.35rem; height: 1.35rem; flex: none; }
[dir="rtl"] .i.flip { transform: scaleX(-1); }
[dir="ltr"] .i.flip-ltr { transform: scaleX(-1); }   /* the arrow back, drawn pointing right */
.logo { width: 2rem; height: 2rem; flex: none; border-radius: .5rem; }
.logo.big { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }
.muted { color: var(--ink-3); }
.pad { padding-inline: 1rem; margin: .25rem 0 .75rem; font-size: .9rem; }
mark.hit { background: var(--hit); color: inherit; border-radius: 3px; padding: 0 1px; }

.icon-btn {
  width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink-2); flex: none;
}
.icon-btn:active { background: var(--bg-2); }
.icon-btn[aria-pressed="true"] { color: var(--brand); background: var(--brand-soft); }
.icon-btn.danger { color: var(--danger); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500;
}
.btn .i { width: 1.15rem; height: 1.15rem; }
.btn.small { min-height: 2.25rem; padding: 0 .9rem; font-size: .9rem; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.primary.danger, .dialog .btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn:active { filter: brightness(.95); }
.link-btn { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand); font-weight: 500; font-size: .9rem; padding: .35rem .2rem; }
.link-btn .i { width: 1.05rem; height: 1.05rem; }
.nb-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--fam, var(--brand)); flex: none; display: inline-block; }

/* ---------- layout: phone ---------- */
.app { min-height: 100dvh; }
.pane { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 5.5rem); }
.rail {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch;
  height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.rail-brand, .rail-gap, .rail .nav.nav-wide { display: none; }
.nav {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  color: var(--ink-3); font-size: .75rem; font-weight: 500;
}
.nav .i { width: 2.6rem; height: 1.75rem; padding: .2rem .65rem; border-radius: 999px; transition: background .15s; }
.nav[aria-current="page"] { color: var(--brand); }
.nav[aria-current="page"] .i { background: var(--brand-soft); }
.fab {
  position: fixed; z-index: 21; inset-inline-start: 1rem; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 1rem);
  width: 3.6rem; height: 3.6rem; border-radius: 1.2rem; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px rgba(15, 52, 96, .32);
}
:root[data-accent]:not([data-theme="dark"]) .fab { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 32%, transparent); }
.fab .i { width: 1.7rem; height: 1.7rem; }
.fab:active { transform: scale(.96); }
body.editing:not(.wide) .rail, body.editing:not(.wide) .fab { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .5rem;
  min-height: 3.6rem; padding: calc(env(safe-area-inset-top) + .35rem) .6rem .35rem; background: var(--bg);
}
.pane-title { margin: 0; flex: 1; font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane-title.brand { color: var(--brand); font-size: 1.45rem; }
.topbar .logo { margin-inline-start: .35rem; }
.sync-badge { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--ok); }
.sync-badge.state-syncing { color: var(--brand); }
.sync-badge.state-syncing .i, .cloud-status.state-syncing .i { animation: spin 1.1s linear infinite; }
.sync-badge.state-offline, .sync-badge.state-error { color: var(--ink-3); }
.sync-badge.state-reauth { color: var(--danger); }
@keyframes spin { to { transform: rotate(-360deg); } }

/* ---------- notes list ---------- */
.searchbar {
  display: flex; align-items: center; gap: .5rem; margin: .25rem 1rem .6rem; padding: 0 .9rem; min-height: 3rem;
  background: var(--bg-2); border-radius: 999px; color: var(--ink-3); border: 1px solid transparent;
}
.searchbar:focus-within { border-color: var(--brand); background: var(--surface); }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--ink); padding: .6rem 0; }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar .icon-btn { width: 2.2rem; height: 2.2rem; margin-inline-end: -.5rem; }
.chips { display: flex; gap: .45rem; overflow-x: auto; padding: 0 1rem .5rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.1rem; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: .9rem; background: var(--surface);
}
.chip .i { width: 1rem; height: 1rem; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 1rem .5rem; color: var(--ink-3); font-size: .9rem; min-height: 2.5rem; }
.cards { display: flex; flex-direction: column; gap: var(--gap); padding: 0 .75rem;
  --gap: .6rem; --card-pad: .85rem 1rem; --card-title: 1.05rem; --card-body: .95rem; --card-meta: .8rem; --card-thumb: 4.25rem;
  --card-lines: 2; --card-radius: var(--radius); --bar-inset: .9rem; --mark: 1rem; --tile-min: 4.9rem; --cols: 2; }
.card {
  position: relative; display: flex; gap: .75rem; padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  -webkit-user-select: none; user-select: none; content-visibility: auto; contain-intrinsic-size: auto 7rem;
  -webkit-touch-callout: none;   /* iPhone: a long press is the card's own menu, not the system's image menu */
}
/* the notebook's colour as a bar along the card's starting edge */
.card::before { content: ''; position: absolute; inset-inline-start: 0; top: var(--bar-inset); bottom: var(--bar-inset); width: 4px; border-radius: 0 4px 4px 0; background: var(--fam); }
[dir="rtl"] .card::before { border-radius: 4px 0 0 4px; }
.card:active { background: var(--bg-2); }
/* a note with a background of its own shows it on its card too */
.card.has-nbg { background: var(--nbg); }
:root[data-theme="dark"] .card.has-nbg { background: var(--nbg-d); }
.card.is-open { outline: 2px solid var(--brand); outline-offset: -1px; }
.card-text { flex: 1; min-width: 0; }
.card-head { display: flex; align-items: flex-start; gap: .3rem; margin: 0 0 .15rem; }
.card-head .pin-mark { flex: none; width: var(--mark); height: var(--mark); margin-top: .32em; color: var(--fam); }
.card-head .lock-mark, .nb-head .lock-mark { flex: none; width: var(--mark); height: var(--mark); margin-top: .32em; color: var(--ink-3); }
.nb-head .lock-mark { margin: 0; margin-inline-end: .35rem; vertical-align: -.1em; }
.card-body.locked-note { color: var(--ink-3); font-style: normal; }
/* a locked note's title: stars only */
.card-title.masked, .trash-text h3.masked { color: var(--ink-3); letter-spacing: .25em; direction: ltr; text-align: right; }
:root[dir="ltr"] .card-title.masked, :root[dir="ltr"] .trash-text h3.masked { text-align: left; }
.trash-text h3.masked .lock-mark { width: .95rem; height: .95rem; margin-inline-start: .35rem; vertical-align: -.1em; color: var(--ink-3); }
.card-title { flex: 1; min-width: 0; margin: 0; font-size: var(--card-title); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: start; }
.card-body { margin: 0 0 .35rem; color: var(--ink-2); font-size: var(--card-body); line-height: 1.55; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: var(--card-lines); -webkit-box-orient: vertical; overflow: hidden; text-align: start; }
.card-body:last-child { margin-bottom: 0; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; color: var(--ink-3); font-size: var(--card-meta); }
.card-meta .nb-dot { width: .55rem; height: .55rem; }
.card-meta .nb-name { margin-inline-start: -.3rem; }
.meta-tasks { display: inline-flex; align-items: center; gap: .2rem; }
.meta-tasks .i { width: .95rem; height: .95rem; }
.meta-tasks.done { color: var(--ok); }
.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .55rem; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: .8rem; }
.card-thumb { width: var(--card-thumb); height: var(--card-thumb); border-radius: .75rem; object-fit: cover; flex: none; background: var(--bg-2); align-self: center; }
/* The list's look (Settings > «قائمة الملاحظات», and «العرض» above the list): cards one under another, tiles in
   columns, or compact rows; five sizes; the lines of text under each title (none, the note's first line, two, four). */
.cards[data-size="xxs"] { --gap: .2rem; --card-pad: .28rem .5rem; --card-title: .8rem; --card-body: .72rem; --card-meta: .63rem;
  --card-thumb: 2.1rem; --card-radius: 9px; --bar-inset: .3rem; --mark: .78rem; --tile-min: 3.2rem; }
.cards[data-size="xs"] { --gap: .3rem; --card-pad: .4rem .65rem; --card-title: .87rem; --card-body: .78rem; --card-meta: .67rem;
  --card-thumb: 2.6rem; --card-radius: 11px; --bar-inset: .42rem; --mark: .85rem; --tile-min: 3.7rem; }
.cards[data-size="s"] { --gap: .4rem; --card-pad: .55rem .85rem; --card-title: .95rem; --card-body: .85rem; --card-meta: .72rem;
  --card-thumb: 3.25rem; --card-radius: 13px; --bar-inset: .6rem; --mark: .92rem; --tile-min: 4.2rem; }
.cards[data-size="l"] { --gap: .8rem; --card-pad: 1.05rem 1.2rem; --card-title: 1.2rem; --card-body: 1.05rem; --card-meta: .88rem;
  --card-thumb: 5.25rem; --tile-min: 6rem; }
.cards[data-size="xxs"] .card, .cards[data-size="xs"] .card { gap: .5rem; }
.cards[data-lines="1"] { --card-lines: 1; }
.cards[data-lines="4"] { --card-lines: 4; }
.cards[data-lines="0"] .card { contain-intrinsic-size: auto 3.5rem; }
.cards[data-lines="0"] .card-head { margin-bottom: 0; }
.cards[data-meta="off"] .card-head { margin-bottom: 0; }
.cards[data-meta="off"] .card { align-items: center; }
/* Columns: up to the number chosen, as many as the screen has room for at the size chosen (a tile is never
   narrower than --tile-min); each tile its picture on top, then its title and lines. */
.cards[data-mode="grid"] { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--tile-min), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))), 1fr)); }
.cards[data-cols="3"] { --cols: 3; } .cards[data-cols="4"] { --cols: 4; } .cards[data-cols="5"] { --cols: 5; } .cards[data-cols="6"] { --cols: 6; }
.cards[data-mode="grid"] .card { flex-direction: column; gap: calc(var(--gap) + .1rem); container-type: inline-size; }
.cards[data-mode="grid"] .card-thumb { order: -1; width: 100%; height: calc(var(--card-thumb) * 1.25); align-self: stretch; }
.cards[data-mode="grid"] .card-meta .tag { display: none; }   /* the notebook and the date; the tags need the room */
@container (max-width: 8.5rem) { .cards[data-mode="grid"] .card-meta :is(.nb-name, .nb-dot) { display: none; } }   /* the bar says the notebook */
/* A tile keeps each word whole: lines break between words, and a word wider than the tile ends in «…» (split in two,
   an Arabic word loses its joined letters). In a narrow tile (five or six columns on a phone) the pin or the lock
   sits above the title, which then has the tile's whole width. */
.cards[data-mode="grid"] .card-title, .cards[data-mode="grid"] .card-body { overflow-wrap: normal; text-overflow: ellipsis; }
@container (max-width: 7rem) {
  .cards[data-mode="grid"] .card-head { flex-direction: column; align-items: stretch; gap: .12rem; }
  .cards[data-mode="grid"] .card-head .pin-mark, .cards[data-mode="grid"] .card-head .lock-mark { margin-top: 0; align-self: flex-start; }
}
/* Rows: one list, a line between notes; the date at the end of the title's line. */
.cards[data-mode="rows"] { gap: 0; margin: 0 .75rem; padding: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--card-radius); overflow: hidden; }
.cards[data-mode="rows"] .card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.cards[data-mode="rows"] .card:last-of-type { border-bottom: 0; }
.cards[data-mode="rows"]:empty { display: none; }
.cards[data-mode="rows"] .card { contain-intrinsic-size: auto 3rem; }
.cards[data-mode="rows"] .card.has-nbg { background: var(--nbg); }
:root[data-theme="dark"] .cards[data-mode="rows"] .card.has-nbg { background: var(--nbg-d); }
.cards[data-mode="rows"] .card:active { background: var(--bg-2); }
.cards[data-mode="rows"] .card-head { align-items: baseline; margin: 0; }
.cards[data-mode="rows"] .card-head .pin-mark, .cards[data-mode="rows"] .card-head .lock-mark { align-self: flex-start; }
.cards[data-mode="rows"] .card-title { -webkit-line-clamp: 1; }
.cards[data-mode="rows"] .card-body { margin: .1rem 0 0; }
.cards[data-mode="rows"] .card-thumb { width: calc(var(--card-thumb) * .8); height: calc(var(--card-thumb) * .8); border-radius: .5rem; }
.row-end { flex: none; display: inline-flex; align-items: center; gap: .45rem; margin-inline-start: .5rem; color: var(--ink-3);
  font-size: var(--card-meta); white-space: nowrap; }
.row-end .meta-tasks .i { width: .9em; height: .9em; }
.more { height: 1px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; color: var(--ink-2); }
.empty p { margin: .2rem 0; }
.empty-icon { width: 3rem; height: 3rem; color: var(--ink-3); margin-bottom: .6rem; }

/* ---------- notebooks: header in the family colour, a lighter strip, a tinted body ---------- */
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; padding: 0 .75rem; }
.nb-card { border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; border: 1px solid var(--line); }
.nb-head { display: flex; align-items: center; gap: .3rem; padding-block: .55rem; padding-inline: .9rem .3rem; background: var(--fam); color: #fff; }
[data-theme="dark"] .nb-head { color: #0b1220; }
.nb-head h3 { flex: 1; margin: 0; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-head .icon-btn { color: inherit; width: 2.4rem; height: 2.4rem; }
.nb-desc { padding: .35rem .9rem; background: color-mix(in srgb, var(--fam) 90%, #fff); color: #fff; font-size: .85rem; font-weight: 500; }
[data-theme="dark"] .nb-desc { background: color-mix(in srgb, var(--fam) 75%, #000); color: #fff; }
.nb-body { padding: .6rem .9rem .8rem; background: color-mix(in srgb, var(--fam) 7%, var(--surface)); color: var(--ink-2); font-size: .85rem; }

/* ---------- tags ---------- */
.tag-list { display: flex; flex-direction: column; padding: 0 .75rem; gap: .4rem; }
.tag-row { display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem .3rem 1rem; padding-inline: 1rem .3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.tag-row > .i { color: var(--ink-3); }
.tag-name { flex: 1; font-weight: 500; overflow-wrap: anywhere; }
.tag-count { color: var(--ink-3); font-size: .9rem; }

/* ---------- tasks ---------- */
.task-group { margin: 0 .75rem .75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.tg-head { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; background: color-mix(in srgb, var(--fam) 9%, var(--surface)); text-align: start; }
.tg-title { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-count { color: var(--ink-3); font-size: .85rem; }
.task-list { list-style: none; margin: 0; padding: .25rem 0; }
.task { display: flex; align-items: flex-start; gap: .6rem; padding: .3rem 1rem; }
.tick { flex: none; width: 1.55rem; height: 1.55rem; margin-top: .15rem; border-radius: .45rem; border: 2px solid var(--ink-3); display: grid; place-items: center; color: transparent; }
.tick .i { width: 1rem; height: 1rem; stroke-width: 3; }
.task.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.task-text { flex: 1; cursor: pointer; padding-top: .1rem; overflow-wrap: anywhere; }
.kept-tasks { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-3); font-size: .85rem; }
.kept-tasks .i { width: .95rem; height: .95rem; }
.task.done .task-text { color: var(--ink-3); text-decoration: line-through; }

/* ---------- trash ---------- */
.trash-row { display: flex; align-items: center; gap: .25rem; margin: 0 .75rem .5rem; padding: .5rem .4rem .5rem .4rem; padding-inline-start: 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.trash-text { flex: 1; min-width: 0; }
.trash-text h3 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-text p { margin: 0; font-size: .8rem; }

/* ---------- settings: each section takes the next colour family ---------- */
.settings { display: flex; flex-direction: column; gap: .9rem; padding: 0 .75rem 1rem; }
.set-card { border-radius: var(--radius); overflow: hidden; background: color-mix(in srgb, var(--fam) 5%, var(--surface)); border: 1px solid var(--line); }
.set-card h2 { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .75rem 1rem; font-size: 1.05rem; background: var(--fam); color: #fff; }
[data-theme="dark"] .set-card h2 { color: #0b1220; }
.set-card h2 .i { width: 1.2rem; height: 1.2rem; }
.set-card > :not(h2) { margin-inline: 1rem; }
.set-card > p { margin-block: .7rem; color: var(--ink-2); }
.set-card > p.muted { color: var(--ink-3); font-size: .9rem; }
.set-card > #cloudBlock { margin-block: .8rem; }
#cloudBlock p { margin: .5rem 0; color: var(--ink-2); }
#cloudBlock p.muted { color: var(--ink-3); font-size: .9rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row > span { font-weight: 500; }
.font-pick { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.7rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 1.1rem; }
.font-pick .i { width: 1rem; height: 1rem; color: var(--ink-3); }
.seg { display: inline-flex; background: var(--bg-2); border-radius: 999px; padding: .2rem; gap: .15rem; flex-wrap: wrap; }
.seg button { min-height: 2.3rem; padding: 0 .9rem; border-radius: 999px; color: var(--ink-2); font-size: .9rem; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--brand); font-weight: 700; box-shadow: var(--shadow); }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .8rem; }
.cloud-status { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cloud-status > .i { width: 1.8rem; height: 1.8rem; color: var(--ok); }
.cloud-status.state-syncing > .i, .cloud-status.state-idle > .i { color: var(--brand); }
.cloud-status.state-offline > .i, .cloud-status.state-error > .i { color: var(--ink-3); }
.cloud-status.state-reauth > .i { color: var(--danger); }
.cloud-status p { margin: 0 !important; }
.cloud-account { font-weight: 700; color: var(--ink) !important; text-align: start; overflow-wrap: anywhere; }
.about .rights, .licenses .rights { margin-block: .9rem 1rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; text-align: center; white-space: pre-line; }

/* ---------- editor ---------- */
/* a note's own background (the page behind its title and text; the toolbar stays as it is), in each theme's version.
   It is painted as an image over the theme's colour, so the browser, which copies background colours onto text
   it moves between lines, copies only the theme's colour (never kept) and not the note's. */
.editor.has-nbg, .editor.has-nbg .ed-top { background: linear-gradient(var(--nbg), var(--nbg)) var(--bg); }
:root[data-theme="dark"] .editor.has-nbg, :root[data-theme="dark"] .editor.has-nbg .ed-top { background: linear-gradient(var(--nbg-d), var(--nbg-d)) var(--bg); }
.editor {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg);
  visibility: hidden; opacity: 0; transform: translateX(-1.5rem); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.editor.open { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
:root[dir="ltr"] body:not(.wide) .editor:not(.open) { transform: translateX(1.5rem); }   /* it comes in from the side it goes on to */
.ed-empty { display: none; }
.ed-top { display: flex; align-items: center; gap: .3rem; min-height: 3.5rem; padding: calc(env(safe-area-inset-top) + .3rem) .4rem .3rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.nb-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 45vw; min-height: 2.25rem; padding: 0 .75rem; border-radius: 999px; background: color-mix(in srgb, var(--fam) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fam) 35%, transparent); font-size: .9rem; font-weight: 500; }
.nb-chip #edNotebookName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-chip .i { width: 1rem; height: 1rem; color: var(--ink-3); }
.ed-saved { flex: 1; color: var(--ink-3); font-size: .8rem; text-align: end; padding-inline: .5rem; }
.ed-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--ink); font-size: .9rem; }
.ed-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ed-page { max-width: 72rem; margin: 0 auto; padding: .75rem 1.15rem 6rem; font-family: var(--note-font); font-size: var(--note-size); }
.ed-title {
  display: block; width: 100%; resize: none; overflow: hidden; border: 0; outline: 0; background: transparent; padding: .3rem 0;
  font-family: var(--note-font); font-size: var(--title-size, 1.5em); font-weight: 700; line-height: 1.4; color: var(--ink);
}
.ed-title::placeholder { color: var(--ink-3); font-weight: 500; }
.ed-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .7rem; font-family: var(--ui); }
.ed-tags .tag { font-size: .85rem; }
.ed-tags .tag.add { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3); padding: .1rem .65rem; }
.ed-tags .tag.add .i { width: .95rem; height: .95rem; }
.ed-templates { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0; font-family: var(--ui); font-size: 1rem; }
.ed-templates .muted { width: 100%; font-size: .85rem; }
.ed-meta { margin: 2rem 0 0; color: var(--ink-3); font-family: var(--ui); font-size: .8rem; text-align: center; }

/* the note body */
.ed-body { position: relative; outline: none; min-height: 40vh; line-height: var(--note-lh); overflow-wrap: anywhere; caret-color: var(--brand); }
.ed-body.is-empty::before { content: attr(data-placeholder); position: absolute; inset-inline-start: 0; top: 0; color: var(--ink-3); pointer-events: none; }
.ed-body > :first-child { margin-top: 0; }
.ed-body p { margin: 0 0 var(--note-pgap); }
.ed-body h1, .ed-body h2, .ed-body h3 { line-height: 1.4; margin: .9em 0 .35em; }
.ed-body h1 { font-size: 1.6em; }
.ed-body h2 { font-size: 1.3em; color: var(--brand); }
.ed-body h3 { font-size: 1.1em; }
/* Each item indents on its own starting side (its dir="auto" decides), so an English item in an Arabic note
   keeps its bullet beside its text instead of across the page. */
.ed-body ul, .ed-body ol { margin: .2em 0 .5em; padding: 0; }
.ed-body li { margin: var(--note-ligap) 0; margin-inline-start: 1.6em; }
.ed-body ol > li:dir(rtl) { list-style-type: arabic-indic; }
:root[data-digits="latn"] .ed-body ol > li:dir(rtl) { list-style-type: decimal; }
.ed-body ul.checklist { list-style: none; }
.ed-body ul.checklist > li { position: relative; margin-inline-start: 0; padding-inline-start: 2.05em; min-height: max(1.35em, calc(var(--note-lh) * 1em - .2em)); }
.ed-body ul.checklist > li::before {
  content: ''; position: absolute; inset-inline-start: .2em; top: calc((var(--note-lh) * 1em - 1.15em) / 2 - .1em); width: 1.15em; height: 1.15em; border: 2px solid var(--ink-3);
  border-radius: .32em; background: var(--surface); cursor: pointer;
}
.ed-body ul.checklist > li[data-checked="true"]::before { background: var(--ok); border-color: var(--ok); }
.ed-body ul.checklist > li[data-checked="true"]::after {
  content: ''; position: absolute; inset-inline-start: .62em; top: calc((var(--note-lh) * 1em - 1.15em) / 2 + .1em); width: .3em; height: .6em;
  border: solid #fff; border-width: 0 .13em .13em 0; transform: rotate(45deg); pointer-events: none;
}
.ed-body ul.checklist > li[data-checked="true"] { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.ed-body blockquote { margin: .6em 0; padding: .35em 1em; border-inline-start: 4px solid var(--brand); background: var(--brand-soft);
  border-start-end-radius: 10px; border-end-end-radius: 10px; color: var(--ink-2); }
/* Enter in a quote or a code block starts another one right under it: they read as one block */
.ed-body blockquote + blockquote { margin-top: 0; padding-top: .1em; border-start-end-radius: 0; }
.ed-body blockquote:has(+ blockquote) { margin-bottom: 0; padding-bottom: .1em; border-end-end-radius: 0; }
.ed-body pre { margin: .6em 0; padding: .8em 1em; border-radius: 10px; background: var(--bg-2); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .88em; white-space: pre-wrap; text-align: start; }
.ed-body pre + pre { margin-top: 0; padding-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; }
.ed-body pre:has(+ pre) { margin-bottom: 0; padding-bottom: .1em; border-end-start-radius: 0; border-end-end-radius: 0; }
.ed-body code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--bg-2); padding: .05em .3em; border-radius: 5px; }
.ed-body pre code { background: none; padding: 0; }
.ed-body a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.ed-body img { display: block; max-width: 100%; height: auto; margin: .6em 0; border-radius: 12px; background: var(--bg-2); }
.ed-body img.is-missing { min-height: 4rem; min-width: 8rem; border: 1px dashed var(--line-2); }
.ed-body hr { border: 0; border-top: 2px solid var(--line-2); margin: 1.2em 0; }
.ed-body .al-center { text-align: center; }
.ed-body table { border-collapse: collapse; width: 100%; table-layout: fixed; word-break: break-word; margin: .6em 0; font-size: .95em; }
.ed-body th, .ed-body td { border: 1px solid var(--line-2); padding: .35em .55em; text-align: start; }
.ed-body th { background: var(--brand); color: var(--brand-ink); }
/* a header cell given a background of its own takes the page's text colour, to read on it */
.ed-body th[style*="background-color"] { color: var(--ink); }
.ed-body tr:nth-child(even) td { background: var(--bg-2); }
mark.hl-yellow, .ed-body mark { background: var(--hl-yellow); color: inherit; border-radius: 3px; padding: 0 .08em; }
mark.hl-green { background: var(--hl-green); }
mark.hl-blue { background: var(--hl-blue); }
mark.hl-pink { background: var(--hl-pink); }
mark.hl-orange { background: var(--hl-orange); }

/* the toolbar sits under the text, above the keyboard; the panels open above it, in place of the keyboard */
.toolbar { display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-up); padding-bottom: env(safe-area-inset-bottom); }
.tb-main { display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: none; padding: .3rem .4rem; }
.tb-main::-webkit-scrollbar { display: none; }
.tb { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px; color: var(--ink-2); }
.tb .i { width: 1.3rem; height: 1.3rem; }
.tb[aria-pressed="true"], .tb[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
.tb.tb-panel { width: auto; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .7rem; color: var(--brand); font-size: .88rem; font-weight: 700; }
.color-input { position: absolute; inset-inline-start: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.panel { display: flex; flex-direction: column; max-height: min(58vh, 30rem); border-bottom: 1px solid var(--line); font-family: var(--ui); }
.toolbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the panel acting on the title: what does not apply to a title is greyed out */
.ptarget { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .25rem .75rem; background: var(--brand-soft); color: var(--brand); font-size: .8rem; line-height: 1.5; }
.ptarget .i { width: 1.05rem; height: 1.05rem; flex: none; }
.panel button:disabled { opacity: .3; cursor: default; }
.panel-head { display: flex; align-items: center; gap: .3rem; padding: .25rem .4rem; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ptabs { flex: 1; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: none; min-height: 2.2rem; padding: 0 .9rem; border-radius: 999px; color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.ptab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
:root[lang="en"] .ptabs { gap: .15rem; }   /* longer words: all five in sight on a 360-pixel phone */
:root[lang="en"] .ptab { padding-inline: .4rem; font-size: .86rem; }
.ppage { overflow-y: auto; overscroll-behavior: contain; padding: .5rem .6rem .7rem; display: grid; gap: .45rem; align-content: start; }
.prow { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.prow[hidden] { display: none; }
.plabel { flex: none; width: 4.4rem; color: var(--ink-3); font-size: .8rem; }
/* on a phone each row's name sits above it, so the whole width is for the buttons */
@media (max-width: 480px) {
  .prow { flex-direction: column; align-items: stretch; gap: .1rem; }
  .plabel { width: auto; font-size: .75rem; }
}
.pitems { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.pitems::-webkit-scrollbar { display: none; }
.prow.wrap .pitems { flex-wrap: wrap; overflow: visible; }
.pchip { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.4rem; padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: .9rem; }
.pchip .i { width: 1.1rem; height: 1.1rem; }
.pchip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.pchip.glyph { min-width: 2.6rem; padding: 0 .4rem; font-family: var(--note-font); font-size: 1.3rem; line-height: 1; }
/* the size control, as in Word and Excel: a step down, the size (typed or shown), a step up; then the sizes */
.size-box { flex: 1; min-width: 0; display: grid; gap: .45rem; }
.size-ctl { display: flex; align-items: center; gap: .4rem; }
.size-ctl .size-step { border: 1px solid var(--line-2); border-radius: 50%; width: 2.6rem; height: 2.6rem; color: var(--ink); }
.size-ctl .size-step:active { background: var(--brand-soft); border-color: var(--brand); }
.size-field {
  width: 5.2rem; height: 2.6rem; padding: 0 .4rem; border: 1.5px solid var(--brand); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: 700 1.2rem/1 var(--ui); text-align: center; font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text;
}
.size-field::placeholder { color: var(--ink-3); font-weight: 500; }
.size-field:focus { outline: 0; box-shadow: 0 0 0 3px var(--brand-soft); }
.size-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.45rem, 1fr)); gap: .3rem; }
.pchip.size-pt { flex-direction: column; gap: 0; min-width: 0; min-height: 2.35rem; padding: 0 .15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.size-pt small { font-size: .56rem; font-weight: 500; line-height: 1.1; color: var(--ink-3); }
.size-pt.plain { border-style: dashed; }
.size-pt[aria-pressed="true"] small { color: var(--brand); }
/* all eleven choices in sight at once on a phone: three to a row */
.font-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .35rem; }
.font-chip { display: grid; gap: 0; min-width: 0; text-align: start; padding: .28rem .55rem .32rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.font-chip .fc-name { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.font-chip .fc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* «الافتراضي» beside the app's font, «الأصلي» beside Naskh when another font is the app's: in the interface font. */
.font-chip .fc-tag { flex: none; font-family: var(--ui); font-size: .6rem; font-weight: 700; line-height: 1.6; padding: 0 .4rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.font-chip[aria-pressed="true"] .fc-tag { background: var(--surface); }
.font-chip .fc-sample { font-size: .74rem; line-height: 1.5; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.color-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 36rem; }
.color-grid.cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 30rem; }
.prow.colors .color-grid { flex: 1; min-width: 0; }
/* the colour where the writer is (text colour, background, the note's own) shows as chosen */
.csw[aria-pressed="true"] { position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
/* where «لون الخلفية» goes: behind the text, across the line, or the whole note */
.scope-chip[aria-checked="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.csw { display: block; height: 2.1rem; min-width: 0; border-radius: 7px; background: var(--sw); border: 1px solid rgba(0, 0, 0, .14); }
.pitems .csw { width: 2.4rem; flex: none; }
.csw:active { transform: scale(.92); }
[data-theme="dark"] .csw { border-color: rgba(255, 255, 255, .18); }
.table-grid { display: grid; grid-template-columns: repeat(6, 1.9rem); gap: 3px; }
.tg-cell { width: 1.9rem; height: 1.9rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); }
.tg-cell.on { background: var(--brand-soft); border-color: var(--brand); }
.tg-size { font-size: .85rem; min-width: 3rem; }

/* what the formatting panel writes into notes */
/* a line's own background runs across the line, a little beyond its text */
.ed-body :is(p, h1, h2, h3, li)[style*="background-color"] { padding: .1em .5em; border-radius: 6px; }
.ed-body .ind-1 { margin-inline-start: 1.5em; } .ed-body .ind-2 { margin-inline-start: 3em; } .ed-body .ind-3 { margin-inline-start: 4.5em; }
.ed-body .ind-4 { margin-inline-start: 6em; } .ed-body .ind-5 { margin-inline-start: 7.5em; } .ed-body .ind-6 { margin-inline-start: 9em; }
.ed-body sup, .ed-body sub { font-size: .72em; line-height: 0; }
.ed-body [style*="font-size: x-small"] { font-size: calc(var(--note-size) * .75) !important; }
.ed-body [style*="font-size: small"] { font-size: calc(var(--note-size) * .875) !important; }
.ed-body [style*="font-size: medium"] { font-size: var(--note-size) !important; }
.ed-body [style*="font-size: large"] { font-size: calc(var(--note-size) * 1.2) !important; }
.ed-body [style*="font-size: x-large"] { font-size: calc(var(--note-size) * 1.45) !important; }
.ed-body [style*="font-size: xx-large"] { font-size: calc(var(--note-size) * 1.8) !important; }
.ed-body [style*="font-size: xxx-large"], .ed-body [style*="font-size: -webkit-xxx-large"] { font-size: calc(var(--note-size) * 2.3) !important; }
.ed-body span[style*="background-color"] { border-radius: 3px; padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- sheets, dialogs, toasts ---------- */
/* The dim area takes every touch (no panning behind it), so a touch on it always reaches the page and closes the sheet. */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 15, 28, .45); opacity: 0; transition: opacity .2s; touch-action: none; }
.scrim.open { opacity: 1; }
/* The head (grip, title, close) stays put and is the handle for pulling the sheet down; the body scrolls. */
.sheet {
  position: fixed; z-index: 41; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 34rem; max-height: 82dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  padding-bottom: calc(env(safe-area-inset-bottom) + .8rem); transform: translateY(100%); transition: transform .22s ease;
}
.sheet.sheet-wide { max-width: 52rem; }
.sheet.open { transform: none; }
.sheet-head {
  position: relative; flex: none; display: flex; align-items: center; gap: .4rem; min-height: 3.9rem;
  padding: 1.25rem .45rem .3rem; padding-inline-start: 1.2rem; touch-action: none; user-select: none; -webkit-user-select: none;
}
/* The grip is pulled to close the sheet, and a tap on it closes it too; its touch area is wider than the bar. */
.sheet-grip { position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: 5rem; height: 1.25rem; display: grid; place-items: center; border-radius: 0 0 .9rem .9rem; }
.sheet-grip::before { content: ''; width: 2.6rem; height: .3rem; border-radius: 999px; background: var(--line-2); }
.sheet-grip:active::before { background: var(--ink-3); }
.sheet-title {
  flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; color: var(--ink-2); font-weight: 700; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* A filled circle, so it reads as a button and not as a mark beside the list; the full 44px stays touchable. */
.sheet-close { margin-inline-start: auto; padding: .2rem; color: var(--ink-2); background: var(--line); background-clip: content-box; }
.sheet-close:active { background: var(--line-2); background-clip: content-box; }
.sheet-close .i { width: 1.2rem; height: 1.2rem; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet-items { display: flex; flex-direction: column; }
.sheet-item { display: flex; align-items: center; gap: .9rem; min-height: 3.2rem; padding: .4rem 1.3rem; text-align: start; width: 100%; }
.sheet-item:active { background: var(--bg-2); }
.sheet-item > .i { color: var(--ink-2); }
.sheet-item.danger, .sheet-item.danger > .i { color: var(--danger); }
.sheet-item.active { color: var(--brand); font-weight: 700; }
.si-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.si-label { overflow-wrap: anywhere; }
.si-sub { color: var(--ink-3); font-size: .82rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-check { color: var(--brand); }
.sheet .nb-dot { width: .9rem; height: .9rem; }
.tp-new { display: flex; gap: .5rem; padding: 0 1.2rem .6rem; }
.tp-new input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); outline: 0; }
.tp-new input:focus { border-color: var(--brand); }
.tp-list { display: flex; flex-direction: column; padding: 0 .6rem; }
.tp-item { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: 0 .7rem; border-radius: 12px; text-align: start; }
.tp-item:active { background: var(--bg-2); }
.tp-box { width: 1.4rem; height: 1.4rem; border-radius: .4rem; border: 2px solid var(--ink-3); display: grid; place-items: center; color: transparent; flex: none; }
.tp-box .i { width: .95rem; height: .95rem; stroke-width: 3; }
.tp-item[aria-checked="true"] .tp-box { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tp-list > p { padding: 0 .7rem; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; padding: .4rem 1.3rem 1rem; }
.swatch { aspect-ratio: 1; border-radius: 50%; background: var(--fam); border: 3px solid transparent; }
.swatch.on { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--surface); }
/* Note info reads from the right: the labels make one column on the right and each value starts right beside its
   label, every line of it aligned to the right (a value in Latin letters is isolated, so it cannot turn the line). */
.info { display: grid; grid-template-columns: max-content minmax(0, 1fr); padding: 0 1.3rem .5rem; font-size: .92rem; text-align: start; }
.info-row { display: contents; }
.info-row > span { padding: .65rem 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.info-row > .ik { color: var(--ink-3); padding-inline-end: 1.6rem; }
.info-row > .iv { color: var(--ink); overflow-wrap: anywhere; }
.licenses { padding: 0 1.2rem; }
.licenses details { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.licenses summary { cursor: pointer; font-weight: 500; }
.licenses pre { white-space: pre-wrap; font-size: .75rem; max-height: 40vh; overflow: auto; background: var(--bg-2); padding: .8rem; border-radius: 10px; text-align: left; }

.dialog { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(8, 15, 28, .5); }
.dialog-card { width: min(26rem, 100%); background: var(--surface); border-radius: 22px; padding: 1.3rem 1.3rem 1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.dialog-card h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.dialog-card p { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.7; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field > span { font-size: .85rem; color: var(--ink-3); }
.field > span:empty { display: none; }
.field input { min-height: 2.9rem; padding: 0 .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); outline: 0; }
.field input:focus { border-color: var(--brand); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }
/* Left to right: the confirming button at the far right, cancelling before it, the extra link at the far left. */
:root[dir="ltr"] .dialog-actions { flex-direction: row-reverse; justify-content: flex-start; }

.toast {
  position: fixed; z-index: 60; inset-inline: 1rem; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 1rem); margin-inline: auto; max-width: 30rem;
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 14px; background: #1b2436; color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(.6rem); transition: opacity .2s, transform .2s;
}
[data-theme="dark"] .toast { background: #e9eef6; color: #0b1220; }
.toast.show { opacity: 1; transform: none; }
/* A message never stands in the way: touches pass through it to whatever is under it, except its own button. */
.toast { pointer-events: none; }
.toast button { pointer-events: auto; }
.toast span { flex: 1; }
.toast button { color: #8fb3e6; font-weight: 700; padding: .2rem .4rem; }
[data-theme="dark"] .toast button { color: #0f3460; }
body.editing:not(.wide) .toast { bottom: calc(env(safe-area-inset-bottom) + 4.5rem); }

.fatal { padding: 3rem 1.5rem; text-align: center; }
.fatal h1 { color: var(--brand); }

/* ---------- wide screens: side rail, list, editor side by side ---------- */
body.wide .app { display: grid; grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; }
body.wide .rail {
  position: static; height: 100dvh; flex-direction: column; align-items: stretch; gap: .2rem; padding: 1rem .7rem;
  border-top: 0; border-inline-end: 1px solid var(--line); background: var(--bg-2);
}
body.wide .rail-brand { display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem 1.2rem; font-size: 1.35rem; font-weight: 700; color: var(--brand); }
body.wide .rail-gap { display: block; flex: 1; }
body.wide .rail .nav.nav-wide { display: flex; }
body.wide .nav { flex: none; flex-direction: row; justify-content: flex-start; gap: .7rem; min-height: 2.9rem; padding: 0 .8rem; border-radius: 12px; font-size: .95rem; color: var(--ink-2); }
body.wide .nav .i { width: 1.3rem; height: 1.3rem; padding: 0; background: none; }
body.wide .nav[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
body.wide .pane { height: 100dvh; overflow-y: auto; padding-bottom: 6rem; border-inline-end: 1px solid var(--line); }
body.wide .topbar .icon-btn[data-act="menu"] { display: none; }
body.wide .topbar #paneLogo { display: none; }
body.wide .pane-title.brand { color: var(--ink); font-size: 1.25rem; }
body.wide .editor { position: relative; inset: auto; z-index: auto; height: 100dvh; visibility: visible; opacity: 1; transform: none; transition: none; }
body.wide .editor:not(.open) > :not(.ed-empty) { display: none; }
body.wide .editor:not(.open) .ed-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--ink-3); text-align: center; padding: 2rem; }
body.wide .ed-top [data-act="ed-back"] { display: none; }
body.wide .ed-page { padding-inline: clamp(1.5rem, 4vw, 4rem); }
body.wide .fab { position: fixed; bottom: 1.5rem; inset-inline-end: auto; inset-inline-start: calc(var(--rail-w) + 1.25rem); }
body.wide .toast { bottom: 1.5rem; }
body.wide .nb-chip { max-width: 22rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Settings: a two-line sample of the chosen line spacing, in the note's own font and size */
.spacing-sample { margin: .2rem 1rem .6rem; padding: .55rem .9rem; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line-2);
  font-family: var(--note-font); font-size: var(--note-size); line-height: var(--note-lh); color: var(--ink); }
.spacing-sample p { margin: 0 0 var(--note-pgap); }
.spacing-sample p:last-child { margin-bottom: 0; }
.spacing-sample .sample-title { margin: 0 0 .15em; font-size: var(--title-size); font-weight: 700; line-height: 1.4; }
/* Settings: a size in points with a step down and a step up */
.stepper { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem; border-radius: 999px; background: var(--bg-2); }
.stepper .icon-btn { width: 2.4rem; height: 2.4rem; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.stepper output { min-width: 2.8rem; text-align: center; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* Settings: a field to try the caret's height in, in the note's own font and size */
.caret-try { display: block; width: calc(100% - 2rem); margin-block: .1rem .3rem; padding: .3rem .9rem; border-radius: 12px; border: 1px dashed var(--line-2);
  background: var(--surface); color: var(--ink); font-family: var(--note-font); font-size: var(--note-size); line-height: var(--note-lh);
  caret-color: var(--brand); outline: 0; }
.caret-try:focus { border-style: solid; border-color: var(--brand); }
/* The list's look in a sheet (the «العرض» button above the list) */
.list-look { padding: 0 1rem .75rem; }
.list-look .set-row > span { font-size: .95rem; }
#set-listCols { border-bottom: 0; padding-bottom: .15rem; }
.look-rows .look-hint { margin: 0; padding-bottom: .65rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
.seg.many button { padding: 0 .6rem; font-size: .84rem; }
/* the app's colour (Settings): a round swatch per family, a tick on the one chosen */
.set-accent { display: block; }
.accents { display: grid; grid-template-columns: repeat(6, minmax(0, 2.6rem)); justify-content: space-between; gap: .75rem .4rem; margin-top: .65rem; }
.acc { aspect-ratio: 1; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; }
:root[data-theme="dark"] .acc { background: var(--acc-d); color: #0b1220; }
.acc .i { width: 1.15rem; height: 1.15rem; visibility: hidden; }
.acc[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc); }
:root[data-theme="dark"] .acc[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc-d); }
.acc[aria-checked="true"] .i { visibility: visible; }
.lh-btns { display: flex; align-items: center; gap: .8rem; }
/* The whole note selected («تحديد الكل» with the title): the title drawn as selected with the text */
.ed-page.whole-sel .ed-title { background: var(--sel); border-radius: 6px; }
.ed-page.whole-sel .ed-body ::selection { background: var(--sel); }
/* The formatting panel: what a size chosen does («لكل الملاحظات» or «لهذا النص فقط»), and in words under it */
.size-hint { margin: -.2rem 0 0; padding-inline-start: 4.9rem; font-size: .76rem; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 480px) {
  .size-hint { padding-inline-start: 0; }
  .prow.size-scope { flex-direction: row; align-items: center; gap: .5rem; }   /* its name beside the two choices: a line less */
}
.set-card .inline-icon { width: 1rem; height: 1rem; vertical-align: -.15em; margin-inline-end: .3rem; color: var(--ink-3); }

/* Dialogs: a mistake shown in place, tools that act without closing, and the recovery key */
.dialog-error { margin: -.3rem 0 .8rem; color: var(--danger); font-size: .9rem; font-weight: 500; }
.dialog-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
.dialog-tools .btn { min-height: 2.4rem; padding: 0 .9rem; font-size: .9rem; }
.dialog-actions .btn.link { margin-inline-end: auto; padding-inline: .4rem; color: var(--brand); font-size: .9rem; }
/* Dialogs that offer ways to choose from (how the lock opens): one big button each */
.dialog-choices { display: grid; gap: .55rem; margin: 0 0 .9rem; }
.dialog-choice { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface); text-align: start; }
.dialog-choice:active, .dialog-choice:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.dialog-choice .i { width: 1.8rem; height: 1.8rem; color: var(--brand); }
.dialog-choice b { display: block; font-size: 1.02rem; color: var(--ink); }
.dialog-choice small { display: block; margin-top: .1rem; color: var(--ink-3); font-size: .85rem; line-height: 1.5; }
.recovery-key { margin: 0 0 1rem; padding: .8rem .6rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1rem; font-weight: 700; letter-spacing: 0;
  text-align: center; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; color: var(--ink); }

/* ---------- version 1.0.12 ---------- */
textarea { resize: none; }   /* no field grows or shrinks from a corner dragged */
.theme-btn { color: var(--brand); }   /* the day and night button, at the end of the top bar */

/* tabs: the notes open, under the note's top bar (with two or more) */
.ed-tabs { display: flex; align-items: flex-end; gap: .2rem; overflow-x: auto; scrollbar-width: none; padding: .3rem .4rem 0; border-bottom: 1px solid var(--line); background: var(--bg-2); font-family: var(--ui); }
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-tab { flex: none; display: flex; align-items: center; max-width: 14rem; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; color: var(--ink-2); }
.ed-tab.is-on { background: var(--bg); border-color: var(--line); color: var(--ink); font-weight: 700; margin-bottom: -1px; }
.tab-go { display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 2.75rem; padding-inline: .75rem .1rem; font-size: .9rem; }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-x, .tab-new { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--ink-3); border-radius: 12px; }
.tab-x .i { width: 1rem; height: 1rem; }
.tab-new { color: var(--brand); }

/* the steps panel: every step, the newest first; the one in use marked, those undone faded */
.steps { display: grid; gap: .15rem; }
.step { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.9rem; padding: .3rem .7rem; border-radius: 12px; text-align: start; color: var(--ink); }
.step .i { flex: none; width: 1.15rem; height: 1.15rem; color: var(--ink-3); }
.st-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.st-name { flex: none; font-size: .92rem; font-weight: 500; }
.st-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-family: var(--note-font); font-size: .9rem; }
.st-time { flex: none; color: var(--ink-3); font-size: .78rem; }
.step.is-now { background: var(--brand-soft); color: var(--brand); }
.step.is-now .i { color: var(--brand); }
.step.is-undone { opacity: .55; }
.step:active { background: var(--bg-2); }

/* a picture touched in the note: a frame around it, and its two buttons on it */
.ed-page { position: relative; }
.img-frame { position: absolute; z-index: 5; pointer-events: none; outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.img-tools { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .2rem; padding: .2rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); pointer-events: auto; font-family: var(--ui); white-space: nowrap; }
.img-tool { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .95rem; border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 500; }
.img-tool .i { width: 1.15rem; height: 1.15rem; }
.img-tool[data-img="delete"] { color: var(--danger); }
.img-tool:disabled { opacity: .4; }

/* the crop page */
.crop { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0b0f16; color: #f2f5fa; font-family: var(--ui); }
.crop-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: calc(env(safe-area-inset-top) + .4rem) .6rem .4rem; }
.crop-bar h2 { margin: 0; font-size: 1.05rem; }
.crop-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; color: #f2f5fa; font-weight: 500; }
.crop-btn.primary { background: #f2f5fa; color: #0b1220; font-weight: 700; }
.crop-btn .i { width: 1.15rem; height: 1.15rem; }
.crop-stage { position: relative; overflow: hidden; touch-action: none; }
.crop-img { position: absolute; }
.crop-box { position: absolute; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); outline: 2px solid #fff; cursor: move; touch-action: none; }
.crop-h { position: absolute; width: 2.75rem; height: 2.75rem; margin: -1.375rem; }
.crop-h::before { content: ''; position: absolute; inset: 1rem; border-radius: 3px; background: #fff; }
.h-tl { left: 0; top: 0; cursor: nwse-resize; }
.h-t { left: 50%; top: 0; cursor: ns-resize; }
.h-tr { left: 100%; top: 0; cursor: nesw-resize; }
.h-r { left: 100%; top: 50%; cursor: ew-resize; }
.h-br { left: 100%; top: 100%; cursor: nwse-resize; }
.h-b { left: 50%; top: 100%; cursor: ns-resize; }
.h-bl { left: 0; top: 100%; cursor: nesw-resize; }
.h-l { left: 0; top: 50%; cursor: ew-resize; }
.crop-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .5rem .6rem calc(env(safe-area-inset-bottom) + .6rem); }
.crop-shapes { display: flex; flex-wrap: wrap; gap: .3rem; }
.crop-shape { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #f2f5fa; font-size: .9rem; }
.crop-shape[aria-checked="true"] { background: #f2f5fa; color: #0b1220; border-color: transparent; font-weight: 700; }

/* a password and its eye */
.pw-wrap { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.pw-wrap:focus-within { border-color: var(--brand); }
.field .pw-wrap input { flex: 1; min-width: 0; border: 0; background: transparent; }
.pw-eye { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--ink-3); }
.pw-eye .i { width: 1.2rem; height: 1.2rem; }
.pw-eye[aria-pressed="true"] { color: var(--brand); }

/* «وضعية العرض: حاسب» on a narrow screen: the sections keep to their icons */
body.wide.squeezed .app { grid-template-columns: 3.75rem minmax(0, 2fr) minmax(0, 3fr); }
body.wide.squeezed .rail { padding: .6rem .3rem; }
body.wide.squeezed .rail-brand { justify-content: center; padding: .3rem 0 1rem; }
body.wide.squeezed .rail-brand span, body.wide.squeezed .nav span { display: none; }
body.wide.squeezed .nav { justify-content: center; padding: 0; }
body.wide.squeezed .fab { inset-inline-start: calc(3.75rem + 1rem); }
body.wide.squeezed .ed-page { padding-inline: 1rem; }

/* ---------- version 1.0.13: the server version (the account, the AI connector) ---------- */
.copy-box { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; }
.copy-box code { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .85rem; padding: .25rem .5rem; border-radius: .4rem; background: var(--bg-2); border: 1px solid var(--line); overflow-wrap: anywhere; user-select: all; }
.copy-box .icon-btn { flex: none; min-width: 2.75rem; min-height: 2.75rem; }