/* ==========================================================================
   إحراز — Writing practice (writing-practice-task1.html · writing-practice.html): the switch between the two tasks,
   the questions, then one answer at a time (beside the answer: the question, for Task 1 its chart, and the plan as the
   answer's four parts; the answer with its toolbar of time and words; the review, for Task 2 with the AI marker). Built on
   reading-lessons.css (cards, the exam paper, the checklist) in the same sketchbook look.
   ========================================================================== */
body[data-view="list"] [data-view-of="write"], body[data-view="write"] [data-view-of="list"] { display: none; }

/* ---------- the two tasks ---------- */
.wp-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--canvas); border: 1px solid var(--border-strong); }
.wp-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 10px 14px; border-radius: 12px; color: var(--ink-2); text-decoration: none;
  font-size: 15px; font-weight: var(--w-semibold); transition: background-color var(--dur-fast), color var(--dur-fast); }
.wp-switch a .icon { width: 20px; height: 20px; }
.wp-switch a small { font-size: 12px; font-weight: var(--w-regular, 400); color: var(--muted); }
.wp-switch a:hover { color: var(--ink); }
.wp-switch a[aria-current="page"] { background: var(--ink); color: var(--on-accent); }
.wp-switch a[aria-current="page"] small { color: inherit; opacity: .75; }
.wp-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the questions ---------- */
.wp-bank { display: grid; gap: 16px; }
.wp-bank__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wp-bank__head .card__sub { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.wp-bank__count { font-size: 13px; color: var(--ink-2); padding: 4px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); }
.wp-bank__count b { font-weight: var(--w-bold); color: var(--ink); }
.wp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-filter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.wp-filter small { font-size: 11.5px; color: var(--muted); }
.wp-filter:hover { border-color: var(--ink); color: var(--ink); }
.wp-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.wp-filter[aria-pressed="true"] small { color: inherit; opacity: .75; }
.wp-filter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wp-list { display: grid; gap: 10px; }
.wp-item { --k: var(--border-strong); border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--k); border-radius: var(--r-card); background: var(--surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.wp-item:hover { border-color: var(--k); box-shadow: 0 4px 14px rgba(26, 51, 0, .06); }
.wp-item.is-done { background: color-mix(in srgb, var(--t-speaking) 35%, var(--surface)); }
.wp-item__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 14px 18px; color: inherit; text-decoration: none; border-radius: inherit; }
.wp-item__go { width: 18px; height: 18px; color: var(--muted); transition: color var(--dur-fast); }
.wp-item:hover .wp-item__go { color: var(--ink); }
.wp-item__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wp-item__body { display: grid; gap: 8px; min-width: 0; }
.wp-item--chart .wp-item__link { grid-template-columns: 132px minmax(0, 1fr) auto; gap: 16px; }
.wp-item__img { width: 132px; height: 84px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.wp-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wp-item__q { font-size: 14.5px; line-height: 1.75; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wp-type { --k: var(--c-writing); --t: var(--t-writing); font-size: 12px; font-weight: var(--w-semibold); padding: 2px 10px; border-radius: var(--r-pill); background: var(--t); color: var(--k); }
.wp-type--agree, .wp-tone--agree { --k: var(--c-reading); --t: var(--t-reading); }
.wp-type--adv, .wp-tone--adv { --k: var(--c-speaking); --t: var(--t-speaking); }
.wp-type--discuss, .wp-tone--discuss { --k: var(--c-listening); --t: var(--t-listening); }
.wp-type--problem, .wp-tone--problem { --k: var(--c-grammar); --t: var(--t-grammar); }
.wp-type--two, .wp-tone--two { --k: var(--c-plan); --t: var(--t-plan); }
.wp-type--bar, .wp-tone--bar { --k: var(--c-reading); --t: var(--t-reading); }
.wp-type--line, .wp-tone--line { --k: var(--c-listening); --t: var(--t-listening); }
.wp-type--pie, .wp-tone--pie { --k: var(--c-speaking); --t: var(--t-speaking); }
.wp-type--table, .wp-tone--table { --k: var(--c-plan); --t: var(--t-plan); }
.wp-type--map, .wp-tone--map { --k: var(--c-grammar); --t: var(--t-grammar); }
.wp-type--process, .wp-tone--process { --k: var(--c-vocab); --t: var(--t-vocab); }
.wp-model { font-size: 12px; color: var(--ink-2); }
.wp-status { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 12px; color: var(--ink-2); }
.wp-status .icon { width: 15px; height: 15px; stroke-width: 2.4; color: var(--c-speaking); }
.wp-status.is-draft { color: var(--c-plan); }
.wp-tools { padding: 18px 20px; }

/* ---------- one answer: the question and the plan beside the answer ---------- */
.wp-write { display: grid; gap: 16px; }
.wp-write__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.wp-back .icon { width: 16px; height: 16px; transform: scaleX(-1); }
.wp-q__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; font-size: 13px; }
.wp-ask { color: var(--ink-2); }
.wp-q__tags .link { margin-inline-start: auto; }
.wp-desk { display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); gap: 20px; align-items: start; }
.wp-side { position: sticky; top: 16px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.wp-panel { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-strong); }
.wp-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wp-panel__head small { font-size: 12px; color: var(--muted); }
.wp-panel__k { font-size: 14px; font-weight: var(--w-bold); color: var(--ink); }
.wp-q .rl-paper { padding: 14px 16px; font-size: 14.5px; line-height: 1.8; }
.wp-fig { display: block; width: 100%; padding: 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; cursor: zoom-in; transition: border-color var(--dur-fast); }
.wp-fig:hover { border-color: var(--ink); }
.wp-fig:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wp-fig img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.wp-zoom { width: min(1200px, calc(100% - 24px)); max-height: calc(100vh - 24px); padding: 12px; border: 1px solid var(--border-strong); border-radius: 16px; background: #fff; }
.wp-zoom::backdrop { background: rgba(23, 25, 23, .55); }
.wp-zoom .icon-btn { display: grid; place-items: center; margin-inline-start: auto; margin-bottom: 8px; }
.wp-zoom img { display: block; max-width: 100%; max-height: calc(100vh - 100px); margin: 0 auto; }

/* the plan: the answer's four parts in order, joined by a line; a part with nothing to plan stays quiet */
.wp-outline { display: grid; gap: 0; }
.wp-part { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.wp-part:last-child { padding-bottom: 0; }
.wp-part:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 2px; border-inline-start: 2px dashed var(--border-strong); }
.wp-part__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--highlight); border: 1.5px solid var(--border-strong);
  font-size: 13px; font-weight: var(--w-display); }
