/* The hero window: the canvas's drawing of the app (Peermint Coming Soon v3),
   built from the UI kit. Generated by website/tools/build-mock.py; only
   the kit rules this window uses, scoped to .mock so nothing leaks. */

.mock {
  
  --stone-50: #FAF9F7;
  --stone-100: #F5F3F1;
  --stone-150: #F2F0EE;
  --stone-200: #F0EEEC;
  --stone-250: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #8C8681;
  --stone-600: #78716C;
  
  --stone-650: #6B6661;
  --stone-700: #57534E;
  --stone-800: #44403C;
  --stone-900: #1C1917;

  
  --ink-900: #1A1918;
  --ink-800: #1E1D1C;
  --ink-700: #211F1E;
  --ink-600: #262322;

  
  --teal-700: #155E75;
  --teal-600: #0E7490;
  --teal-400: #2FA8B8;
  --teal-100: #F0FAFB;
  --teal-border: #A5D7DF;

  
  --green-600: #3F7D4B;
  --green-400: #5F9E6B;
  --amber-700: #A16207;
  
  --clay-700: #98422D;
  --clay-600: #B4553E;
  --clay-400: #C08B7C;
  --clay-50: #FBF2EF;

  
  --surface-app: var(--stone-50);
  --surface-panel: #FFFFFF;
  --surface-rail: var(--stone-150);
  --surface-header: var(--stone-200);
  --surface-subtle: var(--stone-100);
  --surface-hover: rgba(28, 25, 23, 0.07);
  --surface-selected: rgba(14, 116, 144, 0.10);

  --text-primary: var(--stone-900);
  --text-secondary: var(--stone-700);
  
  --text-muted: var(--stone-650);
  
  --text-faint: var(--stone-400);
  --text-on-accent: #FFFFFF;

  --border-hairline: rgba(28, 25, 23, 0.09);
  --border-control: rgba(28, 25, 23, 0.12);
  
  --border-strong: rgba(28, 25, 23, 0.25);
  --border-track: rgba(28, 25, 23, 0.10);

  
  --surface-notice: var(--teal-100);
  --border-notice: var(--teal-border);

  --accent: var(--teal-600);
  --accent-hover: var(--teal-700);
  --accent-press: #114C5E;
  --accent-quiet: var(--teal-400);
  --accent-soft: var(--surface-selected);
  --surface-press: rgba(28, 25, 23, 0.12);

  --status-active: var(--teal-600);
  --status-seeding: var(--green-600);
  --status-paused: var(--stone-400);
  --status-queued: var(--stone-300);
  
  --status-error: var(--clay-700);
  --status-error-edge: color-mix(in srgb, var(--status-error) 30%, transparent);
  --status-error-wash: color-mix(in srgb, var(--status-error) 8%, transparent);
  --status-error-wash-press: color-mix(in srgb, var(--status-error) 14%, transparent);
  
  --surface-error-notice: var(--clay-50);

  
  --rose-600: #AA5561;
  --rose-400: #E3929C;
  --ochre-600: #A26124;
  --ochre-400: #DA9E6B;
  --mustard-600: #877208;
  --mustard-400: #BFAC61;
  --cobalt-600: #3D76B2;
  --cobalt-400: #7EB0E9;
  --iris-600: #7067B0;
  --iris-400: #A9A3E7;
  --plum-600: #975992;
  --plum-400: #D096CA;

  --category-rose: var(--rose-600);
  --category-ochre: var(--ochre-600);
  --category-mustard: var(--mustard-600);
  --category-cobalt: var(--cobalt-600);
  --category-iris: var(--iris-600);
  --category-plum: var(--plum-600);
  
  --category-default: var(--stone-600);

  
  --mac-close: #FF5F57;
  --mac-min: #FEBC2E;
  --mac-zoom: #28C840;
}

