/* ============================================================================= styles.css — Backyard Landscape Plan Upscale, quiet, natural. Dark bark UI so the drawing carries the colour. ========================================================================== */ :root{ --bg: #1b1e1a; --bg-2: #23271f; --panel: #262b23; --panel-2: #2e342a; --line: #3a4136; --line-soft: #333a2f; --ink: #eef1e8; --ink-2: #b9c1ae; --ink-3: #838d78; --accent: #b8c48a; /* dry grass */ --accent-2: #d9a05b; /* 2700K lamp */ --terra: #b07a52; --danger: #c86b5a; --radius: 10px; --shadow: 0 10px 30px rgba(0,0,0,.45); --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", "JetBrains Mono", "Consolas", ui-monospace, monospace; --panel-w: 336px; --top-h: 58px; } *{ box-sizing:border-box; } /* Paint the ground on too: if a host ever collapses the body box, the page still reads as this design rather than flashing the host's white. */ html{ height:100%; background:var(--bg); } body{ height:100%; margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overscroll-behavior:none; } button,input,select{ font:inherit; color:inherit; } body{ overflow:hidden; } /* --appH is set from window.innerHeight at runtime. Embedded hosts often size their iframe FROM the content, which makes 100dvh circular and collapses a viewport-filling shell — the explicit pixel height breaks that loop. */ .app{ display:grid; height:var(--appH, 100dvh); min-height:720px; max-width:100vw; overflow:hidden; grid-template-columns: 1fr var(--panel-w); grid-template-rows: var(--top-h) 1fr; grid-template-areas: "top top" "stage panel"; } /* ============================== TOPBAR ================================== */ .topbar{ grid-area:top; display:flex; align-items:center; gap:18px; overflow:hidden; padding:0 14px 0 16px; background:linear-gradient(180deg,#272c22,#20241d); border-bottom:1px solid var(--line); position:relative; z-index:40; } .brand{ display:flex; align-items:center; gap:11px; min-width:0; flex:0 1 auto; overflow:hidden; } .brand-mark{ width:26px; height:26px; color:var(--accent); flex:none; } .brand-mark svg{ width:100%; height:100%; } .brand-text{ min-width:0; } .brand-text h1{ margin:0; font-size:14.5px; font-weight:650; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand-text p{ margin:1px 0 0; font-size:11px; color:var(--ink-3); letter-spacing:.35px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .viewtabs{ margin-left:auto; display:flex; gap:2px; padding:3px; flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; background:#191d16; border:1px solid var(--line); border-radius:9px; } .viewtabs::-webkit-scrollbar{ display:none; } .viewtab{ border:0; background:transparent; color:var(--ink-2); cursor:pointer; flex:none; padding:6px 15px; border-radius:6px; font-size:12.5px; font-weight:550; letter-spacing:.2px; transition:background .16s, color .16s; white-space:nowrap; } .viewtab .t-short{ display:none; } .viewtab:hover{ color:var(--ink); } .viewtab.is-active{ background:var(--accent); color:#1c2016; } .topbar-right{ display:flex; gap:6px; } .icon-btn{ width:34px; height:34px; display:none; place-items:center; cursor:pointer; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; } .icon-btn svg{ width:19px; height:19px; } /* =============================== STAGE ================================== */ .stage{ grid-area:stage; position:relative; overflow:hidden; background:#161915; } .view{ position:absolute; inset:0; display:none; } .view.is-active{ display:block; } #plan{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; } #plan.is-panning{ cursor:grabbing; } #plan.is-measuring{ cursor:crosshair; } #persp{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; } #persp.is-orbit{ cursor:grabbing; } .cam-bar{ position:absolute; left:14px; top:12px; display:flex; align-items:center; gap:3px; padding:4px 4px 4px 10px; border-radius:10px; background:rgba(18,22,16,.8); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); box-shadow:var(--shadow); flex-wrap:wrap; max-width:calc(100% - 28px); } .cam-lbl{ font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-3); margin-right:4px; } .cam-bar button{ border:0; background:transparent; color:var(--ink-2); cursor:pointer; padding:5px 10px; border-radius:6px; font-size:11.5px; font-weight:550; } .cam-bar button:hover{ background:rgba(255,255,255,.08); color:var(--ink); } .cam-bar button.is-on{ background:var(--accent); color:#1c2016; } .cam-hint{ position:absolute; right:14px; top:16px; font-size:10.5px; color:rgba(255,255,255,.42); letter-spacing:.3px; pointer-events:none; } @media (max-width:560px){ .cam-hint{ display:none; } .cam-bar{ left:10px; top:10px; } } .persp-cap{ position:absolute; left:14px; bottom:14px; max-width:min(460px,62%); padding:9px 13px; border-radius:9px; font-size:11.5px; line-height:1.5; background:rgba(14,17,12,.72); border:1px solid rgba(255,255,255,.09); color:var(--ink-2); backdrop-filter:blur(8px); } .persp-cap b{ color:var(--ink); font-weight:600; } .plan-note{ position:absolute; left:14px; top:12px; max-width:min(420px,58%); padding:7px 12px; border-radius:8px; font-size:11.5px; line-height:1.45; background:rgba(24,28,20,.82); border:1px solid var(--line); border-left:3px solid var(--accent-2); color:var(--ink-2); backdrop-filter:blur(6px); } /* --------------------------- scale bar ---------------------------------- */ .scalebar{ position:absolute; left:16px; bottom:16px; pointer-events:none; } .scalebar-bar{ display:flex; height:7px; border:1px solid #cfd6c2; width:120px; } .scalebar-bar span{ flex:1; } .scalebar-bar span:nth-child(odd){ background:#cfd6c2; } .scalebar-txt{ margin-top:3px; font-size:10.5px; font-family:var(--mono); color:#cfd6c2; letter-spacing:.4px; } /* --------------------------- toolbar ------------------------------------ */ .toolbar{ position:absolute; right:14px; top:12px; display:flex; align-items:center; gap:3px; padding:4px; border-radius:10px; background:rgba(24,28,20,.86); border:1px solid var(--line); backdrop-filter:blur(8px); box-shadow:var(--shadow); } .tool{ min-width:32px; height:30px; padding:0 7px; cursor:pointer; border:0; background:transparent; color:var(--ink-2); border-radius:7px; font-size:14px; display:inline-flex; align-items:center; justify-content:center; gap:5px; } .tool:hover{ background:var(--panel-2); color:var(--ink); } .tool.is-on{ background:var(--accent); color:#1c2016; } .tool-wide{ font-size:11.5px; font-weight:550; padding:0 10px; } .tool-sep{ width:1px; height:18px; background:var(--line); margin:0 3px; } /* ------------------------ measurement HUD ------------------------------- */ .measure-hud{ position:absolute; right:14px; top:56px; width:196px; padding:12px 13px; border-radius:10px; background:rgba(24,28,20,.9); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(8px); } .mh-title{ font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-3); } .mh-big{ font-size:21px; font-weight:600; font-family:var(--mono); margin-top:5px; color:var(--accent); } .mh-sub{ font-size:11.5px; color:var(--ink-2); margin-top:2px; font-family:var(--mono); } .mh-clear{ margin-top:9px; width:100%; padding:5px; cursor:pointer; font-size:11px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; color:var(--ink-2); } .mh-clear:hover{ color:var(--ink); } /* -------------------------- inspector ----------------------------------- */ .inspector{ position:absolute; right:14px; bottom:14px; width:262px; padding:14px 15px 15px; border-radius:11px; background:rgba(26,30,22,.94); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(10px); } .insp-close{ position:absolute; right:8px; top:6px; width:22px; height:22px; cursor:pointer; background:transparent; border:0; color:var(--ink-3); font-size:17px; line-height:1; } .insp-close:hover{ color:var(--ink); } .insp-kind{ font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--accent); } .insp-name{ margin:3px 0 0; font-size:15px; font-weight:600; padding-right:16px; } .insp-bot{ font-size:11.5px; font-style:italic; color:var(--ink-3); margin-top:1px; } .insp-grid{ margin:11px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12px; } .insp-grid dt{ color:var(--ink-3); } .insp-grid dd{ margin:0; text-align:right; font-family:var(--mono); font-size:11.5px; } .insp-note{ margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line-soft); font-size:11px; line-height:1.5; color:var(--ink-3); } /* =============================== PANEL ================================== */ .panel{ grid-area:panel; background:var(--panel); border-left:1px solid var(--line); overflow:hidden; z-index:30; } .panel-scroll{ height:100%; overflow-y:auto; padding:4px 0 28px; } .panel-scroll::-webkit-scrollbar{ width:9px; } .panel-scroll::-webkit-scrollbar-thumb{ background:#3d4536; border-radius:9px; border:2px solid var(--panel); } .grp{ padding:15px 16px 16px; border-bottom:1px solid var(--line-soft); } .grp h2{ margin:0 0 11px; font-size:10.5px; font-weight:650; letter-spacing:1.3px; text-transform:uppercase; color:var(--accent); } .grp-sub{ margin:14px 0 7px; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); font-weight:600; } .grp-sub:first-of-type{ margin-top:0; } /* switches */ .switches{ display:flex; flex-direction:column; gap:1px; margin-bottom:12px; } .sw{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px; color:var(--ink-2); padding:4px 0; user-select:none; } .sw:hover{ color:var(--ink); } .sw input{ position:absolute; opacity:0; width:0; height:0; } .sw span{ width:30px; height:17px; border-radius:9px; background:#1a1e16; border:1px solid var(--line); position:relative; flex:none; transition:background .16s,border-color .16s; } .sw span::after{ content:""; position:absolute; left:2px; top:1.5px; width:12px; height:12px; border-radius:50%; background:#6d7663; transition:transform .16s, background .16s; } .sw input:checked + span{ background:#4d5a3c; border-color:#63734d; } .sw input:checked + span::after{ transform:translateX(13px); background:var(--accent); } .sw input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; } /* rows */ .row{ margin-bottom:14px; } .row:last-child{ margin-bottom:0; } .lbl{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; } .lbl b{ font-family:var(--mono); font-size:11.5px; color:var(--accent); font-weight:600; } select{ width:100%; padding:7px 9px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:12.5px; } select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } input[type=range]{ width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:18px; cursor:pointer; } input[type=range]::-webkit-slider-runnable-track{ height:4px; background:#1a1e16; border-radius:3px; border:1px solid var(--line); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-6.5px; border-radius:50%; background:var(--accent); border:2px solid #262b23; box-shadow:0 1px 4px rgba(0,0,0,.5); } input[type=range]::-moz-range-track{ height:4px; background:#1a1e16; border-radius:3px; border:1px solid var(--line); } input[type=range]::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--accent); border:2px solid #262b23; } .hint{ margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--ink-3); } .hint.warn{ color:#cbb68c; } .hint b{ color:var(--ink-2); } /* segmented buttons */ .segbtns{ display:flex; gap:3px; padding:3px; background:#1a1e16; border:1px solid var(--line); border-radius:8px; } .segbtns button{ flex:1; padding:6px 0; cursor:pointer; border:0; background:transparent; color:var(--ink-2); border-radius:5px; font-size:12px; font-weight:550; } .segbtns button:hover{ color:var(--ink); } .segbtns button.is-on{ background:var(--accent); color:#1c2016; } /* quantities */ .qty{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:12.5px; } .qname{ flex:1; color:var(--ink-2); min-width:0; } .sw-dot{ width:11px; height:11px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.4); } .sw-dot[data-sp=muhly]{ background:#c9a2b6; } .sw-dot[data-sp=yaupon]{ background:#3d5c36; } .sw-dot[data-sp=sage]{ background:#9aa694; } .sw-dot[data-sp=crape]{ background:#5e2438; } .stepper{ display:flex; align-items:center; gap:1px; background:#1a1e16; border:1px solid var(--line); border-radius:7px; padding:2px; } .stepper button{ width:22px; height:21px; cursor:pointer; border:0; background:transparent; color:var(--ink-2); border-radius:4px; font-size:14px; line-height:1; } .stepper button:hover{ background:var(--panel-2); color:var(--ink); } .stepper b{ min-width:22px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--accent); } .qty.is-fixed .fixedval{ font-size:11px; color:var(--ink-3); font-family:var(--mono); } /* crape inputs */ .crapeinputs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 10px; } .ci{ display:flex; align-items:center; gap:6px; } .ci label{ font-size:10.5px; color:var(--ink-3); font-family:var(--mono); flex:none; } .ci input{ width:100%; min-width:0; padding:5px 7px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:11.5px; } .ci input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } /* buttons */ .btnrow{ display:flex; gap:7px; } .btnrow-foot{ padding:15px 16px 0; } .btn{ flex:1; padding:8px 10px; cursor:pointer; border-radius:7px; font-size:12px; font-weight:550; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); } .btn:hover{ background:#39412f; } .btn-sm{ padding:6px 9px; font-size:11.5px; } .btn-ghost{ background:transparent; color:var(--ink-3); } .btn-ghost:hover{ color:var(--ink); background:var(--panel-2); } .btn-danger{ color:#e2a396; border-color:#4d3b34; } .btn-danger:hover{ background:#3d2a25; color:#f0bdb1; } /* tables */ .tbl{ width:100%; border-collapse:collapse; font-size:12px; } .tbl th{ text-align:left; font-weight:600; font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); padding:0 0 6px; border-bottom:1px solid var(--line-soft); } .tbl th:not(:first-child), .tbl td:not(:first-child){ text-align:right; } .tbl td{ padding:6px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2); } .tbl td:not(:first-child){ font-family:var(--mono); font-size:11.5px; } .tbl tr.is-total td{ border-bottom:0; padding-top:9px; color:var(--ink); font-weight:600; } .tbl tr.is-total td:not(:first-child){ color:var(--accent); font-size:13px; } .tbl tr.is-sub td{ color:var(--ink-3); } .tbl .cellpad{ display:flex; align-items:center; gap:7px; } .tbl input.price{ width:66px; padding:3px 6px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:5px; font-family:var(--mono); font-size:11.5px; text-align:right; } .tbl input.price:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } /* spec list */ .spec{ margin:0; padding-left:17px; font-size:11.5px; line-height:1.75; color:var(--ink-2); } .spec li::marker{ color:var(--ink-3); font-size:10px; } .spec li.neg{ color:#cf9a8d; } /* ============================ BUILD GUIDE =============================== */ .view-guide{ overflow:hidden; } .guide-scroll{ position:absolute; inset:0; overflow-y:auto; } .guide-scroll::-webkit-scrollbar{ width:10px; } .guide-scroll::-webkit-scrollbar-thumb{ background:#3d4536; border-radius:9px; border:2px solid #161915; } .guide{ max-width:880px; margin:0 auto; padding:26px 26px 70px; } .guide.guide-wide{ max-width:1500px; } .g-head{ border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px; } .g-head h2{ margin:0; font-size:22px; font-weight:650; letter-spacing:-.2px; } .g-head .g-meta{ margin:5px 0 0; font-size:12.5px; color:var(--ink-3); } .g-heat{ margin:14px 0 0; padding:10px 13px; border-radius:8px; font-size:12.5px; line-height:1.55; background:#3a2b1e; border:1px solid #5c452e; border-left:3px solid var(--accent-2); color:#e8c79c; } .g-heat b{ color:#ffdcae; } .g-prog{ margin:16px 0 0; } .g-prog-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--ink-2); margin-bottom:6px; } .g-prog-top b{ font-family:var(--mono); color:var(--accent); font-size:16px; } .g-prog-bar{ height:9px; border-radius:5px; background:#1a1e16; border:1px solid var(--line); overflow:hidden; } .g-prog-bar span{ display:block; height:100%; background:linear-gradient(90deg,#7f9450,var(--accent)); transition:width .3s; } .g-sec{ margin:30px 0 0; } .g-sec > h3{ margin:0 0 4px; font-size:11px; font-weight:650; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); } .g-sec > .g-lead{ margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.6; } .g-phase{ border:1px solid var(--line); border-radius:11px; background:var(--panel); margin-bottom:14px; overflow:hidden; } .g-phase-hd{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--panel-2); flex-wrap:wrap; } .g-phase-hd .gp-txt{ flex:1; min-width:180px; } .g-phase-hd h4{ margin:0; font-size:14.5px; font-weight:650; } .g-phase-hd .gp-win{ margin:2px 0 0; font-size:11.5px; color:var(--ink-3); } .g-phase.now .g-phase-hd{ border-left:3px solid var(--accent-2); } .g-phase.next .g-phase-hd{ border-left:3px solid var(--accent); } .g-phase.later .g-phase-hd{ border-left:3px solid #5d6a52; } .gp-state{ display:flex; gap:2px; padding:3px; background:#1a1e16; border:1px solid var(--line); border-radius:7px; flex:none; } .gp-state button{ border:0; background:transparent; color:var(--ink-3); cursor:pointer; padding:4px 9px; border-radius:5px; font-size:11px; font-weight:550; white-space:nowrap; } .gp-state button:hover{ color:var(--ink); } .gp-state button.is-on{ background:var(--accent); color:#1c2016; } .gp-state button.is-on[data-s="0"]{ background:#4c5344; color:var(--ink); } .gp-state button.is-on[data-s="1"]{ background:var(--accent-2); color:#20160a; } .g-phase-body{ padding:4px 16px 16px; } .g-summary{ margin:10px 0 4px; font-size:12.5px; color:var(--ink-2); line-height:1.6; font-style:italic; } .g-step{ padding:14px 0 4px; border-top:1px solid var(--line-soft); margin-top:12px; } .g-step:first-of-type{ border-top:0; } .g-step h5{ margin:0 0 7px; font-size:13px; font-weight:600; color:var(--ink); } .g-step p{ margin:0 0 8px; font-size:12.5px; line-height:1.65; color:var(--ink-2); } .g-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; } @media (max-width:700px){ .g-cols{ grid-template-columns:1fr; } } .g-do, .g-dont{ border-radius:8px; padding:10px 12px; } .g-do{ background:#232c1e; border:1px solid #35431f; } .g-dont{ background:#2e2320; border:1px solid #4a3128; } .g-do h6, .g-dont h6{ margin:0 0 6px; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; font-weight:650; } .g-do h6{ color:#a8c983; } .g-dont h6{ color:#e0a294; } .g-do ul, .g-dont ul{ margin:0; padding-left:15px; font-size:12px; line-height:1.6; } .g-do li{ color:#cfdcbb; } .g-dont li{ color:#e3c3ba; } .g-do li::marker, .g-dont li::marker{ font-size:9px; } /* generic guide card */ .g-card{ border:1px solid var(--line); border-radius:11px; background:var(--panel); padding:16px; margin-bottom:14px; } .g-card h4{ margin:0 0 8px; font-size:14px; font-weight:650; } .g-card p{ margin:0 0 10px; font-size:12.5px; line-height:1.65; color:var(--ink-2); } .g-card ul{ margin:0 0 10px; padding-left:16px; font-size:12.5px; line-height:1.7; color:var(--ink-2); } .g-card ul:last-child{ margin-bottom:0; } .g-note{ margin-top:10px; padding:10px 12px; border-radius:8px; font-size:12.5px; line-height:1.6; background:#20261c; border-left:3px solid var(--accent); color:var(--ink-2); } .g-sub{ margin:14px 0 6px; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-3); font-weight:650; } /* interactive checklist */ .g-check{ display:flex; flex-direction:column; } .ck{ display:flex; align-items:flex-start; gap:10px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--ink-2); user-select:none; line-height:1.5; } .ck:hover{ background:var(--panel-2); } .ck input{ position:absolute; opacity:0; width:0; height:0; } .ck .box{ width:16px; height:16px; border-radius:4px; border:1.5px solid #59634c; flex:none; margin-top:1px; position:relative; transition:background .14s, border-color .14s; } .ck input:checked + .box{ background:var(--accent); border-color:var(--accent); } .ck input:checked + .box::after{ content:""; position:absolute; left:4.6px; top:1.2px; width:4px; height:8px; border:solid #1c2016; border-width:0 2px 2px 0; transform:rotate(42deg); } .ck input:focus-visible + .box{ outline:2px solid var(--accent); outline-offset:2px; } .ck .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); min-width:18px; flex:none; margin-top:2px; } .ck.done .t{ text-decoration:line-through; color:var(--ink-3); } .ck .tag{ font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); padding:1px 5px; border-radius:4px; flex:none; margin-top:1px; } /* plant status tracker */ .pstat{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; } .pstat:last-child{ border-bottom:0; } .pstat .pn{ flex:1; min-width:140px; font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:8px; } .pstat .steps{ display:flex; gap:2px; padding:3px; background:#1a1e16; border:1px solid var(--line); border-radius:7px; } .pstat .steps button{ border:0; background:transparent; color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:5px; font-size:10.5px; font-weight:550; white-space:nowrap; } .pstat .steps button:hover{ color:var(--ink); } .pstat .steps button.is-on{ background:var(--accent); color:#1c2016; } .pstat .steps button.is-past{ color:var(--accent); } /* field measurement panel */ .fm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin:12px 0; } .fm{ display:flex; align-items:center; gap:7px; } .fm label{ font-size:11px; color:var(--ink-3); font-family:var(--mono); flex:none; } .fm input{ width:100%; min-width:0; padding:6px 8px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:12px; } .fm input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .fm-status{ font-size:12px; padding:9px 12px; border-radius:8px; margin-top:10px; line-height:1.55; } .fm-status.prov{ background:#3a2b1e; border:1px solid #5c452e; color:#e8c79c; } .fm-status.locked{ background:#232c1e; border:1px solid #35431f; color:#c3d8a4; } /* lighting facts strip */ .g-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:12px 0 4px; } .g-fact{ background:#1e231a; border:1px solid var(--line); border-radius:8px; padding:9px 11px; } .g-fact .fv{ font-family:var(--mono); font-size:16px; font-weight:650; color:var(--accent); } .g-fact .fv.bad{ color:#e79080; } .g-fact .fl{ font-size:10.5px; color:var(--ink-3); margin-top:2px; line-height:1.4; } /* ===================== PLANNER: TODAY / CALENDAR / PLAN / LAWN ========== */ .tabgrp{ display:flex; gap:2px; } .tabsep{ width:1px; align-self:stretch; margin:2px 5px; background:var(--line); flex:none; } .today-asof{ margin-top:12px; font-size:11.5px; color:var(--ink-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .today-asof input{ background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:4px 7px; font-family:var(--mono); font-size:11.5px; margin-left:6px; } .alert{ margin:16px 0 0; padding:11px 14px; border-radius:9px; font-size:12.5px; line-height:1.55; } .alert b{ font-weight:650; } .alert-heat{ background:#3a2b1e; border:1px solid #5c452e; border-left:3px solid var(--accent-2); color:#e8c79c; } .alert-over{ background:#3a2721; border:1px solid #5c3b31; border-left:3px solid var(--danger); color:#efb9ab; } .empty{ padding:16px; border:1px dashed var(--line); border-radius:9px; color:var(--ink-3); font-size:12.5px; text-align:center; } /* --- task card --- */ .tk{ border:1px solid var(--line); border-radius:11px; background:var(--panel); margin-bottom:12px; padding:14px 16px 12px; } .tk.tk-hi{ border-color:#7a5a34; box-shadow:inset 3px 0 0 var(--accent-2); } .tk.st-done{ opacity:.62; } .tk.st-skip{ opacity:.5; } .tk-hd{ display:flex; gap:13px; align-items:flex-start; flex-wrap:wrap; } .tk-date{ flex:none; width:44px; text-align:center; background:#1a1e16; border:1px solid var(--line); border-radius:8px; padding:5px 0 6px; } .tk-dow{ display:block; font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-3); } .tk-dnum{ display:block; font-size:17px; font-weight:650; font-family:var(--mono); color:var(--accent); line-height:1.1; } .tk-mon{ display:block; font-size:9.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px; } .tk-main{ flex:1; min-width:170px; } .tk-kind{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); } .tk-main h4{ margin:2px 0 0; font-size:14px; font-weight:650; line-height:1.35; } .tk-rel{ margin-top:3px; font-size:11px; color:var(--ink-3); } .tk-body{ margin:10px 0 0; font-size:12.5px; line-height:1.65; color:var(--ink-2); } .tk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:11px; } @media (max-width:700px){ .tk-cols{ grid-template-columns:1fr; } } .tk-meta{ margin-top:9px; font-size:11.5px; color:var(--ink-3); line-height:1.55; } .tk-meta b{ color:var(--ink-2); } .tk-heat{ margin-top:10px; padding:8px 11px; border-radius:7px; font-size:11.5px; line-height:1.5; background:#382a1d; border-left:3px solid var(--accent-2); color:#e2c194; } .tk-block{ margin-top:10px; padding:8px 11px; border-radius:7px; font-size:11.5px; background:#33262f; border-left:3px solid #a2678c; color:#ddb6cd; } .stsel{ flex:none; width:126px; padding:6px 8px; border-radius:7px; font-size:11.5px; font-weight:550; background:var(--panel-2); border:1px solid var(--line); cursor:pointer; } .stsel.st-done{ background:#33402a; border-color:#4d6039; color:#c6dba6; } .stsel.st-prog{ background:#3d3324; border-color:#5f4d31; color:#e6c48d; } .stsel.st-wait{ background:#332b3f; border-color:#4b3f5c; color:#c9b7de; } .stsel.st-sched{ background:#26333d; border-color:#374a58; color:#a9c7d9; } .stsel.st-skip{ background:#2a2d27; color:var(--ink-3); } .stsel.st-resched{ background:#3b2f22; border-color:#5b4730; color:#dfb98a; } /* conditions */ .tk-cond{ margin-top:12px; padding:11px 13px; border-radius:9px; border:1px solid var(--line); background:#1d221a; } .tk-cond.is-open{ border-color:#5c452e; background:#2a2419; } .tk-cond.is-met{ border-color:#3f5230; background:#222a1d; } .tk-cond-hd{ font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; font-weight:650; color:var(--accent-2); margin-bottom:8px; } .tk-cond.is-met .tk-cond-hd{ color:#a8c983; } .cnd{ display:flex; gap:9px; align-items:flex-start; padding:5px 0; cursor:pointer; font-size:12px; color:var(--ink-2); } .cnd input{ position:absolute; opacity:0; width:0; height:0; } .cnd .box{ width:15px; height:15px; border-radius:4px; border:1.5px solid #59634c; flex:none; margin-top:1px; position:relative; } .cnd input:checked + .box{ background:var(--accent); border-color:var(--accent); } .cnd input:checked + .box::after{ content:""; position:absolute; left:4.2px; top:1px; width:4px; height:8px; border:solid #1c2016; border-width:0 2px 2px 0; transform:rotate(42deg); } .cnd em{ display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:2px; line-height:1.45; } .tk-fb{ margin-top:9px; padding-top:9px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-3); line-height:1.55; } .tk-fb b{ color:var(--accent-2); } .tk-seq{ margin-top:12px; padding:11px 13px; border-radius:9px; background:#1d2a26; border-left:3px solid #6fc3a8; } .tk-seq b{ font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:#8fd7bf; } .tk-seq ol{ margin:7px 0 0; padding-left:17px; font-size:12px; line-height:1.65; color:var(--ink-2); } .tk-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; } .btn-how{ padding:8px 15px; border-radius:8px; border:1px solid #5f6b45; cursor:pointer; font-size:12px; font-weight:600; background:#39432c; color:var(--accent); } .btn-how:hover{ background:#465234; color:#dbe6b4; } .btn-link, .btn-link-like{ padding:8px 13px; border-radius:8px; border:1px solid var(--line); cursor:pointer; font-size:12px; background:var(--panel-2); color:var(--ink-2); } .btn-link:hover, .btn-link-like:hover{ color:var(--ink); } .tk-rec{ margin-top:12px; } .tk-rec > b{ font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-3); } .rec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-top:7px; } .rec{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--ink-3); } .rec span{ line-height:1.35; } .rec input{ padding:6px 8px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; font-size:12px; width:100%; min-width:0; } .rec input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .rec-inline{ flex-direction:row; align-items:center; gap:8px; } .rec-inline span{ flex:none; } .rec-grow{ flex:1; } .tk-foot{ display:flex; gap:12px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft); flex-wrap:wrap; } /* how-to panel */ .how-wrap{ margin-top:12px; } .ht{ border:1px solid #45503a; border-radius:10px; background:#1c2118; padding:15px 16px; margin-bottom:10px; } .ht h5{ margin:0 0 4px; font-size:14px; font-weight:650; color:var(--accent); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .ht-time{ font-size:11px; font-family:var(--mono); color:var(--ink-3); font-weight:400; } .ht-lead{ font-size:12.5px; color:var(--ink-2); line-height:1.65; margin:0 0 10px; } .ht-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0 4px; } @media (max-width:700px){ .ht-grid{ grid-template-columns:1fr; } } .ht-k{ display:block; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; } .ht-grid p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-2); } .ht-sec{ margin-top:13px; } .ht-sec h6{ margin:0 0 6px; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--accent); font-weight:650; } .ht-sec ul, .ht-sec ol{ margin:0; padding-left:17px; font-size:12.5px; line-height:1.7; color:var(--ink-2); } .ht-sec ol li{ padding-left:2px; } .ht-key{ margin-top:12px; padding:10px 13px; border-radius:8px; background:#2b3340; border-left:3px solid #7fb4d6; color:#c5dcea; font-size:12.5px; line-height:1.6; } .ht-note{ margin-top:11px; padding:10px 13px; border-radius:8px; background:#20261c; border-left:3px solid var(--accent); color:var(--ink-2); font-size:12.5px; line-height:1.6; } .ht-warn{ margin-top:11px; padding:10px 13px; border-radius:8px; background:#3a2721; border-left:3px solid var(--danger); color:#efb9ab; font-size:12.5px; line-height:1.6; } .ht-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:13px; } @media (max-width:700px){ .ht-cols{ grid-template-columns:1fr; } } .ht-bad{ background:#2e2320; border:1px solid #4a3128; border-radius:8px; padding:10px 12px; } .ht-safe{ background:#2b2a1e; border:1px solid #4d4a2b; border-radius:8px; padding:10px 12px; } .ht-bad h6{ color:#e0a294; } .ht-safe h6{ color:#ddd48a; } .ht-bad h6, .ht-safe h6{ margin:0 0 6px; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; font-weight:650; } .ht-bad ul, .ht-safe ul{ margin:0; padding-left:16px; font-size:12px; line-height:1.6; } .ht-bad li{ color:#e3c3ba; } .ht-safe li{ color:#dcd6ab; } .ht-next{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-3); } .ht-next b{ color:var(--ink-2); } .ht-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:10px 0; } .ht-cat{ background:#1e231a; border:1px solid var(--line); border-left-width:3px; border-radius:8px; padding:10px 12px; } .ht-cat b{ font-size:12.5px; } .ht-cat ul{ margin:6px 0 0; padding-left:16px; font-size:11.5px; line-height:1.6; color:var(--ink-3); } /* lawn "what do I do today" card */ .lawncard{ margin:18px 0 0; border:1px solid #4d5a3c; border-radius:12px; background:linear-gradient(160deg,#242c1c,#1e2318); padding:17px 18px; } .lc-tag{ font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--accent); font-weight:650; } .lawncard h3{ margin:4px 0 12px; font-size:17px; font-weight:650; } .lc-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; } @media (max-width:640px){ .lc-grid{ grid-template-columns:1fr; } } .lawncard h6{ margin:12px 0 5px; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; color:var(--accent); font-weight:650; } .lc-grid h6{ margin-top:0; } .lawncard ul, .lawncard ol{ margin:0; padding-left:17px; font-size:12.5px; line-height:1.7; color:var(--ink-2); } .lc-grid p{ margin:0; font-size:13px; color:var(--ink); } .lc-grid p em{ display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:2px; } .lc-next{ margin-top:14px; padding-top:11px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-3); } .lc-next b{ color:var(--ink-2); } .lawncard .btn-how{ margin-top:13px; } /* mini rows */ .mini{ border:1px solid var(--line); border-radius:10px; overflow:hidden; } .mini-row{ display:flex; gap:12px; padding:9px 13px; font-size:12.5px; color:var(--ink-2); border-bottom:1px solid var(--line-soft); align-items:flex-start; } .mini-row:last-child{ border-bottom:0; } .mini-row.st-done{ opacity:.5; } .mini-d{ flex:none; width:74px; font-family:var(--mono); font-size:11px; color:var(--ink-3); padding-top:1px; } .mini-row em{ display:block; font-style:normal; font-size:11px; color:var(--accent-2); margin-top:3px; line-height:1.5; } .tag-heat{ margin-left:auto; flex:none; font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; background:#4a3722; color:#e2c194; padding:1px 6px; border-radius:4px; } .buylist{ margin:0; padding-left:17px; font-size:12.5px; line-height:1.8; color:var(--ink-2); } /* calendar */ .cal-key{ display:flex; gap:13px; flex-wrap:wrap; margin-top:12px; font-size:10.5px; color:var(--ink-3); align-items:center; } .cal-key span{ display:flex; align-items:center; gap:5px; } .k-dot{ width:8px; height:8px; border-radius:2px; display:inline-block; } .k-layout{ background:#9fd6ff; } .k-labor{ background:#d9a05b; } .k-lighting{ background:#f0c274; } .k-lawn{ background:#8fbf6a; } .k-planting{ background:#c9a2b6; } .k-decision{ background:#a2b0d6; } .k-water{ background:#6fb6c3; } .k-mow{ background:#7f9450; } .k-setup{ background:#b9c1ae; } .k-inspect{ background:#c0b48a; } .k-admin{ background:#9a8ad6; } .k-irr{ color:#7fb4d6; } .cal-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:20px; } .cal-m h4{ margin:0 0 8px; font-size:13px; font-weight:650; color:var(--accent); } .cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:3px; } .cal-dow span{ text-align:center; font-size:9.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px; } .cal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .cal-c{ min-height:52px; border:1px solid var(--line-soft); border-radius:5px; padding:3px; background:#1a1e16; overflow:hidden; } .cal-c.cal-pad{ border-color:transparent; background:transparent; } .cal-c.has{ cursor:pointer; background:#20261c; } .cal-c.has:hover{ border-color:var(--accent); } .cal-c.is-today{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } .cal-c.is-irr{ background-image:linear-gradient(135deg,rgba(127,180,214,.13) 25%,transparent 25%,transparent 50%,rgba(127,180,214,.13) 50%,rgba(127,180,214,.13) 75%,transparent 75%); background-size:6px 6px; } .cal-n{ display:block; font-size:9.5px; font-family:var(--mono); color:var(--ink-3); } .cal-c.is-today .cal-n{ color:var(--accent); font-weight:700; } .cal-t{ display:block; font-size:8.5px; line-height:1.25; padding:1px 3px; margin-top:2px; border-radius:3px; background:#2e3527; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cal-t.st-done{ opacity:.45; text-decoration:line-through; } .cal-t.k-lighting{ background:#3d3324; color:#e6c48d; } .cal-t.k-lawn{ background:#2c3a24; color:#bcd18f; } .cal-t.k-labor{ background:#3a2f22; color:#dcbb8e; } .cal-t.k-planting{ background:#3a2b33; color:#dcb6c6; } .cal-t.k-water{ background:#243539; color:#9fc9d2; } .cal-t.k-decision{ background:#2b3040; color:#b7c2e0; } .cal-t.k-mow{ background:#28301f; color:#a8bb84; } .cal-more{ display:block; font-size:8.5px; color:var(--ink-3); padding-left:3px; margin-top:1px; } .mcount{ font-size:10.5px; font-family:var(--mono); color:var(--ink-3); font-weight:400; margin-left:6px; } /* lawn dashboard bits */ .wf-card{ border-left:3px solid var(--accent-2); } .cc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:10px 0; } .cc-cans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin:10px 0; } .xbtn{ width:22px; height:22px; border-radius:5px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-3); cursor:pointer; font-size:13px; line-height:1; } .xbtn:hover{ color:#e79080; border-color:#5c3b31; } .wnote{ width:100%; min-width:80px; padding:4px 7px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:5px; font-size:11.5px; } .log-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:10px; } .toollist{ display:flex; flex-direction:column; } .tool-row{ display:flex; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; } .tool-row:last-child{ border-bottom:0; } .tool-n{ flex:1; min-width:160px; font-size:12.5px; color:var(--ink-2); } .tool-s{ display:flex; gap:2px; padding:2px; background:#1a1e16; border:1px solid var(--line); border-radius:7px; } .tool-s button{ border:0; background:transparent; color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:5px; font-size:10.5px; font-weight:550; white-space:nowrap; } .tool-s button:hover{ color:var(--ink); } .tool-s button.is-on.ts-own{ background:#3f5230; color:#cfe3a8; } .tool-s button.is-on.ts-buy{ background:#4a3722; color:#e2c194; } .tool-s button.is-on.ts-rent{ background:#33405a; color:#b7c9e8; } .tool-s button.is-on.ts-optional{ background:#3a3a3a; color:var(--ink-2); } .gloss{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:12.5px; } @media (max-width:640px){ .gloss{ grid-template-columns:1fr; gap:2px 0; } .gloss dd{ margin-bottom:11px; } } .gloss dt{ font-weight:650; color:var(--accent); white-space:nowrap; } .gloss dd{ margin:0; color:var(--ink-2); line-height:1.6; } /* ---------- audit / provenance badges (items 15, 16, 29) ---------- */ .badge{ display:inline-block; font-size:9px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:4px; white-space:nowrap; vertical-align:middle; } .b-meas{ background:#33402a; color:#c6dba6; } .b-prov{ background:#4a3722; color:#e8c79c; } .b-warn{ background:#3d3324; color:#e6c48d; } .b-bad { background:#4a2d26; color:#f0b5a6; } .dq-note{ display:block; margin-top:3px; font-size:10.5px; color:var(--ink-3); line-height:1.45; } .tbl-audit td:last-child{ text-align:right; } .est-badge{ margin-top:10px; padding:9px 12px; border-radius:8px; font-size:11.5px; line-height:1.55; background:#3a2b1e; border:1px solid #5c452e; border-left:3px solid var(--accent-2); color:#e8c79c; } .est-badge b{ color:#ffdcae; } /* cable headroom bands (item 10) */ .warn-box.band-yellow{ background:#3a3423; border-color:#5c5230; color:#e6dba8 !important; } .warn-box.band-yellow b{ color:#f5eec2; } .warn-box.band-orange{ background:#3d2c1c; border-color:#66492a; color:#f0c79a !important; } .warn-box.band-orange b{ color:#ffdcb0; } .warn-box.band-red{ background:#3a2721; border-color:#5c3b31; color:#efb9ab !important; } .br-serves{ display:block; font-size:10px; color:var(--ink-3); font-family:var(--mono); margin-top:2px; } /* planter measurement rows (item 2) */ .pl-row{ display:grid; grid-template-columns:1fr repeat(3, 96px); gap:9px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line-soft); } .pl-row:last-of-type{ border-bottom:0; } .pl-name{ font-size:12.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:5px; align-items:flex-start; } @media (max-width:640px){ .pl-row{ grid-template-columns:1fr 1fr; } .pl-name{ grid-column:1/-1; } } /* soil temperature season lines (item 13) */ .st-season{ padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; } .st-season:last-of-type{ border-bottom:0; } .st-line{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-2); line-height:1.5; } .st-line.st-none{ color:var(--ink-3); font-style:italic; } .tr-rising{ color:#a8c983; } .tr-falling{ color:#9fc9d2; } .tr-stable{ color:var(--accent-2); } .tr-insufficient{ color:var(--ink-3); } /* lighting mode buttons */ .modebtns{ display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; background:#1a1e16; border:1px solid var(--line); border-radius:8px; } .modebtns button{ padding:6px 4px; cursor:pointer; border:0; background:transparent; color:var(--ink-2); border-radius:5px; font-size:11.5px; font-weight:550; } .modebtns button:hover{ color:var(--ink); } .modebtns button.is-on{ background:var(--accent-2); color:#20160a; } .mode-bar{ position:absolute; left:14px; bottom:96px; display:flex; gap:3px; padding:4px; border-radius:10px; background:rgba(18,22,16,.82); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); box-shadow:var(--shadow); flex-wrap:wrap; } .mode-bar button{ border:0; background:transparent; color:var(--ink-2); cursor:pointer; padding:5px 11px; border-radius:6px; font-size:11.5px; font-weight:550; } .mode-bar button:hover{ background:rgba(255,255,255,.08); color:var(--ink); } .mode-bar button.is-on{ background:var(--accent-2); color:#20160a; } /* owned-kit list */ .kit{ margin:2px 0 14px; } .kit-row{ display:flex; gap:8px; align-items:baseline; font-size:11.5px; padding:3px 0; color:var(--ink-2); } .kit-qty{ font-family:var(--mono); color:var(--accent-2); font-weight:650; min-width:38px; flex:none; } .kit-name{ flex:1; min-width:0; } .kit-tag{ font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; padding:1px 5px; border-radius:4px; flex:none; } .kit-tag.own{ background:#33402a; color:#bcd18f; } .kit-tag.opt{ background:#3d3324; color:#d9b177; } /* load bar */ .loadbar{ height:7px; border-radius:4px; background:#1a1e16; border:1px solid var(--line); overflow:hidden; } .loadbar span{ display:block; height:100%; background:linear-gradient(90deg,#d9a05b,#f0c274); } .loadcap{ display:block; margin-top:5px; font-size:10.5px; color:var(--ink-3); line-height:1.45; } .tbl-load td.good{ color:#a8c983; } .tbl-load td.bad{ color:#e79080; } .warn-box{ margin-top:9px; padding:8px 10px; border-radius:7px; background:#3a2721; border:1px solid #5c3b31; color:#efb9ab !important; line-height:1.5; } .warn-box b{ color:#ffd3c6; } /* project phases */ .phases{ display:flex; flex-direction:column; gap:9px; } .phase{ border-left:3px solid var(--line); padding:2px 0 2px 11px; } .phase.now{ border-left-color:var(--accent-2); } .phase.next{ border-left-color:var(--accent); } .phase.later{ border-left-color:#5d6a52; } .phase h3{ margin:0; font-size:12px; font-weight:650; color:var(--ink); } .phase p{ margin:1px 0 5px; font-size:10.5px; color:var(--ink-3); font-style:italic; } .phase ul{ margin:0; padding-left:15px; font-size:11.5px; line-height:1.65; color:var(--ink-2); } .phase ul li::marker{ color:var(--ink-3); font-size:9px; } .panel-scrim{ display:none; } /* ============================= RESPONSIVE =============================== */ @media (max-width: 1080px){ :root{ --panel-w:300px; } } @media (max-width: 860px){ .app{ grid-template-columns:1fr; grid-template-areas:"top" "stage"; } .icon-btn{ display:grid; } .viewtabs{ margin-left:auto; } .brand-text p{ display:none; } .panel{ position:fixed; top:0; right:0; bottom:0; width:min(340px, 88vw); transform:translateX(102%); transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:-14px 0 40px rgba(0,0,0,.5); z-index:60; } .app.panel-open .panel{ transform:translateX(0); } .panel-scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .26s; z-index:55; } .app.panel-open .panel-scrim{ opacity:1; pointer-events:auto; } .inspector{ width:min(262px, calc(100vw - 28px)); } } @media (max-width: 700px){ .brand-text{ display:none; } .viewtab .t-long{ display:none; } .viewtab .t-short{ display:inline; } } @media (max-width: 560px){ :root{ --top-h:52px; } .topbar{ gap:10px; padding:0 10px; } .brand-text h1{ font-size:13px; } .viewtab{ padding:6px 10px; font-size:11.5px; } .guide{ padding:18px 14px 60px; } .g-head h2{ font-size:18px; } .g-phase-hd{ padding:12px; } .gp-state button{ padding:4px 7px; font-size:10.5px; } .pstat .steps button{ padding:4px 6px; font-size:10px; } .toolbar{ right:10px; top:10px; } .tool-wide span{ display:none; } .plan-note{ left:10px; right:auto; max-width:calc(100vw - 130px); font-size:10.5px; padding:6px 9px; } .measure-hud{ right:10px; top:50px; width:172px; } .inspector{ left:10px; right:10px; width:auto; bottom:10px; } .insp-grid{ grid-template-columns:auto 1fr; font-size:11.5px; } .scalebar{ left:12px; bottom:12px; } .persp-cap{ left:10px; right:10px; bottom:10px; max-width:none; font-size:10.5px; } } @media (max-width: 420px){ .brand-mark{ display:none; } }