/* A compact materials bench: three starting styles, then one part of the binder at a time. */
.binder-customizer { min-width: 0; color: #d9d4cd; }
.binder-customizer [hidden] { display: none !important; }
.binder-style-presets { padding: 0; margin: 0; border: 0; min-width: 0; }
.binder-style-presets legend { padding: 0; margin-bottom: 10px; color: #c8c1b5; font-size: 11px; }
.binder-preset-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.binder-preset { display: grid; grid-template-rows: 50px auto 1fr; justify-items: start; gap: 6px; min-width: 0; padding: 9px; border: 1px solid #ffffff1f; border-radius: 7px; color: #c7c1b8; background: #ffffff03; font: inherit; text-align: left; cursor: pointer; }
.binder-preset strong { font-size: 12px; font-weight: 600; }
.binder-preset small { font-size: 9px; line-height: 1.45; color: #9d998f; }
.binder-preset[aria-pressed="true"] { border-color: #d5b968a6; background: #d5b9680b; color: #e8d392; }
.binder-preset:hover { border-color: #b3a2739c; }
.binder-preset-sample { position: relative; width: 34px; height: 46px; margin-left: 2px; border: 1px solid #a99b6c63; border-radius: 2px 5px 5px 2px; background: var(--binder-texture, none), linear-gradient(95deg, #181e16, #53543a); box-shadow: inset 3px 0 #0004, 2px 2px 3px #0005; }
.binder-preset-sample[data-preset="midnight"] { background: var(--binder-texture, none), linear-gradient(160deg, #294961, #151c27); border-color: #a0b4c352; }
.binder-preset-sample[data-preset="vintage"] { background: var(--binder-texture, none), linear-gradient(95deg, #48291c, #8b5136); border-color: #bb8b5d69; }
.binder-preset-seam { position: absolute; inset: 4px 3px 4px 6px; border: 1px solid #c3af6f7a; border-radius: 1px 2px 2px 1px; }
.binder-preset-sample[data-preset="midnight"] .binder-preset-seam { inset: auto 7px 9px 9px; border-color: #ccd7db70; }
.binder-preset-sample[data-preset="vintage"] .binder-preset-seam { border-style: dotted; }
.binder-preset-mark { position: absolute; left: 15px; top: 16px; width: 7px; height: 7px; border: 1px solid #e0cb82b3; transform: rotate(45deg); }
.binder-preset-sample[data-preset="midnight"] .binder-preset-mark { border-color: #d6e1e9ba; }
.binder-preset-hint { margin: 10px 0 18px; color: #9d998f; font-size: 10px; line-height: 1.5; }
.binder-style-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border: 1px solid #ffffff1a; border-radius: 8px; background: #080a0c4d; }
.binder-style-tab { min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; font: inherit; font-size: 12px; color: #aaa69d; background: transparent; cursor: pointer; }
.binder-style-tab[aria-selected="true"] { color: #e7d18d; border-color: #ddc47742; background: #cdb46610; box-shadow: 0 1px 3px #0002; }
.binder-style-tab:hover { color: #f1e6c6; }
.binder-style-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; padding-top: 20px; }
.binder-style-panel:focus { outline: none; }
.binder-style-panel:focus-visible { outline: 1px solid #e4cd7377; outline-offset: 5px; border-radius: 4px; }
.binder-style-full, .binder-style-disclosure, .binder-style-lining { grid-column: 1 / -1; }
.binder-style-panel .pack-select-field { min-width: 0; }
.binder-style-panel .pack-select-field > span { font-size: 11px; }
.binder-style-panel .pack-select-field select, .binder-style-panel .pack-select-field input { width: 100%; min-width: 0; }
.binder-style-disclosure { border-top: 1px solid #ffffff12; padding-top: 13px; }
.binder-style-disclosure > summary { color: #c6bfb3; font-size: 11px; cursor: pointer; padding: 4px 0 7px; }
.binder-style-disclosure > summary::marker { color: #ab955d; font-size: 9px; }
.binder-style-disclosure[open] > summary { color: #e2d3a9; }
.binder-style-disclosure-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding-top: 10px; }
.binder-style-disclosure .binder-blend-picker > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; white-space: nowrap; }
.binder-style-help { margin: 0; color: #a6a095; font-size: 11px; line-height: 1.6; grid-column: 1 / -1; }
.binder-style-lining { min-width: 0; padding: 0; margin: 0; border: 0; }
.binder-style-lining legend { padding: 0; margin: 0 0 10px; color: #b9b4bd; font-size: 11px; }
.binder-style-lining .binder-lining-sample[data-lining="matching"] { background: linear-gradient(90deg, #0004, transparent, #0005), var(--binder-preview-pigment, #55533b); }
.binder-style-lining .binder-lining-sample[data-lining="charcoal"] { background: repeating-linear-gradient(115deg, transparent 0 2px, #ffffff04 3px), #242429; }
.binder-style-lining .binder-lining-sample[data-lining="linen"] { background: repeating-linear-gradient(0deg, transparent 0 2px, #ffffff0a 3px), repeating-linear-gradient(90deg, transparent 0 2px, #0002 3px), #746349; }
.binder-decoration-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.binder-decoration-option { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; align-items: center; gap: 4px 9px; min-width: 0; padding: 10px; border: 1px solid #ffffff20; border-radius: 6px; background: #ffffff02; color: #d3cbbb; font: inherit; text-align: left; cursor: pointer; }
.binder-decoration-icon { grid-row: span 2; color: #cdb67c; }
.binder-decoration-icon svg { display: block; width: 30px; height: 30px; }
.binder-decoration-option strong { font-size: 10px; font-weight: 500; }
.binder-decoration-option small { color: #a09a8d; font-size: 9px; line-height: 1.5; }
.binder-decoration-option[aria-pressed="true"] { border-color: #d8bf70; background: #cbb06a0d; }
.binder-decoration-option[data-locked="true"] { cursor: default; opacity: .65; }
.binder-decoration-option[data-locked="true"] .binder-decoration-icon { color: #8f8a80; }
.binder-customizer :is(.binder-preset, .binder-style-tab, .binder-decoration-option, summary):focus-visible { outline: 2px solid #e4cd73; outline-offset: 3px; }
.binder-customizer button:disabled { cursor: default; }
@media (max-width: 500px) {
  .binder-style-panel { gap: 15px 10px; }
  .binder-preset { padding: 8px; }
  .binder-preset small { font-size: 8px; }
  .binder-customizer .pack-binder-swatch { min-width: 30px; min-height: 30px; }
  .binder-decoration-option { grid-template-columns: 25px minmax(0, 1fr); gap: 5px; padding: 8px; }
  .binder-decoration-icon svg { width: 25px; height: 25px; }
}
@media (forced-colors: active) {
  .binder-preset, .binder-style-tabs, .binder-decoration-option { border-color: ButtonText; }
  .binder-preset[aria-pressed="true"], .binder-style-tab[aria-selected="true"], .binder-decoration-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* A readable materials bench, with one quiet selection treatment throughout. */
.binder-customizer { color: #dedee1; --binder-choice-edge: #f3c65c96; --binder-choice-fill: #f3c65c0b; }
.binder-customizer :is(legend, .binder-style-help, .binder-style-panel .pack-select-field > span, .binder-style-disclosure > summary) { color: #bfc0c6; font-size: 13px; line-height: 1.5; }
.binder-customizer :is(.binder-preset, .binder-thread-option, .binder-lining-option, .binder-logo-option, .binder-logo-position, .binder-decoration-option) { position: relative; border-radius: 11px; }
.binder-customizer :is(.binder-preset, .binder-thread-option, .binder-lining-option, .binder-logo-option, .binder-logo-position, .binder-decoration-option)[aria-pressed="true"] { border-color: var(--binder-choice-edge); background-color: var(--binder-choice-fill); color: #eedca9; }
.binder-customizer :is(.binder-blend-option, .binder-spine-option) { position: relative; }
.binder-selection-check { position: absolute; top: 7px; right: 7px; display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: #f3c65c; color: #17191d; pointer-events: none; }
.binder-selection-check .pack-icon { width: 13px; height: 13px; }
.binder-customizer [aria-pressed="true"] > .binder-selection-check { display: flex; }
.binder-preset { grid-template-rows: 59px auto 1fr; gap: 8px; padding: 12px; background: #ffffff02; color: #dedee1; }
.binder-preset strong { font-size: 14px; }
.binder-preset small { color: #afb0b8; font-size: 12px; line-height: 1.5; }
.binder-preset-sample { width: 41px; height: 56px; }
.binder-preset-mark { left: 18px; top: 22px; }
.binder-style-current { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: #dedee1; }
.binder-style-current[data-custom="true"] { color: #eedca9; }
.binder-preset-hint { color: #afb0b8; font-size: 12px; margin: 5px 0 18px; }
.binder-style-tabs { border-radius: 12px; background: #0f1013; }
.binder-style-tab { min-height: 44px; font-size: 13px; border-radius: 9px; color: #bfc0c6; }
.binder-style-tab[aria-selected="true"] { color: #eedca9; border-color: #f3c65c66; background: #f3c65c0b; box-shadow: none; }
.binder-style-disclosure > summary { min-height: 44px; padding: 10px 0; }
.binder-customizer :is(input, select) { min-height: 44px; font-size: 14px; border-radius: 11px; }
.binder-customizer .pack-binder-swatches { gap: 6px; }
.binder-customizer .pack-binder-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 11px; }
.binder-customizer .pack-binder-swatch > .pack-icon { width: 18px; height: 18px; opacity: 0; color: white; filter: drop-shadow(0 1px 2px #000); }
.binder-customizer .pack-binder-swatch[aria-pressed="true"] > .pack-icon { opacity: 1; }
.binder-decoration-option { padding: 13px 30px 13px 11px; align-items: start; }
.binder-decoration-option strong { font-size: 12px; line-height: 1.4; color: #dedee1; }
.binder-decoration-option small { font-size: 12px; color: #afb0b8; line-height: 1.5; }
.binder-decoration-option[data-locked="true"] { opacity: .78; }
.binder-customizer .binder-lining-sample { height: 26px; margin-top: 2px; }
.binder-customizer .binder-lining-option { min-height: 80px; padding: 9px; font-size: 12px; gap: 9px; }
.binder-customizer :is(.binder-spine-choice-label, .binder-thread-option, .binder-spine-note, .binder-logo-name, .binder-logo-position, .binder-logo-hint, .binder-blend-option) { font-size: 12px; color: #bfc0c6; line-height: 1.45; }
.binder-customizer .binder-thread-option { min-height: 72px; padding: 12px; gap: 10px; }
.binder-customizer .binder-thread-sample { max-width: calc(100% - 16px); }
.binder-customizer .binder-spine-section-label { font-size: 13px; color: #bfc0c6; }
.binder-customizer .binder-spine-sample { height: 91px; border-radius: 11px; }
.binder-customizer .binder-spine-option[aria-pressed="true"] .binder-spine-sample,
.binder-customizer .binder-blend-option[aria-pressed="true"] .binder-blend-sample { border-color: var(--binder-choice-edge); box-shadow: none; outline: none; }
.binder-customizer .binder-blend-sample { height: 60px; border-radius: 11px; }
.binder-customizer .binder-logo-position { min-height: 44px; }
.binder-customizer .binder-logo-option { min-height: 89px; }
@media (max-width: 500px) {
  .binder-preset { padding: 10px 9px; gap: 7px; }
  .binder-preset small { font-size: 12px; }
  .binder-preset strong { font-size: 13px; }
  .binder-style-panel { gap: 19px 12px; }
  .binder-decoration-choices { grid-template-columns: 1fr; }
  .binder-decoration-option { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 13px 34px 13px 12px; }
  .binder-customizer .binder-blend-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (forced-colors: active) {
  .binder-customizer [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
  .binder-selection-check { background: Highlight; color: HighlightText; }
}

/* Material samples sit on quiet trays, while selected choices have a warm edge. */
.binder-customizer { --binder-choice-edge: #d9b562; --binder-choice-fill: #b8934514; }
.binder-customizer .binder-style-presets > legend { font-weight: 600; color: #e0d4b8; }
.binder-preset-choices { gap: 8px; }
.binder-customizer .binder-preset { background: linear-gradient(150deg, #ffffff05, transparent 65%), #1a1d22; border-color: #ffffff20; box-shadow: inset 0 1px #ffffff04; }
.binder-customizer .binder-preset-sample { transform: perspective(180px) rotateY(-9deg); box-shadow: inset 3px 0 #0004, 5px 4px 6px #0005; }
.binder-customizer .binder-preset[aria-pressed="true"] { background: linear-gradient(150deg, #d5b4600b, transparent 80%), #211f19; box-shadow: inset 0 0 0 1px #d9b56210; }
.binder-customizer .binder-style-tabs { padding: 4px; background: #0f1115; border-color: #ffffff20; }
.binder-customizer .binder-style-tab[aria-selected="true"] { background: #c4a05a17; border-color: #c4a05a63; color: #f0d590; }
.binder-customizer .binder-style-panel .pack-select-field > span,
.binder-customizer .binder-style-lining > legend { color: #cfcbc2; font-size: 12px; font-weight: 550; }
.binder-customizer .binder-style-panel .pack-select-field :is(select, input) { border: 1px solid #ffffff26; background-color: #111318; box-shadow: inset 0 1px 3px #0003; color: #e5e3e1; }
.binder-customizer .binder-style-panel .pack-select-field :is(select, input):focus-visible { outline: 2px solid #d8b35f80; outline-offset: 2px; border-color: #d8b35f; }
.binder-customizer .binder-style-disclosure { padding: 0 12px; border: 1px solid #ffffff18; border-radius: 11px; background: #ffffff02; }
.binder-customizer .binder-style-disclosure[open] { background: #13161b; border-color: #ffffff22; }
.binder-customizer .binder-style-disclosure-body { padding: 2px 0 15px; }
.binder-customizer .binder-style-disclosure > summary { color: #d1c7af; font-size: 12px; font-weight: 550; }
.binder-customizer :is(.binder-thread-option, .binder-lining-option, .binder-logo-position, .binder-decoration-option) { background-color: #1a1d22; border-color: #ffffff20; }
.binder-customizer :is(.binder-thread-option, .binder-lining-option, .binder-logo-position, .binder-decoration-option):hover:not(:disabled, [data-locked="true"]),
.binder-customizer .binder-preset:hover:not(:disabled) { border-color: #b9a57980; }
.binder-customizer .binder-lining-sample { border: 1px solid #ffffff17; border-radius: 5px; box-shadow: inset 0 1px 4px #0004; }
.binder-customizer .binder-decoration-option[data-locked="true"] { background: #ffffff01; border-style: dashed; }
.binder-customizer .pack-binder-swatch { border-radius: 9px; box-shadow: 0 0 0 1px #ffffff28, inset 0 1px 3px #ffffff14; }
.binder-customizer .pack-binder-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #e8c778, inset 0 1px 3px #ffffff14; }
@media (forced-colors: active) {
  .binder-customizer :is(.binder-preset, .binder-style-tabs, .binder-style-disclosure, .binder-thread-option, .binder-lining-option, .binder-logo-position, .binder-decoration-option) { border-color: ButtonText; }
}

/* Release editor: the everyday choices stay together; fine adjustments are opt-in. */
.binder-customizer .binder-style-basics { padding-top: 0; gap: 24px 12px; }
.binder-customizer .binder-style-basics > .binder-logo-picker { grid-column: 1 / -1; }
.binder-customizer .binder-style-advanced { margin-top: 24px; }
.binder-customizer .binder-style-advanced > summary { font-size: 14px; }
.binder-customizer .binder-style-advanced > .binder-style-disclosure-body { display: block; }
.binder-customizer .binder-preset-sample {
  background: var(--binder-texture, none), linear-gradient(105deg, #0006, transparent 45%, #ffffff08),
    linear-gradient(160deg, var(--preset-from), var(--preset-to));
}
.binder-customizer .binder-style-basics .binder-material-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 9px; }
.binder-customizer .binder-style-basics .binder-material-swatch { height: 54px; }