/* Design directions under test (DS-10). Loaded only when a direction other than
   the current design is picked; English and light only for now. Each is a skin
   over the same markup (A: Clear Day, B: Painted City, C: Just Ask); screens
   that need a different structure get their own templates in a later step. */

/* ---------- A · Clear Day: sand and white, big type, purple only where you tap ---------- */
html[data-dir="a"] .z-title-1 { font-size: 34px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
html[data-dir="a"] .search__box { min-height: 54px; border-radius: 14px; border: 1.5px solid var(--z-border-strong); background: var(--z-bg-surface); }
html[data-dir="a"] .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-dir="a"] .tile { justify-items: center; text-align: center; align-content: start; gap: 8px; min-height: 112px; padding: 14px 6px 12px; border-radius: 16px; }
html[data-dir="a"] .tile__blob { position: static; z-index: auto; width: 56px; height: 56px; }
html[data-dir="a"] .tile__name { font: 700 14px/1.2 var(--z-font); }
html[data-dir="a"] .tile__meta { display: none; }
html[data-dir="a"] .match { border-radius: 16px; padding: 14px; }
html[data-dir="a"] .reasons { padding: 10px 12px; border-radius: 12px; background: var(--z-bg-page); }   /* Zoono's record, apart from the pro's own words (R9) */
html[data-dir="a"] .match.is-picked { border-width: 2px; }
html[data-dir="a"] .z-btn { border-radius: 14px; }
html[data-dir="a"] .z-chip { background: var(--z-bg-surface); }

