/* Filament tracker (/filament). Builds on account.css. */

.fil-panel { display: grid; gap: 18px; min-width: 0; }

/* ---------- head: the title with "Add spool" beside it ---------- */
.fil-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.fil-head > * { grid-column: 1 / -1; }
.fil-head .acct-title { grid-column: 1; }
.fil-head .fil-add { grid-column: 2; grid-row: 2; }

/* ---------- toolbar: search, all/low, cards/list ---------- */
.fil-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fil-search { position: relative; flex: 1 1 240px; min-width: 0; }
.fil-search .ico { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.fil-search .field { width: 100%; height: 44px; padding-left: 42px; font-size: 15px; }
.fil-search .field::-webkit-search-cancel-button { cursor: pointer; }
.seg-inline { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; }
.seg-inline .seg-btn { padding: 0 14px; height: 36px; font-size: 14px; }
.seg-icons .seg-btn { width: 42px; padding: 0; display: grid; place-items: center; }
.seg-icons .ico { width: 18px; height: 18px; }
.seg-count { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: #FDE7C3; color: #8A4B06; font-size: 12px; font-weight: 700; }
.seg-count:empty { display: none; }
.field.field-sm { height: 40px; padding: 0 12px; font-size: 14.5px; }
select.field.field-sm { padding-right: 34px; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362666F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
.fil-add .ico { width: 16px; height: 16px; }

.fil-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-totals[hidden] { display: none; }
.total-chip { padding: 5px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.total-chip b { color: var(--ink); font-weight: 600; }
button.total-chip { cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
button.total-chip:hover { border-color: #CFCBC0; color: var(--ink); }
.total-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #D5D6D2; }
.total-chip[aria-pressed="true"] b { color: var(--lime); }

/* ---------- spool cards ---------- */
.fil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.spool-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.spool-card:hover { box-shadow: var(--shadow); border-color: #D2CEC3; }
.spool-card.is-low { border-color: #EFC98C; }
.spool-media {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background-color: var(--bone);
  background-image: radial-gradient(rgba(20, 21, 25, .12) 1px, transparent 1.3px); background-size: 14px 14px;
  border-bottom: 1px solid var(--line);
}
/* every spool is drawn (spoolSvg in filament.js): the same standard spool, wound with what's left */
.spool-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 12px rgba(20, 21, 25, .22)); }
/* one spool, or a stack of the same filament: the next rolls sit behind the open one, up and to the right */
.spool-stack { position: relative; width: 64%; }
.spool-stack.is-stack { width: 56%; translate: -7% 6%; }
.sp-back { position: absolute; inset: 0; }
.sp-back-1 { transform: translate(12%, -10%) scale(.94); filter: brightness(.8) drop-shadow(0 10px 12px rgba(20, 21, 25, .22)); }
.sp-back-2 { transform: translate(23%, -19%) scale(.88); filter: brightness(.62) drop-shadow(0 10px 12px rgba(20, 21, 25, .22)); }
.badge-count {
  position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--on-dark);
  font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.sp-plate { stroke: rgba(8, 9, 11, .6); stroke-width: 1; stroke-linejoin: round; }
.sp-lip { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.2; }
.sp-hub { fill: #2A2E34; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.sp-hole { fill: #111215; }
.badge-low {
  position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: #FDE7C3; color: #8A4B06; box-shadow: 0 0 0 1px rgba(138, 75, 6, .18) inset;
}
.spool-body { display: grid; gap: 7px; padding: 14px 16px 16px; }
.spool-brand { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spool-name { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(20, 21, 25, .25) inset; }
.spool-meta { font-size: 13.5px; color: var(--ink-3); }
.spool-meta span { white-space: nowrap; }
.meter { height: 7px; margin-top: 4px; border-radius: 4px; overflow: hidden; background: var(--bone-2); box-shadow: 0 0 0 1px rgba(20, 21, 25, .06) inset; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 1px rgba(20, 21, 25, .18) inset; }
.spool-left { font-size: 14px; color: var(--ink-2); }
.spool-left b { color: var(--ink); font-weight: 700; }
.meter-one > .meter { display: block; }
.meter-split { display: flex; gap: 4px; margin-top: 4px; }
.meter-split .meter { flex: 1; margin-top: 0; }
/* a stack's rolls: grams left (and where it lives); the dot marks the roll in use */
.roll-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.roll-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; background: var(--bone);
  box-shadow: 0 0 0 1px var(--line) inset; font-size: 12.5px; color: var(--ink-3); transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.roll-chip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.roll-chip:hover { background: var(--paper); box-shadow: 0 0 0 1px #CFCBC0 inset; }
.roll-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.roll-chip.is-open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); box-shadow: 0 0 0 2px rgba(75, 102, 0, .16); }
.roll-chip.is-empty { opacity: .55; }
.spool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.spool-actions .btn { --btn-h: 34px; padding: 0 12px; font-size: 13.5px; }
.use-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.use-form[hidden] { display: none; }
.use-form .field { width: 120px; height: 36px; }
.use-form .form-msg { flex-basis: 100%; }

/* ---------- list view: one line per spool, color at the far right ---------- */
.fil-list { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.spool-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(150px, .9fr) 26px; align-items: center; gap: 18px;
  width: 100%; padding: 12px 18px; text-align: left; color: var(--ink);
  transition: background-color .15s var(--ease);
}
.row-wrap + .row-wrap { border-top: 1px solid var(--line-2); }
/* a roll just added or changed: a short lime pulse where it landed */
@keyframes fil-new { 0%, 35% { box-shadow: 0 0 0 3px var(--lime), var(--shadow); } 100% { box-shadow: 0 0 0 0 rgba(200, 240, 60, 0); } }
@keyframes fil-new-row { 0%, 35% { background: var(--lime-tint); } 100% { background: transparent; } }
.spool-card.is-new { animation: fil-new 1.8s var(--ease); }
.row-wrap.is-new { animation: fil-new-row 1.8s var(--ease); }
@media (prefers-reduced-motion: reduce) { .spool-card.is-new, .row-wrap.is-new { animation: none; } }
.spool-row:hover { background: #FAF9F6; }
.spool-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.spool-row.is-low { box-shadow: inset 3px 0 0 #EFC98C; }
.spool-row.is-low:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.row-main { display: grid; gap: 3px; min-width: 0; }
.row-name, .row-sub, .row-specs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.row-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.row-specs { font-size: 13.5px; color: var(--ink-3); }
.row-amount { display: grid; gap: 6px; min-width: 0; }
.row-grams { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.row-grams b { color: var(--ink); font-weight: 700; }
.row-low { margin-left: 8px; padding: 1px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: #FDE7C3; color: #8A4B06; vertical-align: 1px; }
.row-amount .meter { display: block; height: 5px; margin-top: 0; }
.row-amount .meter-split { margin-top: 0; gap: 3px; }
.row-count { margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: var(--ink); color: var(--on-dark); font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .04em; vertical-align: 2px; }
.row-wrap.is-open > .spool-row, .row-rolls { background: #FAF9F6; }
.row-rolls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 18px 14px; }
.row-rolls[hidden] { display: none; }
.row-add { font-size: 13.5px; }
.row-swatch { justify-self: end; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(20, 21, 25, .22) inset, 0 1px 2px rgba(20, 21, 25, .12); }
/* a stack: the other rolls peek out behind the swatch, each a shade darker */
.row-swatch.is-stack-2 { box-shadow: 0 0 0 1px rgba(20, 21, 25, .22) inset, 0 0 0 2px var(--paper), -8px 0 0 0 color-mix(in srgb, var(--c) 80%, #141519); }
.row-swatch.is-stack-3 {
  box-shadow: 0 0 0 1px rgba(20, 21, 25, .22) inset, 0 0 0 2px var(--paper), -8px 0 0 0 color-mix(in srgb, var(--c) 80%, #141519),
              -8px 0 0 2px var(--paper), -16px 0 0 0 color-mix(in srgb, var(--c) 62%, #141519);
}

.fil-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; border: 1px dashed #CFCBC0; border-radius: var(--r-lg); background: var(--paper); }
.fil-empty[hidden] { display: none; }
.fil-empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--ink); color: var(--lime); }
.fil-empty-ic .ico { width: 26px; height: 26px; }
.fil-empty .ic-search, .fil-empty.is-search .ic-add { display: none; }
.fil-empty.is-search .ic-search { display: block; }
.fil-empty-title { font-size: 22px; font-stretch: var(--semi); font-weight: 700; letter-spacing: -.015em; }
.fil-empty p { max-width: 44ch; color: var(--ink-2); }
.fil-empty .btn { margin-top: 6px; }

/* ---------- add / edit sheet ---------- */
.sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(620px, 100vw); height: 100dvh; max-height: none; max-width: none;
  border: 0; border-left: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg);
}
.sheet[open] { animation: sheet-in .28s var(--ease); }
.sheet::backdrop { background: rgba(20, 21, 25, .45); }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line-2); }
.sheet-title { font-size: 20px; font-stretch: var(--semi); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); }
.icon-btn:hover { background: var(--bone); color: var(--ink); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 22px; display: grid; gap: 20px; align-content: start; }
.sheet-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--paper); }
.sheet-foot .form-msg { flex: 1 1 160px; margin: 0; }
.text-btn.danger { display: inline-flex; align-items: center; gap: 6px; color: #B42318; text-decoration: none; }
.text-btn.danger .ico { width: 16px; height: 16px; }
.text-btn.danger[hidden] { display: none; }
.text-btn.add-roll { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.text-btn.add-roll:hover { color: var(--ink); }
.text-btn.add-roll .ico { width: 16px; height: 16px; }

.sheet .field { height: 46px; font-size: 15.5px; }
.sheet textarea.field { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field-label.sub { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field-wrap.is-ai .field { border-color: #A8C94A; background: #FBFDF4; }

/* scan: a live drawing of the spool beside the photo buttons (the photo itself is never shown) */
.scan-box {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 14px 20px;
  padding: 16px 20px 16px 16px; border: 1px solid var(--line-2); border-radius: 16px;
  background-color: var(--bone);
  background-image: radial-gradient(rgba(20, 21, 25, .1) 1px, transparent 1.3px); background-size: 14px 14px;
}
.scan-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.scan-art .spool-svg { width: 100%; }
.scan-box.is-scanning .scan-art::after {
  content: ""; position: absolute; left: 2%; right: 2%; top: 8%; height: 2px; border-radius: 2px;
  background: var(--lime); box-shadow: 0 0 10px 2px rgba(200, 240, 60, .75);
  animation: scan-sweep 1.2s ease-in-out infinite alternate;
}
@keyframes scan-sweep { from { top: 8%; } to { top: 92%; } }
@media (prefers-reduced-motion: reduce) { .scan-box.is-scanning .scan-art::after { animation: none; top: 50%; } }
.scan-copy { display: grid; gap: 12px; justify-items: start; }
.scan-lede { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.scan-lede strong { color: var(--ink); }
.photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-btns label { cursor: pointer; }
.photo-btns label:focus-within { box-shadow: var(--focus); }
/* "Take photo" opens the camera straight away, so it only shows on touch screens; a computer just picks a file */
.photo-btns .photo-take { display: none; }
@media (any-pointer: coarse) { .photo-btns .photo-take { display: inline-flex; } }
/* "This roll is: Brand new | Partly used" (new spools only) */
.roll-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.roll-state[hidden] { display: none; }
.roll-state-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.roll-state .seg { background: var(--bone-2); }
.scan-box .scan-status { grid-column: 1 / -1; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2) inset; }
.scan-status { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.45; background: var(--bone); color: var(--ink-2); }
.scan-status[hidden] { display: none; }
.scan-status.is-busy { position: relative; overflow: hidden; }
.scan-status.is-busy::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--lime);
  animation: scan-bar 1.1s ease-in-out infinite;
}
@keyframes scan-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.scan-status.is-ok { background: var(--lime-tint); color: var(--ink); box-shadow: 0 0 0 1px rgba(75, 102, 0, .16) inset; }
.scan-status.is-warn { background: #FDF1DD; color: #7A4306; box-shadow: 0 0 0 1px rgba(138, 75, 6, .16) inset; }

/* color + amounts */
.color-row { display: flex; gap: 8px; }
.color-row input[type="color"] { flex: none; width: 46px; height: 46px; padding: 4px; border: 1px solid #CBC7BB; border-radius: 12px; background: var(--paper); cursor: pointer; }
.color-row .field { flex: 1; min-width: 0; text-transform: uppercase; font-family: var(--font-mono); font-size: 14.5px; }
.unit-field { position: relative; }
.unit-field .field { width: 100%; padding-right: 40px; }
.unit-field span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13.5px; color: var(--ink-3); pointer-events: none; }
.range-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; color: var(--ink-3); }
.fieldset.amount { gap: 14px; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: #FCFBF9; }
.fieldset.amount legend { float: left; width: 100%; margin-bottom: 4px; }
.left-range { width: 100%; accent-color: #141519; }
.weigh summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); list-style: none; }
.weigh summary::-webkit-details-marker { display: none; }
.weigh summary .ico { width: 18px; height: 18px; }
.weigh[open] summary { margin-bottom: 12px; color: var(--ink); }
.weigh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.weigh-op { padding-bottom: 12px; color: var(--ink-3); font-size: 18px; }
.weigh .hint { margin-top: 8px; }

@media (max-width: 640px) {
  .sheet { width: 100vw; border-left: 0; }
  .sheet-body { padding: 18px 16px; }
  .sheet-head, .sheet-foot { padding-left: 16px; padding-right: 16px; }
  .sheet .field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .sheet .field-grid .field-span { grid-column: 1 / -1; }
  .weigh-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .weigh-op { display: none; }
  .weigh-row .btn { grid-column: 1 / -1; }
  .fil-toolbar { gap: 8px; }
  .fil-search { flex: 1 1 0; }
  .fil-toolbar .fil-show { order: 3; flex: 1 1 100%; grid-auto-columns: minmax(0, 1fr); }
  .spool-row { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 12px; padding: 11px 14px; }
  .row-specs, .row-of { display: none; }
  .row-amount { justify-items: end; }
  .row-amount > .meter-one, .row-amount > .meter-split { width: 76px; }
  .row-rolls { padding: 0 14px 12px; }
  .row-swatch { width: 24px; height: 24px; }
  .fil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* narrow cards: a square frame keeps the spool clear of the "Running low" tag */
  .spool-media { aspect-ratio: 1; }
  .spool-media .spool-stack { width: 66%; }
  .spool-media .spool-stack.is-stack { width: 58%; }
  .spool-body { padding: 10px 12px 12px; gap: 5px; }
  .spool-name { font-size: 15px; }
  .spool-meta { font-size: 12.5px; }
  .spool-actions .btn { flex: 1; padding: 0 8px; }
}
@media (max-width: 480px) {
  .scan-box { grid-template-columns: 92px minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
  .scan-lede { font-size: 14px; }
}
@media (max-width: 380px) {
  .sheet .field-grid { grid-template-columns: minmax(0, 1fr); }
}