/*
  Rabbit Holes — styles
  Stage 0: just the empty starting state.

  The colour palette is locked in the roadmap. We define each colour once here
  as a CSS variable (a named value) so that later we always reuse the same names
  instead of re-typing hex codes everywhere.
*/

:root {
  /* Backgrounds and borders */
  --bg-cream: #fbf3e7;
  --card-white: #ffffff;
  --card-border: #ead6bc;
  --outer-border: #e2cba8;

  /* Text (warm browns) */
  --text-primary: #6b4a2e;
  --text-body: #5a4326;
  --text-muted: #a07a52;

  /* Blush accent (used for interactive bits later) */
  --blush-accent: #d88a9c;
  --blush-fill: #f9e3e8;
  --blush-border: #f0cdd6;
  --blush-text: #b05a70;
}

/* Reset a couple of browser defaults so spacing is predictable. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  /* The cream background fills the whole window. */
  background-color: var(--bg-cream);

  /* IBM Plex Sans for everything, with safe fallbacks. */
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--text-body);

  /* Centre the app horizontally; top-align so a tall card scrolls naturally. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* The two-column layout: trail panel on the left, main view on the right.
   justify-content: center keeps the pair centred; when the trail is hidden the
   main view centres on its own. */
.layout {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

/* The container that holds the main view, stacked vertically in a narrow column. */
.app {
  width: 100%;
  max-width: 630px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center; /* centre the empty landing state vertically */
  gap: 20px;
  padding: 40px 24px;
}

/* Once a search has started, top-align so a tall card scrolls naturally. */
body.started .app {
  justify-content: flex-start;
}

/* Wraps the form + digging status; position: relative anchors the status below. */
.search-area {
  position: relative;
  width: 100%;
}

/* The form is just a transparent wrapper so the input stretches the full width. */
.search-form {
  width: 100%;
  margin: 0;
}

/* On the landing AND digging screens, the search box is half width and centred.
   Only the result screen (body.started) uses the full 630px column. */
body:not(.started) .search-area {
  max-width: 315px;
  align-self: center;
}

/* The disabled search box during a dig: inert, gently muted, and filled with the
   cream page colour so it visibly reads as switched-off rather than typeable. */
.search-input:disabled {
  cursor: default;
  color: var(--text-muted);
  background-color: var(--bg-cream);
}

/* The rotating "loading screen" phrases, sitting just below the search box.
   Absolutely positioned so showing them never moves the rabbit or the box. */
.digging-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  display: none; /* only shown while digging */
}
body.digging .digging-status,
body.error .digging-status {
  /* Shown while digging (rotating phrases) AND after a failed dig (the
     rabbit's "couldn't dig that one up" message). */
  display: block;
}

/* The same rotating phrases, but under the suggestion bubbles — used when a dig
   starts from the results screen, so the previous result stays in view. Sits in
   normal flow (nothing comes after it, so it never pushes anything around). */
.digging-status-results {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  display: none; /* only shown while digging inline, or after such a dig fails */
}
body.digging-inline .digging-status-results,
body.error .digging-status-results {
  display: block;
}
/* When it has no text (e.g. an error on the landing screen writes to the other
   status line), take no space at all. */
.digging-status-results:empty {
  display: none;
}

/* While digging FROM THE LANDING SCREEN, hide the result content so the screen
   reads as a clean loading view like the idle screen. (Digs from the results
   screen use body.digging-inline instead and keep everything visible.) */
body.digging .trail,
body.digging .fact-card,
body.digging .suggestions {
  display: none;
}

/* A fixed slot for the rabbit, so different states swap without jumping. */
.rabbit-slot {
  width: 216px;
  height: 216px;
  align-self: center; /* keep the rabbit centred even though the column stretches */
  display: flex;
  justify-content: center;
  align-items: center;
}

.rabbit-img {
  width: 216px;
  height: 216px;
  object-fit: contain;
  /* The art is pixel art, so keep the pixels crisp when scaled up. */
  image-rendering: pixelated;
}

/* The presenting pose reads better ~30% smaller. It stays centred in the same
   216px slot, so nothing around it shifts. */
.rabbit-img[data-state="presenting"] {
  width: 151px;
  height: 151px;
}

