/* =========================================================================
   Looq design system — brand tokens + base styles.

   Brand source: Limar-AI/branding (GitHub), tokens/tokens.json v1.0.0 +
   guidelines/{color,typography,logo}.md, pulled 2026-08-19. Brand hex
   values below have been corrected to match that source exactly (a few
   were off by a shade — e.g. teal was #41c3d8, official Blue 200 is
   #42C3D8). CSS variable *names* are unchanged from the previous version
   of this file so every existing template keeps working.

   New token scales added in this pass (all additive, nothing removed):
     - --space-1..8       a spacing rhythm (4/8/12/16/20/24/32/48px) so
                          future layout work has a consistent scale to
                          reach for instead of ad hoc pixel values.
     - --radius-lg/xl     larger radii for elevated/hero surfaces
                          (login card, teaser media), on top of the
                          existing --radius-sm/md used by buttons/cards.
     - --shadow-xs/sm/md/lg  a soft, navy-tinted elevation scale, replacing
                          the old single flat --shadow-card (kept as an
                          alias to --shadow-sm for backward compatibility
                          since a couple of templates reference it
                          directly).
     - --ease, --transition-fast/base   shared easing/duration for hover
                          and focus micro-interactions.
     - --ring             brand's own token for focus rings (#76D4E3).
     - a handful of semantic tokens (hover/active states for the accent
       button, border strengths, status tints) taken straight from the
       brand repo's tokens.json "semantic" block.
   ========================================================================= */

:root {
  /* ---- Brand palette (Limar-AI/branding tokens.json > color.brand) ---- */
  --looq-navy: #101639;       /* Blue 600 — deep surfaces, headers */
  --looq-navy-800: #050712;   /* Blue 800 — darkest surface / text-on-light */
  --looq-orange: #ef5425;     /* Orange 400 — brand accent, CTAs only */
  --looq-teal: #42c3d8;       /* Blue 200 — secondary accent */
  --looq-bg: #f5f7f9;         /* Grey 100 — light background */
  --looq-blue: #0c4d8e;       /* text-link semantic token — links */
  --looq-slate: #32475b;      /* Grey 600 — body text, muted UI */
  --looq-gray: #809499;       /* Grey 400 — borders, dividers, hints */
  --looq-gray-200: #e4e9ed;   /* Grey 200 — surfaces, cards, dividers */
  --looq-green: #56c158;      /* status-success */
  --looq-yellow: #eacb2f;     /* status-warning */
  --looq-white: #ffffff;

  /* Extended tints used for badges/status chips (from the brand repo's
     extended UI scale — palette.green-100/700, yellow-100/700, red-100). */
  --looq-green-100: #e7f6e8;
  --looq-green-700: #397f3a;
  --looq-yellow-100: #fcf8e2;
  --looq-yellow-700: #9a861f;
  --looq-red-100: #fde7e0;

  /* Accent hover/active states — straight from tokens.json > semantic.
     Orange is a CTA-only accent; these give it a real pressed/hover
     feel instead of a flat opacity fade. */
  --looq-accent-hover: #c9471f;
  --looq-accent-active: #9e3718;
  --looq-teal-hover: #37a4b5;
  --looq-ring: #76d4e3; /* brand's dedicated focus-ring color */

  /* Semantic aliases (unchanged names from the previous version) */
  --color-bg: var(--looq-bg);
  --color-surface: var(--looq-white);
  --color-text: var(--looq-navy);
  --color-text-muted: var(--looq-gray);
  --color-border: #dde3e7;
  --color-border-strong: #b9c3c9;
  --color-well: #eef2f4; /* recessed/sunken surfaces: kanban columns, read-only fields */
  --color-primary: var(--looq-navy);
  --color-accent: var(--looq-orange);
  --color-info: var(--looq-teal);
  --color-success: var(--looq-green);
  --color-warning: var(--looq-yellow);

  /* ---- Type ---- */
  --font-headline: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-quote: "Merriweather", Georgia, serif;

  /* ---- Spacing rhythm (new) — a scale to reach for in future layout
     work; existing inline pixel values in templates are left as-is in
     this pass. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ---- Elevation — soft, navy-tinted shadows instead of one flat
     value. --shadow-card is kept as an alias so the two templates that
     reference it directly (public_teaser.html, public_deck_view.html)
     keep working unchanged. */
  --shadow-xs: 0 1px 2px rgba(16, 22, 57, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 22, 57, 0.05), 0 2px 6px rgba(16, 22, 57, 0.05);
  --shadow-md: 0 4px 10px rgba(16, 22, 57, 0.08), 0 2px 4px rgba(16, 22, 57, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 22, 57, 0.16), 0 4px 10px rgba(16, 22, 57, 0.06);
  --shadow-card: var(--shadow-sm);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease);
  --transition-base: 180ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--looq-navy);
  margin: 0 0 0.5em 0;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.7rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.25;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600; /* Chivo SemiBold — brand's "Card Title" weight */
  letter-spacing: -0.005em;
}

