/* bookbask design system v1
   Authority: docs/bookbask/bookbask-design-documentation-v1.pdf

   Every color has one job. A color doing a second job is a bug — which is why
   these are named for the job, not the hue. Reach for --bb-trust when you mean
   trust; if you want "the green one", you are about to introduce the bug.

   Separation is done by hairlines, not shadow stacks. There is exactly one
   shadow in this file and it is for hover and the two floating cards. */

:root {
  /* Surfaces */
  --bb-page:        #FBF7F0;  /* the only page background. never pure white */
  --bb-surface:     #FFFDF9;  /* cards and panels only, always with a hairline */

  /* Ink */
  --bb-ink:         #1C1A17;  /* primary text */
  --bb-ink-soft:    #8A857C;  /* metadata, distances, review counts, sublines */

  /* Jobs */
  --bb-primary:     #123A63;  /* buttons, selected states, links, wordmark */
  --bb-trust:       #0F6E56;  /* ratings, verified, live availability. never decoration */
  --bb-urgency:     #9A4A1C;  /* scarcity and heat. never red */

  /* Structure */
  --bb-hairline:    #E3DDD2;  /* every 1px border and divider */
  --bb-tint-blue:   #DCE8F2;  /* time chips, tag pills, info panels */
  --bb-tint-jade:   #E1F5EE;  /* verified pills, positive insets */
  /* The rust counterpart of the two tints above. Everything urgent that needs a
     fill rather than just ink: rejected documents, overdue badges, error panels.
     `.bb-disc--rust` predates this and mixes its own rgba() at 11% — that is a
     disc-only value and deliberately lighter than a panel wants. */
  --bb-tint-rust:   #F5E4DA;

  /* On-navy variants */
  --bb-on-navy-trust:   #34C79A;
  --bb-on-navy-urgency: #E8A87C;
  --bb-on-navy-ink:     #FBF7F0;

  /* Radii */
  --bb-r-chip:      8px;
  --bb-r-field:     10px;  /* inputs and selects sit between chip and card */
  --bb-r-card:      14px;
  --bb-r-feature:   16px;
  --bb-r-pill:      999px;

  /* The only shadow in the system. Hover, and the two floating cards. */
  --bb-shadow-hover: 0 4px 16px rgba(28, 26, 23, 0.08);

  /* Layout */
  --bb-column:       1140px;
  --bb-booking-card: 380px;
  --bb-row-photo:    264px;

  /* Type. Inter covers neither Lao nor Thai, so the script fallbacks are part
     of the stack rather than an override. Documented deviation from the doc's
     "one UI family". */
  --bb-font: Inter, "Noto Sans Lao", "Noto Sans Thai", system-ui, sans-serif;
  --bb-font-logo: Poppins, Inter, sans-serif;
  /* Script-first stacks, for the times a string is known to be Lao or Thai
     rather than merely possibly-Lao. `--bb-font` reaches the same fonts by
     fallback, but only after Inter has already claimed the Latin digits and
     punctuation inside the string, which leaves a Lao name set in two faces. */
  --bb-font-lao: "Noto Sans Lao", Inter, system-ui, sans-serif;
  --bb-font-thai: "Noto Sans Thai", Inter, system-ui, sans-serif;
}

html { background: var(--bb-page); }

body {
  margin: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  font-family: var(--bb-font);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only `display:none` at user-agent strength, so any
   component rule setting display (every flex pill and chip in this file) beats
   it and the element stays visible while reading as hidden to script. */
[hidden] { display: none !important; }

a { color: var(--bb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--bb-tint-blue); }


/* ---------- Type ----------
   Roles from the doc, section 2. Hero headlines are a question or an
   invitation, never a value prop. Section headings are always paired with a
   warm-gray subline in a human voice — .bb-h2 without a following .bb-sub is
   an incomplete section. Meta is sentence case; ALL-CAPS eyebrows are banned. */

.bb-hero {
  font: 800 clamp(34px, 4.4vw, 54px)/1.08 var(--bb-font);
  letter-spacing: -1.5px;
  margin: 0;
}

.bb-h2 {
  font: 700 26px/1.2 var(--bb-font);
  letter-spacing: -0.5px;
  margin: 0;
}

.bb-sub {
  font: 400 14.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 6px 0 0;
}

.bb-card-title {
  font: 700 16px/1.3 var(--bb-font);
  margin: 0;
}

.bb-body {
  font: 400 15px/1.6 var(--bb-font);
  max-width: 66ch;
  margin: 0;
}

.bb-meta {
  font: 500 13px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* Numerals in prices, counts and times must not jitter as they change. */
.bb-tabular { font-variant-numeric: tabular-nums; }

.bb-wordmark {
  font: 700 24px/1 var(--bb-font-logo);
  letter-spacing: 2px;
  color: var(--bb-primary);
  text-transform: lowercase;
}


/* ---------- Cards ----------
   No resting shadow. Separation is the hairline. */

.bb-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
  transition: box-shadow .18s ease-out;
}
.bb-card:hover { box-shadow: var(--bb-shadow-hover); }
.bb-card--feature { border-radius: var(--bb-r-feature); }

.bb-card__photo {
  display: block;
  width: 100%;
  height: 180px;          /* doc: 172-190px */
  object-fit: cover;
  background: var(--bb-tint-blue);
}

.bb-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;          /* doc: 14-16px */
}


