/* وصلها 4 — components. One visual language for every page (design doc §4). */

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.5em; height: 1.5em; }
/* Directional icons follow the reading direction; logos, media and digits never flip. */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: transparent; color: var(--text);
  font-weight: 600; font-size: var(--text-md); line-height: var(--leading-tight); text-decoration: none; white-space: nowrap;
  transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn:active { background: var(--surface-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-primary:active { background: var(--accent); }
.btn-quiet { border-color: transparent; color: var(--accent); padding-inline: var(--space-3); }
.btn-quiet:hover { background: var(--accent-soft); color: var(--accent-strong); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-icon { width: var(--control-height); padding: 0; }
.btn-sm { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn[aria-busy="true"]::after { content: ''; width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
  color: var(--text-2); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-tight); text-decoration: none;
}
.chip:hover { border-color: var(--control); color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.chip[aria-pressed="true"]::before { content: ''; width: .55em; height: .3em; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-.08em); }
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--text-xs); line-height: var(--leading-tight); white-space: nowrap; }

/* ---------- Surfaces ---------- */
.card { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-pad); }
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out); }
.card-link:hover { border-color: var(--line-strong); background: var(--surface-2); color: inherit; }
.paper { background: var(--grain), var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sheet); }

/* Subject ribbon: the bookmark notch that identifies every subject. */
.ribbon { --ribbon: var(--subject-default); }
.ribbon::before {
  content: ''; position: absolute; inset-block-start: -1px; inset-inline-start: var(--card-pad);
  width: 10px; height: var(--space-5); background: var(--ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
/* Room for the notch above the first line, whatever the card padding is. */
.card.ribbon, .resume.ribbon { padding-block-start: var(--space-6); }
[data-subject="calculus"] { --ribbon: var(--subject-calculus); }
[data-subject="physics"] { --ribbon: var(--subject-physics); }
[data-subject="logic"] { --ribbon: var(--subject-logic); }
[data-subject="computing"] { --ribbon: var(--subject-computing); }
[data-subject="writing"] { --ribbon: var(--subject-writing); }
[data-subject="precalculus"] { --ribbon: var(--subject-precalculus); }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--font-display); font-weight: 900; font-size: var(--text-display); line-height: 1.15; letter-spacing: 0; }
.numeral { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.kicker { display: block; color: var(--accent); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-ui); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.en-sub { color: var(--text-3); font-size: var(--text-sm); line-height: var(--leading-ui); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--stack); }
.section-head h2 { font-size: var(--text-xl); }
.section-head a { font-size: var(--text-sm); }

/* ---------- Progress meter: opened ≠ read ≠ correct; text always present ---------- */
.meter { display: grid; gap: var(--space-1); }
.meter-label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-ui); color: var(--text-2); }
.meter-track { height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--ribbon, var(--accent)); transition: width var(--enter) var(--ease-out); }
.meter-fill.is-correct { background: var(--success); }
.meters { display: grid; gap: var(--space-3); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; min-height: var(--control-height); padding: 0 var(--space-4); border: 0; background: none;
  color: var(--text-2); font-size: var(--text-md); font-weight: 600; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ''; position: absolute; inset-inline: var(--space-3); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tab-count { display: inline-block; min-width: 24px; margin-inline-start: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-ui); text-align: center; }
.tab[aria-selected="true"] .tab-count { background: var(--accent-soft); color: var(--text); }

/* ---------- Fields ---------- */
.field { display: grid; gap: var(--space-2); }
.field label, .field-label { font-weight: 600; font-size: var(--text-md); line-height: var(--leading-ui); }
.field-hint { color: var(--text-2); font-size: var(--text-sm); line-height: var(--leading-ui); }
.field-error { display: flex; gap: var(--space-2); align-items: start; color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-ui); }
.input, .select, .textarea {
  width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface-1); color: var(--text); font-size: var(--text-md); line-height: var(--leading-ui);
}
.textarea { min-height: 120px; line-height: var(--leading-body); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: flex; align-items: start; gap: var(--space-3); min-height: var(--control-height); padding-block: var(--space-2); font-size: var(--text-md); line-height: var(--leading-ui); }
.check input { width: 20px; height: 20px; margin-top: .15em; accent-color: var(--accent); flex: none; }
.search-field { position: relative; }
.search-field .icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
/* Equal room on both sides: with dir="auto" an English query flips the inline sides,
   so the icon could land under the text; the browser clear button is hidden for the same reason. */
