/* Complete page compositions for Kitchen Table and Common Ground.
   Loaded after the base stylesheet; all colors follow the selected appearance. */
.workspace-page { --workspace-gap: clamp(1rem, 2.5vw, 2rem); padding-top: 2.25rem; }
.workspace-page > *, .workspace-page .two-col > *, .writing-desk > * { min-width: 0; }
.workspace-page .page-head { position: relative; padding: 4.6rem 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line-strong); align-items: flex-end; gap: 1rem 2rem; }
.workspace-page .page-head > div:not(.btn-row):not(.streak) { flex: 1 1 360px; }
.workspace-page .page-head h1 { font-size: clamp(1.9rem, 3.1vw, 2.8rem); max-width: 25ch; text-wrap: balance; }
.workspace-page .page-head p { max-width: 64ch; margin-top: .65rem; }
/* A bare lede (h1 and p straight inside .page-head) still gets its own row: a 64ch
   max-width would shrink the 100% basis and let space-between float it beside the h1. */
.workspace-page .page-head > p { flex: 0 0 100%; max-width: none; padding-inline-end: max(0px, 100% - 64ch); }
.workspace-page .page-head .btn-row { align-self: flex-end; }
.page-illustration { position: absolute; top: 0; left: -8px; width: 100px; height: 58px; color: var(--spruce); pointer-events: none; }
.page-illustration .illustration-fill { fill: var(--spruce-soft); }
.product-faith .page-illustration .illustration-fill { fill: var(--feature); }
.workspace-page > .page-lead { max-width: 68ch; margin: -.25rem 0 2rem; }
.workspace-page .section { margin-top: 2.25rem; }
.workspace-page .section-head { margin-bottom: 1rem; }
.workspace-page .section > h2 { padding-bottom: .65rem; margin-bottom: 1rem; box-shadow: none; }
.workspace-page .section > .section-head { padding-bottom: .65rem; }
.workspace-page h2 { font-size: 1.35rem; }
.workspace-page h3 { font-size: 1.08rem; }
.workspace-page .card { padding: clamp(1.1rem, 2.1vw, 1.65rem); }
/* Cards, button rows and tables stacked straight in the page or a reading column never touch.
   :where() keeps this at zero specificity, so a deliberate margin (a .section) still wins. */
:where(.workspace-page, .workspace-page .guide-read) > :where(.card, .stack, .btn-row, .table-scroll) + :where(.card, .btn-row, .table-scroll) { margin-top: var(--workspace-gap); }
.workspace-page .card > h2 { margin-bottom: .8rem; }
.workspace-page .card > .muted + form { margin-top: 1.2rem; }
/* Except the Connect-the-plan cards: their buttons align at the bottom of cards of different heights. */
.workspace-page .strategy-tools .card > .muted + form { margin-top: auto; }
.workspace-page .card-row { gap: 1rem; }
.workspace-page .card-row > :first-child { min-width: 0; }
.workspace-page :is(p, strong, h1, h2, h3, .preserve-lines) { overflow-wrap: anywhere; }
.workspace-page :is(.btn, .badge) { max-width: 100%; }
/* A pill that doesn't fit moves to the next line whole; it wraps inside only when wider than its container. */
.workspace-page .badge { display: inline-block; white-space: normal; }
.workspace-page .btn-row { flex-wrap: wrap; }
.workspace-page .field-label { display: block; font-size: .87rem; font-weight: 700; margin: .6rem 0 .4rem; }
.workspace-page :is(input, select, textarea) { max-width: 100%; }
/* The rule above outranks the base .input-narrow, so the utility restates its cap here. */
.workspace-page .input-narrow { max-width: min(14rem, 100%); }
/* The autosize controller grows a textarea to fit what's written; past this it scrolls. */
.workspace-page textarea { line-height: 1.65; max-height: 60vh; }
/* shared/_empty_state: a list with nothing in it yet. */
.workspace-page .empty-state { padding: 2.5rem 1.5rem; border-style: dashed; background: var(--paper-deep); }
.workspace-page .empty-state p { max-width: 55ch; }
.workspace-page .progress-fill { background: var(--spruce); }
.workspace-page .prayer-card { border-color: var(--line); }
.workspace-page .badge-teal { background: var(--spruce-soft); color: var(--spruce-deep); }
.workspace-page .overline::before { content: none; }
.workspace-page .overline { color: var(--spruce-deep); }
/* Feature surfaces keep their own colours in dark mode (Latitude's yellow card stays yellow), so their
   overlines follow the surface, not the page. Same specificity as the rule above but later, so it wins. */
