/* ── FireSmart Workflow panel (Sprint 33B) ───────────────────────────────── The first piece of viewer UI outside viewer.html. Palette is the viewer's own (#111827 ground, #1f2937 body, #374151 rules, #9ca3af/#e5e7eb text, #f97316 accent); type and spacing follow the map view (Inter, 13 px body, 36 px primary buttons, 8 px radius), not the popdowns' 0.72 rem labels. */ @font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); } :root { /* The map view's dark theme — see index.css [data-theme=dark]. */ --wf-ground: #1a2b3c; --wf-body: #111827; --wf-rule: #374151; --wf-muted: #6b7280; --wf-text-2: #9ca3af; --wf-text: #f3f4f6; --wf-accent: #b3595a; --wf-accent-light: #cc7d7e; --wf-accent-wash: rgba(179,89,90,0.14); --wf-ok: #4ade80; --wf-warn: #fbbf24; --wf-err: #fca5a5; --wf-width: 360px; } /* Light theme (viewer.html's toggle sets html[data-theme=light]) — the map view's light palette. */ html[data-theme="light"] { --wf-ground: #f0f4f8; --wf-body: #ffffff; --wf-rule: #d1dae5; --wf-muted: #8fa3b8; --wf-text-2: #4b6175; --wf-text: #1e293b; --wf-accent-light: #b3595a; --wf-ok: #15803d; --wf-warn: #b45309; --wf-err: #b91c1c; } html[data-theme="light"] #wf-panel { box-shadow: -8px 0 24px rgba(30,41,59,0.12); } html[data-theme="light"] #wf-panel.left { box-shadow: 8px 0 24px rgba(30,41,59,0.12); } #wf-panel { position: fixed; top: 64px; right: 0; bottom: 0; width: var(--wf-width); z-index: 1500; display: none; flex-direction: column; background: var(--wf-ground); border-left: 1px solid var(--wf-rule); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; color: var(--wf-text); box-shadow: -8px 0 24px rgba(0,0,0,0.35); } #wf-panel.open { display: flex; } #wf-panel.left { right: auto; left: 0; border-left: none; border-right: 1px solid var(--wf-rule); box-shadow: 8px 0 24px rgba(0,0,0,0.35); } #wf-panel.collapsed { width: 56px; } /* Resize: a grab strip on the panel's inner edge; the width persists. */ #wf-panel .wf-resize { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; z-index: 2; } #wf-panel.left .wf-resize { left: auto; right: -3px; } #wf-panel.collapsed .wf-resize { display: none; } #wf-panel .wf-resize:hover, #wf-panel.resizing .wf-resize { background: var(--wf-accent-wash); } #wf-panel.resizing { user-select: none; } #wf-panel.collapsed .wf-when-open { display: none !important; } /* header */ .wf-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--wf-rule); } .wf-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; flex: 1; } .wf-iconbtn { width: 28px; height: 28px; border-radius: 6px; background: none; border: 1px solid transparent; color: var(--wf-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .wf-iconbtn:hover { background: var(--wf-accent-wash); color: var(--wf-accent); } .wf-iconbtn svg { width: 16px; height: 16px; } /* source cloud */ .wf-source { padding: 10px 14px; border-bottom: 1px solid var(--wf-rule); } .wf-label { display: block; font-size: 13px; color: var(--wf-text-2); margin-bottom: 4px; } .wf-select, .wf-input { width: 100%; box-sizing: border-box; background: var(--wf-body); color: var(--wf-text); border: 1px solid var(--wf-rule); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 14px; } .wf-select:focus, .wf-input:focus { outline: none; border-color: var(--wf-accent); } /* step rail */ .wf-steps { flex: 1; overflow-y: auto; padding: 6px 0; } .wf-step { border-left: 2px solid transparent; } .wf-step.active { border-left-color: var(--wf-accent); background: rgba(249,115,22,0.05); } .wf-step-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 9px 12px 9px 12px; cursor: pointer; user-select: none; } .wf-step-row:hover { background: var(--wf-accent-wash); } .wf-step.locked .wf-step-row { cursor: default; opacity: 0.55; } .wf-step.locked .wf-step-row:hover { background: none; } .wf-glyph { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .wf-glyph svg { width: 20px; height: 20px; } .wf-glyph.done { color: var(--wf-ok); } .wf-glyph.running { color: var(--wf-accent); } .wf-glyph.running svg { animation: wf-spin 1.1s linear infinite; } .wf-glyph.failed { color: var(--wf-err); } .wf-glyph.available { color: var(--wf-text); } .wf-glyph.locked { color: var(--wf-muted); } @keyframes wf-spin { to { transform: rotate(360deg); } } .wf-step-title { font-size: 15px; font-weight: 500; line-height: 1.2; display: flex; align-items: center; gap: 6px; } .wf-tool-ico { width: 18px; height: 18px; display: inline-flex; color: var(--wf-text-2); flex-shrink: 0; } .wf-tool-ico svg { width: 18px; height: 18px; } .wf-step.done .wf-tool-ico { color: var(--wf-text); } .wf-step.active .wf-tool-ico { color: var(--wf-accent); } .wf-step-title .wf-n { color: var(--wf-text-2); font-weight: 500; margin-right: 6px; } .wf-step-sub { font-size: 13px; color: var(--wf-text-2); margin-top: 2px; line-height: 1.35; } .wf-step-sub.err { color: var(--wf-err); } .wf-step-sub.warn { color: var(--wf-warn); } .wf-step-actions { display: flex; gap: 2px; } /* step body — flush with the row's text, not the glyph column, so the adopted tool bodies (filter rows with two inputs) have their width */ .wf-body { display: none; padding: 2px 14px 14px 14px; } .wf-step.active .wf-body { display: block; } .wf-card { background: var(--wf-body); border: 1px solid var(--wf-rule); border-radius: 8px; padding: 12px; } .wf-field { margin-bottom: 10px; } .wf-field:last-child { margin-bottom: 0; } .wf-row { display: flex; gap: 8px; align-items: center; } .wf-row .wf-input { flex: 1; } .wf-btn { width: 100%; height: 36px; border-radius: 8px; border: 1px solid var(--wf-rule); background: var(--wf-body); color: var(--wf-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, color .15s, border-color .15s; } .wf-btn:hover { background: var(--wf-accent-wash); color: var(--wf-accent); border-color: var(--wf-accent); } .wf-btn.primary { background: var(--wf-accent-wash); border-color: transparent; color: var(--wf-accent-light); font-weight: 600; } .wf-btn.primary:hover:not(:disabled), .wf-btn.primary:active:not(:disabled) { background: var(--wf-accent); border-color: var(--wf-accent); color: #fff; } .wf-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wf-btn + .wf-btn { margin-top: 8px; } .wf-btn.small { height: 30px; font-size: 13px; width: auto; padding: 0 12px; } .wf-disclosure { background: none; border: none; color: var(--wf-text-2); font: inherit; font-size: 13px; cursor: pointer; padding: 0; margin: 6px 0; } .wf-disclosure:hover { color: var(--wf-accent); } .wf-note { font-size: 13px; color: var(--wf-text-2); line-height: 1.4; margin-top: 8px; } .wf-note.err { color: var(--wf-err); } .wf-note.ok { color: var(--wf-ok); } .wf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .wf-chip { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--wf-ground); border: 1px solid var(--wf-rule); color: var(--wf-text-2); } /* log */ .wf-log { border-top: 1px solid var(--wf-rule); max-height: 38%; display: flex; flex-direction: column; } .wf-log-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; user-select: none; } .wf-log-head:hover { background: var(--wf-accent-wash); } .wf-log-head span { flex: 1; font-size: 13px; font-weight: 600; color: var(--wf-text-2); letter-spacing: 0.02em; } .wf-log-head .wf-caret { transition: transform .15s; color: var(--wf-text-2); } .wf-log.open .wf-caret { transform: rotate(90deg); } .wf-log-list { display: none; overflow-y: auto; padding: 0 14px 10px; } .wf-log.open .wf-log-list { display: block; } .wf-log-line { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font-size: 13px; padding: 3px 0; line-height: 1.35; } .wf-log-line:hover { background: var(--wf-accent-wash); } .wf-log-line time { color: var(--wf-muted); font-variant-numeric: tabular-nums; } .wf-log-line.err { color: var(--wf-err); } .wf-log-line.ok { color: var(--wf-ok); } .wf-log-empty { font-size: 13px; color: var(--wf-muted); padding: 4px 0 8px; } /* status bar */ .wf-status { display: none; border-top: 1px solid var(--wf-rule); padding: 10px 14px 12px; background: var(--wf-body); } .wf-status.visible { display: block; } .wf-status-label { font-size: 13px; color: var(--wf-text); margin-bottom: 6px; display: flex; justify-content: space-between; } .wf-status-label time { color: var(--wf-text-2); font-variant-numeric: tabular-nums; } .wf-bar { height: 4px; border-radius: 2px; background: var(--wf-rule); overflow: hidden; position: relative; } .wf-bar::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--wf-accent); border-radius: 2px; animation: wf-slide 1.4s ease-in-out infinite; } @keyframes wf-slide { 0% { left: -35%; } 100% { left: 100%; } } /* collapsed rail: glyphs only, one per step; the active step keeps its rule */ #wf-panel.collapsed .wf-steps { padding: 8px 0; overflow: hidden; } #wf-panel.collapsed .wf-step-row { grid-template-columns: 1fr; justify-items: center; padding: 12px 0; } #wf-panel.collapsed .wf-step-row > div, #wf-panel.collapsed .wf-step-actions, #wf-panel.collapsed .wf-body { display: none !important; } #wf-panel.collapsed .wf-head { justify-content: center; padding: 10px 0; gap: 0; } #wf-panel.collapsed .wf-head > .wf-glyph { display: none; } #wf-panel.collapsed #wf-collapse svg { transform: rotate(180deg); } /* ribbon button reuses .ribbon-btn; only the active state needs a hook */ #wf-btn.active { background: var(--wf-accent-wash); color: var(--wf-accent); } /* ── Adopted tool bodies (#gc-main / #hiz-main / #tth-main) ──────────────── These nodes were written for the 0.72 rem popdowns; inside the panel they inherit Inter and are brought up to the panel's scale. Day 7 finishes the pass; this is the floor. */ #wf-panel .wf-adopted { font-size: 14px; } #wf-panel .wf-adopted .pd-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--wf-text-2); text-transform: none; margin: 10px 0 8px; } #wf-panel .wf-adopted .pd-title:first-child { margin-top: 0; } #wf-panel .wf-adopted .pd-field { margin-bottom: 10px; } #wf-panel .wf-adopted .pd-field label, #wf-panel .wf-adopted .pd-field-label, #wf-panel .wf-adopted label { font-size: 13px; color: var(--wf-text-2); } #wf-panel .wf-adopted input[type="text"], #wf-panel .wf-adopted input[type="number"], #wf-panel .wf-adopted select, #wf-panel .wf-adopted .pd-select, #wf-panel .wf-adopted .pd-input-sm { background: var(--wf-ground); color: var(--wf-text); border: 1px solid var(--wf-rule); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px; } #wf-panel .wf-adopted input:focus, #wf-panel .wf-adopted select:focus { outline: none; border-color: var(--wf-accent); } #wf-panel .wf-adopted .pd-submit { width: 100%; height: 36px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; /* The map view's tonal button: a faint wash of the accent with the accent as lettering; solid only under the pointer or while pressed. */ background: var(--wf-accent-wash); color: var(--wf-accent-light); border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } #wf-panel .wf-adopted .pd-submit:hover:not(:disabled), #wf-panel .wf-adopted .pd-submit:active:not(:disabled) { background: var(--wf-accent); border-color: var(--wf-accent); color: #fff; } #wf-panel .wf-adopted .pd-submit:disabled { opacity: .5; cursor: not-allowed; } /* Secondary pd-submits (Draw area, Add building…) carry an inline surface background; they read as outlined neutrals and take the wash on hover. */ #wf-panel .wf-adopted .pd-submit[style*="surface-2"] { background: var(--wf-body) !important; color: var(--wf-text) !important; border: 1px solid var(--wf-rule) !important; font-weight: 500; } #wf-panel .wf-adopted .pd-submit[style*="surface-2"]:hover:not(:disabled) { background: var(--wf-accent-wash) !important; border-color: var(--wf-accent) !important; color: var(--wf-accent-light) !important; } #wf-panel .wf-adopted .pd-divider { border: none; border-top: 1px solid var(--wf-rule); margin: 12px 0; } #wf-panel .wf-adopted .hiz-bld-row { font-size: 14px !important; padding: 4px 6px !important; border-radius: 6px; } #wf-panel .wf-adopted .hiz-bld-row:hover { background: var(--wf-accent-wash); } #wf-panel .wf-adopted #hiz-zone-count button, #wf-panel .wf-adopted #tth-rule-zones button { font-size: 13px !important; padding: 4px 10px !important; border-radius: 6px !important; } #wf-panel .wf-adopted .enc-job-row { font-size: 14px; padding: 5px 6px; border-radius: 6px; } #wf-panel .wf-adopted .enc-job-row:hover { background: var(--wf-accent-wash); } #wf-panel .wf-adopted .enc-chip { font-size: 12px; } #wf-panel .wf-adopted .tth-gate { margin-bottom: 8px; } #wf-panel .wf-adopted .tth-matched, #wf-panel .wf-adopted .tth-status, #wf-panel .wf-adopted #hiz-seed-count, #wf-panel .wf-adopted #tth-draw-status, #wf-panel .wf-adopted [style*="font-size:0.72rem"], #wf-panel .wf-adopted [style*="font-size:0.7rem"] { font-size: 13px !important; } #wf-panel .wf-adopted #hiz-zone-count { gap: 6px; } #wf-panel .wf-adopted #hiz-progress { margin-top: 8px; } /* ── Day 7: adopted bodies finished to the panel's scale ─────────────────── */ #wf-panel .wf-adopted .wf-hide-in-panel { display: none !important; } /* the panel header owns the cloud */ #wf-panel .wf-adopted .tth-gate { background: var(--wf-ground); border-color: var(--wf-rule); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; } #wf-panel .wf-adopted .tth-gate-header label { font-size: 14px; color: var(--wf-text); } #wf-panel .wf-adopted .tth-gate-header input[type="checkbox"], #wf-panel .wf-adopted .hiz-bld-row input[type="checkbox"], #wf-panel .wf-adopted #tth-zone-row input[type="checkbox"] { accent-color: var(--wf-accent); width: 15px; height: 15px; } #wf-panel .wf-adopted .tth-range { gap: 8px; } #wf-panel .wf-adopted .tth-range span, #wf-panel .wf-adopted .tth-unit-row label { font-size: 13px; color: var(--wf-text-2); } #wf-panel .wf-adopted .pd-input-sm { width: 100%; min-width: 0; } #wf-panel .wf-adopted .tth-unit-row select { font: inherit; font-size: 14px; background: var(--wf-ground); color: var(--wf-text); border: 1px solid var(--wf-rule); border-radius: 6px; padding: 4px 8px; } #wf-panel .wf-adopted .tth-matched { font-size: 13px; color: var(--wf-ok); margin: 8px 0 4px; } #wf-panel .wf-adopted .tth-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } #wf-panel .wf-adopted .tth-color-row label { font-size: 13px; color: var(--wf-text-2); } #wf-panel .wf-adopted .tth-color-row input[type="color"] { width: 40px; height: 28px; border: 1px solid var(--wf-rule); border-radius: 6px; background: var(--wf-ground); padding: 2px; } #wf-panel .wf-adopted #tth-zone-row { font-size: 13px; color: var(--wf-text); gap: 12px; margin: 6px 0 10px; } #wf-panel .wf-adopted #tth-zone-row label { font-size: 13px; color: var(--wf-text); } #wf-panel .wf-adopted #tth-rule-note, #wf-panel .wf-adopted [id$="-status"] { font-size: 13px; line-height: 1.4; } #wf-panel .wf-adopted #tth-preset-btn { font: inherit; font-size: 13px; height: 28px; border-radius: 6px; } #wf-panel .wf-adopted #tth-preset-btn:hover { border-color: var(--wf-accent); color: var(--wf-accent); } #wf-panel .wf-adopted .hiz-job-row, #wf-panel .wf-adopted .hiz-zone-row { font-size: 14px; padding: 5px 6px; border-radius: 6px; } #wf-panel .wf-adopted .hiz-job-row:hover, #wf-panel .wf-adopted .hiz-zone-row:hover { background: var(--wf-accent-wash); } #wf-panel .wf-adopted .hiz-no-jobs, #wf-panel .wf-adopted .enc-no-jobs { font-size: 13px; color: var(--wf-muted); } #wf-panel .wf-adopted .hiz-action-btn, #wf-panel .wf-adopted .enc-action-btn { font-size: 14px; border-radius: 6px; padding: 2px 6px; } #wf-panel .wf-adopted .hiz-action-btn:hover, #wf-panel .wf-adopted .enc-action-btn:hover { background: var(--wf-accent-wash); color: var(--wf-accent); } #wf-panel .wf-adopted #hiz-zone-count button { background: var(--wf-ground); border: 1px solid var(--wf-rule); color: var(--wf-text); font: inherit; } #wf-panel .wf-adopted #hiz-zone-count button.active { background: var(--wf-accent); border-color: var(--wf-accent); color: #111827; } #wf-panel .wf-adopted #hiz-progress-bar { border-radius: 2px; } #wf-panel .wf-adopted #hiz-progress-label { font-size: 13px; } #wf-panel .wf-adopted #hiz-bld-list { max-height: 180px; } #wf-panel .wf-adopted #hiz-bjob-sel option, #wf-panel .wf-adopted select option { background: var(--wf-ground); } #wf-panel .wf-adopted [style*="color:#6b7280"], #wf-panel .wf-adopted [style*="color: #6b7280"] { color: var(--wf-text-2) !important; } #wf-panel .wf-adopted [style*="text-decoration:underline"] { font-size: 13px !important; color: var(--wf-text-2) !important; } #wf-panel .wf-adopted [style*="text-decoration:underline"]:hover { color: var(--wf-accent) !important; } #wf-panel .wf-adopted a, #wf-panel .wf-adopted button[style*="background:none"] { font: inherit; } /* ── Treatment cards (Sprint 35) ─────────────────────────────────────────── */ #wf-panel .tth-treat-card { background: var(--wf-ground); border: 1px solid var(--wf-rule); border-radius: 8px; padding: 10px 10px 8px; margin-bottom: 8px; } #wf-panel .tth-treat-card.active { border-color: var(--treat-color, var(--wf-accent)); box-shadow: inset 3px 0 0 var(--treat-color, var(--wf-accent)); } #wf-panel .tth-treat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } #wf-panel .tth-treat-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--treat-color, #ff6600); flex-shrink: 0; } #wf-panel .tth-treat-name { font-size: 14px; font-weight: 500; color: var(--wf-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; } #wf-panel .tth-treat-name:hover { color: var(--wf-accent); } #wf-panel .tth-treat-edit { width: 14px; height: 14px; color: var(--wf-muted); cursor: pointer; flex-shrink: 0; } #wf-panel .tth-treat-edit svg { width: 14px; height: 14px; } #wf-panel .tth-treat-edit:hover { color: var(--wf-accent); } #wf-panel .tth-treat-rename { flex: 1; min-width: 0; font: inherit; font-size: 14px; background: var(--wf-body); color: var(--wf-text); border: 1px solid var(--wf-accent); border-radius: 6px; padding: 3px 6px; } #wf-panel .tth-treat-meta { font-size: 13px; color: var(--wf-text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } #wf-panel .tth-treat-err { font-size: 13px; color: var(--wf-err); margin: -2px 0 8px; line-height: 1.35; } #wf-panel .tth-treat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #wf-panel .tth-treat-btn { height: 34px; border-radius: 8px; border: 1px solid var(--wf-rule); background: var(--wf-body); color: var(--wf-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s, color .15s, border-color .15s; } #wf-panel .tth-treat-btn:hover:not(:disabled) { background: var(--wf-accent-wash); color: var(--wf-accent); border-color: var(--wf-accent); } #wf-panel .tth-treat-btn.primary { background: var(--wf-accent-wash); border-color: transparent; color: var(--wf-accent-light); } #wf-panel .tth-treat-btn.primary:hover:not(:disabled), #wf-panel .tth-treat-btn.primary:active:not(:disabled) { background: var(--wf-accent); border-color: var(--wf-accent); color: #fff; } #wf-panel .tth-treat-btn.danger:hover:not(:disabled) { color: var(--wf-err); border-color: var(--wf-err); background: rgba(252,165,165,0.1); } #wf-panel .tth-treat-btn:disabled { opacity: .4; cursor: not-allowed; } #wf-panel .tth-treat-ico { width: 15px; height: 15px; display: inline-flex; } #wf-panel .tth-treat-ico svg { width: 15px; height: 15px; } /* ── Building edits (Sprint 36) ─────────────────────────────────────────── */ .wf-edits { margin-top: 10px; border-top: 1px solid var(--wf-rule); padding-top: 4px; } .wf-edit-sheet { margin-top: 10px; padding: 10px; border: 1px solid var(--wf-accent); border-radius: 8px; background: var(--wf-accent-wash); } .wf-edit-sheet .wf-input { width: 72px; flex: 0 0 72px; } .wf-edit-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .wf-edit-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: var(--wf-ground); border: 1px solid var(--wf-rule); } .wf-edit-row:hover { border-color: var(--wf-accent); } .wf-edit-op { font-size: 13px; font-weight: 600; white-space: nowrap; } .wf-edit-op[data-class="6"] { color: var(--wf-accent); } .wf-edit-op[data-class="5"] { color: var(--wf-ok); } .wf-edit-op[data-class="1"] { color: var(--wf-text-2); } .wf-edit-sheet .wf-select { width: 100%; } /* ⓘ — a description under a hover */ .wf-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--wf-text-2); color: var(--wf-text-2); font-size: 12px; font-style: italic; font-family: Georgia, serif; line-height: 1; cursor: help; vertical-align: middle; user-select: none; } .wf-info:hover { color: var(--wf-accent); border-color: var(--wf-accent); } /* ── Type floor (2026-09-22) ──────────────────────────────────────────────── Nothing in the FireSmart panel reads below 13 px — sub-headings and notes included. The adopted tool bodies still carry the popdowns' inline rem sizes (0.63–0.8 rem ≈ 10–13 px); lift them all. Both spellings: a style attribute written in HTML keeps "font-size:0.7rem", one set from JS is serialised as "font-size: 0.7rem". */ #wf-panel .wf-adopted [style*="font-size:0.6"], #wf-panel .wf-adopted [style*="font-size: 0.6"], #wf-panel .wf-adopted [style*="font-size:0.7"], #wf-panel .wf-adopted [style*="font-size: 0.7"], #wf-panel .wf-adopted [style*="font-size:0.8"], #wf-panel .wf-adopted [style*="font-size: 0.8"], #wf-panel .wf-adopted [style*="font-size:11px"], #wf-panel .wf-adopted [style*="font-size: 11px"], #wf-panel .wf-adopted [style*="font-size:12px"], #wf-panel .wf-adopted [style*="font-size: 12px"] { font-size: 13px !important; } #wf-panel .wf-adopted .tth-status, #wf-panel .wf-adopted .enc-chip, #wf-panel .wf-adopted .toggle-row { font-size: 13px !important; } #wf-panel .wf-adopted .pd-title { font-size: 13px; } #wf-panel .wf-adopted .tth-zchip { font-size: 14px; } #wf-panel .wf-adopted .tth-readout .z { font-size: 13px; } #wf-panel .wf-adopted .tth-readout .why { font-size: 14px; } #wf-panel .wf-adopted table.tth-sens { font-size: 14px; } #wf-panel .wf-adopted table.tth-sens caption { font-size: 13px; } /* ── Source refresh + abort (2026-09-22) ─────────────────────────────────── */ .wf-source .wf-row .wf-select { flex: 1; min-width: 0; } .wf-btn.wf-refresh { width: 36px; flex: 0 0 36px; height: 36px; padding: 0; } .wf-btn.wf-refresh svg { width: 17px; height: 17px; } .wf-btn.wf-refresh.spinning svg { animation: wf-spin .8s linear infinite; } .wf-btn-ico { display: inline-flex; width: 15px; height: 15px; } .wf-btn-ico svg { width: 15px; height: 15px; } .wf-btn.danger { color: var(--wf-err); border-color: var(--wf-err); background: transparent; } .wf-btn.danger:hover:not(:disabled) { background: var(--wf-err); border-color: var(--wf-err); color: var(--wf-body); } /* ── Sprint 37: the plan, at the panel's type floor ─────────────────────── */ #wf-panel .wf-adopted .tth-filters summary, #wf-panel .wf-adopted .tth-show button, #wf-panel .wf-adopted .tth-headline .k, #wf-panel .wf-adopted .tth-headline .s, #wf-panel .wf-adopted .tth-plan-notes, #wf-panel .wf-adopted .tth-plan-err, #wf-panel .wf-adopted .tth-plan-wait { font-size: 13px; } #wf-panel .wf-adopted table.tth-zones { font-size: 13px; } #wf-panel .wf-adopted .tth-headline .v { font-size: 17px; } #wf-panel .wf-adopted .tth-show { border-color: var(--wf-rule); } #wf-panel .wf-adopted .tth-show button + button { border-left-color: var(--wf-rule); } #wf-panel .wf-adopted .tth-show button[aria-pressed="true"] { background: var(--wf-accent-wash); color: var(--wf-accent-light); } #wf-panel .wf-adopted table.tth-zones th, #wf-panel .wf-adopted table.tth-zones td { border-bottom-color: var(--wf-rule); } #wf-panel .wf-adopted .tth-plan-notes .stmt { color: var(--wf-text); } #wf-panel .wf-adopted #tth-filter-section .pd-row-2 { align-items: end; } #wf-panel .wf-adopted .tth-row-3 { align-items: end; } #wf-panel .wf-adopted .tth-show button { white-space: nowrap; padding: 6px 2px; } /* ── Sprint 38: the report step ──────────────────────────────────────────── */ .wf-report-facts { display: grid; gap: 4px; font-size: 13px; color: var(--wf-text-2); margin: 4px 0 2px; } .wf-report-facts b { color: var(--wf-text); font-weight: 600; font-variant-numeric: tabular-nums; } .wf-report-sections { display: grid; gap: 4px; } .wf-report-sections label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wf-text); cursor: pointer; } .wf-report-sections input { accent-color: var(--wf-accent); width: 15px; height: 15px; margin: 0; } .wf-report-sections input:disabled + span { color: var(--wf-text-2); } /* ── Tree thinning views: today's findings / treatment, at the panel's floor ── */ #wf-panel .wf-adopted .tth-legend, #wf-panel .wf-adopted .tth-branch-off, #wf-panel .wf-adopted .tth-sim-key, #wf-panel .wf-adopted .tth-show-note { font-size: 13px; } #wf-panel .wf-adopted .tth-legend, #wf-panel .wf-adopted .tth-branch-off { color: var(--wf-text-2); } #wf-panel .wf-adopted .tth-legend .row { color: var(--wf-text); } #wf-panel .wf-adopted .tth-treat-view { font-size: 14px; border-color: var(--wf-rule); color: var(--wf-text-2); } #wf-panel .wf-adopted .tth-treat-view[aria-pressed="true"] { background: var(--wf-accent-wash); color: var(--wf-accent-light); border-color: var(--wf-accent); } #wf-panel .wf-adopted .tth-prune-hint { font-size: 12px; color: var(--wf-text-2); } #wf-panel .wf-adopted .tth-prune-lab input[type="checkbox"] { accent-color: var(--wf-accent); width: 13px; height: 13px; margin: 0; } #wf-panel .wf-adopted .enc-job-row.is-engaged { outline-color: var(--wf-accent); } /* ── Sprint 39: Wildfire | Woodlot switch ─────────────────────────────────── */ #wf-panel .wf-modes { display: flex; margin: 10px 14px 0; border: 1px solid var(--wf-rule); border-radius: 8px; overflow: hidden; } #wf-panel .wf-modes[hidden] { display: none; } #wf-panel .wf-modes button { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; background: none; border: 0; color: var(--wf-text-2); cursor: pointer; } #wf-panel .wf-modes button + button { border-left: 1px solid var(--wf-rule); } #wf-panel .wf-modes button[aria-pressed="true"] { background: var(--wf-accent-wash); color: var(--wf-accent-light); font-weight: 600; } #wf-panel .wf-modes button:focus-visible { outline: 2px solid var(--wf-accent); outline-offset: -2px; } #wf-panel .wf-adopted .wl-gate-sw { width: 12px; height: 12px; } #wf-panel .wf-adopted .wl-secondary { font-size: 13px; border-color: var(--wf-rule); color: var(--wf-text-2); } #wf-panel.collapsed .wf-modes { display: none; } /* ── Utility lines: paused steps (read-only) ─────────────────────────────── */ #wf-panel .wf-paused { opacity: .5; pointer-events: none; user-select: none; filter: saturate(.6); } #wf-panel .wf-paused-note { margin-bottom: 10px; } #wf-panel .wf-glyph.paused { color: var(--wf-text-2); } #wf-panel .wf-step.paused .wf-step-sub { color: var(--wf-text-2); font-style: italic; }