/* The Business Foundations Workbook — styles.
   Palette and contrast from Brand Book 6.2–6.4. Type from 7.1–7.3. */

:root {
  --pearl: #F3EAF0;      /* light ground */
  --cream: #F1E5D6;      /* paper surfaces */
  --lilac: #9A87B5;      /* buttons, accents. Ink labels only */
  --silver: #D8D5DC;     /* dividers */
  --gold: #D8B878;       /* hairlines, never text on light */
  --plum: #4B3857;       /* secondary text */
  --ink: #2B2434;        /* body text, dark grounds */
  --powder: #B9CBE5;
  --white: #FFFFFF;
  --display: "Cormorant Garamond", Georgia, serif;
  --text: "Karla", system-ui, sans-serif;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 120px; }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--white); color: var(--ink); padding: 8px 12px; border-radius: var(--radius); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

h1, h2 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 5vw, 38px); }
h3 { font-family: var(--text); font-weight: 700; font-size: 18px; margin: 28px 0 8px; }
p { margin: 0 0 12px; max-width: 68ch; }

.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--plum); margin: 0 0 6px; }

/* ---------- masthead ---------- */

.masthead { background: var(--ink); color: var(--cream); padding: 40px 0 32px; border-bottom: 1px solid var(--gold); }
.masthead .eyebrow { color: var(--gold); }
.masthead h1 { font-size: clamp(36px, 7vw, 56px); color: var(--cream); margin-bottom: 12px; }
.masthead .lede { font-size: 19px; color: var(--pearl); }
.masthead .meta { font-size: 14px; color: var(--silver); margin: 0; }
.masthead .greeting { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--cream); margin: 4px 0 6px; }

/* ---------- toolbar ---------- */

.toolbar { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid var(--silver); }
.toolbar-row { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.jump { display: flex; gap: 14px; overflow-x: auto; white-space: nowrap; font-size: 14px; padding-bottom: 4px; scrollbar-width: thin; }
.jump a { color: var(--plum); text-decoration: none; }
.jump a:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.notice { margin: 0 0 10px; padding: 8px 12px; background: var(--white); border-left: 3px solid var(--lilac); font-size: 15px; max-width: none; }
.notice-warn { border-left-color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */

.btn {
  font: inherit; font-size: 15px; font-weight: 700;
  background: var(--lilac); color: var(--ink);
  border: 1px solid var(--lilac); border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer; min-height: 40px;
}
.btn:hover { background: var(--plum); color: var(--white); border-color: var(--plum); }
.btn-quiet { background: transparent; border-color: var(--plum); color: var(--plum); }
.btn-quiet:hover { background: var(--white); color: var(--ink); }
.btn-link { font: inherit; font-size: 14px; background: none; border: none; padding: 4px; color: var(--plum); text-decoration: underline; cursor: pointer; }

/* ---------- sections ---------- */

.section { padding: 40px 0 24px; border-bottom: 1px solid var(--silver); }
.section .intro { font-size: 18px; color: var(--plum); margin-top: 10px; }
.small { font-size: 15px; color: var(--plum); }
.callout { background: var(--cream); padding: 10px 14px; border-left: 3px solid var(--gold); }

table.plain { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
table.plain th, table.plain td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--silver); }
table.plain th { font-weight: 700; background: var(--cream); }

/* ---------- items ---------- */

.item { background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius); padding: 18px 16px; margin: 16px 0; }
.item-head { display: flex; gap: 10px; align-items: baseline; }
.num { font-size: 13px; font-weight: 700; color: var(--plum); flex: none; min-width: 2.2em; }
.q { font-family: var(--text); font-size: 18px; font-weight: 600; margin: 0; line-height: 1.4; }
.hint { font-size: 15px; color: var(--plum); margin: 8px 0 0; }
.item[data-status="confirmed"], .item[data-status="na-confirmed"], .item[data-status="na-mine"] { background: var(--cream); }
.item-links { background: transparent; border-style: dashed; }

