/* The boards: what each screen draws on the content area. */

.title-count { margin-left: 10px; font-size: var(--fs-caption); font-weight: 500; color: var(--text-2); }
@media (max-width: 640px) { .day-year { display: none; } .title-count { display: none; } }

/* A row of controls over a board */
.board-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.board-bar .grow { flex: 1; min-width: 0; }

/* ---- Cards of products ---- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; }
@media (max-width: 899px) { .cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

.pcard {
  display: grid; gap: 10px; padding: 12px; min-width: 0;
  background: var(--raised); border-radius: var(--r-lg); cursor: pointer; outline-offset: 2px;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pcard:hover { background: var(--raised-hover); }
.pcard.is-selected { box-shadow: 0 0 0 1.5px var(--text); }
.pc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.pc-photos { display: flex; gap: 6px; }
.pc-photo { width: 54px; height: 54px; border-radius: var(--r-md); object-fit: cover; background: var(--line); }
.pc-photo.is-empty { display: block; }
.pc-info { display: grid; gap: 1px; min-width: 0; }
.pc-brand { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; }
.pc-kind { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.3; }
.pc-grade { font-size: var(--fs-body); }
.pc-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); }
.pc-article { color: var(--text-3); min-width: 0; }
.pc-stock { color: var(--text-2); flex: none; }
.pc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-price { font-size: var(--fs-title); font-weight: 600; white-space: nowrap; }
.pc-controls { display: flex; align-items: center; gap: 6px; }
.stepper { display: flex; align-items: center; background: var(--surface); border-radius: var(--r-sm); }
.stepper .btn { border-radius: var(--r-sm); }
.stepper-n { min-width: 22px; text-align: center; font-weight: 550; }
.pc-controls .btn-secondary { background: var(--bg); }
.pc-controls .btn-secondary:hover:not(:disabled) { background: var(--selected); }
.pc-controls .btn { position: relative; }
.pc-badge { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; font-size: 10px; }

/* ---- Schedule ---- */

.content[data-board="schedule"] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.day-title { font-size: 20px; }
.day-year { color: var(--text-3); font-weight: 500; }
.date-pick { position: relative; display: inline-flex; }
.date-picker { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }

