/* ============================================================
   PoliScribe Modern Theme
   A clean, professional design system for mid-2020s aesthetics
   ============================================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary palette */
  --ps-primary: #2563EB;
  --ps-primary-hover: #1D4ED8;
  --ps-primary-light: #DBEAFE;
  --ps-primary-dark: #1E40AF;

  /* Surfaces */
  --ps-surface: #F8FAFC;
  --ps-card: #FFFFFF;
  --ps-border: #E2E8F0;
  --ps-border-hover: #CBD5E1;
  --ps-hover: #F1F5F9;

  /* Text */
  --ps-text: #1E293B;
  --ps-text-secondary: #64748B;
  --ps-text-muted: #94A3B8;

  /* Semantic colors */
  --ps-success: #059669;
  --ps-success-light: #D1FAE5;
  --ps-success-dark: #065F46;
  --ps-danger: #DC2626;
  --ps-danger-light: #FEE2E2;
  --ps-danger-dark: #991B1B;
  --ps-warning: #D97706;
  --ps-warning-light: #FEF3C7;
  --ps-warning-dark: #92400E;
  --ps-info: #0284C7;
  --ps-info-light: #E0F2FE;
  --ps-info-dark: #075985;

  /* Shadows */
  --ps-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ps-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --ps-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --ps-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);

  /* Radii */
  --ps-radius: 0.75rem;
  --ps-radius-sm: 0.5rem;
  --ps-radius-lg: 1rem;

  /* Transitions */
  --ps-transition: 0.15s ease;

  /* Typography scale */
  --ps-text-xs: 0.75rem;
  --ps-text-sm: 0.8125rem;
  --ps-text-base: 0.875rem;
  --ps-text-md: 0.9375rem;
  --ps-text-lg: 1.125rem;
  --ps-text-xl: 1.25rem;
}


/* --- Global Resets & Base --- */

/* Root font size bumped one point (16px -> 17px) so all rem-based
   text across the app scales up uniformly. */
html {
  font-size: 17px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--ps-surface);
  color: var(--ps-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ps-text);
  font-weight: 600;
}

a {
  color: var(--ps-primary);
  transition: color var(--ps-transition);
}
a:hover {
  color: var(--ps-primary-hover);
  text-decoration: none;
}


/* --- Navbar Override --- */

.navbar.ps-navbar {
  background: #2D3748 !important;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 0 1.5rem;
  min-height: 56px;
}

.navbar.ps-navbar .navbar-brand {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar.ps-navbar .navbar-brand img {
  height: 26px;
}

.navbar.ps-navbar .nav-link {
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500;
  /* Matches the page content/breadcrumb scale — the labels carry the nav on
     their own now that the icons are gone. */
  font-size: var(--ps-text-md);
  padding: 1rem 0.875rem !important;
  border-bottom: 2px solid transparent;
  transition: all var(--ps-transition);
  margin-bottom: -1px;
}
.navbar.ps-navbar .nav-link:hover {
  color: #FFFFFF !important;
  background: transparent;
}
.navbar.ps-navbar .nav-item.active > .nav-link,
.navbar.ps-navbar .nav-link.active-nav {
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF;
}

.navbar.ps-navbar .dropdown-menu {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  box-shadow: var(--ps-shadow-md);
  padding: 0.375rem;
  margin-top: 0;
}
.navbar.ps-navbar .dropdown-item {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
  transition: all var(--ps-transition);
}
.navbar.ps-navbar .dropdown-item:hover {
  background: var(--ps-hover);
  color: var(--ps-text);
}
.navbar.ps-navbar .dropdown-item.active,
.navbar.ps-navbar .dropdown-item:active {
  background: var(--ps-primary-light);
  color: var(--ps-primary);
}

/* Navbar search */
.navbar.ps-navbar .ps-nav-search .form-control {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: #FFFFFF;
  transition: all var(--ps-transition);
}
.navbar.ps-navbar .ps-nav-search .form-control:focus {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.15);
}
.navbar.ps-navbar .ps-nav-search .form-control::placeholder {
  color: rgba(255,255,255,0.5);
}
.navbar.ps-navbar .ps-nav-search .btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  padding: 0.375rem 0.625rem;
}
.navbar.ps-navbar .ps-nav-search .btn:hover {
  color: #FFFFFF;
}

/* User avatar in nav */
.ps-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--ps-transition);
}
.ps-avatar:hover {
  background: rgba(255,255,255,0.3);
  color: #FFFFFF;
}

/* Mobile navbar toggler */
.navbar.ps-navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
  padding: 0.375rem 0.625rem;
  border-radius: var(--ps-radius-sm);
}
.navbar.ps-navbar .navbar-toggler .fas {
  color: rgba(255,255,255,0.7);
}


/* --- Alert Overrides --- */

