/* RND.Hub — Design System (glassmorphism futuristic, cyan tint) */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --glass-bg: rgba(22, 58, 72, 0.70);
  --glass-bg-strong: rgba(20, 62, 78, 0.78);
  --glass-border: rgba(0, 210, 255, 0.16);
  --glass-border-hover: rgba(0, 210, 255, 0.38);
  --glass-glow: rgba(0, 200, 240, 0.09);
  --glass-glow-strong: rgba(0, 200, 240, 0.16);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 200, 240, 0.08);
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 12px rgba(0, 200, 240, 0.16);
  --glass-blur: blur(16px);
  --glass-radius: 10px;
  --accent-cyan: #00d4ff;
  --accent-cyan-dim: rgba(0, 212, 255, 0.5);
}

/* ── Global card override (volumetric glass panels) ────────────────────────── */
.card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-hover);
}

.card-header {
  background: rgba(0, 200, 240, 0.04) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ── Body background subtle gradient ───────────────────────────────────────── */
body {
  background: linear-gradient(160deg, #101a24 0%, #153040 40%, #122530 100%) !important;
  background-attachment: fixed !important;
}

/* ── Page header ─────────────────────────────────────────────────────────────── */

.page-header {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}

.page-header h2 {
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Kanban column ───────────────────────────────────────────────────────────── */

.kanban-col {
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: 10px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  /* top border set inline per-column to carry status colour */
}

.kanban-col-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* The research board overrides this inline with the stage colour.  The
     default is light rather than inherited: an execution board has no stage
     palette, and without a colour of its own the heading fell back to the
     body's muted grey — unreadable on the dark panel. */
  color: #eaf7fb;
}

/* The column title is an input on an execution board (renamed in place), and
   an <input> does not inherit the header's colour — the same trap as the
   editable DataTable cells. */
/* The board title is an input for whoever manages the board; like the column
   input, it needs its colour stated — an <input> does not inherit it. */
.ws-title-input,
.ws-title-input:focus {
  color: #eaf7fb !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1.75rem;
  font-weight: 500;
  padding-left: 0 !important;
}
.ws-title-input:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.ws-col-title-input,
.ws-col-title-input:focus {
  color: #eaf7fb !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.ws-col-title-input:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Kanban card ─────────────────────────────────────────────────────────────── */

.kanban-card {
  cursor: grab;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.kanban-card .card {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 4px var(--glass-glow) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kanban-card:hover .card {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}

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

.kanban-card.kanban-dragging {
  opacity: 0.45;
}

.kanban-card.kanban-dragging .card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Tag badge — monospace, constrained to card width */
.kanban-card .badge {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Cover image */
.cover-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
  display: block;
}

/* ── Drop zone ───────────────────────────────────────────────────────────────── */

.kanban-drop-zone {
  border-radius: 4px;
  min-height: 60px;
  transition: background 0.12s;
}

.kanban-drop-zone.kanban-drop-over {
  background: rgba(0, 200, 240, 0.06);
  outline: 1px dashed rgba(0, 200, 240, 0.35);
  outline-offset: 2px;
}

/* ── Kanban lazy-load placeholder ───────────────────────────────────────────── */

.kanban-load-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  color: #6c757d;
  margin-bottom: 6px;
  animation: kanban-pulse 1.2s ease-in-out infinite;
}

@keyframes kanban-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}

/* ── Modal ───────────────────────────────────────────────────────────────────── */

.modal-body hr {
  opacity: 0.12;
  margin: 12px 0;
}

/* ── Inputs focus ────────────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-cyan-dim) !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 240, 0.15) !important;
}

/* ── dcc.Dropdown dark theme (DARKLY) ────────────────────────────────────────── */
/* Dash 4.x's dcc.Dropdown puts the className prop directly on the trigger
   <button> itself: className={`dash-dropdown ${className}`} — so a custom
   class and "dash-dropdown" are the SAME element, not nested, and a
   descendant combinator between them never matches.  Left unstyled, the
   button keeps the design system's default white background
   (--Dash-Fill-Inverse-Strong: #fff), which is where "white text on white"
   comes from.

   These rules target ".dash-dropdown" itself rather than a per-page class:
   the fix used to be scoped to the budget page, so every dropdown added
   afterwards — filters, board panels, the public showcase — was unreadable
   until someone noticed. One rule for the whole application.

   The options popover is rendered via a React Portal into a sibling
   ".dash-dropdown-wrapper" div (not a descendant of the button), so it is
   reached from the wrapper rather than through the trigger. */

.dash-dropdown {
  background-color: #2b3035 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  color: #dee2e6 !important;
}
.dash-dropdown:hover {
  border-color: rgba(255,255,255,0.35) !important;
}
.dash-dropdown .dash-dropdown-value,
.dash-dropdown .dash-dropdown-value * {
  color: #f1f3f5 !important;
}
.dash-dropdown .dash-dropdown-placeholder {
  color: #8a9199 !important;
}
.dash-dropdown .dash-dropdown-trigger-icon {
  color: #adb5bd !important;
  fill: #adb5bd !important;
}
.dash-dropdown-wrapper .dash-dropdown-content {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  z-index: 9999 !important;
}
.dash-dropdown-wrapper .dash-dropdown-option {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
}
.dash-dropdown-wrapper .dash-dropdown-option:hover {
  background-color: #3a4048 !important;
}
.dash-dropdown-wrapper .dash-dropdown-search-container {
  background-color: #2b3035 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.dash-dropdown-wrapper .dash-dropdown-search {
  color: #f1f3f5 !important;
}
.dash-dropdown-wrapper .dash-dropdown-clear {
  color: #adb5bd !important;
}

/* Match the other labor-row fields (position/employment/rate/share/months/
   overhead) to the same dark palette as the person dropdown above. */
#budget-labor-container .form-control,
#budget-labor-container .form-select,
#budget-labor-container .input-group-text {
  background-color: #2b3035 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f1f3f5 !important;
}
#budget-labor-container .form-control::placeholder {
  color: #8a9199 !important;
  opacity: 1 !important;
}
#budget-labor-container .form-control:disabled,
#budget-labor-container .form-select:disabled {
  background-color: #23272b !important;
  color: #8a9199 !important;
}
#budget-labor-container .form-select option {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
}

