/* Sign-in pages (kit/auth_base.html): two tiles on the page, bento style.
   Left: the carbon panel. It carries data-theme="kubinu-dark", so inside it every role resolves to its dark value and
   the panel is carbon with paper type in both themes. Right: the form tile. Under 860 px the panel folds to a band.
   One laterite tile, flat fills, no gradients. Tokens only. */
.auth { min-height: 100dvh; width: min(88rem, 100%); margin: 0 auto; padding: 16px; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(auto, 54rem); align-content: center; }

/* ---------- the carbon panel ---------- */
.auth-panel { position: relative; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 24px; padding: clamp(24px, 3.2vw, 48px);
  background: var(--k-bg); color: var(--k-fg); border: 1px solid var(--k-outline-variant); border-radius: var(--k-radius-xl); }
.auth-panel-top { display: flex; align-items: center; gap: 12px; }
.auth-product { font: var(--k-title-l); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-headline { font: var(--k-display-s); letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
.auth-line { margin-top: 12px; font: var(--k-body-l); color: var(--k-fg-muted); max-width: 42ch; }
.auth-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--k-outline-variant); }
.auth-panel-foot img { height: 24px; width: auto; display: block; }

/* the tile field: the product's 3x3 pattern across an 8 by 6 field; one block of it bright, its ninth tile lifted */
.tf { --cell: clamp(24px, 2.9vw, 46px); --gap: clamp(5px, .6vw, 9px); --step: calc(var(--cell) + var(--gap));
  align-self: center; justify-self: center; display: grid; grid-template-columns: auto auto; grid-template-areas: ". x" "y plot" ". note"; gap: 10px 12px; }
.tf-axis { display: grid; font: var(--k-label-s); font-size: .625rem; color: var(--k-fg-subtle); }
.tf-axis .is-on { color: var(--k-secondary); }
.tf-axis--x { grid-area: x; grid-template-columns: repeat(8, var(--cell)); gap: var(--gap); text-align: center; }
.tf-axis--y { grid-area: y; grid-template-rows: repeat(6, var(--cell)); gap: var(--gap); align-items: center; }
.tf-plot { grid-area: plot; position: relative; }
.tf-grid { display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); }
.tf-grid i { border-radius: calc(var(--cell) * .14); background: var(--k-surface); animation: tf-in var(--k-dur-spatial) var(--k-ease-effects) backwards; animation-delay: calc(var(--i) * 9ms + 80ms); }
.tf-grid .tf-on { background: var(--k-surface-highest); }
.tf-grid .tf-hi { background: var(--k-fg); }
.tf-grid .tf-slot { background: transparent; outline: 1.5px dashed var(--k-secondary); outline-offset: -1.5px; }
.tf-lift { position: absolute; left: calc(var(--col) * var(--step)); top: calc(var(--row) * var(--step)); width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * .14);
  background: var(--k-accent); translate: calc(var(--cell) * .4) calc(var(--cell) * .46); rotate: 20deg; animation: tf-lift 700ms var(--k-ease-spatial) 620ms backwards; }
.tf-note { grid-area: note; display: flex; align-items: center; gap: 10px; margin-top: 12px; font: var(--k-label-s); letter-spacing: .08em; color: var(--k-fg-muted); }
.tf-note i { width: 8px; height: 8px; border-radius: 2px; background: var(--k-accent); rotate: 20deg; flex: none; }
@keyframes tf-in { from { opacity: 0; scale: .6; } }
@keyframes tf-lift { from { opacity: 0; translate: 0 0; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .tf-grid i, .tf-lift { animation: none; } }

/* ---------- the form tile ---------- */
.auth-side { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: clamp(16px, 2.4vw, 32px);
  background: var(--k-surface); border: 1px solid var(--k-outline-variant); border-radius: var(--k-radius-xl); }
.auth-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: var(--k-label-m); text-transform: uppercase; letter-spacing: .08em; color: var(--k-fg-muted); text-decoration: none; }
.auth-back:hover { color: var(--k-fg); }
.auth-back .ico { width: 18px; height: 18px; }
.auth-back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-main { align-self: center; justify-self: center; width: min(26rem, 100%); padding-block: 8px; }
.auth-card { display: grid; gap: 16px; }
.auth-card h1 { font: var(--k-headline-l); letter-spacing: -0.02em; }
.auth-card .lead { margin-top: -8px; }
.auth-card form { display: grid; gap: 16px; margin: 0; }
.auth-card .btn--block { min-height: var(--k-field-h); }
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; font: var(--k-body-m); }
.auth-row a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-small { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--k-outline-variant); font: var(--k-body-s); color: var(--k-fg-muted); }
.auth-small .ico { width: 16px; height: 16px; margin-top: 1px; }
.auth-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; font: var(--k-body-s); color: var(--k-fg-muted); }
.auth-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-fg-muted); }
.auth-code input { font: var(--k-number-l); letter-spacing: .3em; text-align: center; min-height: 64px; }

@media (min-width: 1200px) {
  /* the row is as tall as the window allows, so the page never scrolls by its own padding */
  .auth { padding: 24px; gap: 20px; grid-template-rows: minmax(auto, min(54rem, calc(100dvh - 48px))); }
  .auth-headline { font: var(--k-display-m); }
  .auth-line { font: 400 1.125rem/1.75rem var(--k-font-body); }
}
@media (max-width: 1079px) and (min-width: 860px) { .tf { --cell: clamp(20px, 2.5vw, 30px); } .auth-headline { font: var(--k-headline-l); } }

/* ---------- under 860 px: the panel is a band above the form ---------- */
@media (max-width: 859px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 12px; padding: 12px; }
  .auth-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 12px 16px; padding: 16px; align-items: end; }
  .auth-panel-top { grid-column: 1 / -1; }
  .auth-panel-copy { grid-column: 1; grid-row: 2; }
  .auth-panel .tile-icon--lg { width: 32px; height: 32px; }
  .auth-headline { font: var(--k-headline-s); }
  .auth-line, .auth-panel-foot, .tf-axis, .tf-note { display: none; }
  .tf { --cell: 14px; --gap: 4px; grid-column: 2; grid-row: 2; grid-template-areas: "plot"; grid-template-columns: auto; align-self: end; margin: 0 10px 8px 0; }
  .tf-grid i:nth-child(n+41) { display: none; }   /* five rows are enough in a band */
  .auth-side { padding: 16px; }
  .auth-main { align-self: start; }
  .auth-card h1 { font: var(--k-headline-m); }
}
@media (max-width: 380px) { .tf { display: none; } .auth-panel { grid-template-columns: minmax(0, 1fr); } }