/* Seen & Booked: animated illustration scenes. Poster and stamp.
   Tokens only (../css/tokens.css). Zero radius, hard shadows, no gradients, no blur. */

sb-prices, sb-namesearch, sb-ai, sb-yandex, sb-board {
  display: block;
  container-type: inline-size;
  padding: 0 6px 6px 0;           /* room for the hard shadow */
  font-family: var(--f-body);
  color: var(--ink);
  min-width: 0;
}

/* ---------- window ---------- */
.sbs-win {
  background: var(--white);
  border: var(--rule);
  border-radius: 0;
  box-shadow: var(--shadow);
}
.sbs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--sun);
  border-bottom: var(--rule);
  font: 700 var(--t-label)/1.25 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sbs-label { flex: 1 1 13em; min-width: 0; display: flex; align-items: center; gap: .5em; }
.sbs-label .brand { width: 1.3em; height: 1.3em; }
.sbs-ltxt { min-width: 0; overflow-wrap: anywhere; }
.sbs-mk { display: inline-block; flex: none; width: 1.8em; height: 1.1em; margin-right: .4em; vertical-align: -.2em; }
.sbs-mk .brand { width: 100%; height: 1.1em; vertical-align: top; }   /* wide marks (Agoda) get the full width; square ones stay centred */
.sbs-switch { display: flex; flex: none; border: 2px solid var(--sun); }
.sbs-btn {
  appearance: none;
  margin: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sun);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.sbs-btn + .sbs-btn { border-left: 2px solid var(--sun); }
.sbs-btn[aria-pressed="true"] { background: var(--sun); color: var(--ink); }
.sbs-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.sbs-stage { padding: 12px; }
.sbs-anim { position: relative; }

/* ---------- visibility helpers ---------- */
.sbs-off { visibility: hidden; }
.sbs-gone { display: none; }
.sbs-pop { animation: sbs-pop .38s var(--ease) both; }
@keyframes sbs-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- search field + typewriter ---------- */
.sbs-search {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: var(--rule-thin);
  background: var(--white);
  font: 500 1rem/1.3 var(--f-body);
}
.sbs-gloss { font: 400 var(--t-small)/1.3 var(--f-body); color: var(--dim); }
.sbs-tw { display: grid; }
.sbs-tw > * { grid-area: 1 / 1; min-width: 0; }
.sbs-ghost { visibility: hidden; }
.sbs-caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-right: -.55em;           /* zero layout width: never changes wrapping */
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--ink);
  animation: sbs-blink 1s steps(1) infinite;
}
@keyframes sbs-blink { 50% { opacity: 0; } }