.daystrip { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 auto 12px; max-width: 100%; }
.day {
  display: grid; justify-items: center; gap: 1px; width: 44px; padding: 6px 0 7px; border-radius: var(--r-md);
  color: var(--text-2); position: relative; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.day:hover { background: var(--raised); color: var(--text); }
.day-wd { font-size: 11px; font-weight: 500; text-transform: lowercase; color: var(--text-3); }
.day-n { font-size: 15px; font-weight: 550; }
.day.is-on { background: var(--primary); color: var(--on-primary); }
.day.is-on .day-wd { color: color-mix(in srgb, var(--on-primary) 65%, transparent); }
.day.is-today::after { content: ""; position: absolute; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
@media (max-width: 420px) { .day { width: 38px; } }

.sched {
  --gutter: 52px; --col-min: 132px; --hour-h: 64px;
  flex: 1; min-height: 0; position: relative; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}
.sched-head, .sched-body {
  display: grid; grid-template-columns: var(--gutter) repeat(var(--n, 8), minmax(var(--col-min), 1fr));
  min-width: calc(var(--gutter) + var(--n, 8) * var(--col-min));
}
.sched-head { position: sticky; top: 0; z-index: 5; height: 44px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sched-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.sched-name {
  display: grid; place-items: center; padding: 0 8px; min-width: 0; border-left: 1px solid var(--line);
  font-size: 13px; font-weight: 550; color: var(--text-2);
}
.sched-name.is-editable { cursor: text; }
.sched-name.is-editable:hover { background: var(--raised); color: var(--text); }
.name-input { width: 100%; height: 28px; padding: 0 8px; text-align: center; font-weight: 550; background: var(--raised); color: var(--text); border: 1px solid var(--text-2); border-radius: var(--r-sm); outline: 0; }

.sched-body { position: relative; margin-top: 12px; }
.sched-gutter { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--text-3); }
/* The lines of the grid are the stronger line color: --line-soft is too faint on the light themes (an hour, a half hour, a worker) */
.sched-col {
  position: relative; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: cell;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour-h), 100% var(--hour-h);
  background-position: 0 0, 0 calc(var(--hour-h) / 2);
}
.sched-body .sched-col:last-of-type { border-right: 1px solid transparent; }

.sched-note {
  --nc: var(--text-2);               /* the color of the note: the tint of the fill and of the time */
  --nbg: var(--raised-hover);        /* the fill, and under the pointer */
  --nbg-hover: var(--selected);
  position: absolute; left: 3px; right: 3px; padding: 5px 8px 9px; overflow: hidden; z-index: 1;
  background: var(--nbg); border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.3; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); -webkit-tap-highlight-color: transparent;
}
.sched-note:hover { background: var(--nbg-hover); }
/* A colored note: the shade as a tint of the fill (over the grid) and of the time */
.sched-note[data-color="1"] { --nc: var(--nc-1); }
.sched-note[data-color="2"] { --nc: var(--nc-2); }
.sched-note[data-color="3"] { --nc: var(--nc-3); }
.sched-note[data-color="4"] { --nc: var(--nc-4); }
.sched-note[data-color="5"] { --nc: var(--nc-5); }
.sched-note[data-color="6"] { --nc: var(--nc-6); }
.sched-note[data-color="7"] { --nc: var(--nc-7); }
.sched-note[data-color]:not([data-color="0"]) {
  --nbg: color-mix(in srgb, var(--nc) 24%, var(--surface));
  --nbg-hover: color-mix(in srgb, var(--nc) 32%, var(--surface));
}
.sched-note[data-color]:not([data-color="0"]) .sched-note-time { color: color-mix(in srgb, var(--nc) 55%, var(--text)); }
.sched-note-time { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.sched-note { display: flex; flex-direction: column; }
.sched-note-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: none; }
.sched-note-car { min-width: 0; font-size: 11px; font-weight: 600; color: var(--text); }
.sched-note-phone { flex: none; margin-top: 1px; font-size: 11.5px; color: var(--text-2); }
.sched-note-text { margin-top: 1px; overflow-wrap: anywhere; }
.sched-note-author { flex: none; margin-top: auto; padding-top: 3px; font-size: 10.5px; line-height: 1.2; color: var(--text-3); }
/* In the dialog of a note: who made it, at the bottom */
.note-author { font-size: var(--fs-caption); color: var(--text-3); }
.note-author b { font-weight: 500; color: var(--text-2); }
.sched-note-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; cursor: ns-resize; touch-action: none; }
.sched-note-grip::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--text-3); opacity: 0; transition: opacity var(--dur); }
.sched-note:hover .sched-note-grip::after, .sched-note.is-dragging .sched-note-grip::after { opacity: 1; }
@media (hover: none) { .sched-note-grip::after { opacity: .7; } }
@media (pointer: coarse) { .sched-note-grip { height: 22px; } .sched-note-grip::after { bottom: 5px; } }
.sched-note.is-dragging { z-index: 6; box-shadow: var(--shadow); cursor: grabbing; }
.sched-note.is-ghost { opacity: .35; pointer-events: none; z-index: 0; }
.sched-note.is-bad { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }
.sched-note.is-bad .sched-note-time, .sched-note.is-bad[data-color] .sched-note-time { color: var(--danger); }

/* A day off of a worker: the whole column, hatched, so it is seen at once */
.sched-note.is-off {
  background: repeating-linear-gradient(135deg, var(--raised) 0 8px, color-mix(in srgb, var(--text-3) 26%, var(--surface)) 8px 16px); /* clear on the light themes too */
  color: var(--text-2);
}
.sched-note.is-off .sched-note-text { font-weight: 600; color: var(--text); }

.now { position: absolute; left: var(--gutter); right: 0; height: 0; border-top: 1.5px solid var(--text); z-index: 4; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -4px; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.now-chip {
  position: absolute; right: calc(100% + 4px); top: -8px; height: 16px; padding: 0 5px; border-radius: 4px;
  background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 600; line-height: 16px;
}

/* ---- Notepad ---- */

.memos { columns: 250px; column-gap: 12px; }
.memo { display: grid; gap: 10px; break-inside: avoid; margin: 0 0 12px; padding: 14px; background: var(--raised); border-radius: var(--r-lg); }
.memo-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.memo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--h-sm); }
.memo-meta { font-size: var(--fs-caption); color: var(--text-3); }
.memo-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur); }
.memo:hover .memo-actions, .memo:focus-within .memo-actions { opacity: 1; }
@media (hover: none) { .memo-actions { opacity: 1; } }