h4 {
  font-size: 0.9rem;
  font-weight: 600;
}

p {
  margin: 0 0 0.75em 0;
}

a {
  color: var(--looq-blue);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--looq-navy);
}

/* Secondary/muted text used pervasively (hints, captions, descriptions).
   Previously unstyled — every "meta" line rendered identically to body
   copy, which flattened the whole app's hierarchy. */
.meta {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

:focus-visible {
  outline: 2px solid var(--looq-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--looq-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(16, 22, 57, 0.02), var(--shadow-xs);
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar .brand img {
  height: 26px;
}

.topbar .brand strong {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--looq-slate);
}

.topbar nav {
  display: flex;
  gap: 2px;
}

.topbar nav a {
  text-decoration: none;
  color: var(--looq-slate);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.topbar nav a:hover {
  background: var(--color-well);
  color: var(--looq-navy);
}

.topbar nav a.active {
  background: var(--looq-navy);
  color: var(--looq-white);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.container-wide {
  max-width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* A button sitting next to a width:100% input/select in a flex row (a
     readonly link/URL field with a Copy/Preview button beside it, all
     over this app) must never be the one that shrinks -- the input can
     get narrower, but a button's own label wrapping onto two lines
     looks broken. */
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  background: var(--looq-navy);
  color: var(--looq-white);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
  background: #1a2350;
  box-shadow: var(--shadow-sm);
}

.btn:active {
  background: #0a0e26;
  box-shadow: var(--shadow-xs);
}

/* Accent button — reserved for the one primary call-to-action on a
   screen (e.g. "I Agree and Continue", "Request a meeting"). Hover/active
   colors are the brand's own accent-hover/accent-active tokens rather
   than a generic opacity fade. */
.btn-accent {
  background: var(--looq-orange);
  border-color: var(--looq-orange);
}

.btn-accent:hover {
  background: var(--looq-accent-hover);
  border-color: var(--looq-accent-hover);
}

.btn-accent:active {
  background: var(--looq-accent-active);
  border-color: var(--looq-accent-active);
}

/* Outline button — the tertiary/secondary action. Visually quieter than
   both primary and accent: no shadow at rest, flat border, fills in
   softly on hover instead of inverting. */
.btn-outline {
  background: transparent;
  color: var(--looq-slate);
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
  font-weight: 500;
}

.btn-outline:hover {
  background: var(--color-well);
  color: var(--looq-navy);
  border-color: var(--looq-gray);
  box-shadow: none;
}

.btn-outline:active {
  background: var(--looq-gray-200);
}

.btn.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--looq-bg);
  color: var(--looq-slate);
  border: 1px solid transparent;
}

.badge-success {
  background: var(--looq-green-100);
  color: var(--looq-green-700);
}

.badge-warning {
  background: var(--looq-yellow-100);
  color: var(--looq-yellow-700);
}

.badge-accent {
  background: var(--looq-red-100);
  color: var(--looq-orange);
}

/* Kanban board */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.board-column {
  background: var(--color-well);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 200px;
}

.board-column h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--looq-slate);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.board-column .count {
  background: var(--looq-white);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  box-shadow: var(--shadow-xs);
}

.board-list {
  min-height: 60px;
}

.investor-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  border-left: 3px solid var(--looq-teal);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.investor-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.investor-card:active {
  cursor: grabbing;
}

.investor-card .firm {
  font-weight: 700;
  font-size: 14px;
}

.investor-card .meta {
  font-size: 12px;
  margin-top: 2px;
}

.sortable-ghost {
  opacity: 0.4;
}

[x-cloak] {
  display: none !important;
}

th.sortable-th {
  position: relative;
}

.th-btn {
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--looq-slate);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  transition: color var(--transition-fast);
}