.links { list-style: none; padding: 0; margin: 10px 0 0; font-size: 15px; }
.links li { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.pub { color: var(--plum); font-size: 13px; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--plum); color: var(--plum); }
.badge-directory { border-style: dashed; }
.badge-company { border-color: var(--silver); color: var(--plum); background: var(--pearl); }

.ref { margin: 12px 0 0; padding: 10px 12px; background: var(--pearl); border-left: 3px solid var(--powder); }
.ref-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum); margin: 0 0 4px; }
.ref-text { font-size: 15px; margin: 0; white-space: pre-wrap; }
.ref-empty { color: var(--plum); font-style: italic; }

.core { display: grid; gap: 12px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 14px; font-weight: 600; color: var(--plum); }
.field-note { font-size: 13px; color: var(--plum); margin: 0; }
.field-inline { max-width: 280px; margin-top: 12px; }

input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid #8f8499; border-radius: 4px;
  padding: 8px 10px; width: 100%; min-height: 42px;
}
textarea { resize: vertical; line-height: 1.5; }
textarea.describe { min-height: 120px; }
select.status { font-weight: 600; }

details.more { margin-top: 12px; }
details.more summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--plum); padding: 6px 0; }
details.more .grid { display: grid; gap: 12px; padding-top: 8px; }

.renew-line { font-size: 14px; color: var(--plum); margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--gold); }

.list-field { margin-top: 12px; }
.list-rows { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.list-rows li { display: flex; gap: 8px; align-items: center; }

/* ---------- calendar ---------- */

.table-scroll { position: relative; overflow-x: auto; margin: 8px 0 12px; } /* relative keeps the hidden "Remove" label inside the scroll box */
table.calendar { width: 100%; border-collapse: collapse; font-size: 15px; }
table.calendar th { text-align: left; font-size: 13px; color: var(--plum); padding: 6px; background: var(--cream); }
table.calendar td { padding: 4px; vertical-align: middle; }
table.calendar input, table.calendar select { min-width: 120px; }

/* ---------- people ---------- */

.people { display: grid; gap: 12px; }
.person { background: var(--white); border: 1px solid var(--silver); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; }
.person .btn-link { justify-self: start; }

/* ---------- open questions ---------- */

.oq-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#oq-output h4 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 20px 0 6px; }
.oq-print-title { display: none; }
.oq-list { padding-left: 20px; margin: 0; }
.oq-list li { margin: 8px 0 12px; }
.oq-q { margin: 0; font-weight: 600; }
.oq-q .num { margin-right: 6px; }
.oq-meta { font-size: 14px; color: var(--plum); margin: 2px 0 0; }
.oq-notes { font-size: 15px; margin: 4px 0 0; white-space: pre-wrap; }
.empty { color: var(--plum); font-style: italic; }

/* ---------- closing ---------- */

.closing { border-bottom: none; padding-bottom: 64px; }
.cta { display: inline-block; font-weight: 700; color: var(--ink); background: var(--lilac); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; }
.cta:hover { background: var(--plum); color: var(--white); }
.disclaimer { font-size: 14px; color: var(--plum); margin-top: 24px; }


.caps { text-transform: uppercase; font-size: 14px; letter-spacing: 0.01em; }
.masthead a { color: var(--cream); }
.policy-link { font-size: 14px; }

.device-box { background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 20px 22px; margin: 8px 0 16px; border-left: 4px solid var(--gold); }
.device-box p { color: var(--pearl); margin: 0; }
.device-box .device-big { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 4.5vw, 32px); line-height: 1.2; color: var(--cream); margin-bottom: 10px; }
.shared-warning { font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0 16px; max-width: none; }
.masthead .shared-warning { color: var(--cream); background: transparent; border-color: var(--gold); margin: 4px 0 14px; }

.explain { margin: 12px 0 0; padding: 12px 14px; background: var(--pearl); border-left: 3px solid var(--lilac); border-radius: 0 var(--radius) var(--radius) 0; }
.explain p { font-size: 15px; margin: 0 0 8px; }
.explain p:last-child { margin-bottom: 0; }
.explain .explain-title { font-weight: 700; color: var(--plum); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- wider screens ---------- */

@media (min-width: 720px) {
  .jump { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
  .core { grid-template-columns: 240px 1fr; align-items: start; }
  details.more .grid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .item { padding: 22px 24px; }
}

@media (max-width: 719px) {
  html { scroll-padding-top: 16px; }
  .toolbar { position: static; }
  .notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; border-left: none; border-top: 3px solid var(--lilac); box-shadow: 0 -2px 10px rgba(43, 36, 52, 0.12); padding: 10px 16px; }
  .notice-warn { border-top-color: var(--ink); }
  body { padding-bottom: 64px; }
  .toolbar .btn { flex: 1 1 auto; font-size: 14px; padding: 8px 10px; }
  table.calendar thead { display: none; }
  table.calendar tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--silver); }
  table.calendar td { display: flex; flex-direction: column; gap: 2px; padding: 0; }
  table.calendar td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--plum); }
  table.calendar input, table.calendar select { min-width: 0; }
}

/* ---------- print ---------- */

@page {
  size: letter;
  margin: 14mm 13mm 18mm;
  @bottom-center {
    content: "The Business Foundations Workbook \00B7  Calling to Clarity \00B7  Printed " var(--printed, "") " \00B7  Sources checked September 26, 2026 \00B7  Organizing tool only, not legal, tax, or other professional advice.";
    font-family: "Karla", sans-serif; font-size: 7pt; color: #444;
  }
  @bottom-right { content: counter(page); font-family: "Karla", sans-serif; font-size: 7pt; color: #444; }
}

@media print {
  body { background: var(--white); font-size: 9.5pt; line-height: 1.4; color: #000; padding: 0; }
  .no-print, .toolbar, .skip, .notice, details.more summary { display: none !important; }
  .masthead { background: none; color: #000; padding: 0 0 6pt; border-bottom: 1pt solid #000; }
  .masthead h1 { font-size: 26pt; }
  .masthead .lede { font-size: 11pt; }
  .masthead h1, .masthead .lede, .masthead .meta, .masthead .eyebrow { color: #000; }
  .wrap { max-width: none; padding: 0; }
  h2 { font-size: 20pt; }
  h3 { font-size: 10.5pt; margin: 10pt 0 3pt; }
  p { margin: 0 0 5pt; max-width: none; }
  .section { padding: 8pt 0 4pt; border-bottom: none; break-before: page; }
  #start, .closing { break-before: auto; }
  .section .intro { font-size: 10pt; margin-top: 3pt; }
  .item { border: 0.6pt solid #999; background: none !important; break-inside: avoid; padding: 5pt 7pt; margin: 5pt 0; border-radius: 3pt; }
  .item-links { border-style: dashed; }
  .q { font-size: 10pt; }
  .hint { font-size: 8.5pt; margin-top: 2pt; }
  a { color: #000; }
  .links { margin-top: 3pt; font-size: 8.5pt; }
  .links li { margin: 1pt 0; }
  .links a::after { content: " \2014  " attr(href); font-size: 7pt; word-break: break-all; }
  .pub { font-size: 7.5pt; }
  .badge { border-color: #000; color: #000; font-size: 6.5pt; padding: 0 3pt; }
  .hint, .pub, .field label, .intro, .small, .renew-line, .oq-meta, .disclaimer { color: #333; }
  .field { gap: 1pt; }
  .field label { font-size: 7.5pt; }
  .field-note { font-size: 7pt; }
  input, select, textarea { border: none; border-bottom: 0.6pt solid #666; border-radius: 0; padding: 1pt 0; min-height: 13pt; background: none; font-size: 9pt; -webkit-appearance: none; appearance: none; }
  textarea { min-height: 26pt; border: 0.6pt solid #999; resize: none; }
  textarea.describe { min-height: 50pt; }
  select { color: #000; }
  .is-empty { color: transparent !important; }
  ::placeholder { color: transparent !important; }
  ::-webkit-calendar-picker-indicator { display: none; }
  .core { grid-template-columns: 120pt 1fr; gap: 6pt; margin-top: 5pt; }
  details.more { margin-top: 4pt; }
  details.more .grid { grid-template-columns: 1fr 1fr 1fr; gap: 4pt 10pt; padding-top: 0; }
  .renew-line { font-size: 7.5pt; margin-top: 4pt; padding-top: 3pt; }
  .ref { background: none; border-left: 1.5pt solid #999; padding: 3pt 6pt; margin-top: 4pt; }
  .callout { background: none; border-left: 1.5pt solid #999; }
  table.plain { font-size: 9pt; }
  table.plain th, table.plain td { padding: 3pt 5pt; }
  table.plain th { background: none; }
  .table-scroll { overflow: visible; }
  table.calendar { font-size: 9pt; }
  table.calendar thead { display: table-header-group; }
  table.calendar th { background: none; color: #000; font-size: 8pt; }
  table.calendar tr { display: table-row; }
  table.calendar td { display: table-cell; padding: 2pt; }
  table.calendar td::before { content: none; }
  table.calendar input, table.calendar select { min-width: 0; }
  .people { grid-template-columns: 1fr 1fr; gap: 6pt; }
  .person { padding: 5pt 7pt; gap: 4pt; border-color: #999; }
  .cta { background: none; padding: 0; color: #000; }
  .explain { background: none; border-left: 1.5pt solid #999; padding: 4pt 7pt; }
  .explain p { font-size: 8.5pt; margin-bottom: 3pt; }
  .explain .explain-title { color: #000; font-size: 7.5pt; }
  .device-box { background: none; border: 1.5pt solid #000; color: #000; padding: 6pt 8pt; }
  .device-box p, .device-box .device-big { color: #000; }
  .device-box .device-big { font-size: 15pt; }
  .shared-warning, .masthead .shared-warning { color: #000; background: none; border: 1.5pt solid #000; font-size: 9pt; padding: 4pt 6pt; }
  .cta::after { content: " (callingtoclarity.com)"; font-weight: 400; }
  .small, .callout, .disclaimer { font-size: 9pt; }
  table.calendar { table-layout: fixed; }
  table.calendar th:first-child, table.calendar td:first-child { width: 30%; }
  #s9:not(:has(#oq-output > *)) #oq-heading { display: none; }

  body.print-questions main > *:not(#s9) { display: none !important; }
  body.print-questions .masthead { display: none; }
  body.print-questions #s9 > *:not(#oq-output) { display: none !important; }
  body.print-questions #s9 { break-before: auto; }
  body.print-questions .oq-print-title { display: block; font-weight: 700; font-size: 12pt; }
}

/* ---------- section navigation ---------- */
.jump-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum); margin: 0; }
.jump { gap: 6px; padding-bottom: 2px; }
.jump a { display: inline-block; font-size: 14px; font-weight: 600; color: var(--plum); background: var(--white); border: 1px solid var(--plum); border-radius: 999px; padding: 4px 12px; text-decoration: none; white-space: nowrap; }
.jump a:hover, .jump a:focus-visible { background: var(--pearl); color: var(--ink); text-decoration: none; }
.jump a.is-current { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.toc { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0 8px; }
.toc-card { display: grid; grid-template-columns: 2.4em 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; background: var(--white); border: 1px solid var(--silver); border-left: 4px solid var(--lilac); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.toc-card:hover, .toc-card:focus-visible { border-color: var(--plum); border-left-color: var(--ink); background: var(--cream); }
.toc-num { grid-row: 1 / span 2; font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1; color: var(--plum); }
.toc-title { font-weight: 700; font-size: 16px; }
.toc-title::after { content: " →"; color: var(--plum); }
.toc-desc { font-size: 14px; color: var(--plum); }
@media (min-width: 720px) { .toc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 719px) { .jump, .jump-label { display: none; } }
.to-contents { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--plum); }
@media print { .to-contents { display: none !important; } }
@media print { .toc, .jump-label { display: none !important; } #inside, #inside + .small { display: none !important; } }

/* Every page carries a photo, Brand Book 8.5 (2026-10-19). Hidden in print. */
.page-photo { margin: 24px 0 0; }
.page-photo img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 12px; }
.page-photo.tall img { max-width: 320px; }
@media print { .page-photo { display: none !important; } }