/* ==========================================================================
   Asian's page
     1. App colors (content: the restaurant app's own palette)
     2. Survey donuts
     3. Persona
     4. Early concepts
     5. Design system kit: colors, type, icons, buttons
     6. Sketch to design
     7. Card sort, menu wireframe and site map
     8. A/B versions
   ========================================================================== */

/* 1. App colors ------------------------------------------------------------ */
:root {
  --app-orange: #ff5200;
  --app-light-orange: #fe724c;
  --app-pink-red: #fb2d52;
  --app-green: #00b46e;
  --app-lime: #93bc2d;
  --app-charcoal: #272727;
  --app-white: #fafafa;
  --donut-2: #9a968b;
  --donut-3: #e7e3d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --donut-2: #8a877e;
    --donut-3: #4a4844;
  }
}
:root[data-theme="dark"] {
  --donut-2: #8a877e;
  --donut-3: #4a4844;
}
.app-c--orange { --c: var(--app-orange); }
.app-c--light-orange { --c: var(--app-light-orange); }
.app-c--pink-red { --c: var(--app-pink-red); }
.app-c--green { --c: var(--app-green); }
.app-c--lime { --c: var(--app-lime); }
.app-c--charcoal { --c: var(--app-charcoal); }

/* 2. Survey donuts --------------------------------------------------------- */
.donuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.donut {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 16px 20px;
}
.donut figcaption,
.donuts__about h4 {
  font-family: var(--heading-font);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* the ring and its center label share one grid cell */
.donut__chart {
  display: grid;
  place-items: center;
  width: 200px;
  max-width: 100%;
  align-self: center;
}
.donut__chart > * {
  grid-area: 1 / 1;
}
.donut__chart svg {
  width: 100%;
  height: auto;
}
.donut__slice {
  fill: none;
  stroke-width: 15;
  transition: stroke-width 0.2s, opacity 0.2s;
}
.donut__slice--1 { stroke: var(--app-orange); }
.donut__slice--2 { stroke: var(--donut-2); }
.donut__slice--3 { stroke: var(--donut-3); }
.donut__chart[data-on] .donut__slice {
  opacity: 0.45;
}
.donut__chart[data-on="0"] .donut__slice--1,
.donut__chart[data-on="1"] .donut__slice--2,
.donut__chart[data-on="2"] .donut__slice--3 {
  opacity: 1;
  stroke-width: 18;
}
.donut__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 110px;
  text-align: center;
  line-height: 1.3;
}
.donut__center b {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 600;
}
.donut__legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.donut__legend button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-weight: 500;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.donut__legend button span {
  margin-left: auto;
}
.donut__legend button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.donut__key {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.donut__key--1 { background: var(--app-orange); }
.donut__key--2 { background: var(--donut-2); }
.donut__key--3 { background: var(--donut-3); }
.donut__note,
.donuts__about p {
  line-height: 1.5;
  color: var(--text);
}
.donuts__about {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}
@media (max-width: 1100px) {
  .donuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .donuts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 3. Persona --------------------------------------------------------------- */
.persona {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 24px 32px;
}
.persona__id {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.persona__id img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.persona__id h4 {
  margin-top: 10px;
  font-size: var(--fs-h3);
}
.persona__sub {
  color: var(--text);
}
.persona__facts {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}
.persona__facts dt {
  font-weight: 600;
  color: var(--accent-text);
}
.persona__story {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.persona__story blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  line-height: 1.6;
}
.persona__label,
.persona__lists h5 {
  font-family: var(--body-font);
  margin-top: 8px;
  font-weight: 600;
  color: var(--accent-text);
}
.persona__story p {
  line-height: var(--lh-body);
  color: var(--text);
}
.persona__lists {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.persona__lists section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 860px) {
  .persona,
  .persona__lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 4. Early concepts -------------------------------------------------------- */
.concept {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.concept__note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 36em;
}
.concept__note p:last-child {
  line-height: var(--lh-body);
  color: var(--text);
}
@media (max-width: 860px) {
  .concept {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 5. Design system kit ----------------------------------------------------- */
.kit {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* colors */
.kit__colors {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.app-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.app-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.app-swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.app-swatch i {
  width: 100%;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: var(--c);
}
.app-swatch span {
  font-size: var(--fs-small);
  color: var(--text);
}
.app-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.app-preview[data-color="orange"] { --c: var(--app-orange); }
.app-preview[data-color="light-orange"] { --c: var(--app-light-orange); }
.app-preview[data-color="pink-red"] { --c: var(--app-pink-red); }
.app-preview[data-color="green"] { --c: var(--app-green); }
.app-preview[data-color="lime"] { --c: var(--app-lime); }
.app-preview[data-color="charcoal"] { --c: var(--app-charcoal); }
/* the colored sample carries no readable text: its words are decoration */
.app-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--c);
  color: var(--app-white);
}
.app-preview__address::before {
  content: "Your address";
}
.app-preview__bar svg {
  width: 18px;
  height: 18px;
}
.app-preview__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.app-preview__name {
  font-weight: 600;
}
.app-preview__use {
  color: var(--text);
}
.app-preview__button {
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--app-white);
}
.app-preview__button::before {
  content: "Sample button";
}
.app-preview__hex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}
.app-preview__copy {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* type */
.type-tester {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}
.type-tester__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
}
.type-tester__field input[type="text"] {
  min-height: 44px;
  min-width: min(320px, 100%);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
}
.type-tester__field input[type="range"] {
  min-height: 44px;
  accent-color: var(--accent);
}
.type-tester__weights button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
}
.type-tester__weights button[aria-pressed="true"],
.button-states button[aria-pressed="true"],
.card-sort .tabs button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.type-tester__sample {
  padding-block: 24px;
  border-block: 1px solid var(--line);
  font-size: 1.5625rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.type-scale div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px 24px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.type-scale dt {
  font-weight: 600;
}
.type-scale dd {
  color: var(--text);
}
/* icons */
.kit__icons {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.icon-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent-text);
  cursor: pointer;
}
.icon-tile[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.icon-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
}
.icon-preview__glyph {
  color: var(--accent-text);
}
.icon-preview__name {
  font-family: var(--heading-font);
  font-size: var(--fs-h3);
}
.icon-preview__use {
  color: var(--text);
}
/* buttons: samples drawn in the app's colors; their words are decoration */
.kit__buttons {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.button-states button,
.card-sort .tabs button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
}
.button-samples {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.button-samples li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.button-samples li > span {
  color: var(--text);
}
.app-button {
  padding: 12px 22px;
  font-style: normal;
  font-weight: 500;
  color: var(--app-white);
  transition: filter 0.2s, scale 0.2s, opacity 0.2s;
}
.app-button::before {
  content: attr(data-label);
}
.app-button--pill {
  border-radius: 999px;
  background: var(--app-orange);
}
.app-button--rect {
  border-radius: 8px;
  background: var(--app-light-orange);
}
.app-button--pay {
  border-radius: 8px;
  background: var(--app-pink-red);
}
.button-samples[data-state="hover"] .app-button {
  filter: brightness(1.1);
}
.button-samples[data-state="pressed"] .app-button {
  filter: brightness(0.88);
  scale: 0.96;
}
.button-samples[data-state="disabled"] .app-button {
  opacity: 0.4;
}
.app-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
}
.app-stepper b:not(:nth-child(2)) {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
}
.app-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.app-pager b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--donut-2);
}
.app-pager b:first-child {
  width: 24px;
  border-radius: 4px;
  background: var(--app-orange);
}
@media (max-width: 860px) {
  .kit__colors,
  .kit__icons {
    grid-template-columns: minmax(0, 1fr);
  }
  .button-samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .app-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .icon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 6. Sketch to design ------------------------------------------------------ */
.evolution {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 40px;
}
.evolution__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evolution__item h4 {
  font-size: var(--fs-h3);
}
.evolution__item h4 span {
  color: var(--accent-text);
}
.evolution__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 108px));
  gap: 8px;
}
.evolution__row figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evolution__row img {
  width: 100%;
  aspect-ratio: 108 / 202;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface);
}
.evolution__row figcaption {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text);
}
.evolution__item > p {
  max-width: 36em;
  line-height: 1.5;
  color: var(--text);
}
@media (max-width: 860px) {
  .evolution {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 7. Card sort, menu wireframe and site map -------------------------------- */
.card-sort {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-sort .tabs {
  gap: 8px;
}
.card-sort__pile,
.card-sort__groups ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card-sort li {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
/* a loose pile: each card sits at a slight angle */
.card-sort__pile li:nth-child(5n + 1) { rotate: -2deg; }
.card-sort__pile li:nth-child(5n + 2) { rotate: 1.5deg; }
.card-sort__pile li:nth-child(5n + 3) { rotate: -1deg; }
.card-sort__pile li:nth-child(5n + 4) { rotate: 2deg; }
.card-sort__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.card-sort__groups section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-sort__groups h5,
.menu-wireframe__group p {
  font-family: var(--body-font);
  font-weight: 600;
  color: var(--accent-text);
}
.card-sort__note,
.menu-wireframe figcaption {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}
.menu-wireframe {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu-wireframe__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 32px 16px;
  border-radius: var(--r);
  background: var(--surface);
}
.menu-wireframe__phone {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  max-width: 100%;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 28px;
  background: var(--bg);
}
.menu-wireframe__bar {
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  text-align: center;
  font-weight: 500;
}
.menu-wireframe__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-wireframe__group span {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text);
}
.menu-wireframe__group span::after {
  content: "›";
}
.sitemap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 24px;
  border-radius: var(--r);
  background: var(--surface);
}
.sitemap__root {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 24px;
  border-radius: 6px;
  background: var(--surface-2);
  text-align: center;
}
.sitemap__root span,
.sitemap__flow span {
  color: var(--text);
}
.sitemap__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.sitemap__cols section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 6px;
  background: var(--bg);
}
.sitemap__cols h4 {
  font-size: var(--fs-h3);
}
.sitemap__cols li {
  line-height: 1.5;
  color: var(--text);
}
.sitemap__flow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  width: 100%;
  padding: 14px 18px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
@media (max-width: 1100px) {
  .sitemap__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .card-sort__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sitemap__cols,
  .card-sort__groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 8. A/B versions ---------------------------------------------------------- */
.versions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.versions figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.versions svg {
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.versions figcaption {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text);
}
.versions figcaption b {
  color: var(--ink);
}
@media (max-width: 860px) {
  .versions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}