.wp-part.is-fixed .wp-part__n { background: var(--canvas); color: var(--ink-2); }
.wp-part__body { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.wp-part__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.wp-part__name b { font-size: 14.5px; font-weight: var(--w-bold); }
.wp-part__name small { font-size: 12px; color: var(--muted); }
.wp-part__what { font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.wp-part input { width: 100%; min-width: 0; margin-top: 4px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--canvas);
  font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.wp-part input::placeholder { color: var(--muted); opacity: .8; }
.wp-part input:focus { background: var(--surface); }
.wp-part input:focus-visible, .wp-editor textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }

/* the answer: one sheet, its toolbar on top (stays in view while writing) */
.wp-editor { display: grid; border-radius: 20px; background: #fffef8; border: 1px solid var(--border-strong); }
.wp-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 20px 20px 0 0; background: var(--surface); border-bottom: 1px solid var(--border-strong); }
.wp-timer { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--canvas); color: var(--ink); font: inherit; cursor: pointer; }
.wp-timer b { font-size: 20px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.wp-timer small { font-size: 12px; color: var(--ink-2); }
.wp-timer.is-on { border-color: var(--ink); }
.wp-timer.is-over b { color: var(--terracotta); }
.wp-timer:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wp-words { display: inline-flex; align-items: baseline; gap: 8px; }
.wp-words b { font-size: 22px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.wp-words small { font-size: 12.5px; color: var(--ink-2); }
.wp-words.is-ok b { color: var(--c-speaking); }
.wp-words.is-long b { color: var(--terracotta); }
.wp-bar .btn { margin-inline-start: auto; }
.wp-editor textarea { display: block; width: 100%; min-height: 560px; padding: 22px 26px; border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 16.5px; line-height: 2; color: var(--ink); text-align: left; resize: vertical; }
.wp-editor textarea::placeholder { color: var(--muted); }
.wp-editor__hint { padding: 10px 18px 14px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); }

/* the review */
.wp-review { display: grid; gap: 14px; }
.wp-review:focus { outline: none; }
.wp-facts { display: grid; gap: 8px; }
.wp-facts li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.75; }
.wp-facts .icon { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.wp-facts .is-ok { background: color-mix(in srgb, var(--t-speaking) 60%, var(--surface)); }
.wp-facts .is-ok .icon { color: var(--c-speaking); stroke-width: 2.4; }
.wp-facts .is-warn { background: #fff5ec; }
.wp-facts .is-warn .icon { color: var(--terracotta); }
.wp-facts b { font-weight: var(--w-bold); }
.wp-review__lead { font-size: 14.5px; font-weight: var(--w-semibold); }
/* the AI marker: ask, wait, then the estimate on the four criteria with what to fix */
.wp-ai:empty { display: none; }
.wp-ai__ask { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--highlight-soft) 55%, var(--surface)); }
.wp-ai__ask p { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.wp-ai__ask b { font-size: 15px; font-weight: var(--w-bold); }
.wp-ai__ask small { font-size: 12.5px; color: var(--ink-2); }
.wp-ai__msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--border-strong); font-size: 14px; line-height: 1.8; }
.wp-ai__msg .icon { width: 20px; height: 20px; margin-top: 3px; flex: none; color: var(--terracotta); }
.wp-ai__msg.is-err { background: #fff5ec; border-color: #f0c5a6; }
.wp-ai__res { display: grid; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface); }
.wp-ai__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wp-band { display: flex; align-items: center; gap: 12px; }
.wp-band > b { font-size: 40px; line-height: 1; font-weight: var(--w-display); font-variant-numeric: tabular-nums; }
.wp-band > span { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.wp-band small { font-size: 12px; color: var(--muted); }
.wp-ai__caveat { font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.wp-crit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wp-crit li { display: grid; align-content: start; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--border); }
.wp-crit__head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.wp-crit__head b { font-size: 14.5px; font-weight: var(--w-bold); }
.wp-crit__head small { font-size: 11.5px; color: var(--muted); }
.wp-crit__band { margin-inline-start: auto; min-width: 34px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-accent); text-align: center;
  font-size: 15px; font-weight: var(--w-bold); }