.workspace-page :is(.home-welcome, .conversation-question) .overline { color: var(--feature-accent); }
.workspace-page .prompt-card .overline { color: var(--feature-ink); }
.workspace-page .two-col { gap: var(--workspace-gap); }

/* Writing desks: notes and conversations, with a clearly separate history. */
.writing-desk { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); align-items: start; gap: var(--workspace-gap); }
.writing-composer { display: grid; gap: 1rem; }
.writing-composer > .card { margin: 0; }
.writing-composer > .card:last-child { border-top: 4px solid var(--spruce); }
.product-faith .writing-composer > .card:last-child { box-shadow: 4px 4px 0 var(--line-strong); }
.writing-history > .section:first-child, .writing-history > .card-list:first-child { margin-top: 0; }
.writing-history .wall-grid { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.writing-history .wall-post { width: auto; margin: 0; }
.workspace-story .wall-post { border-top: 1px solid var(--line); }
.workspace-story .wall-post-head { margin-bottom: 1.25rem; }
.workspace-story .wall-post > p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; }
.workspace-story .wall-post-foot { border-top: 1px solid var(--line); padding-top: .75rem; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.workspace-story .wall-pinned { border-left: 4px solid var(--spruce); }
.workspace-story .wall-photo { border-radius: var(--radius); }
.workspace-story .journal-entry { background: var(--card); border-left: 3px solid var(--line-strong); }
.workspace-story .journal-entry > p { padding-top: 1rem; font-size: 1.05rem; line-height: 1.85; }
.workspace-story .journal-entry .card-row { align-items: flex-start; flex-wrap: wrap; }
.workspace-story .blessing-card { background: var(--spruce-soft); border: 0; padding: 2rem; }
.workspace-story .blessing-body { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.55; }
.workspace-story .blessing-sent { background: var(--card); border: 1px solid var(--line); }
.workspace-story .mind-entry > .card-row { align-items: flex-start; }
.workspace-story .mind-entry .preserve-lines { margin: .75rem 0; }
.workspace-story .mind-reply { border-radius: var(--radius); padding: 1rem; background: var(--spruce-soft); }
.workspace-story .prompt-card { background: var(--spruce-soft); border: 0; }
/* The background above follows the theme, so the text must too — feature-ink stays dark in dark mode. */
.workspace-story .prompt-card, .workspace-story .prompt-card .prompt-text { color: var(--ink); }
.workspace-story .prompt-card .overline { color: var(--spruce-deep); }
.workspace-story .prompt-text { font-family: var(--font-display); line-height: 1.4; }

/* Decisions are a ledger, rather than a collection of unrelated floating tiles. */
.workspace-ledger.view-index .card-list { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: var(--card); }
.workspace-ledger.view-index .card-list > .card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; min-height: 88px; }
.workspace-ledger.view-index .card-list > .card:last-child { border-bottom: 0; }
.workspace-ledger.view-index .card-list > a:hover { background: var(--spruce-soft); }
.workspace-ledger.view-index .card-list .card-unread { border-left: 4px solid var(--spruce); }
.workspace-ledger.view-show .col-main > .card:first-child { border-top: 5px solid var(--spruce); }
.workspace-ledger.view-show .col-side { background: var(--paper-deep); border-radius: var(--radius); padding: 1rem; align-self: start; }
.workspace-ledger .consequence-box { margin-top: .85rem; padding: .85rem; background: var(--paper-deep); border-left: 2px solid var(--line-strong); }
.page-notifications { max-width: 920px; }
.page-notifications .card-unread strong { color: var(--spruce-deep); }
/* Day buckets (Today / This week / Earlier), each row led by who it's from; unread rows also read bolder, not only by colour. */
.page-notifications .notification-day + .notification-day { margin-top: 1.4rem; }
.page-notifications .notification-day > .overline { margin: 0 0 .5rem; }
.page-notifications .notification-row { justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; gap: .8rem; }
.page-notifications .notification-text { flex: 1; min-width: 0; }
.page-notifications .card-unread .notification-text { font-weight: 600; }
.page-notifications .card-unread .notification-text .muted { font-weight: 400; }
.page-notifications .avatar-sm { width: 32px; height: 32px; font-size: .9rem; }
.page-notifications .notification-more { margin-top: 1rem; text-align: center; }