/* The empty search input. */
.search-input {
  width: 100%;
  padding: 12px 16px;

  font-family: inherit; /* use IBM Plex Sans, not the browser default */
  font-size: 14px;
  color: var(--text-body);

  background-color: var(--card-white);
  border: 1px solid var(--card-border);
  border-radius: 14px; /* soft, rounded corners from the design */

  outline: none;
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* A gentle blush highlight when the input is focused. */
.search-input:focus {
  border-color: var(--blush-border);
}

/* ==========================================================================
   The fact card
   ========================================================================== */

.fact-card {
  background-color: var(--card-white);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* While empty (before any result), the card takes no space at all. */
.fact-card:empty {
  display: none;
}

/* Topic title (~19px, medium weight). */
.topic {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--text-primary);
}

/* The always-visible hook (~15px). */
.hook {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}

/* --- Expandable sections --- */

/* A thin divider above each section keeps the list tidy and cosy. */
.section {
  border-top: 1px solid var(--card-border);
  padding-top: 4px;
}

/* The tappable title row: title on the left, chevron on the right. */
.section-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
}

/* The chevron points right when closed and rotates down when open. */
.chevron {
  color: var(--blush-accent);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.section.open .chevron {
  transform: rotate(90deg);
}

/* The body is hidden until the section is open. */
.section-body {
  display: none;
  padding: 2px 0 8px;
}
.section.open .section-body {
  display: block;
}
.section-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
}

/* ==========================================================================
   The rabbit-character speech bubbles
   ========================================================================== */

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* While empty (before any result), take no space — otherwise the .app column's
   gap still reserves room and nudges the centred idle layout off. */
.suggestions:empty {
  display: none;
}

/* One row = a small rabbit on the left + a speech bubble on the right. */
.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
}

.suggestion-rabbit {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated; /* keep the pixel art crisp at this small size */
  flex-shrink: 0;
}

/* The bubble itself. `position: relative` lets us attach the tail to its edge. */
.bubble {
  position: relative;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

  color: var(--blush-text);
  background-color: var(--blush-fill);
  border: 1px solid var(--blush-border);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
}

/*
  The comic tail. We draw a small triangle pointing left, back toward the rabbit,
  using two stacked pseudo-elements: a slightly bigger one in the border colour,
  and a smaller one in the fill colour on top, so the tail has a matching outline.
  A CSS triangle is just a box with no size whose borders are coloured — here only
  the right border is coloured, which makes a wedge that points left.
*/
.bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 15px;
  border-width: 7px 9px 7px 0;
  border-style: solid;
  border-color: transparent var(--blush-border) transparent transparent;
}
.bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 16px;
  border-width: 6px 8px 6px 0;
  border-style: solid;
  border-color: transparent var(--blush-fill) transparent transparent;
}

/* The suggestion the user just clicked: a darker raspberry fill with light
   text, so it's clear which hole the rabbit is digging. The tail (both stacked
   triangles) turns raspberry too so it stays attached-looking. */
.bubble.selected {
  color: var(--card-white);
  background-color: var(--blush-text);
  border-color: var(--blush-text);
}
.bubble.selected::before,
.bubble.selected::after {
  border-right-color: var(--blush-text);
}

/* While a dig is in flight the bubbles are disabled (one dig at a time). */
.bubble:disabled {
  cursor: default;
}

/* ==========================================================================
   The trail panel
   ========================================================================== */

.trail {
  flex: 0 0 220px; /* a fixed 220px-wide column that doesn't grow or shrink */
  min-width: 0; /* let it honour 220px instead of stretching to fit the no-wrap text */
  /* Top padding lines the heading up with the search box, not the rabbit:
     app padding-top (40) + rabbit slot (216) + column gap (20) = 276. */
  padding: 276px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* When empty, the trail is hidden and takes no space. Without this, our
   display:flex above would override the browser's [hidden] rule and leave an
   invisible column that pushes the rabbit and search box off-centre. */
.trail[hidden] {
  display: none;
}

.trail-heading {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/*
  Each stop is a button with a left border. Stacked, those borders form one
  continuous vertical line — the "path" you've travelled.
*/
.trail-stop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;

  background: none;
  border: none;
  border-left: 2px solid var(--card-border);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
}

/* The current stop: blush highlight + accent line = "you are here". */
.trail-stop.here {
  border-left-color: var(--blush-accent);
  background-color: var(--blush-fill);
}

.trail-topic {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.trail-stop.here .trail-topic {
  color: var(--blush-text);
}

/* The reminder is clamped to a single line with an ellipsis. */
.trail-reminder {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* On narrow windows, stack the trail above the main view instead of beside it. */
@media (max-width: 760px) {
  .layout {
    flex-direction: column;
    align-items: stretch;
  }
  .trail {
    flex-basis: auto;
    padding: 24px 24px 0;
  }
}