/* ── DataTable cell editing (dark theme) ─────────────────────────────────────── */
/* The <input> Dash renders inside a cell while it's being edited doesn't
   inherit style_cell's color — it falls back to the browser default (near-
   black) text on the cell's dark background, making it unreadable. */

.dash-spreadsheet-container input {
  background-color: transparent !important;
  color: #f1f3f5 !important;
}

/* DataTable hardcodes row-hover background via the --hover CSS variable,
   redeclared directly on the <table> element itself (default #fdfdfd) —
   it showed as a light flash over our dark cells on mouseover. Since the
   library re-declares --hover on the <table> element, an ancestor rule
   doesn't override it; target the table element directly with higher
   specificity instead. */
#budget-equipment-table .dash-spreadsheet-inner table {
  --hover: rgba(255, 255, 255, 0.06) !important;
}

/* ── Skills matrix: override DataTable's hardcoded 500px max-height ──────────── */
#skills-matrix-table .dash-spreadsheet.dash-virtualized,
#skills-matrix-table .dash-spreadsheet.dash-freeze-top {
  max-height: none !important;
}

/* ── DataTable tooltips ───────────────────────────────────────────────────────── */

.dash-tooltip,
.dash-tooltip p,
.dash-tooltip span,
.dash-tooltip div {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #bbb !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background: rgba(16, 38, 50, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 1030;
  overflow-y: auto;
  padding: 0;
}

.sidebar-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e0e0e0;
}

.sidebar-nav {
  padding: 8px 0;
  flex: 1;
}

.sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 14px 16px 4px;
}

.sidebar-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 7px 16px !important;
  border-radius: 0 !important;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.sidebar-link.active {
  background: rgba(0, 200, 240, 0.10) !important;
  color: var(--accent-cyan) !important;
  border-left: 3px solid var(--accent-cyan);
}

.sidebar-divider {
  border-color: rgba(255, 255, 255, 0.07);
  margin: 8px 16px;
}

.sidebar-user {
  padding: 8px 16px 16px;
}

.sidebar-username {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 4px;
}

.sidebar-logout {
  font-size: 12px;
  padding: 4px 0 !important;
}

.sidebar-filters {
  padding: 0 12px 12px;
}

.sidebar-filters-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

