/* وصلها 4 — tools: المصطلحات، الملفات، جدولي، التحديثات، عن المنصة (design doc §5.10–5.12, §5.16). */

/* ---------- Shared ---------- */
.words-page .page-head, .library-page .page-head, .timetable-page .page-head, .updates-page .page-head { gap: var(--space-3); }

/* ---------- المصطلحات ---------- */
.words-remembered { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--text-sm); }
.words-remembered .icon { color: var(--success); }
.words-tools { display: grid; gap: var(--space-4); }
.words-fields { display: grid; gap: var(--space-4); }
.words-lecture:empty { display: none; }
@media (min-width: 720px) { .words-fields:has(.words-lecture:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); align-items: end; } }
.words-body { display: grid; gap: var(--space-6); }
/* «مصطلحاتي»: saved from the translation popup. */
.saved-terms { display: grid; gap: var(--space-3); }
.saved-terms-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.saved-terms-head h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.saved-terms-list { list-style: none; margin: 0; padding: 0; display: grid; }
.saved-term { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-2); padding-block: var(--space-2); border-block-start: 1px solid var(--line); }
.saved-term:first-child { border-block-start: 0; }
.saved-term-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-height: var(--control-sm); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
button.saved-term-main { cursor: pointer; }
.saved-term-en { font-weight: 600; }
.saved-term-ar { color: var(--text-2); }
.saved-term-place { grid-column: 1; }
.saved-term > .btn-icon { grid-row: 1 / span 2; grid-column: 2; }
.saved-terms-hint { font-size: var(--text-sm); }
.words-results { display: grid; gap: var(--space-4); }
.words-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.words-count { color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.words-quiz-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.words-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); }
.words-grid > li { display: grid; min-width: 0; }
.words-grid .term-card { align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-4); }
.term-head { display: flex; align-items: start; gap: var(--space-2); }
.words-grid .term-card .term-en { flex: 1; min-width: 0; font-size: var(--text-xl); line-height: var(--leading-ui); text-align: end; overflow-wrap: anywhere; }
.term-listen { flex: none; margin-block-start: -4px; margin-inline-end: calc(-1 * var(--space-2)); }
.term-listen[aria-pressed="true"] { background: var(--accent-soft); }
.term-card .term-ar { font-size: var(--text-body); line-height: var(--leading-body); }
.term-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-2); }
.term-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); color: var(--text-3); font-size: var(--text-xs); line-height: var(--leading-body); }
.term-sources li { display: inline-flex; align-items: center; gap: var(--space-2); }
.term-sources li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ribbon, var(--line-strong)); }
.term-sources a { color: var(--text-2); text-decoration: none; }
.term-sources a:hover { color: var(--accent); text-decoration: underline; }
.words-more { display: grid; justify-items: center; gap: var(--space-2); margin-block-start: var(--space-5); }

.words-quiz-stage { display: grid; gap: var(--space-5); max-width: 760px; width: 100%; }
.words-quiz-top { display: grid; gap: var(--space-2); }
.words-quiz-top h2.kicker { font-size: var(--text-sm); line-height: var(--leading-ui); }
.words-quiz-listen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.words-quiz-leave { justify-self: start; }
.words-result { padding-block: var(--space-6) var(--space-4); }
.words-result h2 { font-size: var(--text-xl); }
.words-recap { display: grid; gap: var(--space-3); }
.words-recap h2 { font-size: var(--text-lg); }
.words-recap-row { padding: var(--space-3) var(--space-4); }
.words-recap-row strong { font-size: var(--text-body); text-align: end; }
.words-recap-row .list-row-main span { color: var(--text-2); }
.words-recap-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.words-recap-mark.is-correct { color: var(--success); background: var(--success-soft); }
.words-recap-mark.is-wrong { color: var(--danger); background: var(--danger-soft); }

