/* Icon Workbench · Apple refresh
 * Load AFTER style.css and hallmark.css. Existing DOM and data-action stay intact.
 * Catalogue-only reductions are scoped to .unified-catalogue; group/share titles survive.
 */
:root {
 --color-paper:oklch(97% .002 250); --color-surface:oklch(100% 0 0);
 --color-paper-2:oklch(97.5% .002 250); --color-paper-3:oklch(94% .003 250);
 --color-ink:oklch(23% .005 250); --color-ink-2:oklch(36% .007 250);
 --color-muted:oklch(51% .008 250); --color-rule:oklch(90% .004 250);
 --color-rule-strong:oklch(81% .006 250); --color-accent:oklch(54% .19 255);
 --color-accent-soft:oklch(95% .023 255); --color-focus:oklch(54% .19 255);
 --color-accent-ink:white; --color-overlay:oklch(20% .01 250 / .25);
 --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC',system-ui,sans-serif;
 --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC',system-ui,sans-serif;
 --font-mono:'SF Mono',ui-monospace,Menlo,monospace;
 --sidebar-width:196px; --inspector-width:292px; --control-height:36px;
 --radius-control:7px; --radius-panel:10px; --text-display:22px;
 --border:var(--color-rule); --muted:var(--color-muted); --green:var(--color-accent);
}
html,body { background:var(--color-paper); color:var(--color-ink); font-family:var(--font-body); }
body { font-size:13px; line-height:1.5; }
h1,h2,h3,.brand { font-family:var(--font-display); letter-spacing:-.025em; }
button,input,select,textarea { font-family:var(--font-body); }
button,a,input,select { transition:background-color 140ms cubic-bezier(.23,1,.32,1),border-color 140ms cubic-bezier(.23,1,.32,1); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.app-nav { height:56px; padding:0 24px; background:var(--color-surface); border-bottom:1px solid var(--color-rule); }
.brand { font-size:15px; font-weight:600; gap:9px; letter-spacing:-.4px; }
.brand-mark { width:25px; height:25px; border-radius:6px; background:var(--color-ink); color:white; display:grid; place-items:center; }
.nav-actions { gap:12px; }
.nav-actions .nav-login { display:inline-flex; }
.command-trigger { border:0; background:transparent; padding:8px; }
.command-trigger > span,.command-trigger > kbd { display:none; }
.nav-actions .button { font-size:12px; }
.nav-actions .primary { background:var(--color-paper-2); color:var(--color-ink); border:1px solid var(--color-rule); }
.sidebar { background:var(--color-paper); }
.sidebar-bottom,.sidebar-empty,.sidebar .new-group-link[data-action="login-open"] { display:none; }
.sidebar .nav-item,.group-nav .nav-item { min-height:38px; font-size:13px; border-radius:7px; padding:9px 11px; }
.nav-item.active { background:var(--color-paper-3); color:var(--color-ink); font-weight:600; }
.nav-item svg { width:17px; height:17px; color:var(--color-muted); }
.nav-item.active svg { color:var(--color-accent); }
.sidebar .nav-caption { font-size:11px; margin:28px 11px 8px; color:var(--color-muted); }
.nav-number { font-size:11px; font-variant-numeric:tabular-nums; }
.new-group-link { border:0; background:transparent; justify-content:flex-start; color:var(--color-muted); font-size:12px; }
.main { background:white; min-height:100dvh; }
.content { padding:28px 30px 0; max-width:1800px; }
.unified-catalogue .heading-row { margin-bottom:22px; }
.unified-catalogue .heading-row .subtitle,.unified-catalogue .heading-actions,.unified-catalogue .count-badge { display:none; }
.page-heading h1 { font-size:22px; font-weight:600; margin:0; }
/* Hide redundant search label visually, preserving the accessible name. */
.search-tools > .field-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.search-box { height:42px; background:var(--color-paper-2); border:1px solid var(--color-rule); border-radius:8px; padding:0 12px; box-shadow:none; }
.search-box input { font-size:13px; height:40px; }
.search-box:focus-within { outline:2px solid var(--color-focus); outline-offset:2px; border-color:transparent; }
.collection-tabs,.purpose-tabs { gap:5px; margin-top:18px; padding-bottom:0; border:0; flex-wrap:wrap; }
.collection-tabs button { min-height:34px; padding:6px 12px; border:0; border-radius:6px; background:transparent; color:var(--color-muted); font-size:12px; }
.collection-tabs button.selected { background:var(--color-paper-3); color:var(--color-ink); }
.purpose-count { display:none; }
.catalogue-filters { display:flex; gap:12px; margin-top:16px; padding-top:0; border:0; }
.catalogue-filters label { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:12px; }
.catalogue-filters select { width:auto; font-size:12px; height:32px; padding:4px 26px 4px 9px; border-color:var(--color-rule); }
.catalogue-filters .mobile-purpose { display:none; }
.grid-heading { margin:24px 0 14px; padding:0; font-size:12px; }
.grid-heading strong { font-size:12px; font-weight:500; }
.grid-heading span { color:var(--color-muted); font-size:11px; }
.icon-grid,.has-drawer .icon-grid,.phosphor-catalogue .icon-grid,.phosphor-catalogue.has-drawer .icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; }
.tile-wrapper { position:relative; min-width:0; }
.icon-tile { width:100%; min-height:122px; padding:24px 8px 17px; background:white; border:1px solid var(--color-rule); border-radius:9px; box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.icon-tile[aria-pressed="true"] { border-color:var(--color-accent); background:var(--color-accent-soft); box-shadow:inset 0 0 0 .5px var(--color-accent); }
.icon-picture { display:grid; place-items:center; height:36px; background:transparent; }
.icon-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--color-ink-2); }
.icon-purpose { display:none; }
.tile-actions { position:absolute; right:5px; top:5px; display:flex; opacity:0; pointer-events:none; background:white; border:1px solid var(--color-rule); border-radius:5px; }
.tile-actions .icon-button { width:26px; height:26px; min-height:26px; padding:5px; }
.tile-wrapper:hover .tile-actions,.tile-wrapper:focus-within .tile-actions { opacity:1; pointer-events:auto; }
.tile-wrapper:hover .icon-tile:not([aria-pressed="true"]) { background:var(--color-paper-2); border-color:var(--color-rule-strong); }
.button { min-height:36px; padding:7px 12px; border-radius:7px; font-size:12px; box-shadow:none; }
.button.primary { background:var(--color-accent); border:1px solid var(--color-accent); color:white; }
.button.secondary { background:white; border:1px solid var(--color-rule); color:var(--color-ink); }
.text-button { color:var(--color-muted); font-size:12px; }
.drawer.compact-drawer { background:white; border-left:1px solid var(--color-rule); width:var(--inspector-width); box-shadow:none; }
.compact-drawer .drawer-top { padding:18px 20px 14px; }
.compact-drawer .drawer-top h2 { font-size:14px; font-weight:600; }
.compact-drawer .large-preview { height:144px; margin:0 20px; background:var(--color-paper-2); border:1px solid var(--color-rule); border-radius:8px; }
.compact-drawer .drawer-body { padding:20px; gap:20px; }
.actual-sizes { display:flex; justify-content:center; align-items:center; gap:26px; }
.actual-sizes figure { margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:16px; }
.actual-sizes figcaption { color:var(--color-muted); font:10px var(--font-mono); }
.compact-drawer .appearance-fields { gap:12px; }
.appearance-fields label { font-size:12px; color:var(--color-muted); }
.appearance-fields input,.appearance-fields select { border:1px solid var(--color-rule); height:36px; border-radius:6px; background:white; }
.drawer-downloads { gap:6px; }
.drawer-downloads .button { font-size:12px; }
.group-target { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.group-target select { width:100%; border:1px solid var(--color-rule); }
.save-to-group > label { display:block; font-size:12px; color:var(--color-muted); margin-bottom:8px; }
.drawer-utilities { flex-wrap:wrap; justify-content:flex-start; gap:12px; }
.main-footer { border-top:1px solid var(--color-rule); color:var(--color-muted); font-size:11px; margin-top:32px; padding:16px 0; }
.main-footer > span:last-child { display:none; }
.modal { border-radius:12px; border:1px solid var(--color-rule); box-shadow:0 18px 60px #0002; }
@media(min-width:1024px) {
 .app-nav { position:fixed; inset:0 0 auto; z-index:4; }
 .sidebar { position:fixed; inset:56px auto 0 0; width:var(--sidebar-width); padding:20px 12px; border-right:1px solid var(--color-rule); flex-direction:column; align-items:stretch; }
 .sidebar .group-nav { flex-direction:column; }
 .main { margin-left:var(--sidebar-width); padding-top:56px; }
 .has-drawer .main { margin-right:var(--inspector-width); }
 .drawer.compact-drawer { position:fixed; inset:56px 0 0 auto; overflow-y:auto; z-index:5; }
 .drawer-backdrop { display:none; }
}
@media(max-width:1023px) {
 .app-nav { position:relative; padding:0 16px; }
 .sidebar { position:relative; inset:auto; width:100%; display:flex; flex-direction:row; gap:4px; padding:8px 12px; overflow-x:auto; border-bottom:1px solid var(--color-rule); }
 .sidebar .nav-caption,.sidebar-empty { display:none; }
 .group-nav { display:flex; flex-direction:row; flex-shrink:0; }
 .sidebar .nav-item,.new-group-link { white-space:nowrap; flex-shrink:0; width:auto; }
 .main,.has-drawer .main { margin:0; padding:0; min-height:calc(100dvh - 110px); }
 .drawer.compact-drawer { position:fixed; inset:auto 0 0; width:100%; max-height:85dvh; border:0; border-top:1px solid var(--color-rule); border-radius:16px 16px 0 0; z-index:8; padding-bottom:env(safe-area-inset-bottom); overflow-y:auto; }
 .drawer-backdrop { display:block; position:fixed; inset:0; background:var(--color-overlay); z-index:7; }
 .has-drawer .main { pointer-events:none; }
}
@media(max-width:639px) {
 :root { --control-height:44px; }
 .app-nav { padding:0 12px; gap:8px; }
 .brand { font-size:13px; gap:6px; }
 .nav-actions { gap:6px; }
 .nav-actions .command-trigger { display:none; }
 .nav-actions .button { padding:7px 9px; }
 .nav-actions .button svg { display:none; }
 .nav-actions .nav-login { min-height:44px; display:inline-flex; }
 .content { padding:22px 16px 0; }
 .page-heading h1 { font-size:20px; }
 .unified-catalogue .heading-row { margin-bottom:16px; }
 .collection-tabs button { min-height:44px; padding:8px 10px; }
 .catalogue-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
 .catalogue-filters label { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
 .catalogue-filters select { width:100%; height:44px; }
 .catalogue-filters .mobile-purpose { display:none; }
 .icon-grid,.has-drawer .icon-grid,.phosphor-catalogue .icon-grid,.phosphor-catalogue.has-drawer .icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .icon-tile { min-height:108px; padding:18px 4px 12px; }
 .grid-heading { flex-wrap:wrap; gap:8px; }
 .button,.icon-button,.text-button,.drawer select,.drawer input { min-height:44px; }
 .tile-actions { display:none; }
 .compact-drawer .large-preview { height:112px; }
 .compact-drawer .drawer-body { gap:16px; }
 .modal { width:calc(100% - 24px); max-height:90dvh; overflow:auto; padding:24px 20px; }
}
@media(hover:none) { .tile-actions { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }
/* Restore purpose controls hidden by the upstream mobile breakpoint. */
.collection-tabs,.purpose-tabs { display:flex; }
.app-nav .nav-actions .button.primary { background:var(--color-paper-2); color:var(--color-ink); border-color:var(--color-rule); }
.compact-drawer select { padding:6px 9px; line-height:normal; }
.command-trigger { min-width:36px; width:36px; }
@media(max-width:639px) {
 .app-nav .nav-actions .button.primary { font-size:12px; width:auto; }
 .collection-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
 .collection-tabs button { flex-shrink:0; }
 .purpose-tabs { display:none; }
 .catalogue-filters .mobile-purpose { display:flex; grid-column:1/-1; }
 .catalogue-filters select,.search-box input { font-size:16px; }
 .catalogue-filters label > span { font-size:12px; }
}
@media(max-height:650px) {
 .compact-drawer .drawer-top { padding:10px 16px; }
 .compact-drawer .large-preview { height:80px; }
 .compact-drawer .drawer-body { padding:12px 16px; gap:12px; }
 .compact-drawer .appearance-controls { gap:8px; }
}
@media(max-width:1023px) and (max-height:650px) {
 .drawer.compact-drawer { max-height:100dvh; border-radius:0; }
 .compact-drawer .drawer-body { gap:8px; }
 .compact-drawer .drawer-utilities { gap:8px; }
}


/* Search-first catalogue and quiet cards, informed by Lobe Icons. */
:root { --color-paper:#f7f7f8; --color-rule:#e9e9ec; }
.sidebar { background:#f7f7f8; }
.content { padding-top:32px; }
.page-heading h1 { font-size:28px; letter-spacing:-.04em; }
.catalogue-actions { display:flex; gap:8px; }
.search-box { height:48px; background:#fafafb; border-radius:12px; }
.search-box input { height:44px; }
.icon-grid,.has-drawer .icon-grid { gap:12px; }
.icon-tile { border-color:#efeff1; border-radius:12px; min-height:132px; gap:10px; background:#fff; }
.icon-picture { height:42px; }
.icon-name { font-size:12px; }
.source-label { display:block; font-size:10px; color:var(--color-muted); line-height:1.3; }
.tile-wrapper:hover .icon-tile:not([aria-pressed="true"]) { background:#fafafb; border-color:#c9cad0; }
.source-summary { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--color-muted); }
.variant-note { font-size:11px; line-height:1.5; color:var(--color-muted); margin:0; }
.compare-modal { width:min(820px,calc(100vw - 32px)); max-width:none; }
.comparison-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.comparison-grid article { border:1px solid var(--color-rule); border-radius:12px; padding:16px; min-width:0; }
.comparison-grid h3 { font-size:14px; }
.comparison-grid small { display:block; margin:12px 0; overflow-wrap:anywhere; color:var(--color-muted); font:11px var(--font-mono); }
.comparison-grid .button { width:100%; }
.comparison-sizes { display:flex; justify-content:space-between; align-items:end; gap:8px; padding:24px 0 8px; }
.comparison-sizes figure { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0; }
.comparison-sizes figcaption { font-size:10px; color:var(--color-muted); }
#bundle-format,#bundle-size,#bundle-color,#compare-concept { width:100%; }
.share-hero > .button { display:inline-flex; margin:6px; }
@media(max-width:639px) {
 .page-heading h1 { font-size:22px; }
 .content { padding-top:22px; }
 .catalogue-actions .button { font-size:12px; padding:6px 10px; }
 .icon-grid,.has-drawer .icon-grid { gap:8px; }
 .icon-tile { min-height:124px; gap:8px; }
 .comparison-grid { grid-template-columns:1fr; }
 .comparison-grid article { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:center; }
 .comparison-grid .comparison-sizes { grid-row:span 2; padding:8px 0; }
 .comparison-grid small { margin:0; }
 .comparison-grid .button { grid-column:1/-1; }
 .compare-modal { max-height:90dvh; overflow:auto; }
 .drawer-utilities { gap:4px; }
 .drawer-utilities .text-button { font-size:10px; padding-inline:3px; }
}
@media(max-height:650px) {
 .compact-drawer .drawer-body { gap:6px; }
 .compact-drawer .large-preview { height:64px; }
 .variant-note { font-size:10px; }
}

/* Keep native select labels legible in compact dialogs. */
select { padding: 6px 9px; line-height: normal; }

/* A single asset is the default; size comparison is an explicit mode. */
.compact-drawer .large-preview { position:relative; height:144px; }
.compact-drawer .large-preview .single-icon-preview { width:80px; height:80px; object-fit:contain; }
.preview-mode { position:absolute; right:6px; bottom:5px; background:var(--surface,#fff); border:1px solid #e5e5e8; border-radius:6px; padding:3px 7px; font-size:11px; color:#555; cursor:pointer; }
.preview-mode:focus-visible { outline:2px solid #007aff; outline-offset:2px; }
@media(max-height:760px) { .compact-drawer .large-preview { height:88px; } .compact-drawer .large-preview .single-icon-preview { width:48px; height:48px; } }
@media(max-width:600px) { .catalogue-filters { flex-wrap:wrap; } }