/* ==================================================================
   home -- area stylesheet, loaded after static/style.css.

   style.css remains the authoritative design system: its tokens, type
   ramp, radii and colour rules govern. Nothing here introduces a new
   colour; confidence is ink weight and border style, never hue, and the
   only two tints are caution-fill #F6F2E9 and calm-fill #EFF1EE.
   Money, grams and durations are Newsreader with tabular-nums, never
   DM Sans. See design/README.md and makecost_restyle_v2/README.md.
   ================================================================== */


/* ==================================================================
   1. ONE SCROLLING PAGE
   ------------------------------------------------------------------
   Analyze is a full-viewport hero; Materials and History are paper
   sections beneath it. A section heading must never land under the
   fixed nav after an anchor jump, hence scroll-margin-top.
   ================================================================== */

.home-section {
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  padding: 56px 56px 64px;
  scroll-margin-top: 72px;
  /* Tall enough that the scroll-spy's observation bands cannot overlap:
     Materials is one table, and a short section would hand the nav two
     "current" answers at once. */
  min-height: 70vh;
}
.home-section-last { min-height: auto; padding-bottom: 88px; }
.home-section-inner { max-width: 1180px; margin: 0 auto; }
.hero { scroll-margin-top: 0; }

@media (max-width: 900px) {
  .home-section { padding: 40px 22px 48px; }
}


/* ==================================================================
   2. THE HERO'S FOUR INPUT MODES
   ------------------------------------------------------------------
   The owner's brief, verbatim: "Only the Measured Slice 3mf is how i
   want the upload/text bar in the middle. All the others have different
   coloring and some don't have headers so i don't know what to put into
   the text box."

   The 3mf bar is transparent glass with white text. The other three
   filled their controls with var(--chip-border) -- #C7C0B2, a solid
   warm grey -- which reads as a foreign opaque panel dropped onto the
   glass. Every field here is re-grounded on the hero's OWN glass recipe
   (design/README.md "Glass recipes": rgba(255,255,255,.19) fill,
   rgba(255,255,255,.28) border, blur 18px), which is the same recipe
   the active mode pill already uses. No new colours.
   ================================================================== */

/* -- fields: one recipe, every mode -- */
.hero-bar input[type="text"],
.hero-bar input[type="number"],
.hero-bar select,
.hero-bar textarea,
.hero-paste-input,
.hero-source-textarea,
.hero-bar-manual select,
.hero-bar-manual input,
.hero-bar-source select {
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(18px);
  color: #FFFFFF;
  font-family: var(--font-sans);
  /* The native widget chrome (number spinners, the select caret) is drawn
     by the OS in its light palette and disappears on glass. */
  color-scheme: dark;
}
/* Sizing, so the four modes share one field height and one radius. The pill
   is the reference bar's own shape; only the multiline paste area softens
   to a rounded rect. */
.hero-bar input[type="text"],
.hero-bar input[type="number"],
.hero-bar select,
.hero-paste-input {
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.3;
}
.hero-paste-input { padding: 13px 20px; font-size: 18px; }
.hero-bar textarea, .hero-source-textarea { border-radius: 14px; padding: 12px 14px; font-size: 14px; }

/* style.css gives .hero-bar-manual's inputs `flex: 1 1 150px` for the flat
   row they used to sit in. Inside a labelled .hero-field that column axis is
   VERTICAL, so flex-grow stretched every field into a 100px-tall blob. */
.hero-field > input,
.hero-field > select,
.hero-field > textarea,
.hero-dims > input { flex: 0 0 auto; width: 100%; }

.hero-bar input::placeholder,
.hero-bar textarea::placeholder,
.hero-paste-input::placeholder,
.hero-source-textarea::placeholder {
  color: rgba(255,255,255,.62);
}
/* The dropdown list itself is an OS popup on its own light ground -- white
   options on white is the one place inheriting the hero's ink fails. */
.hero-bar option { color: var(--ink); background: #FFFFFF; }

.hero-bar input:focus-visible,
.hero-bar select:focus-visible,
.hero-bar textarea:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* -- every field says what goes in it (the "no headers" complaint) --
   Mono uppercase eyebrow, the same micro-label the bands and card
   headers use, so a label on the hero is not a fifth vocabulary. -- */
.hero-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 150px; text-align: left; }
.hero-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero-field-grow { flex: 1 1 220px; }
.hero-field-wide { flex: 1 1 100%; }