.search-field .input { padding-inline: calc(var(--space-3) + 1.25em + var(--space-2)); }
.search-field .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- Dialog ---------- */
.dialog {
  width: min(520px, calc(100vw - 2 * var(--space-4))); max-height: calc(100dvh - 2 * var(--space-5));
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sheet);
  background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-pop);
}
/* Long dialogs keep their actions in view: only the body scrolls. */
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in 200ms var(--ease-out); }
.dialog::backdrop { background: var(--scrim); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--card-pad); border-block-end: 1px solid var(--line); }
.dialog-head h2 { font-size: var(--text-lg); }
.dialog-body { flex: 1 1 auto; min-height: 0; padding: var(--card-pad); overflow: auto; display: grid; gap: var(--space-4); font-size: var(--text-md); }
.dialog-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--card-pad); border-block-start: 1px solid var(--line); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Toast & status ---------- */
.toast-region { position: fixed; inset-inline: 0; bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 90; display: grid; justify-items: center; pointer-events: none; padding-inline: var(--space-4); }
.toast { max-width: 480px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--text); color: var(--bg); font-size: var(--text-md); font-weight: 500; line-height: var(--leading-ui); box-shadow: var(--shadow-pop); animation: dialog-in 200ms var(--ease-out); }
@media (min-width: 768px) { .toast-region { bottom: var(--space-6); } }
.notice { display: flex; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface-1); color: var(--text-2); font-size: var(--text-md); line-height: var(--leading-ui); }
.notice.is-info { border-color: color-mix(in srgb, var(--info) 40%, transparent); background: var(--info-soft); color: var(--text); }
.notice.is-success { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft); color: var(--text); }
.notice.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); color: var(--text); }
.notice.is-accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }

/* ---------- Empty, loading, error states ---------- */
.state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--card-pad); text-align: center; color: var(--text-2); font-size: var(--text-md); line-height: var(--leading-ui); }
.state h2 { color: var(--text); font-size: var(--text-lg); }
.state .icon { width: 40px; height: 40px; color: var(--text-3); }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-1); }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .04), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.list-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); color: inherit; font-size: var(--text-md); line-height: var(--leading-ui); text-decoration: none; }
a.list-row:hover, button.list-row:hover { background: var(--surface-2); border-color: var(--line-strong); color: inherit; }
button.list-row { width: 100%; text-align: start; font: inherit; }
.list-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.list-row-main strong { font-weight: 600; }
.list-row-main small { font-size: var(--text-sm); }
.row-arrow { color: var(--text-3); }

/* ---------- Page entrance (first six items stagger) ---------- */
.enter > * { animation: rise var(--enter) var(--ease-out) both; }
.enter > :nth-child(2) { animation-delay: 40ms; } .enter > :nth-child(3) { animation-delay: 80ms; }
.enter > :nth-child(4) { animation-delay: 120ms; } .enter > :nth-child(5) { animation-delay: 160ms; }
.enter > :nth-child(n+6) { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Small shared pieces ---------- */
.idea-number { min-width: 28px; font-size: var(--text-lg); color: var(--text-3); text-align: center; }
.tag.is-done { color: var(--success); }
.level-total { font-size: var(--text-md); }
/* The reveal toggle sits inside the field on the left. Physical sides on purpose:
   the password is typed LTR inside an RTL page, so logical sides would disagree. */
.password-field { position: relative; }
.password-field .input { width: 100%; padding-left: 88px; }
.password-field [data-reveal] { position: absolute; top: 4px; bottom: 4px; left: 4px; min-height: 0; }
.recovery-code { padding: var(--space-4); border: 1px dashed var(--accent-line); border-radius: var(--radius-card); background: var(--surface-1); font-family: var(--font-mono); font-size: var(--text-md); text-align: center; word-break: break-all; user-select: all; }
.notice-dialog .dialog-body { gap: var(--space-3); padding: var(--space-5) var(--card-pad) var(--space-4); }
.notice-dialog p { font-size: var(--text-body); line-height: var(--leading-body); }

/* ---------- Touch screens (owner request, October 2026) ----------
   Under a finger every control reaches 44px; desktops keep the compact sizes.
   Inline links in the breadcrumb and in card headings grow their hit area
   with padding that does not move the layout. */
@media (pointer: coarse) {
  .btn-sm, .chip, .static-brand { min-height: var(--control-height); }
  .password-field [data-reveal] { top: 0; bottom: 0; }
  .breadcrumb a, .practice-lecture-head h3 a, .library-item-head h4 a, .section-head > a, .library-subject-link, .term-sources a, .static-foot a { padding-block: 12px; margin-block: -12px; }
  .toc a { display: inline-flex; align-items: center; min-height: var(--control-height); }
}
/* Pointer screens: the same standalone links reach the 24px minimum. */
@media (pointer: fine) { .breadcrumb a, .term-sources a, .static-foot a { padding-block: 2px; margin-block: -2px; } }