/* Libraries have book-cover cards and a comfortable reading measure. */
.workspace-library :is(.guide-grid, .strategy-grid, .grid) { gap: 1.4rem; }
.workspace-library :is(.guide-card, .strategy-card, .template-card) { min-height: 210px; border-top: 5px solid var(--spruce); display: flex; flex-direction: column; gap: .6rem; }
.workspace-library :is(.guide-card, .strategy-card, .template-card):nth-child(3n + 2) { border-top-color: var(--brass); }
.workspace-library :is(.guide-card, .strategy-card, .template-card):nth-child(3n) { border-top-color: var(--clay); }
.workspace-library :is(.guide-card, .strategy-card, .template-card) h3 { margin-top: .4rem; font-size: 1.4rem; }
.workspace-library :is(.guide-meta, .strategy-card-foot, .template-card > .btn-row) { margin-top: auto; padding-top: 1rem; }
.workspace-library .guide-read { max-width: 760px; margin-inline: auto; }
.workspace-library .guide-tip { padding: clamp(1.25rem, 3vw, 2.5rem); line-height: 1.85; border: 1px solid var(--line); }
.workspace-library .guide-tip-head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.workspace-library .strategy-method { border-radius: var(--radius); background: var(--spruce-soft); }
.workspace-library .guide-filter, .workspace-library .strategy-filters { padding-block: .75rem 1.25rem; }
.workspace-library .guide-source { background: var(--paper-deep); }

