/* web/help/help.css — layout for the helper's door and "my tasks". Consumes web/design.css (lane W) for the
   tokens, the themes ([data-theme="soft"|"dusk"] on :root) and the component classes (.card .row .btn
   .btn-primary .btn-secondary .chip .eyebrow .label .hero-figure .is-gold); everything here is page layout
   and the few page-only pieces (the progress rule, the question screens, the task rows). The --h-* aliases
   read design.css's tokens (--canvas --card --raised --input --hair --hair-strong --text --text-2 --accent
   --green --red --grey --font-sans --font-mono) and fall back to the design file's ink-theme constants
   (DESIGN_SYSTEM_EMPIRE_MAX.md §2–§4) only when design.css is absent, never to an invented colour.
   Gold appears once per screen: the one row that needs the helper, else the hero figure. */

.help {
  --h-canvas: var(--canvas, #17171C);
  --h-card: var(--card, #1E1E24);
  --h-raised: var(--raised, #26262D);
  --h-input: var(--input, #2E2E36);
  --h-hair: var(--hair, rgba(245, 243, 234, .08));
  --h-hair-2: var(--hair-strong, rgba(245, 243, 234, .16));
  --h-text: var(--text, #F5F3EA);
  --h-text-2: var(--text-2, #9B9BA5);
  --h-gold: var(--accent, #B89438);
  --h-green: var(--green, #2A7043);
  --h-red: var(--red, #9E2E24);
  --h-grey: var(--grey, #6B6B75);
  --h-sans: var(--font-sans, "IBM Plex Sans Arabic", system-ui, sans-serif);
  --h-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  /* RESOLVED (design §3; lane K1 ruled the same way in DESIGN_LOOP_K1): the design file admits exactly two
     faces, and IBM Plex Serif carries no Arabic at all — an Arabic-first door would have fallen through to
     a system serif for its own titles. There is no third family here: the titles set in the sans, at the
     design file's own sizes and weights, like the client's interview question one lane over. */
  --h-ease: var(--ease-open, cubic-bezier(.2, .7, .2, 1));
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--h-canvas);
  color: var(--h-text);
  font-family: var(--h-sans);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.help *, .help *::before, .help *::after { box-sizing: border-box; }
.help p, .help h1, .help h2, .help ul { margin: 0; }
.help ul { padding: 0; list-style: none; }
.help a { color: inherit; }
.help [hidden] { display: none !important; }

/* skip link */
.help-skip { position: absolute; inset-inline-start: 12px; inset-block-start: -48px; z-index: 2; padding: 8px 12px; min-block-size: var(--target, 44px); display: inline-flex; align-items: center; background: var(--h-raised); border: 1px solid var(--h-hair-2); border-radius: 999px; }
.help-skip:focus { inset-block-start: 8px; z-index: 10; }

/* the page sits above design.css's fixed background stack */
.help-bar, .help-main, .help-foot { position: relative; z-index: 1; }
/* the bar, the cards and the footer read as glass over the wallpaper, like every other surface */
.help-bar, .help-foot { background: var(--glass, var(--h-card)); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
/* a heading is focused by script when a screen changes so a screen reader lands on it; it is not a control,
   so it does not draw a focus ring (it is not reachable by Tab either) */
.help-screen h1[tabindex]:focus, .help-screen h1[tabindex]:focus-visible,
.help-screen h2[tabindex]:focus, .help-screen h2[tabindex]:focus-visible { outline: none; }

/* bar */
.help-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; border-block-end: 1px solid var(--h-hair); }
.help-mark { display: inline-flex; align-items: center; min-block-size: var(--target, 44px); gap: 8px; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.help-mark-ring { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--h-hair-2); position: relative; }
.help-mark-ring::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; inset-inline-start: 6px; inset-block-start: 4px; }
.help-bar-side { display: flex; align-items: center; gap: 8px; }
.help-who { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* main column */
.help-main { flex: 1; width: 100%; max-width: 720px; margin-inline: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.help-screen { display: flex; flex-direction: column; gap: 14px; }
.help-foot { padding: 12px 16px 24px; border-block-start: 1px solid var(--h-hair); text-align: center; display: grid; gap: 6px; }
/* the one-line legal footer: the four documents this door is judged by (R3-24) */
.help-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.help-legal a { color: var(--h-text-2, var(--text-2)); text-decoration: underline; text-underline-offset: 2px; }
.help-legal a:hover { color: var(--h-text, var(--text)); }
/* a label the h2 above already says: kept for the input's accessible name, taken off the screen (R3-26) */
.help-sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.help .eyebrow, .help .label { font-size: 11px; color: var(--h-text-2); font-weight: 400; }
.help-title { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: var(--track-display, -.01em); }
.help[lang="ar"] .help-title, :lang(ar) .help-title { letter-spacing: 0; }
.help-question { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: var(--track-display, -.01em); }
.help[lang="ar"] .help-question, :lang(ar) .help-question { letter-spacing: 0; }
.help-lead { font-size: 14px; line-height: 22px; }
.help-honest { font-size: 14px; line-height: 22px; padding-inline-start: 12px; border-inline-start: 1px solid var(--h-hair-2); }
.help-muted { color: var(--h-text-2); }
.help-body { font-size: 13px; line-height: 20px; }
.help-caption { font-size: 12px; color: var(--h-text-2); }
.help-link { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.help-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.help-mono { font-family: var(--h-mono); font-size: 12px; }
.help-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* cards (design.css .card is the surface; these are the page's inner layout) */
.help-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--h-hair); border-radius: 12px; background: var(--h-card); }
.help-two { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .help-two { grid-template-columns: 1fr 1fr; } }
.help-hero-card .hero-figure { font-size: 40px; line-height: 44px; font-weight: 500; }
.help-hero-card .hero-figure.is-gold { color: var(--h-gold); }

/* rows: hairline-separated, fixed height, [dot] [serial] [title, flex] [state] [value] */
.help-rows { display: flex; flex-direction: column; }
.help-rows > * + * { border-block-start: 1px solid var(--h-hair); }
.help-row { display: grid; grid-template-columns: 8px auto 1fr auto; align-items: center; gap: 12px; block-size: auto; min-block-size: var(--row-44, 44px); padding: 6px 0; border: 0; text-align: start; background: none; color: inherit; font: inherit; width: 100%; cursor: default; }
button.help-row { cursor: pointer; border-radius: 8px; }
button.help-row:hover { background: var(--h-input); }
.help-row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-grey); }
.help-row-dot.is-green { background: var(--h-green); }
.help-row-dot.is-red { background: var(--h-red); }
.help-row-serial { font-family: var(--h-mono); font-size: 11px; color: var(--h-text-2); min-width: 5ch; }
.help-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-row-title { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-row-sub { font-size: 11px; color: var(--h-text-2); }
.help-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.help-row-state { font-size: 12px; }
.help-row-value { font-size: 12px; color: var(--h-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.help-row.is-gold .help-row-dot { background: var(--h-gold); }
.help-row.is-gold .help-row-state, .help-row.is-gold .help-row-serial { color: var(--h-gold); }
.help-empty { min-height: 36px; display: flex; align-items: center; font-size: 12px; color: var(--h-text-2); }

/* buttons and chips (the design's pills; fallback sizing when design.css is absent) */
.help .btn { display: inline-flex; align-items: center; justify-content: center; block-size: auto; min-block-size: var(--row-44, 44px); padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background-color var(--dur-hover, 120ms) ease-out, border-color var(--dur-hover, 120ms) ease-out; }
.help .btn-primary { background: var(--control, var(--h-text)); color: var(--control-text, var(--h-canvas)); }
.help .btn-primary:hover { background: var(--control-hover, var(--h-text-2)); }
.help .btn-secondary { background: none; color: inherit; border-color: var(--h-hair-2); }
.help .btn-secondary:hover { border-color: var(--h-text-2); }
.help .btn:disabled { opacity: .5; cursor: not-allowed; }
.help-lang { min-height: 32px; padding: 0 12px; font-family: var(--h-mono); font-size: 11px; }
.help-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help-actions-split { justify-content: space-between; }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.help .chip { display: inline-flex; align-items: center; block-size: auto; min-block-size: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--h-hair-2); background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; transition: background-color var(--dur-hover, 120ms) ease-out; }
.help .chip[aria-pressed="true"] { background: var(--control, var(--h-input)); color: var(--control-text, var(--h-text)); border-color: transparent; }
.help .chip.is-static { cursor: default; }
@media (pointer: coarse) { .help .chip, .help-link { min-block-size: var(--row-44, 44px); } }

/* the application */
.help-progress { height: 1px; background: var(--h-hair); overflow: hidden; }
.help-progress-fill { display: block; height: 100%; width: 0; background: var(--h-gold); opacity: .55; transition: width 200ms var(--h-ease); }
.help-form { display: flex; flex-direction: column; gap: 12px; padding-block: 8px; }
.help-field { display: flex; flex-direction: column; gap: 8px; }
.help-field-label { font-size: 11px; color: var(--h-text-2); }
.help input[type="text"], .help input[type="number"], .help input[type="url"], .help textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--h-hair-2); background: var(--h-input); color: inherit; font: inherit; font-size: 14px; }
.help textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.help input:focus-visible, .help textarea:focus-visible, .help .btn:focus-visible, .help .chip:focus-visible, .help a:focus-visible, .help button.help-row:focus-visible { outline: 2px solid var(--h-text); outline-offset: 2px; }
.help-hint { min-height: 16px; }
.help-error { min-height: 20px; font-size: 12px; color: var(--h-text); }
.help-error:not(:empty) { padding-inline-start: 10px; border-inline-start: 2px solid var(--h-red); }
.help-error-page:empty { display: none; }
.help-counter { font-family: var(--h-mono); font-size: 11px; color: var(--h-text-2); align-self: flex-end; }
.help-enter { text-align: end; }
.help-terms-points { display: flex; flex-direction: column; }
.help-terms-points li { min-height: 28px; display: flex; align-items: center; border-block-start: 1px solid var(--h-hair); font-size: 13px; }
.help-terms-points li:first-child { border-block-start: 0; }
.help-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; }
.help-summary dt { color: var(--h-text-2); }
.help-summary dd { margin: 0; overflow-wrap: anywhere; }

/* status */
.help-status-value { font-size: 22px; line-height: 28px; font-weight: 500; }

/* task detail */
.help-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.help-detail-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.help-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.help-meta-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-block-start: 1px solid var(--h-hair); }
.help-meta-value { font-size: 14px; }
.help-inputs li { min-height: 32px; display: flex; align-items: center; border-block-start: 1px solid var(--h-hair); }
.help-inputs li:first-child { border-block-start: 0; }
.help-verdict { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--h-hair-2); border-radius: 8px; }
/* the judge's five-line block: an LTR machine format whose values may be Arabic, so each value is a <bdi>
   and the line's own punctuation stays where it was written */
.help-verdict pre { margin: 0; font-family: var(--h-mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; direction: ltr; text-align: start; }
.help-verdict pre bdi { unicode-bidi: isolate; }
.help-brief { white-space: pre-wrap; font-size: 13px; line-height: 20px; }
.help-referral-code { font-family: var(--h-mono); font-size: 16px; letter-spacing: .08em; }
.help-referral-link { font-family: var(--h-mono); font-size: 12px; overflow-wrap: anywhere; }

/* motion: only when something changed (a screen entered); none under reduced motion */
.help-screen.is-entering { animation: help-enter 200ms var(--h-ease); }
@keyframes help-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .help-screen.is-entering { animation: none; }
  .help-progress-fill, .help .btn, .help .chip { transition: none; }
}