/* ---------- الملفات ---------- */
.library-jump { margin-block-start: var(--space-2); }
.library-subject { display: grid; gap: var(--space-5); }
.library-subject-head { display: grid; gap: var(--space-3); }
.library-subject-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.library-subject-head h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); line-height: var(--leading-tight); }
.library-subject-link { margin-inline-start: auto; font-size: var(--text-sm); }
.library-group { display: grid; gap: var(--space-3); }
.library-group-title { color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.library-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.library-item { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-2); }
.library-item-head { display: grid; gap: 2px; }
.library-item-head .lecture-kicker { color: var(--text-3); font-size: var(--text-xs); }
.library-item-head h4 { font-size: var(--text-lg); line-height: var(--leading-ui); }
.library-item-head h4 a { color: var(--text); text-decoration: none; }
.library-item-head h4 a:hover { color: var(--accent); text-decoration: underline; }
.library-item-head .en-sub { display: block; }
.library-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.library-item { container-type: inline-size; }
.library-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
@container (max-width: 400px) { .library-row-actions { grid-column: 2 / -1; } }
.library-row-icon { display: grid; place-items: center; width: 24px; color: var(--text-3); }
.library-row-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: 2px; }
.library-row-main strong { font-weight: 600; font-size: var(--text-md); }
.library-facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--text-3); font-size: var(--text-xs); }
.library-facts > span + span::before { content: '·'; margin-inline-end: var(--space-2); }
.library-row-actions { display: flex; gap: var(--space-2); }
.library-source { max-width: 72ch; }
.library-source p { font-size: var(--text-sm); }

/* ---------- جدولي ---------- */
.timetable-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.timetable-summary p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding-inline-start: var(--space-2); }
.timetable-summary .faint { font-size: var(--text-sm); }
.timetable-summary + .timetable-setup { margin-block-start: var(--space-3); }
.timetable-setup { display: grid; gap: var(--space-4); max-width: 720px; }
.timetable-setup h2 { font-size: var(--text-lg); }
.timetable-setup > .faint { font-size: var(--text-sm); }
.timetable-choice, .timetable-days .chip { min-height: var(--control-height); padding-inline: var(--space-4); font-size: var(--text-md); }
.timetable-groups .timetable-choice { min-width: 64px; justify-content: center; font-family: var(--font-mono); font-weight: 600; }
.timetable-science { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) 0 0; border: 0; border-block-start: 1px solid var(--line); min-width: 0; }
.timetable-science legend { float: inline-start; width: 100%; padding: 0; font-weight: 600; }
.timetable-page [data-schedule]:empty { display: none; }
.timetable-day { display: grid; gap: var(--space-4); }
.timetable-day > .day-list, .timetable-day > .timetable-empty, .timetable-summary { max-width: 860px; }
.timetable-today { padding-inline-start: var(--space-2); margin-inline-start: var(--space-1); border-inline-start: 1px solid var(--line-strong); color: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.timetable-day h2 { display: flex; align-items: center; gap: var(--space-3); }
.timetable-day h2 .tag { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.timetable-page .day-list { list-style: none; margin: 0; padding: 0; }
.timetable-session.session-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: start; padding: var(--space-5) var(--space-5) var(--space-4); }
@media (min-width: 520px) { .timetable-session.session-row { grid-template-columns: 104px minmax(0, 1fr); } }
.timetable-session.is-conditional { border-style: dashed; border-color: var(--control); }
.timetable-session .session-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
@media (min-width: 520px) { .timetable-session .session-time { display: grid; gap: var(--space-1); } }
.session-time small { color: var(--text-2); font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); }
.timetable-session-main { display: grid; gap: 2px; min-width: 0; }
.timetable-session-main h3 { font-size: var(--text-lg); }
.timetable-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-end: var(--space-1); font-size: var(--text-sm); }
.tag.is-conditional { border: 1px dashed var(--warning); background: transparent; color: var(--text); }
.timetable-room { color: var(--text); font-size: var(--text-md); margin-block-start: var(--space-1); }
.timetable-links { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-2); font-size: var(--text-sm); }
.timetable-links > a { display: inline-flex; align-items: center; min-height: 24px; }
.timetable-more summary { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-2); cursor: pointer; }
.timetable-more summary:hover { color: var(--text); }
.timetable-more[open] { flex-basis: 100%; display: grid; gap: var(--space-1); }
.timetable-more p { color: var(--text-2); }
.timetable-break { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); color: var(--text-2); font-size: var(--text-sm); }
.timetable-break .icon { color: var(--text-3); }
.timetable-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); color: var(--text-2); }
.timetable-week { display: none; }
@media (min-width: 1024px) { .timetable-week { display: grid; gap: var(--space-4); } }
.timetable-grid-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.timetable-grid { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.timetable-grid th, .timetable-grid td { padding: var(--space-2); border: 1px solid var(--line); vertical-align: top; text-align: start; }
.timetable-grid tr > :first-child { border-inline-start: 0; }
.timetable-grid tr > :last-child { border-inline-end: 0; }
.timetable-grid thead th { border-block-start: 0; padding: var(--space-3) var(--space-3); color: var(--text-2); font-weight: 600; }
.timetable-grid thead th:first-child { width: 104px; }
.timetable-grid thead th small { display: block; color: var(--accent); font-size: var(--text-xs); }
.timetable-grid thead .is-today { background: var(--accent-soft); color: var(--text); }
.timetable-grid tbody th { color: var(--text); font-weight: 600; }
.timetable-grid tbody th span, .timetable-grid tbody th small { display: block; }
.timetable-grid tbody th small { color: var(--text-3); font-weight: 400; }
.timetable-grid tbody tr:last-child > * { border-block-end: 0; }
.timetable-grid .is-off, .timetable-grid .is-empty { color: var(--text-3); text-align: center; vertical-align: middle; }
.timetable-grid .is-break > * { padding-block: var(--space-1); color: var(--text-3); font-size: var(--text-xs); font-weight: 400; text-align: center; background: var(--bg); }
.timetable-grid .is-break th small { display: none; }
.timetable-cell { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); border-inline-start: 3px solid var(--ribbon, var(--line-strong)); background: var(--surface-2); }
.timetable-cell + .timetable-cell { margin-block-start: var(--space-2); }
.timetable-cell strong { font-weight: 600; line-height: var(--leading-ui); }
.timetable-cell small { color: var(--text-2); font-size: var(--text-xs); }
.timetable-cell.is-conditional { border: 1px dashed var(--warning); border-inline-start-width: 3px; }
.timetable-cell .timetable-cell-note { color: var(--text); }
.timetable-source { display: grid; gap: var(--space-2); justify-items: start; padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); max-width: 72ch; }
.timetable-source h2 { font-size: var(--text-lg); }
.timetable-source p { color: var(--text-2); font-size: var(--text-sm); }
.timetable-source .btn { margin-block-start: var(--space-2); }

