/* Companion behavior extends the approved prototype. */
:root {
  --canvas: #f7f6f0;
}
body {
  background: var(--canvas);
}
.shell {
  max-width: 1160px;
}
.error {
  background: #fff0e9;
  border-left: 3px solid #a23d24;
  padding: 16px;
  color: #74331f;
  white-space: pre-line;
}
.notice {
  white-space: pre-line;
}
.signin {
  max-width: 540px;
  margin: 60px auto;
  padding: 30px;
  background: white;
  border-radius: 18px;
}
.signin .masthead-bird {
  margin: auto;
}
.signin h1 {
  font-family: var(--serif);
  margin: 16px 0;
}
.signin label {
  display: block;
  margin: 20px 0 8px;
}
.signin input {
  width: 100%;
  padding: 12px;
  border: 1px solid #a5aaa7;
  border-radius: 8px;
  font: inherit;
}
.signin button {
  margin-top: 12px;
}
.demo-bar {
  padding: 12px;
  text-align: center;
}
.paper-copy,
.turn-text,
.notebook,
.source-detail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.paper-source {
  font: 12px/1.6 var(--sans);
  color: var(--muted);
  margin-top: 14px;
}
.paper-source summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
}
.paper-source p {
  font: 13px/1.6 var(--sans);
}
.edition-section {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  position: relative;
}
.edition-section h2 {
  font: 600 24px/1.3 var(--serif);
  margin: 0 0 12px;
}
.edition-section .spot {
  width: 80px;
  float: right;
  margin: 0 0 8px 18px;
}
.edition-section .spot svg {
  width: 100%;
  height: auto;
}
.edition-section .section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.paper-copy {
  font: 17px/1.7 var(--serif);
}
.paper-end {
  border-top: 3px double var(--ink);
  padding: 28px 0;
  text-align: center;
}
.source-detail {
  max-width: 65ch;
}
.chat-paper {
  min-width: 0;
}
.chat-transcript {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 24px 0;
}
.turn {
  max-width: 92%;
  padding: 16px 20px;
  border-radius: 14px;
  font: 17px/1.65 var(--serif);
}
.turn.user {
  background: #e8f4fd;
  align-self: flex-end;
}
.turn.assistant {
  padding-left: 0;
  align-self: flex-start;
}
.turn-label {
  display: block;
  font: 600 12px var(--sans);
  margin-bottom: 8px;
}
.composer textarea {
  width: 100%;
  min-height: 110px;
  margin: 10px 0;
  font: 17px/1.6 var(--serif);
}
.choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.project-invite {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: #e9efdf;
  padding: 24px;
  border-radius: 18px;
  gap: 18px;
  margin: 28px 0;
}
.project-invite svg {
  width: 100%;
}
.project-invite input {
  width: 100%;
  font: inherit;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #a8b6a4;
  border-radius: 8px;
  background: white;
}
.notebook-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
}
.notebook-editor textarea {
  font: 18px/1.7 var(--serif);
  min-height: 310px;
  resize: vertical;
  width: 100%;
  border: 1px solid #bfc7bd;
  border-radius: 12px;
  background: #fff;
  padding: 24px;
}
.notebook-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.notebook-steps button[aria-current="step"] {
  background: var(--yellow);
}
.context-thought {
  white-space: pre-wrap;
  border-left: 2px solid #b8cfab;
  padding-left: 12px;
}
.save-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
}
.record-list {
  display: grid;
  gap: 16px;
}
.record-list button {
  text-align: left;
}
.record-list h2 {
  font-family: var(--serif);
}
.empty-state {
  padding: 36px;
  background: #e9efdf;
  border-radius: 18px;
}
.account-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.account-controls button {
  font-size: 12px;
}
.parent-grid textarea {
  width: 100%;
}
.danger {
  color: #922f1b;
}
.statusline {
  font: 12px/1.6 var(--sans);
  color: var(--muted);
}
button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
textarea,
input {
  max-width: 100%;
}
button,
summary,
a {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 3px solid #285c96;
  outline-offset: 3px;
}
#modal-body {
  overflow-wrap: anywhere;
}
dialog:has(.notebook-create) {
  width: min(480px, calc(100vw - 32px));
  padding: 32px;
}
.notebook-create h2 {
  padding-right: 24px;
  margin-bottom: 24px;
}
.notebook-create form {
  display: grid;
  gap: 24px;
}
.notebook-name {
  display: grid;
  gap: 8px;
}
.notebook-name label {
  font: 600 13px/1.5 var(--sans);
}
.notebook-name input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px;
  font: 16px/1.5 var(--sans);
}
.notebook-name input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.notebook-create form > button {
  justify-self: start;
  min-height: 44px;
}
.notebook-create .error {
  margin: 0;
}
.code {
  font-family: monospace;
  word-break: break-all;
  user-select: all;
}
#toast {
  max-width: min(600px, 90vw);
}
.mobile-topics {
  display: none;
}
.footer {
  gap: 16px;
}
.section-actions button {
  min-height: 44px;
}
.page-intro {
  margin-top: 30px;
}
.plain-link {
  color: #285c96;
}
.project-copy h2 {
  font: 600 24px var(--serif);
}
.retention-notice {
  background: #fff3cf;
  padding: 16px;
  border-radius: 8px;
}
#live-status {
  min-height: 1.5em;
}
.historical {
  background: #fff3cf;
  padding: 14px;
  font: 13px/1.6 var(--sans);
}
@media (max-width: 760px) {
  .notebook-grid,
  .parent-grid {
    grid-template-columns: 1fr;
  }
  .chat-layout {
    display: block;
  }
  .desktop-topics {
    display: none;
  }
  .mobile-topics {
    display: block;
    margin-bottom: 18px;
  }
  .project-invite {
    grid-template-columns: 70px 1fr;
    padding: 18px;
  }
  .shell {
    padding: 0 16px;
  }
  header {
    flex-wrap: wrap;
    gap: 12px;
  }
  header nav {
    order: 4;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .account-controls {
    margin-left: auto;
  }
  .turn {
    max-width: 100%;
  }
  .today-page {
    padding: 24px !important;
  }
  .nameplate-sun {
    display: none;
  }
  .paper-title {
    font-size: 32px !important;
  }
  .signin {
    margin: 20px 16px;
    padding: 24px;
  }
  .edition-section .spot {
    width: 60px;
  }
  .footer {
    flex-wrap: wrap;
  }
  .notebook-editor textarea {
    padding: 16px;
  }
  .project-invite h3 {
    font-size: 20px;
  }
  .page-intro h1 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  @page {
    size: Letter;
    margin: 0.5in;
  }
  body,
  .shell,
  .today-page {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  header,
  .demo-bar,
  .footer,
  button,
  .spot,
  .nameplate-sun,
  .section-actions,
  .audio-status,
  #toast,
  .skip,
  dialog {
    display: none !important;
  }
  main:not(.today-page) {
    display: block;
  }
  .paper-source details,
  .paper-source p {
    display: block;
  }
  .paper-copy {
    font-size: 12pt;
  }
  .edition-section {
    break-inside: avoid;
  }
  .paper-end {
    padding: 14px 0;
  }
  .historical {
    background: none;
    border: 1px solid black;
  }
  .paper-source {
    color: #000;
  }
  .paper-source summary {
    padding: 0;
    min-height: 0;
  }
  .paper-source details:not([open]) > *:not(summary) {
    display: block !important;
  }
  .paper-source a {
    color: #000;
    text-decoration: none;
  }
  .paper-source a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
  }
  .spot svg,
  svg {
    display: none !important;
  }
}
/* Server-backed screens retain the newspaper and roomy illustrated workbench. */
.shell {
  max-width: 1224px;
  padding: 0 32px;
}
.shell > header {
  gap: 22px;
  padding: 20px 0;
}
.brand {
  gap: 10px;
}
.brand .wordmark {
  line-height: 1.1;
}
.brand .wordmark small {
  display: block;
  font: 9px/1.4 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 5px;
}
.account-controls {
  flex-shrink: 0;
  gap: 14px;
}
.account-controls > span {
  max-width: 85px;
  text-align: right;
}
.shell > main {
  margin: 30px auto 42px;
}
.shell > main.today-page {
  max-width: 760px;
  margin: 30px auto 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: 0 48px;
  border-radius: 3px;
  box-shadow: 0 5px 20px #1f293307;
}
.paper-folio {
  display: flex;
  justify-content: space-between;
  font: 10px/1.5 var(--sans);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.paper-nameplate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 20px;
  border-bottom: 3px double var(--ink);
}
.shell:not(.parent) .paper-nameplate .paper-title {
  font: 600 42px/1.2 var(--serif);
  letter-spacing: -0.045em;
  margin: 8px 0 0;
}
.paper-nameplate .eyebrow {
  font-size: 10px;
}
.paper-dateline {
  display: flex;
  justify-content: space-between;
  font: 10px/1.5 var(--sans);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 15px;
}
.shell:not(.parent) main p.historical {
  font: 12px/1.7 var(--sans);
  margin: 18px 0 25px;
  border-left: 3px solid var(--yellow);
}
.paper-greeting {
  padding: 8px 0 0;
}
.shell:not(.parent) .paper-greeting h2 {
  font-size: 28px;
  margin: 0 0 10px;
}
.shell:not(.parent) .paper-greeting p {
  font-size: 17px;
  margin: 0 0 20px;
}
.paper-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.shell:not(.parent) main p.story-credit {
  margin: 12px 0 0;
  font: 12px/1.5 var(--sans);
  color: var(--muted);
}
.shell:not(.parent) main p.statusline {
  font: 11px/1.6 var(--sans);
}
.edition-section {
  display: flow-root;
}
.edition-section > .eyebrow {
  font-size: 10px;
  display: block;
  margin-bottom: 10px;
}
.shell:not(.parent) .edition-section h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
}
.edition-section:nth-of-type(3) {
  background: var(--sky);
  padding: 26px;
  border-radius: 3px;
  border-top: 0;
  margin: 20px -12px;
}
.edition-section:nth-of-type(4) {
  background: var(--sunlit);
  padding: 26px;
  border-radius: 3px;
  border-top: 3px double var(--ink);
  margin: 24px -12px;
}
.edition-section .paper-source p {
  font: 12px/1.7 var(--sans) !important;
}
.edition-section .paper-source a {
  color: #285c96;
}
.edition-section .spot:has(svg[viewBox="0 0 320 230"]) {
  width: 145px;
  background: #d8e9e9;
  border-radius: 50%;
  margin: 12px -5px 10px 16px;
}
.parent-note {
  background: var(--sunlit);
  padding: 22px !important;
  border-top: 0;
  margin: 24px 0;
}
.shell:not(.parent) main .paper-end p {
  font: 17px/1.6 var(--serif);
  margin: 10px 0;
}
.paper-end .eyebrow {
  font-size: 11px;
}
.today-page .bottom-note {
  margin: 0 0 16px;
}
.paper-source summary,
.source-context summary,
.project-context summary {
  min-height: 44px;
  cursor: pointer;
  padding: 10px 0;
}
.paper-source p {
  margin-bottom: 12px;
}
.source-context {
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  padding-bottom: 12px;
  color: var(--muted);
  font: 12px/1.6 var(--sans);
}
.source-context p {
  font: 13px/1.65 var(--sans) !important;
}
.chat-layout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 32px;
}
.chat-layout > aside {
  padding-top: 10px;
}
.chat-paper {
  padding: 32px;
  overflow: visible;
}
.chat-paper h1 {
  font-size: 32px !important;
  max-width: 21ch;
}
.chat-transcript {
  padding: 0;
  margin: 28px 0;
}
.turn {
  margin: 0;
  max-width: 92%;
}
.turn.assistant {
  padding: 0 12px 0 0;
}
.turn.user {
  border-radius: 16px 16px 3px 16px;
  border: 1px solid #d6e6f1;
}
.shell:not(.parent) main p.conversation-opening {
  font-size: 18px;
  line-height: 1.8;
  max-width: 45ch;
}
.composer {
  background: var(--canvas);
  padding: 20px;
  border: 1px solid #cbd0c6;
  border-radius: 14px;
}
.composer textarea {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 0;
}
.composer .save-row {
  margin-bottom: 0;
}
.composer .quiet {
  font: 11px/1.6 var(--sans);
  max-width: 240px;
}
.topic-button {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  min-height: 70px;
  padding: 16px;
  margin: 12px 0;
  font: 16px/1.5 var(--serif);
}
.topic-button span {
  display: block;
  color: var(--muted);
  font: 10px/1.5 var(--sans);
  margin-top: 8px;
}
.topic-button.selected {
  background: var(--sunlit);
  border-color: #d8c99b;
}
.project-invite {
  grid-template-columns: 85px minmax(0, 1fr);
  padding: 24px 20px;
}
.project-invite h2 {
  font-size: 22px !important;
  margin: 8px 0 12px;
}
.project-invite .eyebrow {
  font-size: 9px;
}
.shell:not(.parent) .project-invite p {
  font-size: 15px;
}
.project-invite input {
  margin-top: 0;
}
.project-invite label {
  font-size: 11px;
}
.project-invite > div:first-child {
  align-self: center;
}
.project-library {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  margin-top: 32px;
}
.project-library .project-card,
.project-library .project-card:not(:first-child) {
  display: flex;
  min-width: 0;
}
.project-library .project-art {
  height: 185px;
}
.project-library .project-art svg {
  height: 170px;
}
.project-library .project-copy {
  padding-bottom: 38px;
}
.project-library .project-copy h2 {
  font: 500 28px/1.3 var(--serif) !important;
  margin: 12px 0;
}
.project-library .project-copy p {
  margin-bottom: 18px;
}
.project-library .project-copy .eyebrow {
  font-size: 10px;
}
.notebook-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 32px;
}
.notebook-grid > section {
  min-width: 0;
}
.notebook-grid > aside {
  padding-top: 22px;
}
.notebook-grid > aside > .panel.tint {
  background: var(--garden);
  border-radius: 18px;
}
.notebook-grid > aside > .panel > svg {
  max-width: 100%;
  height: 180px;
  display: block;
  margin: auto;
}
.notebook-grid .work-title {
  font-size: 40px !important;
  line-height: 1.2;
}
.notebook-grid .panel h2 {
  font-size: 18px;
}
.notebook-grid .panel p {
  font-size: 15px !important;
}
.notebook-grid .project-context {
  margin-bottom: 28px;
}
.project-context details {
  font: 12px/1.6 var(--sans);
}
.project-context details p {
  font: 14px/1.7 var(--serif) !important;
}
.notebook-steps {
  padding: 6px;
  gap: 2px;
}
.notebook-steps button {
  padding: 8px 4px;
  font-size: 11px;
  line-height: 1.5;
}
.notebook-steps button .step-number {
  margin-right: 3px;
}
.notebook-editor {
  padding: 22px;
}
.notebook-editor textarea {
  padding: 20px;
  min-height: 330px;
  border-color: #bfc7bd;
  background: #fff;
  line-height: 1.85;
}
.notebook-editor label {
  font-size: 13px;
}
.save-row .quiet {
  font: 11px/1.6 var(--sans);
}
.empty-state {
  min-width: 0;
  padding: 34px;
  text-align: center;
}
.empty-state > svg {
  max-width: 230px;
  display: block;
  margin: 0 auto 20px;
}
.empty-state p {
  max-width: 45ch;
  margin: 0 auto 24px;
}
.empty-state h2 {
  font-size: 28px !important;
}
.parent .page-intro {
  margin: 32px 0;
}
.parent .page-intro h1 {
  font-size: 38px;
  letter-spacing: -0.035em;
  line-height: 1.22;
}
.parent .page-intro p {
  font-size: 15px;
  max-width: 62ch;
}
.parent .page-intro .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.parent .panel h2 {
  font-size: 21px;
}
.parent .panel h3 {
  font-size: 16px;
  margin-top: 8px;
}
.parent .panel.sunlit {
  background: var(--sunlit);
  border-color: #e8d9b2;
}
.parent .panel.tint {
  background: var(--garden);
}
.parent .panel p {
  line-height: 1.75;
}
.parent .tool-row > .secondary {
  margin: 4px 10px 5px 0;
}
.parent .tool-row > .link-button {
  display: block;
}
.briefing-item {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.briefing-item > .checkline {
  font-weight: 600;
  margin: 0 0 12px;
}
.briefing-item > p {
  font-size: 13px;
}
.briefing-item .checkline {
  align-items: flex-start;
}
.briefing-item input {
  flex-shrink: 0;
}
.checkline {
  min-height: 44px;
}
.child-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}
.child-picker select {
  padding: 10px;
  border: 1px solid #aab3bc;
  border-radius: 7px;
  font: 13px var(--sans);
  background: white;
}
.signin {
  max-width: 560px;
  margin: 55px auto;
  border: 1px solid var(--line);
  background: #fffef9;
  padding: 38px;
  box-shadow: 0 6px 24px #1f293305;
}
.signin-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}
.signin-brand .masthead-bird {
  margin: 0;
}
.signin h1 {
  font: 500 35px/1.25 var(--serif);
  letter-spacing: -0.035em;
  margin: 14px 0 18px;
}
.signin > p {
  font: 16px/1.7 var(--serif);
  color: var(--muted);
}
.signin > .eyebrow {
  font-size: 10px;
}
.signin .auth-section {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 26px;
}
.auth-section h2 {
  font: 600 17px/1.5 var(--sans);
  margin-bottom: 10px;
}
.auth-section p {
  margin-bottom: 14px;
}
.auth-section label {
  font-size: 12px;
  margin-top: 16px;
}
.auth-section input {
  font: 15px/1.5 var(--sans);
  background: white;
}
.auth-section button {
  width: 100%;
  margin-top: 14px;
}
.auth-section summary {
  min-height: 44px;
  cursor: pointer;
  font-size: 13px;
}
.signin p.auth-footer {
  font: 11px/1.7 var(--sans);
  margin-top: 26px;
}
.signin .error {
  font: 13px/1.6 var(--sans);
}
.pairing-code {
  font: 24px/1.6 monospace;
  padding: 20px;
  background: var(--sunlit);
  border: 1px solid #e8d9b2;
  border-radius: 10px;
}
.busy-message {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 0;
  min-height: 20px;
}
.error {
  margin: 20px 0;
  border-radius: 4px;
}
.pause-notice {
  margin-top: 24px;
}
.shell:not(.parent) .page-intro h1 {
  font-size: 40px;
}
.shell:not(.parent) .page-intro p {
  font-size: 18px;
}
.shell:not(.parent) .page-intro .eyebrow {
  display: block;
  margin-bottom: 12px;
}
pre.source-detail {
  white-space: pre-wrap;
  font: 13px/1.6 var(--sans);
}
.footer {
  margin-top: 30px;
  padding: 18px 0;
}
.danger {
  color: #943c25 !important;
}
.library .panel > h2 {
  margin-top: 20px;
}
.library .panel > p {
  font-size: 16px !important;
}
.library .panel {
  padding: 28px;
}
.library .tool-illustration {
  margin: -28px -28px 24px;
  height: 190px;
}
.library .tool-illustration svg {
  height: 175px;
}
.shell:not(.parent) .bottom-note {
  font: 11px/1.7 var(--sans);
}
.page-intro {
  margin-bottom: 30px;
}
summary:focus-visible {
  outline: 3px solid #285c96;
  outline-offset: 3px;
}
.retention-notice {
  font: 13px/1.7 var(--sans) !important;
}
.permission > div {
  min-width: 0;
}
.permission > .toggle {
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .shell {
    padding: 0 24px;
  }
  .shell > header {
    gap: 10px;
  }
  .account-controls {
    gap: 8px;
  }
  .account-controls > span {
    display: none;
  }
  .chat-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 22px;
  }
  .chat-paper {
    padding: 26px;
  }
  .notebook-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
  }
  .notebook-steps button .step-number {
    display: none;
  }
}
@media (max-width: 760px) {
  .shell {
    padding: 0 16px;
  }
  .shell > header {
    padding: 16px 0 10px;
    gap: 8px;
  }
  .brand .wordmark small {
    font-size: 8px;
  }
  .shell > header .brand {
    margin-right: auto;
  }
  .account-controls {
    margin-left: 0;
  }
  .account-controls button {
    font-size: 11px;
  }
  .shell > header nav {
    order: 4;
    flex-basis: 100%;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    padding-top: 10px;
    margin-top: 5px;
  }
  .shell > header nav button {
    flex: 1;
    white-space: nowrap;
    padding: 10px 6px;
    font-size: 12px;
    min-height: 44px;
  }
  .shell > main {
    margin: 22px auto 30px;
  }
  .shell > main.today-page {
    padding: 0 22px !important;
    margin: 20px auto 28px;
  }
  .paper-nameplate {
    padding: 22px 0;
  }
  .paper-nameplate .eyebrow {
    font-size: 8px;
  }
  .shell:not(.parent) .paper-nameplate .paper-title {
    font-size: 31px !important;
    white-space: nowrap;
  }
  .paper-folio {
    font-size: 9px;
  }
  .paper-dateline {
    font-size: 9px;
    gap: 12px;
  }
  .paper-dateline span:last-child {
    text-align: right;
  }
  .paper-greeting {
    padding-top: 4px;
  }
  .shell:not(.parent) .paper-greeting h2 {
    font-size: 26px;
  }
  .shell:not(.parent) .paper-greeting p {
    font-size: 16px;
  }
  .shell:not(.parent) main p.historical {
    font-size: 11px;
    padding: 12px;
    margin: 16px 0 22px;
  }
  .edition-section {
    padding: 24px 0;
  }
  .edition-section .spot {
    width: 54px;
    margin-left: 10px;
  }
  .shell:not(.parent) .edition-section h2 {
    font-size: 23px;
  }
  .edition-section .paper-copy {
    font-size: 16px;
  }
  .edition-section:nth-of-type(3),
  .edition-section:nth-of-type(4) {
    padding: 22px 18px;
    margin-left: -7px;
    margin-right: -7px;
  }
  .edition-section .spot:has(svg[viewBox="0 0 320 230"]) {
    width: 100px;
    margin: 0 -4px 8px 12px;
  }
  .section-actions {
    gap: 8px !important;
  }
  .section-actions .secondary {
    font-size: 11px;
    padding: 10px 12px;
  }
  .section-actions .link-button {
    font-size: 11px;
  }
  .paper-end {
    padding: 24px 0;
  }
  .chat-layout {
    display: block;
    margin: 0;
  }
  .chat-paper {
    padding: 24px 18px;
    border-radius: 14px;
  }
  .chat-paper h1 {
    font-size: 29px !important;
    max-width: none;
  }
  .chat-transcript {
    padding: 0;
    margin: 22px 0;
  }
  .chat-transcript .turn {
    max-width: 100%;
    font-size: 16px;
    padding: 15px;
  }
  .chat-transcript .turn.assistant {
    padding: 0 5px 0 0;
  }
  .mobile-topics {
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    font: 12px/1.6 var(--sans);
  }
  .mobile-topics > summary {
    min-height: 44px;
    padding: 8px 0;
    cursor: pointer;
  }
  .mobile-topics .topic-button {
    font-size: 14px;
  }
  .composer {
    padding: 15px;
  }
  .composer textarea {
    padding: 12px;
    font-size: 16px;
  }
  .composer label {
    font-size: 11px;
  }
  .composer .save-row .quiet {
    max-width: none;
  }
  .project-invite {
    grid-template-columns: 1fr;
    padding: 20px;
    margin: 24px 0;
  }
  .project-invite > div:first-child {
    height: 90px;
    max-width: 170px;
    margin: auto;
  }
  .project-invite > div:first-child svg {
    height: 100px;
    width: 170px;
  }
  .project-invite h2 {
    font-size: 22px !important;
  }
  .project-invite .primary {
    font-size: 12px;
    padding: 12px 16px;
  }
  .project-invite .eyebrow {
    font-size: 9px;
  }
  .notebook-grid {
    display: block;
  }
  .notebook-grid > aside {
    padding-top: 20px;
  }
  .notebook-grid .work-title {
    font-size: 32px !important;
  }
  .notebook-steps {
    margin: 20px 0;
    gap: 0;
    padding: 5px;
  }
  .notebook-steps button {
    font-size: 11px;
    padding: 8px 3px;
  }
  .notebook-editor {
    padding: 20px;
  }
  .notebook-editor textarea {
    padding: 16px;
    font-size: 17px;
    min-height: 300px;
  }
  .project-context {
    padding: 16px;
  }
  .project-context .eyebrow {
    font-size: 9px;
  }
  .project-library {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }
  .project-library .project-card,
  .project-library .project-card:not(:first-child) {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .project-library .project-art {
    width: 100px;
    height: 100%;
    min-height: 200px;
  }
  .project-library .project-art svg {
    height: 120px;
  }
  .project-library .project-copy {
    padding: 18px 16px 35px;
  }
  .project-library .project-copy h2 {
    font-size: 22px !important;
  }
  .project-library .project-copy .eyebrow {
    font-size: 9px;
  }
  .project-library .project-copy p {
    font-size: 14px !important;
  }
  .project-library .project-copy .quiet {
    font-size: 10px;
  }
  .parent .page-intro {
    margin: 25px 0;
  }
  .parent .page-intro h1 {
    font-size: 30px;
  }
  .parent .page-intro p {
    font-size: 14px !important;
  }
  .parent-grid {
    display: block;
  }
  .parent .panel {
    padding: 22px;
  }
  .parent .panel h2 {
    font-size: 20px;
  }
  .parent .permission {
    gap: 12px;
  }
  .parent .permission p {
    font-size: 12px;
  }
  .parent .toggle {
    min-width: 86px;
    font-size: 11px;
  }
  .parent .panel .secondary,
  .parent .panel .primary {
    font-size: 12px;
    max-width: 100%;
  }
  .parent .panel p {
    font-size: 13px;
  }
  .library {
    grid-template-columns: 1fr;
  }
  .library .panel {
    padding: 24px;
  }
  .library .tool-illustration {
    margin: -24px -24px 20px;
    height: 175px;
  }
  .library .tool-illustration svg {
    height: 160px;
  }
  .shell:not(.parent) .page-intro h1 {
    font-size: 34px;
  }
  .shell:not(.parent) .page-intro p {
    font-size: 17px;
  }
  .empty-state {
    padding: 28px 20px;
  }
  .empty-state > svg {
    max-width: 190px;
  }
  .empty-state h2 {
    font-size: 26px !important;
  }
  .signin {
    margin: 20px 16px;
    padding: 27px 23px;
    border-radius: 15px;
  }
  .signin-brand {
    margin-bottom: 26px;
  }
  .signin h1 {
    font-size: 30px;
  }
  .signin > p {
    font-size: 15px;
  }
  .auth-section h2 {
    font-size: 16px;
  }
  .signin label {
    margin: 15px 0 8px;
  }
  .signin .auth-section {
    padding-top: 22px;
    margin-top: 24px;
  }
  .footer {
    gap: 10px;
    margin-top: 22px;
  }
  .footer > span {
    flex-basis: 100%;
  }
  .footer > button {
    font-size: 10px;
  }
  .shell:not(.parent) .bottom-note {
    font-size: 10px;
    gap: 10px;
  }
  .demo-bar {
    padding: 9px 16px;
    font-size: 9px;
    min-height: 32px;
    line-height: 1.7;
    letter-spacing: 0.05em;
  }
  .demo-bar span {
    display: none;
  }
  .paper-toolbar .secondary {
    font-size: 12px;
    padding: 10px 16px;
  }
  .paper-toolbar .link-button {
    font-size: 11px;
  }
  .shell > main.today-page::after {
    display: none;
  }
}
@media print {
  header,
  .shell > header {
    display: none !important;
  }
  .shell > main.today-page {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .paper-folio,
  .paper-dateline {
    color: #000;
    font-size: 9pt;
  }
  .paper-nameplate {
    padding: 12px 0;
  }
  .shell:not(.parent) .paper-nameplate .paper-title {
    font-size: 28pt !important;
  }
  .paper-nameplate .eyebrow {
    font-size: 9pt;
  }
  .shell:not(.parent) main p.historical {
    font-size: 9pt;
    padding: 8px;
    margin: 12px 0;
  }
  .shell:not(.parent) .paper-greeting h2 {
    font-size: 20pt;
  }
  .shell:not(.parent) .paper-greeting p,
  .shell:not(.parent) main .paper-end p {
    font-size: 12pt !important;
  }
  .edition-section:nth-of-type(3),
  .edition-section:nth-of-type(4) {
    margin: 12px 0;
    padding: 16px 0;
    background: none;
    border-top: 1px solid #777;
  }
  .edition-section {
    padding: 16px 0;
  }
  .shell:not(.parent) .edition-section h2 {
    font-size: 17pt;
  }
  .edition-section .paper-copy {
    font-size: 12pt;
  }
  .edition-section .paper-source p {
    font-size: 8pt !important;
  }
  .edition-section .paper-source summary {
    font-size: 8pt;
  }
  .edition-section .paper-source a::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }
  .paper-source summary {
    list-style: none;
  }
  .paper-source > p,
  .paper-source:not([open]) > p {
    display: block !important;
  }
  .paper-source:not([open]) > :not(summary) {
    display: block !important;
  }
  .paper-toolbar,
  .today-page .bottom-note,
  #audio-status,
  .source-context,
  .busy-message,
  .pause-notice {
    display: none !important;
  }
  .parent-note {
    padding: 12px !important;
    background: none !important;
  }
  .shell > main.today-page::after {
    display: none;
  }
  .paper-end {
    padding: 16px 0 !important;
  }
  body.print-notebook #app {
    display: none !important;
  }
  body.print-notebook dialog {
    display: block !important;
    position: static !important;
    max-width: none;
    width: 100%;
    height: auto;
    max-height: none;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  body.print-notebook dialog .close,
  body.print-notebook dialog button {
    display: none !important;
  }
  body.print-notebook dialog .notebook,
  body.print-notebook dialog .project-context {
    border: 1px solid #777;
    background: none !important;
    break-inside: avoid;
  }
  body.print-notebook dialog .summary-row {
    break-inside: avoid;
  }
  body.print-notebook dialog details:not([open]) > :not(summary) {
    display: block !important;
  }
  body.print-notebook dialog::backdrop {
    background: none;
  }
  body.print-notebook dialog h2 {
    font-size: 20pt;
  }
  body.print-notebook dialog h3 {
    font-size: 11pt;
  }
}
/* External rules keep the retained bird compatible with the strict style CSP. */
.bm-ink {
  fill: #1f2933;
}
.bm-yellow {
  fill: #f2c94c;
}
.bm-blue {
  fill: #bfdff5;
}
.bm-white {
  fill: #ffffff;
}
.bm-none {
  fill: none;
}
.bm-stroke-ink {
  stroke: #1f2933;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.notebook-grid .panel h2.small-title {
  font: 600 11px/1.5 var(--sans) !important;
  letter-spacing: 0.08em;
}
/* A separate print-only attribution block survives native collapsed-details rendering. */
.print-sources {
  display: none;
}
@media print {
  details.paper-source {
    display: none !important;
  }
  .print-sources {
    display: block !important;
    color: #000;
    font: 8pt/1.5 var(--sans);
    margin-top: 8px;
    overflow-wrap: anywhere;
  }
  .print-sources p,
  .shell:not(.parent) main .print-sources p {
    font: 8pt/1.5 var(--sans) !important;
    margin: 4px 0;
  }
  .print-sources a {
    color: #000;
    text-decoration: none;
  }
  .print-sources a::after {
    content: " (" attr(href) ")";
    font: 8pt/1.5 var(--sans);
  }
  .print-sources strong {
    font-size: 8pt;
  }
}
@media print {
  * {
    border-color: #777 !important;
    outline-color: #000 !important;
  }
  .historical {
    border-left-color: #000 !important;
  }
  .paper-nameplate,
  .paper-end,
  .edition-section:nth-of-type(4) {
    border-color: #000 !important;
  }
  .paper-title,
  .paper-copy,
  .paper-greeting,
  .paper-source,
  .print-sources,
  .historical,
  .paper-dateline,
  .paper-folio,
  .eyebrow {
    color: #000 !important;
  }
}
.correction-section-picker {
  width: 100%;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid #aab3bc;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: 14px/1.5 var(--sans);
}
.correction-section-picker:focus-visible {
  outline: 3px solid #285c96;
  outline-offset: 3px;
}

/* A finite shelf of imported papers and cards, with an explicit reading choice. */
.saved-library-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2.3fr);
  gap: 36px;
  align-items: start;
}
.saved-library-list {
  display: grid;
  gap: 8px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 3px 12px 3px 3px;
  overscroll-behavior: contain;
}
.saved-library-item {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 17px 16px;
  border: 1px solid var(--line, #d2d0c7);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.saved-library-item strong { font: 20px/1.25 var(--serif, Georgia, serif); }
.saved-library-item .eyebrow { font-size: 10px; line-height: 1.5; }
.saved-library-item.selected { border-color: var(--ink); background: #f0eee5; }
.saved-library-item:focus-visible { outline: 3px solid #285c96; outline-offset: 2px; }
.saved-document { min-width: 0; border-top: 2px solid var(--ink); }
.saved-document-title { margin: 28px 0 20px; font-size: clamp(30px, 4vw, 46px); }
.saved-document .edition-section h3 { font: 30px/1.2 var(--serif, Georgia, serif); margin: 14px 0; }
.saved-library-placeholder { padding: 50px 24px; }
.saved-library-entry { margin-top: 30px; }
@media (max-width: 700px) {
  .saved-library-layout { grid-template-columns: 1fr; gap: 24px; }
  .saved-library-list { max-height: 270px; }
  .saved-library-item { padding: 14px; }
}
@media print {
  .saved-library-list, .saved-library-placeholder, .saved-library-page > .topline,
  .saved-library-page > .page-intro { display: none !important; }
  .saved-library-layout { display: block; }
  .saved-document { border: none; }
}

.flip-card { max-width: 680px; display: grid; perspective: 1200px; }
.flip-card > .flip-face, .flip-card > .flip-back { grid-area: 1 / 1; min-width: 0; box-sizing: border-box; backface-visibility: hidden; transition: transform 420ms cubic-bezier(.2,.65,.3,1); }
.flip-face { transform: rotateY(0deg); }
.flip-back { transform: rotateY(180deg); }
.flip-card.is-flipped > .flip-face { transform: rotateY(-180deg); }
.flip-card.is-flipped > .flip-back { transform: rotateY(0deg); }
.flip-card [inert] { pointer-events: none; }
.flip-face { display: block; width: 100%; padding: 18px 20px; border: 1px solid #d5dfda; border-radius: 6px; background: #f6f8f3; color: inherit; text-align: left; cursor: pointer; }
.flip-face .paper-copy { display: block; }
.flip-hint { display: block; margin-top: 14px; font: 13px/1.4 var(--sans, sans-serif); color: #456153; }
.flip-back { padding: 18px 20px; background: #f6f8f3; border: 1px solid #d5dfda; border-radius: 6px; }
.flip-back label, .flip-back textarea { display: block; width: 100%; }
.flip-back textarea { margin: 10px 0; resize: none; }
.flip-back [data-flip-back] { display: block; margin-top: 14px; }
.flip-card [hidden], .flip-print { display: none !important; }
.flip-face:focus-visible { outline: 3px solid #285c96; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .flip-card > .flip-face, .flip-card > .flip-back { transition: none; } }
@media print { .flip-card { display: block; perspective: none; } .flip-card .flip-face { transform: none !important; display: block !important; border: none; padding: 0; background: none; } .flip-card:has(.flip-print) .flip-face, .flip-card .flip-back, .flip-hint { display: none !important; } .flip-print { display: block !important; } }

/* Compact, equal-sized flashcard faces; the corner is the only flip control. */
.flip-card > .flip-face, .flip-card > .flip-back { position: relative; padding: 18px 48px 18px 18px; }
.flip-face { cursor: default; display: flex; align-items: center; min-height: 112px; }
.flip-card:has([data-reflection]) .flip-face { min-height: 188px; }
.flip-corner { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; padding: 0; border: 1px solid #cad7cc; border-radius: 50%; background: #fffdf7; color: #456153; font: 21px/1 sans-serif; cursor: pointer; }
.flip-corner:focus-visible { outline: 3px solid #285c96; outline-offset: 2px; }
.flip-back label { font: 13px/1.3 var(--sans, sans-serif); }
.flip-back textarea { height: 66px; min-height: 66px; padding: 8px 10px; margin: 6px 0; font: 16px/1.35 var(--serif, Georgia, serif); }
.flip-back [data-flip-back] { margin: 0; }
.reflection-draft-note { display: block; font: 11px/1.4 var(--sans, sans-serif); color: #607063; margin-bottom: 7px; }
.flip-back [data-reflection-open] { padding: 7px 11px; min-height: 32px; font-size: 12px; }
@media print { .flip-corner { display: none !important; } .flip-card .flip-face { min-height: 0 !important; } }

.flip-corner { width: auto; min-width: 42px; height: 28px; padding: 0 8px; border-radius: 5px; font: 12px/1 var(--sans, sans-serif); }
.flip-card > .flip-face, .flip-card > .flip-back { padding-right: 62px; }

/* Newspaper utilities and small paper cards. */
.today-page .paper-toolbar { gap: 0; margin: 4px 0 20px; }
.paper-utility { border: 0; border-radius: 0; background: none; padding: 4px 0; color: #52605b; font: 12px/1.5 var(--sans, sans-serif); cursor: pointer; }
.paper-utility + .paper-utility { margin-left: 16px; padding-left: 16px; border-left: 1px solid #dcded5; }
.paper-utility:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.paper-utility:focus-visible { outline: 2px solid #285c96; outline-offset: 4px; }
#audio-status:empty { display: none; }
.paper-end .paper-archive { display: block; width: fit-content; margin: 22px auto 6px; font-size: 12px; }
.flip-card > .flip-face, .flip-card > .flip-back { padding: 14px 58px 14px 16px; border: 0; border-bottom: 1px solid #ddd5c2; border-radius: 2px; background: #fbf8ee; }
.flip-card .flip-face { min-height: 84px; }
.flip-card:has([data-reflection]) .flip-face { min-height: 148px; }
.flip-card .paper-copy { font-size: 17px; line-height: 1.5; }
.flip-corner { background: transparent; border: 0; color: #536251; top: 8px; right: 7px; min-width: 40px; height: 30px; }
.flip-corner:hover { background: #eee8d8; }
.flip-corner:active { transform: translateY(1px); }
.flip-back textarea { height: 52px; min-height: 52px; background: #fffdf8; border: 0; border-bottom: 1px solid #c7c6b5; border-radius: 0; margin: 5px 0 8px; padding: 5px 7px; }
.reflection-draft-note { display: inline-block; margin: 4px 0 0; font-size: 10px; }
.flip-back [data-reflection-open] { float: right; background: transparent; border: 0; padding: 4px 0 4px 8px; min-height: 24px; font-size: 11px; }
@media (max-width: 480px) { .flip-card > .flip-back { padding-right: 16px; } .flip-back label { padding-right: 40px; } .flip-card .paper-copy { font-size: 16px; } .reflection-draft-note { font-size: 9px; } }

/* The entire editorial section turns, including its heading and artwork. */
.today-page .edition-section.whole-card { padding: 0; background: transparent; border: 0; margin: 24px 0; }
.section-flip { max-width: none; width: 100%; }
.section-flip > .flip-face, .section-flip > .flip-back { display: block; padding: 24px 26px; min-height: 0; background: #fbf8ee; border: 0; border-radius: 2px; }
.section-flip:has([data-reflection]) > .flip-face { min-height: 0; }
.section-flip .eyebrow { display: block; margin: 0 50px 10px 0; font-size: 10px; }
.today-page .section-flip h2 { margin: 0 55px 14px 0; font-size: 27px; line-height: 1.2; }
.section-flip .spot { float: right; width: 80px; height: 80px; margin: 25px 0 0 20px; }
.section-flip .spot svg { width: 100%; height: 100%; }
.section-flip .paper-copy { padding-right: 0; }
.section-flip .flip-corner { top: 12px; right: 16px; }
.section-flip .flip-back label { font-size: 0; padding: 0; }
.section-flip .flip-back textarea { font-size: 16px; height: 58px; min-height: 58px; }
@media (max-width: 480px) {
  .section-flip > .flip-face, .section-flip > .flip-back { padding: 20px 18px; }
  .today-page .section-flip h2 { font-size: 23px; margin-right: 0; }
  .section-flip .spot { width: 54px; height: 54px; margin: 28px 0 0 10px; }
}
@media print { .section-flip > .flip-face { padding: 0; } }

/* A clear, thumb-friendly turn control at the lower-right of each card. */
.flip-card .flip-corner { top: auto; bottom: 8px; right: 10px; min-width: 76px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 600; }
.flip-card .flip-corner span { font: 25px/1 Georgia, serif; }
.flip-card > .flip-face, .flip-card > .flip-back { padding-bottom: 58px; }
.section-flip > .flip-face, .section-flip > .flip-back { padding-bottom: 58px; }
@media print { .flip-card .flip-corner { display: none !important; } }

.bench-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.bench-tool { padding: 28px; background: #fffdf6; border-top: 2px solid #d6d2c2; }
.bench-tool.build-feature { background: #fff1c9; border-color: #d6b24a; }
.bench-art { float: right; width: 92px; height: 92px; margin: 0 0 18px 20px; }
.bench-art svg { width: 100%; height: 100%; }
.bench-tool h2 { font: 30px/1.15 var(--serif,Georgia,serif); margin: 13px 0; }
.bench-tool p { max-width: 35em; }
.bench-tool button { margin-top: 12px; }
.bench-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 32px 0; margin-top: 28px; border-top: 1px solid #d6d2c2; }
#bench-form label { display: block; margin: 16px 0 7px; font: 13px/1.4 var(--sans,sans-serif); font-weight: 600; }
#bench-form input, #bench-form textarea, #bench-form select { width: 100%; box-sizing: border-box; }
#bench-form textarea { min-height: 78px; }
#learning-form label { display: block; margin: 16px 0 7px; font: 13px/1.4 var(--sans,sans-serif); font-weight: 600; }
#learning-form input, #learning-form select { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
#learning-form button { margin-top: 12px; }
#bench-error { color: #8b302b; }
.project-card:nth-child(3n+2) { background: #eef3e8; }
.project-card:nth-child(3n+3) { background: #fff3d3; }
.notebook-grid aside [data-bench] { display: block; text-align: left; margin: 12px 0; }
@media(max-width:700px) { .bench-grid, .bench-shelf { grid-template-columns: 1fr; } .bench-tool { padding: 22px; } .bench-art { width: 68px; height: 68px; } }
.suggested-challenge { padding: 12px 6px; }
.shell > main.activities-page { max-width: 760px; }
.activities-page > h1 { margin-bottom: 28px; }
.activity-card { background: #fffdf6; border-top: 3px solid var(--yellow, #f2c94c); padding: clamp(22px, 4vw, 40px); }
.activity-card[aria-busy="true"] { min-height: 220px; }
.activity-card .challenge-invitation { max-width: 29em; }
.activity-card .challenge-actions { flex-wrap: wrap; }
.activity-categories { margin-top: 28px; }
.activity-categories [role="group"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px 0; }
.activity-category { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 154px; padding: 16px 8px; background: #fffdf6; border: 1px solid var(--line); border-radius: 6px; }
.activity-category[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px var(--yellow); }
.activity-category-art { display: block; width: 68px; height: 68px; }
.activity-category-art svg { display: block; width: 100%; height: 100%; }
.activity-category-label { font: 600 15px/1.35 var(--serif, Georgia, serif); text-align: center; }
@media(max-width:600px) { .activity-categories [role="group"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story-photos { clear: both; }
.story-photos figure { margin: 24px 0; max-width: 680px; break-inside: avoid; }
.story-photos img { display: block; width: 100%; height: auto; }
.story-photos figcaption { margin-top: 8px; font: 15px/1.5 var(--serif, Georgia, serif); }
.photo-credit { display: block; color: var(--muted, #52606d); font: 12px/1.5 var(--sans, sans-serif); }
.challenge-art { width: 100px; height: 100px; margin: 0 0 20px; }
.challenge-art svg { width: 100%; height: 100%; }
.suggested-challenge h2 { font: 34px/1.15 var(--serif,Georgia,serif); margin: 12px 0 18px; }
.challenge-invitation { font: 21px/1.5 var(--serif,Georgia,serif); }
.challenge-actions { display: flex; gap: 18px; align-items: center; margin: 22px 0; }
#challenge-note-area { border-top: 1px solid #dad8cc; padding-top: 20px; }
#challenge-note-area[hidden] { display: none; }
#challenge-note-area label { display: block; margin-bottom: 8px; }
#challenge-note { width: 100%; min-height: 100px; }
#challenge-error { color: #8b302b; }
@media(max-width:480px) { .suggested-challenge h2 { font-size:28px; } .challenge-invitation { font-size:18px; } }

/* My questions: an illustrated shelf, then one quiet conversation. */
.visually-hidden {
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.questions-page { padding:40px 0 58px; }
.questions-page > h1 { margin:0 0 32px;font-size:38px; }
.question-cards { display:grid;grid-template-columns:1.12fr 1fr;gap:24px; }
.question-card {
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  min-width:0;min-height:330px;padding:28px 30px 24px;
  border:1px solid rgba(31,41,51,.08);border-radius:20px;
  color:var(--ink);box-shadow:none;
}
.question-sky { background:var(--sky); }
.question-sunlit { background:var(--sunlit); }
.question-garden { background:var(--garden); }
.question-peach { background:var(--peach); }
.question-card:hover { box-shadow:0 3px 14px rgba(31,41,51,.055); }
.question-card .question-drawing { display:block;width:100%;height:150px;max-width:240px;margin:0 auto 18px; }
.question-drawing > svg { display:block;width:100%;height:100%; }
.question-card > h2 { font:600 26px/1.4 var(--serif);margin:auto 0 0;overflow-wrap:anywhere; }
.question-card-action { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;font:13px/1.5 var(--sans); }
.question-card-action > span:last-child { font-size:23px; }
.questions-page .question-new { display:inline-block;margin-top:26px;min-height:44px;padding:10px 0;font-size:14px; }
.questions-empty { max-width:540px;margin:20px auto;text-align:center; }
.questions-empty > div { max-width:240px;margin:0 auto 18px; }
.question-page { padding:28px 0 64px; }
.question-thread { max-width:680px;min-width:0;margin:0 auto; }
.question-thread > h1 { font:600 32px/1.35 var(--serif);font-size:32px!important;margin:12px 0 8px;overflow-wrap:anywhere; }
.question-thread .question-back { padding:8px 0;min-height:44px;font-size:14px;color:var(--muted); }
.question-thread .question-source { margin:0 0 12px;border:0;padding:0;font:12px/1.6 var(--sans); }
.question-source > summary { cursor:pointer;min-height:44px;padding:10px 0; }
.question-thread .question-transcript { display:flex;flex-direction:column;gap:16px;margin:18px 0 25px; }
.question-thread .question-transcript:empty { margin:0 0 16px; }
.question-transcript .turn { padding:17px 21px;max-width:92%;font:18px/1.7 var(--serif);border-radius:14px;margin:0; }
.question-transcript .turn.user { border:0;background:var(--sky); }
.question-transcript .turn.assistant { background:white;border:1px solid var(--line); }
.question-transcript .turn-label { font:600 11px/1.5 var(--sans);color:var(--muted); }
.reply-sources { font:12px/1.6 var(--sans);margin-top:8px; }
.reply-sources > summary { min-height:36px;cursor:pointer; }
.question-thread .question-composer {
  display:flex;align-items:flex-end;gap:10px;background:white;
  border:1px solid #cbd1d5;padding:11px 12px;border-radius:14px;
}
.question-composer:focus-within { outline:2px solid #986d18;outline-offset:3px; }
.question-thread .question-composer textarea {
  width:100%;min-width:0;min-height:72px;margin:0;padding:10px 8px;
  resize:vertical;background:white;border:0;font:18px/1.6 var(--serif);box-shadow:none;
}
.question-thread .question-composer textarea:focus { outline:0;box-shadow:none; }
.question-composer > button { flex-shrink:0;min-height:46px;padding:11px 17px;font-size:13px; }
.question-actions { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px; }
.question-actions > .question-notebook { min-height:44px;font-size:14px;padding:9px 0; }
.question-suggestions { font:13px/1.6 var(--sans); }
.question-suggestions > summary { cursor:pointer;min-height:44px;padding:10px 0; }
.question-suggestions[open] { width:100%; }
.question-source-choices { display:grid;gap:10px;margin-top:20px; }
.question-source-choice { display:flex;align-items:center;gap:15px;width:100%;min-height:80px;padding:15px;background:var(--sky);border:1px solid var(--line);border-radius:12px;text-align:left; }
.question-source-choice > span:first-child { display:block;width:64px;height:64px;flex-shrink:0; }
.question-source-choice svg { width:100%;height:100%; }
.question-source-choice strong { flex:1;min-width:0;font:500 18px/1.5 var(--serif);overflow-wrap:anywhere; }
.question-source-choice > span:last-child { font-size:22px; }
@media(max-width:760px) {
  .questions-page { padding:28px 0 40px; }
  .questions-page > h1 { font-size:32px;margin-bottom:24px; }
  .question-cards { grid-template-columns:1fr;gap:16px; }
  .question-card { min-height:245px;padding:22px; }
  .question-card .question-drawing { height:105px;width:155px;margin:0 0 12px auto; }
  .question-card > h2 { font-size:24px; }
  .question-card-action { margin-top:18px; }
  .question-page { padding:20px 0 40px; }
  .question-thread > h1 { font-size:28px!important; }
  .question-transcript .turn { padding:15px 17px;max-width:96%;font-size:17px; }
  .question-thread .question-composer { padding:8px;gap:6px; }
  .question-thread .question-composer textarea { padding:8px 4px;font-size:17px;min-height:80px; }
  .question-composer > button { padding:10px 12px;font-size:12px; }
  .question-actions { display:block; }
  .question-source-choice { padding:12px;gap:12px; }
  .question-source-choice > span:first-child { width:48px;height:48px; }
}
.questions-page:focus, .question-page:focus { outline:none; }

/* Supplementary approved copy uses the existing newspaper typography. */
.paper-extra { font-family: var(--serif); margin-top: .7rem; color: var(--muted); }
.paper-weather, .paper-special { font-family: var(--serif); margin: .6rem 0 0; line-height: 1.6; }