/* Rails layouts. Foundations and components are shared with docs/design-system. */
.ls-app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100dvh; }
.ls-sidebar { background: var(--ls-surface); padding: 32px 20px; display: flex; flex-direction: column; gap: 48px; border-right: 1px solid var(--ls-border); }
.ls-app .ls-sidebar { position: sticky; top: 0; height: 100dvh; }
.ls-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 800 21px/1.2 var(--ls-heading); letter-spacing: -.04em; }
.ls-brand-mark { display: grid; place-items: center; width: 36px; height: 40px; border-radius: 18px 18px 10px 10px; background: var(--ls-ink); color: var(--ls-action); font-size: 24px; }
.ls-navigation { display: grid; gap: 8px; }
.ls-workspace-switcher { display: grid; gap: 4px; min-width: 0; }
.ls-workspace-switcher strong { overflow-wrap: anywhere; }
.ls-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ls-nav-link { padding: 12px 16px; min-height: 48px; border-radius: var(--ls-radius-pill); text-decoration: none; font-size: 14px; font-weight: 600; }
.ls-nav-link:hover { background: var(--ls-border); }
.ls-nav-link[aria-current="page"] { background: var(--ls-selected); }
.ls-sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.ls-sidebar-footer .ls-button { padding-left: 0; }
.ls-main { min-width: 0; padding: 48px clamp(32px, 4vw, 64px) 64px; }
.ls-main:focus { outline: none; }
.ls-page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.ls-page-header > div { min-width: 0; }
.ls-page-header p { margin-top: 12px; color: var(--ls-muted); max-width: 65ch; }
.lampstand h1, .ls-main p, .ls-main dd, .ls-main a { overflow-wrap: anywhere; }
.ls-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; margin-bottom: 16px; }
.ls-flash { margin-bottom: 24px; }
.ls-section { margin-top: 48px; }
.lampstand .ls-section-heading { margin-bottom: 24px; }
.ls-form { display: grid; gap: 24px; }
.ls-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ls-form-wide { grid-column: 1 / -1; }
.ls-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 8px; }
.ls-form-narrow { max-width: 640px; }
.ls-form-section { margin: 0; min-width: 0; border: 0; padding: 0; }
.ls-form-section > legend { padding: 0; margin-bottom: 24px; font: 750 20px/1.2 var(--ls-heading); letter-spacing: -.035em; }
.ls-field .field_with_errors { display: contents; }
.ls-input[type="file"] { padding: 8px; }
.ls-input::file-selector-button { border: 0; border-radius: 999px; background: var(--ls-selected); color: var(--ls-ink); padding: 8px 16px; margin-right: 12px; font: inherit; cursor: pointer; }
.ls-input:is(textarea) { min-height: 120px; resize: vertical; }
.ls-error-summary { display: block; }
.ls-error-summary ul { padding-left: 20px; margin: 8px 0 0; }
.ls-error-summary a { color: inherit; }
.ls-disclosure { border: 1px solid var(--ls-border); border-radius: var(--ls-radius-panel); padding: 0 24px; }
.ls-disclosure > summary { padding: 16px 0; min-height: 56px; font-size: 14px; font-weight: 600; }
.ls-disclosure[open] > summary { margin-bottom: 8px; }
.ls-disclosure > :last-child:not(summary) { margin-bottom: 24px; }
.ls-search { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 12px; align-items: end; }
.ls-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ls-active-filters { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.ls-filter-tag { background: var(--ls-surface); padding: 8px 12px; border-radius: 10px; overflow-wrap: anywhere; }
.ls-saved-views { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ls-saved-view { display: flex; align-items: center; border: 1px solid var(--ls-border); border-radius: 999px; max-width: 100%; }
.ls-saved-view .ls-chip { text-decoration: none; overflow-wrap: anywhere; }
.ls-saved-view .ls-chip[aria-current="page"] { background: var(--ls-selected); font-weight: 600; }
.ls-remove-view { width: 44px; min-height: 44px; padding: 0; }
.ls-save-view-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.ls-save-view-form .ls-field { flex: 1 1 240px; }
.ls-results { margin-top: 32px; }
.ls-results-heading { margin-bottom: 16px; }
.ls-table-wrap { border: 1px solid var(--ls-border); border-radius: var(--ls-radius-panel); }
.ls-table caption { padding: 16px; }
.ls-table td { overflow-wrap: anywhere; }
.ls-table .ls-record-name { font-weight: 650; }
.ls-record-email { display: block; margin-top: 4px; color: var(--ls-muted); font-size: 13px; }
.ls-table .ls-record-cell { min-width: 180px; }
.ls-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 13px; color: var(--ls-muted); }
.ls-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.ls-detail-grid dt { font-size: 13px; color: var(--ls-muted); margin-bottom: 8px; }
.ls-detail-grid dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ls-source-values { margin: 16px 0; min-width: 180px; }
.ls-source-values dt { font-size: 12px; font-weight: 600; margin-top: 12px; }
.ls-source-values dd { margin: 4px 0 0; white-space: pre-wrap; }
.ls-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ls-summary-item { background: var(--ls-surface); border-radius: 20px; padding: 24px; }
.ls-summary-item strong { display: block; font: 800 32px/1.2 var(--ls-heading); font-variant-numeric: tabular-nums; }
.ls-summary-item span { display: block; margin-top: 8px; font-size: 13px; color: var(--ls-muted); }
.ls-auth { min-height: 100dvh; background: var(--ls-surface); }
.ls-auth .ls-sidebar { border: 0; padding: 32px 48px; }
.ls-auth .ls-main { max-width: 560px; margin: 16px auto; padding: 0 24px 48px; }
.ls-auth-card { padding: 40px; border: 1px solid var(--ls-border); border-radius: 20px; background: var(--ls-canvas); }
.ls-auth-card .ls-page-header { margin-bottom: 32px; }
.ls-auth-card .ls-button[type="submit"] { width: 100%; }
.ls-auth-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
@media (max-width: 1100px) {
  .ls-app { grid-template-columns: 196px minmax(0, 1fr); }
  .ls-sidebar { padding-inline: 16px; }
  .ls-main { padding-inline: 32px; }
  .ls-filter-grid, .ls-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ls-app { display: block; }
  .ls-app .ls-sidebar { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 16px 24px; gap: 16px; border-right: 0; border-bottom: 1px solid var(--ls-border); }
  .ls-workspace-switcher { grid-column: 1 / -1; grid-row: 2; }
  .ls-navigation { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; grid-row: 3; }
  .ls-sidebar-footer { margin: 0; display: flex; align-items: center; grid-column: 2; grid-row: 1; }
  .ls-sidebar-footer p { display: none; }
  .ls-main { padding: 32px 24px 48px; }
}
@media (max-width: 600px) {
  .ls-workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-page-header { align-items: flex-start; flex-direction: column; }
  .ls-form-grid, .ls-filter-grid, .ls-detail-grid, .ls-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-search { grid-template-columns: 1fr 1fr; }
  .ls-search > .ls-field { grid-column: 1 / -1; }
  .ls-search > a { padding-inline: 8px; white-space: normal; }
  .ls-disclosure { padding-inline: 16px; }
  .ls-table--cards, .ls-table--cards tbody, .ls-table--cards tr, .ls-table--cards td { display: block; width: 100%; }
  .ls-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ls-table--cards tr { padding: 16px; border-bottom: 1px solid var(--ls-border); }
  .ls-table--cards tbody tr:last-child { border-bottom: 0; }
  .ls-table--cards td { padding: 8px 0; border: 0; }
  .ls-table--cards td[data-label]::before { content: attr(data-label); display: block; color: var(--ls-muted); font-size: 12px; margin-bottom: 4px; }
  .ls-table--cards .ls-record-cell { font-size: 16px; }
  .ls-table--cards caption { display: block; }
  .ls-pagination { align-items: flex-start; flex-direction: column; }
  .ls-auth .ls-sidebar { padding: 24px; }
  .ls-auth-card { padding: 24px; }
  .ls-button { white-space: normal; text-align: center; }
}

.ls-chip[aria-current="page"] { background: var(--ls-selected); color: var(--ls-ink); font-weight: 600; text-decoration: none; }
.ls-table td > details > summary { min-height: 44px; padding-block: 10px; }

@media (max-width: 600px) {
  .ls-page-header--contacts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
  .ls-page-header--contacts > div { display: contents; }
  .ls-page-header--contacts h1 { grid-column: 1; grid-row: 1; }
  .ls-page-header--contacts > .ls-button { grid-column: 2; grid-row: 1; padding-inline: 16px; }
  .ls-page-header--contacts p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}

.ls-email-preview { width: 100%; height: 360px; border: 1px solid var(--ls-border); border-radius: 10px; background: white; }