th.sortable-th .th-btn:hover {
  color: var(--looq-navy);
}

.th-dropdown {
  /* fixed, not absolute: escapes the resizable table wrapper's overflow-x
     clipping (see th-dropdown.js for why). Position is set via JS on open. */
  position: fixed;
  z-index: 100;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 180px;
}

.th-dropdown a,
.th-dropdown .th-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: background var(--transition-fast);
}

.th-dropdown a:hover {
  background: var(--color-well);
  color: var(--looq-navy);
}

.th-dropdown .th-divider {
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.th-range-form {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.th-range-form label {
  margin: 4px 0 0 0;
  text-transform: none;
  font-size: 11px;
}

.th-range-form input {
  padding: 4px 6px;
  font-size: 12px;
}

/* Resizable tables */
.resizable-table-wrap {
  overflow-x: auto;
  width: 100%;
  border-radius: var(--radius-md);
}

.resizable-table {
  table-layout: fixed;
  width: 100%;
  min-width: 900px;
}

.resizable-th {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  transition: background var(--transition-fast);
}

.col-resize-handle:hover,
.col-resize-handle.resizing {
  background: var(--looq-teal);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

table.data-table th,
table.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 14px;
}

table.data-table th {
  background: var(--looq-bg);
  font-weight: 700;
  color: var(--looq-slate);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border-strong);
}

table.data-table tbody tr {
  transition: background var(--transition-fast);
}

table.data-table tbody tr:hover {
  background: var(--color-well);
}

/* Table footer: pagination + row-count select, always right-aligned on one line */
.table-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.table-footer .meta {
  white-space: nowrap;
}

.page-size-select {
  width: auto;
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 13px;
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A soft brand-teal glow rather than a flat fill — deliberately no
     orange here: the brand guide reserves orange for CTAs/highlights,
     never a page or section background. */
  background: radial-gradient(1100px circle at 12% -10%, rgba(66, 195, 216, 0.12), transparent 55%),
    radial-gradient(900px circle at 105% 105%, rgba(16, 22, 57, 0.05), transparent 50%), var(--color-bg);
  padding: 24px;
}

.login-card {
  width: 380px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}

.login-card img {
  height: 30px;
  margin-bottom: 24px; /* brand clear-space rule: ~60% of wordmark height */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
  border-color: var(--looq-gray);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--looq-teal);
  box-shadow: 0 0 0 3px rgba(66, 195, 216, 0.2);
}

input::placeholder,
textarea::placeholder {
  color: var(--looq-gray);
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--looq-slate);
  margin-bottom: 4px;
  margin-top: 12px;
}

.error {
  color: var(--looq-orange);
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}

/* ---- Spreadsheet preview (server-rendered from the original .xlsx) ----
   Cell-level colour/weight/alignment come through as inline styles from
   app/xlsx_render.py, so the rules here only supply the chrome the
   workbook itself doesn't carry: gridlines, tab strip, and scrolling. */
.xlsx-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.xlsx-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.xlsx-tab:hover {
  background: var(--looq-bg);
  color: var(--color-text);
}

.xlsx-tab.is-active {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--looq-navy);
  font-weight: 600;
  margin-bottom: -1px;
}

