/* وصلها 4 — «المزيد» and settings, «حسابي», «الغرف», «ورشة الكتابة»,
   «جداول المنطق» and the feedback dialog. Tokens only; 4px spacing scale. */

/* ---------- Shared pieces ---------- */
/* Grouped rows: one surface, rows divided by hairlines (navigation lists). */
.row-group { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); overflow: hidden; }
.row-group > li + li { border-block-start: 1px solid var(--line); }
.row-group .list-row { min-height: 68px; padding: var(--space-3) var(--space-4); border: 0; border-radius: 0; background: transparent; }
.row-group a.list-row:hover, .row-group button.list-row:hover { background: var(--surface-2); }
.row-group .list-row:focus-visible { outline-offset: -3px; border-radius: var(--radius-card); }
.row-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent); }
button.list-row { color: var(--text); cursor: pointer; }
.list-row-main small { line-height: var(--leading-ui); }
.more-section-title, .account-section-title { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); font-size: var(--text-xl); }
.more-section-title .icon, .account-section-title .icon { color: var(--accent); }
.account-details { border-block-start: 1px solid var(--line); padding-block-start: var(--space-3); }
.account-details > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.account-details > summary::-webkit-details-marker { display: none; }
.account-details > summary::before { content: ''; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(135deg); transition: transform var(--fast) var(--ease-out); }
.account-details[open] > summary::before { transform: rotate(45deg); }
.account-details > :not(summary) + :not(summary), .account-details > summary + * { margin-block-start: var(--space-3); }
.char-count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.account-consequences { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-2); font-size: var(--text-sm); }
.account-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-2); }
.account-fieldset legend { padding: 0; margin-block-end: var(--space-2); font-weight: 600; font-size: var(--text-md); }
.input-short { max-width: 160px; }
.file-input { padding-block: var(--space-2); }
.file-input::file-selector-button { margin-inline-end: var(--space-3); min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--text-sm); }
[data-form-message] { margin: 0; }

/* Radio and checkbox tiles hide the native control but keep its keyboard and focus. */
.theme-choice, .topic-choice, .picker-item, .tt-option, .choice-row { position: relative; }
.theme-choice input, .topic-choice input, .picker-item input, .tt-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme-choice input:focus-visible + *, .topic-choice input:focus-visible + *, .picker-item input:focus-visible + *, .tt-option input:focus-visible + * { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- «المزيد» ---------- */
.more-layout { display: grid; gap: var(--space-7); }
.more-column { display: grid; gap: var(--space-7); align-content: start; }
.more-column > * { min-width: 0; }
@media (min-width: 1024px) { .more-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); } }

.more-settings { display: grid; gap: var(--space-4); }
.more-settings .more-section-title { margin-block-end: 0; }
.setting-card { display: grid; gap: var(--space-4); }
.setting-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.setting-title .icon { color: var(--text-3); }
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
/* «التذكير بالمذاكرة»: time and days. */
.reminder-form { display: grid; gap: var(--space-3); }
.reminder-form .field { max-width: 12rem; }
.reminder-days { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
.reminder-days legend { margin-block-end: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.day-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.day-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.reminder-card .is-success { color: var(--success); }
.reminder-card .is-danger { color: var(--danger); }
/* «حجم الخط»: the sample letter shows each size at a glance. */
.text-size-sample { font-family: var(--font-display); font-weight: 800; line-height: 1; }
.text-size-sample.is-normal { font-size: 1.25rem; }
.text-size-sample.is-large { font-size: 1.5rem; }
.text-size-sample.is-larger { font-size: 1.75rem; }
.theme-choice-face {
  position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-1); min-height: 72px; padding: var(--space-2);
  border: 1px solid var(--control); border-radius: var(--radius-card); background: var(--surface-1); color: var(--text-2); font-weight: 600; font-size: var(--text-sm); text-align: center;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.theme-choice-face .icon { width: 24px; height: 24px; }
.theme-choice:hover .theme-choice-face { border-color: var(--text-3); color: var(--text); }
.theme-choice input:checked + .theme-choice-face { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--text); }
.theme-choice input:checked + .theme-choice-face::after { content: ''; position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); width: .55em; height: .3em; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.switch-row span { display: grid; gap: 2px; }
.switch-row small { color: var(--text-2); }
.settings-save { min-height: 1.7em; }

.install-card { display: grid; gap: var(--space-4); }
.install-intro { display: flex; align-items: center; gap: var(--space-4); }
.install-intro img { width: 48px; height: 48px; flex: none; border-radius: var(--radius-card); }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.install-steps li { display: flex; align-items: center; gap: var(--space-3); }
.install-steps li > span:last-child { display: grid; gap: 2px; }
.install-status:empty { display: none; }

.guide-dialog { width: min(640px, calc(100vw - 2 * var(--space-4))); }
.guide-intro { font-size: var(--text-body); color: var(--text); }
.guide-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); counter-reset: guide; }
.guide-steps li { position: relative; display: grid; gap: var(--space-1); padding-inline-start: calc(32px + var(--space-3)); counter-increment: guide; }
.guide-steps li::before { content: counter(guide, arabic-indic); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 800; }
.guide-steps p { color: var(--text-2); }
.guide-tip { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface-2); }
.guide-tip h3 { font-size: var(--text-md); }

