/* ═══════════════════════════════════════════════════════════════════════════
   CYCLOGEN5D — PATENT DOSSIER COMPONENT LIBRARY

   The canonical stylesheet for all /engineering/* tools. Templates link to
   https://cyclogen5d.com/assets/dossier.css and inherit the full Patent
   Dossier palette + component vocabulary.

   Source spec: cyclogen5d-web/docs/patent-dossier-tokens.md
   Style guide: CycloGen 5D Unified Style Guide REV-C, Application 3.

   Vocabulary covered:
   - Topbar / site nav (.topbar, .crumb-sep, .tab-link)
   - Page heading (.page-heading, h1, .figref)
   - Layout (.layout, .input-panel, .results-panel)
   - Input groups (.section-group, .section-header, .field-row, .toggle)
   - Buttons (.btn-calc, .btn-export, .btn-3d)
   - Document header (.doc-header, .dh-field, .dh-label, .dh-value)
   - Summary cards (.summary-grid, .summary-card, .label, .value)
   - Calc sections (.calc-section, .calc-table, .param, .val, .unit, .formula)
   - Candidates table (.candidates-table — vessel sizing candidates)
   - Warnings (.warnings-box, .warn-title, .warn-item)
   - Empty / loading states (.empty-state, .loading, .spinner)
   - Method note (.method-note, .clause)
   - Footer (.tool-footer)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap');

:root {
  /* Patent Dossier palette */
  --paper: #F7F1DF;
  --aged-paper: #E8D9B8;
  --paper-hover: #EDE3C8;
  --ink: #151515;
  --graphite: #4B4B4B;
  --graphite-light: #6F6F6F;
  --redline: #B7322C;
  --blueprint-blue: #1F4E79;
  --highlight-yellow: #E9C85A;
  --pass-green: #2D6B3E;
  --rule: #C7B98A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Source Serif 4', 'IBM Plex Serif', Charter, Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

/* ═══ Topbar ═══════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--aged-paper);
  border-bottom: 2px solid var(--ink);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  flex-wrap: wrap;
}
.topbar .site,
.topbar .logo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.topbar .divider {
  width: 1px;
  height: 20px;
  background: var(--rule);
}
.topbar .crumb-sep {
  color: var(--graphite-light);
  font-family: 'IBM Plex Mono', monospace;
}
.topbar a,
.topbar .tab-link {
  color: var(--blueprint-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid transparent;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
}
.topbar a:hover,
.topbar .tab-link:hover {
  color: var(--ink);
  background: var(--paper-hover);
  text-decoration: none;
}
.topbar .tab-link.active,
.topbar .crumb-current {
  color: var(--ink);
  font-weight: 600;
}
.topbar .tab-link.active {
  border-color: var(--ink);
  background: var(--paper);
}
.topbar .spacer { flex: 1; }
.topbar .subtitle {
  font-size: 11px;
  color: var(--graphite);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══ Page heading ═════════════════════════════════════════════════════════ */