/* ---- Search and sales bars ---- */

.search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.search-bar .search { flex: 1; min-width: 0; }
.global-toggle[aria-pressed="true"] { background: var(--selected); color: var(--on-selected); }
.global-toggle[aria-pressed="false"] { color: var(--text-3); }
.results-label { margin-bottom: 10px; font-size: var(--fs-caption); color: var(--text-2); }

/* ---- Cart bar ---- */

.cart-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 10px 10px 10px 18px;
  background: var(--raised); border-radius: var(--r-lg); box-shadow: 0 -10px 24px var(--surface);
}
.cart-bar .btn { margin-left: auto; }
.cart-hint { font-size: var(--fs-caption); color: var(--text-3); }
.totals { display: flex; gap: 28px; flex-wrap: wrap; }
.total .caption { line-height: 1.2; }
.total-value { font-weight: 600; font-size: var(--fs-title); }
.total-value.danger { color: var(--danger); }
.total-value.faint { color: var(--text-3); }
@media (max-width: 640px) { .cart-hint { display: none; } .cart-bar { padding-left: 14px; gap: 10px; } .totals { gap: 16px; } }

/* ---- Sales ---- */

.sales { display: grid; gap: 4px; }
.sale-row {
  display: grid; grid-template-columns: 56px 150px minmax(0, 1fr) 130px 120px 130px 110px; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 16px; text-align: left;
  background: var(--raised); border-radius: var(--r-md); transition: background var(--dur) var(--ease);
}
.sale-row:hover { background: var(--raised-hover); }
.sr-n { font-weight: 600; }
.sr-items, .sr-who { color: var(--text-2); }
.sr-with, .sr-status { font-size: var(--fs-caption); }
.sr-sum { font-weight: 600; text-align: right; }
@media (max-width: 899px) {
  .sale-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n when sum" "n items status"; row-gap: 2px; padding: 10px 14px; }
  .sr-n { grid-area: n; align-self: center; }
  .sr-when { grid-area: when; }
  .sr-items { grid-area: items; font-size: var(--fs-caption); }
  .sr-sum { grid-area: sum; }
  .sr-status { grid-area: status; text-align: right; }
  .sr-who, .sr-with { display: none; }
}

/* ---- Dialog of a sale and of a payment ---- */

.sale { display: grid; gap: 10px; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; background: var(--raised); border-radius: var(--r-md); }
.mini-photo { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--line); }
.mini-text { min-width: 0; }
.mini-title { font-weight: 600; }
.mini-kind { margin-left: 8px; font-size: var(--fs-caption); font-weight: 400; color: var(--text-2); }
.mini-money { text-align: right; }
.mini-sum { font-weight: 600; }
.payments { display: grid; gap: 4px; }
.payment { display: grid; grid-template-columns: 84px 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--raised); border-radius: var(--r-md); }
.payment-type { font-weight: 500; }
.payment-sum { font-weight: 600; }
.sale-footer { justify-content: stretch; }
.sale-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; flex-wrap: wrap; }
@media (max-width: 640px) { .minis { grid-template-columns: 1fr; } .payment { grid-template-columns: 80px 1fr auto; } .payment-when { display: none; } }

.pay-sum { display: grid; gap: 2px; }
.pay-amount { font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  .page-actions .btn-text { display: none; }
  .page-actions .btn-primary { width: var(--h-md); padding: 0; }
}

/* ---- VIN: the request on the left, the answer on the right ---- */