/* ---------- «حسابي» ---------- */
.account-layout { display: grid; gap: var(--space-7); }
.account-main { display: grid; gap: var(--space-7); min-width: 0; }
.account-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.account-danger { min-width: 0; }
/* Phone: sections, then the session card, then deletion last. Desktop: deletion stays
   under the sections while the session card sits beside them. */
@media (min-width: 1024px) {
  .account-layout { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main side" "danger side"; gap: var(--space-7) var(--space-6); align-items: start; }
  .account-main { grid-area: main; }
  .account-danger { grid-area: danger; }
  .account-side { grid-area: side; position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
}
.account-head .account-name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.account-section { display: grid; gap: var(--space-4); }
.account-section .account-section-title { margin-block-end: 0; }
.account-card { display: grid; gap: var(--space-4); }
.account-main > *, .account-section > *, .account-card > * { min-width: 0; }
/* Long action labels wrap on narrow phones instead of widening the card. */
.account-page .btn, .more-page .btn, .rooms-hub .btn, .feedback-dialog .btn { white-space: normal; text-align: center; padding-block: var(--space-2); }
.account-card h3, .account-card-title { font-size: var(--text-lg); }
.account-subhead { font-size: var(--text-md); }
.guest-notice { align-items: start; }
.guest-notice > div { display: grid; gap: var(--space-1); }
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.session-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); }
.session-device { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.session-device .icon { color: var(--text-3); }
.support-id { display: grid; gap: var(--space-1); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.support-id code { font-size: var(--text-xs); color: var(--text-2); overflow-wrap: anywhere; text-align: start; }
.account-danger-card { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.account-section-title.is-danger .icon { color: var(--danger); }

.role-terms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.role-terms dt { font-weight: 600; }
.role-terms dd { margin: 0; color: var(--text-2); }
.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.request-item { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2); }
.request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.request-status[data-status="approved"] { color: var(--success); }
.request-status[data-status="rejected"], .request-status[data-status="revoked"] { color: var(--danger); }
.request-status[data-status="pending"] { color: var(--warning); }
.request-note { color: var(--text-2); font-size: var(--text-sm); }
.role-form { padding-block-start: var(--space-2); }
.choice-row { display: flex; align-items: start; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-card); cursor: pointer; }
.choice-row input { width: 20px; height: 20px; margin-top: .3em; accent-color: var(--accent); flex: none; }
.choice-row span { display: grid; gap: 2px; }
.choice-row small { color: var(--text-2); }
.choice-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 var(--space-4); }

/* ---------- Feedback dialog ---------- */
.feedback-where { display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; }
.feedback-where .icon { color: var(--accent); }
.feedback-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.feedback-item { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.feedback-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.feedback-reply { display: grid; gap: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--accent-line); color: var(--text-2); }

/* ---------- «الغرف» ---------- */
.rooms-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-4); }
.rooms-head-text { display: grid; gap: var(--space-2); min-width: 0; flex: 1 1 280px; }
.rooms-course { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rooms-course .icon { color: var(--text-3); }
.rooms-hub [data-rooms] { display: grid; gap: var(--space-6); }
.rooms-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rooms-skeleton { height: 240px; }
.rooms-section { display: grid; gap: var(--space-3); }
.rooms-section h2 { font-size: var(--text-lg); }
.room-live { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.room-card { display: grid; gap: var(--space-4); align-content: start; }
.room-card.is-public { background: radial-gradient(480px 200px at 100% 0%, var(--accent-soft), transparent 70%), var(--surface-1); }
.room-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 24px; }
.room-live-tag { gap: var(--space-2); color: var(--success); }
.room-live-tag .room-live { width: 8px; height: 8px; box-shadow: none; }
.room-title { font-weight: 600; font-size: var(--text-body); }
.room-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: var(--text-2); font-size: var(--text-sm); }
.room-facts li { display: flex; align-items: center; gap: var(--space-2); }
.room-facts .icon { color: var(--text-3); }
.room-card hr { margin: 0; }