.xlsx-note {
  margin: 0 0 8px 0;
  padding: 6px 10px;
  background: var(--looq-bg);
  border-left: 3px solid var(--looq-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The workbook decides its own column widths, so the table must be free to
   exceed the card and scroll rather than being squeezed to fit. */
.xlsx-scroll {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

table.xlsx-sheet {
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
  table-layout: fixed;
}

table.xlsx-sheet td {
  border: 1px solid var(--color-border);
  padding: 3px 7px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= Overview dashboard ================= */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast),
    border-color var(--transition-fast);
}

a.stat-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
}

.stat-value {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--looq-navy);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--looq-slate);
}

.stat-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* The two tiles that should pull the eye first: the backlog to work
   through, and the threads currently live. */
.stat-tile-accent {
  border-left: 3px solid var(--looq-orange);
}
.stat-tile-accent .stat-value {
  color: var(--looq-orange);
}
.stat-tile-live {
  border-left: 3px solid var(--looq-teal);
}

/* ---- Funnel ---- */
.funnel-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-well);
  margin-bottom: 14px;
}

.funnel-seg {
  min-width: 3px;
  transition: opacity var(--transition-fast);
}
.funnel-seg:hover {
  opacity: 0.82;
}

.funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.funnel-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--looq-slate);
  text-decoration: none;
}
.funnel-key:hover {
  color: var(--looq-navy);
}
.funnel-key strong {
  font-variant-numeric: tabular-nums;
}

.funnel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Stage colours: cool/neutral for early stages, brand accents for the
   stages that represent real progress, muted grey for terminal ones. */
.funnel-target { background: var(--looq-gray); }
.funnel-active_conversation { background: var(--looq-teal); }
.funnel-active_diligence { background: var(--looq-orange); }
.funnel-existing_investor { background: var(--looq-green); }
.funnel-historic { background: var(--looq-gray-200); }
.funnel-passed { background: #cfd6da; }

/* ---- Panels ---- */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.card-head h3 {
  margin: 0;
}
.card-head a.meta {
  text-decoration: none;
  white-space: nowrap;
}

.ov-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ov-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.ov-list li:last-child {
  border-bottom: none;
}
.ov-list a {
  text-decoration: none;
  font-weight: 500;
}
.ov-list a:hover {
  text-decoration: underline;
}
.ov-list .meta {
  font-size: 12.5px;
}

.ov-date {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-text-muted);
  min-width: 46px;
  flex-shrink: 0;
}

.ov-note {
  margin: 10px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* ===================== Investor portal ======================
   The investor-facing shell. Deliberately warmer and more composed than
   the internal CRM: this is the surface a fund partner judges Looq by,
   so it gets a real background treatment rather than the flat grey the
   admin tools use. The background is two very soft brand-tinted radial
   washes over the light base -- navy and teal, no orange (the brand book
   reserves orange for CTAs, never fills). */
.portal-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--looq-bg);
  background-image:
    radial-gradient(58rem 34rem at 12% -8%, rgba(66, 195, 216, 0.16), transparent 60%),
    radial-gradient(50rem 30rem at 92% 4%, rgba(16, 22, 57, 0.10), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.portal-preview-banner {
  background: var(--looq-orange);
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: 13px;
  font-weight: 600;
}

.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(16, 22, 57, 0.07);
  position: sticky;
  top: 0;
  z-index: 20;
}

.portal-brand img {
  height: 24px;
  display: block;
}

.portal-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-firm {
  font-size: 13px;
  font-weight: 600;
  color: var(--looq-slate);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 13px;
}

.portal-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 64px;
}

/* ---- Home hero ---- */
.portal-hero {
  max-width: 680px;
  margin-bottom: 40px;
}

.portal-eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--looq-teal);
  margin: 0 0 10px 0;
}

.portal-hero h1 {
  font-size: 2.3rem;
  line-height: 1.16;
  letter-spacing: -0.022em;
  margin: 0 0 14px 0;
}