/* ---------- rows ---------- */
.sbs-meta { margin-top: 10px; font: 400 var(--t-label)/1.3 var(--f-mono); color: var(--dim); letter-spacing: .02em; }
.sbs-list { margin-top: 12px; border: var(--rule-thin); background: var(--white); }
.sbs-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  min-height: 46px;
  padding: 8px 12px;
  background: var(--white);
  font: 500 .95rem/1.3 var(--f-body);
  transition: transform .4s var(--ease);
}
.sbs-row + .sbs-row { border-top: var(--rule-thin); }
.sbs-row.sbs-off { transform: translateX(-26px); }
.sbs-name, .sbs-rtxt { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.sbs-src { font-weight: 700; }
.sbs-price { flex: none; font: 700 1rem/1 var(--f-mono); }
.sbs-hl { background: var(--sun); color: var(--ink); z-index: 1; }
.sbs-hl .sbs-name, .sbs-hl .sbs-rtxt { font-weight: 700; }
.sbs-dim { background: var(--fog); color: var(--dim); }
/* The "Official site" badge, styled like the one Google shows in its hotel price list. */
.sbs-official {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  border-radius: 4px; background: #e8f0fe; color: #1a73e8;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, .22);
  font: 500 .72rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0;
  white-space: nowrap; vertical-align: middle;
}
.sbs-tag {
  flex: none;
  padding: 4px 6px;
  background: var(--stamp);
  color: var(--white);
  font: 700 .68rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sbs-flash { animation: sbs-flash .5s steps(1) 2; }
@keyframes sbs-flash { 0%, 100% { background: var(--white); } 50% { background: var(--ink); color: var(--white); } }
.sbs-hl.sbs-flash { animation-name: sbs-flash-y; }
@keyframes sbs-flash-y { 0%, 100% { background: var(--sun); } 50% { background: var(--white); } }
.sbs-dim.sbs-flash { animation-name: sbs-flash-d; }
@keyframes sbs-flash-d { 0%, 100% { background: var(--fog); } 50% { background: var(--ink); color: var(--white); } }

/* ---------- footer area: banner / line / note / stamp ---------- */
.sbs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  min-height: 62px;
}
.sbs-foot-end { justify-content: flex-end; }
.sbs-msg { flex: 1 1 15em; min-width: 0; display: grid; }
.sbs-msg > * { grid-area: 1 / 1; }
.sbs-banner, .sbs-line {
  padding: 9px 11px;
  font: 700 .75rem/1.4 var(--f-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sbs-banner { background: var(--stamp); color: var(--white); }
.sbs-line { background: var(--ink); color: var(--sun); }
.sbs-note { font: 700 var(--t-label)/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }

.sbs-stamp {
  flex: none;
  margin: 4px 8px;
  padding: 3px 12px;
  border: 6px double var(--stamp);
  background: var(--white);
  color: var(--stamp);
  font: 900 1.55rem/1.05 var(--f-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(var(--rot, -5deg));
}
.sbs-slam { animation: sbs-slam .5s var(--snap) both; }
@keyframes sbs-slam {
  from { transform: rotate(var(--rot, -5deg)) scale(1.6); opacity: 0; }
  to   { transform: rotate(var(--rot, -5deg)) scale(1); opacity: 1; }
}

/* ---------- cursor ---------- */
.sbs-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 24px;
  height: 24px;
  margin: -2px 0 0 -4px;          /* arrow tip on the target point */
  opacity: 0;
  pointer-events: none;
  transition: transform .9s var(--ease), opacity .2s linear;
}
.sbs-cursor.sbs-show { opacity: 1; }
.sbs-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 4px 2px; transition: transform .12s var(--ease); }
.sbs-cursor.sbs-press svg { transform: scale(.78); }
.sbs-cur-p { fill: var(--ink); stroke: var(--white); stroke-width: 1.5; stroke-linejoin: miter; }

.sbs-ph { background: var(--white); color: var(--dim); outline: 2px dashed var(--dim); outline-offset: -6px; font: 400 var(--t-label)/1.3 var(--f-mono); letter-spacing: .06em; }

/* ---------- AI chat ---------- */
.sbs-bubble { border: var(--rule-thin); padding: 10px 12px; font: 500 .95rem/1.4 var(--f-body); }
.sbs-user { max-width: 92%; margin-left: auto; background: var(--sky); }
.sbs-bot { margin-top: 12px; background: var(--white); }
.sbs-ans + .sbs-ans { margin-top: 8px; }
.sbs-wrong .sbs-ghost, .sbs-wrong .sbs-typed { text-decoration: underline 3px var(--stamp); text-underline-offset: 4px; }
.sbs-wrong .sbs-ghost { text-decoration: none; }
.sbs-wrong.sbs-struck .sbs-typed { color: var(--dim); text-decoration: line-through 3px var(--stamp); }
.sbs-right { font-weight: 700; }
.sbs-right .sbs-typed { background: var(--sun); }

/* ---------- board ---------- */
sb-board .sbs-win { background: var(--ink); }
sb-board .sbs-bar { border-bottom: 2px solid var(--sun); }
sb-board .sbs-stage { padding: 0; }
.sbs-bd {
  --cg: 2px;
  --colgap: 14px;
  --bpad: 14px;
  --cw: min(22px, calc((100cqw - 6px - 2 * var(--bpad) - 80px - 3 * var(--colgap)) / 44));
  padding: var(--bpad);
  color: var(--sun);
  font-family: var(--f-mono);
}
.sbs-brow {
  display: flex;
  align-items: flex-start;
  gap: var(--colgap);
  padding: 5px 0;
}
.sbs-brow + .sbs-brow { border-top: 1px solid color-mix(in srgb, var(--white) 14%, var(--ink)); }
.sbs-bc { display: flex; flex-wrap: wrap; gap: var(--cg); flex: none; align-content: flex-start; }
.sbs-c0 { width: calc(6 * var(--cw) + 5 * var(--cg)); }
.sbs-c1 { width: calc(7 * var(--cw) + 6 * var(--cg)); }
.sbs-c2 { width: calc(12 * var(--cw) + 11 * var(--cg)); }
.sbs-c3 { width: calc(19 * var(--cw) + 18 * var(--cg)); flex-wrap: nowrap; }
.sbs-bhead { padding-bottom: 8px; border-bottom: 2px solid var(--sun); }
.sbs-bhead .sbs-bc {
  display: block;
  color: var(--white);
  font: 700 var(--t-label)/1 var(--f-mono);
  letter-spacing: .08em;
}
.sbs-bhead + .sbs-brow { border-top: 0; }
.sbs-w { display: flex; flex: none; gap: var(--cg); }
.sbs-w + .sbs-w { margin-left: var(--cg); }
.sbs-cell {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--cw);
  height: calc(var(--cw) * 1.7);
  overflow: hidden;
  background: color-mix(in srgb, var(--white) 14%, var(--ink));
  font-size: calc(var(--cw) * 1.2);
  font-weight: 700;
  line-height: calc(var(--cw) * 1.7);
  text-align: center;
}
.sbs-cell::after {              /* the flap hinge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ink);
}
.sbs-g { display: block; transform-origin: 50% 50%; }
.sbs-fa { animation: sbs-flap-a .11s linear; }
.sbs-fb { animation: sbs-flap-b .11s linear; }
@keyframes sbs-flap-a { 0% { transform: scaleY(1); } 50% { transform: scaleY(.1); } 100% { transform: scaleY(1); } }
@keyframes sbs-flap-b { 0% { transform: scaleY(1); } 50% { transform: scaleY(.1); } 100% { transform: scaleY(1); } }
.sbs-c3 .sbs-cell { background: var(--stamp); color: var(--white); }
.sbs-fixed .sbs-c3 .sbs-cell { background: var(--sun); color: var(--ink); }

/* ---------- reserved heights per width (nothing jumps between acts) ---------- */
sb-prices .sbs-list { min-height: 236px; }
sb-namesearch .sbs-list { min-height: 190px; }
sb-yandex .sbs-list { min-height: 142px; }

@container (max-width: 520px) {
  .sbs-stage { padding: 10px; }
  .sbs-row { min-height: 52px; padding: 8px 10px; font-size: .9rem; }
  .sbs-search { font-size: .95rem; }
  .sbs-stamp { font-size: 1.35rem; }
  sb-prices .sbs-list { min-height: 300px; }
  sb-namesearch .sbs-list { min-height: 330px; }
  sb-yandex .sbs-list { min-height: 200px; }
  .sbs-foot { min-height: 96px; }
}

/* narrow board: no CHECK column, smaller cells, status wraps to two lines */
@container (max-width: 560px) {
  .sbs-bd {
    --cg: 1px;
    --colgap: 8px;
    --bpad: 10px;
    --cw: calc((100cqw - 6px - 2 * var(--bpad) - 24px - 2 * var(--colgap)) / 27);
  }
  .sbs-c2, .sbs-bhead .sbs-c2 { display: none; }
  .sbs-c3 {
    width: calc(14 * var(--cw) + 13 * var(--cg));
    flex-wrap: wrap;
    row-gap: var(--cg);
    min-height: calc(2 * var(--cw) * 1.7 + var(--cg));
  }
  .sbs-c3 .sbs-w + .sbs-w { margin-left: 0; }
  .sbs-c3 .sbs-w { margin-right: var(--cg); }
  .sbs-padw { display: none; }
  .sbs-bhead .sbs-bc { font-size: .6rem; letter-spacing: .04em; }
}

/* ---------- reduced motion: end states only ---------- */
@media (prefers-reduced-motion: reduce) {
  .sbs-caret, .sbs-pop, .sbs-slam, .sbs-flash, .sbs-fa, .sbs-fb { animation: none; }
  .sbs-row, .sbs-cursor, .sbs-cursor svg { transition: none; }
}

.sbs-tw > * { padding-right: .6em; }  /* room for the caret at the end of the text */