.vin-board { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.vin-side { display: grid; gap: 12px; position: sticky; top: 0; }
.vin-panel { display: grid; gap: 10px; padding: 14px; background: var(--raised); border-radius: var(--r-lg); min-width: 0; }
.vin-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.vin-label svg { width: 14px; height: 14px; }
.vin-panel .input, .vin-panel .textarea { background: var(--surface); }
.vin-input { font-size: 16px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
.vin-input::placeholder { letter-spacing: .06em; font-weight: 450; }
.vin-hint { font-size: var(--fs-caption); color: var(--text-3); }
.vin-hint.is-error { color: var(--danger); }
.vin-ask { min-height: 84px; }
.vin-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: var(--h-sm); padding: 0 10px; border-radius: 99px; background: var(--surface); color: var(--text-2);
  font-size: var(--fs-caption); font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { background: var(--selected); color: var(--on-selected); }
.vin-car { display: grid; gap: 6px; }
.vin-car:empty { display: none; }
.vin-car-name { font-size: var(--fs-title); font-weight: 600; }
.vin-car-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vin-muted { font-size: var(--fs-caption); color: var(--text-3); line-height: 1.4; }
.vin-sample-tag { height: 24px; padding: 0 10px; }

.vin-main { display: grid; gap: 18px; min-width: 0; }
.vin-empty { padding-top: 96px; }
.vin-block { display: grid; gap: 10px; }
.vin-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vin-block-head h3 { font-size: var(--fs-title); }

.vin-units { display: flex; flex-wrap: wrap; gap: 6px; }
.vin-unit {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px;
  background: var(--raised); color: var(--text-3); font-size: var(--fs-caption); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vin-unit svg { width: 13px; height: 13px; }
.vin-unit.is-ready { color: var(--text); }
.vin-unit.is-loading { color: var(--text-2); }
.vin-unit-vol { color: var(--text-3); font-weight: 400; }
.vin-spin { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line); border-top-color: var(--text-2); animation: vin-spin .8s linear infinite; }
.vin-spin.is-idle { animation: none; border-top-color: var(--line); }
@keyframes vin-spin { to { transform: rotate(360deg); } }

.vin-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vin-note { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--text-2); }
.vin-card {
  position: relative; display: grid; gap: 8px; align-content: start; min-height: 120px; padding: 12px; min-width: 0;
  background: var(--raised); border-radius: var(--r-lg); text-align: left;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vin-card.is-product { cursor: pointer; }
.vin-card.is-product:hover { background: var(--raised-hover); }
.vin-card.is-selected { box-shadow: 0 0 0 1.5px var(--text); }
.vin-card.is-skeleton { background: linear-gradient(100deg, var(--raised) 30%, var(--raised-hover) 50%, var(--raised) 70%) 0 0 / 300% 100%; animation: vin-shine 1.2s linear infinite; }
.vin-card.is-tall { min-height: 220px; }
@keyframes vin-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vin-card.is-soon { place-items: center; align-content: center; gap: 4px; color: var(--text-3); background: transparent; border: 1px dashed var(--line); font-weight: 500; }
.vin-card.is-soon svg { width: 18px; height: 18px; }
.vin-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.vin-thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface); color: var(--text-3); }
.vin-thumb svg { width: 18px; height: 18px; }
.vin-thumb.is-big { width: 52px; height: 52px; }
.vin-card-text { display: grid; gap: 1px; min-width: 0; }
.vin-card-name { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vin-card-specs { font-size: var(--fs-caption); color: var(--text-2); }
.vin-sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.vin-fit { position: absolute; bottom: 14px; right: 12px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-2); }
.vin-fit svg { width: 12px; height: 12px; }

.vin-picked-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.vin-picked-name { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }
.vin-packs { display: grid; gap: 2px; }
.vin-pack { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; background: var(--surface); border-radius: var(--r-sm); white-space: nowrap; }
.vin-pack.is-head { min-height: 22px; background: none; }
.vin-arts { display: grid; justify-items: start; min-width: 0; }
.vin-pack .copy .caption { font-size: 11px; }