.portal-lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--looq-slate);
  margin: 0;
}

.portal-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 14px 0;
}

/* ---- Material tiles ---- */
.portal-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.portal-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 20px;
  background: var(--color-surface);
  border: 1px solid rgba(16, 22, 57, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* A thin accent rule along the top edge, colour-coded per tier, so the
   three tiles read as distinct materials at a glance. */
.portal-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--looq-teal);
}
.portal-tile-deck::before { background: var(--looq-orange); }
.portal-tile-dataroom_legal_hr_ip::before { background: var(--looq-blue); }

.portal-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(16, 22, 57, 0.14);
}

.portal-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.portal-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--looq-bg);
  color: var(--looq-navy);
}

.portal-tile h3 {
  margin: 0;
  font-size: 1.06rem;
}

.portal-tile .meta {
  flex: 1;
}

.portal-tile-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--looq-blue);
}
.portal-tile:hover .portal-tile-cta {
  color: var(--looq-navy);
}

.portal-empty {
  max-width: 520px;
}

.portal-footnote {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 22, 57, 0.08);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .dr-split {
    grid-template-columns: 1fr;
  }
}

.dr-doc.is-active {
  background: var(--looq-navy);
  color: #fff;
  font-weight: 500;
}

.pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--color-border);
}

.pane-title {
  margin: 0;
  font-size: 1.12rem;
}

.pane-sub {
  margin: 3px 0 0 0;
  font-size: 12.5px;
}

.pane-body {
  padding: 20px 22px 24px;
}

.pane-body #pdf-viewer,
.pane-body [id^="pdf-viewer-"] {
  text-align: center;
}

.pane-body canvas {
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.htmx-request .dr-loading,
.dr-loading.htmx-request {
  opacity: 1;
}

/* ============ Merged portal workspace (deck + both datarooms) ============
   Full-bleed two-pane layout: one index on the left covering every tier
   the firm can see, one large viewer on the right. The sidebar collapses
   so the reader can hand the whole width to the active document. */
.portal-main-full {
  max-width: none;
  margin: 0;
  padding: 0;
}

.ws {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 0;
  height: calc(100vh - 57px); /* viewport minus the portal topbar */
  transition: grid-template-columns var(--transition-base);
}

.ws.is-collapsed {
  grid-template-columns: 52px 1fr;
}

@media (max-width: 820px) {
  .ws,
  .ws.is-collapsed {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* ---- Sidebar ---- */
.ws-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-right: 1px solid rgba(16, 22, 57, 0.08);
}

.ws-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px 12px 18px;
  border-bottom: 1px solid rgba(16, 22, 57, 0.07);
  flex-shrink: 0;
}

.ws-side-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ws-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--looq-slate);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}
.ws-collapse:hover {
  background: var(--looq-navy);
  border-color: var(--looq-navy);
  color: #fff;
}

.ws-side-scroll {
  overflow-y: auto;
  padding: 10px 10px 24px;
  min-height: 0;
  flex: 1;
}

.ws-group + .ws-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.ws-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  color: var(--looq-navy);
  transition: background var(--transition-fast);
}
.ws-group-head:hover {
  background: var(--looq-bg);
}

.ws-caret {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.ws-caret.is-open {
  transform: rotate(90deg);
}

.ws-group-label {
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ws-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--looq-bg);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

.ws-cat {
  padding-left: 6px;
}

.ws-cat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 8px 3px 14px;
}

.ws-cat-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.ws-cat-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ws-docs {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
}

.ws-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--looq-slate);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ws-doc:hover {
  background: var(--looq-bg);
  color: var(--looq-navy);
}
.ws-doc.is-active {
  background: var(--looq-navy);
  color: #fff;
  font-weight: 500;
}

