/* Decide: 3D model card. Desktop values from board/design/DecideModel.dc.html, phone from PhoneModel.dc.html. */
#back-queue { font-size: var(--fs-14); font-weight: 600; text-decoration: none; color: var(--accent); }
body.model-on #week, body.model-on #me { display: none; }
.model .phone, .model .narrow { display: none; }
.mwrap { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px var(--gutter); max-width: 1440px; margin: 0 auto; }
.mv { flex: 999 1 640px; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.mv .stage { position: relative; height: 620px; border-radius: var(--r-18); overflow: hidden; background: #E7E8EA; border: 1px solid #DADBD6; }
.views { position: absolute; inset: 0; display: flex; }
.view { position: relative; flex: 1; min-width: 0; touch-action: none; cursor: crosshair; }
.view + .view { border-left: 1px solid #DADBD6; }
.view .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pinlayer { position: absolute; inset: 0; pointer-events: none; }
.pin3d { position: absolute; width: 30px; height: 30px; border-radius: 15px; background: var(--amber-mark); color: var(--text);
  font-size: var(--fs-13); font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.8); transform: translate(-50%, -50%); }
.side-tag, .stage .tags span, .readout { font-size: var(--fs-12); background: rgba(255,255,255,0.9); padding: 5px 9px; border-radius: 6px; }
.side-tag { position: absolute; left: 14px; top: 52px; }
.stage .tags { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.readout { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); font-family: var(--mono); }
.vtools { position: absolute; right: 14px; top: 14px; display: flex; gap: 4px; background: var(--glass); border-radius: var(--r-10); padding: 4px; }
.vtools button { width: 38px; height: 38px; border: none; border-radius: var(--r-8); background: none; display: flex; align-items: center;
  justify-content: center; cursor: pointer; }
.vtools button.on { background: var(--accent-soft); }
.mv .bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.vchip { height: 36px; padding: 0 14px; border-radius: var(--r-18); border: 1px solid var(--stroke); background: var(--card); color: var(--text);
  font: inherit; font-size: var(--fs-13); cursor: pointer; }
.vchip.on { background: var(--text); color: var(--card); border-color: var(--text); }
.vchip .mono-muted { font-family: var(--mono); color: var(--muted); }
.vchip.on .mono-muted { color: var(--stroke); }
.mside { flex: 1 1 340px; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-18); padding: 20px;
  display: flex; flex-direction: column; gap: 16px; }
.mhead { display: flex; flex-direction: column; gap: 4px; }
.model .kicker { font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.mhead h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; }
.checks { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-14); color: var(--muted); }
.checks .over { color: var(--amber); }
.pinbox { border-top: 1px solid var(--soft); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ptitle { font-size: var(--fs-13); font-weight: 600; }
.pins { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-14); }
.pin-row { display: flex; gap: 10px; align-items: flex-start; }
.pin-row .badge { width: 22px; height: 22px; border-radius: 11px; background: var(--amber-mark); color: var(--text); font-size: var(--fs-12);
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.pin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pin-note { border: none; outline: none; padding: 0; resize: none; field-sizing: content; min-height: 0; font: inherit; font-size: var(--fs-14); background: none; color: var(--text); width: 100%; }
.pin-at { font-family: var(--mono); font-size: var(--fs-12); color: var(--muted); }
.pin-x { border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.mnote { height: 48px; border-radius: var(--r-12); border: 1px solid var(--border); display: flex; align-items: center; padding: 0 14px; gap: 8px; }
.mnote input { flex: 1; border: none; outline: none; font: inherit; font-size: var(--fs-14); background: none; color: var(--text); }
.mans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.mans button { height: 44px; border-radius: var(--r-12); border: 1px solid var(--border); background: var(--quiet); color: var(--text);
  font: inherit; font-size: var(--fs-14); cursor: pointer; }
.mans .approve { height: 50px; border: none; background: var(--accent); color: var(--card); font-size: var(--fs-15); font-weight: 600; }
.mans .change { height: 50px; border-color: var(--outline); background: var(--card); font-size: var(--fs-15); font-weight: 600; }
.mans .reject { color: var(--red); }
.mans .approve.on { background: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-soft); }
.mans button.on:not(.approve) { box-shadow: inset 0 0 0 2px var(--accent); }

@media (max-width: 600px) {
  body.model-on .top { display: none; }
  .model .phone { display: flex; }
  .model .wide { display: none; }
  .model .narrow { display: inline; }
  .mphone-head { align-items: center; gap: 10px; padding: 18px 16px 10px 16px; }
  .mphone-head div { display: flex; flex-direction: column; gap: 2px; }
  .mphone-head b { font-size: var(--fs-15); font-weight: 600; }
  .mback { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; flex: none; }
  .mwrap { display: block; padding: 0; }
  .mv { margin: 0 12px; gap: 0; }
  .mv .stage { height: 380px; border-radius: var(--r-16); }
  .stage .tags { left: 12px; top: 12px; flex-direction: column; align-items: flex-start; }
  .stage .tags span { font-size: var(--fs-11); background: rgba(255,255,255,0.85); padding: 4px 8px; }
  .vtools { display: none; }
  .model .ar { position: absolute; right: 12px; top: 12px; height: 36px; padding: 0 12px; border-radius: var(--r-10); border: none;
    background: var(--text); color: var(--card); font: inherit; font-size: var(--fs-13); font-weight: 600; align-items: center; }
  .model .ar:disabled { opacity: 0.5; }
  .pin-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--glass); border-radius: var(--r-10);
    padding: 8px 10px; font-size: var(--fs-12); color: var(--text); pointer-events: none; }
  .side-tag { top: auto; bottom: 52px; left: 12px; }
  .mv .bar { position: static; padding: 10px 0 0 0; }
  .vchip { padding: 0 12px; }
  .vchip[data-toggle="lod"] { display: none; }
  .mside { margin: 12px 12px 0 12px; border-radius: var(--r-16); padding: 14px; gap: 12px; }
  .mhead .kicker { display: none; }
  .mhead h1 { font-size: 19px; }
  .checks { font-size: var(--fs-13); gap: 4px; }
  .mans { gap: 8px; }
  .mans button, .mans .approve, .mans .change { height: 52px; }
  .pin-row { min-height: 44px; }
  .pin-x { min-width: 44px; min-height: 44px; }
  .model .mphone-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); background: var(--card);
    padding: 6px 4px 18px 4px; margin-top: 12px; position: sticky; bottom: 0; }
  .mphone-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--muted);
    font-size: var(--fs-11); padding-top: 6px; }
  .mphone-nav a.on { color: var(--accent); font-weight: 600; }
}