/* First-job brief worksheet. Extends guides.css; mirrors the one-visit-test worksheet panel. */
.brief-title-accent { color: var(--accent); }
.brief { border: 1px solid var(--line-strong); border-radius: 20px; margin-top: 40px; background: var(--panel); scroll-margin-top: 85px; }
.brief__head { padding: 24px 24px 6px; }
.article .brief h2 { margin: 0 0 10px; }
.article .brief h2::before { display: none; }
.article .brief__head > p:last-child { font-size: 1rem; margin: 0 0 6px; color: var(--muted); }
.brief__examples { padding: 6px 24px 16px; }
.article .brief__examples-label { font-size: .92rem; margin: 0 0 10px; color: var(--muted); }
.brief__example-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.brief button { font: 600 .86rem/1.3 var(--display); cursor: pointer; border: 1px solid var(--line-strong); padding: 11px 14px; border-radius: 9px; color: var(--ink); background: var(--paper); text-align: left; }
.brief button:hover { border-color: var(--accent); }
.brief button:focus-visible, .brief textarea:focus-visible, .brief__preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brief button[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.article .brief__status, .article .brief__action-status { min-height: 1.2em; margin: 10px 0 0; font: 600 .86rem/1.4 var(--display); color: var(--accent); }
.brief .brief__undo { margin-top: 8px; background: transparent; }
.brief__fields { padding: 0 24px; }
.brief__field { padding: 16px 0; border-top: 1px solid var(--line); }
.brief__field label { display: flex; gap: 10px; align-items: baseline; font: 600 1.02rem/1.4 var(--display); }
.brief__n { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8rem; color: var(--paper); background: var(--accent); }
.article .brief__hint { margin: 4px 0 8px 2.25rem; font-size: .88rem; color: var(--muted); }
.brief textarea { display: block; box-sizing: border-box; width: 100%; min-height: 4.6em; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--paper); resize: vertical; field-sizing: content; max-height: 18em; }
.brief__out { padding: 18px 24px 4px; border-top: 1px solid var(--line); }
.article .brief__out h3 { margin: 0 0 10px; font: 600 1rem/1.3 var(--display); }
.brief__preview { margin: 0; padding: 14px 16px; max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 10px; font: 400 .86rem/1.55 var(--mono); color: var(--ink); background: var(--paper); }
.brief__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.article .brief__privacy { margin: 0; padding: 14px 24px 22px; font-size: .83rem; color: var(--muted); }
[hidden] { display: none !important; }
@media (max-width: 420px) {
  .brief__head, .brief__examples, .brief__fields, .brief__out, .article .brief__privacy { padding-inline: 16px; }
  .brief__example-buttons button, .brief__actions button { flex: 1 1 100%; }
  .article .brief__hint { margin-left: 0; }
}
@media print {
  :root { color-scheme: light; --ink: #111; --muted: #444; --line: #bbb; --line-strong: #aaa; --accent: #124433; --paper: #fff; --panel: #fff; }
  body { background: #fff; font-size: 11pt; }
  .bar, footer, .skip, .product, .more, .article > :not(.brief), .brief--live .brief__head, .brief__examples, .brief__actions, .brief__action-status, .brief__privacy, noscript { display: none !important; }
  /* With the script running, print the plain-text brief only. */
  .brief--live .brief__fields { display: none !important; }
  .brief--live .brief__out { display: block !important; border: 0; padding: 0; }
  main { padding: 0; }
  .article { max-width: none; margin: 0; padding: 0; }
  .brief { margin: 0; border: 0; }
  /* Without it, print the five labelled fields with whatever was typed (blank ones leave room to write). */
  .brief__head, .brief__fields { padding: 0; }
  .brief__field { padding: 10px 0; break-inside: avoid; }
  .brief__field label, .article .brief__hint { break-after: avoid; }
  .article .brief__hint { margin-left: 0; }
  .brief__n { color: #111; background: none; border: 1px solid #888; }
  .brief textarea { min-height: 5.5em; max-height: none; resize: none; border-color: #888; color: #111; outline: none !important; caret-color: transparent; }
  .article .brief__preview { max-height: none; overflow: visible; border: 0; padding: 0; font-size: 10.5pt; color: #111; background: #fff; }
}