/* Home "Collection". Port of proto/home.html (variant A). */

.hx { position: relative; overflow: clip; }
.ha { padding: 26px 0 40px; }
.ha-top { position: relative; display: grid; gap: 16px; }
.h1x { font-size: clamp(40px, 10.4vw, 88px); max-width: 11em; font-weight: 600; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.subx { max-width: 34em; margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--tx-body); }
.coll { align-self: end; padding: 14px; border-radius: var(--r-ctl); background: rgba(13,14,16,.8); box-shadow: inset 0 0 0 1px var(--line2); }
.coll .t { font-size: 15px; line-height: 1.35; color: var(--tx2); }
.coll .t b { font-weight: 600; color: var(--tx); }
.cbar { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 3px; margin: 10px 0 0; }
.cbar i { height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); }
.cbar i.on { background: var(--c); }
.dl { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 44px; margin-top: 12px; padding: 0 16px; border-radius: var(--r-ctl); font-size: 15px; font-weight: 500; background: var(--tx); color: var(--bg); white-space: nowrap; }
.dl svg { width: 16px; height: 16px; flex: none; }

/* tiles */
.bento { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; margin-top: 22px; }
.tile { --c: #888; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 14px; border-radius: var(--r-card); overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 85% 10%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); opacity: .45; transition: opacity .25s; }
.tile.done { background: color-mix(in srgb, var(--c) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.tile.done::before { opacity: .8; }
.tile .art { position: absolute; z-index: -1; right: 16px; top: 16px; width: 42%; max-width: 104px; color: var(--c); opacity: .95; transition: transform .4s var(--ease); }
.tile .art .gl { display: block; width: 100%; height: auto; }
.tile b.n { font-size: 15px; font-weight: 600; letter-spacing: -.014em; line-height: 1.2; }
.tile .m { margin-top: 2px; font-size: 13px; color: var(--tx2); }
.tile .d { display: none; margin-top: 4px; max-width: 24em; font-size: 13px; line-height: 1.35; color: var(--tx2); }
.tile .res { margin-top: 4px; font-size: 20px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: var(--c); overflow-wrap: anywhere; }
.t-w2 { grid-column: span 2; min-height: 132px; }
.t-w2 .art { width: 30%; max-width: 104px; }

/* "Other tests": a full-width strip under the wall (hidden at launch) */
.tile.t-more { margin-top: 8px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 0; padding: 16px; }
.tile.t-more .art { position: static; width: 44px; max-width: none; flex: none; opacity: .9; }
.tile.t-more .n { margin: 0; } .tile.t-more .d { display: none; } .tile.t-more .m { margin: 0 0 0 auto; }
@media (min-width: 900px) { .tile.t-more { padding: 18px 24px; } .tile.t-more .art { width: 52px; } .tile.t-more .d { display: block; margin: 0 0 0 8px; } }

/* the big 16 types tile: first question inside; the name's link covers the whole tile,
   the links inside (answers, tests, "your result") sit above it */
.t-big { grid-column: span 2; justify-content: flex-start; padding: 18px 16px 16px; }
.t-big .tb-art { position: absolute; z-index: -1; right: 14px; top: 16px; width: 30%; max-width: 120px; color: var(--c); opacity: .85; }
.t-big .tb-art svg { display: block; width: 100%; height: auto; }
.t-big .tb-n { display: block; max-width: 60%; min-height: clamp(44px, 24vw, 112px); font-size: 28px; line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.t-big .tb-d { max-width: 60%; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--tx-body); }
.t-big .tb-n::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.t-big .tq, .t-big .more, .t-big .t-done { position: relative; z-index: 1; }
.tq { margin-top: 18px; }
.ql { font-size: 13px; color: var(--tx2); }
.qq { margin: 6px 0 12px; max-width: 30em; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.022em; text-wrap: pretty; }
.qa { display: grid; gap: 6px; }
.qa a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-ctl); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.25; transition: background-color .15s, box-shadow .15s; }
.qa .kk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-badge); background: rgba(255,255,255,.08); font-size: 12px; font-weight: 600; color: var(--tx2); }
.t-big .more { margin-top: 12px; font-size: 13px; color: var(--tx2); }
.t-big .more a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tlx { margin-top: 20px; }
.tlx h3 { margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--tx2); }
.tlx .tl { margin-top: 8px; grid-template-columns: 1fr; }
.tlx .ti.done { --sys: var(--c); }

/* shared card preview */
.cv { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,5,6,.86); }
.cvb { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.cvs svg { display: block; height: min(70vh, 760px); width: auto; max-width: 100%; border-radius: var(--r-ctl); box-shadow: 0 0 0 1px var(--line2), 0 30px 60px -20px #000; }
.cvb p { max-width: 30em; font-size: 13px; color: var(--tx2); text-align: center; }
.cvb .row { display: flex; gap: 8px; }
.cvb .row button { min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); font-size: 15px; font-weight: 500; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line2); }
.cvb .row button.pri { background: var(--tx); color: var(--bg); box-shadow: none; }
.cvb .row button:disabled { opacity: .5; }

@media (min-width: 900px) {
  .ha-top { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: end; }
  /* rows grow with the big tile's real question and test list (Lex, 2026-11-11: option A) */
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(214px, auto); gap: 10px; margin-top: 34px; }
  .tile { min-height: 0; padding: 18px; }
  .tile .d { display: block; }
  .tile .res { font-size: 24px; }
  .t-big { grid-row: span 2; padding: 26px; }
  .t-big .tb-art { right: 24px; top: 24px; width: 126px; max-width: none; opacity: 1; }
  .t-big .tb-n, .t-big .tb-d { max-width: calc(100% - 150px); }
  .t-big .tb-n { font-size: 38px; min-height: 126px; }
  .t-big .tq { margin-top: 30px; } .t-big .qq { margin: 4px 0 10px; }
  .t-big .tlx { margin-top: 30px; }
  .t-big .qa a { min-height: 44px; padding: 6px 12px; }
}
@media (hover: hover) and (pointer: fine) {
  a.tile:hover, .t-big:hover { box-shadow: inset 0 0 0 1px var(--line2); }
  a.tile:hover::before, .t-big:hover::before { opacity: 1; }
  a.tile:hover .art { transform: scale(1.06) rotate(-3deg); }
  .qa a:hover { background: color-mix(in srgb, var(--c, var(--sys)) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--sys)) 60%, transparent); }
  .dl:hover { background: #fff; }
}