#alerts .alert {
  border: none;
  border-radius: var(--ps-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--ps-shadow-sm);
  padding: 0.75rem 1rem;
}
#alerts .alert-danger {
  background: var(--ps-danger-light);
  color: var(--ps-danger-dark);
}
#alerts .alert-warning {
  background: var(--ps-warning-light);
  color: var(--ps-warning-dark);
}
#alerts .alert-info {
  background: var(--ps-info-light);
  color: var(--ps-info-dark);
}
#alerts .alert-success {
  background: var(--ps-success-light);
  color: var(--ps-success-dark);
}
#alerts .alert .close {
  opacity: 0.6;
  text-shadow: none;
}


/* --- Cards & Containers --- */

.ps-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  overflow: hidden;
}

.ps-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ps-border);
}
.ps-card-header h4,
.ps-card-header h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.ps-card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ps-card-body {
  padding: 1.25rem;
}

/* Bootstrap .card override */
.card {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
}
.card-header {
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  font-weight: 600;
}


/* --- Page Layout --- */

.ps-page {
  padding: 1.5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
.ps-page-full {
  padding: 1.5rem 2rem;
}

.ps-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.ps-page-header h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

/* Breadcrumb */
.ps-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ps-text-muted);
  margin-bottom: 1.25rem;
}
.ps-breadcrumb a {
  color: var(--ps-text-secondary);
  text-decoration: none;
}
.ps-breadcrumb a:hover {
  color: var(--ps-primary);
}
.ps-breadcrumb span:last-child {
  color: var(--ps-text);
  font-weight: 600;
}
.ps-breadcrumb .separator {
  font-size: 0.8125rem;
  color: var(--ps-text-muted);
}


/* --- Tables --- */

.ps-table-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  overflow: visible;
}

.ps-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #2D3748;
  border-bottom: none;
}
.ps-table-header h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #FFFFFF;
}
.ps-table-header .btn {
  border-color: rgba(255,255,255,0.3);
  color: #FFFFFF;
}
.ps-table-header .btn:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}

/* Override Bootstrap table styles */
.ps-table-card .table {
  margin-bottom: 0;
}
.ps-table-card .table thead th {
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  border-top: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ps-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.625rem 1rem;
  white-space: nowrap;
}
.ps-table-card .table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
  color: #334155;
}
.ps-table-card .table tbody tr:last-child td {
  border-bottom: none;
}
.ps-table-card .table-hover tbody tr:hover {
  background: var(--ps-hover);
}
.ps-table-card .table tbody td a {
  color: var(--ps-text);
  font-weight: 500;
  text-decoration: none;
}
.ps-table-card .table tbody td a:hover {
  text-decoration: underline;
}
.ps-table-card .table tbody td.ps-id-cell a {
  color: var(--ps-primary);
  font-weight: 600;
}
.ps-table-card .table tbody td.ps-id-cell {
  font-weight: 600;
  color: var(--ps-primary);
}

/* --- Bill session list tables: give the Summary column room to breathe --- */
/* Fixed layout so the columns honor the widths below and long summary text
   wraps within its own column instead of stretching the table off-screen.
   Column order (8 cols): Bill Number, Session, Topic, Subtopic, Summary,
   Member Disposition, Legislative Stage, Actions. */
.ps-table-card .ps-bills-table {
  table-layout: fixed;
  width: 100%;
}
.ps-table-card .ps-bills-table thead th,
.ps-table-card .ps-bills-table tbody td {
  white-space: normal; /* headers/cells wrap on spaces — no forced-wide columns */
}
.ps-table-card .ps-bills-table td .ps-badge {
  white-space: normal; /* let long status badges wrap rather than clip */
}
.ps-table-card .ps-bills-table td:nth-child(5) {
  overflow-wrap: anywhere; /* summary: break very long tokens if needed */
}
.ps-table-card .ps-bills-table th:nth-child(1),
.ps-table-card .ps-bills-table td:nth-child(1) { width: 8%; }
.ps-table-card .ps-bills-table th:nth-child(2),
.ps-table-card .ps-bills-table td:nth-child(2) { width: 8%; }
.ps-table-card .ps-bills-table th:nth-child(3),
.ps-table-card .ps-bills-table td:nth-child(3) { width: 11%; }
.ps-table-card .ps-bills-table th:nth-child(4),
.ps-table-card .ps-bills-table td:nth-child(4) { width: 9%; }
.ps-table-card .ps-bills-table th:nth-child(5),
.ps-table-card .ps-bills-table td:nth-child(5) { width: 33%; }
.ps-table-card .ps-bills-table th:nth-child(6),
.ps-table-card .ps-bills-table td:nth-child(6) { width: 12%; }
.ps-table-card .ps-bills-table th:nth-child(7),
.ps-table-card .ps-bills-table td:nth-child(7) { width: 11%; }
.ps-table-card .ps-bills-table th:nth-child(8),
.ps-table-card .ps-bills-table td:nth-child(8) { width: 8%; }

/* --- Row "Actions" dropdowns: keep them compact and proportionate --- */
/* Without this they fall through to Bootstrap defaults and inherit the 17px
   root font and the body's 1.6 line-height, making the menu feel oversized. */