.sidebar-filter-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.sidebar-filters select,
.sidebar-filters .form-select {
  background-color: rgba(30, 30, 46, 0.9) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-filters select option {
  background-color: #1e1e2e;
  color: #e0e0e0;
}

.sidebar-filters input:not(.form-check-input),
.sidebar-filters .form-control {
  background-color: rgba(30, 30, 46, 0.9) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-filters input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.sidebar-filters .form-check-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.sidebar-filters .form-check-input:checked {
  background-color: #375a7f;
  border-color: #375a7f;
}

.main-content {
  margin-left: 240px;
  padding-top: 16px;
  min-height: 100vh;
}

/* P17.2.1: pages rendered without a sidebar (login, register, public board)
   must not reserve space for one.  Set from the callback in app.py, so the
   offset follows what is actually rendered rather than guessing from the URL
   in CSS. */
.main-content--full {
  margin-left: 0;
}

/* ── Sidebar responsive ─────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .sidebar { width: 60px; }
  .sidebar-brand,
  .sidebar-group-label,
  .sidebar-filters,
  .sidebar-username { display: none; }
  .sidebar-link { text-align: center; padding: 10px 0 !important; font-size: 16px; }
  .sidebar-link .bi { margin: 0 !important; }
  .main-content { margin-left: 60px; }
  /* This block sits below the base rule, so the modifier has to be restated
     here or the collapsed sidebar's 60px would come back on pages that have
     no sidebar at all. */
  .main-content--full { margin-left: 0; }
}

@media (max-width: 767.98px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
}

/* ── DataTable glass styling ───────────────────────────────────────────────── */

.dash-spreadsheet-container {
  background: var(--glass-bg) !important;
  border-radius: var(--glass-radius) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: rgba(0, 200, 240, 0.06) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
  border-bottom: 1px solid rgba(0, 210, 255, 0.06) !important;
}

/* ── Modal glass ───────────────────────────────────────────────────────────── */

.modal-content {
  background: rgba(18, 44, 56, 0.96) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 200, 240, 0.08);
}

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
}

/* ── Buttons — primary cyan accent ─────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, rgba(0, 160, 220, 0.8), rgba(0, 200, 240, 0.6)) !important;
  border: 1px solid rgba(0, 200, 240, 0.3) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 200, 240, 0.15);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(0, 200, 240, 0.25) !important;
  border-color: rgba(0, 200, 240, 0.5) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 240, 0.18);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 240, 0.35);
}

/* ── Embedded help (P13.1) ─────────────────────────────────────────────────── */
.help-icon-wrap {
  display: inline-flex;
  align-items: center;
}

.help-icon {
  color: var(--accent-cyan-dim);
  opacity: 0.5;
  margin-left: 0.3rem;
  cursor: help;
  font-size: 0.85em;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.help-icon:hover,
.help-icon:focus {
  color: var(--accent-cyan);
  opacity: 1;
  outline: none;
}

.help-icon:focus-visible {
  outline: 1px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

.help-label-text {
  font-weight: 500;
}

/* Tooltip + popover surfaces under the glass design language */
.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  background: var(--glass-bg-strong);
  color: #e8f6fb;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  max-width: 260px;
  font-size: 0.82rem;
  text-align: left;
}

.help-popover.popover {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  max-width: 320px;
}

.help-popover .popover-body {
  color: #e8f6fb;
  font-size: 0.85rem;
}

.help-popover .help-md :last-child {
  margin-bottom: 0;
}

/* Teaching empty state */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #9fb8c2;
}

.empty-state-icon {
  font-size: 2.4rem;
  color: var(--accent-cyan-dim);
  display: block;
  margin-bottom: 0.75rem;
}

.empty-state-title {
  color: #e8f6fb;
  margin-bottom: 0.4rem;
}

.empty-state-hint {
  font-size: 0.9rem;
  max-width: 420px;
  margin: 0 auto 1rem;
}

.empty-state-action {
  margin-top: 0.5rem;
}

/* Help page (P13.6) */
.help-page .help-search {
  max-width: 480px;
}

.help-page .help-section-title {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.25rem;
}

.help-page .help-md :last-child {
  margin-bottom: 0;
}

