/* ============================================================
   comfort.css — visual comfort pass (override layer)
   Markup is frozen: every rule below re-maps a compiled Tailwind
   utility that already exists in the page, or an existing id /
   data-hook. No markup, class, text or script is touched.
   Loaded after the compiled <style>, so equal-specificity rules
   win on source order; !important is used only where a compiled
   rule is more specific than a plain class.
   ============================================================ */

:root {
  /* --- type scale: exactly 5 steps --- */
  --fs-0: 12px;   /* micro: badges, uppercase captions, dense descriptions */
  --fs-1: 13px;   /* secondary: row labels, sub-descriptions */
  --fs-2: 14px;   /* body: values, rows, controls (inherited default)     */
  --fs-3: 16px;   /* panel titles, card headings                          */
  --fs-4: 22px;   /* hero numbers (prices, single headline figure)        */

  /* --- line heights --- */
  --lh-text: 1.5;    /* anything that can wrap                            */
  --lh-title: 1.35;
  --lh-hero: 1.2;

  /* --- grey ramp on white: exactly 3 text greys --- */
  --c-text:   #1F2937;  /* 12.63:1 on #fff — primary                      */
  --c-text-2: #6B7280;  /*  4.83:1 on #fff — secondary (AA normal text)   */
  --c-text-3: #9CA3AF;  /*  2.85:1 — placeholder / inert punctuation only */

  /* --- dark navy header surface (separate ramp, 2 values) --- */
  --c-on-dark:   #FFFFFF;
  --c-on-dark-2: #C3CEDC; /* 8.9:1 on #0E2841 */

  /* --- accents: brand only --- */
  --c-accent: #4F46E5;  /* indigo primary, 6.29:1 on #fff                 */
  --c-green:  #047857;  /* one green for text, 5.20:1 on #fff             */
  --c-cta:    #007A5E;  /* green CTA fill (unchanged)                     */

  /* --- lines & shape --- */
  --c-hairline: #E9EBEF;
  --r-chip:  6px;
  --r-ctrl:  8px;
  --r-panel: 12px;
}

/* ------------------------------------------------------------
   1. TYPE SCALE
   Eight compiled sizes (8/9/10/11/12/14/16/18/20/24px) collapse
   onto the five steps above.
   ------------------------------------------------------------ */
.text-\[8px\],
.text-\[9px\]   { font-size: var(--fs-0); line-height: var(--lh-text); }
.text-\[10px\],
.text-\[11px\]  { font-size: var(--fs-1); line-height: var(--lh-text); }
.text-xs        { font-size: var(--fs-2); line-height: var(--lh-text); }
.text-sm,
.text-base      { font-size: var(--fs-3); line-height: var(--lh-title); }
.text-lg,
.text-xl,
.text-2xl       { font-size: var(--fs-4); line-height: var(--lh-hero); }

/* leading-* must still beat the size rules above -> declared after */
.leading-tight  { line-height: 1.45; }
.leading-snug   { line-height: var(--lh-text); }
/* .leading-none is left at 1 — it is only on the map +/- glyphs */

/* uppercase captions are a fixed micro style, independent of the
   size class they happen to carry (5 occurrences) */
.uppercase {
  font-size: var(--fs-0);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .06em;
}
.uppercase.tracking-wider { color: var(--c-text-2); }

/* ------------------------------------------------------------
   2. WEIGHT DISCIPLINE
   400 values/body · 600 labels/headings · 700 only for panel
   titles, the wordmark, the primary CTA and hero numbers.
   ------------------------------------------------------------ */
.font-medium     { font-weight: 400; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 600; }
.font-extrabold  { font-weight: 700; }
.font-black      { font-weight: 700; }

