:root {
  color: #17271f;
  background: #edf4f0;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #edf4f0 0%, #f7f9f1 54%, #dce9e5 100%);
}

button { font: inherit; }

.shell { width: min(1420px, 100%); margin: 0 auto; padding: 30px 38px 70px; }
.loading { min-height: 70vh; display: grid; place-items: center; color: #537061; font-weight: 600; }
.sign-in { width: min(520px, 100%); margin: 15vh auto; padding: 44px; border-top: 8px solid #35634a; background: #fff; box-shadow: 0 18px 60px rgba(27, 68, 51, 0.16); }
.sign-in h1, .topbar h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 5vw, 58px); font-weight: 500; }
.sign-in > p:not(.eyebrow):not(.error) { margin: 10px 0 28px; color: #607269; font-size: 18px; }
.eyebrow, .section-label, .status { margin: 0 0 8px; color: #537061; font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 20px 0 26px; border-bottom: 1px solid #b7cec1; }
.account-menu { display: flex; align-items: center; gap: 16px; color: #436454; font-size: 14px; }
.tabs { display: flex; gap: 5px; overflow-x: auto; padding: 22px 0 26px; border-bottom: 1px solid #cdded4; }
.tab, .quiet { border: 0; background: transparent; color: #527060; cursor: pointer; }
.tab { padding: 10px 14px; font-weight: 700; white-space: nowrap; }
.tab.active { color: #173d2b; background: #cbe3d5; }
.quiet { text-decoration: underline; padding: 6px; }
.view { display: none; padding-top: 30px; }
.view.active { display: block; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #b8cec1; border: 1px solid #b8cec1; }
.metric { min-height: 118px; display: flex; flex-direction: column; justify-content: end; padding: 20px; background: #fbfdf9; }
.metric strong { color: #173d2b; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; line-height: 1; }
.metric span { margin-top: 10px; color: #607269; font-size: 13px; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 34px; }
.panel { padding-top: 8px; }
.panel h2, .view-heading h2, .gallery-heading { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 500; }
.stack { border-top: 1px solid #cbdcd1; }
.task, .milestone, .decision { padding: 16px 0; border-bottom: 1px solid #cbdcd1; }
h3 { margin: 0; font-size: 15px; line-height: 1.45; }
.meta { margin: 7px 0 0; color: #698077; font-size: 12px; line-height: 1.4; }
.view-heading { margin-bottom: 20px; }
.money-metrics { grid-template-columns: repeat(4, 1fr); margin-bottom: 30px; }
.money-metrics .metric strong { font-size: 22px; }
.table-wrap { overflow-x: auto; border-top: 2px solid #35634a; }
table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.78); font-size: 13px; }
th, td { padding: 13px 12px; border-bottom: 1px solid #d6e2db; text-align: left; vertical-align: top; }
th { color: #527060; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
td:nth-child(4) { color: #173d2b; font-weight: 700; white-space: nowrap; }
.decision-list { max-width: 920px; border-top: 2px solid #35634a; }
.decision h3 { font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; }
.decision > p:last-child { max-width: 760px; color: #465c50; line-height: 1.55; }
.reference-list { border-top: 1px solid #cbdcd1; }
.reference-list p { margin: 0; padding: 12px 0; border-bottom: 1px solid #cbdcd1; color: #385649; }
.gallery-heading { margin-top: 42px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.gallery figure { margin: 0; background: #fff; border: 1px solid #cbdcd1; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #dce9e5; }
.gallery figcaption { min-height: 58px; padding: 11px; color: #4d685a; font-size: 12px; line-height: 1.35; }
button:not(.tab):not(.quiet) { min-height: 44px; border: 0; padding: 0 18px; color: #fff; background: #35634a; cursor: pointer; font-weight: 700; }
button:not(.tab):not(.quiet):hover:not(:disabled) { background: #214a34; }
button:disabled { opacity: 0.65; cursor: wait; }
.error { color: #a1342d; }
.empty { color: #698077; font-style: italic; }

@media (max-width: 780px) {
  .shell { padding: 20px; }
  .topbar { align-items: start; flex-direction: column; }
  .account-menu { width: 100%; justify-content: space-between; }
  #user-name { overflow-wrap: anywhere; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 16px 0 20px; }
  .tab { width: 100%; min-height: 44px; padding: 8px 4px; font-size: 13px; }
  .view { padding-top: 24px; }
  .metrics, .money-metrics { grid-template-columns: repeat(2, 1fr); }
  .two-column { grid-template-columns: 1fr; gap: 26px; }
  .floorplans { grid-template-columns: 1fr; gap: 18px; }
  .sign-in { margin: 10vh auto; padding: 30px 24px; }
}

 (max-width: 420px) {
  .shell { padding: 16px; }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-menu { align-items: start; flex-direction: column; gap: 6px; }
}

.subheading { margin: 28px 0 0; color: #527060; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.context-list, .contact-list { margin-top: 10px; border-top: 1px solid #cbdcd1; }
.context-list p, .contact-list p { margin: 0; padding: 10px 0; border-bottom: 1px solid #cbdcd1; color: #496255; font-size: 13px; line-height: 1.45; }
.contact-list strong { color: #28513b; }
.reference-list a { display: block; padding: 12px 0; border-bottom: 1px solid #cbdcd1; color: #28513b; text-decoration: none; }
.reference-list a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

.pinned-section { margin: 0 0 34px; padding: 18px; border: 1px solid #b8cec1; border-top: 3px solid #35634a; }
.pinned-section h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.pinned-visual-heading { margin: 18px 0 12px; color: #527060; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.pinned-gallery { margin-top: 0; }
.library-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #cbdcd1; }
.library-row a { flex: 1; border-bottom: 0; }
.library-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
button:not(.tab):not(.quiet).pin { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 10px; color: #28513b; background: transparent; border: 1px solid #8fac9a; font-size: 12px; }
button:not(.tab):not(.quiet).pin:hover:not(:disabled) { color: #fff; background: #35634a; }
button:not(.tab):not(.quiet).delete { box-sizing: border-box; display: grid; width: 34px; height: 34px; min-height: 34px; padding: 0; place-items: center; color: #8e2d28; background: transparent; border: 1px solid #c98983; font-family: sans-serif; font-size: 20px; font-weight: 400; line-height: 1; }
button.delete::before { content: "\00D7"; transform: translateY(-1px); }
button:not(.tab):not(.quiet).delete:hover:not(:disabled) { color: #fff; background: #a7342d; }
.gallery figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gallery figcaption .library-controls { margin-left: auto; }
.gallery figcaption span { flex: 1; }

.library-row, .gallery figure { transition: opacity 180ms ease, transform 180ms ease; }
.library-row.is-removing, .gallery figure.is-removing { opacity: 0; transform: scale(0.98); pointer-events: none; }

td a { color: #28513b; font-weight: 700; }

.floorplan-pdf { display: inline-block; color: #28513b; font-weight: 700; text-decoration: underline; }
.floorplans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.floorplans a { display: block; color: #28513b; text-decoration: none; font-weight: 700; }
.floorplans img { display: block; width: 100%; margin-bottom: 10px; border: 1px solid #b8cec1; background: #fff; }
@media (max-width: 780px) { .floorplans { grid-template-columns: 1fr; } }

.stone-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.stone-heading h2, .stone-collection h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 500; }
.stone-summary { margin: 8px 0 0; color: #607269; }
button:not(.tab):not(.quiet).stone-toggle { flex: 0 0 auto; }
.stone-collection { margin-top: 42px; }
.stone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; margin-top: 18px; }
.stone-card { overflow: hidden; border: 1px solid #b8cec1; background: #fff; }
.stone-card > a { display: block; background: #dce9e5; }
.stone-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.stone-details { padding: 15px; }
.stone-details .meta { margin: 0 0 5px; }
.stone-details > a { color: #173d2b; text-decoration: none; }
.stone-details h3 { font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; }
.stone-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.stone-links { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.stone-links a { color: #28513b; font-size: 13px; font-weight: 700; }
button:not(.tab):not(.quiet).hide-stone, button:not(.tab):not(.quiet).restore-stone { min-height: 36px; padding: 0 14px; }
button:not(.tab):not(.quiet).hide-stone { background: #8e3d36; }
button:not(.tab):not(.quiet).restore-stone { background: #35634a; }
.hidden-stone { opacity: 0.72; }

@media (max-width: 780px) {
  .stone-heading { align-items: stretch; flex-direction: column; }
  .stone-heading .stone-toggle { align-self: start; }
  .stone-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