/* Everyday practices, calendar and steps. */
.checkin-calendar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--workspace-gap); align-items: start; }
.upcoming-checkins { padding: 1.5rem; border: 1px solid var(--spruce); border-radius: var(--radius); background: var(--spruce-soft); }
.checkin-calendar .upcoming-checkins .card-row { flex-wrap: wrap; }
.checkin-calendar .schedule-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
/* The narrowest phones stack the button under the date, so the date isn't cut off under its picker icon. */
@media (max-width: 360px) { .checkin-calendar .schedule-form { grid-template-columns: minmax(0, 1fr); } }
.checkin-calendar .schedule-form label { grid-column: 1 / -1; margin: 0; }
.checkin-calendar .schedule-form .input { margin-bottom: 0; }
/* The panel is already spruce-soft, so a secondary button on it needs its own card fill and outline to read as one. */
.upcoming-checkins .btn-secondary { border-color: var(--spruce); }
.upcoming-checkins .btn-secondary:not(:hover) { background: var(--card); }
.checkin-calendar .past-checkins .card { padding-block: 1rem; }
.checkin-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: var(--workspace-gap); }
.checkin-shortcuts .boards-shortcut { margin: 0; }
@media (min-width: 768px) { .checkin-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.workspace-practice .routine-card { border-top: 4px solid var(--spruce); }
.workspace-practice .routine-steps { padding-left: 1.75rem; }
.workspace-practice .routine-steps li { padding: .45rem .3rem; }
.workspace-practice .routine-steps li::marker { font-weight: 700; color: var(--spruce); }
.workspace-practice .repair-step { font-family: var(--font-display); font-size: 1.25rem; color: var(--spruce-deep); }
.workspace-practice .repair-guide .field + .field { padding-top: 1rem; border-top: 1px solid var(--line); }
.workspace-practice .rtb-lines p { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.workspace-practice .rtb-lines p:last-child { border: 0; }
.workspace-practice .checkin-step { scroll-margin-top: 2rem; }

/* Profiles, shared boards and the family's story. */
.workspace-family .child-card { padding-top: 2rem; min-height: 180px; }
.workspace-family .child-card-head { align-items: flex-start; margin-bottom: 1.3rem; }
.workspace-family .child-card .avatar { width: 58px; height: 58px; font-family: var(--font-display); font-size: 1.6rem; border-radius: var(--radius); background: var(--spruce-soft); color: var(--spruce-deep); }
.workspace-family .child-card:nth-child(even) .avatar { background: var(--wait-soft); color: var(--wait); }
.workspace-family .child-card-head strong { font-family: var(--font-display); font-size: 1.3rem; }
.workspace-family .family-invite { background: var(--spruce-soft); }
.workspace-family .family-invite > p { margin-bottom: 1rem; }
/* The secondary button shares the panel's tint, so on this panel it takes the card and an edge. */
.workspace-family .family-invite .btn-secondary { background: var(--card); border-color: var(--spruce); }
.workspace-family .family-invite .btn-secondary:hover { background: var(--spruce); color: var(--card); }
.workspace-family .identity-section { border-top: 3px solid var(--spruce); }
/* Who I Am is one reading column: on wide screens its rows and "I am…" field stop at a reading width. */
.page-identities :is(.identity-statements, .identity-sections) { max-width: 46rem; }
.workspace-family .kidview-card { padding: 2rem; }
.page-guest_views { max-width: 820px; }
/* Width and style only: the colour is the board's own (.topic-<color>), the one the family picked. */
.workspace-board .topic-card { min-height: 190px; justify-content: flex-start; align-items: flex-start; padding: 1.6rem; border-bottom-width: 4px; border-bottom-style: solid; }
.workspace-board .topic-card strong { font-family: var(--font-display); font-size: 1.45rem; }
/* .workspace-page h2 would enlarge the column titles; keep the size the h3s had here. */
.workspace-board .board-column-head h2 { font-size: 1.08rem; }
.workspace-board .topic-card > .muted { margin-top: auto; padding-top: 1rem; }
/* On a phone a board is one compact row (emoji, name, open count at the end), so a few boards don't push "New board" two screens down. */
@media (max-width: 600px) {
  .workspace-board .topic-card { min-height: 0; flex-direction: row; align-items: center; gap: .9rem; padding: 1rem 1.1rem; }
  .workspace-board .topic-card .topic-icon-lg { font-size: 1.6rem; }
  .workspace-board .topic-card strong { font-size: 1.15rem; min-width: 0; }
  .workspace-board .topic-card > .muted { margin: 0 0 0 auto; padding-top: 0; text-align: right; flex-shrink: 0; }
}
.workspace-board .new-topic-form { background: var(--paper-deep); }
.workspace-board .kanban-column { border-radius: var(--radius); }

/* Every editor uses a readable form canvas; no full-width text inputs on desktop. */
.workspace-form > :is(.narrow, .guide-read, .strategy-builder-shell) { max-width: 760px; margin-inline: auto; }
.workspace-form > .card { border-top: 4px solid var(--spruce); }
.workspace-form .subfields { padding: 1.25rem; margin-top: .75rem; background: var(--paper-deep); border-radius: var(--radius); }
.workspace-form .subfields legend { font-family: var(--font-display); font-size: 1.1rem; max-width: 100%; padding-inline: .4rem; letter-spacing: 0; text-transform: none; }
/* On a tinted fieldset the native legend sits on the border, cutting a notch and wrapping half outside
   the box. Floating it drops the special legend placement, so it renders as the first line inside. */
.workspace-form .subfields > legend { float: left; width: 100%; padding: 0; margin: 0; color: var(--ink); line-height: 1.25; }
.workspace-form .stack { gap: 1.25rem; }
.workspace-form .stack > .form-grid-2 { row-gap: 1.25rem; }
.workspace-form .stack > input[type=submit] { margin-top: .5rem; }
.workspace-form .field-row { flex-wrap: wrap; }
.workspace-form .field-row > :is(input[type=text], textarea) { flex: 1 1 220px; }
/* A saved row keeps its remove pill beside the text on phones; the input gives up the width. */
.workspace-form .field-row:has(> .remove-toggle) { flex-wrap: nowrap; }
.workspace-form .field-row:has(> .remove-toggle) > :is(input[type=text], textarea) { min-width: 0; }
.workspace-form .strategy-builder-shell { background: transparent; }

/* Utilities: anchored settings, a distinct plan card, deliberate danger area. */
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 700px); gap: var(--workspace-gap); align-items: start; }
.settings-nav { position: sticky; top: 6rem; display: grid; gap: .25rem; border-left: 2px solid var(--line); padding-left: .5rem; }
.settings-nav a { display: flex; align-items: center; min-height: 44px; padding: .5rem .8rem; text-decoration: none; border-radius: var(--radius); font-size: .9rem; }
.settings-nav a:hover { background: var(--spruce-soft); }
.settings-sections > .card { scroll-margin-top: 1rem; }
.settings-sections > .card:first-child { border-top: 4px solid var(--spruce); }
.settings-sections .section { margin-top: 1.5rem; }
.settings-sections form { margin-top: 1rem; }
.settings-sections .check-label { padding: .5rem 0; }
.settings-sections .theme-choices { margin-top: 1rem; }
/* Signed-in devices: one compact row each (named device + last used), this device first with no sign-out of its own. */
.settings-sections .device-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.settings-sections .device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.settings-sections .device-row:first-child { border-top: 0; }
.settings-sections .device-row form { margin-top: 0; }
.settings-sections .device-more { margin-top: .5rem; }
.settings-sections .device-more .device-row:first-child { border-top: 1px solid var(--line); }
.page-billing > .section { max-width: 760px; }
.page-billing .section > .card { padding: clamp(1.5rem, 4vw, 3rem); background: var(--spruce-soft); border-color: var(--spruce); }
.page-billing .billing-price { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 1.5rem; }
.page-billing .billing-price strong { font-size: 2rem; line-height: 1.1; }
/* Billing leads with the family's status (badge + one line), the price after it. */
.page-billing .billing-status { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-billing .billing-status p { margin: 0; font-weight: 600; }
.page-billing .billing-note { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; margin-top: 1.5rem; }
.page-billing > [role=status] { border-left: 3px solid var(--brass); padding: .75rem 1rem; background: var(--wait-soft); }
.page-family_data > .section { max-width: 820px; }
.workspace-page .danger-zone { border-color: var(--clay); border-top: 4px solid var(--clay); background: var(--card); }
.workspace-page .danger-zone form { margin-top: 1.5rem; }
.workspace-admin .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.workspace-admin .data-table th { background: var(--paper-deep); padding: 1rem; }
.workspace-admin .data-table td { padding: 1rem; }
/* Scroll sideways on phones instead of squeezing titles to one word per line. */
.workspace-admin .data-table { min-width: 38rem; }
.workspace-admin .data-table tbody tr:nth-child(even) { background: var(--paper); }
.workspace-admin .admin-nav { flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }
/* A tip's Edit and Delete stay side by side, lined up row to row (here, since .workspace-page .btn-row wraps). */
.workspace-admin .admin-tip-actions { flex-wrap: nowrap; flex-shrink: 0; }

/* A welcoming front door, including password recovery and invitation states. */
.workspace-auth { max-width: 1140px; }
.workspace-auth .auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding-top: 2rem; gap: 0; }
.auth-scene { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); background: var(--feature); color: var(--feature-ink); border-radius: var(--radius) 0 0 var(--radius); }
.auth-scene > .brand-motif { position: static; width: 105px; height: 105px; margin-bottom: 1.5rem; opacity: 1; color: var(--feature-accent); }
.auth-scene-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; }
.auth-scene-home { color: inherit; text-decoration: none; }
.auth-scene-home:hover { text-decoration: underline; text-underline-offset: .15em; }
.auth-scene-home:focus-visible { outline-color: currentColor; }
.auth-scene-tagline { margin-top: 1rem; font-size: 1.1rem; max-width: 23ch; }
.auth-table { width: 180px; height: 65px; border: 2px solid currentColor; border-radius: 50%; margin: 3rem 0 1rem; position: relative; transform: rotate(-6deg); }
.auth-table::before, .auth-table::after { content: ""; position: absolute; height: 45px; width: 2px; background: currentColor; top: 50px; left: 26px; }
.auth-table::after { left: auto; right: 26px; }
.auth-table span { width: 25px; height: 15px; border: 2px solid currentColor; border-radius: 50%; position: absolute; top: 24px; left: 24px; }
.auth-table span:nth-child(2) { left: 75px; top: 9px; }
.auth-table span:nth-child(3) { left: 125px; }
.auth-table span:nth-child(4) { left: 75px; top: 38px; }
.product-relationship .auth-table { border-radius: 16px; transform: rotate(3deg); }
.workspace-auth .auth-card { max-width: none; width: 100%; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 0 var(--radius) var(--radius) 0; display: flex; flex-direction: column; justify-content: center; box-shadow: none; }
.workspace-auth .auth-card > h1 { font-size: 1.8rem; }
.workspace-auth .auth-card > form { margin-top: 1.75rem; }
.workspace-auth .auth-links { flex-wrap: wrap; line-height: 1.8; }
.mk-legal { max-width: 850px; }
.mk-legal > h1 { font-size: clamp(2rem, 4vw, 3.2rem); border-top: 5px solid var(--spruce); padding-top: 2rem; }
.mk-legal > .card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 1.75rem 0; box-shadow: none; line-height: 1.85; }
.mk-legal > .card h2 { margin-bottom: .75rem; font-size: 1.4rem; }
/* The contents list: under the date on a phone, a sticky rail beside the text on a wide screen. */
.legal-toc { margin: 1.25rem 0 0.5rem; font-size: .92rem; }
.legal-toc-head { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.legal-toc a { color: var(--ink); }
.legal-list { margin: 0; padding-left: 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.legal-list li { break-inside: avoid; margin-bottom: .2rem; }
.mk-legal > section { scroll-margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .mk-legal { max-width: 72rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
  .mk-legal > * { grid-column: 2; }
  .mk-legal > .legal-toc { grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 2rem; margin-top: 2.6rem; }
}

@media (min-width: 1100px) {
  .product-relationship .workspace-page { padding-top: 2.25rem; }
  .product-relationship .workspace-page .page-head { padding-top: 4.6rem; }
  .product-relationship .settings-nav { top: 2rem; }
}
@media (max-width: 900px) {
  .writing-desk, .checkin-calendar { grid-template-columns: minmax(0, 1fr); }
  .writing-history { margin-top: .75rem; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; border: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
  .settings-nav a { background: var(--paper-deep); }
}
@media (max-width: 720px) {
  .workspace-page { padding-top: 1.25rem; }
  .workspace-page .page-head { padding-top: 3.8rem; padding-bottom: 1.25rem; }
  .page-illustration { width: 82px; height: 47px; }
  .workspace-page .page-head h1 { font-size: 2rem; }
  .workspace-page .page-head > div:not(.btn-row):not(.streak) { flex-basis: 100%; }
  .workspace-page .card-row { flex-wrap: wrap; }
  .workspace-page .card-row > .btn-row { width: 100%; }
  /* On a phone the tip's actions move under its title instead of squeezing it. */
  .workspace-admin .admin-tip-row { flex-wrap: wrap; }
  .workspace-admin .admin-tip-row > :first-child { flex-basis: 100%; }
  /* A trailing status (badge, unread dot, arrow) keeps one top-right slot on every row; a long title
     wraps in its own column. Rows that end in buttons still wrap them underneath. */
  .workspace-page .card-row:has(> :is(.badge, .dot, [aria-hidden="true"]):last-child) { flex-wrap: nowrap; align-items: flex-start; }
  .workspace-page .card-row > :is(.badge, .dot, [aria-hidden="true"]):last-child { flex-shrink: 0; }
  .workspace-page .card-row > .badge:last-child { max-width: 45%; }
  .workspace-page .card-row > .dot:last-child { margin-top: .5rem; }
  .workspace-form .subfields { padding: .75rem; }
  .workspace-page .grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked one per row, kid cards drop the desktop card height so a family fits on a screen or two. */
  .workspace-family .child-card { min-height: 0; padding-top: 1.1rem; }
  .workspace-family .child-card-head { margin-bottom: .8rem; }
  .workspace-page .page-head .btn-row { width: 100%; }
  .workspace-page .section { margin-top: 1.75rem; }
  .workspace-page .field-row { flex-wrap: wrap; }
  .workspace-page .field-row > * { min-width: 0; }
  .workspace-page .form-grid-3, .workspace-page .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .workspace-auth .auth-page { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .auth-scene { padding: 1.5rem; border-radius: var(--radius) var(--radius) 0 0; min-height: 150px; }
  .auth-scene > .brand-motif { width: 55px; height: 55px; position: absolute; right: 1.25rem; top: 1.25rem; }
  .auth-scene-name { font-size: 1.8rem; max-width: 75%; }
  .auth-scene-tagline { font-size: .95rem; max-width: 75%; margin-top: .65rem; }
  .auth-table { display: none; }
  .workspace-auth .auth-card { border-radius: 0 0 var(--radius) var(--radius); }
  .workspace-auth .auth-card > h1 { font-size: 1.6rem; }
  .upcoming-checkins { padding: 1rem; }
  .workspace-page .page-head .avatar-lg { width: 42px; height: 42px; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-page * { scroll-behavior: auto; }
}