.wp-crit__ok, .wp-crit__fix, .wp-ai__next { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.8; }
.wp-crit__ok .icon, .wp-crit__fix .icon, .wp-ai__next .icon { width: 16px; height: 16px; margin-top: 5px; flex: none; }
.wp-crit__ok .icon { color: var(--c-speaking); stroke-width: 2.4; }
.wp-crit__fix .icon { color: var(--c-grammar); }
.wp-ai__h { font-size: 14px; font-weight: var(--w-bold); margin-bottom: 8px; }
.wp-ai__notes ul, .wp-rw, .wp-err { display: grid; gap: 8px; }
.wp-ai__notes li { position: relative; padding-inline-start: 16px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.wp-ai__notes li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.wp-rw li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.wp-rw__from, .wp-rw__to { text-align: left; font-size: 14.5px; line-height: 1.75; }
.wp-rw__from { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--terracotta) 60%, transparent); }
.wp-rw__to { font-weight: var(--w-semibold); }
.wp-rw__to::before { content: "→ "; color: var(--c-speaking); }
.wp-rw__why, .wp-err__why { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.wp-err li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.wp-err li:last-child { border-bottom: 0; }
.wp-err__k { grid-row: span 2; padding: 1px 9px; border-radius: var(--r-pill); background: var(--lilac); font-size: 11.5px; color: var(--ink-2); }
.wp-err p[dir="ltr"] { text-align: left; font-size: 14.5px; }
.wp-err s { color: var(--terracotta); }
.wp-err b { font-weight: var(--w-bold); color: var(--c-speaking); }
.wp-ai__next { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--highlight-soft) 50%, var(--surface)); }
.wp-tick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wp-tick input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--ink); }
.wp-tick > span { display: grid; gap: 2px; }
.wp-tick b { justify-self: start; font-weight: var(--w-bold); }
.wp-tick > span > span { color: var(--ink-2); }
.wp-review__end { font-size: 14px; color: var(--ink-2); }

@media (max-width: 1180px) {
  .wp-desk { grid-template-columns: minmax(0, 1fr); }
  .wp-side { position: static; max-height: none; overflow: visible; }
  .wp-outline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .wp-part { padding-bottom: 0; }
  .wp-part:not(:last-child)::before { display: none; }
  .wp-editor textarea { min-height: 460px; }
}
@media (max-width: 760px) {
  .wp-item--chart .wp-item__link { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .wp-item__img { width: 88px; height: 60px; }
  .wp-item--chart .wp-item__link { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .wp-outline { grid-template-columns: minmax(0, 1fr); }
  .wp-crit { grid-template-columns: minmax(0, 1fr); }
  .wp-band > b { font-size: 34px; }
  .wp-editor textarea { min-height: 340px; padding: 14px 16px; font-size: 15.5px; }
  /* on a phone the toolbar sits above the bottom bar, where the thumb is */
  .wp-editor { display: flex; flex-direction: column; }
  .wp-bar { order: 2; position: sticky; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); gap: 8px 10px; padding: 8px 10px;
    border-radius: 0 0 20px 20px; border-bottom: 0; border-top: 1px solid var(--border-strong); box-shadow: 0 -6px 18px rgba(26, 51, 0, .06); }
  .wp-editor__hint { order: 1; }
  .wp-timer { padding: 6px 12px; }
  .wp-timer small { display: none; }
  .wp-bar .btn { padding-inline: 16px; }
}
@media (max-width: 420px) {
  .wp-switch a { padding: 10px 8px; font-size: 14px; }
  .wp-switch a small { display: none; }
  .wp-words small { display: none; }
}