/* ---------- Rating ----------
   Jade seal + five drawn dots + the count. The count is mandatory: a rating
   without it is not allowed by the doc, so .bb-rating without .bb-count is a
   bug, not a style choice. Dots are real elements, never the bullet character. */

.bb-rating { display: flex; align-items: center; gap: 8px; }

.bb-seal {
  display: inline-flex;
  align-items: center;
  background: var(--bb-trust);
  color: var(--bb-page);
  border-radius: var(--bb-r-pill);
  padding: 2px 9px;
  font: 800 12.5px/1.5 var(--bb-font);
  font-variant-numeric: tabular-nums;
}

.bb-dots { display: inline-flex; gap: 2.5px; }

.bb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bb-trust);
}
/* Half fill is a hard-stop gradient, not an opacity — the empty side must read
   as the empty color, not as washed-out jade. */
.bb-dot--half {
  background: linear-gradient(90deg, var(--bb-trust) 0 50%, var(--bb-hairline) 50% 100%);
}
.bb-dot--empty { background: var(--bb-hairline); }

.bb-count {
  font: 500 12.5px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
}


/* ---------- Chips and pills ----------
   Urgency is plain rust text at weight 600. It is never a filled badge and
   never red — see the doc's anti-SaaS rule 6. */

.bb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  border: 1px solid transparent;
  border-radius: var(--bb-r-chip);
  padding: 9px 14px;
  font: 600 13px/1.2 var(--bb-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bb-chip--selected {
  background: var(--bb-primary);
  color: var(--bb-page);
}
.bb-chip--gone {
  background: transparent;
  border: 1px dashed var(--bb-hairline);
  color: var(--bb-ink-soft);
  text-decoration: line-through;
  cursor: default;
}

.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  border-radius: var(--bb-r-pill);
  padding: 5px 12px;
  font: 600 12.5px/1.4 var(--bb-font);
}
.bb-pill--trust {
  background: var(--bb-tint-jade);
  color: var(--bb-trust);
}
.bb-pill--rust {
  background: var(--bb-tint-rust);
  color: var(--bb-urgency);
}
/* Solid jade, cream ink. Reserved for "this is on the marketplace" — the one
   state the tinted variant is too quiet to carry. */
.bb-pill--live {
  background: var(--bb-trust);
  color: var(--bb-page);
}
/* For pills that sit inside a heading line rather than on their own row. */
.bb-pill--tight {
  padding: 4px 11px;
  font-size: 12px;
}

.bb-urgency {
  color: var(--bb-urgency);
  font: 600 13px/1.45 var(--bb-font);
}


/* ---------- Buttons ----------
   Always radius 999. Sentence case labels — "Request a listing", never
   "REQUEST A LISTING →". Jade solid is reserved for review actions. */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--bb-r-pill);
  padding: 11px 22px;
  font: 600 14.5px/1.2 var(--bb-font);
  font-family: var(--bb-font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.bb-btn--primary {
  background: var(--bb-primary);
  color: var(--bb-page);
}
.bb-btn--secondary {
  background: transparent;
  color: var(--bb-primary);
  border-color: var(--bb-hairline);
}
.bb-btn--secondary:hover { border-color: var(--bb-primary); }
.bb-btn--review {
  background: var(--bb-trust);
  color: var(--bb-page);
}
/* Dense surfaces — table rows, document slots — where a full-size button would
   set the row height instead of sitting inside it. */
.bb-btn--sm {
  padding: 7px 15px;
  font-size: 13px;
}
.bb-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}