.ps-table-card .dropdown-menu {
  min-width: 9rem;
  padding: 0.375rem;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  box-shadow: var(--ps-shadow-md);
  margin-top: 0.125rem;
}
.ps-table-card .dropdown-item {
  padding: 0.4rem 0.8rem;
  /* Matches the app's button text size — these are action items, and the
     smaller 0.8125rem read as cramped next to the table content. */
  font-size: 0.875rem;
  line-height: 1.45;
  border-radius: 0.375rem;
  color: var(--ps-text-secondary);
  transition: all var(--ps-transition);
}
.ps-table-card .dropdown-item:hover {
  background: var(--ps-hover);
  color: var(--ps-text);
}

/* DataTables integration */
.ps-table-card .dataTables_wrapper {
  padding: 0;
}
/* Table chrome (length/search controls, info row, row actions) all sit one
   step below the table content, rather than inheriting the 17px root. */
.ps-table-card .dataTables_wrapper .dataTables_length,
.ps-table-card .dataTables_wrapper .dataTables_filter {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}
.ps-table-card .dataTables_wrapper .dataTables_filter input {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  transition: all var(--ps-transition);
}
.ps-table-card .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px var(--ps-primary-light);
  outline: none;
}
.ps-table-card .dataTables_wrapper .dataTables_length select {
  height: auto;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}
.ps-table-card .dataTables_wrapper .dataTables_info {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ps-text-muted);
}
.ps-table-card .dataTables_wrapper .dataTables_paginate {
  padding: 0.75rem 1.25rem;
}
/* A filter row at the top of a table card, styled like the DataTables control
   row beneath it (Language page: office filter for users who see every office). */
.ps-table-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--ps-border);
}
.ps-office-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.ps-office-filter label {
  margin: 0;
  font-weight: 600;
  color: var(--ps-text-secondary);
  white-space: nowrap;
}
.ps-office-filter select {
  width: auto;
  min-width: 16rem;
  height: auto;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}


/* --- Badges / Pills --- */

.ps-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ps-badge-support { background: var(--ps-success-light); color: var(--ps-success-dark); }
.ps-badge-oppose { background: var(--ps-danger-light); color: var(--ps-danger-dark); }
.ps-badge-neutral { background: var(--ps-hover); color: var(--ps-text-secondary); }
.ps-badge-stage { background: var(--ps-primary-light); color: var(--ps-primary-dark); }
.ps-badge-info { background: var(--ps-info-light); color: var(--ps-info-dark); }
.ps-badge-warning { background: var(--ps-warning-light); color: var(--ps-warning-dark); }


/* --- Buttons --- */

.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--ps-radius-sm);
  padding: 0.5rem 1rem;
  transition: all var(--ps-transition);
}

.btn-primary,
.btn-ps-primary {
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  color: white !important;
  box-shadow: var(--ps-shadow-sm);
}
.btn-primary:hover,
.btn-ps-primary:hover {
  background: var(--ps-primary-hover) !important;
  border-color: var(--ps-primary-hover) !important;
  box-shadow: var(--ps-shadow);
}

/* Solid secondary is used exclusively for the caucus-import ("civic symbol")
   buttons, so it carries the same light-blue as the topic tags
   (.ps-badge-stage) to read as one family. */
.btn-secondary {
  background: var(--ps-primary-light);
  border-color: var(--ps-primary-light);
  color: var(--ps-primary-dark);
}
.btn-secondary:hover {
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: #FFFFFF;
}

.btn-outline-secondary {
  border-color: var(--ps-border);
  color: var(--ps-text);
  background: var(--ps-card);
}
.btn-outline-secondary:hover {
  background: var(--ps-hover);
  border-color: var(--ps-border-hover);
  color: var(--ps-text);
}

.btn-outline-danger {
  border-color: var(--ps-danger);
  color: var(--ps-danger);
}
.btn-outline-danger:hover {
  background: var(--ps-danger);
  border-color: var(--ps-danger);
  color: white;
}

.btn-danger {
  background: var(--ps-danger);
  border-color: var(--ps-danger);
}
.btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

.btn-outline-success {
  border-color: var(--ps-success);
  color: var(--ps-success);
}
.btn-outline-success:hover {
  background: var(--ps-success);
  border-color: var(--ps-success);
  color: white;
}

.btn-sm {
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
}


/* --- Forms --- */

.form-control {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ps-text);
  background: var(--ps-card);
  transition: border-color var(--ps-transition), box-shadow var(--ps-transition);
}
.form-control:focus {
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px var(--ps-primary-light);
}
.form-control::placeholder {
  color: var(--ps-text-muted);
}

select.form-control {
  appearance: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
}

.form-group label,
.col-form-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ps-text);
}

textarea.form-control {
  min-height: 100px;
}

.form-check-label {
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
}

/* In-form subheadings / collapsible section toggles — sized to the form
   rather than the raw root, and aligned to the field column. */
.ps-form-subheading {
  font-size: var(--ps-text-base);
  font-weight: 600;
  color: var(--ps-text);
}
/* In comfortable forms the fields themselves are a step larger, so the
   subheadings follow suit rather than sitting below their own options. */