/* An article copied with one click: it lights up under the pointer, the icon shows it can be copied, a check that it was */
.copy {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 2px 6px; margin-left: -6px;
  border-radius: var(--r-sm); font-weight: 550; white-space: nowrap; cursor: copy;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.copy:hover { background: var(--raised-hover); }
.copy:active { transform: scale(.98); }
.copy-mark { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); opacity: 0; transition: opacity var(--dur); }
.copy-mark svg { width: 12px; height: 12px; }
.copy:hover .copy-mark, .copy:focus-visible .copy-mark, .copy.is-copied .copy-mark { opacity: 1; }
.copy.is-copied { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.copy.is-copied .copy-mark { color: var(--text); }
.copy-done { font-size: 11px; font-weight: 500; }
@media (hover: none) { .copy-mark { opacity: .6; } }
.vin-sizes .copy { margin-left: 0; height: 24px; padding: 0 8px; background: var(--surface); border-radius: 99px; font-size: var(--fs-caption); }
.vin-sizes .copy:hover { background: var(--selected); color: var(--on-selected); }
.vin-sizes .copy.is-copied { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.copy-liters { color: var(--text-3); font-weight: 500; margin-right: 2px; }
.vin-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.vin-thumb { overflow: hidden; }
.vin-unit.is-asked { box-shadow: inset 0 0 0 1px var(--line); }

/* Time: how long the answer and the collection took, a stopwatch while the server works */
.vin-stat {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px;
  background: var(--raised); color: var(--text); font-size: var(--fs-caption); font-weight: 550; white-space: nowrap;
}
.vin-stat svg { width: 13px; height: 13px; color: var(--text-2); }
.vin-stat.is-live svg { animation: vin-pulse 1.4s ease-in-out infinite; }
@keyframes vin-pulse { 50% { opacity: .35; } }
.vin-watch { font-variant-numeric: tabular-nums; min-width: 2.6em; }
.vin-block-head h3 + .vin-stat { margin-left: 2px; }
.vin-timing { color: var(--text-2); }

/* Several cars for one VIN: the manager chooses */
.vin-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.vin-choice { gap: 10px; }
.vin-choice-details { display: grid; gap: 2px; }
.vin-choice .btn { justify-self: start; }
.vin-approvals { line-height: 1.4; }

.vin-advice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--raised); border-radius: var(--r-lg); }
.vin-advice:empty { display: none; }
.vin-advice p { margin-top: 4px; line-height: 1.5; }
.vin-advice-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--text-2); }
.vin-advice-icon svg { width: 16px; height: 16px; }

@media (max-width: 1199px) { .vin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .vin-board { grid-template-columns: minmax(0, 1fr); }
  .vin-side { display: contents; }   /* on a phone: the request, then the answer, then the product chosen in it */
  .vin-main { order: 1; }
  .vin-picked { order: 2; }
  .vin-empty { padding-top: 32px; }
}
@media (max-width: 560px) { .vin-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---- Form of a product ---- */

.pform { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: start; }
.pphotos-col { display: grid; gap: 8px; }
.pphotos { display: grid; gap: 8px; }
.photo-hint { font-size: var(--fs-caption); line-height: 1.35; color: var(--text-3); }
.photo-slot {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text-3);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.photo-slot:not(:disabled):hover { background: var(--raised-hover); color: var(--text-2); }
.photo-slot.is-invalid { border-color: var(--danger); color: var(--danger); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* the whole picture, whatever its proportions */
.photo-empty { display: grid; justify-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 500; }
.photo-empty svg { width: 20px; height: 20px; }
.photo-replace {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff;
  font-size: var(--fs-caption); font-weight: 500; opacity: 0; transition: opacity var(--dur);
}
.photo-slot:hover .photo-replace { opacity: 1; }
.pfields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pfields .s2 { grid-column: span 2; }
.pfields .s3 { grid-column: span 3; }
.pfields .s6 { grid-column: span 6; }
.pspecs { display: contents; } /* the characteristics of the kind are cells of the same grid */
.field-hint:empty { display: none; }
.field-hint.is-error { color: var(--danger); }
.value { display: flex; align-items: center; min-height: var(--h-lg); padding: 0 12px; background: var(--raised); border-radius: var(--r-md); }
.combo-chevron { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.combo-chevron svg { width: 14px; height: 14px; }
.combo-list { z-index: 130; padding: 4px; }
.combo-list .menu-item { min-height: var(--h-md); }

@media (max-width: 640px) {
  .pform { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pphotos { grid-template-columns: repeat(2, 96px); }
  .pfields .s3 { grid-column: span 6; }
  .pfields .s2 { grid-column: span 2; }
  .pfields .s3.half { grid-column: span 3; }
}