/* ---------- B · Painted City: sticker outlines, big Zoonies, loud and recognisable ---------- */
html[data-dir="b"] { --b-line: var(--z-neutral-950); }
html[data-dir="b"] .z-title-1 { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
html[data-dir="b"] .search__box { min-height: 56px; border-radius: 999px; border: 2px solid var(--b-line); background: var(--z-bg-surface); }
html[data-dir="b"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { html[data-dir="b"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-dir="b"] .tile { min-height: 132px; padding: 14px; align-content: end; border-radius: 24px; border: 2px solid var(--b-line); }
html[data-dir="b"] .tile__blob { top: -26px; bottom: auto; inset-inline-end: -26px; width: 104px; height: 104px; }
html[data-dir="b"] .tile__name { font: 800 17px/1.2 var(--z-font); max-width: 110px; }
html[data-dir="b"] .tile__meta { display: none; }
html[data-dir="b"] .z-chip { border: 2px solid var(--b-line); background: var(--z-bg-surface); font-weight: 700; }
html[data-dir="b"] .z-chip[aria-current="true"] { background: var(--z-brand); color: var(--z-text-on-brand); border-color: var(--z-brand); }
html[data-dir="b"] .z-chip[aria-current="true"] .z-muted { color: inherit; opacity: .8; }
html[data-dir="b"] .z-list { border: 2px solid var(--b-line); border-radius: 24px; overflow: hidden; }
html[data-dir="b"] .match { border: 2px solid var(--b-line); border-radius: 28px; padding: 18px 16px; }
html[data-dir="b"] .match.is-picked { border: 3px solid var(--z-brand); }
html[data-dir="b"] .reasons { padding: 10px 12px; border-radius: 16px; background: var(--z-bg-page); }
html[data-dir="b"] .pick { border: 2px solid var(--b-line); font-weight: 800; }
html[data-dir="b"] .pick:has(:checked) { background: var(--z-brand); color: var(--z-text-on-brand); border-color: var(--z-brand); }
html[data-dir="b"] .z-btn { min-height: 52px; border-radius: 999px; font-weight: 800; }
html[data-dir="b"] .z-btn--secondary { border: 2px solid var(--b-line); }
html[data-dir="b"] .z-choice { border: 2px solid var(--b-line); border-radius: 999px; font-weight: 600; }
html[data-dir="b"] .z-choice:has(:checked) { background: var(--z-brand); color: var(--z-text-on-brand); border-color: var(--z-brand); }
html[data-dir="b"] .summary { border: 2px solid var(--b-line); border-radius: 24px; }
/* Pros get a workshop of their own: a charcoal band. */
html[data-dir="b"][data-role="pro"] .app-header { background: var(--z-neutral-950); color: var(--z-neutral-100); backdrop-filter: none; }
html[data-dir="b"][data-role="pro"] .app-header__link { color: var(--z-neutral-300); }
html[data-dir="b"][data-role="pro"] .app-header__link:hover { background: var(--z-neutral-900); color: var(--z-neutral-100); }
html[data-dir="b"][data-role="pro"] .app-header__link[aria-current="page"] { background: var(--z-neutral-100); color: var(--z-neutral-950); }
html[data-dir="b"][data-role="pro"] .wordmark img { filter: brightness(0) invert(1); }

/* ---------- C · Just Ask: how Egypt already books services, a chat ---------- */
html[data-dir="c"] .z-title-1 { font-size: 26px; line-height: 1.15; font-weight: 700; }
html[data-dir="c"] .section { margin-top: var(--z-space-5); gap: var(--z-space-2); }
html[data-dir="c"] .search__box { min-height: 52px; border-radius: 999px; border: 0; background: var(--z-bg-surface); box-shadow: 0 1px 2px rgb(26 26 26 / .12), 0 0 0 1px var(--z-border); padding-inline: 18px; }
html[data-dir="c"] .tile { border-radius: 18px 18px 18px 6px; min-height: 92px; }
html[data-dir="c"] .match { background: var(--z-bg-surface); border: 1px solid var(--c-edge); border-radius: 18px; padding: 14px; }
html[data-dir="c"] .match.is-picked { background: var(--z-bg-surface); border-color: var(--z-brand); }
html[data-dir="c"] .reasons li { font: 400 14px/1.4 var(--z-font); }
html[data-dir="c"] .z-choice { border-radius: 18px 18px 18px 6px; border: 1px solid var(--z-border); background: var(--z-bg-surface); }
html[data-dir="c"] .z-choice:has(:checked) { background: var(--z-brand); color: var(--z-text-on-brand); border-color: var(--z-brand); border-radius: 18px 18px 6px 18px; }
html[data-dir="c"] .pick { border-radius: 999px; }
html[data-dir="c"] .pick:has(:checked) { background: var(--z-brand); color: var(--z-text-on-brand); border-color: var(--z-brand); }
html[data-dir="c"] .z-list__item { min-height: 56px; }
html[data-dir="c"] .z-btn { border-radius: 999px; }
html[data-dir="c"] .summary { border-radius: 18px; }

/* C: matches as a side-by-side comparison. One column per pro; rows line up
   across columns (subgrid). More than three pros scroll sideways, snapping. */
html[data-dir="c"] .cmp-scroll { overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px; padding-bottom: 6px; scrollbar-width: none; }
html[data-dir="c"] .cmp-scroll::-webkit-scrollbar { display: none; }
html[data-dir="c"] .cmp {
  display: grid; grid-template-columns: repeat(var(--n), minmax(112px, 1fr)); grid-template-rows: auto; gap: 6px; align-items: stretch;
  min-width: min(100%, calc(var(--n) * 128px));
}
html[data-dir="c"] .cmp .match {
  grid-row: span 6; display: grid; grid-template-rows: subgrid; gap: 6px; padding: 0; border: 0; background: none; border-radius: 0; scroll-snap-align: start;
}
html[data-dir="c"] .cmp .match::after { display: none; }
html[data-dir="c"] .cmp__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; min-width: 0;
  padding: 10px 6px; border-radius: 12px; background: var(--z-bg-surface); font: var(--z-type-label); box-shadow: inset 0 0 0 1.5px transparent;
}
html[data-dir="c"] .cmp__head { padding-top: 6px; gap: 6px; border-radius: 16px; }
html[data-dir="c"] .cmp__head h2 { font: 700 14px/1.2 var(--z-font); overflow-wrap: anywhere; }
html[data-dir="c"] .match.is-picked .cmp__head { box-shadow: inset 0 0 0 2px var(--z-brand); }
html[data-dir="c"] .cmp__best { min-height: 20px; display: inline-flex; align-items: center; gap: 3px; font: 700 12px/1 var(--z-font); color: var(--z-text-brand); }
html[data-dir="c"] .cmp__label { font: 600 11px/1.2 var(--z-font); text-transform: uppercase; letter-spacing: .04em; color: var(--z-text-secondary); }
html[data-dir="c"] .cmp__cell b { font: 800 16px/1.2 var(--z-font); display: inline-flex; align-items: center; gap: 3px; }
html[data-dir="c"] .cmp__star { color: var(--z-accent-yellow); fill: currentColor; }
html[data-dir="c"] .cmp__fit { font: 400 13px/1.35 var(--z-font); align-items: center; }
html[data-dir="c"] .cmp__ok { display: inline-flex; gap: 4px; align-items: flex-start; color: var(--z-text-primary); }
html[data-dir="c"] .cmp__ok .z-icon { color: var(--z-success); flex: none; margin-top: 2px; }
html[data-dir="c"] .cmp__miss { display: inline-flex; gap: 4px; align-items: flex-start; color: var(--z-text-secondary); font-size: 12px; }
html[data-dir="c"] .cmp__act { background: none; box-shadow: none; padding-inline: 0; gap: 8px; }
html[data-dir="c"] .cmp__act .pick { min-height: 44px; padding: 0 12px; width: 100%; justify-content: center; }
html[data-dir="c"] .cmp__act .z-btn { width: 100%; }

/* C: lead triage, one card at a time. */
html[data-dir="c"] .tri { display: grid; gap: var(--z-space-3); max-width: 520px; }
html[data-dir="c"] .tri__meta { display: flex; align-items: center; justify-content: space-between; }
html[data-dir="c"] .tri__pips { display: flex; gap: 4px; }
html[data-dir="c"] .tri__pips i { width: 26px; height: 4px; border-radius: 9px; background: var(--z-bg-sunken); }
html[data-dir="c"] .tri__pips i.on { background: var(--z-text-primary); }
html[data-dir="c"] .tri__card { display: grid; gap: 14px; padding: 18px; border-radius: 22px; box-shadow: 0 1px 2px rgb(26 26 26 / .06), 0 10px 28px rgb(26 26 26 / .10); }
html[data-dir="c"] .tri__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
html[data-dir="c"] .tri__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html[data-dir="c"] .tri__facts li { display: grid; grid-template-columns: 38% 1fr; gap: 8px; }
html[data-dir="c"] .tri__note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--z-bg-page); display: grid; gap: 4px; }
html[data-dir="c"] .tri__signal { display: flex; align-items: center; gap: 6px; color: var(--z-text-secondary); font: var(--z-type-caption); }
html[data-dir="c"] .tri__fee { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--z-border); }
html[data-dir="c"] .tri__fee b { font: 800 24px/1 var(--z-font); }
html[data-dir="c"] .tri__actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
html[data-dir="c"] .tri__more { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }

/* B: matches as big cards you swipe through, one at a time. */
html[data-dir="b"] .b-car { list-style: none; margin: 0 -16px; padding: 4px 16px 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
html[data-dir="b"] .b-car::-webkit-scrollbar { display: none; }
html[data-dir="b"] .b-pro { flex: none; width: min(320px, 84vw); scroll-snap-align: center; display: flex; flex-direction: column; gap: 14px; }
html[data-dir="b"] .b-pro::after { display: none; }
html[data-dir="b"] .b-pro__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; padding-top: 6px; }
html[data-dir="b"] .b-pro__top .z-avatar { width: 84px; height: 84px; font-size: 28px; }
html[data-dir="b"] .b-pro__rank { position: absolute; top: 0; inset-inline-start: 0; display: inline-flex; align-items: center; gap: 4px; font: 800 12px/1 var(--z-font); background: var(--z-accent-yellow); color: var(--z-neutral-950); padding: 5px 9px; border-radius: 999px; border: 2px solid var(--z-neutral-950); }
html[data-dir="b"] .b-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 10px 4px; background: var(--z-bg-page); border-radius: 16px; text-align: center; }
html[data-dir="b"] .b-stats > div + div { border-inline-start: 1px solid var(--z-border); }
html[data-dir="b"] .b-stats dt { font: 600 11px/1.2 var(--z-font); text-transform: uppercase; letter-spacing: .04em; color: var(--z-text-secondary); }
html[data-dir="b"] .b-stats dd { margin: 2px 0 0; font: 800 17px/1.3 var(--z-font); display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
html[data-dir="b"] .b-star { color: var(--z-accent-yellow); fill: currentColor; }
html[data-dir="b"] .b-pro__act { margin-top: auto; display: grid; gap: 8px; justify-items: center; }
html[data-dir="b"] .b-pick { width: 100%; justify-content: center; min-height: 52px; }
html[data-dir="b"] .b-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
html[data-dir="b"] .b-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--z-border-strong); transition: width var(--z-duration-fast) var(--z-ease); }
html[data-dir="b"] .b-dots i.on { width: 22px; background: var(--z-text-primary); }