.ps-form-comfortable .ps-form-subheading {
  font-size: var(--ps-text-md);
}

/* Disclosure caret for a collapsible section. Hung out of flow into the
   column's own gutter so it stays tight to its title while the title itself
   lines up with the field text, rather than being pushed right by the icon. */
.ps-form-toggle {
  position: relative;
}
.ps-form-toggle > i.fa {
  position: absolute;
  /* Anchored by its right edge and left to size itself to the glyph, so the
     open and closed chevrons (different widths) keep an identical gap before
     the title. Raise the subtracted value to tighten the gap. */
  right: calc(100% - 5px);
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
  color: var(--ps-text-secondary);
}

/* Collapsible panel: show whichever chevron matches the section's state. Bill Edit
   carries its own copy inline; these are here so any page can use the pattern. */
.panel-heading.collapsed .fa-chevron-down,
.panel-heading .fa-chevron-right {
  display: none;
}
.panel-heading.collapsed .fa-chevron-right,
.panel-heading .fa-chevron-down {
  display: inline-block;
}
.panel-heading i.fa {
  cursor: pointer;
}
.panel-heading.collapsed ~ .panel-body {
  padding: 0;
}

/* Explanatory text under a subheading — subordinate to it, not larger
   (bare text in a .form-group otherwise inherits the 17px root). */
.ps-form-help {
  font-size: var(--ps-text-base);
  color: var(--ps-text-secondary);
  margin-bottom: 0.25rem;
}

/* Wider label column for forms whose labels interpolate an office name
   (e.g. Bill Journey's "<Office>'s Committee Vote"), which overflow the
   default 25% column and wrap onto a second line. Shifts the whole grid
   together so helper-rendered rows stay aligned with hand-written ones. */
@media (min-width: 576px) {
  .ps-form-wide-labels .col-sm-3 {
    flex: 0 0 36.666667%;
    max-width: 36.666667%;
  }
  .ps-form-wide-labels .col-sm-8 {
    flex: 0 0 55%;
    max-width: 55%;
  }
  .ps-form-wide-labels .offset-sm-3 {
    margin-left: 36.666667%;
  }
}

/* Comfortable field sizing for primary content forms (bill & issue
   create/edit), matching the Generate Letter form's fields. */
.ps-form-comfortable .form-control,
.ps-form-comfortable .col-form-label,
.ps-form-comfortable .form-check-label {
  font-size: var(--ps-text-md);
}

/* Validation */
.help-block.with-errors {
  padding: 0;
  color: var(--ps-danger);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.help-block.with-errors:empty {
  display: none;
}
.help-block.with-errors > ul.list-unstyled {
  margin-bottom: 0;
}

/* Detail panel shown under a selected related bill */
.ps-related-bill-detail {
  display: none;
  margin-top: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--ps-hover);
  border-radius: var(--ps-radius-sm);
}
.ps-related-bill-summary {
  margin: 0 0 0.5rem;
  font-size: var(--ps-text-base);
  color: var(--ps-text-secondary);
}
.ps-related-bill-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.ps-related-bill-session,
.ps-related-bill-no-history {
  font-size: var(--ps-text-xs);
  color: var(--ps-text-muted);
}
.ps-related-bill-session {
  margin-right: 0.25rem;
}

/* Form sections */
.ps-form-section {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.ps-form-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ps-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ps-border);
}


/* --- Detail Pages --- */

.ps-detail-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}

.ps-detail-section {
  padding: 1.25rem;
}
.ps-detail-section + .ps-detail-section {
  border-top: 1px solid var(--ps-border);
}
.ps-detail-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ps-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.ps-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ps-detail-field-label {
  font-size: 0.75rem;
  color: var(--ps-text-muted);
  margin-bottom: 0.125rem;
}
.ps-detail-field-value {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Detail page table variant */
.ps-detail-table {
  width: 100%;
  border-collapse: collapse;
}
.ps-detail-table td {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: top;
}
.ps-detail-table tr:last-child td {
  border-bottom: none;
}
.ps-detail-table td:first-child {
  color: var(--ps-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}
/* Opt-in fixed label column. Keeps the key/value split identical across
   sibling tables in a card (e.g. Details and Journey), and lets an unusually
   long label wrap rather than widening the column for every row. */
.ps-detail-table--fixed-labels td:first-child {
  white-space: normal;
  width: 9.5rem;
  max-width: 9.5rem;
}
.ps-detail-table td a {
  color: var(--ps-text);
  text-decoration: none;
}
.ps-detail-table td a:hover {
  text-decoration: underline;
}

/* Tabs for detail pages */
.ps-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ps-border);
  margin-bottom: 1.5rem;
}
.ps-tab {
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ps-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all var(--ps-transition);
}
.ps-tab:hover {
  color: var(--ps-text);
  text-decoration: none;
}
.ps-tab.active {
  color: var(--ps-primary);
  border-bottom-color: var(--ps-primary);
}


/* --- Modals --- */

