/* Dabba — case studio. Copyright (C) 2026 shahidhussain2k13@gmail.com
 * SPDX-License-Identifier: GPL-3.0-or-later — see LICENSE. */
/* styles.css — what is particular to Dabba; the shared look is in
 * vendor/workbench/workbench.css, loaded first. */

#c3d{touch-action:none; cursor:grab}
#c3d.dragging{cursor:grabbing}

/* ══ Dabba additions ═════════════════════════════════════════════════ */
.brand small{font-weight:500; color:var(--ink3); font-size:12px; letter-spacing:0}
.sidebar{width:340px}
.panel.accent{background:linear-gradient(180deg,rgba(90,169,255,.06),transparent)}
.row > .lbl i{font-style:normal; color:var(--ink3); font-size:11px}
.inlinerow{display:flex; align-items:center; gap:8px}
.inlinerow .grow{flex:1}
.seg.full{display:flex; width:100%}
/* Five choices (…, Fill, Custom) stay on one line in the sidebar. */
.seg.small.full:has(> button:nth-child(5)):not(:has(> button:nth-child(6))){grid-template-columns:repeat(5, minmax(0, 1fr))}
.seg.small.full:has(> button:nth-child(5)):not(:has(> button:nth-child(6))) button{padding:3px 2px}
button.danger:hover{border-color:var(--bad); color:var(--bad)}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.trio label{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--ink3)}
.trio.pos{grid-template-columns:1fr 1fr auto; align-items:end}
.trio.pos button{height:30px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.duo label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink2)}
.btngrid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.btngrid button{padding:5px 4px; font-size:11.5px; white-space:nowrap}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; cursor:pointer;
  border:1px solid var(--line2); background:var(--bg); color:var(--ink2); font-size:12px; user-select:none;
}
.chip input{accent-color:var(--acc); margin:0}
.chip:has(input:checked){border-color:var(--acc); background:rgba(90,169,255,.12); color:var(--ink)}
.panes[data-pane=plan] #pane-3d, .panes[data-pane="3d"] #pane-2d{display:none}
.panebar .inline input[type=range]{width:110px}
.panebar .inline b{font-family:var(--mono); font-size:11px; color:var(--ink); min-width:32px}
#cplan,#cface{touch-action:none}
#cplan:focus-visible,#cface:focus-visible{outline:2px solid var(--acc2); outline-offset:-2px}
.panel.flash{animation:flash 1s ease-out}
@keyframes flash{0%{background:rgba(90,169,255,.28)}100%{background:transparent}}
@media (max-width: 760px){
  body{overflow:auto}
  .layout{flex-direction:column; height:auto}
  .sidebar{width:100%; max-height:none; border-right:none}
  .viewport{height:90vh}
  .topbar{flex-wrap:wrap; height:auto; padding:8px 12px}
  .vptabs .stat{display:none}
}
/* overlays stay one tidy line, and readable in both themes */
.stage .hud{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 24px);
  background:rgba(10,13,18,.55); color:#c4ccd8; padding:3px 11px; font-size:10.5px;
}
@media (prefers-color-scheme: light){
  .stage .hud{background:rgba(255,255,255,.78); color:var(--ink2); box-shadow:0 1px 3px rgba(16,24,40,.12)}
  .busy{background:rgba(238,241,245,.78)}
}
@media (max-height: 760px), (max-width: 1100px){
  .stage .hud{display:none}
}
/* texture side grid */
.texgrid{width:100%; border-collapse:collapse; margin:0 0 10px; table-layout:fixed}
.texgrid th{font-size:11px; font-weight:600; color:var(--ink3); text-align:left; padding:3px 4px}
.texgrid thead th{text-align:center}
.texgrid th:first-child{width:52px}
.texgrid td{padding:3px 3px}
.texgrid select{font-size:11.5px; padding:3px 5px}
.bordergrid td{padding:3px 2px}
.bordergrid .nf input[type=number]{padding:3px 22px 3px 4px; font-size:11.5px}
.bordergrid thead th{font-size:10.5px}
/* item settings */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; margin:0 0 10px}
.pgrid.four{grid-template-columns:1fr 1fr}
.pf{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--ink3)}
.pf select{font-size:12px; padding:4px 6px}
.segrow{display:grid; grid-template-columns:18px 1fr 1fr 28px; gap:6px; align-items:end; margin:0 0 6px}
.segtag{font-family:var(--mono); font-size:10.5px; color:var(--ink3); padding-bottom:7px; text-align:center}
.iconbtn{padding:4px 0; width:28px; height:28px; line-height:1}
.primcard{border:1px solid var(--line2); border-radius:8px; padding:8px; margin:0 0 8px; background:var(--bg); cursor:pointer}
.primcard.on{border-color:#ffd166; box-shadow:0 0 0 1px rgba(255,209,102,.35)}
.primtop{display:grid; grid-template-columns:1fr 28px; gap:6px; align-items:end; margin-bottom:6px}
.btngrid.five{grid-template-columns:repeat(3,1fr); margin-bottom:8px}
.trio label.locked .nf::before{content:"Fill"; position:absolute; left:8px; font-size:10px; color:var(--acc); font-family:var(--mono); pointer-events:none}
.trio label.locked input{opacity:.75}