/* Design skins for the hub.

   Ten styles: bento grid, minimalism, neumorphism, claymorphism, skeuomorphism, glassmorphism, liquid glass,
   brutalism, maximalism and spatial UI. Each is a small set of variables. Components read the variables, so any
   mix can be switched on with data-style="glass clay". "fusion" is the chosen hybrid: all ten, each used on the
   part of the interface where it works best. The Design Lab page lets you preview every combination. */
@layer skins {
  :root {
    --shade-d: rgb(20 17 26 / 0.16);
    --shade-l: rgb(255 255 255 / 0.95);
    --clay-surface-shadow: 0 18px 30px -14px rgb(20 17 26 / 0.35), inset 0 4px 8px rgb(255 255 255 / 0.6),
      inset 0 -6px 12px rgb(20 17 26 / 0.07);
    --clay-btn-shadow: 0 10px 18px -8px rgb(20 17 26 / 0.45), inset 0 3px 6px rgb(255 255 255 / 0.6),
      inset 0 -4px 8px rgb(20 17 26 / 0.2);
    --neu-surface-shadow: 9px 9px 18px var(--shade-d), -9px -9px 18px var(--shade-l);
    --neu-field-shadow: inset 4px 4px 8px var(--shade-d), inset -4px -4px 8px var(--shade-l);
    --glass-bg: color-mix(in srgb, var(--card) 68%, transparent);
    --liquid-bg: color-mix(in srgb, var(--card) 54%, transparent);
    --liquid-sheen: linear-gradient(
      135deg,
      rgb(255 255 255 / 0.5),
      rgb(255 255 255 / 0) 40%,
      rgb(255 255 255 / 0.1)
    );
    --liquid-shadow: inset 0 1px 1px rgb(255 255 255 / 0.85), inset 0 -1px 1px rgb(255 255 255 / 0.25),
      0 14px 40px -12px rgb(20 17 26 / 0.35);
    --skeu-metal: linear-gradient(180deg, #fdfdfd, #d9d9d9 55%, #bdbdbd);
    --skeu-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(0 0 0 / 0.25), 0 2px 5px rgb(0 0 0 / 0.4);
    --brutal-yellow: #ffe14d;
    --maxi-hero: radial-gradient(60% 80% at 88% 0%, rgb(225 22 159 / 0.38), transparent 70%),
      radial-gradient(50% 70% at 8% 100%, rgb(82 103 238 / 0.34), transparent 70%),
      radial-gradient(40% 50% at 62% 100%, rgb(222 174 76 / 0.3), transparent 70%);
    --maxi-page: radial-gradient(38% 45% at 12% 8%, rgb(225 22 159 / 0.16), transparent 70%),
      radial-gradient(34% 40% at 88% 12%, rgb(82 103 238 / 0.18), transparent 70%),
      radial-gradient(40% 40% at 70% 90%, rgb(222 174 76 / 0.2), transparent 70%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --shade-d: rgb(0 0 0 / 0.55);
      --shade-l: rgb(255 255 255 / 0.06);
    }
  }
  :root[data-theme='dark'] {
    --shade-d: rgb(0 0 0 / 0.55);
    --shade-l: rgb(255 255 255 / 0.06);
  }

  /* Defaults: the plain look. Every element with data-style starts from here, so a preview inside the Design Lab
     is not affected by the style of the page around it. */
  [data-style] {
    --surface-bg: var(--card);
    --surface-border: 1px solid var(--rule);
    --surface-shadow: none;
    --surface-radius: 14px;
    --surface-blur: 0px;
    --surface-sat: 1;
    --surface-sheen: none;
    --btn-bg: transparent;
    --btn-color: var(--ink);
    --btn-border: 2px solid var(--ink);
    --btn-shadow: none;
    --btn-radius: 999px;
    --btn-case: none;
    --btnp-bg: var(--org);
    --btnp-color: #14111a;
    --btnp-border: 2px solid var(--org);
    --field-bg: var(--card);
    --field-border: 1px solid var(--quiet);
    --field-shadow: none;
    --field-radius: 8px;
    --tog-bg: transparent;
    --tog-color: var(--onhero);
    --tog-border: 1px solid var(--onhero2);
    --tog-shadow: none;
    --tog-radius: 99px;
    --tag-bg: transparent;
    --tag-color: var(--quiet);
    --tag-border: 1px solid var(--quiet);
    --tag-shadow: none;
    --tag-radius: 99px;
    --tag-case: none;
    --hero-extra: none;
    --page-extra: none;
  }

  /* The styles, from quiet to loud. When several are on, the later one wins a variable they both set. */
  [data-style~='minimal'] {
    --surface-bg: transparent;
    --surface-radius: 4px;
    --btn-radius: 4px;
    --btn-border: 1px solid var(--ink);
    --btnp-border: 1px solid var(--org);
    --field-radius: 4px;
    --tog-radius: 4px;
    --tag-radius: 4px;
  }
  [data-style~='bento'] {
    --surface-radius: 26px;
    --surface-bg: color-mix(in srgb, var(--card) 90%, var(--ink) 3%);
  }
  [data-style~='neu'] {
    --surface-bg: var(--paper);
    --surface-border: 1px solid transparent;
    --surface-shadow: var(--neu-surface-shadow);
    --field-bg: var(--paper);
    --field-shadow: var(--neu-field-shadow);
    --btn-bg: var(--paper);
    --btn-border: 1px solid transparent;
    --btn-shadow: var(--neu-surface-shadow);
    --tog-bg: var(--paper);
    --tog-color: var(--ink);
    --tog-border: 1px solid transparent;
    --tog-shadow: var(--neu-surface-shadow);
  }
  [data-style~='clay'] {
    --surface-radius: 30px;
    --surface-shadow: var(--clay-surface-shadow);
    --btn-radius: 24px;
    --btn-border: 0 solid transparent;
    --btn-shadow: var(--clay-btn-shadow);
    --btn-bg: color-mix(in oklab, var(--org) 22%, var(--card));
    --btnp-bg: color-mix(in oklab, var(--org) 85%, white);
    --btnp-border: 0 solid transparent;
    --tog-radius: 18px;
    --tog-border: 0 solid transparent;
    --tog-shadow: var(--clay-btn-shadow);
    --tag-radius: 18px;
  }
  [data-style~='skeu'] {
    --btn-bg: var(--skeu-metal);
    --btn-color: #14111a;
    --btn-border: 1px solid #8c8c8c;
    --btn-shadow: var(--skeu-shadow);
    --btn-radius: 10px;
    --tog-bg: var(--skeu-metal);
    --tog-color: #14111a;
    --tog-border: 1px solid #8c8c8c;
    --tog-shadow: var(--skeu-shadow);
    --tog-radius: 12px;
    --field-bg: color-mix(in srgb, var(--card) 94%, black);
    --field-shadow: inset 0 2px 5px rgb(0 0 0 / 0.3);
    --surface-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 2px 6px rgb(0 0 0 / 0.25);
  }
  [data-style~='glass'] {
    --surface-bg: var(--glass-bg);
    --surface-border: 1px solid rgb(255 255 255 / 0.45);
    --surface-shadow: 0 8px 32px rgb(20 17 26 / 0.12);
    --surface-blur: 16px;
    --surface-sat: 1.4;
    --tog-bg: rgb(255 255 255 / 0.16);
    --tog-border: 1px solid rgb(255 255 255 / 0.4);
  }
  [data-style~='liquid'] {
    --surface-bg: var(--liquid-bg);
    --surface-border: 1px solid rgb(255 255 255 / 0.5);
    --surface-shadow: var(--liquid-shadow);
    --surface-blur: 26px;
    --surface-sat: 1.8;
    --surface-sheen: var(--liquid-sheen);
    --btn-shadow: var(--liquid-shadow);
    --tog-shadow: var(--liquid-shadow);
  }
  [data-style~='brutal'] {
    --surface-radius: 0;
    --surface-bg: var(--card);
    --surface-border: 3px solid var(--ink);
    --surface-shadow: 6px 6px 0 var(--ink);
    --surface-blur: 0px;
    --surface-sat: 1;
    --surface-sheen: none;
    --btn-radius: 0;
    --btn-bg: var(--card);
    --btn-border: 3px solid var(--ink);
    --btn-shadow: 4px 4px 0 var(--ink);
    --btn-case: uppercase;
    --btnp-border: 3px solid var(--ink);
    --field-radius: 0;
    --field-border: 3px solid var(--ink);
    --field-shadow: none;
    --tog-radius: 0;
    --tog-bg: var(--brutal-yellow);
    --tog-color: #14111a;
    --tog-border: 3px solid var(--ink);
    --tog-shadow: 3px 3px 0 var(--ink);
    --tag-radius: 0;
    --tag-bg: var(--brutal-yellow);
    --tag-color: #14111a;
    --tag-border: 3px solid var(--ink);
    --tag-shadow: 3px 3px 0 var(--ink);
    --tag-case: uppercase;
  }
  [data-style~='maxi'] {
    --hero-extra: var(--maxi-hero);
    --page-extra: var(--maxi-page);
    --btnp-bg: linear-gradient(135deg, var(--mag), #981cd3 55%, #5267ee);
    --btnp-color: #fff;
    --btnp-border: 0 solid transparent;
    --tag-bg: color-mix(in srgb, var(--mag) 16%, var(--card));
    --tag-color: var(--ink);
    --tag-border: 1px solid var(--mag);
  }
  [data-style~='spatial'] {
    --page-extra: var(--maxi-page);
  }

  /* The final mix. Each style does the job it is best at, so they do not fight. */
  [data-style~='fusion'] {
    --surface-radius: 28px;
    --surface-bg: var(--liquid-bg);
    --surface-border: 1px solid rgb(255 255 255 / 0.5);
    --surface-shadow: var(--liquid-shadow);
    --surface-blur: 22px;
    --surface-sat: 1.7;
    --surface-sheen: var(--liquid-sheen);
    --btn-radius: 24px;
    --btn-border: 0 solid transparent;
    --btn-shadow: var(--clay-btn-shadow);
    --btn-bg: color-mix(in oklab, var(--org) 22%, var(--card));
    --btnp-bg: color-mix(in oklab, var(--org) 85%, white);
    --btnp-border: 0 solid transparent;
    --field-bg: var(--paper);
    --field-shadow: var(--neu-field-shadow);
    --field-radius: 14px;
    --tog-bg: var(--skeu-metal);
    --tog-color: #14111a;
    --tog-border: 1px solid #8c8c8c;
    --tog-shadow: var(--skeu-shadow);
    --tog-radius: 12px;
    --tag-bg: var(--brutal-yellow);
    --tag-color: #14111a;
    --tag-border: 2px solid #14111a;
    --tag-shadow: 2px 2px 0 #14111a;
    --tag-radius: 4px;
    --tag-case: uppercase;
    --hero-extra: var(--maxi-hero);
    --page-extra: var(--maxi-page);
  }

  /* People and devices that need less decoration get solid surfaces, whatever the style. */
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    [data-style] {
      --surface-bg: var(--card);
      --surface-blur: 0px;
      --surface-sat: 1;
      --surface-sheen: none;
      --hero-extra: none;
      --page-extra: none;
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-style] {
      --surface-bg: var(--card);
      --surface-sheen: none;
    }
  }

  /* Components read the variables. */
  .tile,
  .demo,
  .brief,
  #res,
  .b,
  .lab-card,
  .mini .tile {
    background: var(--surface-sheen), var(--surface-bg);
    border: var(--surface-border);
    border-radius: var(--surface-radius);
    box-shadow: var(--surface-shadow);
    -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
    backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
  }
  .btn,
  .chip-btn,
  .chip-link {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    text-transform: var(--btn-case);
  }
  .btn.p {
    background: var(--btnp-bg);
    color: var(--btnp-color);
    border: var(--btnp-border);
  }
  .chip-btn[aria-pressed='true'] {
    background: var(--btnp-bg);
    color: var(--btnp-color);
    border: var(--btnp-border);
  }
  .fld input,
  .fld select,
  .fld textarea,
  .work-controls input,
  .work-controls select,
  .mini input {
    background: var(--field-bg);
    border: var(--field-border);
    box-shadow: var(--field-shadow);
    border-radius: var(--field-radius);
  }
  .tog,
  .mini .tog {
    background: var(--tog-bg);
    color: var(--tog-color);
    border: var(--tog-border);
    box-shadow: var(--tog-shadow);
    border-radius: var(--tog-radius);
  }
  .tag {
    background: var(--tag-bg);
    color: var(--tag-color);
    border: var(--tag-border);
    box-shadow: var(--tag-shadow);
    border-radius: var(--tag-radius);
    text-transform: var(--tag-case);
  }
  .band {
    background: var(--hero-extra), var(--hero);
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--page-extra);
  }
  /* Inside the dark hero the secondary buttons stay light on dark. */
  .band .btn.ghost {
    background: rgb(255 255 255 / 0.1);
    color: var(--onhero);
    border: 1px solid rgb(255 255 255 / 0.4);
    box-shadow: none;
  }
  .band .btn.p {
    box-shadow: var(--btn-shadow);
  }

  /* Spatial depth: tiles and the deck tilt towards the pointer (see assets/hub.js). */
  [data-style~='spatial'] .tile,
  [data-style~='fusion'] .tile {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
      transform 0.25s var(--ease),
      box-shadow 0.25s;
  }
  [data-style~='spatial'] .deck-stage,
  [data-style~='fusion'] .deck-stage {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.3s var(--ease);
  }
  .deck-stage {
    overscroll-behavior-x: contain;
  }

  /* Phones and tablets: comfortable touch targets. */
  @media (pointer: coarse) {
    .btn,
    .chip-btn,
    .tog,
    .chip-link,
    .save {
      min-height: 44px;
      min-width: 44px;
    }
    .fld input,
    .fld select,
    .work-controls input,
    .work-controls select {
      min-height: 44px;
    }
  }

  /* Home page bento grid. */
  .bento {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(12, 1fr);
  }
  .bento > .b {
    grid-column: span 12;
    padding: clamp(18px, 3vw, 28px);
    container-type: inline-size;
    overflow: hidden;
  }
  .b h2 {
    margin-bottom: 10px;
  }
  @media (min-width: 700px) {
    .bento > .b-stats,
    .bento > .b-compare,
    .bento > .b-packages,
    .bento > .b-jaipur,
    .bento > .b-built,
    .bento > .b-cta {
      grid-column: span 6;
    }
  }
  @media (min-width: 1000px) {
    .bento > .b-recent {
      grid-column: span 8;
    }
    .bento > .b-stats {
      grid-column: span 4;
    }
    .bento > .b-compare {
      grid-column: span 7;
    }
    .bento > .b-packages {
      grid-column: span 5;
    }
    .bento > .b-jaipur,
    .bento > .b-built,
    .bento > .b-cta {
      grid-column: span 4;
    }
  }
  .b-cta {
    background: linear-gradient(135deg, var(--mag), #981cd3 55%, #5267ee);
    color: #fff;
    border: 0;
  }
  .b-cta .lead,
  .b-cta p {
    color: rgb(255 255 255 / 0.9);
  }
  .b-cta .btn.p {
    background: #f6d27a;
    color: #14111a;
  }
  .stat-row {
    display: grid;
    gap: 14px;
  }
  .stat-row div {
    display: grid;
  }
  .stat-row .stat {
    font: 400 clamp(2.4rem, 5vw, 3.4rem) / 1 var(--serif);
  }
  .stat-row small {
    color: var(--quiet);
  }
  .plain-list {
    list-style: none;
  }
  .plain-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
  }
  .plain-list span {
    color: var(--quiet);
    text-align: right;
  }
  .b .cmp {
    margin-top: 10px;
  }
  .b .cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .b-stats {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }

  /* Design Lab previews. */
  .lab-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
  .lab-toggles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-block: 14px;
  }
  .lab-toggles label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    cursor: pointer;
  }
  .lab-toggles small {
    grid-column: 2;
    color: var(--quiet);
  }
  .lab-toggles input {
    width: 20px;
    height: 20px;
    accent-color: var(--mag);
    margin-top: 2px;
  }
  .lab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block: 12px;
  }
  .lab-score {
    font: 700 1.1rem var(--sans);
  }
  .lab-card {
    padding: 14px;
    display: grid;
    gap: 8px;
  }
  .lab-card h3 {
    font: 700 1rem var(--sans);
  }
  .lab-card .note {
    margin: 0;
  }
  .mini {
    padding: 14px;
    border-radius: 22px;
    color: var(--ink);
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbd3e9 0%, #bfd3ff 55%, #ffe8a6 100%);
    content-visibility: auto;
    contain-intrinsic-size: auto 250px;
  }
  html[data-theme='dark'] .mini {
    background: linear-gradient(135deg, #3b1740 0%, #1d2a63 55%, #4a3a12 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .mini {
      background: linear-gradient(135deg, #3b1740 0%, #1d2a63 55%, #4a3a12 100%);
    }
  }
  .mini-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .mini-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
  }
  .mini .tile {
    padding: 10px;
    font-size: 0.8rem;
  }
  .mini .tile b {
    display: block;
  }
  .mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .mini .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .mini .tog {
    padding: 4px 10px;
  }
  .mini input {
    width: 100%;
    padding: 7px 10px;
    font: inherit;
    color: var(--ink);
  }
  [data-style~='bento'] .mini-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  [data-style~='bento'] .mini-grid .tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .lab-stage .mini {
    font-size: 1rem;
    padding: 22px;
    content-visibility: visible;
  }
  .lab-stage .mini .tile {
    padding: 16px;
    font-size: 0.95rem;
  }
  .lab-stage .mini .btn {
    padding: 10px 18px;
    font-size: 0.95rem;
  }
  .lab-table {
    width: 100%;
    border-collapse: collapse;
  }
  .lab-table th,
  .lab-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }
  .lab-rank {
    list-style: none;
    display: grid;
    gap: 8px;
    counter-reset: r;
  }
  .lab-rank li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 12px;
  }

  /* Gallery: the pinch-to-resize gesture sets --cols. With gestures switched off the browser keeps its own pinch. */
  #grid[data-cols] {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
  html[data-gestures='on'] #grid {
    touch-action: pan-y;
  }
  .akc-sheet {
    width: min(420px, 92vw);
    margin-block: auto 0;
    border-radius: 22px 22px 0 0;
    padding: 12px 16px 20px;
  }
  .akc-sheet h2 {
    font:
      700 1rem system-ui,
      sans-serif;
    margin: 6px 0 12px;
  }
  .akc-sheet .sheet-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    margin-top: 8px;
    border: 1px solid #ffffff44;
    border-radius: 14px;
    background: #ffffff12;
    color: inherit;
    font:
      600 15px system-ui,
      sans-serif;
    text-decoration: none;
    cursor: pointer;
  }

  @media (max-width: 700px) {
    .lab-table,
    .lab-table tbody,
    .lab-table tr,
    .lab-table th,
    .lab-table td {
      display: block;
    }
    .lab-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    .lab-table tr {
      padding: 10px 0;
      border-bottom: 1px solid var(--rule);
    }
    .lab-table th,
    .lab-table td {
      border: 0;
      padding: 2px 0;
    }
    .lab-table th {
      font-size: 1rem;
    }
  }
}