.page-heading {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.page-heading h1 {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.page-heading .figref {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══ Two-pane layout (input-panel + results-panel) ════════════════════════ */
.layout {
  display: flex;
  min-height: calc(100vh - 160px);
}
.input-panel {
  width: 440px;
  min-width: 440px;
  background: var(--aged-paper);
  border-right: 1px solid var(--ink);
  overflow-y: auto;
  padding: 20px;
  max-height: calc(100vh - 56px);
}
.input-panel::-webkit-scrollbar { width: 8px; }
.input-panel::-webkit-scrollbar-track { background: var(--paper); }
.input-panel::-webkit-scrollbar-thumb {
  background: var(--graphite);
  border: 1px solid var(--ink);
}
.results-panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--paper);
  max-height: calc(100vh - 56px);
}
.results-panel::-webkit-scrollbar { width: 8px; }
.results-panel::-webkit-scrollbar-track { background: var(--paper); }
.results-panel::-webkit-scrollbar-thumb {
  background: var(--graphite);
  border: 1px solid var(--ink);
}

/* ═══ Input section groups ═════════════════════════════════════════════════ */
.section-group {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.section-header {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 0 6px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-header .arrow {
  font-size: 10px;
  color: var(--graphite);
  transition: transform 0.2s;
  font-family: 'IBM Plex Mono', monospace;
}
.section-header.collapsed .arrow {
  transform: rotate(-90deg);
}
.section-body {
  padding: 6px 0 14px;
}
.section-body.hidden {
  display: none;
}

/* ═══ Input field rows ═════════════════════════════════════════════════════ */
.field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.field-row.wide {
  flex-direction: column;
  align-items: stretch;
}
.field-row label {
  font-size: 12px;
  color: var(--graphite);
  min-width: 130px;
  white-space: nowrap;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 500;
}
.field-row label .units {
  color: var(--graphite-light);
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.field-row input,
.field-row select {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 5px 8px;
  color: var(--ink);
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
  flex: 1;
  min-width: 0;
}
.field-row input:focus,
.field-row select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field-row .unit {
  font-size: 10px;
  color: var(--graphite);
  min-width: 60px;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
}

/* ═══ Toggle switches (vertical/horizontal, etc.) ══════════════════════════ */
.toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.toggle {
  flex: 1;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--graphite);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-align: center;
}
.toggle:hover {
  background: var(--paper-hover);
}
.toggle.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ═══ Action buttons ═══════════════════════════════════════════════════════ */
.btn-calc,
.btn-export,
.btn-3d {
  width: 100%;
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--ink);
  cursor: pointer;
  margin: 6px 0;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.btn-calc {
  background: var(--ink);
  color: var(--paper);
  margin-top: 16px;
}
.btn-calc:hover {
  background: var(--graphite);
}
.btn-export {
  background: var(--paper);
  color: var(--ink);
}
.btn-export:hover {
  background: var(--paper-hover);
}
.btn-3d {
  background: var(--paper);
  color: var(--blueprint-blue);
  border-color: var(--blueprint-blue);
}
.btn-3d:hover {
  background: var(--aged-paper);
}

/* ═══ Document header (calc record metadata) ═══════════════════════════════ */
.doc-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  background: var(--aged-paper);
  border: 1px solid var(--ink);
  margin-bottom: 18px;
  overflow: hidden;
}
.doc-header .dh-field,
.doc-header > div {
  padding: 8px 12px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.doc-header > div:nth-child(4n) {
  border-right: none;
}
.doc-header > div:nth-last-child(-n+4) {
  border-bottom: none;
}
.doc-header .dh-label {
  color: var(--graphite);
  font-size: 10px;
  text-transform: uppercase;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.doc-header .dh-value {
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 12px;
}
.header-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ═══ Summary cards ════════════════════════════════════════════════════════ */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin-bottom: 22px;
  border: 1px solid var(--ink);
  background: var(--aged-paper);
}
.summary-card {
  padding: 12px 16px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--aged-paper);
}
.summary-card .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--graphite);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.summary-card .value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
}
/* Color-coded summary cards */
.summary-card.pass .value { color: var(--pass-green); }
.summary-card.fail .value { color: var(--redline); }
.summary-card.warn .value { color: var(--blueprint-blue); }
.summary-card.total .value { color: var(--ink); }

/* ═══ Warnings panel ═══════════════════════════════════════════════════════ */
.warnings-box {
  background: var(--paper);
  border: 1px solid var(--redline);
  border-left: 4px solid var(--redline);
  padding: 12px 16px;
  margin-bottom: 18px;
  /* Hidden by default; the .show class (toggled by tool JS) reveals it. */
  display: none;
}
.warnings-box.show { display: block; }
.warnings-box .warn-title,
.warnings-box h4 {
  color: var(--redline);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
}
.warnings-box .warn-item {
  font-size: 13px;
  color: var(--ink);
  padding: 2px 0;
  font-family: 'IBM Plex Mono', monospace;
}

/* ═══ Calc accordion sections (PVEng-style equation walkthrough) ══════════ */
.calc-section {
  margin-bottom: 10px;
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.calc-section-title {
  padding: 9px 14px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink);
  background: var(--aged-paper);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--ink);
}
.calc-section-body {
  display: none;
  padding: 0;
}
.calc-section-body.open {
  display: block;
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.calc-table th {
  text-align: left;
  padding: 6px 10px;
  background: var(--aged-paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--ink);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
}
.calc-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-family: 'IBM Plex Mono', monospace;
}
.calc-table .param {
  color: var(--ink);
  font-weight: 500;
}
.calc-table .val {
  color: var(--blueprint-blue);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.calc-table .unit {
  color: var(--graphite);
  font-size: 11px;
  white-space: nowrap;
}
.calc-table .formula {
  color: var(--graphite);
  font-size: 11px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ Candidates table (vessel sizing options for 2-phase, 3-phase) ═══════ */
.candidates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 18px;
  background: var(--paper);
  border: 1px solid var(--ink);
}
.candidates-table thead th {
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 7px 8px;
  border-right: 1px solid var(--graphite);
  text-align: center;
}
.candidates-table thead th:last-child { border-right: none; }
.candidates-table tbody td {
  padding: 5px 8px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-align: right;
  color: var(--ink);
}
.candidates-table tbody td:last-child { border-right: none; }
.candidates-table tbody tr:hover td { background: var(--paper-hover); }
.candidates-table tbody tr.selected td {
  background: var(--aged-paper);
  font-weight: 600;
}

/* ═══ Empty / loading states ═══════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--graphite);
  font-style: italic;
  font-size: 14px;
}
.empty-state .icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.4;
}
.loading {
  text-align: center;
  padding: 40px;
  color: var(--graphite);
  /* Hidden by default. JS sets display:block (or adds .show) during async work. */
  display: none;
}
.loading.show { display: block; }
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--rule);
  border-top-color: var(--blueprint-blue);
  border-radius: 50%;
  animation: dossier-spin 0.8s linear infinite;
}
@keyframes dossier-spin {
  to { transform: rotate(360deg); }
}

