/* Global Horizon — Products module: list, product detail, COA, SDS.
 * Matches the phase 2 design canvas. Phone first; the table layouts switch on at 900px. */

/* ---------------------------------------------------------------- page frame */

.page { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--gutter) 28px; max-width: 1240px; }
@media (min-width: 900px) { .page { padding: 24px 28px 32px; gap: 18px; } }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-400); }
.crumb a { color: var(--ink-400); }
.crumb a:hover { color: var(--navy); }
.crumb__sep { color: var(--grey); }
.crumb__here { color: var(--ink-600); font-weight: 500; }

.pagehead { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .pagehead { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; } }
.pagehead--top { align-items: flex-start; }
.pagehead__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 760px; }
.pagehead__title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
@media (min-width: 900px) { .pagehead__title { font-size: 26px; } }
.pagehead__sub { font-size: 13.5px; color: var(--ink-600); }
.pagehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.5px; color: var(--ink-600); }
.pagehead__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--grey); }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--grey); }

/* ---------------------------------------------------------------- filters, search */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 12px; font-weight: 600; padding: 8px 13px; min-height: 36px;
  border-radius: 18px; background: var(--surface); color: var(--ink-600); border: 1px solid var(--line);
}
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.search { position: relative; }
.search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-400); display: flex; }
.search .field__input { width: 100%; padding-left: 40px; }

