/* Hallmark guidance · app screen · custom workbench · pinned 4f6a46c6dc325d40ab268c93e25c7b96676ebccd.
 * Critique: the document, its audience and its next commitment lead; no marketing hero or decorative imagery.
 * Existing native controls, publication states and behavior are retained. */
:root {
  --font-ui:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --color-ink: #1b2738;
  --color-muted: #576477;
  --color-paper: #ffffff;
  --color-canvas: #f4f6f9;
  --color-rail: #f8f9fc;
  --color-line: #dce2eb;
  --color-line-strong: #aeb9c9;
  --color-action: #284fc1;
  --color-action-hover: #1d3d9b;
  --color-selection: #edf2ff;
  --color-focus: #3158ca;
  --color-warning: #8b3c22;
  --color-warning-surface: #fff3e9;
  --color-success: #236047;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-control: 0.375rem;
  --radius-surface: 0.625rem;
  --font-small: 0.8125rem;
  --font-label: 0.875rem;
  --font-body: 1rem;
  --font-subhead: 1.125rem;
  --font-section: 1.375rem;
  --font-title: 1.75rem;
  --container: 1320px;
  font-family: var(--font-ui);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-synthesis: none;
  line-height: 1.6;
}
* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}
button,
a,
input,
select,
textarea,
summary {
  outline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--color-focus);
}
button {
  min-height: 44px;
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-paper);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--font-label);
  line-height: 1.4;
  font-weight: 600;
}
button:hover:not(:disabled) {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button.secondary,
#logout,
#knowledge-toggle {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}
button.secondary:hover:not(:disabled),
#logout:hover,
#knowledge-toggle:hover {
  background: var(--color-selection);
  border-color: var(--color-action);
}
label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-label);
  font-weight: 600;
}
input,
select,
textarea {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  color: var(--color-ink);
  min-width: 0;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-muted);
}
input:read-only,
textarea:read-only {
  background: var(--color-rail);
}
textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.65;
}
h1,
h2,
h3,
h4 {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--color-ink);
}
h1 {
  font-size: var(--font-title);
  letter-spacing: -0.035em;
  line-height: 1.25;
  margin: var(--space-1) 0 var(--space-3);
  font-weight: 650;
}
h2 {
  font-size: var(--font-section);
  line-height: 1.35;
  margin: 0 0 var(--space-4);
  font-weight: 650;
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--font-subhead);
  line-height: 1.4;
  margin: 0 0 var(--space-2);
  font-weight: 650;
}
h4 {
  font-size: var(--font-body);
  margin: var(--space-4) 0 var(--space-2);
}
p {
  max-width: 72ch;
  margin: var(--space-2) 0 var(--space-4);
  overflow-wrap: anywhere;
}
a {
  color: var(--color-action);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
small,
.muted {
  color: var(--color-muted);
  font-size: var(--font-small);
}
.masthead {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-4)
    max(var(--space-5), calc((100% - var(--container)) / 2));
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}
.masthead p {
  font-size: var(--font-small);
  color: var(--color-muted);
  margin: 0;
}
.masthead strong {
  font-size: var(--font-subhead);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.masthead form {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.masthead label {
  font-weight: 500;
  color: var(--color-muted);
}
main {
  max-width: var(--container);
  margin: auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}
.heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  margin: var(--space-6) 0 var(--space-5);
}
.heading p {
  color: var(--color-muted);
  margin: 0;
  font-size: var(--font-label);
}
.heading label {
  font-size: var(--font-small);
}
nav[role="tablist"] {
  display: flex;
  border-bottom: 1px solid var(--color-line);
  gap: var(--space-5);
  margin-bottom: 0;
  background: var(--color-paper);
  padding: 0 var(--space-6);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
}
nav[role="tablist"] button {
  background: transparent;
  color: var(--color-muted);
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: var(--space-4) 0;
  font-weight: 500;
}
nav[role="tablist"] button:hover:not(:disabled) {
  color: var(--color-ink);
  background: transparent;
}
nav[role="tablist"] button[aria-selected="true"] {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
  font-weight: 650;
}
#panel {
  background: var(--color-paper);
  padding: var(--space-6);
  min-height: 22rem;
  border-radius: 0 0 var(--radius-surface) var(--radius-surface);
}
.brief-meta {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--font-small);
  color: var(--color-muted);
}
.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-7);
}
.brief-grid > :last-child {
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-6);
}
.brief-section {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}
.warning {
  border-left: 3px solid var(--color-warning);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.notice,
#notice {
  padding: var(--space-3) 0;
  font-size: var(--font-label);
  color: var(--color-muted);
}
#notice[role="alert"],
#human-auth-host [data-status][role="alert"],
[data-status][role="alert"] {
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  padding: var(--space-4);
}
ul {
  padding-left: 1.3rem;
}
li {
  margin-bottom: var(--space-3);
}
form.editor {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  max-width: 48rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
details {
  border-top: 1px solid var(--color-line);
  padding: var(--space-4) 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-label);
  min-height: 44px;
  align-content: center;
}
footer {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-small);
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--color-paper);
  padding: var(--space-4);
  z-index: 10;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-ui);
}
#preview {
  border: 2px solid var(--color-action);
  padding: var(--space-5);
  margin-top: var(--space-5);
  border-radius: var(--radius-surface);
}
#management {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-6);
}
#record-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-7);
}
#record-forms > * {
  min-width: 0;
}
time {
  font-variant-numeric: tabular-nums;
}
[hidden] {
  display: none !important;
}
.payload-fields {
  margin: var(--space-2) 0 var(--space-5);
}
.payload-fields dt {
  font-weight: 600;
  margin-top: var(--space-3);
  font-size: var(--font-label);
}
.payload-fields dd {
  margin-left: 0;
  overflow-wrap: anywhere;
  color: var(--color-muted);
}
.payload-fields dd p {
  margin: var(--space-1) 0;
}
.payload-fields ol {
  padding-left: 1.2rem;
}
.payload-fields ol > li {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}
.brief-section pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.auth-disclosure {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-4);
}
.auth-disclosure > summary {
  color: var(--color-muted);
}
#human-auth-host {
  padding: var(--space-4) 0;
}
#human-auth-host h2 {
  font-size: var(--font-subhead);
}
#human-auth-host > p {
  font-size: var(--font-label);
  color: var(--color-muted);
}
#human-auth-host form {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin: var(--space-5) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
#human-auth-host form button {
  justify-self: start;
}
#human-auth-host > button {
  margin: var(--space-1) var(--space-2) var(--space-1) 0;
}
#human-auth-host [data-status]:empty {
  display: none;
}
.commitment-list {
  list-style: none;
  padding: 0;
}
.commitment-row {
  position: relative;
  border-left: 2px solid var(--color-line);
  padding: 0 0 var(--space-5) var(--space-5);
  margin: 0;
}
.commitment-row + .commitment-row {
  padding-top: var(--space-3);
}
.commitment-row h3 {
  font-size: var(--font-body);
}
.commitment-row time {
  color: var(--color-ink);
  font-weight: 600;
}
@media (max-width: 900px) {
  .masthead {
    flex-wrap: wrap;
  }
  #record-forms {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 650px) {
  .masthead {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .masthead form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .heading {
    display: grid;
    margin-top: var(--space-5);
    gap: var(--space-3);
  }
  .heading label {
    width: 100%;
  }
  nav[role="tablist"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0 var(--space-4);
  }
  nav[role="tablist"] button {
    padding: var(--space-3) var(--space-2);
  }
  .brief-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .brief-grid > :last-child {
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding: var(--space-5) 0 0;
  }
  main {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
  #panel {
    padding: var(--space-5) var(--space-4);
  }
  .actions button {
    width: 100%;
  }
  #human-auth-host form button {
    justify-self: stretch;
  }
  #knowledge-toggle {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) {
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}
.app-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.app-navigation button[aria-expanded="true"] {
  border-color: var(--color-action);
  color: var(--color-action);
  background: var(--color-selection);
}

.commitment-dates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.commitment-dates dt {
  color: var(--color-muted);
  font-size: var(--font-label);
}
.commitment-dates dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 650px) {
  .masthead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .masthead form {
    flex-basis: 100%;
  }
  main {
    padding-top: var(--space-3);
  }
  .app-navigation {
    gap: var(--space-2);
    padding-bottom: var(--space-3);
  }
  .app-navigation p {
    font-size: var(--font-small);
    margin: 0;
  }
  .knowledge {
    margin-top: var(--space-3);
  }
  .commitment-dates {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}