/* ═══ Method note (PVEng-style transparency callout) ══════════════════════ */
.method-note {
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 3px solid var(--blueprint-blue);
  font-size: 13px;
  line-height: 1.6;
}
.method-note h3 {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 700;
}
.method-note p {
  margin-bottom: 8px;
  color: var(--ink);
}
.method-note p:last-child {
  margin-bottom: 0;
}
.method-note code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  background: var(--aged-paper);
  padding: 1px 6px;
  color: var(--ink);
}
.method-note .clause {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--blueprint-blue);
  font-weight: 600;
}

/* ═══ Code-clause callout chip ═════════════════════════════════════════════ */
.clause-callout {
  border-left: 3px solid var(--blueprint-blue);
  background: var(--aged-paper);
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  margin: 8px 0;
}
.clause-tag {
  color: var(--blueprint-blue);
  font-weight: 600;
  margin-right: 8px;
}
.clause-text { color: var(--ink); }

/* ═══ Tool footer ══════════════════════════════════════════════════════════ */
.tool-footer,
.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--graphite);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  text-align: center;
  letter-spacing: 0.3px;
}
.tool-footer a,
.foot a {
  color: var(--blueprint-blue);
  text-decoration: none;
}
.tool-footer a:hover,
.foot a:hover {
  text-decoration: underline;
}

/* ═══ Auth: sign-in modal + topbar badge ══════════════════════════════════ */
.c5d-auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.c5d-auth-modal.c5d-auth-open {
  display: flex;
}
.c5d-auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, 0.55);
}
.c5d-auth-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px 32px 24px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(21, 21, 21, 0.15);
}
.c5d-auth-figref {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.c5d-auth-title {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.c5d-auth-subtitle {
  font-size: 13px;
  color: var(--graphite);
  line-height: 1.5;
  margin-bottom: 20px;
}
.c5d-auth-subtitle a {
  color: var(--blueprint-blue);
  text-decoration: underline;
}

.c5d-auth-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.c5d-auth-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.c5d-auth-btn:hover:not(:disabled) {
  background: var(--paper-hover);
}
.c5d-auth-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.c5d-auth-btn svg {
  flex-shrink: 0;
}

/* Email form */
.c5d-auth-email-form {
  margin-top: 6px;
}
.c5d-auth-field {
  margin-bottom: 10px;
}
.c5d-auth-field label {
  display: block;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.c5d-auth-field input {
  width: 100%;
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}
.c5d-auth-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.c5d-auth-email-error {
  background: var(--paper);
  border-left: 3px solid var(--redline);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--redline);
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.c5d-auth-email-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.c5d-auth-btn-primary,
.c5d-auth-btn-secondary,
.c5d-auth-btn-link {
  padding: 7px 14px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid var(--ink);
}
.c5d-auth-btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.c5d-auth-btn-primary:hover {
  background: var(--graphite);
}
.c5d-auth-btn-secondary {
  background: var(--paper);
  color: var(--ink);
}
.c5d-auth-btn-secondary:hover {
  background: var(--paper-hover);
}
.c5d-auth-btn-link {
  background: transparent;
  border: none;
  color: var(--blueprint-blue);
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 4px;
  text-decoration: underline;
}
.c5d-auth-btn-back {
  background: transparent;
  border: none;
  color: var(--blueprint-blue);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
}
.c5d-auth-btn-back:hover {
  text-decoration: underline;
}
.c5d-auth-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--graphite);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.c5d-auth-cancel:hover {
  color: var(--ink);
}

/* Topbar badge */
.c5d-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  max-width: 280px;
}
.c5d-auth-badge-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.c5d-auth-signout,
.c5d-auth-signin {
  background: transparent;
  border: none;
  border-left: 1px solid var(--rule);
  padding: 0 0 0 8px;
  color: var(--blueprint-blue);
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.c5d-auth-signin {
  border-left: none;
  padding: 0;
}
.c5d-auth-signout:hover,
.c5d-auth-signin:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Sign-in required hint on the Calculate button */
.btn-calc.c5d-auth-locked::before {
  content: "🔒 ";
  margin-right: 4px;
}

/* ═══ Print ════════════════════════════════════════════════════════════════ */
@media print {
  .topbar,
  .input-panel,
  .btn-calc,
  .btn-export,
  .btn-3d,
  .tool-footer,
  .foot,
  .row-actions,
  .row-del {
    display: none !important;
  }
  body {
    background: white;
    font-size: 10px;
  }
  .layout {
    display: block;
  }
  .results-panel {
    max-height: none;
    padding: 0;
  }
  .calc-section,
  .summary-grid,
  .doc-header,
  .candidates-table {
    border: 1px solid #888;
  }
}