/* ---------- «ورشة الكتابة» ---------- */
.workshop { max-width: 820px; }
.workshop-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.topic-choice > span { display: grid; gap: 2px; height: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--control); border-radius: var(--radius-card); background: var(--surface-1); }
.topic-choice small { color: var(--text-2); }
.topic-choice:hover > span { border-color: var(--text-3); }
.topic-choice input:checked + span { border: 2px solid var(--accent); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); background: var(--accent-soft); }
.stepper-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stepper-list::before { content: ''; position: absolute; inset-inline: 10%; top: 22px; height: 2px; background: var(--line); }
.stepper-item { position: relative; display: grid; justify-items: center; gap: var(--space-1); width: 100%; min-height: var(--control-height); padding: 0 2px; border: 0; background: none; color: var(--text-2); font: inherit; text-align: center; }
.stepper-number { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--control); border-radius: 50%; background: var(--surface-1); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.stepper-number .icon { color: var(--success); }
.stepper-name { font-size: var(--text-xs); line-height: var(--leading-ui); font-weight: 600; }
.stepper-item:hover .stepper-number { border-color: var(--text-3); }
.stepper-item[aria-current="step"] { color: var(--text); }
.stepper-item[aria-current="step"] .stepper-number { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.stepper-item[aria-current="step"] .stepper-number .icon { color: var(--on-accent); }
@media (max-width: 599px) { .stepper-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.workshop-step { display: grid; gap: var(--space-5); }
.step-head { display: grid; gap: var(--space-1); }
.writing-model > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); margin-block: calc(-1 * var(--space-2)); font-weight: 600; cursor: pointer; }
.writing-model > summary .icon { color: var(--accent); }
.writing-model > * + * { margin-block-start: var(--space-4); }
.english-sample { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--ribbon, var(--accent)); border-radius: var(--radius-control); background: var(--surface-2); }
.english-sample p { white-space: pre-line; text-align: left; }
.model-why { color: var(--text-2); }
.writing-task { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-soft); }
.writing-task strong { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); }
.draft-preview { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-2); white-space: pre-wrap; color: var(--text-2); }
.draft-text { min-height: 200px; }
.draft-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.writing-checklist { margin: 0; display: grid; gap: var(--space-1); min-inline-size: 0; }
.writing-checklist legend { float: inline-start; width: 100%; padding: 0; margin-block-end: var(--space-2); font-weight: 600; font-size: var(--text-lg); }
.writing-checklist legend + * { clear: both; }

/* ---------- «جداول المنطق» ---------- */
.table-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--space-2); }
.tables-page { max-width: 820px; }
@media (min-width: 768px) { .table-picker { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); } }
.picker-face { display: grid; justify-items: center; gap: 0; min-height: 52px; padding: var(--space-2) var(--space-1); border: 1px solid var(--control); border-radius: var(--radius-card); background: var(--surface-1); text-align: center; }
.picker-code { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-body); color: var(--text); }
.picker-face small { color: var(--text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.picker-item:hover .picker-face { border-color: var(--text-3); }
.picker-item input:checked + .picker-face { border: 2px solid var(--accent); background: var(--accent-soft); }
.table-body { display: grid; gap: var(--space-4); }
.table-head { display: grid; gap: var(--space-1); }
.table-expression { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); text-align: left; overflow-wrap: anywhere; }
.truth-scroll { overflow-x: auto; direction: ltr; }
.truth-table { width: 100%; max-width: 560px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.truth-table th, .truth-table td { padding: var(--space-2); border-block-end: 1px solid var(--line); text-align: center; vertical-align: middle; }
.truth-table th { color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.truth-table thead th:not(:nth-last-child(-n+2)) { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text); }
.truth-bit { width: 40px; font-family: var(--font-mono); font-weight: 600; color: var(--text-2); }
.tt-answer { display: inline-flex; gap: var(--space-1); padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); }
.tt-option span { display: grid; place-items: center; width: 44px; height: 40px; border-radius: 4px; font-family: var(--font-mono); font-weight: 700; color: var(--text-2); }
.tt-option:hover span { color: var(--text); background: var(--surface-3); }
.tt-option input:checked + span { background: var(--accent); color: var(--on-accent); }
.tt-verdict { min-width: 40px; font-size: var(--text-sm); color: var(--text-3); }
.tt-verdict:has(.icon) { white-space: nowrap; }
.tt-verdict .icon { display: inline-block; vertical-align: -.25em; margin-inline-end: var(--space-1); }
.tt-verdict[data-state="correct"] { color: var(--success); }
.tt-verdict[data-state="wrong"] { color: var(--danger); }
.tt-verdict[data-state="solution"] { color: var(--text); font-weight: 600; }
.tt-keys kbd { padding: 0 var(--space-1); border: 1px solid var(--line-strong); border-radius: 4px; font-size: var(--text-xs); }
@media (max-width: 479px) {
  .table-card { padding: var(--space-4) var(--space-3); }
  .truth-table th, .truth-table td { padding: var(--space-2) var(--space-1); }
  .tt-verdict-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tt-verdict .icon { margin: 0; }
}
@media (pointer: coarse) { .tt-keys { display: none; } }
/* «الدخول بمفتاح الأمان» */
.passkey-list { margin-block: var(--space-2); }
.passkey-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.passkey-row > span { display: grid; gap: 2px; min-width: 0; }
[data-passkeys] .is-success { color: var(--success); }
[data-passkeys] .is-danger { color: var(--danger); }