/* ---------- Form fields ----------
   The auth pages style their own inputs (`.auth-field`) because they predate
   this block and carry a peek button and per-field error wiring. These are the
   plain primitives every other surface uses. */

.bb-input,
.bb-select {
  width: 100%;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  background: var(--bb-page);
  padding: 11px 14px;
  font: 500 14px/1.4 var(--bb-font);
  color: var(--bb-ink);
  outline: none;
}
.bb-input::placeholder { color: var(--bb-ink-soft); }
.bb-input:focus,
.bb-select:focus {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(18, 58, 99, .10);
}
.bb-field__label {
  display: block;
  margin-bottom: 6px;
  font: 600 12.5px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bb-field__hint {
  display: block;
  margin-top: 6px;
  font: 500 12.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bb-field__err {
  display: block;
  margin-top: 6px;
  font: 600 12.5px/1.5 var(--bb-font);
  color: var(--bb-urgency);
}


/* ---------- List page title ----------
   Smaller than the marketing `h1`. A console screen is read at a glance and
   repeatedly, so the title identifies the screen rather than opening it. */

.bb-h1--list {
  font: 800 30px/1.15 var(--bb-font);
  letter-spacing: -1px;
  color: var(--bb-ink);
  margin: 0;
}


/* ---------- Icon discs ----------
   Pure geometry only — circles, lines, arcs. No icon fonts, no illustration
   packs, no emoji. If a concept needs more than three simple shapes, use words. */

.bb-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  flex: none;
}
.bb-disc--jade { background: var(--bb-tint-jade); color: var(--bb-trust); }
.bb-disc--rust { background: rgba(154, 74, 28, 0.11); color: var(--bb-urgency); }


/* ---------- Dividers ----------
   Hairlines separate list rows, not boxes. Do not wrap a group of rows in a
   border as well — that is the box the doc is trying to avoid. */

.bb-divider { height: 1px; background: var(--bb-hairline); border: 0; margin: 0; }

.bb-list { list-style: none; margin: 0; padding: 0; }
.bb-list__item { padding: 14px 0; border-top: 1px solid var(--bb-hairline); }
.bb-list__item:first-child { border-top: 0; }


/* ---------- Photography ----------
   Photo heroes, never gradient heroes. The scrim is warm — built from
   rgba(28,26,23,...) with navy at the top. Never gray, never purple. */

.bb-photo { position: relative; overflow: hidden; }
.bb-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bb-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(18, 58, 99, 0.55) 0%,
    rgba(28, 26, 23, 0.40) 45%,
    rgba(28, 26, 23, 0.50) 82%,
    rgba(28, 26, 23, 0.15) 100%
  );
}

/* Every hero photo carries a location tag, because photos are rotated
   editorially and the traveler needs to know where they are looking. */
.bb-photo-tag {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--bb-r-pill);
  background: rgba(28, 26, 23, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 247, 240, 0.20);
  color: rgba(251, 247, 240, 0.92);
  font: 500 12.5px/1.4 var(--bb-font);
}
.bb-photo-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-urgency);
}

.bb-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bb-trust);
  color: var(--bb-page);
  border-radius: var(--bb-r-pill);
  padding: 5px 12px;
  font: 700 11.5px/1.4 var(--bb-font);
}

.bb-save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* ---------- Layout ---------- */

.bb-column {
  max-width: var(--bb-column);
  margin: 0 auto;
  padding-inline: 24px;
}

.bb-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bb-row-listing {
  display: grid;
  grid-template-columns: var(--bb-row-photo) 1fr;
  gap: 20px;
  align-items: start;
}

.bb-booking-card {
  position: sticky;
  top: 24px;
  width: var(--bb-booking-card);
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 22px;
  box-shadow: var(--bb-shadow-hover);  /* one of the two floating cards */
}

@media (max-width: 900px) {
  .bb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bb-row-listing { grid-template-columns: 1fr; }
  .bb-booking-card { position: static; width: 100%; }
}
@media (max-width: 560px) {
  .bb-grid-4 { grid-template-columns: 1fr; }
  .bb-column { padding-inline: 22px; }
}