/* B: the pro's workshop, a charcoal band with the balance. */
html[data-dir="b"] .band { background: var(--z-neutral-950); color: var(--z-neutral-100); border-radius: 28px; padding: 18px 18px 14px; margin-bottom: var(--z-space-5); display: grid; gap: 6px; }
html[data-dir="b"] .band__cap { font: 600 13px/1.2 var(--z-font); color: var(--z-neutral-300); }
html[data-dir="b"] .band__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
html[data-dir="b"] .band__label { display: block; font: 600 12px/1.2 var(--z-font); color: var(--z-neutral-300); }
html[data-dir="b"] .band__bal { font: 800 38px/1.1 var(--z-font); letter-spacing: -0.02em; }
html[data-dir="b"] .band__btn { background: var(--z-accent-yellow); color: var(--z-neutral-950); border-radius: 999px; font-weight: 800; }
html[data-dir="b"] .band__foot { font: 600 14px/1.3 var(--z-font); color: var(--z-neutral-100); }
html[data-dir="b"] .b-leads { list-style: none; margin: var(--z-space-3) 0 0; padding: 0; display: grid; gap: 12px; }
html[data-dir="b"] .b-lead { display: grid; gap: 6px; padding: 16px; border-radius: 24px; background: var(--z-bg-surface); border: 2px solid var(--b-line); text-decoration: none; color: inherit; }
html[data-dir="b"] .b-lead__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
html[data-dir="b"] .b-fee { flex: none; background: var(--z-accent-yellow); color: var(--z-neutral-950); font: 800 15px/1 var(--z-font); padding: 8px 12px; border-radius: 999px; border: 2px solid var(--z-neutral-950); white-space: nowrap; }
html[data-dir="b"] .b-lead__foot { margin-top: 4px; }

/* C: the intake as a conversation: earlier answers above, the question as the next message. */
html[data-dir="c"] .chat { display: grid; gap: 10px; padding-bottom: var(--z-space-3); }
html[data-dir="c"] .chat__turn { display: grid; gap: 6px; }
html[data-dir="c"] .chat__q { justify-self: start; max-width: 88%; margin: 0; padding: 8px 14px; border-radius: 18px 18px 18px 6px; background: var(--z-bg-surface); font: var(--z-type-caption); color: var(--z-text-secondary); }
html[data-dir="c"] .chat__a { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--z-brand); color: var(--z-text-on-brand); font-weight: 600; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
html[data-dir="c"] .chat__a:hover { background: var(--z-brand-hover); }
html[data-dir="c"] .chat__a:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 2px; }
html[data-dir="c"] .chat__older summary { cursor: pointer; color: var(--z-text-brand); padding: 6px 2px; }
html[data-dir="c"] .chat__older[open] { display: grid; gap: 10px; }
html[data-dir="c"] .flow__legend h1 { display: block; width: fit-content; max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--z-bg-surface); font: 700 20px/1.25 var(--z-font); }

/* C on a grey page: every white surface gets an edge and a small lift, so nothing dissolves into the page. */
html[data-dir="c"] .tile, html[data-dir="c"] .z-card, html[data-dir="c"] .z-list, html[data-dir="c"] .summary,
html[data-dir="c"] .match, html[data-dir="c"] .tri__card, html[data-dir="c"] .lead-row {
  border: 1px solid var(--c-edge); box-shadow: 0 1px 2px rgb(26 30 60 / .06);
}
html[data-dir="c"] .z-list > li + li .z-list__item, html[data-dir="c"] .summary__row + .summary__row { border-top-color: var(--c-edge); }
html[data-dir="c"] .search__box { box-shadow: 0 1px 2px rgb(26 30 60 / .08), 0 0 0 1px var(--c-edge); }
html[data-dir="c"] .match.is-picked { border-color: var(--z-brand); box-shadow: 0 0 0 1px var(--z-brand); }
html[data-dir="c"] .z-choice { border-color: var(--c-edge); box-shadow: 0 1px 2px rgb(26 30 60 / .06); }
html[data-dir="c"] .z-input { border-color: var(--z-border-strong); }
html[data-dir="c"] .app-tabbar, html[data-dir="c"] .app-header { background: color-mix(in srgb, var(--z-bg-surface) 92%, transparent); border-color: var(--c-edge); }
html[data-dir="c"] .tri__note, html[data-dir="c"] .reasons { background: var(--z-bg-page); }
html[data-dir="c"] :is(.z-card, .z-list, .tri__card) .summary { border: 0; box-shadow: none; padding-inline: 0; }

