/* Direction: warm interior studio — beige paper, terracotta, olive, charcoal, a serif display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5eee3;
  --surface: #fffdf9;
  --surface-2: #efe5d5;
  --border: #e2d6c3;
  --border-strong: #b3aaa1;
  --ink: #2d2a26;
  --muted: #6b6258;
  --accent: #b0502d;
  --accent-hover: #964426;
  --accent-ink: #ffffff;
  --accent-text: #9a4526;
  --accent-strong: #954426;
  --accent-soft: #f3dccd;
  --accent-border: #d6a791;
  --success: #5b6b2e;
  --success-ink: #ffffff;
  --success-soft: #e3decd;
  --success-strong: #54622a;
  --warning: #a66a12;
  --warning-ink: #ffffff;
  --warning-soft: #ecdeca;
  --warning-strong: #82530f;
  --danger: #a8372b;
  --danger-ink: #ffffff;
  --danger-soft: #ecd8cd;
  --danger-strong: #a8372b;
  --chart-1: #b0502d;
  --chart-2: #978612;
  --chart-3: #036b45;
  --chart-4: #1f93b1;
  --chart-5: #4b4aa0;
  --chart-6: #bd65a2;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --shadow-card: 0 1px 2px rgba(60, 40, 20, 0.05), 0 8px 24px -12px rgba(60, 40, 20, 0.14);
  --x-char: #2f2b27;
  --x-on-dark: #f6efe4;
  --x-on-photo: #ffffff;
  --x-paper: #ffffff;
  --x-paper-ink: #2d2a26;
  --x-paper-muted: #6b6258;
  --x-paper-line: #e2d6c3;
  --x-c1: #b0502d;
  --x-c2: #6b7a3a;
  --x-c3: #d9a860;
  --x-c4: #3d3833;
  --x-c5: #8d5b46;
  --x-c6: #a9b383;
  --x-c7: #cf9580;
  --x-c8: #9d9386;
  --x-draft: #9d9386;
  --x-sent: #d9a043;
  --x-approved: #6b7a3a;
  --x-rejected: #b8402f;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #120804;
  --surface: #2a211d;
  --surface-2: #1e1411;
  --border: #332b27;
  --border-strong: #59524f;
  --ink: #f5eee3;
  --muted: #9a928a;
  --accent: #b0502d;
  --accent-hover: #bc6a4d;
  --accent-ink: #ffffff;
  --accent-text: #c1775b;
  --accent-strong: #c1775b;
  --accent-soft: #35180d;
  --accent-border: #592816;
  --success: #5b6b2e;
  --success-ink: #ffffff;
  --success-soft: #221e0d;
  --success-strong: #7f8c5c;
  --warning: #a66a12;
  --warning-ink: #ffffff;
  --warning-soft: #331e07;
  --warning-strong: #b48136;
  --danger: #a8372b;
  --danger-ink: #ffffff;
  --danger-soft: #33120d;
  --danger-strong: #c07067;
  --chart-1: #b0502d;
  --chart-2: #9d8c1d;
  --chart-3: #069863;
  --chart-4: #1f93b1;
  --chart-5: #7175ce;
  --chart-6: #bd65a2;
}

/* DesignCost Pro — app-specific styling */
.side-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: 999px; color: color-mix(in srgb, var(--x-on-dark) 82%, transparent); font-weight: 500; transition: background .15s, color .15s; }
.side-link:hover { background: color-mix(in srgb, var(--x-on-dark) 12%, transparent); color: var(--x-on-dark); }
.side-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.side-link:focus-visible { outline: 2px solid var(--x-c3); outline-offset: 2px; }

.top-link { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--ink); }
.top-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; flex: none; }
.dot-draft { background: var(--x-draft); }
.dot-sent { background: var(--x-sent); }
.dot-approved { background: var(--x-approved); }
.dot-rejected { background: var(--x-rejected); }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--ink); white-space: nowrap; }

.stat-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; flex: none; }
.tint-1 { background: color-mix(in srgb, var(--x-c1) 16%, transparent); color: var(--accent-text); }
.tint-2 { background: color-mix(in srgb, var(--x-c2) 20%, transparent); color: var(--success); }
.tint-3 { background: color-mix(in srgb, var(--x-c3) 28%, transparent); color: var(--warning); }
.tint-4 { background: color-mix(in srgb, var(--x-c4) 12%, transparent); color: var(--ink); }

.donut { position: relative; width: 11rem; height: 11rem; border-radius: 999px; flex: none; }
.donut::after { content: ""; position: absolute; inset: 1.9rem; border-radius: 999px; background: var(--surface); }
.donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }

.bar-track { height: .6rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transform-origin: left; animation: grow-x .7s ease-out both; }
.col-fill { width: 100%; border-radius: 10px 10px 4px 4px; transform-origin: bottom; animation: grow-y .7s ease-out both; }
@keyframes grow-x { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
html.reduced-motion .bar-fill, html.reduced-motion .col-fill { animation: none; }

.room-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; border: 2px solid var(--border); border-radius: 18px; background: var(--surface); cursor: pointer; text-align: center; font-weight: 600; font-size: .875rem; transition: border-color .15s, background .15s, transform .15s; }
.room-pick:hover { border-color: var(--accent); transform: translateY(-2px); }
input:checked + .room-pick { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong, var(--accent-text)); }
input:focus-visible + .room-pick { outline: 3px solid var(--accent); outline-offset: 2px; }

.line-row { border: 1px solid var(--border); border-radius: 16px; padding: .75rem; background: var(--surface); }
.line-row:focus-within { border-color: var(--accent); }
.mini-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; font-weight: 600; }
.line-row .input, .line-row .select { padding: .5rem .7rem; min-height: 0; }

.doc { background: var(--x-paper); color: var(--x-paper-ink); }
.doc .doc-muted { color: var(--x-paper-muted); }
.doc .doc-rule { border-color: var(--x-paper-line); }
.doc table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.doc th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--x-paper-muted); padding: .5rem .6rem; border-bottom: 2px solid var(--x-paper-ink); }
.doc td { padding: .55rem .6rem; border-bottom: 1px solid var(--x-paper-line); vertical-align: top; }
.doc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hero-band { background: var(--x-char); color: var(--x-on-dark); border-radius: var(--radius-card); position: relative; overflow: hidden; }
.hero-band::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 14rem; height: 14rem; border-radius: 999px; background: color-mix(in srgb, var(--x-c1) 55%, transparent); }
.hero-band > * { position: relative; z-index: 1; }

.rise { animation: rise .5s ease-out both; }
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
html.reduced-motion .rise { animation: none; }

@media print {
  .no-print { display: none !important; }
  body { background: var(--x-paper) !important; }
  .print-shell { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .doc { box-shadow: none !important; border: 0 !important; }
  @page { margin: 14mm; }
}