.notice {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: 11px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
}
.notice__icon { flex-shrink: 0; margin-top: 1px; display: flex; }
.notice--amber { background: var(--amber-bg); border: 1px solid var(--amber-line); color: #6B4610; }
.notice--amber .notice__icon { color: var(--amber-fg); }
.notice--ember { background: var(--ember-bg); border: 1px solid #F5CDBB; color: var(--ember-dark); }
.notice--ember .notice__icon { color: var(--ember); }
.notice--plain { background: var(--surface); border: 1px solid var(--line); color: var(--ink-600); }
.notice--plain .notice__icon { color: var(--ink-400); }

/* ---------------------------------------------------------------- data table
 * One markup, two layouts: stacked cards on a phone, a grid table from 900px. */

.dtable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dtable__head { display: none; }
.dtable__row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
a.dtable__row:hover { background: var(--surface-alt); color: var(--ink); }
.dtable__row:last-child { border-bottom: 0; }
.dtable__cell { font-size: 12.5px; color: var(--ink-600); min-width: 0; }
.dtable__cell--main { font-size: 14px; font-weight: 500; color: var(--ink); }
.dtable__cell[data-label]::before {
  content: attr(data-label) ' ';
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-300);
}
.dtable__row--flag { background: var(--ember-bg); }

@media (min-width: 900px) {
  .dtable__head, .dtable__row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 0 14px; padding: 12px 20px; }
  .dtable__head { background: var(--surface-alt); border-bottom: 1px solid var(--line-faint); padding-top: 10px; padding-bottom: 10px; }
  .dtable__head > div { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); }
  .dtable__cell[data-label]::before { content: none; }
  .dtable__cell--main { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dtable__cell--wrap { white-space: normal; }
  .dtable__cell--clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Qualification earns its own column: with the pill inline the product names
   ended at a different place on every row, which is what you scan down.
 *
 * Seven columns do not fit a 900px window without crushing the product name,
 * which is the one thing being read. Between 900 and 1180 the material number
 * stands down — it is the least looked at, and it is still on the product
 * itself and in the stacked layout on a phone. */
.dtable--products { --cols: minmax(0, 1fr) 104px 102px 150px 160px 104px; }

@media (min-width: 900px) and (max-width: 1179.98px) {
  .dtable--products .dtable__head > div:nth-child(3),
  .dtable--products .dtable__row > .dtable__cell:nth-child(3) { display: none; }
}

@media (min-width: 1180px) {
  .dtable--products { --cols: minmax(0, 1fr) 104px 112px 102px 150px 160px 104px; }
}
.dtable--results  { --cols: minmax(0, 1fr) minmax(120px, 0.55fr) minmax(110px, 0.45fr); }
.dtable--coas     { --cols: minmax(0, 1fr) 104px 104px 136px; }

/* ---------------------------------------------------------------- panels and fields */

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; } }
.colstack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-faint);
}
.panel__title { margin: 0; flex-grow: 1; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.panel__meta { font-size: 12px; color: var(--ink-400); }
.panel__body { padding: 16px 18px; }
.panel__body--flush { padding: 0; }
.panel__body--list { padding: 4px 18px 10px; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.fields--one { grid-template-columns: minmax(0, 1fr); }
.fieldv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fieldv--wide { grid-column: 1 / -1; }
.fieldv__label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-300); }
.fieldv__value { font-size: 13.5px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.fieldv__value--long { font-size: 13px; color: var(--ink-600); line-height: 1.6; }

.missing { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.missing:last-child { border-bottom: 0; }
.missing__box { width: 20px; height: 20px; border-radius: 6px; border: 1.8px dashed var(--grey); flex-shrink: 0; }
.missing__main { display: flex; flex-direction: column; gap: 1px; }
.missing__name { font-size: 13px; font-weight: 500; color: var(--ink); }
.missing__why { font-size: 11.5px; color: var(--ink-400); }

.attach { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.attach:last-child { border-bottom: 0; }
button.attach { width: 100%; text-align: left; background: none; }
.attach__icon { width: 32px; height: 32px; border-radius: 9px; background: #EDF3FA; color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attach__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; }
.attach__title { font-size: 12.5px; font-weight: 600; }
.attach__sub { font-size: 11.5px; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach__chev { color: #B4BCCB; display: flex; }

.pictogram { width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: var(--surface); }

/* ---------------------------------------------------------------- SDS viewer */

.sds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .sds { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; } }

.sdsindex { padding: 8px; display: flex; gap: 4px; overflow-x: auto; }
@media (min-width: 900px) {
  .sdsindex { flex-direction: column; overflow: visible; }
  .sdsnav { position: sticky; top: 16px; }
}
.sdsindex__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink); background: none; text-align: left; white-space: nowrap; flex-shrink: 0;
}
.sdsindex__item:hover { background: var(--surface-alt); }
.sdsindex__item.is-on { background: var(--sky); color: var(--navy); font-weight: 600; }
.sdsindex__item.is-empty { color: var(--ink-300); }
.sdsindex__n { width: 22px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-400); }
.sdsindex__item.is-on .sdsindex__n { color: var(--navy); }
.sdsindex__label { flex-grow: 1; }

.sdssub { display: flex; flex-direction: column; gap: 5px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.sdssub:first-child { padding-top: 0; }
.sdssub:last-child { border-bottom: 0; padding-bottom: 0; }
.sdssub__label { font-size: 11px; font-weight: 600; color: var(--ink-400); font-family: var(--font-mono); }
.sdssub__text { font-size: 13.5px; color: var(--ink); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }

/* A document slot: open what is there, and always a way to put a file against it. */
.docrow { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.docrow:last-child { border-bottom: 0; }
.docrow .attach { border-bottom: 0; flex-grow: 1; min-width: 0; }
.docrow__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.docrow__upload { cursor: pointer; margin: 0; }
.docrow__upload.is-busy { opacity: 0.55; pointer-events: none; }
@media (max-width: 560px) {
  .docrow { flex-wrap: wrap; padding-bottom: 10px; }
  .docrow__actions { width: 100%; padding-left: 43px; }
}

/* The status tag sits beside the product name, not in a column of its own:
   most products will not have one and an empty column reads as a mistake. */
.dtable__cell--main .pill { margin-left: 8px; vertical-align: middle; }

/* A product with no qualification set shows a dash in the table, but on a
   phone, where the table stacks, a labelless dash is just noise. */
@media (max-width: 899.98px) { .dtable__dash { display: none; } }

/* Qualified suppliers, inside the Status panel. Internal information, so it is
   set apart from the status chips rather than reading as part of them. */
.qsup { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.qsup__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.qsup__label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
               text-transform: uppercase; color: var(--ink-400); }
.qsup__note { font-size: 11.5px; color: var(--ink-300); }
.qsup__list { display: flex; flex-direction: column; gap: 11px; }
.qsup__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px;
             align-items: center; font-size: 13px; }
.qsup__name { font-weight: 600; color: var(--ink); overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.qsup__since { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }
.qsup__acts { grid-column: 1 / -1; display: flex; gap: 14px; margin-top: -2px; }
.qsup__row + .qsup__row { padding-top: 11px; border-top: 1px solid var(--line-soft); }
.qsup__acts .link { font-size: 11.5px; }
.link--quiet { color: var(--ink-400); }
.qsup__empty { margin: 0; font-size: 12.5px; color: var(--ink-400); }
.qsup__add { margin-top: 11px; }
.qsup__add .field__input { font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }

/* Product notes — a running log. Standing conditions (cannot source, export
   restriction) also raise a strip above the fold, because the whole point of
   writing one down is that the next person sees it without digging. */
.pflags { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pflag { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
         border-radius: 11px; font-size: 13px; line-height: 1.45; }
.pflag svg { flex-shrink: 0; margin-top: 2px; }
.pflag strong { font-weight: 600; }
.pflag strong::after { content: ' — '; font-weight: 400; }
.pflag--sourcing, .pflag--export {
  background: var(--ember-bg); border: 1px solid #F5CDBB; color: var(--ember-dark); }
.pflag--sourcing svg, .pflag--export svg { color: var(--ember); }
.pflag--packaging, .pflag--quality {
  background: var(--amber-bg); border: 1px solid var(--amber-line); color: #6B4610; }
.pflag--packaging svg, .pflag--quality svg { color: var(--amber-fg); }

.pnote { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.pnote:first-child { padding-top: 0; }
.pnote--done { opacity: 0.6; }
.pnote--standing { border-bottom: 1px solid var(--line); }
.pnote__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.pnote__title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pnote__body { font-size: 13px; line-height: 1.55; color: var(--ink-600); }
.pnote__body > *:first-child { margin-top: 0; }
.pnote__body > *:last-child { margin-bottom: 0; }
.pnote__body ul, .pnote__body ol { padding-left: 20px; margin: 6px 0; }
.pnote__body a { color: var(--navy); text-decoration: underline; word-break: break-word; }
.pnote__foot { display: flex; align-items: baseline; justify-content: space-between;
               gap: 12px; margin-top: 7px; font-size: 11.5px; color: var(--ink-400); }
.pnote__acts { display: flex; gap: 13px; flex-shrink: 0; }
.pnote__acts .link { font-size: 11.5px; }

.pnote__add { display: flex; flex-direction: column; gap: 8px; margin-top: 15px;
              padding-top: 14px; border-top: 1px solid var(--line); }
.pnote__addrow { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; }
.pnote__add .field__input { font-size: 12.5px; }
.pnote__addfoot { display: flex; justify-content: flex-end; }
@media (max-width: 520px) { .pnote__addrow { grid-template-columns: minmax(0, 1fr); } }

/* Reading a supplier off their email signature. The image stays on screen
   after upload, because checking a phone number against the picture is the
   whole point of keeping it. */
.sigdrop { margin-top: 12px; }
.sigdrop__pick { display: flex; align-items: center; gap: 10px; cursor: pointer;
                 padding: 13px 15px; border: 1px dashed var(--line); border-radius: 11px;
                 font-size: 13px; color: var(--ink-600); background: var(--surface); }
.sigdrop__pick:hover { border-color: var(--navy); color: var(--ink); }
.sigdrop__pick svg { color: var(--ink-400); flex-shrink: 0; }
.sigdrop__img { display: block; margin-top: 11px; max-width: 100%; max-height: 220px;
                border: 1px solid var(--line); border-radius: 9px; background: #fff; }

/* A field the reader filled in rather than a person. Not an error, just worth
   a second look before saving. */
.field__input--proposed { background: #FFFBF2; border-color: var(--amber-line); }

/* Qualified suppliers: the details, not just a name. Clicking the email opens
   Outlook, which is what anybody actually wants from this panel. */
.qsup__row { display: block; }
.qsup__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.qsup__who { font-size: 12.5px; color: var(--ink-600); margin-top: 3px; }
.qsup__reach { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.qsup__link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
              color: var(--navy); text-decoration: none; min-width: 0; }
.qsup__link:hover { text-decoration: underline; }
.qsup__link svg { color: var(--ink-400); flex-shrink: 0; }
.qsup__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qsup__thin { margin: 6px 0 0; font-size: 12px; color: var(--ink-400); }
.qsup__acts { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }

.dupe__list { margin: 6px 0 4px; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.dupe__list .link { margin-left: 6px; }
.dupe__hint { font-size: 12px; opacity: 0.85; }

/* A client specification, as an editable table. Wide on purpose: the limits
   and the alternative spellings have to be visible together, because a wrong
   limit here is wrong on every certificate judged against it. */
.spectable__head, .spectable__row {
  display: grid; gap: 8px; padding: 9px 16px; align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 70px 86px 86px minmax(0, 1fr) 40px 32px;
}
.spectable__head { background: var(--surface-alt); border-bottom: 1px solid var(--line-faint);
                   font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
                   text-transform: uppercase; color: var(--ink-400); }
.spectable__row { border-bottom: 1px solid var(--line-soft); }
.spectable__row:last-child { border-bottom: 0; }
.spectable__row .field__input { font-size: 12.5px; padding: 7px 9px; }
.spectable__row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ember); }

@media (max-width: 860px) {
  .spectable__head { display: none; }
  .spectable__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 7px; }
  .spectable__row [data-f="parameter"], .spectable__row [data-f="aliases"] { grid-column: 1 / -1; }
}

/* The verdict table on a certificate. */
.speccheck__head, .speccheck__row {
  display: grid; gap: 10px; padding: 10px 18px; align-items: baseline;
  grid-template-columns: minmax(0, 1.1fr) 112px 112px 116px minmax(0, 1.5fr);
}
.speccheck__head { background: var(--surface-alt); border-bottom: 1px solid var(--line-faint);
                   font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
                   text-transform: uppercase; color: var(--ink-400); }
.speccheck__row { border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.speccheck__row:last-child { border-bottom: 0; }
.speccheck__row--fail { background: var(--ember-bg); }
.speccheck__row--missing, .speccheck__row--unreadable { background: var(--amber-bg); }
.speccheck__row--extra { opacity: 0.7; }
.speccheck__param { font-weight: 600; color: var(--ink); }
.speccheck__as { display: block; font-weight: 400; font-size: 11px; color: var(--ink-400); }
.speccheck__want, .speccheck__got { color: var(--ink-600); white-space: nowrap; }
.speccheck__got { font-weight: 600; color: var(--ink); }
.speccheck__why { color: var(--ink-600); }
.speccheck__sum { margin: 0; font-size: 12.5px; color: var(--ink-600); }

@media (max-width: 860px) {
  .speccheck__head { display: none; }
  .speccheck__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .speccheck__param { grid-column: 1; }
  .speccheck__verdict { grid-column: 2; grid-row: 1; justify-self: end; }
  .speccheck__want, .speccheck__got { grid-column: auto; }
  .speccheck__why { grid-column: 1 / -1; }
}

/* Candidate suppliers side by side against one specification.
   Scrolls sideways rather than squeezing: six candidates on a phone is a
   scroll, not a column two characters wide. */
.comparewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { min-width: max-content; }
.compare__row {
  display: grid; align-items: stretch;
  grid-template-columns: 170px 110px repeat(var(--cands), minmax(130px, 1fr));
  border-bottom: 1px solid var(--line-soft);
}
.compare__row:last-child { border-bottom: 0; }
.compare__row--head { background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.compare__row--foot { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 0; }

.compare__param, .compare__want, .compare__cand, .compare__cell {
  padding: 10px 14px; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  justify-content: center;
}
/* The first two columns stay put while the candidates scroll past. */
.compare__param, .compare__want {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  border-right: 1px solid var(--line-soft);
}
.compare__want { left: 170px; }
.compare__row--head .compare__param, .compare__row--head .compare__want,
.compare__row--foot .compare__param, .compare__row--foot .compare__want { background: var(--surface-alt); }

.compare__param { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.compare__want { font-size: 12px; color: var(--ink-600); white-space: nowrap; }
.compare__row--head .compare__param, .compare__row--head .compare__want {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-400);
}
.compare__who { font-size: 12.5px; font-weight: 600; color: var(--ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare__batch { font-size: 11px; color: var(--ink-400); }

.compare__cell { border-left: 1px solid var(--line-soft); }
.compare__value { font-size: 13px; font-weight: 600; color: var(--ink); }
.compare__flag { display: flex; align-items: center; gap: 4px; font-size: 10.5px; }
.compare__cell--fail { background: var(--ember-bg); }
.compare__cell--fail .compare__value, .compare__cell--fail .compare__flag { color: var(--ember-dark); }
.compare__cell--missing, .compare__cell--unreadable { background: var(--amber-bg); }
.compare__cell--missing .compare__flag, .compare__cell--unreadable .compare__flag { color: #6B4610; }
.compare__cell--pass .compare__value { color: #1F5C35; }
.compare__cell .pill { align-self: flex-start; text-decoration: none; }

.compare__note { margin: 12px 2px 0; font-size: 12px; color: var(--ink-400); line-height: 1.5; }

@media (max-width: 720px) {
  .compare__row { grid-template-columns: 132px 92px repeat(var(--cands), minmax(118px, 1fr)); }
  .compare__want { left: 132px; }
}

/* A compare column is headed by what identifies the certificate: who it came
   from, which batch, when it was made. A gap is named, not hidden \u2014 a
   certificate with no supplier on it is worth noticing. */
a.compare__cand { text-decoration: none; color: inherit; gap: 2px; }
a.compare__cand:hover .compare__who { text-decoration: underline; }
.compare__made { font-size: 11px; color: var(--ink-400); }
.compare__gap { font-style: italic; color: var(--ink-300); font-weight: 400; }