[data-theme="dark"] .mock {
  --surface-app: var(--ink-900);
  --surface-panel: var(--ink-700);
  --surface-rail: var(--ink-800);
  --surface-header: var(--ink-700);
  --surface-subtle: var(--ink-800);
  --surface-hover: rgba(255, 255, 255, 0.06);
  
  --surface-selected: #1F3032;

  --text-primary: #F5F3F1;
  --text-secondary: var(--stone-250);
  
  --text-muted: var(--stone-400);
  --text-faint: var(--stone-600);

  --border-hairline: rgba(255, 255, 255, 0.06);
  --border-control: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-track: rgba(255, 255, 255, 0.08);

  --surface-notice: rgba(47, 168, 184, 0.12);
  --border-notice: rgba(47, 168, 184, 0.30);

  --accent: var(--teal-600);
  --accent-hover: #14859F;
  --accent-press: var(--teal-600);
  --accent-quiet: var(--teal-400);
  --accent-soft: var(--surface-selected);
  --surface-press: rgba(255, 255, 255, 0.10);

  --status-active: var(--teal-400);
  --status-seeding: var(--green-400);
  --status-paused: var(--stone-700);
  --status-queued: #44403C;
  --status-error: var(--clay-400);
  --status-error-edge: color-mix(in srgb, var(--status-error) 30%, transparent);
  --status-error-wash: color-mix(in srgb, var(--status-error) 8%, transparent);
  --status-error-wash-press: color-mix(in srgb, var(--status-error) 14%, transparent);
  
  --surface-error-notice: #362722;

  --category-rose: var(--rose-400);
  --category-ochre: var(--ochre-400);
  --category-mustard: var(--mustard-400);
  --category-cobalt: var(--cobalt-400);
  --category-iris: var(--iris-400);
  --category-plum: var(--plum-400);
  --category-default: var(--stone-400);
}

.mock {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  

  
  --text-4xs: 9.5px;   
  --text-3xs: 10.5px;  
  --text-2xs: 11px;    
  --text-xs: 11.5px;   
  --text-sm: 12.5px;   
  --text-base: 13px;   
  --text-md: 13.5px;   
  --text-lg: 14px;     
  --text-xl: 15px;     
  --text-2xl: 17px;    
  --text-3xl: 19px;    
  --text-4xl: 24px;    

  --weight-regular: 400;
  --weight-medium: 500;

  --leading-tight: 1.15;
  --leading-normal: 1.45;

  --tracking-tight: -0.015em;
  --tracking-snug: -0.01em;
  --tracking-label: 0.08em;   
  --tracking-wide: 0.1em;     
  --tracking-widest: 0.14em;  
}

.mock {
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 28px;
  --space-14: 48px;

  
  --control-xs: 24px;   
  --control-sm: 26px;   
  --control-md: 28px;   
  --control-lg: 30px;   

  --row-height: 46px;       
  --titlebar-height: 44px;
  --statusbar-height: 30px;
  --toolbar-height: 88px;   
  --strip-width: 60px;      
  --nav-rail-width: 60px;   
  --rail-width: 208px;
  --settings-nav-width: 186px;

  --hit-target: 24px;
}

.mock {
  --radius-xs: 3px;   
  --radius-sm: 6px;   
  --radius-md: 7px;   
  --radius-lg: 8px;   
  --radius-xl: 10px;  
  --radius-2xl: 12px; 
  --radius-pill: 999px;

  --bar-height: 3px;      
  --bar-height-lg: 4px;   
  --pieces-height: 10px;  
  --dot-size: 7px;        
  
  --swatch-size: 8px;
  --swatch-radius: 2px;

  --shadow-window: 0 0 0 1px rgba(28, 25, 23, 0.10), 0 26px 60px rgba(28, 25, 23, 0.18);
  --shadow-menu: 0 0 0 1px rgba(28, 25, 23, 0.10), 0 14px 36px rgba(28, 25, 23, 0.22);
  --shadow-popover: 0 6px 16px rgba(28, 25, 23, 0.16);
  --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-knob: 0 1px 2px rgba(28, 25, 23, 0.25);

  --selected-marker: inset 3px 0 0 var(--accent);
  --tab-marker: inset 0 -2px 0 var(--accent);
}


[data-theme="dark"] .mock {
  
  --selected-marker: inset 3px 0 0 var(--accent-quiet);
  --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.50), 0 26px 60px rgba(28, 25, 23, 0.35);
  --shadow-menu: 0 0 0 1px var(--border-strong), 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 0 0 1px var(--border-strong), 0 8px 20px rgba(0, 0, 0, 0.50);
}

