:root {
    --rug-m: 1.26;   /* 90% of Esmee's 1.4 m: four fit on the workshop frame */
    --bg: #ffffff;
    --panel: #ffffff;
    --fg: #1a1a1a;
    --muted: #777777;
    --border: #cfcfcf;
    --hover: #f1f1f1;
    --accent: #b4502e;
    --compare-bg: #f5f5f5;
    /* glass + shadow tokens */
    --glass-bg: rgba(255,255,255,.5);
    --glass-bg-soft: rgba(255,255,255,.72);
    --glass-blur: 16px;
    --shadow-panel: 0 4px 24px rgba(0,0,0,.12);
    --shadow-menu: 0 8px 26px rgba(0,0,0,.16);
    --shadow-pop: 0 4px 18px rgba(0,0,0,.16);
    --shadow-ctrl: 0 1px 3px rgba(0,0,0,.4);
    --inset-hair: inset 0 0 0 1px rgba(0,0,0,.12);
    --inset-faint: inset 0 0 0 1px rgba(0,0,0,.08);
    --radius: 1px;
    --ctrl: 30px;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --font: var(--mono);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { font-family: var(--font); color: var(--fg); background: var(--bg); font-size: 13px; display: flex; flex-direction: column; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }

  /* header — floats translucently over the imagery */
  header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 14px; height: 46px;
    border-bottom: 1px solid var(--border); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
  .spacer { flex: 1; }
  .dims { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; }
  .dims strong { color: var(--fg); font-weight: 600; }

  /* minimal controls */
  button, .menu > summary {
    font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--border);
    background: var(--panel); color: var(--fg); border-radius: var(--radius); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; list-style: none;
  }
  button:hover, .menu > summary:hover { border-color: var(--fg); }
  button.on { background: var(--fg); color: var(--panel); border-color: var(--fg); }
  button:disabled { opacity: .3; cursor: default; border-color: var(--border); }
  select, input[type="number"], input[type="text"] { font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--fg); }
  input[type="range"] { accent-color: var(--fg); vertical-align: middle; }
  .note { font-size: 11px; color: var(--muted); line-height: 1.5; }
  .hbar { display: flex; align-items: center; gap: 7px; }

  .menu { position: relative; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { border-color: var(--fg); }
  .menu .menu-pop { position: absolute; left: 0; top: calc(100% + 6px); width: 210px; background: var(--glass-bg-soft); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-menu); padding: 11px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
  .menu .menu-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
  .menu .menu-pop .inline { flex-direction: row; align-items: center; gap: 7px; }

  /* workspace fills the viewport below the header; dock floats over it */
  #workspace { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

  /* two-view workspace */
  #views { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--split, 56%) 1fr; position: relative; background: var(--bg); }
  .view { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; }
  .view + .view { border-left: 1px solid var(--border); }

  /* transform popover — appears only while dragging the rug */
  #transformPop { position: absolute; top: 54px; left: 14px; z-index: 11; display: none; gap: 8px; align-items: center;
    padding: 7px 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
  #transformPop.show { display: flex; }
  #transformPop input[type="number"] { width: 46px; }
  #transformPop input[type="range"] { width: 90px; }
  #transformPop .lbl { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .view-splitter { position: absolute; top: 0; bottom: 0; left: var(--split, 56%); width: 14px; transform: translateX(-50%); cursor: col-resize; z-index: 8; touch-action: none; }
  .view-splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); transform: translateX(-50%); }
  .view-splitter:hover::before, .view-splitter.drag::before { background: var(--fg); width: 2px; }

  .studio-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; }
  .studio-wrap img.bg { width: 100%; height: 100%; display: block; }
  .studio-wrap img.fg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }  /* table in front of the rug */
  #studioWarp { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  #studioWarp canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: auto; cursor: move; }
  canvas { display: block; touch-action: none; }

  /* curtain compare */
  .compare { position: relative; overflow: hidden; background: var(--compare-bg); --cx: 50%; cursor: ew-resize; touch-action: none; }
  .compare canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #designCanvas { clip-path: inset(0 calc(100% - var(--cx)) 0 0); }
  .curtain { position: absolute; top: 0; bottom: 0; left: var(--cx); width: 0; pointer-events: none; z-index: 4; }
  .curtain-line { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--fg); }
  .curtain-grip { position: absolute; top: 50%; left: -11px; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; background: var(--panel); border: 1.5px solid var(--fg); box-shadow: var(--shadow-ctrl); }
  .clabel { position: absolute; top: 8px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); pointer-events: none; }
  .clabel.left { left: 10px; } .clabel.right { right: 10px; }

  /* floating translucent bottom dock — colours + background (full width) */
  #dock { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 10;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 7px 12px; max-height: 38vh; overflow: auto;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-panel); }
  .dock-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  #rugColors, #paletteTray { flex: 1 1 100%; }   /* each on its own line: dice+colours, then settings, then palette */
  /* BOM lives in the header menu — near-opaque so it stays readable over the rug */
  #bomMenu .menu-pop { right: 0; left: auto; width: 430px; max-height: 78vh; overflow: auto; background: rgba(255,255,255,.97); gap: 8px; }
  #bomMenu .menu-pop > select { width: 100%; }
  #bomMenu .menu-pop label.pile-row { flex-direction: row; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0; }
  .pile-row input { width: 52px; }
  .pile-row .note { text-transform: none; letter-spacing: 0; margin-left: auto; }
  .dock-row.tray { gap: 4px; }
  .dock-row .lbl { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .dock-row input[type="number"] { width: 50px; }
  .dock-row input[type="range"] { width: 120px; }
  .tray-sw { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 0; }
  .tray-sw:hover { border-color: var(--fg); }
  .tray-sw.active { outline: 2px solid var(--fg); outline-offset: 1px; }
  .patlib { display: inline-flex; gap: 4px; }
  .pat-thumb { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background-size: cover; background-position: center; cursor: pointer; }
  .pat-thumb:hover { border-color: var(--fg); }
  .rc-tool { width: 28px; height: 28px; padding: 0; font-size: 13px; }
  .rc-tool.on { background: var(--fg); color: var(--panel); border-color: var(--fg); }
  /* sold-out yarns: dimmed with a diagonal hatch overlay */
  .tray-sw { position: relative; }
  .tray-sw.oos { opacity: .8; }
  .tray-sw.oos::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1.5px, transparent 1.5px 5px); }
  /* grounding shadow so the rug sits in the room */
  #studioWarp canvas { filter: drop-shadow(0 1px 4px rgba(0,0,0,.08)); }

  /* in-rug colour chips (swatch + name) */
  .rc-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 9px 2px 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
  .rc-chip:hover { border-color: var(--fg); }
  .rc-chip.active { outline: 2px solid var(--fg); outline-offset: 1px; }
  .rc-chip .sw { width: 22px; height: 22px; border-radius: var(--radius); box-shadow: var(--inset-hair); position: relative; }
  .rc-chip .sw.oos::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1.5px, transparent 1.5px 5px); }
  .rc-chip .nm { font-size: 12px; color: var(--fg); }
  .rc-chip .role { font: 9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

  /* BOM (bill of materials) in the dock */
  #bom { width: 100%; }
  .est-table { width: 100%; max-width: 600px; border-collapse: collapse; font-size: 12px; }
  .est-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hover); white-space: nowrap; }
  .est-table td.c { width: 16px; padding-right: 0; }
  .est-table td .dot { width: 15px; height: 15px; border-radius: 3px; display: inline-block; box-shadow: var(--inset-hair); }
  .est-table td.qty { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); padding-right: 10px; }
  .est-table td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); width: 1%; }
  .est-table a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); }
  .est-table a:hover { border-color: var(--fg); }
  .ycode { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .02em; margin-left: 6px; }
  .ycode.approx { color: var(--accent); cursor: help; }
  .ycode.src { color: var(--accent); border-bottom: 1px solid var(--border); margin-left: 4px; }
  .ycode.src:hover { border-color: var(--accent); }
  .oos { color: var(--accent); font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
  .est-total { font-size: 12px; margin-top: 8px; color: var(--muted); }
  .est-total strong { color: var(--fg); }