/* the only 700s */
.text-sm.font-bold.text-gray-900            { font-weight: 700; }  /* panel / page titles */
.text-base.font-extrabold.text-gray-900     { font-weight: 700; }  /* "Your Dashboard"    */
.text-white.font-bold.text-sm               { font-weight: 700; }  /* xlot wordmark       */
button.bg-\[\#007A5E\].font-bold            { font-weight: 700; }  /* primary CTA         */

/* ------------------------------------------------------------
   3. GREY RAMP
   Six compiled greys collapse to three.
   ------------------------------------------------------------ */
.text-gray-900,
.text-gray-800,
.text-gray-700   { color: var(--c-text); }
.text-gray-600,
.text-gray-500,
.text-gray-400   { color: var(--c-text-2); }
.text-gray-300,
.text-gray-200   { color: var(--c-text-3); }
.text-\[\#1E293B\] { color: var(--c-text); }          /* <body> default */

input::placeholder,
textarea::placeholder { color: var(--c-text-3); opacity: 1; }

/* dark navy header keeps its own two-value ramp */
header .text-gray-200,
header .text-gray-300,
header .text-gray-400 { color: var(--c-on-dark-2); }

/* ------------------------------------------------------------
   4. ACCENTS — indigo primary + one green; amber folded in.
   ------------------------------------------------------------ */
.text-indigo-600,
.text-indigo-700          { color: var(--c-accent); }
.text-indigo-900,
.text-indigo-950          { color: var(--c-text); }   /* these were values, not links */
.hover\:text-indigo-600:hover { color: var(--c-accent); }

.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900         { color: var(--c-green); }
.group:hover .group-hover\:text-emerald-700,
.hover\:text-emerald-600:hover,
.hover\:text-emerald-700:hover { color: var(--c-green); }

.text-amber-600           { color: var(--c-accent); } /* upsell hint, was a 4th accent */

/* ------------------------------------------------------------
   5. SHAPE: one radius ramp, hairlines instead of doubled edges
   ------------------------------------------------------------ */
.rounded      { border-radius: var(--r-chip); }
.rounded-md   { border-radius: var(--r-chip); }
.rounded-lg   { border-radius: var(--r-ctrl); }
.rounded-xl   { border-radius: var(--r-panel); }
.rounded-2xl  { border-radius: 16px; }

/* border + shadow on the same box reads as a double edge */
.shadow-card  { box-shadow: none; }
.border-gray-200 { border-color: var(--c-hairline); }
.border-gray-300 { border-color: #DFE3E9; }
.border-slate-200 { border-color: var(--c-hairline); }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-hairline); }
.border-gray-100 { border-color: var(--c-hairline); }

/* ------------------------------------------------------------
   6. VERTICAL RHYTHM
   Only vertical padding grows — horizontal padding is left alone
   so the 340/365px panels keep their text width.
   ------------------------------------------------------------ */
.p-2   { padding-top: .625rem;  padding-bottom: .625rem; }
.p-2\.5{ padding-top: .75rem;   padding-bottom: .75rem;  }
.p-3   { padding-top: .875rem;  padding-bottom: .875rem; }

.space-y-1 > :not([hidden]) ~ :not([hidden])    { margin-top: .375rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem;   }
.space-y-2 > :not([hidden]) ~ :not([hidden])    { margin-top: .625rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .875rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden])    { margin-top: 1rem;    }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

/* panel / drawer scroll bodies: a little more breathing room top+bottom */
#pageSummary > .flex-1.overflow-y-auto,
#drawerLayers > .flex-1.overflow-y-auto,
#drawerAddons > .flex-1.overflow-y-auto,
#drawerFilters > .flex-1.overflow-y-auto { padding-top: 14px; padding-bottom: 16px; }

/* ------------------------------------------------------------
   7. DE-BOXING
   Cards nested inside cards, and lists of bordered rows, become
   hairline-separated rows. Only containers that already carry a
   divide-y (or sit inside another bordered card) are touched.
   ------------------------------------------------------------ */

/* 7a. layer groups + locked pro-filter list: drop the outer box,
       keep the hairlines that are already there */
[data-layer-group] > .divide-y,
#drawerFilters .divide-y {
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
.layer-row { padding: 11px 6px; }
#drawerFilters .divide-y > .p-2 { padding: 11px 6px; }

/* layer descriptions get one more line back, because 12px fits
   fewer characters per line than the original 8px did */
.line-clamp-2 { -webkit-line-clamp: 3; }

/* 7b. left panel module bars (Elevation / Home Designs / Notes /
       Documents): four bordered cards -> one hairline list */
