:root{--ink:#172f30;--muted:#617473;--teal:#176c62;--line:#dbe4df;--paper:#fafbf7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d49b38;outline-offset:3px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{text-decoration:none;color:var(--ink);display:flex;gap:13px;align-items:center;font-size:20px}.brand b{font-weight:650}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:3px}.mark{background:var(--teal);color:white;border-radius:15px;font:35px/54px Georgia;text-align:center;width:54px}main{max-width:1550px;margin:auto;padding:40px 5%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--teal)}h1{font:44px/1.14 Georgia,serif;letter-spacing:-1px;margin:14px 0}h1 em{font-weight:normal;color:var(--teal)}.intro p{color:var(--muted);margin-bottom:0}.filters{display:grid;grid-template-columns:1.5fr 1.3fr 1.1fr .8fr .7fr auto;gap:12px;background:#eef2ec;padding:20px;border-radius:14px;margin-bottom:28px;align-items:end}label{font-size:11px;font-weight:650;color:var(--muted);letter-spacing:.3px}input,select{display:block;width:100%;height:43px;border:1px solid #cdd9d2;border-radius:7px;background:white;color:var(--ink);padding:0 10px;margin-top:6px;font-size:13px;min-width:0}.quiet{border:0;background:transparent;color:var(--teal);font-size:12px;padding:12px 3px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}aside{min-width:0}.list-heading{display:flex;justify-content:space-between;align-items:center;padding:0 4px 13px}h2{font-size:17px;margin:0}#count{font-size:12px;color:var(--muted)}#list{max-height:820px;overflow:auto;padding:2px 5px 5px 2px}.question-item{width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;background:white;margin-bottom:9px;padding:16px;color:var(--ink)}.question-item:hover{border-color:#66a397}.question-item.active{border-color:var(--teal);background:#eaf3ef;box-shadow:inset 3px 0 var(--teal)}.qmeta{display:flex;justify-content:space-between;font-size:10px;font-weight:650;color:var(--teal);gap:8px}.question-item .ar{font-size:21px;line-height:1.9;margin:10px 0}.question-item small{color:var(--muted);font-size:11px}.ar{direction:rtl;text-align:right;font-family:'Traditional Arabic','Noto Naskh Arabic',Tahoma,serif;font-size:25px;line-height:2}#reader{background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden}.toolbar{background:#f4f6f2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 24px;border-bottom:1px solid var(--line)}.toolbar>span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.toolbar>div{display:flex;gap:5px}.toolbar button{border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;font-size:12px;padding:8px 12px;line-height:1.3}.toolbar button[aria-pressed=true]{background:white;border-color:#b8cdc3;color:var(--teal);box-shadow:0 2px 4px #17352b08}.toolbar small{font-size:10px}#detail{padding:27px}.badge{display:inline-block;background:#eaf2ec;color:var(--teal);padding:4px 9px;border-radius:5px;font-size:11px;margin:0 5px 5px 0}.main-question{font-size:30px;line-height:1.9;margin:18px 0}.question-info{color:var(--muted);font-size:12px;margin:12px 0 24px}.answers{display:grid;gap:22px}.answer{border:1px solid var(--line);border-radius:10px;overflow:hidden}.answer-heading{display:flex;gap:12px;align-items:center;background:#f4f7f3;padding:14px 18px}.letter{background:var(--teal);color:white;border-radius:50%;width:29px;height:29px;text-align:center;line-height:29px;font-size:13px}.answer:nth-child(2) .letter{background:#a07336}.answer-heading h3{font-size:14px;margin:0}.step{padding:17px 20px;border-top:1px solid #edf0ea}.step-label{font-size:10px;letter-spacing:1.3px;color:var(--muted);font-weight:650;margin-bottom:8px}.pair{display:grid;gap:7px}.pair p{margin:0}.en{color:#526664;font-size:14px;line-height:1.65}.prompt{color:var(--teal);margin-bottom:10px!important}.side .pair{direction:ltr;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:center}.side .pair .en{border-left:1px solid var(--line);padding-left:20px}.arabic .en{display:none}.source{margin-top:22px;color:var(--muted);font-size:12px}.source summary{cursor:pointer}.empty{padding:45px 20px;text-align:center;color:var(--muted)}footer{text-align:center;padding:25px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}@media(min-width:1400px){.workspace{grid-template-columns:minmax(0,1fr) 390px}}@media(max-width:1100px){.filters{grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:minmax(0,1fr) 290px}.toolbar{padding:12px;flex-wrap:wrap}}@media(max-width:760px){header{height:80px}.header-note,main{padding:25px 5%}h1{font-size:36px}.filters{grid-template-columns:1fr 1fr;padding:15px}.search{grid-column:1/-1}.workspace{grid-template-columns:1fr;gap:20px}#list{max-height:340px}#detail{padding:20px}.toolbar>span{display:none}.toolbar>div{width:100%}.toolbar button{flex:1}.main-question{font-size:27px}.intro p{font-size:14px}}

/* Dubai Light is the default for both writing systems. */
@font-face {
  font-family: "Dubai Light";
  src: url("https://cdn.jsdelivr.net/npm/dubai-font@1.1.1/dubai-font/fonts/Dubai-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

body, .ar {
  font-family: "Dubai Light", Tahoma, "Segoe UI", sans-serif;
  font-weight: 300;
}

header, .intro, .filters {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
}
@media(min-width:1101px){.filters{grid-template-columns:repeat(4,minmax(0,1fr))}}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

#theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

#theme-switch span { padding: 5px 8px; border-radius: 14px; }
#theme-switch[aria-pressed="false"] .light-option { background: #e3eee7; color: var(--teal); }
#theme-switch[aria-pressed="true"] .dark-option { background: #30574e; color: #effaf4; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111b1a;
  --ink: #edf6f1;
  --muted: #afc2bb;
  --teal: #8ed8c1;
  --line: #3c5650;
}

[data-theme="dark"] .mark, [data-theme="dark"] .letter { background: #23695c; }
[data-theme="dark"] .answer:nth-child(2) .letter { background: #855d2c; }
[data-theme="dark"] .filters, [data-theme="dark"] .toolbar,
[data-theme="dark"] .answer-heading { background: #21312e; }
[data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] .question-item, [data-theme="dark"] #reader { background: #192624; }
[data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] .step { border-color: var(--line); }
[data-theme="dark"] input::placeholder { color: var(--muted); }
[data-theme="dark"] .question-item.active, [data-theme="dark"] .badge,
[data-theme="dark"] .toolbar button[aria-pressed="true"] { background: #27453d; }
[data-theme="dark"] .en { color: #c4d6cf; }

@media(max-width:420px) {
  .brand { font-size: 16px; gap: 8px; }
  .mark { width: 42px; line-height: 42px; }
  .brand small { letter-spacing: 1px; }
}


.question-pair { margin: 18px 0; }
.question-pair .main-question { margin: 0; }
.arabic .question-pair, .side .question-pair:has(h2:only-child) { grid-template-columns: 1fr; }

.workspace {
  grid-template-areas: "options heading" "reader questions";
  row-gap: 8px;
}

.question-options {
  grid-area: options;
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-self: center;
}

.question-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
}

.question-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--teal);
}

.workspace > .list-heading { grid-area: heading; padding-bottom: 0; }
.workspace > aside { grid-area: questions; }
.workspace > #reader { grid-area: reader; }
.question-item .question-text,
.question-item .question-translation { display: block; }
.question-item .question-translation { margin-bottom: 10px; }
article.question-item { cursor: default; }

.workspace:has(#questions-only:checked) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "options" "heading" "questions";
}

.workspace:has(#questions-only:checked) #list { max-height: none; }

.workspace:has(#hide-question-translation:checked) .question-translation { display: none; }
.workspace:has(#hide-question-translation:checked) .question-pair { grid-template-columns: 1fr; }

@media (min-width: 761px) {
  .side .pair > .en {
    order: -1;
    border-left: 0;
    border-right: 1px solid var(--line);
    padding-left: 0;
    padding-right: 20px;
  }
}

@media (max-width: 760px) {
  .side .pair { grid-template-columns: 1fr; }
  .side .pair .en { border: 0; padding: 0; }
  .workspace { grid-template-areas: "options" "heading" "questions" "reader"; }
  .workspace > #reader { margin-top: 12px; }
}