.modal-content {
  border: none;
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--ps-border);
  padding: 1rem 1.5rem;
}
.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 600;
}
.modal-body {
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
  line-height: 1.6;
}
.modal-footer {
  border-top: 1px solid var(--ps-border);
  padding: 1rem 1.5rem;
}
.modal-backdrop.show {
  backdrop-filter: blur(4px);
}

/* Delete modal warning icon */
.ps-modal-warning-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ps-danger-light);
  color: var(--ps-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
}


/* --- Home Page --- */

.ps-home-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
}
.ps-home-hero h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ps-text);
  margin-bottom: 0.5rem;
}
.ps-home-hero p {
  color: var(--ps-text-secondary);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

.ps-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.ps-feature-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--ps-transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.ps-feature-card:hover {
  box-shadow: var(--ps-shadow-md);
  border-color: var(--ps-primary);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.ps-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 1.25rem;
}
.ps-feature-icon.blue { background: var(--ps-primary-light); color: var(--ps-primary); }
.ps-feature-icon.green { background: var(--ps-success-light); color: var(--ps-success); }
.ps-feature-icon.amber { background: var(--ps-warning-light); color: var(--ps-warning); }
.ps-feature-card h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.ps-feature-card p {
  font-size: 0.8125rem;
  color: var(--ps-text-secondary);
  margin-bottom: 0;
}

/* News / updates section */
.ps-news-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}
.ps-news-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ps-border);
  font-weight: 600;
  font-size: 1rem;
}
.ps-news-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #F1F5F9;
  align-items: flex-start;
}
.ps-news-item:last-child {
  border-bottom: none;
}
.ps-news-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.ps-news-dot.blue { background: var(--ps-primary); }
.ps-news-dot.green { background: var(--ps-success); }
.ps-news-dot.amber { background: var(--ps-warning); }
.ps-news-text {
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
  line-height: 1.5;
}
/* A short step list inside a news item. */
.ps-news-text ol {
  margin: 0.375rem 0 0.375rem 1.125rem;
  padding: 0;
}
.ps-news-text li {
  margin-bottom: 0.125rem;
}
.ps-news-text strong {
  color: var(--ps-text);
  font-weight: 500;
}
.ps-news-date {
  font-size: 0.6875rem;
  color: var(--ps-text-muted);
  margin-top: 0.125rem;
}


/* --- Sign In / Sign Up Pages --- */

.ps-auth-page {
  min-height: calc(100vh - 57px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 50%, #ECFDF5 100%);
  /* The card sits in the upper part of the page rather than dead centre: centred, it
     floats in empty space on a tall window. The offset grows gently with the viewport,
     so it never hugs the navbar on a small screen or drifts far down on a large one. */
  padding: clamp(2.5rem, 12vh, 7rem) 2rem 3rem;
}

.ps-auth-card {
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-md);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}
.ps-auth-card .ps-auth-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ps-primary);
  margin-bottom: 0.25rem;
}
.ps-auth-card .ps-auth-subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
  margin-bottom: 1.75rem;
}

.ps-auth-card .form-group {
  margin-bottom: 1rem;
}
.ps-auth-card .form-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ps-text);
  margin-bottom: 0.25rem;
}
.ps-auth-card .form-control {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
}

.ps-auth-card .btn-primary,
.ps-auth-card .btn-ps-primary {
  width: 100%;
  padding: 0.625rem 1rem;
  font-weight: 600;
}

.ps-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ps-text-secondary);
}
.ps-auth-footer a {
  color: var(--ps-primary);
  text-decoration: none;
}
.ps-auth-footer a:hover {
  text-decoration: underline;
}


/* --- Empty States --- */

.ps-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.ps-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ps-primary-light);
  color: var(--ps-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}
.ps-empty-state h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.ps-empty-state p {
  font-size: 0.875rem;
  color: var(--ps-text-secondary);
  max-width: 320px;
  margin: 0 auto 1.25rem;
}


/* --- Landing Page (logged out) --- */

.ps-landing-hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 50%, #ECFDF5 100%);
  border-bottom: 1px solid var(--ps-border);
}
.ps-landing-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ps-text);
  margin-bottom: 0.75rem;
}
.ps-landing-hero p {
  font-size: 1.0625rem;
  color: var(--ps-text-secondary);
  max-width: 520px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
.ps-landing-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}


/* --- Pagination Override --- */

.pagination > .paginate_button.active > .page-link,
.page-item.active .page-link {
  background-color: var(--ps-primary);
  border-color: var(--ps-primary);
}
.page-link {
  color: var(--ps-text-secondary);
  border-color: var(--ps-border);
  font-size: 0.875rem;
  border-radius: var(--ps-radius-sm);
  margin: 0 2px;
}
.page-link:hover {
  color: var(--ps-primary);
  background: var(--ps-primary-light);
  border-color: var(--ps-primary-light);
}


/* --- Utilities --- */

.ps-section-divider {
  border: none;
  border-top: 1px solid var(--ps-border);
  margin: 1.5rem 0;
}

.text-muted {
  color: var(--ps-text-muted) !important;
}