@media print {
  .sidebar,
  #sidebar-container,
  .help-search,
  #help-print,
  .help-panel,
  .dash-debug-menu,
  .dash-debug-menu__outer {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .help-page .accordion-collapse {
    display: block !important;   /* expand all entries for print */
  }
}

/* Onboarding checklist (P13.5) */
.onboarding-card {
  border: 1px solid var(--glass-border) !important;
  background: rgba(0, 200, 240, 0.05) !important;
}

.onboarding-card .card-header {
  background: rgba(0, 200, 240, 0.08) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.onb-step-link {
  color: var(--accent-cyan) !important;
  text-decoration: none;
}

.onb-step-link:hover {
  text-decoration: underline;
}

.onb-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.onb-dismiss {
  color: #9fb8c2 !important;
  text-decoration: none !important;
}

.onb-dismiss:hover {
  color: var(--accent-cyan) !important;
}

.onb-restore {
  color: var(--accent-cyan-dim) !important;
  text-decoration: none !important;
}

.onb-restore:hover {
  color: var(--accent-cyan) !important;
}

/* Page help panel (P13.3) */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-help-btn {
  color: var(--accent-cyan-dim) !important;
  padding: 0 0.35rem !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.sidebar-help-btn:hover,
.sidebar-help-btn:focus {
  color: var(--accent-cyan) !important;
}

.help-panel.offcanvas {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border) !important;
}

.help-panel .offcanvas-title {
  color: var(--accent-cyan);
}

.help-panel-md {
  color: #e8f6fb;
  font-size: 0.9rem;
}

.help-panel-md h1,
.help-panel-md h2,
.help-panel-md h3 {
  color: var(--accent-cyan);
  font-size: 1rem;
  margin-top: 1.1rem;
}

.help-panel-md h1:first-child,
.help-panel-md h2:first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .help-icon,
  .tooltip,
  .tooltip.fade,
  .help-popover,
  .popover.fade,
  .help-panel.offcanvas {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Public showcase (P19) ─────────────────────────────────────────────────────
   The public page has a different reader from the rest of the system — someone
   choosing a topic, not operating a tool.  It keeps the dark identity but trades
   the working density for air: larger radii, generous padding, tinted shadows
   instead of hard borders.  Tokens are reused; no new palette. */

.public-page {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.public-cover {
  padding: 48px 40px 40px;
  margin-bottom: 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 200, 240, 0.16), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 40px rgba(0, 200, 240, 0.07);
}

.public-cover-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: #eaf7fb;
}

.public-cover-lead {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(234, 247, 251, 0.66);
  margin-bottom: 28px;
}

.public-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.public-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-cyan);
  line-height: 1;
}

.public-stat-caption {
  font-size: 13px;
  color: rgba(234, 247, 251, 0.55);
  margin-top: 6px;
}

.public-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.public-filter-label {
  font-size: 13px;
  color: rgba(234, 247, 251, 0.55);
}

/* Groups stack in priority order — new topics first, then work in progress,
   then the portfolio.  Side-by-side columns split the monitor into two narrow
   strips and put «В работе» level with «Новые темы», which is not the order a
   visitor reads in. */
.public-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.public-group {
  padding: 20px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--accent-cyan);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 28px rgba(0, 200, 240, 0.06);
}

.public-group-head {
  margin-bottom: 16px;
}

.public-group-title {
  font-size: 17px;
  font-weight: 700;
  color: #eaf7fb;
}

.public-group-count {
  margin-left: 8px;
  font-size: 13px;
  color: rgba(234, 247, 251, 0.5);
}

.public-group-hint {
  font-size: 12px;
  color: rgba(234, 247, 251, 0.45);
  margin-top: 2px;
}

/* Cards fill the width of a full-width block: three across on a monitor, one
   on a phone, without a breakpoint per size. */
.public-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Cards carry their own surface here — .kanban-card is only kept so the
   existing click handler finds them. */
.public-card {
  border-radius: 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.public-card:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 16px var(--glass-glow-strong);
}

/* One height for every card: a grid of ragged tiles reads as broken layout
   rather than as varying content.  The cap is the tallest a card needs when
   its title runs to three lines with a row of skills under it; longer titles
   are clipped and read in full in the dialog. */
.public-card-body {
  padding: 16px 18px;
  height: 186px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.public-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.public-card-direction {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.public-card-type {
  font-size: 11px;
  color: rgba(234, 247, 251, 0.45);
}

.public-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #eaf7fb;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.public-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 26px;      /* one row; the rest are visible in the dialog */
  overflow: hidden;
}

.public-skill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  color: rgba(0, 212, 255, 0.85);
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid rgba(0, 212, 255, 0.18);
}

.public-card-tag {
  font-size: 11px;
  color: rgba(234, 247, 251, 0.35);
  letter-spacing: 0.04em;
  margin-top: auto;      /* pinned to the bottom, so tags line up across cards */
}

.public-empty,
.public-footer {
  padding: 28px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(234, 247, 251, 0.6);
  text-align: center;
}

.public-footer {
  margin-top: 28px;
  font-size: 14px;
}

@media (max-width: 991.98px) {
  .public-cover { padding: 32px 24px; }
  .public-cover-title { font-size: 32px; }
  .public-stats { gap: 24px; }
}