/* -- By hand: three fields on a row, the optional size group under them,
   the button last. Grams is the field that matters, so it gets the room. -- */
.hero-bar-manual { align-items: flex-end; gap: 14px 12px; }
.hero-field-grams { flex: 1 1 190px; }
.hero-field-dims { flex: 1 1 100%; }
.hero-dims { display: flex; align-items: center; gap: 8px; }
.hero-dims > input { flex: 1 1 0 !important; width: auto; min-width: 0; }
.hero-dim-label {
  flex: none; margin: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; color: rgba(255,255,255,.72);
}
.hero-dim-x { flex: none; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); }

/* -- Page source -- */
.hero-source-textarea { min-height: 88px; }
.hero-bar-source .hero-bar-row { align-items: flex-end; width: 100%; }

/* -- Etsy URL, in the rare build where the kill switch is ON. style.css's
   :checked rules only know about .hero-bar-url, so the live field needs
   its own show rule or the mode renders empty. -- */
#hm-url:checked ~ .hero-bars .hero-bar-fetch { display: flex; }
.hero-bar-fetch {
  align-items: flex-end; gap: 12px;
  border-radius: 20px; padding: 18px 20px;
}

/* -- Etsy URL: off, and saying so calmly. Not an error state -- there is
   nothing wrong. calm-fill is the palette's reassurance tint and the only
   one allowed here besides caution; on the dark hero it appears as its
   glass equivalent rather than as a light slab. -- */
.hero-bar-url {
  flex-direction: column; align-items: flex-start; text-align: left;
  border-radius: 20px; padding: 20px 22px; gap: 10px;
}
.hero-off-lead {
  margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  color: #FFFFFF;
}
.hero-off-body {
  margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,.78); max-width: 58ch;
}
.hero-off-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.hero-off-btn {
  padding: 10px 18px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.hero-off-btn:hover { background: #FFFFFF; }
.hero-off-link {
  font-family: var(--font-sans); font-size: 13px;
  color: rgba(255,255,255,.82); text-decoration: underline;
}
.hero-off-link:hover { color: #FFFFFF; }

/* The mode pill for a switched-off mode is quieter than the rest -- ink
   weight, not colour, exactly as confidence is. */
.hero-mode-pill-off, .hero-mode-pill-off .mode-tag { color: rgba(255,255,255,.55); }
#hm-url:checked ~ .hero-modes label[for="hm-url"] { color: rgba(255,255,255,.88); }

/* The real bug behind "Etsy URL has random white boxes": style.css's
   global `code {}` paints background:var(--surface-alt) with a hairline
   border, so an inline <code> on the dark hero rendered as a solid white
   slab of near-invisible text. The copy no longer uses one; this makes
   sure a future one cannot repaint it. */
.hero code, .hero-hint code {
  background: transparent; border: none; padding: 0;
  font-family: var(--font-mono); font-size: 0.92em; color: inherit;
}


/* ==================================================================
   3. HISTORY
   ------------------------------------------------------------------
   "The recent analysis has no pictures and just looks like a random
   long list."

   Rows, not cards: most analyses genuinely have no picture (the 3mf
   path stores image_url=None), and a card grid would be a field of
   hatch. What makes the list browsable instead is structure -- day
   headings, the input mode named in plain words, and the cost and its
   confidence tier aligned in fixed columns so the eye can run down
   them.

   Pictures are shown when one really exists (paste and URL modes carry
   the listing photo) and are the diagonal hatch otherwise. Never a grey
   box, never a fake icon -- design/README.md "Placeholder /
   empty-media pattern".
   ================================================================== */

.history-day {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-3);
  margin: 22px 22px 8px;
}
.history-day:first-child { margin-top: 10px; }

.history-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px 0 14px;
}

.history-row {
  display: grid;
  grid-template-columns: 52px 1fr 150px 108px;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-4);
  text-decoration: none;
  color: inherit;
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--surface-alt); text-decoration: none; }
.history-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.history-thumb {
  width: 52px; height: 52px; border-radius: 13px; flex: none;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-alt-2);
}
/* The hatch. .hatch is defined in style.css; restated at this size so the
   52px tile keeps the design's 5px/10px rhythm rather than the 6/12 one. */