.ws-doc-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-doc-kind {
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  background: var(--looq-gray);
  min-width: 32px;
  text-align: center;
}
.ws-kind-deck { background: var(--looq-orange); }
.ws-kind-pdf { background: #c0392b; }
.ws-kind-excel { background: #1d7044; }
.ws-kind-video { background: var(--looq-blue); }
.ws-kind-other { background: var(--looq-gray); }

.ws-empty {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 2px 8px 8px 20px;
  margin: 0;
}

.ws-download {
  display: inline-block;
  margin: 8px 0 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--looq-blue);
  text-decoration: none;
}
.ws-download:hover {
  text-decoration: underline;
}

/* ---- Viewer ---- */
.ws-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ws-viewer {
  height: 100%;
  overflow-y: auto;
  background: var(--color-surface);
}

/* The deck's own page scales itself to its frame, so it gets the full
   pane with no padding; documents keep normal reading padding. */
.pane-body-flush {
  padding: 0;
  height: calc(100% - 68px);
}

.deck-pane-frame {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: none;
  display: block;
  background: #0b1020;
}

.pane-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ws-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 420px;
  color: var(--color-text-muted);
  text-align: center;
}
.ws-placeholder p {
  margin: 0;
  font-size: 14px;
}

.ws-loading {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
  font-size: 12px;
  font-weight: 600;
  color: var(--looq-slate);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 12px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.htmx-request .ws-loading,
.ws-loading.htmx-request {
  opacity: 1;
}

/* Login card sits directly on .portal-body's background now (it carries
   its own brand wash), so the card supplies its own surface rather than
   relying on .card, and .login-shell's gradient is redundant there. */
.portal-body .login-shell {
  background: none;
}

.login-card {
  background: var(--color-surface);
  border: 1px solid rgba(16, 22, 57, 0.08);
}

.login-eyebrow {
  margin: 0 0 6px 0;
}

.login-card h2 {
  margin: 0 0 6px 0;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
}

.login-hint {
  margin: 0 0 20px 0;
}

/* ============ Access page: merged firm card ============ */
.acc-card {
  padding: 0;
  overflow: hidden;
}

.acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
  background: var(--looq-bg);
}

.acc-firm {
  margin: 0;
  font-size: 1.15rem;
}

.acc-creds-input {
  flex: 1;
  font-size: 12.5px;
  padding: 5px 9px;
}

.acc-creds-pw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

.acc-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.acc-section-title {
  margin: 0 0 2px 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--looq-slate);
}

.acc-perms,
.acc-people {
  max-width: 720px;
}

.acc-perms th:not(:first-child),
.acc-perms td:not(:first-child),
.acc-people th:first-child,
.acc-people td:first-child {
  text-align: center;
}

.acc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.acc-extra {
  margin: 8px 0 0 0;
}
.acc-extra code {
  font-size: 12px;
  background: var(--looq-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.acc-extra-input {
  max-width: 260px;
}

.acc-danger {
  border-bottom: none;
  background: var(--looq-bg);
}

.acc-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

/* Permissions and the firm password side by side: the password gates the
   materials listed next to it, so they read as one decision. */
.acc-perm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .acc-perm-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.acc-pw {
  border-left: 1px solid var(--color-border);
  padding-left: 24px;
}

@media (max-width: 900px) {
  .acc-pw {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: 18px;
  }
}

.acc-pw-hint {
  margin: 0 0 10px 0;
}

.acc-pw-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.acc-pw-row .acc-creds-input {
  min-width: 0;
}

.acc-pw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.acc-pw-none {
  margin: 0 0 10px 0;
}

/* ---- Searchable firm picker (Access page) ---- */
.firm-picker {
  position: relative;
}

.firm-results {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  margin-top: -8px;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}

.firm-result {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--looq-slate);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.firm-result:hover {
  background: var(--looq-navy);
  color: #fff;
}

.firm-none {
  margin: 0;
  padding: 8px 10px;
}

/* Per-document reading time on the investor detail page. */
.doc-engagement { padding: 10px 0; border-top: 1px solid var(--color-border); }
.doc-engagement:first-of-type { border-top: none; padding-top: 0; }
.doc-engagement-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.doc-engagement-sub { margin: 2px 0 0; }