/* Override the old spacing hacks — only target standalone legends (not those inside form rows) */
fieldset > legend:first-child:not(.col-form-label) {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ps-text);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ps-border);
  margin-bottom: 1.25rem;
}
/* Reset for legends used as inline form labels */
legend.col-form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

fieldset {
  border: none;
  padding: 0;
}

/* Alternative summary cards (bill new/edit). Sized to the Summary field they
   sit beside, rather than inheriting the raw root font. */
.ps-description-card {
  border-color: var(--ps-border);
}
.ps-description-card .card-body {
  font-size: var(--ps-text-md);
  color: var(--ps-text);
}
.ps-description-card .card-footer {
  font-size: var(--ps-text-base);
  background: var(--ps-surface);
  border-top-color: var(--ps-border);
}
/* Footer: source and date beside each other, Use pushed to the far right. The
   source only wraps if it cannot fit beside the button at all, and the date
   moves as one unit. Left inset matches the card body's p-2 so the link lines
   up with the summary text above it. */
.ps-description-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
}
.ps-description-source {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}
.ps-description-footer .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Help page cards */
.card.ps-help-card {
  margin-bottom: 1rem;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-sm);
}
.card.ps-help-card .card-header {
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  font-weight: 600;
  font-size: 0.9375rem;
}
.card.ps-help-card .card-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ps-text-secondary);
}
/* Inline references to UI elements (menu items, buttons) in help text. */
.ps-help-ref {
  color: var(--ps-primary-dark);
  font-weight: 600;
}
/* Question-mark hint beside a form label; the explanation is a Bootstrap
   tooltip, so the page also needs js/initTooltip.js. */
.ps-label-help {
  margin-left: 0.25rem;
  color: var(--ps-text-muted);
  font-size: var(--ps-text-base);
  cursor: help;
  transition: color var(--ps-transition);
}
.ps-label-help:hover,
.ps-label-help:focus-visible {
  color: var(--ps-primary);
}
.ps-label-help:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
  border-radius: 50%;
}


/* --- Responsive --- */

@media (max-width: 768px) {
  .ps-page {
    padding: 1rem;
  }
  .ps-feature-grid {
    grid-template-columns: 1fr;
  }
  .ps-detail-grid {
    grid-template-columns: 1fr;
  }
  .ps-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .ps-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}


/* --- Table borderless override (used in detail pages) --- */

.table-borderless {
  margin: 0;
}
.table-borderless td,
.table-borderless th {
  border: 0;
  padding: 5px;
}

/* Keep modal-open fix */
.modal-open {
  padding: 0 !important;
  overflow-y: auto;
}


/* ============================================================
   Additions: page width variants, letter components, toolbar,
   AI diff, toasts, empty states, focus states
   ============================================================ */

/* --- Page width variants --- */

.ps-page--reading {
  max-width: 900px;
}
.ps-page--narrow {
  max-width: 720px;
}
/* Two-column working pages (e.g. letter generate). These carry dense detail
   tables rather than prose, so they get more room than the 900px reading
   width used for the letter itself on the next page in the flow. */
.ps-page--wide {
  max-width: 1200px;
}

/* --- Toolbar (Back / Download / Edit / Save rows) --- */

.ps-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ps-toolbar .btn i {
  margin-right: 0.25rem;
}
.ps-toolbar-spacer {
  flex: 1 1 auto;
}

/* --- Letter typography & editor --- */
/* The letter renders in a single surface (a textarea) in both read and
   edit modes, so entering edit mode never reflows the text. Read mode
   hides the chrome; .is-editing fades it in. */

.ps-letter {
  font-size: var(--ps-text-md);
  line-height: 1.7;
  text-align: justify;
}
.ps-letter p {
  text-align: justify;
  margin: 0;
  padding: 0 0.75rem;
}
.ps-letter #signature_postscript p + p {
  margin-top: 1rem;
}

.ps-letter-editor,
textarea.ps-letter-editor.form-control-plaintext {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--ps-text-md);
  line-height: 1.7;
  text-align: justify;
  color: var(--ps-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ps-radius-sm);
  padding: 0.75rem;
  margin: 0;
  resize: none;
  overflow-y: hidden;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--ps-transition), box-shadow var(--ps-transition), background var(--ps-transition);
}
.ps-letter-editor.is-editing {
  background: var(--ps-card);
  border-color: var(--ps-border-hover);
}
.ps-letter-editor.is-editing:focus {
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px var(--ps-primary-light);
}

/* Letter card styled as a document sheet */
.ps-letter-sheet {
  box-shadow: var(--ps-shadow-md);
}
.ps-letter-sheet .ps-detail-section {
  padding: 1.75rem 2rem;
}

/* --- Letter page: document header (title row + action row) --- */
/* Scoped to the letterView sheet via --doc so letterMultiple's plain sheets
   keep .ps-detail-card's overflow clipping. overflow: visible is required for
   the sticky action row (a clipped ancestor becomes the sticky container). */