/* ---- Header and footer variants (DS-19). Base lives in app.css. ---- */
/* A · Clear Day: a hairline under the header, a hairline over a calm footer. */
html[data-dir="a"] .app-header { border-bottom: 1px solid var(--z-border); }
/* A's brand moment: a purple footer with the white wordmark. */
html[data-dir="a"] .site-footer { background: var(--z-brand); color: rgb(255 255 255 / .86); margin-top: var(--z-space-7, 48px); }
html[data-dir="a"] .site-footer__links a { color: #fff; font-weight: 600; }
html[data-dir="a"] .site-footer__links a:hover { text-decoration: underline; }
html[data-dir="a"] .site-footer__logo { display: block; width: 104px; height: 33px; background: #fff; -webkit-mask: var(--logo) no-repeat left center / contain; mask: var(--logo) no-repeat left center / contain; margin-bottom: 4px; }
html[data-dir="a"] .site-footer a:focus-visible { outline-color: #fff; }
html[data-dir="a"] .signin .site-footer { background: none; color: var(--z-text-secondary); }
html[data-dir="a"] .signin .site-footer__links a { color: var(--z-text-primary); }
html[data-dir="a"] .signin .site-footer__logo { display: none; }

/* B · Painted City: an ink line under the header; a charcoal footer band with a Zoonie peeking in. */
html[data-dir="b"] .app-header { border-bottom: 2px solid var(--b-line); background: var(--z-bg-page); backdrop-filter: none; }
html[data-dir="b"][data-role="pro"] .app-header { border-bottom-color: var(--b-line); }
html[data-dir="b"] .app-header__link[aria-current="page"] { background: var(--z-accent-yellow); color: var(--z-neutral-950); }
html[data-dir="b"] .app-header__lang { border: 2px solid var(--b-line); font-weight: 700; }
html[data-dir="b"] .site-footer { margin-top: var(--z-space-7, 48px); background: var(--z-neutral-950); color: var(--z-neutral-200); position: relative; overflow: hidden; }
html[data-dir="b"] .site-footer::after { content: ""; position: absolute; inset-inline-end: -28px; top: -36px; width: 120px; height: 120px; background: var(--z-accent-pink); border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; opacity: .9; }
html[data-dir="b"] .site-footer__inner { position: relative; z-index: 1; }
html[data-dir="b"] .site-footer__links a { color: #fff; font-weight: 700; }
html[data-dir="b"] .site-footer__links a:hover { color: var(--z-accent-yellow); }
html[data-dir="b"] .signin .site-footer { background: none; color: var(--z-text-secondary); }
html[data-dir="b"] .signin .site-footer::after { display: none; }
html[data-dir="b"] .signin .site-footer__links a { color: var(--z-text-primary); }

/* C · Just Ask: a white header on the grey page; footer links as small message chips. */
html[data-dir="c"] .app-header { background: var(--z-bg-surface); border-bottom: 1px solid var(--c-edge); backdrop-filter: none; }
html[data-dir="c"] .app-header__link { border-radius: 18px 18px 18px 6px; }
html[data-dir="c"] .app-header__lang { border: 1px solid var(--c-edge); }
html[data-dir="c"] .site-footer__links { gap: 8px; }
html[data-dir="c"] .site-footer__links a { padding: 0 14px; min-height: 36px; border-radius: 18px 18px 18px 6px; background: var(--z-bg-surface); border: 1px solid var(--c-edge); color: var(--z-text-primary); font-weight: 600; }
html[data-dir="c"] .site-footer__links a:hover { text-decoration: none; border-color: var(--z-brand); }
html[data-dir="c"] .site-footer__fine { margin-top: 4px; }