/* ==========================================================================
   Quote list — a task surface, not a landing page.
   The page drops the marketing hero so the visitor's own products are the
   first thing on screen, and keeps a single primary action: send the request.
   ========================================================================== */

.worklist {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--surface-2);
  min-height: 70vh;
}

/* ---------------------------------------------------------------- head */
.worklist__head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

.worklist__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--ink-500); margin-bottom: 1rem;
}
.worklist__crumbs a { color: var(--ink-600); }
.worklist__crumbs a:hover { color: var(--navy-800); }
.worklist__crumbs i { font-size: .58rem; opacity: .5; }
.worklist__crumbs [aria-current] { color: var(--ink-900); font-weight: 600; }

.worklist__title {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.worklist__title h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  letter-spacing: -.025em;
}
.worklist__count {
  margin-top: .45rem; font-size: .95rem; color: var(--ink-600);
}
.worklist__count strong { color: var(--navy-800); font-weight: 700; }
.worklist__count span[aria-hidden] { opacity: .4; margin-inline: .35rem; }
.worklist__actions { display: flex; align-items: center; gap: .5rem; }

/* ---------------------------------------------------------------- grid */
.worklist__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start;
}
@media (max-width: 1080px) { .worklist__grid { grid-template-columns: minmax(0, 1fr); } }

.worklist__lines { display: grid; gap: .75rem; }
.worklist__side { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: .85rem; }
@media (max-width: 1080px) { .worklist__side { position: static; } }

.worklist__help {
  text-align: center; font-size: .85rem; color: var(--ink-500);
}
.worklist__help a { font-weight: 600; }

/* ------------------------------------------------------------ line row */
.line {
  position: relative;
  display: grid;
  grid-template-columns: auto 88px minmax(0, 1fr);
  gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.line:hover { border-color: #cfdcee; box-shadow: var(--shadow-sm); }
.line:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 121, 216, .1); }

.line__index {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  color: var(--ink-400); letter-spacing: .04em; padding-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.line__thumb { display: block; }
.line__thumb img {
  width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-md);
  background: var(--surface-3);
}
.line__body { min-width: 0; }

.line__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.line__id { min-width: 0; }
.line__cat {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--red-500);
  margin-bottom: .25rem;
}
.line__cat:hover { color: var(--red-600); }
.line__name { font-size: 1.05rem; line-height: 1.3; }
.line__name a { color: var(--ink-900); }
.line__name a:hover { color: var(--blue-600); }

.line__tools { display: flex; align-items: center; gap: .55rem; flex: none; }
.line__saved {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; color: #10703f;
  background: #eaf7ef; border-radius: var(--r-pill); padding: .2rem .55rem;
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.line__saved.is-visible { opacity: 1; transform: none; }
.line__remove {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-400); cursor: pointer; font-size: .78rem;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.line__remove:hover { background: var(--red-100); color: var(--red-600); border-color: #f6c9ce; }

/* Quantity leads: it is the field that makes a quotation possible. */
.line__fields {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: .75rem .85rem;
}
.field { display: grid; gap: .3rem; min-width: 0; margin: 0; }
.field label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500);
}
.field .form-field { padding: .58rem .75rem; font-size: .9rem; background: var(--surface-2); }
.field .form-field:focus { background: #fff; }
.field label em {
  font-style: normal; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--ink-400); margin-left: .25rem;
}
.field--lead label { color: var(--navy-800); }
.field--lead .form-field { font-weight: 600; }
.field--wide { grid-column: 1 / -1; }

/* Product facts sit with the product, not repeated beside every input. */
.line__facts {
  margin-top: .3rem; font-size: .78rem; color: var(--ink-500);
}
.line__facts span { opacity: .45; margin-inline: .3rem; }

/* Optional note, folded away by default. */
.line__note { grid-column: 1 / -1; }
.line__note > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  list-style: none; cursor: pointer;
  font-size: .78rem; font-weight: 600; color: var(--ink-500);
  padding: .25rem 0;
}
.line__note > summary::-webkit-details-marker { display: none; }
.line__note > summary:hover { color: var(--navy-800); }
.line__note > summary i { font-size: .68rem; transition: transform .2s var(--ease); }
.line__note[open] > summary i { transform: rotate(45deg); }
.line__note[open] > summary { margin-bottom: .35rem; }
.line__note .field { margin-top: 0; }

.line__save { grid-column: 1 / -1; justify-self: start; }
.js-ready .line__save { display: none; }

@media (max-width: 720px) {
  /* The index becomes a badge on the image so the row keeps a flush left edge. */
  .line { grid-template-columns: minmax(0, 1fr); row-gap: .85rem; padding: 1rem; }
  .line__index {
    position: absolute; top: 1.5rem; left: 1.5rem; z-index: 2;
    padding: .12rem .45rem; border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .92); color: var(--ink-600);
    box-shadow: var(--shadow-xs);
  }
  .line__thumb img { width: 100%; height: 132px; }
  .line__fields { grid-template-columns: minmax(0, 1fr); }
}