.ps-letter-sheet--doc {
  overflow: visible;
  scroll-margin-top: 4.5rem;
}
/* The action row carries the divider; letter and diff are never both visible. */
.ps-letter-sheet--doc .ps-detail-section + .ps-detail-section {
  border-top: 0;
}

/* Title row: eyebrow label + the saved-letter name styled as the document title.
   Transparent 1px border in read mode so the box that appears in edit mode
   does not move the text (same trick as .ps-letter-editor). */
.ps-letter-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.75rem 2rem 0.125rem;
  background: var(--ps-surface);
  border-radius: calc(var(--ps-radius) - 1px) calc(var(--ps-radius) - 1px) 0 0;
}
.ps-letter-title label,
.ps-letter-title-label {
  margin: 0;
  font-size: var(--ps-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ps-text-muted);
  white-space: nowrap;
}
.ps-letter-title .form-control,
.ps-letter-title-text {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0 0 0 -0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: var(--ps-text-md); /* same size as the letter text and form controls; weight carries the hierarchy */
  font-weight: 600;
  line-height: 1.4;
  color: var(--ps-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ps-radius-sm);
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--ps-transition), background var(--ps-transition), box-shadow var(--ps-transition);
}
.ps-letter-title .form-control[readonly] { cursor: default; }
.ps-letter-title .form-control::placeholder { color: var(--ps-text-muted); font-weight: 500; }
.ps-letter-sheet--doc.is-editing .ps-letter-title .form-control {
  background: var(--ps-card);
  border-color: var(--ps-border-hover);
}
.ps-letter-sheet--doc.is-editing .ps-letter-title .form-control:focus,
.ps-letter-title .form-control:focus-visible {
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px var(--ps-primary-light);
}

/* Action row: the page's toolbar. Same tint as the title row so the two read
   as one band; sticky only where it is guaranteed to be one line. */
.ps-letter-actions {
  padding: 0.5rem 2rem 0.75rem;
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
}
@media (min-width: 993px) {
  .ps-letter-sheet--doc .ps-letter-actions {
    position: sticky;
    top: 0;
    z-index: 5;
  }
}
/* Review-mode toolbar: hidden until .is-reviewing swaps it in for #letterActions. */
.ps-letter-actions--review {
  display: none;
}
.ps-letter-actions-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}
.ps-letter-actions-heading h6 {
  margin: 0;
  font-size: var(--ps-text-base);
}
.ps-letter-actions-heading h6 i {
  margin-right: 0.25rem;
  color: var(--ps-primary);
}
.ps-letter-actions-heading h6:focus { outline: none; }
.ps-letter-actions-heading .ai-diff-legend { margin: 0; }

/* Refine with AI: the only solid primary in read mode. */
.ps-refine-btn {
  font-weight: 600;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* The hint icon beside the Refine button sits flush against it in the toolbar. */
.ps-refine-help {
  margin-left: -0.25rem;
}

/* Mode states, driven by one class on #letterSheet. */
.ps-letter-sheet--doc.is-editing .ps-refine-btn,
.ps-letter-sheet--doc.is-editing .ps-refine-help {
  display: none;
}
.ps-letter-sheet--doc.is-reviewing #letterActions,
.ps-letter-sheet--doc.is-reviewing #letterDisplay {
  display: none;
}
.ps-letter-sheet--doc.is-reviewing .ps-letter-actions--review {
  display: flex;
}
.ps-letter-sheet--doc.is-reviewing #aiRefineResult {
  display: block;
}

/* Diagnostic line in the diff (replaces an inline color style in letterRefine.js). */
.ai-diff-warning {
  color: var(--ps-warning-dark);
}

/* Letter page header at phone/tablet widths: tighter gutters, Refine on its own
   line. Kept after the header rules above, which share their specificity, so
   source order lets these win. */
@media (max-width: 768px) {
  .ps-letter-title { padding: 0.625rem 1rem 0.125rem; }
  .ps-letter-actions { padding: 0.5rem 1rem 0.75rem; }
  .ps-letter-sheet--doc .ps-detail-section { padding: 1.25rem 1rem; }
  .ps-letter-actions .ps-refine-btn { flex: 1 1 100%; }
}
@media (max-width: 576px) {
  /* Wrapped toolbar buttons stretch into tidy rows on phones. */
  .ps-letter-actions .btn { flex: 1 1 auto; }
}

/* --- Letter generate form (moved from embedded <style> blocks) --- */