.mock {
  
  --ease-origin: cubic-bezier(0.32, 0.72, 0, 1);

  
  --dur-hover: 90ms;       
  --dur-control: 120ms;    
  --dur-select: 190ms;     
  --dur-switch: 240ms;     
  --dur-inspector: 280ms;  
  --dur-inspector-out: 224ms;
  --dur-sheet: 300ms;      
  --dur-sheet-out: 225ms;
  --dur-menu: 190ms;       
  --dur-dim: 240ms;        
  --dur-dim-out: 180ms;
  --dur-row-add: 340ms;    
  --dur-row-exit: 255ms;   
  --dur-freeze: 140ms;     
  --dur-row-enter: 300ms;  
  --stagger-row: 26ms;     
  --dur-complete: 1800ms;  
  --dur-row-travel: 680ms; 
  --dur-banner: 300ms;     
  --dur-banner-out: 225ms;
  --dur-popover: 190ms;    
  --dur-sweep: 1100ms;     
  --dur-pulse: 900ms;      
  --dur-graph-tick: 900ms; 
  --dur-readout: 440ms;    
  --stagger-glyph: 22ms;   
  --dur-band: 860ms;       
  --dur-figure-out: 360ms; 
  --delay-figure: 200ms;   

  
  --t-hover: background var(--dur-hover) var(--ease-origin);
  --t-control: background var(--dur-control) var(--ease-origin), color var(--dur-control) var(--ease-origin);
  --t-select: box-shadow var(--dur-select) var(--ease-origin);
  --t-marker: transform var(--dur-select) var(--ease-origin);
  --t-switch: transform var(--dur-switch) var(--ease-origin), background var(--dur-switch) var(--ease-origin);
  --t-bar: width var(--dur-inspector) var(--ease-origin);
}


@media (prefers-reduced-motion: reduce) {
  .mock {
    --dur-inspector: var(--dur-control);
    --dur-inspector-out: var(--dur-control);
    --dur-sheet: var(--dur-control);
    --dur-sheet-out: var(--dur-control);
    --dur-row-add: var(--dur-control);
    --dur-row-travel: 0ms;   
    --dur-row-exit: var(--dur-control);
    --dur-banner: var(--dur-control);
    --dur-banner-out: var(--dur-control);
    --stagger-row: 0ms;
    --t-marker: none;
  }
}

.mock [data-ds="button"], .mock [data-ds="icon-button"], .mock [data-ds="sidebar-item"] {transition: var(--t-control);}
.mock [data-ds="button"][data-variant="primary"] {--ds-bg: var(--accent);}
.mock [data-ds="button"][data-variant="primary"]:hover {--ds-bg: var(--accent-hover);}
.mock [data-ds="button"][data-variant="primary"]:active {--ds-bg: var(--accent-press);}
.mock [data-ds="button"][data-variant="secondary"] {--ds-bg: var(--surface-panel);}
.mock [data-ds="button"][data-variant="secondary"]:hover {--ds-bg: var(--surface-subtle);}
.mock [data-ds="button"][data-variant="secondary"]:active {--ds-bg: var(--surface-press);}
.mock [data-ds="button"][data-variant="danger"] {--ds-bg: var(--surface-panel);}
.mock [data-ds="button"][data-variant="danger"]:hover {--ds-bg: var(--status-error-wash);}
.mock [data-ds="button"][data-variant="danger"]:active {--ds-bg: var(--status-error-wash-press);}
.mock [data-ds="icon-button"] {--ds-bg: transparent;}
.mock [data-ds="icon-button"]:hover {--ds-bg: var(--surface-hover);}
.mock [data-ds="icon-button"]:active {--ds-bg: var(--surface-press);}
.mock [data-ds="icon-button"][data-bordered]:not([data-bordered="false"]) {--ds-bg: var(--surface-panel);}
.mock [data-ds="icon-button"][data-bordered]:not([data-bordered="false"]):hover {--ds-bg: var(--surface-subtle);}
.mock [data-ds="icon-button"][data-bordered]:not([data-bordered="false"]):active {--ds-bg: var(--surface-press);}
.mock [data-ds="sidebar-item"] {--ds-bg: transparent;}
.mock [data-ds="sidebar-item"]:hover {--ds-bg: var(--surface-hover);}
.mock [data-ds="sidebar-item"][data-selected]:not([data-selected="false"]), .mock [data-ds="sidebar-item"][data-selected]:not([data-selected="false"]):hover {--ds-bg: var(--surface-selected);}
.mock [data-ds="button"]:disabled, .mock [data-ds="button"][data-disabled]:not([data-disabled="false"]) {opacity: 0.4; pointer-events: none;}
.mock [data-ds="button"]:active, .mock [data-ds="icon-button"]:active {transition: none;}
.mock [data-ds="table-row"] {--ds-bg: transparent;
  transition: background var(--dur-hover) var(--ease-origin), box-shadow var(--dur-select) var(--ease-origin);}
