/* ================================================================
   Poché — design system: "the drafting sheet"
   Vellum paper, ink rules, redline markups, CAD lettering.
   ================================================================ */

:root {
  --paper:      #F6F1E3;
  --paper-deep: #EFE8D6;
  --paper-dim:  #E7DEC8;
  --ink:        #1C1A17;
  --ink-soft:   #4A453D;
  --line:       #C4B896;
  --line-soft:  #D8CFB4;
  --redline:    #C7482B;
  --redline-soft: #E4A493;
  --blueprint:  #2E5E7E;
  --moss:       #5F7A5A;
  --amber:      #B0893F;

  --font-display: "Iowan Old Style", "Palatino", "Palatino Linotype", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-cad: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --rule-faint: 1px solid var(--line);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* iOS Safari: 100% tracks the LARGE viewport, so the bottom bar hides
   behind the floating URL bar. dvh follows the bar as it collapses/expands;
   the 100% line above stays as the fallback for engines without dvh. */
body { height: 100dvh; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cad {
  font-family: var(--font-cad);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- header */
#titleblock {
  display: flex;
  align-items: stretch;
  border-bottom: var(--rule);
  background: var(--paper);
  min-height: 58px;
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-right: var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.brand-emblem { width: 38px; height: 38px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.34em;
}
.wordmark-accent { color: var(--redline); }
.brand-tag {
  font-family: var(--font-cad);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
}

.tb-zone { display: flex; align-items: stretch; }
#tb-center { flex: 1 1 auto; min-width: 0; }
#tb-right { flex: 0 0 auto; }

.tb-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 14px;
  border-right: var(--rule-thin);
  min-width: 0;
}
.tb-label {
  font-family: var(--font-cad);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tb-value {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-value.redline { color: var(--redline); }
.tb-value.ok { color: var(--moss); }

#project-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 2px 4px;
  min-width: 60px;
  max-width: 420px;
  border-bottom: 1px dashed transparent;
}
#project-name:hover { border-bottom-color: var(--line); }
#project-name:focus { outline: none; border-bottom-color: var(--redline); }

/* ---------------------------------------------------------------- buttons */
.btn {
  font-family: var(--font-cad);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: var(--rule-thin);
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--paper); color: var(--ink); }
.btn-primary { background: var(--redline); color: var(--paper); border-color: var(--redline); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn.active { background: var(--ink); color: var(--paper); }
.btn-danger:hover { background: var(--redline); border-color: var(--redline); }

select.btn { appearance: none; padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%231C1A17'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }

input[type="text"], input[type="number"], input[type="search"] {
  font-family: var(--font-ui);
  font-size: 13px;
  border: var(--rule-thin);
  background: #FFFDF6;
  padding: 6px 8px;
  color: var(--ink);
}
input:focus { outline: 2px solid var(--redline-soft); outline-offset: -1px; }

/* ---------------------------------------------------------------- main */
#view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- home */
.home {
  flex: 1;
  overflow-y: auto;
  padding: 48px 24px 80px;
}
.home-inner { max-width: 900px; margin: 0 auto; }

.hero { text-align: center; margin-bottom: 40px; }
.hero-emblem { width: 96px; height: 96px; margin: 0 auto 14px; display: block; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.3em;
  margin: 0 0 6px;
}
.hero h1 .wordmark-accent { color: var(--redline); }
.hero-sub {
  font-family: var(--font-cad);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.hero-desc { color: var(--ink-soft); font-size: 15px; max-width: 560px; margin: 14px auto 0; line-height: 1.55; }

.dropzone {
  border: 2px dashed var(--ink);
  background: rgba(255, 253, 246, 0.72);
  padding: 38px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 42px;
}
.dropzone:hover, .dropzone.drag { background: #FFFDF6; border-color: var(--redline); }
.dropzone .dz-big { font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; }
.dropzone .dz-small { font-family: var(--font-cad); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.dropzone.busy { pointer-events: none; opacity: 0.6; }

.section-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
}
.section-rule::before, .section-rule::after { content: ""; flex: 1; border-top: var(--rule-thin); }
.section-rule span { font-family: var(--font-cad); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card {
  border: var(--rule-thin);
  background: #FFFDF6;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.card:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }
.card-thumb {
  height: 150px;
  background: var(--paper-deep) center / cover no-repeat;
  border-bottom: var(--rule-thin);
  image-rendering: auto;
}
.card-body { padding: 12px 14px; }
.card-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.card-meta { font-family: var(--font-cad); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.card-del {
  position: absolute; top: 8px; right: 8px;
  background: var(--paper); border: var(--rule-thin);
  width: 24px; height: 24px; line-height: 20px;
  text-align: center; cursor: pointer; font-size: 13px;
  opacity: 0; transition: opacity 0.12s;
}
.card:hover .card-del { opacity: 1; }
.card-del:hover { background: var(--redline); color: var(--paper); border-color: var(--redline); }

.empty-note { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 22px 0; }

/* ---------------------------------------------------------------- editor */
.editor { flex: 1; display: flex; min-height: 0; }

.palette {
  flex: 0 0 var(--pal-w, 236px);
  position: relative;
  border-right: var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
  min-height: 0;
}
.palette-head { padding: 10px 12px 8px; border-bottom: var(--rule-thin); }
.palette-head input { width: 100%; }
.palette-scroll { flex: 1; overflow-y: auto; padding-bottom: 30px; }
.palette-note {
  margin: 10px 12px; padding: 9px 10px;
  border: 1px dashed var(--redline);
  color: var(--redline);
  font-size: 12px; line-height: 1.45;
  background: rgba(199, 72, 43, 0.05);
}
.pal-group { border-bottom: var(--rule-faint); }
.pal-group summary {
  font-family: var(--font-cad); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 12px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
  list-style: none;
}
.pal-group summary::-webkit-details-marker { display: none; }
.pal-group summary::before { content: "▸"; font-size: 9px; transition: transform 0.12s; }
.pal-group[open] summary::before { transform: rotate(90deg); }
.pal-swatch { width: 10px; height: 10px; border: 1px solid var(--ink); margin-left: auto; }
.pal-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  width: 100%;
  padding: 6px 12px 6px 26px;
  background: none; border: none;
  font-family: var(--font-ui); font-size: 12.5px;
  color: var(--ink); cursor: pointer; text-align: left;
}
.pal-item:hover { background: var(--paper-deep); }
.pal-item:disabled { opacity: 0.45; cursor: not-allowed; }
.pal-dims { font-family: var(--font-cad); font-size: 9.5px; color: var(--ink-soft); white-space: nowrap; }

.canvas-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
.canvas-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: var(--rule-thin);
  background: var(--paper);
  flex-wrap: wrap;
}
.toolbar-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.toolbar-spacer { flex: 1; }

#stage-holder { flex: 1; min-height: 0; background: var(--paper-dim); position: relative; touch-action: none; }
#stage-holder.tool-calibrate, #stage-holder.tool-measure { cursor: crosshair; }

.statusbar {
  display: flex; align-items: center; gap: 18px;
  border-top: var(--rule-thin);
  background: var(--paper);
  padding: 5px 12px;
  font-family: var(--font-cad); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 26px;
}
.statusbar .warn { color: var(--redline); }
.statusbar .hint { margin-left: auto; }

.inspector {
  flex: 0 0 var(--insp-w, 262px);
  position: relative;
  border-left: var(--rule);
  background: var(--paper);
  overflow-y: auto;
  min-height: 0;
}
.insp-section { border-bottom: var(--rule-faint); padding: 12px 14px; }
.insp-title {
  font-family: var(--font-cad); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.insp-item-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.insp-item-cat { font-family: var(--font-cad); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.insp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.insp-row label { font-family: var(--font-cad); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); width: 34px; flex: 0 0 auto; }
.insp-row input[type="number"] { width: 64px; }
.insp-row .unit { font-size: 11px; color: var(--ink-soft); }
.insp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fit-links { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.fit-links a {
  font-size: 12.5px; color: var(--blueprint);
  text-decoration: none; border-bottom: 1px dashed var(--blueprint);
  width: fit-content;
}
.fit-links a:hover { color: var(--redline); border-color: var(--redline); }
.insp-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.insp-kv .k { color: var(--ink-soft); }
.warn-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.warn-list li { padding: 4px 0 4px 14px; position: relative; color: var(--redline); }
.warn-list li::before { content: "⚠"; position: absolute; left: 0; font-size: 10px; }
.warn-list li.tight { color: var(--amber); }

.sheet-tabs { display: flex; align-items: stretch; height: 100%; }
.sheet-tab {
  font-family: var(--font-cad); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: none; border-right: var(--rule-thin);
  background: transparent; color: var(--ink-soft);
  padding: 0 14px; cursor: pointer;
}
.sheet-tab:hover { background: var(--paper-deep); color: var(--ink); }
.sheet-tab.active { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- dialogs */
dialog {
  border: var(--rule);
  background: var(--paper);
  padding: 0;
  max-width: 380px;
  box-shadow: 8px 8px 0 rgba(28, 26, 23, 0.25);
}
dialog[open] { animation: dlg-in 0.16s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
dialog::backdrop { background: rgba(28, 26, 23, 0.35); animation: bd-in 0.16s ease-out; }
@keyframes bd-in { from { opacity: 0; } }
.btn:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--redline); outline-offset: 1px;
}
.dlg-body { padding: 20px 22px; }
.dlg-title { font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; }
.dlg-hint { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.dlg-hint code { font-family: var(--font-cad); font-size: 11px; background: var(--paper-deep); padding: 1px 4px; }
.dlg-body input { width: 100%; font-size: 16px; }
.dlg-err { color: var(--redline); font-size: 12px; min-height: 16px; margin: 6px 0 4px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------------------------------------------------------------- toasts */
#toasts {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 60;
  align-items: center;
}
.toast {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-cad); font-size: 11px; letter-spacing: 0.1em;
  padding: 9px 16px;
  animation: toast-in 0.18s ease-out;
}
.toast.error { background: var(--redline); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* ---------------------------------------------------------------- v0.2 */
.pal-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
.pal-thumb { width: 32px; height: 32px; object-fit: contain; }
.pal-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mobile-only { display: none; }

#dlg-catalog { width: min(1120px, calc(100vw - 24px)); max-width: none; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 20px 12px; border-bottom: var(--rule); }
.cat-source-note { color: var(--ink-soft); font-size: 9px; letter-spacing: 0.12em; }
.cat-x { width: 34px; height: 34px; padding: 0; font-size: 14px; line-height: 1; flex: none; }
.cat-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; border-bottom: var(--rule-thin); }
.cat-frow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cat-frow input[type="search"] { flex: 2; min-width: 140px; }
.cat-frow input[type="number"] { width: 84px; }
#cat-refine-btn { display: none; }
.cat-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 16px 20px 20px; max-height: 62vh; overflow-y: auto; }

/* card: image sheet on top, body, spec detail, footer, one full-width action */
.cat-card {
  border: var(--rule-thin); background: #FFFDF6; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(28, 26, 23, 0.14); }
.cat-card.expanded { box-shadow: 0 4px 16px rgba(28, 26, 23, 0.18); }
.cat-imgwrap { position: relative; aspect-ratio: 4 / 3; background: var(--paper-deep); border-bottom: var(--rule-faint); }
.cat-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.cat-thumb.is-glyph { object-fit: contain; padding: 18px; }
.cat-float { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.cat-float button {
  width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 13px; line-height: 1;
  border: 1px solid var(--ink); border-radius: 3px; background: rgba(255, 253, 246, 0.94); color: var(--ink);
}
.cat-float button:hover { color: var(--redline); border-color: var(--redline); }
.cat-star.saved { color: var(--redline); }
.cat-cmp.in-cmp { color: var(--blueprint); font-weight: 700; }
.cat-vendor {
  position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--paper);
  font-size: 8px; letter-spacing: 0.14em; padding: 3px 8px; max-width: 85%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-body { padding: 8px 10px 0; }
.cat-name {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.cat-name:hover { color: var(--blueprint); }
.cat-meta { color: var(--ink-soft); font-size: 9px; margin-top: 3px; min-height: 1.2em; }
.cat-detail { margin: 6px 10px 0; }
.cat-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px 0; margin-top: auto; }
.cat-price { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.cat-view { font-size: 9px; color: var(--blueprint); text-decoration: none; border-bottom: 1px dashed var(--blueprint); }
.cat-view:hover { color: var(--redline); border-color: var(--redline); }
.cat-place {
  margin: 6px 8px 8px; padding: 7px 0; font-size: 10px; letter-spacing: 0.12em;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.cat-place:hover { background: var(--redline); border-color: var(--redline); color: var(--paper); }
.cat-idle-note { grid-column: 1 / -1; margin: 0; }
.cat-hint-chip { grid-column: 1 / -1; margin: 0; color: var(--blueprint); }
.cat-hint-chip b { color: inherit; }
.cat-hint-chip button {
  font: inherit; color: var(--redline); background: none; border: none;
  border-bottom: 1px dashed var(--redline); cursor: pointer; padding: 0;
  text-transform: inherit; letter-spacing: inherit;
}

/* Phone — palette + inspector become slide-over drawers, toolbar compresses */
@media (max-width: 767px) {
  .mobile-only { display: inline-block; }
  .brand { padding: 6px 10px; }
  .brand-text { display: none; }
  .tb-cell { padding: 4px 8px; }
  #tb-center .tb-cell { min-width: 90px; }
  .sheet-tab { padding: 0 9px; }
  .canvas-toolbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .canvas-toolbar::-webkit-scrollbar { display: none; }
  .btn { padding: 8px 10px; }

  .editor { position: relative; }
  .palette, .inspector {
    position: absolute; top: 0; bottom: 0; z-index: 30;
    width: min(300px, 82vw);
    transition: transform 0.2s ease;
    box-shadow: 6px 0 18px rgba(28,26,23,0.25);
  }
  .palette { left: 0; transform: translateX(-104%); border-right: var(--rule); }
  .palette.open { transform: translateX(0); }
  .inspector { right: 0; transform: translateX(104%); border-left: var(--rule); box-shadow: -6px 0 18px rgba(28,26,23,0.25); }
  .inspector.open { transform: translateX(0); }
  .statusbar .hint { display: none; }
  #stage-holder { touch-action: none; }
  .cat-results { max-height: 60vh; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cat-refine { display: none; }
  .cat-refine.open { display: flex; }
  #cat-refine-btn { display: inline-block; }
}

/* Phone titleblock: brand + scale/status on row one, project + sheets on row two */
@media (max-width: 767px) {
  #titleblock { flex-wrap: wrap; }
  #tb-center { order: 3; flex-basis: 100%; border-top: var(--rule-thin); min-height: 40px; }
  #tb-center .tb-cell { border-left: none; }
  #tb-right { margin-left: auto; }
  #tb-right .tb-cell { border-left: var(--rule-thin); border-right: none; }
  #project-name { max-width: 140px; font-size: 14px; }
  .tb-value { font-size: 12px; }
  .sheet-tabs { margin-left: auto; }
}

.cat-fit-chip { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 6px 10px; border: 1px dashed var(--redline); color: var(--redline); font-size: 12px; background: rgba(199,72,43,0.05); width: fit-content; }
.cat-fit-chip[hidden] { display: none !important; } /* [hidden] loses to display:flex */
.cat-fit-chip button { border: none; background: none; color: var(--redline); cursor: pointer; font-size: 12px; }

/* Tablet (768–1100px, e.g. iPad portrait): keep both panels, slimmed */
@media (min-width: 768px) and (max-width: 1100px) {
  .palette { flex-basis: var(--pal-w, 198px); }
  .inspector { flex-basis: var(--insp-w, 224px); }
  .insp-section { padding: 10px 10px; }
  .brand-tag { display: none; }
  .tb-cell { padding: 4px 10px; }
  .canvas-toolbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}

/* Coarse pointers (touch): bigger targets, no hover-gated affordances */
@media (pointer: coarse) {
  .btn { min-height: 40px; padding: 9px 13px; }
  .pal-item { padding-top: 9px; padding-bottom: 9px; }
  .sheet-tab { min-width: 56px; }
  .card-del { opacity: 1; width: 30px; height: 30px; line-height: 26px; }
  input[type="text"], input[type="number"], input[type="search"] { min-height: 38px; }
  .cat-place { min-height: 34px; }
}

/* Size-family palette rows */
.pal-family { cursor: pointer; }
.pal-family.locked { opacity: 0.45; cursor: not-allowed; }
.pal-size {
  font-family: var(--font-cad); font-size: 9.5px; letter-spacing: 0.04em;
  border: var(--rule-faint); background: #FFFDF6; color: var(--ink);
  padding: 3px 4px; max-width: 96px;
}

/* a11y: visible keyboard focus in the drafting language */
.btn:focus-visible, .pal-item:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--redline);
  outline-offset: 1px;
}


/* Grouped toolbar: clusters carry tiny CAD labels; separators retired */
.tb-group {
  display: flex; gap: 4px; align-items: center; position: relative;
  padding: 12px 8px 2px 4px; border-left: 1px solid var(--rule, #D8CFBA);
}
.tb-group:first-of-type { border-left: none; padding-left: 0; }
.tb-group::before {
  content: attr(data-label); position: absolute; top: 1px; left: 6px;
  font-family: "SF Mono", Menlo, monospace; font-size: 8px;
  letter-spacing: 0.16em; color: var(--ink-soft); opacity: 0.75;
}
.tb-group:first-of-type::before { left: 2px; }
@media (max-width: 900px) {
  .tb-group { padding-top: 4px; border-left: none; }
  .tb-group::before { display: none; }
}

/* My Furniture rows: inline remove control */
.pal-x {
  border: none; background: none; color: var(--ink-soft); cursor: pointer;
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
}
.pal-x:hover { color: var(--redline, #C7482B); background: rgba(199, 72, 43, 0.08); }

/* My Furniture inline add form */
.pal-addmine { padding: 6px 8px 10px; border-top: 1px dashed var(--rule, #D8CFBA); }
.pal-addmine .mf-name { width: 100%; margin-bottom: 5px; font-size: 12px; padding: 5px 7px; }
.pal-addmine .mf-row { display: flex; gap: 4px; align-items: center; }
.pal-addmine .mf-form { flex: 1.6; min-width: 0; font-size: 11px; }
.pal-addmine input[type="number"] { flex: 1; min-width: 0; width: 40px; font-size: 11px; padding: 4px; }
.pal-addmine .mf-add { flex: 0 0 auto; }

/* Touch nudge pad: fine placement without arrow keys */
#nudge-pad {
  position: absolute; right: 14px; bottom: 46px; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(246, 241, 227, 0.94); border: 2px solid var(--ink, #1C1A17);
  border-radius: 8px; padding: 6px; box-shadow: 0 2px 10px rgba(28,26,23,.18);
}
#nudge-pad .np-mid { display: flex; gap: 3px; align-items: center; }
#nudge-pad button {
  min-width: 44px; min-height: 44px; border: 1.5px solid var(--ink, #1C1A17);
  background: var(--paper, #F6F1E3); border-radius: 6px; font-size: 15px;
  color: var(--ink, #1C1A17); touch-action: none;
}
#nudge-pad button:active { background: var(--ink, #1C1A17); color: var(--paper, #F6F1E3); }
#nudge-pad .np-step { font-family: "SF Mono", Menlo, monospace; font-size: 12px; }

/* Drawer scrim: tap outside closes phone drawers */
#drawer-scrim { display: none; }
#drawer-scrim.show {
  display: block; position: absolute; inset: 0; z-index: 29;
  background: rgba(28, 26, 23, 0.35);
}
.palette-head { display: flex; gap: 6px; align-items: center; }
.palette-head input { flex: 1; min-width: 0; }

/* Phone selection bar: item actions while the inspector drawer is closed */
#sel-bar {
  position: absolute; left: 10px; right: auto; bottom: 46px; z-index: 28;
  display: flex; gap: 4px; align-items: center;
  background: rgba(246, 241, 227, 0.96); border: 2px solid var(--ink, #1C1A17);
  border-radius: 8px; padding: 5px 8px; box-shadow: 0 2px 10px rgba(28,26,23,.18);
  max-width: calc(100vw - 140px);
}
#sel-bar .sb-name {
  font-family: "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 34vw;
}
#sel-bar button {
  min-width: 40px; min-height: 40px; border: 1.5px solid var(--ink, #1C1A17);
  background: var(--paper, #F6F1E3); border-radius: 6px; font-size: 14px;
  color: var(--ink, #1C1A17);
}
#sel-bar button:active { background: var(--ink, #1C1A17); color: var(--paper, #F6F1E3); }
#sel-bar .sb-del { border-color: #C0392B; color: #C0392B; }

/* ---- Phone-first layout: chrome collapses, controls move to the thumb ---- */
@media (max-width: 767px) {
  /* header: emblem + project + status on minimal rows */
  .wordmark, .brand-tag { display: none; }
  .brand-emblem { width: 26px; height: 26px; }
  #titleblock { min-height: 0; }
  .tb-label { display: none; }
  #tb-center { min-height: 34px; }

  /* the toolbar becomes a bottom thumb bar: canvas gets the middle */
  .canvas-wrap { display: flex; flex-direction: column; }
  .canvas-toolbar { order: 3; border-top: 2px solid var(--ink, #1C1A17); border-bottom: none; }
  #stage-holder { order: 1; }
  .statusbar { order: 2; }
  .canvas-toolbar .btn { min-height: 44px; padding: 8px 12px; }
  .tb-group { padding-top: 4px; }

  /* floating controls sit above the bottom bar */
  #nudge-pad { bottom: 108px; right: 10px; }
  #sel-bar { bottom: 108px; }
}

/* Phone control stacking + iPhone safe areas */
@media (max-width: 767px) {
  /* sel-bar owns the bottom-left shelf; the nudge pad stacks above it on
     the right so the two never collide (both appear together on select) */
  #sel-bar { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); left: 8px; }
  #nudge-pad { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); right: 8px; }
  #nudge-pad button { min-width: 38px; min-height: 38px; font-size: 13px; }
  #nudge-pad { padding: 4px; }
  .canvas-toolbar { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .statusbar { padding-bottom: 2px; }
}

/* Floating close for the inspector drawer (phone) — the drawer's content
   re-renders constantly, so the control overlays it from outside */
#insp-close-float { display: none; }
@media (max-width: 767px) {
  #insp-close-float.show {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 8px; z-index: 31;
    width: 40px; height: 40px; border: 2px solid var(--ink, #1C1A17);
    border-radius: 6px; background: var(--paper, #F6F1E3);
    color: var(--ink, #1C1A17); font-size: 15px;
  }
}

/* Phone bottom-bar priority: Items, tools, Shop/exports lead; setup last */
@media (max-width: 767px) {
  .toolbar-spacer { display: none; }
  #pal-toggle { order: -4; }
  .tb-group[data-label="TOOLS"] { order: -3; }
  .tb-group[data-label="OUTPUT"] { order: -2; }
  .tb-group[data-label="EDIT"] { order: -1; }
  /* SCALE and VIEW keep default order (set-once controls live at the end) */
}

/* Desktop panel resize grips */
.panel-grip {
  position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize;
  z-index: 5; touch-action: none;
}
.palette .panel-grip { right: -4px; }
.inspector .panel-grip { left: -4px; }
.panel-grip:hover, .panel-grip.active { background: rgba(199, 72, 43, 0.22); }
@media (max-width: 767px) { .panel-grip { display: none; } }

/* My Furniture rows carry a 4th column (the ✕) — widen the grid so it
   doesn't wrap onto its own line */
.pal-item:has(.pal-x) { grid-template-columns: 34px 1fr auto auto; }

/* display:flex on these widgets would otherwise defeat the [hidden]
   attribute — the nudge pad and selection bar must NEVER render without a
   selection */
#nudge-pad[hidden], #sel-bar[hidden] { display: none !important; }

#cat-saved.active { background: var(--ink); color: var(--paper); }

/* Live-collab presence chip */
#sb-collab {
  color: #3E6B3E; font-weight: 600; letter-spacing: 0.06em;
  padding: 0 8px; white-space: nowrap;
}

/* ---- Premium shop feel: skeletons, inline spec details ---- */
.cat-detail { border-top: 1px dashed var(--rule, #D8CFBA); margin-top: 6px; padding-top: 6px; }
.cd-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; padding: 2px 0; color: var(--ink-soft);
}
.cd-row b { color: var(--ink); font-weight: 600; text-align: right; }

/* shopify full detail: gallery strip, size picker, description */
.cd-imgs { display: flex; gap: 4px; margin: 4px 0 6px; overflow-x: auto; }
.cd-imgs img {
  width: 44px; height: 44px; object-fit: cover; cursor: pointer;
  border: 1px solid var(--rule, #D8CFBA); border-radius: 3px; flex: none;
}
.cd-imgs img:hover { border-color: var(--redline, #C0392B); }
.cd-sizes {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px;
  max-height: 96px; overflow-y: auto; /* made-to-order shops list 30+ sizes */
}
.cd-size {
  font: 600 11px/1.2 var(--mono, ui-monospace, monospace);
  padding: 4px 7px; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--rule, #D8CFBA); background: #FFFDF6; color: var(--ink);
}
.cd-size:hover { border-color: var(--ink); }
.cd-size.sel {
  border-color: var(--redline, #C0392B); color: var(--redline, #C0392B);
  background: rgba(192, 57, 43, 0.06); box-shadow: inset 0 0 0 1px var(--redline, #C0392B);
}
.cd-size.oos { opacity: 0.5; text-decoration: line-through; }
.cd-desc {
  font-size: 11px; line-height: 1.45; color: var(--ink-soft);
  margin: 4px 0 2px; border-left: 2px solid var(--rule, #D8CFBA); padding-left: 7px;
}
.cd-open {
  display: inline-block; margin: 5px 0 2px; font-size: 9px;
  color: var(--blueprint); text-decoration: none;
  border-bottom: 1px dashed var(--blueprint);
}
.cd-open:hover { color: var(--redline); border-color: var(--redline); }

/* skeleton shimmer, vellum-toned */
.cat-skel { pointer-events: none; }
.cat-skel .sk {
  border-radius: 4px;
  background: linear-gradient(100deg, #EAE3D1 30%, #F6F1E3 50%, #EAE3D1 70%);
  background-size: 200% 100%;
  animation: sk-sweep 1.1s ease-in-out infinite;
}
.cat-skel { padding: 0 0 10px; }
.cat-skel .sk-thumb { aspect-ratio: 4 / 3; border-radius: 0; margin-bottom: 8px; }
.cat-skel .sk-line, .cat-skel .sk-price { margin-left: 10px; margin-right: 10px; }
.cat-skel .sk-line { height: 11px; margin-bottom: 6px; }
.cat-skel .sk-line.short { width: 60%; }
.cat-skel .sk-price { height: 14px; width: 38%; margin-top: 6px; }
@keyframes sk-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* Compare tray + matrix */
#cat-cmpbar {
  display: flex; gap: 10px; align-items: center; padding: 8px 20px;
  border-top: 1px dashed var(--redline); border-bottom: 1px dashed var(--redline);
  background: rgba(199, 72, 43, 0.05); color: var(--redline);
  font-family: var(--font-cad); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmp-grid {
  display: grid; grid-template-columns: 90px repeat(var(--n), 1fr);
  gap: 1px; background: var(--rule, #D8CFBA); border: 2px solid var(--ink);
  margin-top: 10px; overflow-x: auto;
}
.cmp-cell { background: var(--paper, #F6F1E3); padding: 8px 10px; font-size: 12px; }
.cmp-cell.cmp-label {
  font-family: "SF Mono", Menlo, monospace; font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-soft); display: flex; align-items: center;
}
.cmp-head { text-align: center; }
.cmp-head img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; }
.cmp-name { font-size: 11.5px; margin: 6px 0; }

/* Fit-search sections: verified fits lead, unknowns demoted */
.cat-section {
  grid-column: 1 / -1; margin: 4px 0 0; font-weight: 600; letter-spacing: 0.14em;
  display: flex; align-items: center; gap: 12px; color: var(--moss);
}
.cat-section::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: 0.45; }
.cat-section.dim { color: var(--ink-soft); margin-top: 12px; }
.cat-card.cat-dim { opacity: 0.72; }
.cat-card.cat-dim:hover { opacity: 1; }

/* update nudge: a redline chip riding above the (possible) bottom bar */
#update-nudge {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 70; padding: 10px 16px; cursor: pointer;
  background: var(--redline); color: var(--paper);
  border: none; box-shadow: 3px 3px 0 rgba(28, 26, 23, 0.3);
  animation: toast-in 0.18s ease-out;
}

/* ---------------------------------------------------- account chip (home) */
.acct-chip { display: flex; align-items: center; gap: 10px; }
.acct-chip .acct-mail { font-size: 11px; letter-spacing: 0.05em; font-family: var(--font-cad); text-transform: uppercase; }
.acct-chip .btn { font-size: 11px; padding: 4px 10px; }

/* ---------------------------------------------- sign-in: the drafting sheet
   A sheet of vellum pinned over a faint plan. Double ink border, title
   block, provider buttons cut like drawing-set tabs. */
.ss-stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px 16px;
}
.ss-plan {
  position: absolute;
  inset: -4% -2%;
  width: 104%;
  height: 108%;
  opacity: 0.08;
  pointer-events: none;
}
.ss-sheet {
  position: relative;
  width: min(440px, 100%);
  background: #FBF7EC;
  border: 2px solid var(--ink);
  box-shadow:
    inset 0 0 0 4px #FBF7EC,
    inset 0 0 0 5px var(--ink),
    6px 6px 0 rgba(28, 26, 23, 0.16);
  padding: 40px 36px 0;
  text-align: center;
  animation: ss-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ss-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-sheet { animation: none; }
}
.ss-mark { width: 58px; height: auto; display: block; margin: 0 auto 18px; }
.ss-word { width: 190px; max-width: 70%; height: auto; display: block; margin: 0 auto 10px; }
.ss-tag { color: var(--ink-soft); letter-spacing: 0.34em; font-size: 10px; }
.ss-rule {
  display: flex; align-items: center; margin: 22px 0;
}
.ss-rule::before, .ss-rule::after {
  content: ""; flex: 1; border-top: 1px solid var(--ink);
}
.ss-rule span {
  width: 7px; height: 7px; margin: 0 10px;
  background: var(--redline); transform: rotate(45deg); flex: none;
}
.ss-lede {
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 26px;
}
.ss-btns { display: grid; gap: 12px; margin: 0 0 22px; }
.ss-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 18px;
  background: #FDFBF4;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ss-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.ss-btn:active { transform: none; box-shadow: 1px 1px 0 var(--ink); }
.ss-btn:focus-visible { outline: 2px solid var(--redline); outline-offset: 3px; }
.ss-glyph { width: 19px; height: 19px; flex: none; }
.ss-unconfigured { color: var(--ink-soft); }
.ss-fine {
  color: var(--ink-soft);
  font-size: 9.5px;
  line-height: 1.9;
  letter-spacing: 0.09em;
  margin: 0 0 26px;
}
.ss-titleblock {
  display: flex;
  margin: 0 -36px;
  border-top: 2px solid var(--ink);
  background: var(--paper-deep);
}
.ss-titleblock span {
  flex: 1;
  padding: 9px 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.ss-titleblock span + span { border-left: 1px solid var(--ink); }
.ss-titleblock span:nth-child(3) { color: var(--redline); }
.ss-titleblock span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .ss-sheet { padding: 30px 22px 0; }
  .ss-titleblock { margin: 0 -22px; }
  .ss-titleblock span { font-size: 8px; letter-spacing: 0.12em; }
  .ss-lede { font-size: 15px; }
}

/* --------------------------------------------------------- share dialog */
.share-rolerow { display: flex; align-items: center; gap: 16px; margin: 14px 0 10px; }
.share-role { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.share-rolerow .btn { margin-left: auto; }
.share-linkrow { display: flex; gap: 8px; margin: 10px 0 4px; }
.share-linkrow input {
  flex: 1; font-family: var(--font-cad); font-size: 11px;
  padding: 8px 10px; border: 1px solid var(--ink); background: #FDFBF4;
  color: var(--ink); min-width: 0;
}
.share-people-wrap { margin-top: 16px; }
.share-people { list-style: none; margin: 0; padding: 0; }
.share-people li {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line-soft); padding: 8px 2px;
}
.share-people .sp-who { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.share-people .sp-role { flex: none; }
.share-people .sp-rm {
  border: none; background: none; cursor: pointer; color: var(--ink-soft);
  font-size: 13px; padding: 2px 6px;
}
.share-people .sp-rm:hover { color: var(--redline); }
.share-people .share-empty { color: var(--ink-soft); border-top: none; }
.card-shared { color: var(--redline); margin-left: 6px; }
.share-linkrow[hidden] { display: none !important; }

/* ------------------------------------------------- back to the main site */
.home-site { text-align: center; margin: 46px 0 0; font-size: 10px; }
.home-site a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.home-site a:hover { color: var(--redline); border-bottom-color: var(--redline); }
.ss-titleblock a { color: inherit; text-decoration: none; }
.ss-titleblock a:hover { color: var(--redline); }

/* ------------------------------------------------------------ tint chips */
.tint-row { align-items: center; }
.tint-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tint-chip {
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--tint) 30%, #FFFDF6);
  position: relative;
}
.tint-chip:hover { transform: translateY(-1px); box-shadow: 1px 2px 0 rgba(28,26,23,.35); }
.tint-chip.sel { outline: 2px solid var(--redline); outline-offset: 1px; }
.tint-chip.tint-none { background: #FFFDF6; }
.tint-chip.tint-none::after {
  content: ""; position: absolute; inset: 2px;
  background: linear-gradient(to top right, transparent 44%, var(--redline) 46%, var(--redline) 54%, transparent 56%);
}