/* SyntaxFlow — measuring window openings on a plan (/documents/plan-takeoff/).
   ===========================================================================
   On top of base.css and sf.css, with their tokens, so light and dark come
   free. The plan itself is always black on white, like the paper: it is a
   drawing, not a screen. The stage is the drafting desk around it.
   Layout: the plan with its tools, and beside it (below on a phone) the
   scale, the openings and the list of measurements; the takeoff sheet is the
   other view, as in the other documents.
   =========================================================================== */
.pl-tabs{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--paper-2); max-width:560px; }
.pl-tabs button{ flex:1; min-height:42px; border:0; border-radius:999px; padding:0 14px; background:transparent; color:var(--ink-2); font:inherit; font-weight:600; cursor:pointer; }
.pl-tabs button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--e1); }
.pl-tabs button:focus-visible{ outline:3px solid var(--glass); outline-offset:2px; }

.pl-work{ display:grid; gap:18px; align-items:start; }
.pl-work[data-tab="plan"] .pl-papertab{ display:none; }
.pl-work[data-tab="paper"] .pl-main,.pl-work[data-tab="paper"] .pl-side{ display:none; }
.pl-papertab{ display:grid; gap:18px; min-width:0; }
@media (min-width:1100px){
  .pl-work[data-tab="plan"]{ grid-template-columns:minmax(0,1fr) 380px; }
  .pl-main{ position:sticky; top:calc(var(--hd,61px) + 10px); }
}

.pl-main{ display:grid; gap:10px; min-width:0; }
.pl-tools,.pl-nav,.pl-draft,.pl-acts,.pl-item-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pl-tools [aria-pressed="true"]{ background:var(--docs); border-color:var(--docs); color:#fff; }
/* the controls of a shape being drawn float over the stage: appearing must not move the plan under the pointer */
.pl-stagewrap{ position:relative; min-width:0; }
.pl-draft{ position:absolute; left:10px; bottom:10px; z-index:3; max-width:calc(100% - 20px); padding:6px; border-radius:10px; background:var(--surface); border:1px solid var(--rule); box-shadow:var(--e2); }
.pl-draft[hidden]{ display:none; }
.pl-nav select{ min-height:36px; max-width:100%; }
.pl-sep{ flex:0 0 6px; }
.pl-zoom{ font-size:.88rem; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:4.5ch; }
.pl-status{ margin:0; min-height:1.4em; font-size:.92rem; color:var(--ink-2); max-width:80ch; }

.pl-stage{ position:relative; height:min(70svh,780px); min-height:300px; overflow:auto; padding:12px; background:var(--desk); border:1px solid var(--rule); border-radius:12px;
  touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; }
.pl-stage:focus-visible{ outline:3px solid var(--glass); outline-offset:2px; }
.pl-stage[data-tool="pan"]{ cursor:grab; }
.pl-stage[data-tool="pan"].dragging{ cursor:grabbing; }
.pl-stage:not([data-tool="pan"]) .pl-sheet{ cursor:crosshair; }
.pl-sheet{ position:relative; margin:0 auto; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 34px -20px rgba(0,0,0,.55); }
.pl-sheet canvas,.pl-sheet img{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
/* the labels are the pencil's dark red on the white plan (5.5 : 1) in both themes; color says so to tools that read it */
.pl-ov{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:#b5381f; }
.pl-ov g[data-id]{ pointer-events:visiblePainted; cursor:pointer; }
.pl-stage:not([data-tool="pan"]) .pl-ov g[data-id]{ pointer-events:none; }
.pl-empty{ display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; min-height:100%; padding:16px; color:var(--ink-2); }
.pl-empty[hidden]{ display:none; }
.pl-empty p{ margin:0; max-width:46ch; }
.pl-empty strong{ color:var(--ink); }

.pl-side{ display:grid; gap:14px; min-width:0; }
.pl-cal{ margin:0; padding:10px 12px; border-radius:10px; background:var(--readout); color:var(--ink); font-size:.94rem; }
.pl-cal.none{ background:color-mix(in srgb,var(--warn) 12%,var(--surface)); }
.pl-flag{ margin:0; font-size:.88rem; font-weight:600; color:var(--warn); }
.pl-scale .sf-row,.pl-item .sf-row{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.pl-mode{ margin:0; padding:0; border:0; display:grid; gap:6px; min-width:0; }
.pl-mode legend{ padding:0; margin-bottom:4px; font-size:.92rem; font-weight:560; color:var(--ink-2); }
.pl-radio{ display:flex; align-items:flex-start; gap:8px; }
.pl-radio input{ margin-top:4px; width:18px; height:18px; flex:0 0 18px; accent-color:var(--glass); }
.pl-radio label{ font-size:.94rem; color:var(--ink); }

.pl-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pl-item{ display:grid; gap:6px; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); min-width:0; }
.pl-item.sel{ border-color:var(--pencil-ink); box-shadow:0 0 0 2px color-mix(in srgb,var(--pencil) 35%,transparent); }
.pl-item.affected{ border-style:dashed; border-color:var(--warn); }
.pl-item-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.pl-kind{ font-weight:650; color:var(--ink); }
.pl-val{ font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pl-item .field{ margin:0; }

.pl-glist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pl-group{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:end; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); }
.pl-group .field{ margin:0; }
.pl-group .pl-gsum{ grid-column:1 / -1; grid-row:2; margin:0; font-size:.88rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pl-group .btn{ grid-column:2; grid-row:1; }

/* the takeoff sheet (paper: black on white, always) */
.sf-doc .pl-gname{ margin:3.5mm 0 1.2mm; font-size:9.5pt; color:#1f2547; }
.sf-sheet.sf-doc .pl-gtable{ width:100%; table-layout:fixed; margin-bottom:2mm; }
.sf-doc .pl-gtable th:nth-child(1){ width:46%; } .sf-doc .pl-gtable th:nth-child(2){ width:28%; }
.sf-doc .pl-gtable th:nth-child(3){ width:13%; } .sf-doc .pl-gtable th:nth-child(4){ width:13%; }
.sf-doc .pl-dnote{ margin:2mm 0 4mm; font-size:7.8pt; color:#4a525c; }
.sf-doc .pl-dcal{ margin:0 0 2.5mm; font-size:8.6pt; color:#4a525c; }
.sf-doc .pl-fig{ margin:0 0 4mm; break-inside:avoid; }
.sf-doc .pl-fig-box{ position:relative; width:100%; border:.2mm solid #d9dde3; background:#fff; overflow:hidden; }
.sf-doc .pl-fig-box img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sf-doc .pl-fig-box svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:#b5381f; }

@media (max-width:640px){
  .pl-stage{ height:62svh; min-height:260px; padding:8px; }
  .pl-tools .btn,.pl-nav .btn{ padding-left:10px; padding-right:10px; }
}
/* sf.css prints only .sf-app > .sf-work > .sf-paperwrap; this tool's work area is
   .pl-work, with the paper inside .pl-papertab, so it says the same for itself
   (whatever the tab on screen, the sheet is what prints) */
@media print{
  .pl-tabs,.pl-main,.pl-side,#pl-acts,#pl-limits,.pl-papertab .sf-company{ display:none !important; }
  body.app .sf-app > .pl-work{ display:block !important; }
  body.app .pl-work > .pl-papertab,body.app .pl-papertab > .sf-paperwrap{ display:block !important; }
}