#pageSummary .space-y-1 > .rounded-lg.flex.items-center.justify-between {
  border-width: 0 0 1px 0;
  border-color: var(--c-hairline);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  padding: 11px 2px;
}
#pageSummary .space-y-1 > .rounded-lg.flex.items-center.justify-between:last-child {
  border-bottom-width: 0;
}

/* 7c. metric tiles inside the summary panel: label + value columns,
       no boxes */
#pageSummary .grid-cols-3 > .rounded-lg {
  border-width: 0;
  box-shadow: none;
  background-color: transparent;
  padding: 2px 0;
}
/* 7d. tiles nested inside the Intelligence card */
#pageDashboard .grid-cols-2 > .rounded-lg.border-indigo-100 {
  border-width: 0;
  box-shadow: none;
}
/* 7e. My Properties counters: keep the tint, drop the border */
#pageDashboard .grid-cols-3 > .rounded-lg { border-width: 0; }

/* 7f. Filters drawer: three stacked green-tinted boxes -> plain
       sections separated by hairlines */
#drawerFilters .border-emerald-300 {
  border-width: 0 0 1px 0;
  border-color: var(--c-hairline);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------------------
   8. CONTROLS — >=32px tall, 13-14px text
   Excluded: round toggles / icon buttons (.rounded-full) and
   padding-1 icon buttons, which are deliberately small, and the
   whole 48px-tall header.
   ------------------------------------------------------------ */
main button:not(.rounded-full):not(.p-1):not(.p-1\.5):not(.py-0\.5) {
  min-height: 32px;
}
input[type="text"],
input[type="number"],
textarea,
select {
  min-height: 34px;
  font-size: var(--fs-2);
  line-height: var(--lh-text);
  border-radius: var(--r-ctrl);
}
textarea { min-height: 112px; }

/* A button label never breaks onto a second line. This also stops a
   button from being squeezed by a greedy sibling: with nowrap the
   button's min-content becomes the whole label, and a flex item may
   not shrink below min-content (min-width:auto), so it pushes back
   instead of wrapping. No flex-shrink:0 is added — it would be
   redundant here and would turn a squeeze into an overflow. */
button { white-space: nowrap; }

/* The same applies to the span/div "link buttons" — Reset filters,
   Select all, Clear all, Upgrade -> . They are flex items in tight
   rows, so a wrappable label lets flex squeeze them down to their
   longest word. cursor-pointer is the discriminator: the one long
   link that must keep wrapping ("+ detailed planning rules
   available ->", text-amber-600) does not carry it. */
.cursor-pointer.hover\:underline { white-space: nowrap; }

/* the two text buttons that sit in tight two-column grids */
#pageSummary .grid-cols-2 > button { line-height: 1.35; }

/* tooltip bubble: keep it on the scale too */
.archistar-tooltip { font-size: var(--fs-0); font-weight: 600; padding: 6px 10px; }

/* ------------------------------------------------------------
   9. OVERFLOW GUARDS
   Larger type must never clip a label. Prefer wrap, then ellipsis.
   ------------------------------------------------------------ */
#leftPanelWrapper,
#drawerLayers,
#drawerAddons,
#drawerFilters { overflow-wrap: break-word; }

/* Viewed / Shortlisted / Acquired step row.
   Measured at 1440x900: the row is 330px; at 13px the three labels
   come to 266.2px and the "+ Add tag" chip to 68px, so the row is
   4.2px over. Neither side can give: a label's min-content is the
   whole word, and the chip may not wrap. So the width comes out of
   the decoration — the two connector dashes and the gaps around
   them — which frees 20px and leaves a real gap before the chip.
   The dash pair .w-3.h-[1px] occurs exactly twice in the page, both
   in this row; #pageSummary keeps the gap rule off the map scale
   bar, which carries the same .space-x-2.text-[10px] combination. */
#pageSummary .flex.items-center.space-x-2.text-\[10px\] > .w-3.h-\[1px\] {
  width: .375rem;
}
#pageSummary .flex.items-center.space-x-2.text-\[10px\] > :not([hidden]) ~ :not([hidden]) {
  margin-left: .375rem;
}

