/* ==========================================
Architectural Program Generator — Stylesheet
Typography: Gibson (commercial, if locally installed or via Adobe Fonts)
→ Cabin (free alternative, loaded from Google Fonts)
→ system fallback
========================================== */
:root {
color-scheme: light dark;
/* Surface */
--bg: #fafaf9;
--surface: #ffffff;
--surface-subtle: #f6f6f4;
--surface-alt: #f3f3f1;
/* Text */
--text: #111111;
--text-secondary: #555555;
--text-muted: #8a8a85;
--text-inverse: #ffffff;
/* Lines */
--line: #e7e5e0;
--line-strong: #cfccc5;
/* Accent (architectural ink-on-paper) */
--ink: #1a1a1a;
--ink-hover: #000000;
/* Category palette — firm programming palette */
--public: #a9c5de; /* sky blue */
--public-soft: #dde6ea; /* pale blue-white */
--private: #bdd8c9; /* mint */
--private-soft: #d6ddb5; /* sage */
--service: #9a9c9a; /* gray */
--service-soft: #c9cbc9;
--outdoor: #c9d634; /* chartreuse */
--outdoor-soft: #a0a83f; /* olive */
/* Shadows */
--shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
--shadow-md: 0 4px 16px rgba(17, 17, 17, 0.06);
--shadow-lg: 0 12px 40px rgba(17, 17, 17, 0.08);
/* Radii */
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 10px;
/* Typography — Canada Type Gibson (via Adobe Fonts), Cabin free fallback */
--font-sans: "canada-type-gibson", "Gibson", "Cabin",
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur: 140ms;
}
/* Dark theme — opt-in via [data-theme="dark"] on */
html[data-theme="dark"] {
--bg: #0f1012;
--surface: #17181b;
--surface-subtle: #1c1d21;
--surface-alt: #212227;
--text: #f0eee8;
--text-secondary: #b5b2aa;
--text-muted: #7d7a72;
--text-inverse: #0f1012;
--line: #2a2b30;
--line-strong: #3a3b40;
--ink: #f0eee8;
--ink-hover: #ffffff;
--public: #5d88a8;
--public-soft: #2b3d4b;
--private: #5a9076;
--private-soft: #263a31;
--service: #5d5c58;
--service-soft: #32312e;
--outdoor: #a7b12a;
--outdoor-soft: #4a4f1d;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] *::selection { background: #f0eee8; color: #0f1012; }
html[data-theme="dark"] .btn-primary { color: #0f1012; }
html[data-theme="dark"] .btn-primary:hover { background: #ffffff; }
html[data-theme="dark"] .totals-row.gross-row td { background: #f0eee8; color: #0f1012; }
html[data-theme="dark"] .totals-row.outdoor-row td { background: var(--outdoor); color: #0f1012; }
html[data-theme="dark"] .unit-btn.active { color: #0f1012; }
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .cell-input:focus,
html[data-theme="dark"] .cell-select:focus,
html[data-theme="dark"] #auth-form input[type="password"]:focus {
box-shadow: 0 0 0 3px rgba(240, 238, 232, 0.12);
}
html[data-theme="dark"] .cell-select {
background-image: url("data:image/svg+xml;utf8,");
}
* { box-sizing: border-box; }
*::selection { background: #1a1a1a; color: #fff; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "ss02", "kern";
letter-spacing: -0.005em;
}
.hidden { display: none !important; }
/* ---------- Layout ---------- */
#app { min-height: 100vh; }
.view { padding: 56px 24px 96px; }
.container {
max-width: 760px;
margin: 0 auto;
}
.container.wide { max-width: 1120px; }
.container.narrow { max-width: 420px; }
.input-controls {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 4px;
}
.input-controls .field-label { margin-bottom: 8px; }
/* Password view */
.auth-card {
margin-top: 80px;
padding: 32px 32px 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.auth-card h1 { margin-bottom: 6px; font-size: 20px; }
.auth-sub {
margin: 0 0 24px;
color: var(--text-secondary);
font-size: 13.5px;
}
#auth-form input[type="password"] {
width: 100%;
padding: 10px 12px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
outline: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#auth-form input[type="password"]:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
.top-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
/* ---------- Typography ---------- */
h1 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 28px;
color: var(--text);
}
.field-label,
.control-label {
display: block;
font-size: 10.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 500;
}
/* ---------- Input view ---------- */
#input-view .container {
padding-top: 40px;
}
textarea {
width: 100%;
padding: 14px 16px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
resize: vertical;
outline: none;
min-height: 200px;
line-height: 1.55;
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
box-shadow: var(--shadow-sm);
}
textarea:hover { border-color: #b8b5ae; }
textarea:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
textarea::placeholder { color: var(--text-muted); }
.button-row {
display: flex;
gap: 10px;
margin-top: 16px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: var(--radius);
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
box-shadow: var(--shadow-sm);
user-select: none;
}
.btn:hover { background: var(--surface-subtle); border-color: #b8b5ae; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
background: var(--ink);
color: var(--text-inverse);
border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-secondary { background: var(--surface); }
.btn-outline { background: var(--surface); }
.btn-ghost {
border-color: transparent;
background: transparent;
color: var(--text-secondary);
padding: 6px 10px;
box-shadow: none;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-alt); }
/* ---------- Loading / error ---------- */
.loading {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
color: var(--text-secondary);
font-size: 13px;
}
.spinner {
width: 14px; height: 14px;
border: 2px solid var(--line);
border-top-color: var(--ink);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error {
margin-top: 16px;
padding: 12px 14px;
border: 1px solid #f3c6c6;
background: #fcf3f3;
color: #8a2a2a;
border-radius: var(--radius);
font-size: 13px;
line-height: 1.5;
}
/* ---------- Tabs ---------- */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.tab {
position: relative;
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 400;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
margin-bottom: -1px;
letter-spacing: -0.003em;
transition: color var(--dur) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); font-weight: 500; }
.tab.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--ink);
border-radius: 2px 2px 0 0;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 160ms var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* ---------- Controls ---------- */
.controls {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 28px;
margin-bottom: 20px;
}
@media (max-width: 720px) {
.controls { grid-template-columns: 1fr; }
}
.control-group { display: flex; flex-direction: column; }
.slider-group { min-width: 220px; max-width: 420px; }
.slider-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 4px 6px 0;
}
.slider-wrap input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: var(--line);
border-radius: 4px;
outline: none;
cursor: pointer;
}
.slider-wrap input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--ink);
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--ink), var(--shadow-sm);
cursor: grab;
transition: transform var(--dur) var(--ease);
}
.slider-wrap input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.slider-wrap input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--ink);
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--ink);
cursor: grab;
}
#circulation-value {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-secondary);
min-width: 48px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.unit-toggle {
display: inline-flex;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.unit-btn {
padding: 7px 14px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
background: var(--surface);
color: var(--text-secondary);
border: none;
cursor: pointer;
min-width: 40px;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.unit-btn:hover { background: var(--surface-subtle); color: var(--text); }
.unit-btn.active {
background: var(--ink);
color: var(--text-inverse);
}
.export-group {
display: flex;
flex-direction: row;
gap: 8px;
justify-self: end;
}
/* ---------- Program Table ---------- */
.table-wrap {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-md);
}
#program-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
#program-table thead th {
text-align: left;
font-size: 10.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
padding: 14px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface);
white-space: nowrap;
}
#program-table td {
padding: 6px 12px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
#program-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.category-header td {
background: var(--surface-alt);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-secondary);
padding: 8px 14px;
}
.room-row td { padding: 5px 12px; }
.room-row:hover { background: var(--surface-subtle); }
.cell-input {
width: 100%;
padding: 7px 10px;
font-family: var(--font-sans);
font-size: 13px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
outline: none;
text-transform: uppercase;
letter-spacing: 0.005em;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cell-input:hover { border-color: var(--line); background: var(--surface); }
.cell-input:focus {
border-color: var(--ink);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(17,17,17,0.06);
}
.cell-input.num {
text-transform: none;
font-variant-numeric: tabular-nums;
max-width: 86px;
text-align: left;
}
.cell-select {
padding: 7px 28px 7px 10px;
font-family: var(--font-sans);
font-size: 13px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent url("data:image/svg+xml;utf8,") no-repeat right 10px center;
color: var(--text);
outline: none;
min-width: 120px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cell-select:hover { border-color: var(--line); background-color: var(--surface); }
.cell-select:focus {
border-color: var(--ink);
background-color: var(--surface);
box-shadow: 0 0 0 3px rgba(17,17,17,0.06);
}
.cell-total,
.cell-total-m {
white-space: nowrap;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* Unit-based emphasis: active unit = primary text, other unit = muted */
#program-table[data-unit="SF"] .cell-total { color: var(--text); }
#program-table[data-unit="SF"] .cell-total-m { color: var(--text-muted); }
#program-table[data-unit="m2"] .cell-total { color: var(--text-muted); }
#program-table[data-unit="m2"] .cell-total-m { color: var(--text); }
/* Header emphasis follows the same rule */
#program-table[data-unit="SF"] .total-sf-header { color: var(--text); }
#program-table[data-unit="SF"] .total-m-header { color: var(--text-muted); }
#program-table[data-unit="m2"] .total-sf-header { color: var(--text-muted); }
#program-table[data-unit="m2"] .total-m-header { color: var(--text); }
/* Footer totals rows — dim the inactive unit in the plain (net) row.
Gross (black) and Outdoor (green) rows keep both bright for contrast. */
#program-table[data-unit="m2"] .totals-row:not(.gross-row):not(.outdoor-row) .tot-sf {
color: var(--text-muted);
}
#program-table[data-unit="SF"] .totals-row:not(.gross-row):not(.outdoor-row) .tot-m {
color: var(--text-muted);
}
/* In the coloured gross/outdoor rows, the inactive unit gets a softer tone */
#program-table[data-unit="m2"] .totals-row.gross-row .tot-sf { opacity: 0.55; }
#program-table[data-unit="SF"] .totals-row.gross-row .tot-m { opacity: 0.55; }
#program-table[data-unit="m2"] .totals-row.outdoor-row .tot-sf { opacity: 0.55; }
#program-table[data-unit="SF"] .totals-row.outdoor-row .tot-m { opacity: 0.55; }
.cell-delete { text-align: right; padding-right: 10px; }
.delete-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm);
line-height: 1;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.delete-btn:hover { color: #c74545; background: #fbe9e9; }
.totals-row td {
padding: 12px 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.totals-row.gross-row td {
background: var(--ink);
color: var(--text-inverse);
font-weight: 500;
}
.totals-row.outdoor-row td {
background: var(--outdoor);
color: #1f1f1f;
font-weight: 500;
}
.add-room {
margin: 10px 12px;
font-weight: 400;
color: var(--text-secondary);
}
/* ---------- Area Diagram ---------- */
.diagram-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.legend {
display: flex;
gap: 20px;
margin-bottom: 28px;
font-size: 12px;
color: var(--text-secondary);
padding: 0 4px;
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.swatch {
width: 14px; height: 14px;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.swatch.public { background: var(--public); }
.swatch.private { background: var(--private); }
.swatch.service { background: var(--service); }
.swatch.outdoor { background: var(--outdoor); }
#diagram-container {
background: var(--surface);
padding: 32px 28px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.diagram-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 56px;
align-items: start;
}
@media (max-width: 720px) {
.diagram-grid { grid-template-columns: 1fr; gap: 24px; }
}
.diagram-room {
display: flex;
flex-direction: column;
break-inside: avoid;
min-height: 70px;
}
.diagram-room-label {
font-size: 12.5px;
color: var(--text);
margin-bottom: 10px;
font-weight: 500;
letter-spacing: -0.005em;
}
.diagram-boxes {
display: flex;
align-items: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.diagram-box {
background: var(--service);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 2px;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.diagram-box.public { background: var(--public); border-color: rgba(70, 110, 140, 0.22); }
.diagram-box.private { background: var(--private); border-color: rgba(70, 130, 95, 0.22); }
.diagram-box.service { background: var(--service); border-color: rgba(100, 100, 95, 0.22); }
.diagram-box.outdoor { background: var(--outdoor); border-color: rgba(130, 145, 35, 0.5); }
.diagram-area {
font-size: 11px;
color: var(--text-muted);
margin-left: 6px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
align-self: flex-end;
padding-bottom: 2px;
}
.diagram-row-inner {
display: flex;
align-items: flex-end;
gap: 4px;
}
/* ---------- Adjacency diagram ---------- */
#adjacency-container {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 20px;
}
.adjacency-legend {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 16px;
}
.legend-links {
display: flex;
gap: 14px;
font-size: 12px;
color: var(--text-muted);
align-items: center;
}
.link-sample {
display: inline-block;
width: 26px;
height: 2px;
margin-right: 4px;
background: var(--text-secondary);
vertical-align: middle;
}
.link-sample.essential { height: 2.5px; background: #1a1a1a; }
.link-sample.preferred { height: 1.75px; background: #666; }
.link-sample.nice { height: 1px; background: #aaa; }
.adjacency-stage {
position: relative;
width: 100%;
height: 520px;
background: var(--surface-subtle);
border-radius: var(--radius);
overflow: hidden;
}
.adjacency-stage svg { width: 100%; height: 100%; display: block; }
.adjacency-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 13px;
text-align: center;
padding: 24px;
}
.adj-link { stroke-linecap: round; transition: stroke-opacity var(--dur) var(--ease); }
.adj-link.essential { stroke: #1a1a1a; stroke-width: 2.5; stroke-opacity: 0.85; }
.adj-link.preferred { stroke: #666; stroke-width: 1.75; stroke-opacity: 0.7; }
.adj-link.nice { stroke: #aaa; stroke-width: 1; stroke-opacity: 0.55; }
.adj-node-group { cursor: grab; }
.adj-node-group.dragging { cursor: grabbing; }
.adj-node-group.faded { opacity: 0.25; }
.adj-node {
stroke: rgba(0,0,0,0.12);
stroke-width: 1;
transition: stroke-width var(--dur) var(--ease);
}
.adj-node-group.active .adj-node { stroke: var(--ink); stroke-width: 2; }
.adj-label {
font-family: var(--font-sans);
font-size: 11px;
fill: var(--text);
pointer-events: none;
text-anchor: middle;
font-weight: 500;
}
.adj-label-shadow {
fill: var(--surface);
stroke: var(--surface);
stroke-width: 3;
paint-order: stroke fill;
}
/* ---------- Massing ---------- */
.massing-container {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 24px;
}
.massing-stage {
position: relative;
width: 100%;
min-height: 420px;
display: flex;
justify-content: center;
align-items: center;
}
.massing-stage svg {
max-width: 100%;
height: auto;
display: block;
}
.mass-cell {
stroke: rgba(0,0,0,0.18);
stroke-width: 0.75;
}
.mass-cell.public { fill: var(--public); }
.mass-cell.private { fill: var(--private); }
.mass-cell.service { fill: var(--service); }
.mass-cell.outdoor { fill: var(--outdoor); }
.mass-cell.circ { fill: var(--surface-alt); stroke-dasharray: 3 2; }
.mass-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--text);
pointer-events: none;
font-weight: 500;
}
.mass-sublabel {
font-family: var(--font-sans);
font-size: 9px;
fill: var(--text-muted);
pointer-events: none;
}
.mass-zone-label {
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--text-muted);
pointer-events: none;
}
/* ---------- App bar (global header) ---------- */
.app-bar {
position: sticky;
top: 0;
z-index: 10;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
-webkit-backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--line);
}
.app-bar-inner {
max-width: 1120px;
margin: 0 auto;
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.app-bar-title {
font-size: 11px;
letter-spacing: 0.18em;
font-weight: 500;
color: var(--text-secondary);
}
.app-bar-actions {
display: flex;
gap: 4px;
align-items: center;
}
.btn.small {
padding: 6px 10px;
font-size: 12px;
}
.icon-btn {
min-width: 32px;
padding: 6px 10px;
}
#theme-icon {
font-size: 14px;
line-height: 1;
display: inline-block;
}
/* ---------- Project info panel ---------- */
.project-info {
margin-bottom: 18px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.project-info summary {
cursor: pointer;
font-size: 13px;
color: var(--text);
font-weight: 500;
list-style: none;
position: relative;
padding-left: 18px;
user-select: none;
}
.project-info summary::-webkit-details-marker { display: none; }
.project-info summary::before {
content: "▸";
position: absolute;
left: 0; top: 0;
font-size: 10px;
color: var(--text-muted);
transition: transform var(--dur) var(--ease);
}
.project-info[open] summary::before { transform: rotate(90deg); }
.project-info .info-hint {
font-weight: 400;
color: var(--text-muted);
font-size: 12px;
margin-left: 6px;
}
.project-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-top: 14px;
}
.project-info-grid .field { display: flex; flex-direction: column; }
.project-info-grid input {
padding: 8px 10px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
outline: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-info-grid input:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}
/* ---------- Refine command bar ---------- */
.refine-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.refine-bar:focus-within {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}
.refine-icon {
color: var(--text-muted);
font-size: 15px;
line-height: 1;
padding: 0 2px;
}
#refine-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-sans);
font-size: 13.5px;
color: var(--text);
padding: 6px 0;
letter-spacing: -0.003em;
}
#refine-input::placeholder { color: var(--text-muted); }
/* ---------- Code results ---------- */
.code-results {
margin-top: 16px;
padding: 14px 16px;
background: var(--surface-subtle);
border: 1px solid var(--line);
border-radius: var(--radius);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.code-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.code-stat .code-label {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
}
.code-stat .code-value {
font-size: 18px;
font-variant-numeric: tabular-nums;
color: var(--text);
font-weight: 500;
}
.code-stat .code-sub {
font-size: 11px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.code-stat.warn .code-value { color: #c74545; }
.code-stat.ok .code-value { color: #3f7d4a; }
/* Save-toast / save indicator */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(30px);
background: var(--ink);
color: var(--text-inverse);
padding: 10px 18px;
border-radius: var(--radius);
font-size: 13px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity 180ms var(--ease), transform 180ms var(--ease);
z-index: 50;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---------- Print stylesheet ---------- */
@media print {
@page {
size: letter landscape;
margin: 0.5in;
}
html, body { background: #fff !important; color: #000 !important; }
.app-bar, .tabs, .controls, .add-room, .project-info, #new-brief-btn,
.export-group, .diagram-toolbar, #auth-view, #input-view {
display: none !important;
}
#output-view, .container.wide { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.tab-panel { display: block !important; page-break-before: always; }
.tab-panel:first-of-type { page-break-before: auto; }
.table-wrap { box-shadow: none !important; border-color: #aaa !important; }
#program-table { font-size: 10pt !important; }
#program-table thead th { color: #333 !important; }
.room-row:hover { background: none !important; }
.totals-row.gross-row td { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.totals-row.outdoor-row td { background: #c9d632 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.diagram-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}