.history-thumb.hatch {
  background: repeating-linear-gradient(135deg, #EDEAE2 0 5px, #F8F6F2 5px 10px);
}

.history-what { min-width: 0; }
.history-title {
  font-size: 15px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-sub {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12.5px; color: var(--muted-2);
}
/* The input mode is the one piece of meta that identifies HOW a number was
   arrived at, so it gets the mono treatment the rest of the app gives to
   provenance labels rather than sitting in the run of prose. */
.history-mode {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.history-variant, .history-listed { color: var(--muted-2); }
.history-when { font-family: var(--font-mono); font-size: 11px; color: var(--muted-3); }
/* Separators only between the free-text bits, so a row with no variant and
   no listed price doesn't trail a stray dot. */
.history-variant::before, .history-listed::before, .history-when::before {
  content: "\00b7"; margin-right: 8px; color: var(--muted-3);
}

/* Money is Newsreader with tabular-nums. A range prints as a range. */
.history-cost {
  font-family: var(--font-serif);
  font-size: 21px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.history-cost.calm { font-size: 16px; color: var(--out-of-scope-ink); white-space: normal; }
.history-cost.quiet { color: var(--muted-3); }
.history-chip { text-align: right; }

.history-empty { padding: 26px 22px 20px; }
.history-empty p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.history-empty-hint { margin-top: 6px !important; color: var(--muted-2) !important; font-size: 13px !important; }

.history-all { font-family: var(--font-sans); font-size: 12.5px; margin-left: 12px; }

@media (max-width: 820px) {
  .history-row { grid-template-columns: 52px 1fr auto; }
  .history-chip { grid-column: 2 / -1; text-align: left; }
}

/* --- sign-in ---------------------------------------------------------
   One field on a short page. Constrained so the form does not stretch to
   a 1180px measure and read as a settings screen. --- */
.login__panel { max-width: 420px; }
.login__panel form { margin: 0; }
.login__panel input[type="password"] { width: 100%; }
.login__panel .btn { margin-top: 14px; }

/* --- landing sections: describe the page, then send you to it ---------
   Home keeps the scroll; the sections stopped containing the working UI.
   Embedding it made Materials 81% of the page and left History behind
   ~4,800px of catalogue. Each section now opens on the same clip its
   destination does, so arriving there reads as continuous. --- */
.landing-section {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  overflow: hidden;
  /* Shown before the clip decodes and if it never loads: the same
     sandstone every other video surface falls back to. */
  background: radial-gradient(126% 96% at 50% 4%, #A79C8C 0%, #6E6455 40%, #3A342C 100%);
}
.landing-section__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.landing-section__media.is-ready { opacity: 1; }
.landing-section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(24,20,16,.80) 0%,
    rgba(24,20,16,.62) 42%,
    rgba(24,20,16,.34) 100%);
}
.landing-section__inner {
  position: relative; z-index: 2;
  max-width: 1180px; width: 100%;
  margin: 0 auto; padding: 72px 56px;
}
.landing-section__eyebrow {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
.landing-section__title {
  margin: 0 0 18px;
  font-family: var(--font-serif); font-weight: 300; font-size: 52px; line-height: 1.06;
  max-width: 15ch; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(12,10,8,.55);
}
.landing-section__title em { font-style: italic; }
.landing-section__body {
  margin: 0; max-width: 48ch;
  font-family: var(--font-sans); font-size: 16.5px; line-height: 1.55;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 3px rgba(12,10,8,.45);
}
.landing-section__meta {
  margin: 12px 0 0; max-width: 48ch;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,.66);
}
.landing-section__meta strong {
  font-family: var(--font-serif); font-size: 15px; font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.landing-section__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 13px 24px;
  border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
}
.landing-section__cta:hover { background: #FFFFFF; }
.landing-section__cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .landing-section__media { opacity: 1; transition: none; }
}