.mock [data-ds="table-row"]:hover {--ds-bg: var(--surface-hover);}
.mock [data-ds="table-row"][data-selected]:not([data-selected="false"]), .mock [data-ds="table-row"][data-selected]:not([data-selected="false"]):hover {--ds-bg: var(--surface-panel);}
.mock [data-ds="table-row"][data-ticked]:not([data-ticked="false"]), .mock [data-ds="table-row"][data-ticked]:not([data-ticked="false"]):hover {--ds-bg: var(--surface-selected);}
.mock [data-frozen="true"] [data-ds="table-row"], .mock [data-frozen="true"] [data-ds="table-row"] * {transition: none !important; animation: none !important;}

.mock .win {border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-app); box-shadow: var(--shadow-window); display: flex; flex-direction: column;}
.mock .titlebar {height: var(--titlebar-height); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6); background: var(--surface-header); border-bottom: 1px solid var(--border-hairline);}
.mock .titlebar .name {font-size: var(--text-base); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); padding-left: var(--space-2);}
.mock .lights {display: flex; gap: var(--space-3); align-items: center;}
.mock .lights i {width: 12px; height: 12px; border-radius: 50%; display: block;}
.mock .search {display: flex; align-items: center; gap: var(--space-3); width: 320px; height: var(--control-sm); padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--surface-panel); border: 1px solid var(--border-control); font-size: var(--text-sm); color: var(--text-muted);}
.mock .search[data-empty] {background: var(--surface-subtle); border-color: var(--border-hairline);}
.mock .btn {display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-5); border-radius: var(--radius-md); background: var(--ds-bg); border: 1px solid var(--border-control); font-size: var(--text-sm); color: var(--text-primary); white-space: nowrap;}
.mock .btn[data-size="sm"] {height: var(--control-sm); padding: 0 11px; border-radius: var(--radius-sm);}
.mock .btn[data-size="lg"] {height: var(--control-lg); padding: 0 var(--space-6);}
.mock .btn[data-variant="primary"] {border-color: transparent; color: var(--text-on-accent); font-weight: var(--weight-medium);}
.mock .btn[data-variant="danger"] {color: var(--status-error); border-color: var(--status-error-edge);}
.mock .icon-btn {width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-sm); border: 1px solid var(--border-control); background: var(--ds-bg); display: inline-flex; align-items: center; justify-content: center;}
.mock .body {flex: 1; display: flex; overflow: hidden;}
.mock .rail {width: var(--rail-width); flex-shrink: 0; background: var(--surface-rail); border-right: 1px solid var(--border-hairline); display: flex; flex-direction: column;}
.mock .rail[data-narrow] {width: var(--settings-nav-width);}
.mock .rail-group {padding: var(--space-7) var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-0);}
.mock .rail-group .gsep {height: 1px; margin: var(--space-2) 0; background: var(--border-hairline);}
.mock .cap {font-size: var(--text-3xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);}
.mock .nav {display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--ds-bg); font-size: var(--text-base); color: var(--text-secondary);}
.mock .nav[data-selected] {color: var(--accent); font-weight: var(--weight-medium);}
.mock .nav[data-two-line] {padding: 3px var(--space-3);}
.mock .nav[data-muted] {opacity: 0.5; cursor: default;}
.mock .nav .n {font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);}
.mock .nav[data-selected] .n {color: var(--accent);}
.mock .grow {flex: 1;}
.mock .main {flex: 1; display: flex; flex-direction: column; overflow: hidden;}
.mock .toolbar {height: var(--toolbar-height); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-11); padding: 0 var(--space-11); border-bottom: 1px solid var(--border-hairline);}
.mock .mono {font-family: var(--font-mono);}
.mock .cols {display: grid; grid-template-columns: 1fr 64px 178px 104px 92px 62px 62px; gap: var(--space-6); padding: 9px var(--space-9); align-items: center;}
.mock .thead {background: var(--surface-subtle); border-bottom: 1px solid var(--border-hairline); font-size: var(--text-3xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);}
.mock .row {border-bottom: 1px solid rgba(28, 25, 23, 0.07); padding-top: var(--space-5); padding-bottom: var(--space-5);}
.mock .row[data-selected] {background: var(--surface-panel); box-shadow: var(--selected-marker);}
.mock .row[data-target] {background: var(--surface-panel); box-shadow: var(--selected-marker), inset 0 0 0 1px rgba(14, 116, 144, 0.18);}
.mock .row[data-ticked] {background: var(--surface-selected);}
.mock .row[data-selected][data-ticked] {background: var(--surface-panel);}
.mock .name {display: flex; align-items: center; gap: var(--space-3); overflow: hidden;}
.mock .cat i[data-box] {width: 13px; height: 13px; box-sizing: border-box; border: 1px dashed var(--border-control); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;}
.mock .cat i[data-box]::before, .mock .cat i[data-box]::after {content: ""; position: absolute; background: var(--text-faint);}
.mock .cat i[data-box]::before {width: 7px; height: 1px;}
.mock .cat i[data-box]::after {width: 1px; height: 7px;}
.mock .name .cat[data-settable] {border-radius: var(--radius-xs); background: var(--ds-bg);}
.mock .title {font-size: var(--text-base); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mock .size {font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); text-align: right;}
.mock .cell {font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); text-align: right;}
.mock .pieces {display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);}
.mock .pmap {position: relative; display: flex; gap: 1px; width: 132px; height: 10px; border-radius: 2px; overflow: hidden; background: var(--border-track);}
.mock .pmap i {width: 9px; height: 10px; border-radius: 1px; display: block;}
.mock .spd {display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; height: 27px; font-family: var(--font-mono);}
.mock .spd .d {font-size: var(--text-sm); line-height: 14px; color: var(--status-active);}
.mock .spd .u {font-size: var(--text-3xs); line-height: 12px; color: var(--text-secondary);}
.mock .pct {font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); width: 34px; text-align: right;}
.mock .acts {display: flex; justify-content: flex-end; gap: var(--space-0);}
.mock .act {width: var(--control-xs); height: var(--control-xs); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;}
.mock .statusbar {height: var(--statusbar-height); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-7); padding: 0 var(--space-9); border-top: 1px solid var(--border-hairline); background: var(--surface-subtle); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);}
.mock .nav[data-draft] {background: var(--surface-panel); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-primary);}
.mock .name .cat {width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: visible;}
.mock .act {transition: var(--t-control);}
.mock .act:hover {background: var(--surface-hover);}
.mock .act:active {transition: none; background: var(--surface-press);}
.mock .row {transition: background var(--dur-hover) var(--ease-origin), box-shadow var(--dur-select) var(--ease-origin);}
.mock .row:not([data-selected]):not([data-target]):not([data-ticked]):hover {background: var(--surface-hover);}
.mock .row[data-completed] {animation: pm-complete-wash 1800ms linear both;}
.mock .row[data-travel] {transition: transform var(--dur-row-travel) var(--ease-origin); will-change: transform;}
.mock .row[data-snap] {transition: transform 130ms var(--ease-origin);}
.mock [data-frozen] .row, .mock [data-frozen] .row * {transition: none !important; animation: none !important;}
.mock .nrail {width: var(--nav-rail-width); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-0); padding: var(--space-4) 0; background: var(--surface-header); border-right: 1px solid var(--border-hairline);}
.mock .place {position: relative; width: 48px; padding: 6px 0 5px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-0); background: var(--ds-bg);}
.mock .place {--place-selected-ink: var(--accent);}
[data-theme="dark"] .mock .place {--place-selected-ink: var(--accent-quiet);}
.mock .place .lbl {font-size: var(--text-3xs); letter-spacing: -0.01em; color: var(--text-muted);}
.mock .place[data-selected] {background: var(--accent-soft);}
.mock .place[data-selected] .lbl {color: var(--place-selected-ink); font-weight: var(--weight-medium);}