/*
 Toolbar layout invariants (do not change without verifying test/toolbar_canary.html):
 - Six action buttons must render on a single row
 - Captions should wrap to two lines under each icon
 - Top toolbar: flex-wrap: wrap; gap uses --action-button-min-gap
 - Action bar: no wrapping; justify-content: space-evenly
 - Action items: auto width; do not force width that causes wrapping
*/
*{margin:0;padding:0;box-sizing:border-box}
.demo-page{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f6f8fa;padding:40px 20px;display:flex;justify-content:center;align-items:center;min-height:100vh}
.tabberwocky-window{background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;--berkeley-blue-100:#003262;--berkeley-blue-80:#004a9e;--berkeley-blue-60:#004aae;--berkeley-cream:#f3eacf;--berkeley-gold:#fdb515;--color-url-text:#5a6169;--color-text-primary:#000;--color-text-secondary:#656d76;--color-text-on-blue:#fff;--color-surface-secondary:#f0f0f0;--color-hover-bg:#e8e8e8;--color-active-bg:#d8d8d8;--color-border:#ccc;--color-border-subtle:#e0e0e0;--color-focus-ring:#005fcc;--icon-disabled-on-blue:rgba(255,255,255,.35);--icon-disabled-on-cream:#c0c6cf;--toolbar-icon-size:26px;--toolbar-icon-size-lg:32px;--toolbar-icon-size-sm:24px;--toolbar-button-size:40px;--toolbar-composite-icon-width:30px;--toolbar-recent-icon-width:34px;--toolbar-recent-icon-height:27px;--toolbar-recent-icon-y-offset:.5px;--action-button-min-gap:8px;--favicon-icon-size:20px;--favicon-column-gap:6px;--favicon-grid-row-height:32px}
.tabberwocky-demo{background:#f1f3f4;border:2px solid #d0d7de;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);width:100%;max-width:360px}
.tabberwocky-window .sr-only{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;position:absolute!important}
.tabberwocky-window #top-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--action-button-min-gap);overflow:visible;padding:3px 8px 8px;color:#fff;background:var(--berkeley-blue-100)!important}
.tabberwocky-window #action-bar.action-bar-container{display:flex;flex-wrap:nowrap;gap:clamp(6px,2vw,12px);align-items:flex-start;justify-content:space-evenly;flex:1 1 0%}
.tabberwocky-window .action-item{display:flex;flex-direction:column;align-items:center}
.tabberwocky-window .action-btn.icon-btn,.tabberwocky-window .window-toggle{width:var(--toolbar-button-size);height:var(--toolbar-button-size);min-width:var(--toolbar-button-size);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;cursor:pointer;position:relative;overflow:visible;transition:background .15s;padding:0;color:var(--color-text-on-blue);margin-top:0}
.tabberwocky-window .action-btn.icon-btn:hover{background:var(--berkeley-blue-80)}
.tabberwocky-window .close-dups-btn{width:44px;min-width:44px}
.tabberwocky-window .action-btn.icon-btn svg,.tabberwocky-window .window-toggle svg{width:var(--toolbar-icon-size-sm);height:var(--toolbar-icon-size-sm);fill:currentcolor;stroke:currentcolor;display:block}
.tabberwocky-window .count-badge{position:absolute;top:-1px;right:-2px;background:var(--berkeley-gold);color:var(--berkeley-blue-100);font:600 10px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;width:16px;height:16px;border-radius:50%;display:inline-block;text-align:center;z-index:2}
.tabberwocky-window .action-item .action-desc{margin-top:-1px;text-align:center;color:var(--color-text-on-blue);font:11px/14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;user-select:none;cursor:pointer;white-space:normal}
.tabberwocky-window #tab-list{flex:1 1 0%;overflow-y:auto;background:var(--berkeley-cream);height:480px}
.tabberwocky-window .tab-item{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e8e8e6;cursor:pointer;transition:background-color .15s}
.tabberwocky-window .tab-item:hover{background:rgba(0,0,0,.04)}
.tabberwocky-window .tab-item.active{background:rgba(0,50,98,.08);border-left:3px solid var(--berkeley-blue-100);color:var(--berkeley-blue-100)}
.tabberwocky-window .tab-favicon{flex-shrink:0;width:16px;height:16px;margin-right:8px;display:flex;align-items:center;justify-content:center}
.tabberwocky-window .tab-favicon img{width:16px;height:16px;border-radius:2px}
.tabberwocky-window .tab-content{flex:1 1 0%;min-width:0;margin-right:8px}
.tabberwocky-window .tab-title{font:500 13px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--berkeley-blue-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabberwocky-window .tab-url{font:11px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--color-url-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.tabberwocky-window .tab-actions{flex-shrink:0}
.tabberwocky-window .close-tab-btn{background:none;border:none;color:var(--color-text-secondary);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:3px;transition:color .15s,background .15s}
.tabberwocky-window .close-tab-btn:hover{background:#ddd5c7;color:var(--berkeley-blue-100)}
.tabberwocky-window .window-header{position:relative;top:auto;background:var(--berkeley-blue-60);color:var(--color-text-on-blue);font:600 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:8px 12px 8px 13px;z-index:2;border-bottom:1px solid #e8e8e6;display:flex;align-items:center;justify-content:space-between}
.tabberwocky-window .window-count-badge{background:var(--berkeley-gold);color:var(--berkeley-blue-100);font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:2px 6px;border-radius:12px;margin-left:8px}
.tabberwocky-window #domain-grid{background:var(--berkeley-cream);border-top:1px solid #d6d6ce;position:relative;max-height:86px;overflow-y:auto}
.tabberwocky-window .domain-instructions{margin:0;padding:6px 12px 0;position:sticky;top:0;z-index:3;background:var(--berkeley-cream);border-bottom:1px solid #e8e8e6;width:100%;box-sizing:border-box}
.tabberwocky-window .domain-items{display:flex;flex-wrap:wrap;gap:8px 6px;box-sizing:border-box;width:100%;padding:9px 12px}
.tabberwocky-window .domain-item{display:flex;align-items:center;flex:0 0 auto;min-width:20px;max-width:20px;width:20px;justify-content:center;cursor:pointer;transition:transform .15s;box-sizing:border-box}
.tabberwocky-window .domain-item:hover{transform:translateY(-1px)}
.tabberwocky-window .domain-favicon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.tabberwocky-window .domain-favicon img{width:16px;height:16px;border-radius:3px}
.tabberwocky-window .domain-count-badge{position:absolute;top:-10px;right:-10px;background:var(--berkeley-blue-80);color:var(--color-text-on-blue);border:1px solid var(--berkeley-cream);border-radius:50%;font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;width:16px;height:16px;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}