/* The desktop layer of every stepwise flow (/zh|en/verify/, /notice/, /doc/ and the free check /check/), with desk.js.
   One shell: from 1024 px the question column (~45%) sits beside a full-height contextual panel (~55%); the primary button sits right under the
   options (no floating bottom bar); the content spans up to 1600 px, so at 1440 and 1920 there are no dead gutters. Under 1024 px nothing here
   changes the single column except the segmented progress, which is named by stage on every width. Tokens: brand.css. */

/* ---- segmented progress, named by stage (all widths) ---- */
.dk-seg { display: flex; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.dk-seg li { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; }
.dk-seg i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.dk-seg b { display: block; height: 100%; background: var(--brand); transform-origin: left; transition: transform .24s var(--ease); }
.dk-seg span { font: 400 13px/1.3 var(--font); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-seg .is-cur span { color: var(--ink); font-weight: 600; }
.dk-seg .is-done span { color: var(--ink-2); }
.fl-prog .dk-seg, .progress .dk-seg { flex: 1; }
.dk-segwrap { flex: 1; min-width: 0; }
.fl-prog { align-items: flex-start; }

/* ---- the panel: not on phones; its why + source live in the collapsed "why?" there ---- */
.dk-panel { display: none; }
.dk-why-m { margin: 8px 0 0; }
.dk-why-m .why-in { padding: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.dk-why-m .why-in p { margin: 0 0 8px; }

@media (min-width: 1024px) {
  .dk-why-m { display: none !important; }
  .dk-panel { display: block; position: sticky; top: 72px; height: calc(100dvh - 88px); min-height: 560px; align-self: start; min-width: 0; }
  .dk-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: 32px 32px 24px; border-radius: 28px; background: var(--surface-2); overflow: hidden; }
  .dk-tag { position: absolute; top: 20px; right: 24px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--ink-3); font: 600 12px/1.4 var(--font); box-shadow: inset 0 0 0 1px var(--line); }
  .dk-art { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .dk-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .dk-svg svg { display: block; width: 100%; height: 100%; max-height: 100%; }
  .dk-svg svg text { font-family: var(--font); }
  .dk-foot { flex: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .dk-why { margin: 0; font: 400 17px/1.65 var(--font); color: var(--ink); max-width: 46em; }
  .dk-why b { font-weight: 600; color: var(--brand); }
  .dk-src { margin: 8px 0 0; font: 400 14px/1.5 var(--font); color: var(--ink-3); }
  .dk-ph { width: 100%; max-width: 560px; border-radius: 24px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .dk-art[data-photo] { flex-direction: column; }
  .dk-catname { margin: 16px 0 0; font: 600 20px/1.4 var(--font); text-align: center; }
  [data-art="photo"] .dk-art { flex-direction: column; }

  /* the summary / score panel */
  .dk-res { width: 100%; max-width: 480px; display: grid; justify-items: center; gap: 12px; text-align: center; }
  .dk-res-ic { width: 112px; height: 112px; }
  .dk-res--ok { color: var(--ok); } .dk-res--warn { color: var(--warn); } .dk-res--bad { color: var(--bad); }
  .dk-res-t { margin: 0; font: 600 24px/1.4 var(--font); color: var(--ink); text-wrap: balance; }
  .dk-res-rows { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; text-align: left; }
  .dk-res-rows li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 400 16px/1.45 var(--font); color: var(--ink); }
  .dk-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); }
  .dk-res-rows .lv-warn .dk-dot { background: var(--warn); }
  .dk-res-rows .lv-bad .dk-dot { background: var(--bad); }

  /* ---- the steps.js tools (notice, verify): one grid, the question left, the panel right ---- */
  body.desk .top-in { max-width: 1680px; padding: 0 40px; }
  body.desk .fl-wrap { max-width: 1680px; padding: 0 40px; }
  body.desk .fl { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-rows: auto auto auto 1fr; column-gap: 64px; align-content: start; min-height: calc(100dvh - 56px); padding-bottom: 16px; }
  body.desk .fl > .q-top { grid-column: 1; grid-row: 1; margin: 32px 0 0; max-width: 600px; width: 100%; }
  body.desk .fl > .fl-screens { grid-column: 1; grid-row: 2; padding: 16px 0 0; max-width: 600px; width: 100%; flex: none; }
  body.desk .fl > .fl-dock { grid-column: 1; grid-row: 3; margin: 0; border: 0; max-width: 600px; width: 100%; }
  body.desk .fl > .dk-panel { grid-column: 2; grid-row: 1 / span 4; margin-top: 16px; }
  /* the back link keeps its place when hidden, so the progress bar does not jump between the first screen and the rest */
  body.desk .q-top .back[hidden] { display: inline-flex !important; visibility: hidden; }
  /* the result is long: its primary stays in view at the foot of the left column */
  /* inline under the options while it fits; when the screen is taller than the window it stays at the foot of the left column, never over the panel */
  body.desk .fl > .fl-dock { position: sticky; bottom: 0; z-index: 5; padding: 16px 0 24px; background: #fff; box-shadow: 0 -14px 14px -6px #fff; }
  /* category tiles: a small photo beside the name, two columns, so the button stays in the first screen */
  body.desk .opts--c, body.desk .opts--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.desk .opts--c .opt--tile, body.desk .opts--cat .opt--tile { flex-direction: row; align-items: center; min-height: 0; padding: 0 44px 0 0; border-radius: 16px; }
  body.desk .opts--c .opt--tile .ph, body.desk .opts--cat .opt--tile .ph { flex: none; width: 92px; aspect-ratio: 4 / 3; }
  body.desk .opts--c .opt--tile .opt-body, body.desk .opts--cat .opt--tile .opt-body { padding: 8px 8px 8px 12px; }
  body.desk .opts--c .opt--tile .opt-name, body.desk .opts--cat .opt--tile .opt-name { font-size: 15px; }
  body.desk .opts--c .opt--tile::after, body.desk .opts--cat .opt--tile::after { top: 50%; right: 12px; margin-top: -12px; }
  body.desk .fl-dock-in { max-width: none; justify-items: start; }
  body.desk .fl-dock .btn { width: auto; min-width: 260px; }
  body.desk .fl-err, body.desk .fl-alt { text-align: left; justify-self: start; }
  body.desk .fl h1.h1, body.desk .fl h2.h1 { font-size: 34px; line-height: 1.25; margin: 12px 0 8px; }
  :lang(en) body.desk .fl h1.h1, :lang(en) body.desk .fl h2.h1 { font-size: 36px; line-height: 1.12; }
  body.desk .fl .sub { font-size: 18px; }
  .fl-screens[data-wide] { max-width: none; }
  body.desk .seo, body.desk .seo-foot { max-width: 1680px; padding-left: 40px; padding-right: 40px; }
  body.desk .seo > * { max-width: 760px; }
  /* the result screens read better wide: the panel keeps the summary, the left column the details */
  body.desk .fl .blks { margin-top: 8px; }

  /* ---- /doc/ and /check/ (flow-grid): the same two columns ---- */
  body.desk .flow-grid { max-width: 1680px; padding: 24px 40px 48px; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 64px; align-items: start; }
  body.desk .flow-main { max-width: none; }
  body.desk .flow-main > .screen { max-width: 620px; }
  body.desk.doc .flow-grid { display: grid; }
  body.desk.doc .flow-grid > .flow-main { grid-column: 1; grid-row: 1; }
  body.desk.doc .flow-grid > .sumbar { grid-column: 1; grid-row: 2; position: sticky; bottom: 0; z-index: 5; display: block; border: 0; background: #fff; box-shadow: 0 -14px 14px -6px #fff; padding: 16px 0 24px; }
  body.desk.doc .flow-grid > .sumbar .sumbar-in { max-width: 620px; margin: 0; padding: 0; min-height: 0; }
  body.desk.doc .flow-grid > .sumbar .btn { flex: none; width: auto; min-width: 260px; }
  body.desk.doc .flow-grid > .dk-panel { grid-column: 2; grid-row: 1 / span 3; }
  body.desk.doc .doc-more { grid-column: 1 / -1; grid-row: 4; }
  body.desk .flow-grid .h1 { font-size: 36px; line-height: 1.22; }
  :lang(en) body.desk .flow-grid .h1 { font-size: 36px; line-height: 1.1; }
}

/* ---- /check/ (#flow): the question left, the tally + the contextual panel right; the result keeps the old wide receipt + actions card ---- */
.inline-cta { display: none; }
@media (min-width: 1024px) {
  body.desk #flow > .panel { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 72px; height: calc(100dvh - 88px); min-height: 560px; align-self: start; }
  body.desk #flow .panel-in { height: 100%; display: flex; flex-direction: column; min-height: 0; padding: 32px 32px 24px; border-radius: 28px; background: var(--surface-2); box-shadow: none; overflow: hidden; }
  body.desk #flow .panel-in > .dk-panel { display: block; align-self: stretch; position: static; height: auto; flex: 1 1 auto; min-height: 0; }
  body.desk #flow .dk-card { padding: 0; background: none; border-radius: 0; }
  body.desk #flow .dk-tag { display: none; }
  body.desk #flow .panel-in > .tally-label { flex: none; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
  body.desk #flow .panel-in > .tally { flex: none; margin: 0; }
  body.desk #flow .tally-n { font-size: 36px; }
  body.desk #flow .panel-in > .tally-rows { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
  body.desk #flow .tally-rows li { padding: 4px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  body.desk #flow .tally-rows li:last-child { border: 0; }
  body.desk #flow .tally-rows .tr-why { display: none; }
  body.desk #flow .tr-name { font-size: 14px; }
  body.desk #flow .panel-in > .btn, body.desk #flow .panel-in > .reassure { display: none; }
  body.desk #flow .inline-cta { display: block; position: sticky; bottom: 0; z-index: 5; max-width: 620px; margin: 24px 0 0; padding: 16px 0 24px; background: #fff; box-shadow: 0 -14px 14px -6px #fff; }
  body.desk #flow .inline-cta .btn { width: auto; min-width: 260px; }
  body.desk #flow .inline-cta .reassure { margin: 8px 0 0; text-align: left; }
  body.desk #flow .flow-foot { max-width: 620px; }
  /* the result, the contact form and the confirmation: wide receipt on the left, the actions card on the right, no contextual panel */
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow { grid-template-columns: minmax(0, 760px) 400px; justify-content: center; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .flow-main > .screen { max-width: none; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow > .panel { height: auto; min-height: 0; top: 88px; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .panel-in { height: auto; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 24px; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .panel-in > :is(.tally-label, .tally, .tally-rows, .tally-also) { display: none; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .panel-in > .btn { display: inline-grid; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .panel-in > .reassure { display: block; }
  body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .dk-panel, body.desk:is([data-step="result"], [data-step="contact"], [data-step="done"]) #flow .inline-cta { display: none; }
}
@media (min-width: 1440px) {
  body.desk .fl > .q-top, body.desk .fl > .fl-screens, body.desk .fl > .fl-dock { max-width: 640px; }
}
@media (max-width: 1023px) { .dk-seg { gap: 4px; } .dk-seg span { font-size: 12px; white-space: normal; text-overflow: clip; line-height: 1.25; } }

/* ---- /book/ (the booking flow): the same two columns. The question + answers + the one primary on the left (the dock stays in view), the drawing
   on the right, the progress named by stage in the header. Under 1024 px none of this applies: the phone keeps its bar, its fixed dock and no panel. ---- */
.bk-seg { display: none; }
@media (min-width: 1024px) {
  body.bk .bar-in, body.bk .bk-seg { max-width: 1680px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  body.bk .bar-in { height: 64px; }
  body.bk .prog { display: none; }
  body.bk .bk-seg { display: block; padding-bottom: 12px; }
  body.bk .wrap:not(.wrap--status) { max-width: 1680px; padding: 24px 40px 0; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: 64px; align-items: start; min-height: calc(100dvh - 90px); }
  body.bk .bk-col { grid-column: 1; grid-row: 1; width: 100%; max-width: 640px; min-width: 0; display: flex; flex-direction: column; min-height: calc(100dvh - 120px); }
  body.bk .bk-col > .screen { order: 1; }
  body.bk .bk-col > .dock { order: 2; position: sticky; bottom: 0; z-index: 5; margin-top: auto; padding: 16px 0 24px; background: #fff; box-shadow: 0 -14px 14px -6px #fff; }
  body.bk .bk-col > .legal-foot { order: 3; }
  body.bk .dock-row { max-width: none; }
  body.bk .dock-row .btn { flex: 0 0 auto; width: auto; min-width: 260px; }
  body.bk .wrap > .dk-panel { grid-column: 2; grid-row: 1; top: 16px; height: calc(100dvh - 140px); min-height: 480px; }
  body.bk .h1 { font-size: 34px; line-height: 1.25; margin: 4px 0 8px; }
  :lang(en) body.bk .h1 { font-size: 36px; line-height: 1.12; }
  body.bk .sub { font-size: 18px; }
}