/* ---------- التحديثات ---------- */
.updates-timeline { list-style: none; margin: 0; margin-inline-start: var(--space-2); padding: 0; padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--line); display: grid; gap: var(--space-4); }
.updates-entry { position: relative; }
.updates-entry::before { content: ''; position: absolute; inset-inline-start: calc(-1 * var(--space-5) - 7px); top: var(--space-6); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); }
.updates-entry.is-current::before { border-color: var(--accent); background: var(--accent); }
.updates-card { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.updates-entry.is-current .updates-card { border-color: var(--accent-line); }
.updates-card h3 { font-size: var(--text-xl); }
.updates-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--text-3); font-size: var(--text-sm); }
.tag.is-accent { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.updates-copy { display: grid; gap: var(--space-2); color: var(--text-2); }
.updates-copy p, .updates-points { max-width: 68ch; }
.updates-points { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); color: var(--text-2); }
.updates-older { display: grid; gap: var(--space-5); }
.updates-timeline, .updates-older { max-width: 860px; }
.updates-day { display: grid; gap: var(--space-2); }
.updates-day h3 { color: var(--text-3); font-size: var(--text-sm); font-weight: 600; }
.updates-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); overflow: hidden; }
.updates-list > li + li { border-block-start: 1px solid var(--line); }
.updates-item summary { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; font-weight: 600; }
.updates-item summary::-webkit-details-marker { display: none; }
.updates-item summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-inline-start: auto; border: solid var(--text-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--fast) var(--ease-out); }
.updates-item[open] summary::after { transform: rotate(-135deg); }
.updates-item summary:hover { background: var(--surface-2); }
.updates-item summary .tag { flex: none; }
.updates-item-body { padding: 0 var(--space-4) var(--space-4); }

/* ---------- عن المنصة ---------- */
.about-head .about-lead { max-width: 60ch; color: var(--text); font-size: var(--text-lg); line-height: var(--leading-body); }
.about-page > section { display: grid; gap: var(--space-4); }
.about-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .about-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-offer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); }
.about-offer-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent); }
.about-offer strong { display: block; font-weight: 600; }
.about-offer p { color: var(--text-2); font-size: var(--text-sm); }
.about-section { max-width: 72ch; }
.about-section > p:not(.notice) { color: var(--text-2); }
.about-external { white-space: nowrap; }
.about-section a .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; }
.about-links .list-row .icon:first-child { color: var(--accent); }

/* Filter and jump chips are the main controls on touch screens. */
@media (pointer: coarse) { .words-tools .chip, .library-jump .chip { min-height: var(--control-height); } }