/* Desktop refinements and local, selectable ambient backgrounds. */
.type-icon{font-size:calc(22px * var(--font-scale,1));font-weight:600;letter-spacing:-1px;min-width:24px;color:#c8beed}
.font-size-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}
.font-size-option{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:15px;border:1px solid #ffffff20;border-radius:16px;background:#ffffff06;text-align:left}
.font-size-option strong{font-size:calc(13px * var(--font-scale,1))}.font-size-option small{font-size:calc(11px * var(--font-scale,1));color:#a8a3bc}.font-size-option svg{width:16px;height:16px;margin-left:auto;color:#c7baff}
.font-size-option[aria-pressed=true]{border-color:#a99bff;background:#a69aff1c}
.font-preview{padding:22px;border:1px solid #ffffff15;border-radius:18px;margin-bottom:18px;background:#ffffff05}
.font-preview>strong{font-size:calc(21px * var(--font-scale,1))}.font-preview p{font-size:calc(14px * var(--font-scale,1));color:#b9b4cb}
.refined-spool{filter:drop-shadow(0 12px 10px #0005)}
.reference-spool{filter:drop-shadow(0 9px 9px #0006)}
.spool-card strong,.spool-card p,.spool-card small{overflow-wrap:anywhere}
.section-heading{flex-wrap:wrap}.section-heading h3{flex-wrap:wrap}
.settings-row{min-width:0}.settings-row>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
:root{--ambient-a:#8b579d;--ambient-b:#3469ae;--ambient-c:#ac6b48}
:root[data-theme=ocean]{--ambient-a:#225f7d;--ambient-b:#267b83;--ambient-c:#5553a7}
:root[data-theme=ember]{--ambient-a:#a76748;--ambient-b:#6d395d;--ambient-c:#b58a43}
:root[data-theme=graphite]{--ambient-a:#586275;--ambient-b:#404b63;--ambient-c:#68607a}
.ambient{inset:-7%;background:radial-gradient(ellipse at 20% 12%,color-mix(in srgb,var(--ambient-c) 19%,transparent),transparent 55%),#11131e}
.ambient::before,.ambient::after{content:"";position:absolute;inset:0;will-change:transform;pointer-events:none}
.ambient::before{background:radial-gradient(ellipse at 75% 20%,color-mix(in srgb,var(--ambient-b) 28%,transparent),transparent 55%),radial-gradient(ellipse at 35% 75%,color-mix(in srgb,var(--ambient-a) 20%,transparent),transparent 55%);animation:ambient-drift 38s ease-in-out infinite alternate}
.ambient::after{background:radial-gradient(ellipse at 85% 90%,color-mix(in srgb,var(--ambient-a) 17%,transparent),transparent 50%);animation:ambient-drift 49s ease-in-out -17s infinite alternate-reverse}
@keyframes ambient-drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.1)}}
:root[data-motion=off] .ambient::before,:root[data-motion=off] .ambient::after{animation:none;will-change:auto}
.sidebar{overflow-y:auto;scrollbar-width:thin}
.sidebar-search{display:flex;align-items:center;gap:9px;margin-top:19px;width:100%;padding:13px 11px;border:1px solid #ffffff19;border-radius:14px;background:#ffffff06;color:#c7c2df;text-align:left;font-size:calc(12px * var(--font-scale, 1))}
.sidebar-search:hover{border-color:#a69aff65;background:#a69aff12}
.sidebar-search .icon{width:18px;height:18px}
.sidebar-storage{font-size:calc(10px * var(--font-scale, 1));color:#a8bdb6;margin:16px 5px 0}
.local-info{margin-top:13px}
/* Enough room for the 2px focus outline + 5px offset and 3px hover lift. */
.spool-cards{padding:12px 10px 18px;margin:-10px -10px 0}
.spool-card:focus-visible{outline-offset:5px}
.open-section,.stock-section{min-width:0}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.theme-option{padding:10px;border:1px solid #ffffff1c;border-radius:18px;background:#ffffff05;text-align:left}
.theme-option[aria-pressed=true]{border-color:#b0a0ff;background:#a69aff15;box-shadow:0 0 0 1px #a69aff55}
.theme-swatch{display:block;width:100%;height:78px;border-radius:11px;margin-bottom:10px;background:radial-gradient(ellipse at 80% 0,#365e9f,transparent 75%),radial-gradient(ellipse at 0 100%,#74446c,transparent 75%),#151825}
.theme-swatch.ocean{background:radial-gradient(ellipse at 80% 0,#226a88,transparent 75%),radial-gradient(ellipse at 0 100%,#24716a,transparent 75%),#121923}
.theme-swatch.ember{background:radial-gradient(ellipse at 80% 0,#82445f,transparent 75%),radial-gradient(ellipse at 0 100%,#996046,transparent 75%),#21171f}
.theme-swatch.graphite{background:radial-gradient(ellipse at 80% 0,#4c596e,transparent 75%),radial-gradient(ellipse at 0 100%,#5b516b,transparent 75%),#171923}
.theme-option strong{display:flex;align-items:center;justify-content:space-between;font-size:calc(12px * var(--font-scale, 1));padding:0 3px 3px}
.theme-option strong svg{height:16px;width:16px;color:#c0b1ff}
.motion-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border-radius:16px;border:1px solid #ffffff18;background:#ffffff05;text-align:left}
.motion-toggle strong{font-size:calc(12px * var(--font-scale, 1));display:block}.motion-toggle small{font-size:calc(10px * var(--font-scale, 1));color:#a8a3bc;display:block;line-height:1.7;margin-top:5px}
.toggle-track{display:block;width:40px;height:23px;flex-shrink:0;background:#565268;border-radius:99px;padding:3px}.toggle-track::after{content:"";display:block;width:17px;height:17px;border-radius:50%;background:white;transition:transform .2s}
[aria-pressed=true] .toggle-track{background:#9582ed}[aria-pressed=true] .toggle-track::after{transform:translateX(17px)}
@media(min-width:801px){
  .workspace{max-width:none;width:calc(100% - 260px)}
  .header-actions{display:none}
  .sidebar-search[aria-current=page]{background:#a69aff20;border-color:#a69aff60}
}
@media(min-width:801px) and (max-width:1100px){.workspace{width:calc(100% - 215px)}}
@media(min-width:1350px){
  .home-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(365px,1fr);gap:clamp(28px,3vw,64px);align-items:start}
  .home-columns .section-heading{margin-top:0;min-height:28px}
  .home-columns .spool-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));overflow:visible;align-items:stretch}
  .home-columns .spool-card{min-width:0;max-width:none;width:100%}
  .home-columns .add-card{min-height:255px}
  .home-columns .stock-section{padding-left:clamp(0px,1vw,18px)}
}
@media(min-width:2200px){
  .workspace{padding-left:clamp(50px,4vw,140px);padding-right:clamp(50px,4vw,140px)}
  .home-columns{grid-template-columns:minmax(0,1.5fr) minmax(470px,1fr)}
  .home-columns .spool-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
/* Standalone lists (all statuses, search and the stock picker): exactly two
   items per row on PC. Search headings still separate the three statuses. */
@media(min-width:801px){
  #results .inventory-list,#main>.inventory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;border-radius:0;background:none;overflow:visible}
  #results .inventory-list>.roll-row,#main>.inventory-list>.roll-row{min-width:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(110deg,#ffffff06,#ffffff02)}
}
@media(min-width:801px) and (max-width:1250px){
  #results .roll-row,#main>.inventory-list>.roll-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;padding:13px;gap:9px}
  #results .row-main,#main>.inventory-list .row-main{gap:9px}
  #results .roll-row .spool-art,#main>.inventory-list .spool-art{width:45px;height:52px}
  #results .row-open,#main>.inventory-list .row-open{grid-column:1/-1;grid-row:2;margin-left:54px;justify-self:start}
  #results .row-chevron,#main>.inventory-list .row-chevron{grid-column:3;grid-row:1}
  #results .tag,#main>.inventory-list .tag{font-size:calc(9px * var(--font-scale, 1));padding:5px 7px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none!important;will-change:auto}.toggle-track::after{transition:none}}