/* Keyedworks design language layer (2026-10-12, docs/DESIGN-LANGUAGE.md): configurator style tiles, named
   colorway chips, the home "Keyedworks look" section and the signature line field. Uses the tokens from
   styles.css and brand.css; global type and color stay in brand.css. */

[data-line="studio"] { --field: var(--f-studio, #ECE5D9); --field-ink: var(--f-studio-ink, var(--ink)); --field-soft: var(--f-studio-soft, #ECE5D9); }

/* ── style tiles (select options with display: tiles) ── */
.field-tiles { border: 0; padding: 0; margin: 0; min-width: 0; }
.style-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.style-tile { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .15rem; padding: .45rem .45rem .55rem; border: 1.5px solid var(--line); border-radius: var(--radius-s, 8px); background: var(--card); cursor: pointer; min-height: 44px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease, ease); }
.style-tile:hover { border-color: var(--line-2); transform: translateY(-1px); }
.style-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.style-tile .st-art { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius-s, 8px) - 2px); overflow: hidden; background: var(--paper-2); color: var(--ink-2); }
.style-tile .st-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-tile .st-art svg { width: 100%; height: 100%; padding: 18% 14%; display: block; }
.style-tile .st-name { font-weight: 600; font-size: var(--step--1, .9rem); margin-top: .25rem; }
.style-tile .st-desc { font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
.style-tile .st-price { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); }
.style-tile:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.style-tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── named colorways ── */
.field-colorways .cw-h { font-weight: 600; font-size: var(--step--1, .9rem); margin: 0 0 .45rem; }
.field-colorways .cw-h .mono { font-weight: 400; color: var(--ink-3); margin-left: .35em; }
.cw-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.cw { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .3rem .8rem .3rem .35rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; transition: border-color .2s; }
.cw:hover { border-color: var(--line-2); }
.cw[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cw:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cw-dots { display: inline-flex; }
.cw-dots span { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2); }
.cw-dots span + span { width: 16px; height: 16px; margin: auto 0 0 -9px; box-shadow: 0 0 0 2px var(--card), inset 0 0 0 1.5px rgba(0, 0, 0, .2); }
.field-colorways .help { margin-top: .4rem; }

/* ── home: the Keyedworks look ── */
.look { padding-block: var(--section, 5rem); }
.look-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .look-grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }
.look-art img { width: 100%; height: auto; display: block; border-radius: var(--radius, 14px); }
.look-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.1rem; }
.look-points li { display: grid; grid-template-columns: 52px 1fr; gap: .9rem; align-items: start; }
.look-points .lp-ico { width: 52px; height: 38px; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-s, 8px); background: var(--card); padding: 4px; }
.look-points h3 { margin: 0 0 .15rem; font-size: 1.02rem; }
.look-points p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.look-cws { margin-top: 1.6rem; }
.look-cws .cw { cursor: default; }
.look-cws .cw:hover { border-color: var(--line); }
@media (max-width: 480px) { .style-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }