* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111; background: #fff; }
#app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid #e5e5e5; display: flex; flex-direction: column; background: #fafafa; }
.logo { padding: 16px 20px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.logo-dot { width: 8px; height: 8px; border-radius: 50%; background: #111; }
.nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; width: 100%; font-size: 14px; color: #666; cursor: pointer; margin-bottom: 2px; text-align: left; }
.nav-item:hover { background: #f0f0f0; }
.nav-item.active { background: #111; color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.user { padding: 12px 16px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #999; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header { height: 56px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 20px; gap: 16px; }
.search { flex: 1; max-width: 400px; position: relative; }
.search input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 10px; border: 1px solid #e5e5e5; font-size: 14px; background: #f5f5f5; outline: none; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #999; }
.actions { display: flex; gap: 6px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: #666; }
.icon-btn:hover { background: #f0f0f0; }
.content { flex: 1; overflow-y: auto; padding: 24px; }

.h2 { font-size: 25px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.015em; text-wrap: balance; }
.hs { font-size: 14px; color: #6b7280; margin-bottom: 26px; max-width: 62ch; line-height: 1.55; }

/* One card, everywhere.
   The building page introduced a second one — softer border, larger radius, a
   shadow — and for a while the product had two card languages side by side on
   the same screen, which reads as two products. This is that card; `.q-card`
   now only adds its own padding. */
.card {
  border: 1px solid #e7e4dc; border-radius: 14px; padding: 19px 21px; background: #fff;
  box-shadow: 0 1px 2px rgba(36,39,45,.05), 0 8px 24px rgba(36,39,45,.06);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Was a hard four columns, which put four cards on a phone at 90 px each. */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-bottom: 24px; align-items: start;
}
.kpiv { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpil { font-size: 12px; color: #666; margin-top: 2px; }
.kpid { font-size: 12px; font-weight: 600; margin-top: 6px; }
.kpid.up { color: #16a34a; }
.kpid.down { color: #dc2626; }

.tbl-wrap {
  border: 1px solid #e7e4dc; border-radius: 14px; overflow: hidden; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(36,39,45,.05), 0 8px 24px rgba(36,39,45,.06);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; color: #666; border-bottom: 1px solid #e5e5e5; background: #f8f8f8; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fafafa; }

.btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.btn-primary { background: #111; color: #fff; }
.btn-secondary { background: #f5f5f5; color: #111; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

.status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.status-green { background: #dcfce7; color: #166534; }
.status-amber { background: #fef3c7; color: #92400e; }
.status-red { background: #fee2e2; color: #991b1b; }
.status-blue { background: #dbeafe; color: #1e40af; }
.status-gray { background: #f3f4f6; color: #4b5563; }

.ai-box { background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.6; }
.ai-rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.ai-rec.best { background: #dcfce7; color: #166534; }
.ai-rec.warn { background: #fef3c7; color: #92400e; }

.pb { height: 6px; border-radius: 3px; background: #f0f0f0; overflow: hidden; margin-top: 4px; }
.pbf { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.cell-best { background: #dcfce7; border: 1px solid #bbf7d0; padding: 6px; border-radius: 4px; }
.cell-ok { background: #f8f8f8; border: 1px solid #e5e5e5; padding: 6px; border-radius: 4px; }
.cell-high { background: #fee2e2; border: 1px solid #fecaca; padding: 6px; border-radius: 4px; }

.diff-pos { color: #16a34a; font-weight: 600; }
.diff-neg { color: #dc2626; font-weight: 600; }

.match { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #dcfce7; color: #166534; }
.mismatch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #fee2e2; color: #991b1b; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #444; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #e5e5e5; font-size: 13px; outline: none; font-family: inherit;
}
.form-group input:focus, .form-group select:focus { border-color: #111; }

.boq-tree { font-size: 13px; }
.boq-node { margin-bottom: 2px; }
.boq-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.boq-header:hover { background: #f5f5f5; }
.boq-header .toggle { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999; }
.boq-children { padding-left: 24px; }
.boq-line { display: grid; grid-template-columns: 2fr 80px 100px 100px 100px 120px; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f0f0f0; font-size: 12px; align-items: center; }
.boq-line:hover { background: #fafafa; }

.ai-float { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.ai-panel { position: fixed; bottom: 20px; right: 20px; width: 380px; max-height: 500px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 100; overflow: hidden; }
.ai-header { padding: 14px 16px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.ai-body { flex: 1; overflow-y: auto; padding: 14px; font-size: 13px; max-height: 320px; }
.ai-msg { margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; max-width: 88%; line-height: 1.5; }
.ai-msg.bot { background: #f5f5f5; color: #111; border-bottom-left-radius: 4px; }
.ai-msg.user { background: #111; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.ai-input { padding: 12px; border-top: 1px solid #e5e5e5; display: flex; gap: 8px; background: #fafafa; }
.ai-input input { flex: 1; padding: 9px 14px; border-radius: 10px; border: 1px solid #e5e5e5; font-size: 13px; outline: none; }
.ai-input input:focus { border-color: #111; }

.hidden { display: none !important; }

.sec { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal { background: #fff; border-radius: 14px; padding: 24px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; }
.modal h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

@media (max-width: 900px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .kpi { grid-template-columns: repeat(2, 1fr); } }
/* --- States: loading, empty, error ------------------------------------------
   A failed call has to say so. The old client swallowed every error into a
   return value nobody checked, so a failure rendered as a blank panel. */
.state { padding: 24px; border-radius: 8px; text-align: center; font-size: 13px; }
.state-loading { color: #666; }
.state-empty { background: #fafafa; border: 1px dashed #ddd; color: #666; }
.state-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; text-align: left; }
.state-title { font-weight: 600; margin-bottom: 4px; }
.state-hint { font-size: 12px; opacity: 0.85; margin-bottom: 8px; }
.state code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

/* --- Toasts ---------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: #111; color: #fff;
}
.toast-ok { background: #16a34a; }
.toast-error { background: #dc2626; }

/* --- A button that reads as a link ----------------------------------------- */
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11px; color: #3b82f6; text-align: left;
}
.linklike:hover { text-decoration: underline; }

select[data-action="pick-project"] {
  padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px;
}

/* --- Pager ----------------------------------------------------------------- */
.pager {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 12px; color: #666;
}
.pager button[disabled] { opacity: 0.4; cursor: default; }

/* --- The role screen ---------------------------------------------------------
   One question, answered large. Everything else is support. */
.headline { margin-bottom: 20px; }
.headline-q { font-size: 13px; color: #666; letter-spacing: 0.02em; }
.headline-a { font-size: 40px; font-weight: 600; line-height: 1.1; margin: 2px 0 4px; }
.headline-s { font-size: 13px; color: #666; }

.card-label { font-size: 12.5px; color: #6b7280; margin-bottom: 6px; }
.card-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.card-sub { font-size: 12.5px; color: #6b7280; margin-top: 3px; }
/* Always visible: "what is this number?" is the most common question a
   dashboard gets, and answering it in a tooltip answers it for nobody. */
.card-why {
  font-size: 12px; color: #6b7280; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #f0f0f0; line-height: 1.5;
}
/* The tone used to be a coloured rail down the left edge — a second place to
   look for something the figure itself can say. The value carries `.good` or
   `.bad` now, so there is one thing to read instead of two. */
.tone-ok, .tone-warn, .tone-neutral { border-left: 1px solid #e7e4dc; }

.attention-row {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.attention-row:last-child { border-bottom: none; }
.attention-amount { font-weight: 600; font-size: 14px; text-align: right; }
.attention-title { font-size: 13px; font-weight: 500; }
.attention-detail { font-size: 12px; color: #666; }
.attention-action { font-size: 12px; color: #3b82f6; }
.attention-invoice .attention-amount { color: #dc2626; }
.attention-retention .attention-amount { color: #f59e0b; }
.attention-override .attention-amount { color: #999; }

/* --- Excel einlesen -------------------------------------------------------- */
/* The verdict is coloured, because "geht auf" and "geht um 582.950 € nicht auf"
   must be distinguishable before either sentence is read. */

.headline-ok .headline-a { color: #1a7f4b; }
.headline-warn .headline-a { color: #b3441d; }

.upload-card { padding: 0; overflow: hidden; }

.upload-drop {
  display: block;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed #d4d4d4;
  border-radius: 8px;
  margin: 16px;
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop:hover { border-color: #1a1a1a; background: #fafafa; }
.upload-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.upload-hint { font-size: 12px; color: #666; }
.upload-filename { font-size: 12px; color: #666; padding: 0 16px 16px; }

.finding {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.finding:last-child { border-bottom: none; }
.finding-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.finding-where { font-size: 12px; color: #666; }
.finding-message { font-size: 13px; }
.finding-error .finding-amount { color: #b3441d; }
.finding-warning .finding-amount { color: #a06a1b; }

.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  cursor: pointer;
}

/* --- Language ------------------------------------------------------------- */
/* Next to the key button, where settings belong. Small and quiet: it is a
   thing somebody sets once, not a thing they look at. */

.lang-select {
  height: 34px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  cursor: pointer;
}
.lang-select:hover { border-color: #1a1a1a; }

/* --- Changes to the contract ---------------------------------------------- */
/* Amount first, because that is what the argument is about. */

.variation {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.variation:last-child { border-bottom: none; }
.variation-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.variation-approved .variation-amount { color: #1a7f4b; }
.variation-rejected { opacity: 0.55; }
.variation-rejected .variation-amount { text-decoration: line-through; }
.variation-title { font-weight: 600; font-size: 14px; }
.variation-detail { font-size: 12px; color: #666; margin-top: 2px; }
.variation-reason { font-size: 12px; color: #666; margin-top: 4px; font-style: italic; }
.variation-line {
  font-size: 12px;
  color: #444;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid #e2e2e2;
}
.variation-kind {
  display: inline-block;
  min-width: 74px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
}
.variation-actions { display: flex; flex-direction: column; gap: 6px; }

/* --- Aufmaß ---------------------------------------------------------------- */
/* Used one-handed, on a phone, on a roof, in the wind. Targets are 48px because
   a thumb is about that wide, and the number pad opens by itself because the
   quantity field asks for one. */

.measure-form select,
.measure-form input {
  width: 100%;
  min-height: 48px;
  font-size: 16px; /* under 16px iOS zooms the whole page on focus */
  padding: 10px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
}
.btn-big {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  margin-top: 4px;
}

.measure-row { padding: 12px 0; border-bottom: 1px solid #eee; }
.measure-row:last-child { border-bottom: none; }
.measure-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.measure-title { font-size: 14px; font-weight: 600; }
.measure-percent { font-variant-numeric: tabular-nums; font-weight: 600; color: #666; }
.measure-bar {
  height: 6px;
  border-radius: 3px;
  background: #eee;
  margin: 6px 0;
  overflow: hidden;
}
.measure-bar span { display: block; height: 100%; background: #1a7f4b; }
.measure-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: #666;
}
.measure-over .measure-bar span { background: #b3441d; }
.measure-warning { font-size: 12px; color: #b3441d; margin-top: 6px; font-weight: 600; }

/* --- On a phone ------------------------------------------------------------ */
/* The sidebar becomes a row of icons across the top. Nothing is hidden behind
   a hamburger: on site, a menu you have to open is a menu nobody opens. */

@media (max-width: 760px) {
  /* The desktop layout is a full-height flex box that never scrolls: the
     content pane scrolls inside it. On a phone that is wrong twice over — the
     sidebar gets clipped out of a 100vh box, and `width: 100vw` counts the
     scrollbar, so the page overflows sideways by exactly its width.
     Here the whole document scrolls instead, which is what a phone expects. */
  #app { display: block; height: auto; width: 100%; overflow: visible; }
  .main { display: block; }
  .content { overflow: visible; }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: auto;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e2e2e2;
    background: #fff;
  }
  /* Explicit, because a rule from the mockup era used to hide the sidebar
     outright on a phone and leave nothing in its place. */
  .sidebar { display: flex; }
  .logo, .user { display: none; }
  .nav {
    display: flex;
    overflow-x: auto;
    gap: 2px;
    padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-item {
    flex: 0 0 auto;
    /* The desktop rule is width:100%, which in a horizontal strip makes every
       item as wide as the screen and leaves five of the six off it. */
    width: auto;
    flex-direction: column;
    gap: 2px;
    min-width: 68px;
    min-height: 52px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
  }
  .header { padding: 8px 12px; }
  .search { display: none; }
  .content { padding: 12px; }
  .kpi { grid-template-columns: 1fr; }
  .ai-panel { width: calc(100% - 40px); }
  /* Amount, then what it is about, stacked. Three columns in 500px turns
     every row into three narrow ones. */
  .variation, .finding, .package, .unit, .margin-row, .attention-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .variation-amount,
  .finding-amount,
  .package-margin,
  .unit-price,
  .margin-amount,
  .attention-amount {
    text-align: left;
  }
  .attention-action { text-align: left; }
  .tbl-wrap { overflow-x: auto; }
  .ai-float { bottom: 12px; right: 12px; }
}

/* --- Tender packages ------------------------------------------------------- */
/* The margin sits where the eye lands first, and green and red mean what they
   always mean. A package nobody has priced shows a dash, not a zero: nothing
   has been agreed, and a zero would read as "no margin". */

.package {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.package:last-child { border-bottom: none; }
.package-margin {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: #999;
}
.package-margin.earning { color: #1a7f4b; }
.package-margin.losing { color: #b3441d; }
.package-percent { font-size: 11px; font-weight: 400; opacity: 0.8; }
.package-title { font-weight: 600; font-size: 14px; }
.package-detail { font-size: 12px; color: #666; margin-top: 2px; }
.package-award { font-size: 12px; margin-top: 4px; }
.package-draft { opacity: 0.75; }

/* --- The second level ------------------------------------------------------ */
/* Tabs, not a dropdown. Everything inside a group is visible the moment the
   group is chosen: a menu somebody has to open is a menu they do not know the
   contents of. */

.tabs {
  display: flex;
  gap: 4px;
  padding: 12px 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs:empty { display: none; }
.tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  color: #666;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: #1a1a1a; }
.tab.active { color: #1a1a1a; font-weight: 600; border-bottom-color: #1a1a1a; }

@media (max-width: 760px) {
  .tabs { padding: 8px 12px 0; }
  .tab { min-height: 44px; }
}

/* --- Units ----------------------------------------------------------------- */
/* A hold and a sale look different on purpose. Treating a reservation as money
   is how a month's forecast turns into a shortfall. */

.unit {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.unit:last-child { border-bottom: none; }
.unit-price { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.unit-sold .unit-price { color: #1a7f4b; }
.unit-reserved .unit-price { color: #a06a1b; }
.unit-discount { font-size: 11px; font-weight: 400; color: #b3441d; }
.unit-title { font-weight: 600; font-size: 14px; }
.unit-detail { font-size: 12px; color: #666; margin-top: 2px; }
.unit-buyer { font-size: 12px; margin-top: 2px; }
.unit-flag { font-size: 12px; color: #b3441d; font-weight: 600; margin-top: 4px; }

/* --- The margin ------------------------------------------------------------ */
/* The bar under each building is how much of the figure is decided rather than
   forecast. A margin at 12 % certainty is a sentence, not a number. */

.margin-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.margin-row:last-child { border-bottom: none; }
.margin-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; font-size: 16px; }
.margin-amount.earning { color: #1a7f4b; }
.margin-amount.losing { color: #b3441d; }
.margin-percent { font-size: 11px; font-weight: 400; opacity: 0.8; }
.margin-title { font-weight: 600; font-size: 14px; }
.margin-detail { font-size: 12px; color: #666; margin-top: 2px; }
.margin-forecast { font-size: 12px; color: #999; }
.margin-bar { height: 4px; border-radius: 2px; background: #eee; margin-top: 6px; overflow: hidden; }
.margin-bar span { display: block; height: 100%; background: #1a1a1a; }

/* --- Documents ------------------------------------------------------------- */
/* The revision in force is the only one in black. Everything superseded is
   greyed and struck through: on a site, reading the wrong sheet is the
   mistake, not failing to find one. */

.doc {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.doc:last-child { border-bottom: none; }
.doc-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }
.doc-title { font-weight: 600; font-size: 14px; }
.doc-detail { font-size: 12px; color: #666; }
.doc-rev {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  color: #999;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid #eee;
}
.doc-rev.current { color: #1a1a1a; border-left-color: #1a7f4b; }
.doc-rev-label { font-weight: 600; }
.doc-rev:not(.current) .doc-rev-label { text-decoration: line-through; }
.doc-rev-open { color: #3b82f6; text-decoration: none; }

/* --- Forms, and the screens the hardening pass added -------------------------
   Every form in the system is drawn by one renderer from a description, so
   these rules are the whole of how a form looks. A person who has filled in
   one of them recognises the next. */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font: inherit;
  background: #fff;
  color: #111827;
}
.field input[type="checkbox"] { width: auto; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  border-color: #2563eb;
}
/* The trade word lives here, so the label above can stay in plain language. */
.field-hint { font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.45; }
.field-required { color: #dc2626; }
/* Under the field it belongs to. "Invalid input" at the top of eight fields
   is a puzzle rather than a message. */
.field-error:not(:empty) { font-size: 12px; color: #dc2626; margin-top: 4px; }

.modal-intro { font-size: 13px; color: #4b5563; margin: -4px 0 16px; line-height: 1.5; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* Shown once and never again: an API key, a portal link. Monospace and
   selectable, because it is going to be copied. */
.secret {
  background: #111827;
  color: #f9fafb;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
  margin-bottom: 16px;
}

/* A heading with its own buttons on the right. */
.sec-with-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 12px 0; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* --- The first morning ------------------------------------------------------
   Shown while the company is still setting up, gone once it is running. */

.start-card { border-left: 3px solid #2563eb; }
.start-intro { font-size: 13px; color: #4b5563; margin: 0 0 14px; }
.start-steps { list-style: none; margin: 0; padding: 0; }
.start-step { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; }
.start-step + .start-step { border-top: 1px solid #f3f4f6; }
.start-mark {
  flex: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #9ca3af;
}
.start-done .start-mark { color: #16a34a; }
.start-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A button rather than a link: it changes the screen, it does not go anywhere. */
.start-title {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #2563eb;
  text-align: left;
  cursor: pointer;
}
.start-title:hover { text-decoration: underline; }
.start-done .start-title { color: #6b7280; text-decoration: line-through; }
.start-why { font-size: 12.5px; color: #6b7280; line-height: 1.5; }

@media (max-width: 640px) {
  .sec-with-action { flex-direction: column; align-items: flex-start; }
  .row-actions { padding-bottom: 10px; }
}

/* A plain two-sided row: what it is on the left, its figure and its buttons
   on the right. Used by the team and billing screens, which have no third
   column to justify the grid the unit rows use. */
.row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.row:last-child { border-bottom: none; }
.row-main { min-width: 0; }
.row-title { font-weight: 600; font-size: 14px; }
.row-sub { font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  /* Wide enough that a six-figure amount and its buttons do not wrap onto two
     lines each — which is what a finding for 2.197,80 EUR did. */
  flex: 0 0 auto;
  min-width: 150px;
}
.row-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row-side .btn { white-space: nowrap; }
.row-side .row-actions { padding: 0; }

@media (max-width: 640px) {
  .row { flex-direction: column; }
  .row-side { align-items: flex-start; }
}

/* The sentence under a negative margin. Not a warning — an explanation. */
.margin-breakeven {
  font-size: 12.5px;
  color: #92400e;
  background: #fffbeb;
  border-left: 2px solid #f59e0b;
  padding: 6px 10px;
  border-radius: 0 5px 5px 0;
  margin-top: 6px;
  line-height: 1.5;
}

/* --- Your virtual colleagues -------------------------------------------------
   One card per agent, and the three questions somebody actually has in a fixed
   order: what does it do, what has it brought me, may I let it off the lead. */

.agent-card { margin-bottom: 14px; }
.agent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.agent-name { font-weight: 600; font-size: 15px; }
.agent-describes {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 3px;
  max-width: 62ch;
}
.agent-mode {
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  flex: 0 0 auto;
}
/* A mode the server would refuse is shown and disabled rather than hidden, so
   somebody can see that working alone exists and is not yet earned. */
.agent-mode option:disabled { color: #9ca3af; }

.agent-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}
.agent-label { font-size: 11.5px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.agent-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.agent-note { font-size: 12px; color: #6b7280; margin-top: 2px; }

.agent-earned {
  margin-top: 12px;
  font-size: 12.5px;
  color: #166534;
  background: #f0fdf4;
  border-left: 2px solid #16a34a;
  padding: 7px 10px;
  border-radius: 0 5px 5px 0;
}
.agent-learning {
  margin-top: 12px;
  font-size: 12.5px;
  color: #6b7280;
  background: #f9fafb;
  border-left: 2px solid #d1d5db;
  padding: 7px 10px;
  border-radius: 0 5px 5px 0;
}

/* Which agent said it. Small, because the finding matters more than the
   colleague who noticed it. */
.finding-agent { font-size: 11.5px; color: #9ca3af; margin-top: 4px; }

@media (max-width: 640px) {
  .agent-head { flex-direction: column; }
  .agent-figures { grid-template-columns: 1fr; gap: 12px; }
}


/* Who built this. On every screen, because it lives in the shared sidebar
   rather than on one page — and visible rather than in a meta tag, which no
   person ever reads. Quiet enough not to compete with the customer's own work. */
.built-by {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.built-by a {
  font-size: 11.5px;
  color: #9ca3af;
  text-decoration: none;
  letter-spacing: .01em;
}
.built-by a:hover { color: #d1d5db; text-decoration: underline; }

/* ============================================================================
   The new shape — buildings, the three questions, and where a number comes
   from. Borrowed from things people already read without being taught: a
   parcel tracker for the money, a seat map for the flats, a progress bar for
   the build.
   ============================================================================ */

:root {
  --ok: #1E7F4F;
  --ok-soft: #E7F3EC;
  --warn: #B37D10;
  --warn-soft: #FBF3E1;
  --free: #EFECE4;
  /* The drawn building, when a customer has not uploaded their own. */
  --cover-sky-top: #BFD7EE;
  --cover-sky-bottom: #EFE9DC;
  --cover-ground: #D8CFBC;
  --cover-wall: #F6F3EC;
  --cover-wall-2: #E8E2D4;
  --cover-edge: #CBBFA4;
  --cover-glass: #7FA3C8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ok: #5BC98F; --ok-soft: #1B2F25; --warn: #E0B35C; --warn-soft: #33290F;
    --free: #262A33;
    --cover-sky-top: #2A3648; --cover-sky-bottom: #1D2027; --cover-ground: #2E3138;
    --cover-wall: #343941; --cover-wall-2: #2C3038; --cover-edge: #3E434C;
    --cover-glass: #55749C;
  }
}
:root[data-theme="dark"] {
  --ok: #5BC98F; --ok-soft: #1B2F25; --warn: #E0B35C; --warn-soft: #33290F;
  --free: #262A33;
  --cover-sky-top: #2A3648; --cover-sky-bottom: #1D2027; --cover-ground: #2E3138;
  --cover-wall: #343941; --cover-wall-2: #2C3038; --cover-edge: #3E434C;
  --cover-glass: #55749C;
}
:root[data-theme="light"] {
  --ok: #1E7F4F; --ok-soft: #E7F3EC; --warn: #B37D10; --warn-soft: #FBF3E1;
  --free: #EFECE4;
  --cover-sky-top: #BFD7EE; --cover-sky-bottom: #EFE9DC; --cover-ground: #D8CFBC;
  --cover-wall: #F6F3EC; --cover-wall-2: #E8E2D4; --cover-edge: #CBBFA4;
  --cover-glass: #7FA3C8;
}

.h1 { font-size: 25px; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.lede { color: #6b7280; margin: 4px 0 28px; max-width: 62ch; line-height: 1.55; }
.sec-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: #6b7280; font-weight: 600; margin: 32px 0 13px;
}
.back {
  border: 0; background: none; color: #6b7280; font: inherit; font-size: 13.5px;
  cursor: pointer; padding: 0 0 12px;
}
.good { color: var(--ok); }
.bad { color: var(--warn); }

/* --- Building cards --------------------------------------------------------- */

.estate { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.b-card {
  background: #fff; border: 1px solid #e7e4dc; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(36,39,45,.05), 0 8px 24px rgba(36,39,45,.06);
  cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit;
  transition: transform .15s ease;
}
.b-card:hover { transform: translateY(-2px); }
.b-card:focus-visible { outline: 2px solid #1857c2; outline-offset: 2px; }
.cover { display: block; width: 100%; height: auto; object-fit: cover; }
.b-body { padding: 15px 17px 17px; }
.b-name { font-weight: 700; font-size: 15.5px; }
.b-loc { color: #6b7280; font-size: 13px; margin-bottom: 12px; }
.b-rows { display: grid; gap: 9px; font-size: 13.5px; }
.b-row { display: flex; align-items: center; gap: 10px; }
.b-row .lbl { color: #6b7280; width: 78px; flex: 0 0 auto; }
.b-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 7px; border-radius: 99px; background: var(--free); overflow: hidden; }
.bar i { display: block; height: 100%; background: #1857c2; border-radius: 99px; }
.bar i.neg { background: var(--warn); }
.big-bar { margin: 10px 0 6px; height: 8px; }
.segs { flex: 1; display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--free); }
.segs i { display: block; height: 100%; }
.b-alert {
  margin-top: 13px; background: var(--warn-soft); color: var(--warn); font-size: 13px;
  font-weight: 600; padding: 8px 12px; border-radius: 9px; display: flex; justify-content: space-between;
}
.ghost {
  border: 1.5px dashed #e7e4dc; border-radius: 14px; display: grid; place-items: center;
  color: #6b7280; min-height: 230px; cursor: pointer; background: none; font: inherit;
}

/* --- The building page ------------------------------------------------------ */

.hero {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #e7e4dc;
  box-shadow: 0 1px 2px rgba(36,39,45,.05), 0 8px 24px rgba(36,39,45,.06);
}
.hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 18px; color: #fff;
  background: linear-gradient(transparent, rgba(18,22,30,.75));
}
.hero-caption .h1 { color: #fff; }
.hero-sub { opacity: .85; font-size: 13.5px; }
.cover-btn {
  position: absolute; top: 14px; right: 14px; border: 0; border-radius: 8px;
  background: rgba(18,22,30,.55); color: #fff; font: inherit; font-size: 12.5px;
  padding: 7px 12px; cursor: pointer; backdrop-filter: blur(4px);
}

.phases { display: flex; margin: 22px 0 4px; }
.phase { flex: 1; text-align: center; position: relative; padding-top: 21px; font-size: 12.5px; color: #6b7280; }
.phase::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--free); }
/* The rail runs between the dots, not past them — a line sticking out beyond
   the first and last station reads as a step nobody named. */
.phase:first-child::before { left: 50%; }
.phase:last-child::before { right: 50%; }
.phase::after {
  content: ""; position: absolute; top: 0; left: calc(50% - 7px); width: 14px; height: 14px;
  border-radius: 99px; background: #fff; border: 3px solid var(--free);
}
.phase.done { color: var(--ok); }
.phase.done::before, .phase.done::after { background: var(--ok); border-color: var(--ok); }
.phase.now { color: #24272d; font-weight: 600; }
.phase.now::after { border-color: #1857c2; background: #fff; }
.phase.now::before { background: var(--ok); }
.p-label { font-weight: inherit; }
.p-detail { font-size: 11.5px; opacity: .8; }

.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
/* `.card` carries the surface; this only names the role. */
.q-card { background: #fff; border: 1px solid #e7e4dc; border-radius: 14px; padding: 19px 21px;
  box-shadow: 0 1px 2px rgba(36,39,45,.05), 0 8px 24px rgba(36,39,45,.06); }
.q-card h3 { margin: 0 0 13px; font-size: 15.5px; letter-spacing: -.01em; }
.big { font-size: 29px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.note { font-size: 12.5px; color: #6b7280; margin-top: 8px; line-height: 1.5; }
.why-link {
  border: 0; background: none; color: #1857c2; font: inherit; font-size: 13px; cursor: pointer;
  padding: 0; margin-top: 11px; text-decoration: underline; text-underline-offset: 3px;
}

/* The money, as a parcel tracker. */
.pipe { display: grid; }
.step { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: center; padding: 8px 0; }
.step .dot { width: 11px; height: 11px; border-radius: 99px; background: var(--ok); justify-self: center; }
.step.empty .dot { background: var(--free); border: 2px solid #e7e4dc; }
/* Due and unpaid: the one instalment somebody is waiting for. */
.step.due .dot { background: var(--warn); }
.step.due .s-label, .step.due .s-value { color: var(--warn); font-weight: 600; }
.s-label { font-size: 13.5px; }
.step.empty .s-label { color: #6b7280; }
.s-value {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums; color: inherit; cursor: pointer; padding: 0;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.s-value:hover:not(:disabled) { text-decoration-color: currentColor; }
.s-value:disabled { cursor: default; color: #6b7280; }
.gap {
  margin: 1px 0 1px 33px; padding: 6px 11px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600;
}

/* The flats, as a seat map. */
/* A seat map keeps its seat size. Six fixed columns meant a tile was 55 px
   inside a narrow card and 180 px inside a wide one — the same twenty-four
   flats reading as two different things. */
.flats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px; max-width: 760px;
}
.flat {
  aspect-ratio: 1.3; border-radius: 7px; background: var(--free); border: 1px solid #e7e4dc;
  display: grid; place-items: center; font: inherit; font-size: 10.5px; color: #6b7280;
  cursor: pointer; position: relative; padding: 0;
}
.flat.sold, .flat.completed { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.flat.reserved, .flat.contracted { background: var(--warn); border-color: var(--warn); color: #fff; font-weight: 700; }
.flat-flag { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; }
.legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12.5px; color: #6b7280; margin-top: 12px; }
.leg .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sw.sold { background: var(--ok); }
.sw.reserved { background: var(--warn); }
.sw.available { background: var(--free); border: 1px solid #e7e4dc; }

.committed { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.c-label { font-size: 12.5px; color: #6b7280; }
.c-value {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.c-value:disabled { cursor: default; text-decoration: none; }

/* The filing cabinet. Sixteen screens became four drawers, and a drawer says
   what is in it before it is opened — otherwise it is the old menu with
   rounder corners. */
/* Three drawers, each with its own heading. The heading is what makes ten
   tiles readable where ten tabs were not. */
.drawer { margin-bottom: 22px; }
.d-name {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: #6b7280; font-weight: 600; margin-bottom: 9px;
}
.crumb {
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: #6b7280; cursor: pointer; padding: 6px 0;
}
.crumb:hover { color: #24272d; }

/* auto-fill, not auto-fit: a drawer holding two tiles keeps them tile-sized
   instead of stretching each across half the page. */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.f-tile {
  display: grid; gap: 4px; text-align: left; padding: 15px 17px; cursor: pointer;
  background: #fff; border: 1px solid #e7e4dc; border-radius: 12px; font: inherit; color: inherit;
  box-shadow: 0 1px 2px rgba(36,39,45,.05);
  transition: border-color .15s ease;
}
.f-tile:hover { border-color: #bdb7a8; }
.f-tile:focus-visible { outline: 2px solid #1857c2; outline-offset: 2px; }
.f-tile b { font-size: 14px; }
.f-tile span { font-size: 12.5px; color: #6b7280; }

/* One card alone in a grid of 1fr columns stretches to the full page width and
   reads as an empty poster. The forecast is one card. */
.qgrid.one { grid-template-columns: minmax(300px, 560px); }

/* The actions inside a flat's panel. */
.explain .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid #e7e4dc; }

/* --- Woher kommt diese Zahl? ------------------------------------------------ */

.veil { position: fixed; inset: 0; background: rgba(20,23,28,.35); z-index: 40; }
.explain {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); z-index: 41;
  background: #fff; border-left: 1px solid #e7e4dc; padding: 26px 26px 34px; overflow-y: auto;
  box-shadow: -8px 0 32px rgba(20,23,28,.14);
}
.explain h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.p-sentence { color: #6b7280; font-size: 13.5px; margin: 0 0 16px; line-height: 1.55; max-width: 52ch; }
.p-total { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.part { margin-bottom: 13px; }
.p-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 4px; }
/* The figure never wraps. "358.100,00" on one line and "€" on the next is
   two numbers as far as the eye is concerned. */
.p-row b { font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.p-work { color: #6b7280; font-size: 12.5px; }
.p-where {
  border-top: 1px solid #e7e4dc; margin-top: 18px; padding-top: 13px;
  font-size: 12.5px; color: #6b7280; line-height: 1.55;
  display: grid; justify-items: start; gap: 4px;
}
.p-close { position: absolute; top: 13px; right: 15px; border: 0; background: none; font-size: 21px; color: #6b7280; cursor: pointer; }
.p-loading { color: #6b7280; font-size: 13.5px; }

@media (prefers-color-scheme: dark) {
  .b-card, .q-card, .card, .explain, .f-tile { background: #1d2027; border-color: #2c3039; }
  .tbl-wrap { border-color: #2c3039; }
  .tone-ok, .tone-warn, .tone-neutral { border-left-color: #2c3039; }
  .f-tile:hover { border-color: #454b56; }
  .ghost { border-color: #2c3039; }
  .phase::after { background: #1d2027; }
  .phase.now { color: #ecedef; }
  .phase.now::after { background: #1d2027; }
  .flat { border-color: #2c3039; }
  .committed { border-color: #2c3039; }
}
:root[data-theme="dark"] .b-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .q-card,
:root[data-theme="dark"] .explain,
:root[data-theme="dark"] .f-tile { background: #1d2027; border-color: #2c3039; }
:root[data-theme="dark"] .ghost { border-color: #2c3039; }
:root[data-theme="dark"] .phase::after,
:root[data-theme="dark"] .phase.now::after { background: #1d2027; }
:root[data-theme="dark"] .phase.now { color: #ecedef; }

@media (max-width: 640px) {
  /* A 3:1 hero on a phone is 130 pixels tall and the caption covers all of it. */
  .hero .cover { aspect-ratio: 16/9 !important; }
  .hero-caption { padding: 16px 16px 13px; }
  .phases { font-size: 11px; }
  .estate { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .b-card { transition: none; } }