/* Insights — best sellers, event types, and what the numbers rest on.

   Most colours here are existing theme-aware custom properties
   (--charcoal-soft, --concrete, --glass-border, --bone, --muted, --sand all
   redefine themselves under body.light-theme in index.html's inline
   stylesheet), so those rules need no counterpart.

   HANDOFF rule 6. The convention for flat accents holds for FILLS and BORDERS
   only, not for text: raw --amber reads about 2:1 on a light card and #E05A4A
   about 3.2:1, both under AA. Every flat accent used as TEXT below therefore
   carries a body.light-theme counterpart, reusing the pair established
   everywhere else in this codebase — #9C5C08 for amber, #B03A2E for red. Bar
   FILLS keep the raw accent in both themes; a bar is not text and its contrast
   requirement is against its own track, not against a reading threshold. */

.ins-wrap { padding: 0 1.5rem 3rem; }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.ins-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 1rem;
}

.ins-status {
  font-size: .82rem; color: var(--muted);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.ins-status-quiet { color: var(--muted); }
.ins-status-strong {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1.25rem; color: var(--amber); letter-spacing: -0.02em;
}
body.light-theme .ins-status-strong { color: #9C5C08; }
.ins-status-bad { color: #E05A4A; font-weight: 600; }
body.light-theme .ins-status-bad { color: #B03A2E; }

.ins-loading { color: var(--muted); font-style: italic; padding: 1.5rem 0; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.ins-section { margin-bottom: 2.2rem; }

.ins-section-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding-bottom: .5rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--glass-border);
}

.ins-section-title {
  margin: 0; font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1.15rem; letter-spacing: -0.02em; color: var(--bone);
}

.ins-section-sub {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Notes — every caveat on this screen is one of these
   --------------------------------------------------------------------------

   Not styled as a footnote. The two things that decide how much weight any
   ranking here can carry (one event dominating, and the unnamed keypad money)
   are notes, and a caveat set in 10px grey is a caveat nobody reads. */

.ins-note {
  font-size: .82rem; line-height: 1.6; color: var(--sand);
  background: var(--glass-white);
  border-left: 2px solid var(--glass-border);
  border-radius: 0 8px 8px 0;
  padding: .7rem .9rem; margin-bottom: .9rem;
}
.ins-note strong { color: var(--bone); font-weight: 700; }
.ins-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--concrete);
  padding: 1px 5px; border-radius: 4px; color: var(--bone);
}

.ins-note-warn { border-left-color: var(--amber); }
.ins-note-bad  { border-left-color: #E05A4A; }
.ins-note-bad strong { color: #E05A4A; }
body.light-theme .ins-note-bad strong { color: #B03A2E; }

.ins-empty {
  font-size: .8rem; color: var(--muted); font-style: italic;
  padding: .6rem 0;
}

.ins-clean {
  font-size: .85rem; color: var(--teal-bright); line-height: 1.55;
  background: var(--glass-white); border-left: 2px solid var(--teal-bright);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem;
}
/* --teal-bright reads about 2.6:1 on the white light-theme background;
   --teal (#0E5F66) clears AA. Same swap as .dup-summary-ok. */
body.light-theme .ins-clean { color: var(--teal); border-left-color: var(--teal); }

/* --------------------------------------------------------------------------
   Headline stats
   -------------------------------------------------------------------------- */

.ins-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 1rem;
}

.ins-stat {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .8rem .9rem;
}

.ins-stat-value {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--amber);
}
body.light-theme .ins-stat-value { color: #9C5C08; }

.ins-stat-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: .35rem;
}

.ins-stat-hint {
  font-size: .7rem; color: var(--muted); margin-top: .3rem; line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Bars
   --------------------------------------------------------------------------

   No charting library is vendored in this repo and none was added for this.
   A div with a percentage width reads at a glance, survives printing, and
   cannot break the page by failing to load. */

.ins-meter {
  height: 6px; border-radius: 3px;
  background: var(--glass-border);
  overflow: hidden; margin: .3rem 0;
}

.ins-meter-fill { height: 100%; border-radius: 3px; }
.ins-meter-amber { background: var(--amber); }
.ins-meter-teal  { background: var(--teal-bright); }
.ins-meter-red   { background: #E05A4A; }
.ins-meter-muted { background: var(--muted); }

/* --------------------------------------------------------------------------
   Two columns — units against money
   --------------------------------------------------------------------------

   Side by side, never behind a toggle. The disagreement between the two orders
   IS the content: a $7 coffee and a $14 spritz swap places depending on which
   column you read, and a toggle would let one be read without the other ever
   being seen. */

.ins-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  margin-bottom: .9rem;
}

@media (max-width: 700px) {
  .ins-cols { grid-template-columns: 1fr; gap: .9rem; }
}

.ins-col { min-width: 0; }

.ins-col-head {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .15rem;
}
.ins-col-head-amber { color: var(--amber); }
body.light-theme .ins-col-head-amber { color: #9C5C08; }
.ins-col-head-teal { color: var(--teal-bright); }
body.light-theme .ins-col-head-teal { color: var(--teal); }

.ins-col-sub {
  font-size: .72rem; color: var(--muted); margin-bottom: .6rem;
}

.ins-cols-tight { margin-top: .7rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Ranked list
   -------------------------------------------------------------------------- */

.ins-rank { list-style: none; margin: 0; padding: 0; }

.ins-rank-row {
  padding: .45rem 0;
  border-bottom: 1px solid var(--glass-border);
}
.ins-rank-row:last-child { border-bottom: 0; }

.ins-rank-name {
  font-size: .85rem; font-weight: 600; color: var(--bone);
  line-height: 1.3; word-break: break-word;
}

.ins-rank-figures {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}

.ins-rank-primary { font-size: .82rem; font-weight: 700; color: var(--sand); }
.ins-rank-secondary { font-size: .72rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Event type cards
   -------------------------------------------------------------------------- */

.ins-type {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: .9rem 1rem; margin-bottom: .9rem;
}

/* Days with no event, and events with no type recorded. Not a kind of event —
   a gap in the records — so it does not get the accent that the real ones do. */
.ins-type-orphan { border-left-color: var(--muted); }

.ins-type-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: .4rem;
}

.ins-type-name {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1rem; letter-spacing: -0.01em; color: var(--bone);
}

.ins-type-share {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); font-weight: 700;
}
body.light-theme .ins-type-share { color: #9C5C08; }
.ins-type-orphan .ins-type-share { color: var(--muted); }
body.light-theme .ins-type-orphan .ins-type-share { color: var(--muted); }

.ins-type-facts,
.ins-event-facts {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.ins-type-facts strong,
.ins-event-facts strong { color: var(--sand); font-weight: 700; }

.ins-type-meter { margin: .6rem 0 .2rem; }

.ins-type-meter-label {
  font-size: .68rem; color: var(--muted); letter-spacing: .04em;
}

.ins-type-caveat,
.ins-event-caveat {
  font-size: .74rem; line-height: 1.5; color: var(--amber);
  margin-top: .5rem;
}
body.light-theme .ins-type-caveat,
body.light-theme .ins-event-caveat { color: #9C5C08; }

/* --------------------------------------------------------------------------
   Event cards
   -------------------------------------------------------------------------- */

.ins-event {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: .9rem 1rem; margin-bottom: .8rem;
}

.ins-event-orphan { border-style: dashed; }

.ins-event-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: .2rem;
}

.ins-event-open {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1rem; letter-spacing: -0.01em; color: var(--bone);
  text-align: left; line-height: 1.25;
}
.ins-event-open:hover { color: var(--amber); }
body.light-theme .ins-event-open:hover { color: #9C5C08; }

.ins-event-name {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1rem; letter-spacing: -0.01em; color: var(--bone);
  line-height: 1.25;
}

.ins-chip {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}

.ins-event-dates {
  font-size: .74rem; color: var(--muted); margin-bottom: .3rem;
}

.ins-event-top {
  list-style: none; margin: .6rem 0 0; padding: .6rem 0 0;
  border-top: 1px solid var(--glass-border);
}

.ins-event-top li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: .8rem; color: var(--sand); padding: .18rem 0;
}

.ins-event-top-fig { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Unrecorded sales
   --------------------------------------------------------------------------

   Given a card of its own rather than a footnote. This is the one figure on the
   screen that is both large and useless for planning, and the temptation is to
   make it quiet — but the difference between "what my best day sold" and "what
   my best day took" is exactly what the owner needs to see, and naming the day
   is the only thing that will change the behaviour at the cart. */

.ins-unrec {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-left: 3px solid #E05A4A;
  border-radius: 10px;
  padding: .9rem 1rem; margin-bottom: .8rem;
}

.ins-unrec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: .35rem;
}

.ins-unrec-date {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 1rem; color: var(--bone); letter-spacing: -0.01em;
}

.ins-unrec-event { font-size: .76rem; color: var(--muted); }

.ins-unrec-facts {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.ins-unrec-facts strong { color: #E05A4A; font-weight: 700; }
body.light-theme .ins-unrec-facts strong { color: #B03A2E; }

.ins-unrec-verdict {
  font-size: .76rem; line-height: 1.55; color: var(--muted);
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--glass-border);
}

@media (max-width: 600px) {
  .ins-wrap { padding: 0 1rem 2.5rem; }
  .ins-stat-value { font-size: 1.3rem; }
}