.ps-letter-form .col-form-label,
.ps-letter-form legend {
  font-size: var(--ps-text-md);
  font-weight: 500;
  color: var(--ps-text-secondary);
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ps-letter-form .form-check-label {
  font-size: var(--ps-text-md);
  color: var(--ps-text);
}
.ps-letter-form select.form-control {
  height: auto;
  padding: 0.5rem 0.75rem;
  font-size: var(--ps-text-md);
}

/* --- Bill picker (Generate Bill Letter: related bill dropdowns) --- */
/* A custom dropdown in place of a <select>, so the open list can wrap full bill
   descriptions and scroll, while the closed control shows just the bill number.
   Driven by initBillPickers() in js/letter/letterGenerate.js. */
.ps-bill-picker-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: auto;
  padding: 0.5rem 0.75rem;
  font-size: var(--ps-text-md);
  line-height: 1.25; /* selects ignore line-height; this lands the button at their height */
  text-align: left;
  cursor: pointer;
}
.ps-bill-picker-toggle::after { /* caret, as on .dropdown-toggle */
  content: "";
  flex: 0 0 auto;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  opacity: 0.6;
}
.ps-bill-picker-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-bill-picker-value.is-placeholder {
  color: var(--ps-text-secondary);
}
.ps-bill-picker-menu {
  /* Size and position are set per open by letterGenerate.js (fixed to the
     viewport, since the card clips its overflow); these are the fallbacks. */
  width: min(36rem, calc(100vw - 2rem));
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain; /* reaching the end of the list must not scroll the page */
  padding: 0.375rem;
  margin-top: 0.125rem;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  box-shadow: var(--ps-shadow-md);
}
.ps-bill-picker-item {
  white-space: normal;
  padding: 0.5rem 0.75rem;
  font-size: var(--ps-text-sm);
  line-height: 1.45;
  color: var(--ps-text);
  border-radius: 0.375rem;
  transition: background var(--ps-transition);
}
.ps-bill-picker-item + .ps-bill-picker-item {
  border-top: 1px solid var(--ps-hover);
}
.ps-bill-picker-item:hover,
.ps-bill-picker-item:focus {
  background: var(--ps-hover);
  color: var(--ps-text);
}
/* Keyboard focus needs more than the hover tint; the ring sits inside the item
   so the scrolling list never clips it. */
.ps-bill-picker-item:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: -2px;
}
.ps-bill-picker-item.active,
.ps-bill-picker-item.active:hover {
  background: var(--ps-primary-light);
  color: var(--ps-text);
}
.ps-bill-picker-rank {
  color: var(--ps-text-muted);
}

/* --- Tooltips (previously per-page <style> on letter generate) --- */

.tooltip {
  margin-left: 5px;
  opacity: 0.8 !important;
}
.tooltip-inner {
  text-align: left;
  max-width: 450px;
}

/* --- AI refine diff (moved from embedded <style> in letter page) --- */

.ai-panel {
  line-height: 1.7;
  font-size: var(--ps-text-md);
  text-align: justify;
  overflow-wrap: anywhere; /* never let a long run of marked text push past the sheet */
}
.ai-diff-ins {
  background: var(--ps-success-light);
  color: var(--ps-success-dark);
  text-decoration: none;
}
.ai-diff-del {
  background: var(--ps-danger-light);
  color: var(--ps-danger-dark);
  text-decoration: line-through;
}
.ai-diff-legend {
  font-size: var(--ps-text-sm);
  color: var(--ps-text-secondary);
  margin-bottom: 0.5rem;
}
.ai-diff-legend .chip {
  padding: 0 4px;
  border-radius: 3px;
}
/* Hidden until a refinement returns; letterRefine.js toggles .is-reviewing on
   #letterSheet (see .ps-letter-sheet--doc.is-reviewing above). */
#aiRefineResult {
  display: none;
}
/* --- Flash messages as toasts --- */

#alerts {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: 360px;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
#alerts .alert {
  pointer-events: auto;
  box-shadow: var(--ps-shadow-lg);
  border-radius: var(--ps-radius-sm);
  margin-bottom: 0.5rem;
  animation: ps-toast-in 0.25s ease;
}
@keyframes ps-toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Empty states for list pages --- */

.ps-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ps-text-secondary);
}
.ps-empty-state i {
  display: block;
  font-size: 2rem;
  color: var(--ps-text-muted);
  margin-bottom: 0.75rem;
}
.ps-empty-state .btn {
  margin-top: 1rem;
}

/* --- Typography utilities (mirror the token scale) --- */

.ps-text-xs { font-size: var(--ps-text-xs) !important; }
.ps-text-sm { font-size: var(--ps-text-sm) !important; }
.ps-text-base { font-size: var(--ps-text-base) !important; }
.ps-text-md { font-size: var(--ps-text-md) !important; }
.ps-text-lg { font-size: var(--ps-text-lg) !important; }
.ps-text-secondary { color: var(--ps-text-secondary) !important; }
.ps-text-muted-c { color: var(--ps-text-muted) !important; }

/* --- Keyboard focus visibility --- */

a:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

/* --- Intermediate breakpoint --- */
/* Bounded below so the phone-width rules in the 768px block keep precedence. */

@media (min-width: 769px) and (max-width: 992px) {
  .ps-page,
  .ps-page-full {
    padding: 1.25rem;
  }
}

@media (max-width: 992px) {
  /* Below this width the card scrolls horizontally (above it, overflow stays
     visible so Actions dropdowns can escape). Give the tables a min-width so
     they hold their layout and scroll instead of collapsing into slivers. */
  .ps-table-card {
    overflow-x: auto;
  }
  .ps-table-card .table {
    min-width: 600px;
  }
  .ps-table-card .ps-bills-table {
    min-width: 880px;
  }
}