/* breadcrumb rows: "Summary / Measure & Dimensions" at 16px no
   longer fits one line in a 340px panel */
.flex.items-center.text-sm.font-bold.text-gray-900 { flex-wrap: wrap; row-gap: 2px; }

/* key/value rows in the Planning Rules card */
#pageSummary .space-y-1 > .flex.items-center.justify-between > span,
#pageSummary .space-y-1 > .flex.items-center.justify-between > [data-field] { min-width: 0; }
#pageSummary .space-y-1 > .flex.items-center.justify-between > [data-field] { text-align: right; }

/* single-line row labels that must not push their row wider */
.layer-row .min-w-0 > .font-bold,
#drawerAddons .font-bold.text-\[11px\] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   10. SUB-12px EXCEPTIONS (deliberate, see DESIGN_NOTES.md)
   Counter badges that live inside 14-15px circles.
   ------------------------------------------------------------ */
#layerCountBadge              { font-size: 10px; line-height: 1; }
.text-\[9px\].w-3\.5.h-3\.5   { font-size: 10px; line-height: 1; }

/* map dimension labels were 11px presentation attributes; lift the
   six rotated ones to 12px without touching the lot-number labels */
#detailViewMap g text { font-size: 12px; }

/* ------------------------------------------------------------
   11. HEADER "Explore" — dropdown button -> plain module label
   Measured on the reference header (navy, 50px): after the logo
   there is no control at all, only a label — 20px white outline
   location pin, gap, "Explore" at 14px/400/pure white. No border,
   no fill, no radius, no chevron, no menu, cursor:auto.
   Ours renders as an 85.5x31 bordered button (1px #254B73) with a
   chevron. Markup is frozen, so the button is demoted in CSS: the
   box is erased, the chevron hidden, the pin drawn as a masked
   ::before (which becomes the first flex item of the .flex button,
   so .items-center centres it), and pointer-events are dropped so
   it can no longer be opened.

   Pre-existing rules in THIS file that had to be neutralised for
   this one selector:
     - §3  `header .text-gray-200` -> --c-on-dark-2 (#C3CEDC).
            The label must be pure white, so --c-on-dark is forced
            back here. Equal specificity (0,1,1), later source.
     - §5  `.rounded-md` -> --r-chip (6px). Reset to 0.
   Rules deliberately left alone because they already agree:
     - §1  `.text-xs`      -> 14px  (the target size)
     - §2  `.font-medium`  -> 400   (the target weight, on the span)
     - §8  `button { white-space: nowrap }` keeps it on one line.
   Not applicable, checked: §8 `main button:not(...)` min-height
   32px is scoped to `main`, so it never reaches the header and
   nothing has to be undone for it.

   !important appears only on `background`, because the compiled
   utility `.hover\:bg-\[\#1A3857\]:hover` is (0,2,0) and would
   otherwise outrank this (0,1,1) selector on hover.
   ------------------------------------------------------------ */
header [data-act="toggleExploreDropdown"],
header [data-act="toggleExploreDropdown"]:hover,
header [data-act="toggleExploreDropdown"]:focus,
header [data-act="toggleExploreDropdown"]:active {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  color: var(--c-on-dark);
  font-size: var(--fs-2);
  line-height: var(--lh-text);
  pointer-events: none;   /* a label, not a control */
  cursor: default;
}

/* the weight lives on the inner span.font-medium, not the button */
header [data-act="toggleExploreDropdown"] > span { font-weight: 400; }

/* the chevron is the last thing that still reads as "menu" */
header [data-act="toggleExploreDropdown"] > svg { display: none; }

/* 20px outline location pin, drawn as a mask so one colour token
   drives it. The data-URI is inline (no external request); its
   stroke colour is irrelevant under a mask — only alpha is read —
   and the visible colour comes from background-color below. Stroke
   width 1.6 matches the other 1.5-2px header glyphs. */
header [data-act="toggleExploreDropdown"]::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: var(--c-on-dark);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3Ccircle cx='12' cy='10.5' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3Ccircle cx='12' cy='10.5' r='3'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* the menu can never be left open, whatever the script does to the
   .hidden class — !important because the toggle removes it */
#exploreDropdown { display: none !important; }