/* The page has its own primary action on small screens, so the floating
   buttons would be a third competing CTA stacked over the sticky bar. */
@media (max-width: 1080px) {
  .page-worklist .float-actions { display: none; }
}

/* ------------------------------------------------------------- add-ons */
.addons { margin-top: 1.5rem; }
.addons__title {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: .75rem;
}
.addons__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (max-width: 620px) { .addons__grid { grid-template-columns: minmax(0, 1fr); } }
.addon {
  position: relative; display: flex; align-items: center; gap: .7rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .6rem .75rem;
}
.addon img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.addon__text { min-width: 0; }
.addon__text b {
  display: block; font-family: var(--font-display); font-size: .85rem; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.addon__text span { font-size: .74rem; color: var(--ink-500); }
.addon .quote-add__icon { position: static; margin-left: auto; width: 32px; height: 32px; font-size: .78rem; }

/* ------------------------------------------------------- submit panel */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.panel__head {
  padding: 1.25rem 1.5rem 1.1rem;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: #fff;
}
.panel__head h2 { color: #fff; font-size: 1.1rem; }
.panel__head p { font-size: .85rem; color: #a9bdd6; margin-top: .3rem; }
.panel__body { padding: 1.35rem 1.5rem 1.5rem; }
.panel__submit { margin-top: 1.35rem; }

.whatnext {
  display: grid; gap: .6rem; margin-top: 1.35rem;
  padding-top: 1.25rem; border-top: 1px solid var(--line-soft);
  counter-reset: step;
}
.whatnext li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .82rem; color: var(--ink-600);
}
.whatnext span {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--blue-50); color: var(--navy-700);
  font-size: .68rem; font-weight: 700; font-family: var(--font-display); margin-top: .1rem;
}
.panel__fine {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: 1.15rem; font-size: .78rem; color: var(--ink-500); line-height: 1.5;
}
.panel__fine i { color: #17a55d; margin-top: .2rem; }

/* --------------------------------------- continue on another device */
.stash {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.stash > summary {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.15rem; cursor: pointer; list-style: none;
}
.stash > summary::-webkit-details-marker { display: none; }
.stash > summary > i:first-child { color: var(--red-500); font-size: 1rem; flex: none; }
.stash > summary > span { flex: 1; min-width: 0; }
.stash summary b {
  display: block; font-family: var(--font-display); font-size: .88rem; color: var(--ink-900);
}
.stash summary small { font-size: .76rem; color: var(--ink-500); }
.stash__chevron {
  flex: none; color: var(--ink-400); font-size: .72rem;
  transition: transform .25s var(--ease);
}
.stash[open] .stash__chevron { transform: rotate(180deg); }
.stash[open] > summary { border-bottom: 1px solid var(--line-soft); }
.stash__body { padding: 1.15rem; }

.stash__result { display: none; margin-bottom: .9rem; }
.stash__result.is-visible { display: block; }
.stash__qr { text-align: center; margin-bottom: .8rem; }
.stash__qr img {
  width: 116px; height: 116px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; background: #fff;
}
.stash__link { display: flex; gap: .45rem; }
.stash__link input {
  flex: 1; min-width: 0; padding: .5rem .65rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); font-size: .78rem; color: var(--ink-600);
}
.stash__link input:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.stash__note { font-size: .74rem; color: var(--ink-500); margin-top: .6rem; }

/* --------------------------------------------- sticky bar (small screens) */
.worklist__bar {
  position: fixed; inset: auto 0 0 0; z-index: 80;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem var(--gutter);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(8, 33, 60, .1);
}
.worklist__bar span { font-size: .88rem; color: var(--ink-600); }
.worklist__bar strong { color: var(--navy-800); font-family: var(--font-display); }
@media (max-width: 1080px) {
  .worklist__bar { display: flex; }
  .worklist { padding-bottom: 6rem; }
}

/* ------------------------------------------------------------- empty */
.blank {
  text-align: center; max-width: 600px; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.blank__art {
  width: 76px; height: 76px; margin: 0 auto 1.35rem;
  display: grid; place-items: center; border-radius: 24px;
  background: linear-gradient(150deg, var(--blue-50), var(--blue-100));
  color: var(--navy-700); font-size: 1.8rem;
}
.blank h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-bottom: .7rem; }
.blank p { color: var(--ink-600); max-width: 44ch; margin: 0 auto 1.6rem; }
.blank__hint {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.6rem; font-size: .82rem; color: var(--ink-500);
}
.blank__hint i { color: var(--blue-600); }

.blank-suggest { margin-top: clamp(2.5rem, 5vw, 4rem); }
.blank-suggest h2 {
  text-align: center; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Progress toward a quotable request, shown where the decision is made. */
.panel__progress {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.15rem; padding: .7rem .85rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); font-size: .82rem; color: var(--ink-600);
}
.panel__progress i { color: var(--blue-600); }
.panel__progress strong { color: var(--navy-800); }
.panel__progress.is-complete { background: #eaf7ef; border-color: #b9e3ca; color: #10703f; }
.panel__progress.is-complete i { color: #17a55d; }