/* PR-MAT-2 (2026-04-27): Material Library drawer styles. Bottom-
   anchored, slide-up animation respecting reduced-motion. Tile grid
   uses fixed widths so swatches stay legible across viewport sizes
   (4-col on wide screens, auto-flow on narrow tablets). */
.mat-drawer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--pn);
    border-top: 1px solid var(--bdr);
    box-shadow: var(--shadow-modal);
    z-index: var(--z-drawer);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform var(--dur-standard) var(--ease-out);
}
.mat-drawer[hidden]{
    /* Use translateY-out for animated dismissal; visibility hidden
       enforces non-interactive when collapsed even if a stale CSS rule
       leaves transform:0. */
    display: none;
}
.mat-drawer-header{
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
.mat-drawer-title{
    font: var(--type-section-h3);
    color: var(--txt);
    margin: 0;
    flex-shrink: 0;
}
/* PR-MAT-DRAWER-UX (2026-04-27): drawer search + sort + detail. */
.mat-search{
    flex: 0 0 220px;
    background: var(--inp);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    transition: border-color var(--dur-quick) var(--ease-out),
                box-shadow var(--dur-quick) var(--ease-out);
}
.mat-search:focus{
    outline: none;
    border-color: var(--acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.mat-sort{
    flex: 0 0 auto;
    background: var(--inp);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
}
.mat-detail{
    border-top: 1px solid var(--bdr);
    padding: var(--sp-3) var(--sp-5);
    font-size: 11px;
    color: var(--txt);
    background: var(--inp);
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 14px;
    align-items: center;
}
.mat-detail .md-swatch{
    width: 60px; height: 40px;
    border: 1px solid var(--bdr);
    border-radius: var(--radius-xs);
}
.mat-detail .md-name{
    font-weight: 600;
    color: var(--txt);
}
.mat-detail .md-meta{
    color: var(--dim);
    font-family: var(--ff-mono);
    font-size: 10px;
}
.mat-detail .md-cost{
    font-family: var(--ff-mono);
    font-weight: 700;
    color: var(--acc);
    font-size: 13px;
}
.mat-detail .md-grade{
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 9px;
    font-weight: 700;
    color: var(--dim);
}
.mat-drawer-chips{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    flex: 1 1 auto;
    overflow-x: auto;
}
.mat-chip{
    background: var(--inp);
    color: var(--txt);
    border: 1px solid var(--bdr);
    border-radius: var(--radius-xs);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-quick) var(--ease-out),
                border-color var(--dur-quick) var(--ease-out),
                color var(--dur-quick) var(--ease-out);
}
.mat-chip:hover{ background: var(--bdr); }
.mat-chip[aria-selected="true"]{
    background: var(--acc);
    color: var(--acc-ink);
    border-color: var(--acc);
}
.mat-drawer-close{
    background: transparent;
    border: 1px solid var(--bdr);
    color: var(--dim);
    width: 32px; height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.mat-drawer-close:hover{
    background: var(--inp); color: var(--txt);
}
.mat-drawer-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    overflow-y: auto;
    flex: 1 1 auto;
}
.mat-tile{
    /* PR-MAT-3 (2026-04-27): tile is a <button> now (was <div>) so the
       click target carries proper a11y semantics. Reset the user agent
       button styles so the swatch + meta layout reads as a card. */
    display: flex;
    flex-direction: column;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: border-color var(--dur-quick) var(--ease-out),
                box-shadow var(--dur-quick) var(--ease-out),
                transform var(--dur-quick) var(--spring-snappy);
}
.mat-tile:hover{
    border-color: var(--acc);
}
.mat-tile:active{
    transform: scale(0.985);
}
/* PR-MAT-3: the currently-applied material on the selected cabinet
   gets a thicker accent border + glow ring so the operator sees at-a-
   glance which swatch is in effect for the cabinet they're editing. */
.mat-tile.mat-tile-applied{
    border-color: var(--acc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 28%, transparent);
}
/* While the PATCH is in flight (~150-300ms), dim the clicked tile so
   the operator sees their click registered. Cleared on resolve. */
.mat-tile.mat-tile-applying{
    opacity: 0.55;
    pointer-events: none;
}
.mat-tile-swatch{
    width: 100%;
    aspect-ratio: 1.4 / 1;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* PR-GRAIN-OVERLAY (2026-04-28): a lightweight procedural overlay so
   wood tiles read as wood (not as a flat color block) and paint tiles
   read as a soft brushed-paint card (not a flat block either). Two
   pseudo-element layers over the swatch's color background:
   - vertical "grain" stripes for wood (linear-gradient)
   - subtle "paint sheen" diagonal for paint
   Family-specific via data-family attribute on the swatch. */
.mat-tile-swatch[data-family="wood"]::before,
.mat-tile-swatch[data-family="floor"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            92deg,
            rgba(0,0,0,0.00) 0px,
            rgba(0,0,0,0.06) 1px,
            rgba(0,0,0,0.00) 2px,
            rgba(0,0,0,0.00) 5px,
            rgba(255,255,255,0.05) 6px,
            rgba(0,0,0,0.00) 7px),
        repeating-linear-gradient(
            88deg,
            rgba(0,0,0,0.00) 0px,
            rgba(0,0,0,0.04) 8px,
            rgba(0,0,0,0.00) 16px);
    pointer-events: none;
    mix-blend-mode: multiply;
}
.mat-tile-swatch[data-family="wood"]::after,
.mat-tile-swatch[data-family="floor"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.06) 0%,
        rgba(0,0,0,0.00) 28%,
        rgba(0,0,0,0.00) 72%,
        rgba(0,0,0,0.10) 100%);
    pointer-events: none;
}
.mat-tile-swatch[data-family="paint"]::after,
.mat-tile-swatch[data-family="laminate"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.00) 35%,
        rgba(0,0,0,0.00) 65%,
        rgba(0,0,0,0.07) 100%);
    pointer-events: none;
}
.mat-tile-swatch[data-family="metal"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.00) 0px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0.00) 2px),
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.00) 50%,
            rgba(0,0,0,0.10) 100%);
    pointer-events: none;
}
.mat-tile-swatch[data-family="stone"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 25%, rgba(0,0,0,0.10), transparent 35%),
        radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.12), transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.08), transparent 30%);
    pointer-events: none;
}
.mat-tile-swatch[data-family="tile"]::before,
.mat-tile-swatch[data-family="backsplash"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(0,0,0,0.10), rgba(0,0,0,0.10) 1px, transparent 1px, transparent 50%),
        linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.10) 1px, transparent 1px, transparent 25%);
    background-size: 50% 50%, 25% 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.mat-tile-swatch[data-family="glass"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.00) 30%,
        rgba(255,255,255,0.18) 60%,
        rgba(255,255,255,0.00) 100%);
    pointer-events: none;
}
.mat-tile-meta{
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mat-tile-name{
    font-size: 11px;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.3;
    /* Truncate long names to 2 lines max so the grid stays even */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mat-tile-code{
    font-family: var(--ff-mono);
    font-size: 9px;
    color: var(--dim);
    letter-spacing: .05em;
}
.mat-tile-grade{
    font-size: 9px;
    font-weight: 600;
    color: var(--dim);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mat-tile-grade.grade-premium{ color: var(--acc); }
/* PR-MAT-PROJECT-DEFAULT (2026-04-28): bulk-apply toolbar. Sits between
   the optional detail panel and the status row. Buttons are token-only
   (no hex), greyed when no tile is selected. */
.mat-drawer-toolbar{
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--bdr);
    flex-shrink: 0;
}
.mat-btn-bulk{
    background: var(--acc);
    color: var(--acc-on);
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-standard) var(--ease-out);
}
.mat-btn-bulk:hover:not([disabled]){
    background: color-mix(in srgb, var(--acc) 88%, var(--ink));
}
.mat-btn-bulk[disabled]{
    background: color-mix(in srgb, var(--bg) 70%, var(--bdr));
    color: var(--dim);
    cursor: not-allowed;
}
.mat-toolbar-hint{
    font-size: 11px;
    color: var(--dim);
    margin-left: auto;
}
.mat-tile-default-pin{
    position: absolute;
    top: 4px; right: 4px;
    background: var(--acc);
    color: var(--acc-on);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}
.mat-drawer-status{
    padding: var(--sp-2) var(--sp-5);
    border-top: 1px solid var(--bdr);
    font-size: 11px;
    color: var(--dim);
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce){
    .mat-drawer{ transition: none; }
    .mat-tile{ transition: none; }
    .mat-chip{ transition: none; }
    .mat-drawer-close{ transition: none; }
}