/* The readiness page (BEA-548), from the design preview of 2026-11-05 (projects/era-readiness/briefs/).
   ERA's settings, filled with Montana West's values. A rebrand changes the :root lines and nothing else.
   The four Lato files are the ones mwed.biz serves, from our own media store. */
@font-face { font-family: Lato; font-weight: 300; font-display: swap; src: url(https://media.beargrassai.com/mwed/fonts/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2'); }
@font-face { font-family: Lato; font-weight: 400; font-display: swap; src: url(https://media.beargrassai.com/mwed/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2'); }
@font-face { font-family: Lato; font-weight: 700; font-display: swap; src: url(https://media.beargrassai.com/mwed/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2'); }
@font-face { font-family: Lato; font-weight: 900; font-display: swap; src: url(https://media.beargrassai.com/mwed/fonts/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2'); }

:root {
  --era-brand: #043980; --era-brand-dark: #032a5e; --era-text: #666666; --era-heading: #333333;
  --era-page: #ffffff; --era-band: #f4f6f9; --era-line: #e2e7ee; --era-field-edge: #8a94a3; --era-footer: #404040;
  --era-on-brand-soft: #d6e2f7; --era-ok: #1f6f43; --era-warn: #8a5a00; --era-bad: #a12622;
  --era-font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --era-radius: 6px; --era-shadow: 0 6px 24px rgba(4, 57, 128, .14);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--era-font); font-size: 16px; line-height: 1.6; color: var(--era-text); background: var(--era-page);
  min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
[hidden] { display: none !important; }
.sprite { position: absolute; }
.m0 { margin: 0; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--era-brand); padding: 8px 12px; border: 2px solid var(--era-brand); border-radius: var(--era-radius); font-weight: 700; }
.skip:focus { left: 8px; }

.topbar { background: var(--era-brand); color: #fff; font-size: 13px; }
.topbar .wrap { display: flex; gap: 18px; justify-content: flex-end; padding-top: 6px; padding-bottom: 6px; }
.topbar a { color: #fff; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.head { border-bottom: 1px solid var(--era-line); background: #fff; }
.head .wrap { display: flex; align-items: center; gap: 14px; min-height: 76px; }
.head img { width: 56px; height: 56px; display: block; }
.head .name { display: flex; flex-direction: column; line-height: 1.2; }
.head .org { font-size: 12.8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--era-brand); }
.head .tool { font-size: 20px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--era-heading); }
.head .right { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 14px; font-weight: 700; }
.banner { background: #fff8e6; border-bottom: 1px solid #f0dfb4; color: #5c4300; font-size: 13.5px; font-weight: 700; }
.banner .wrap { padding-top: 6px; padding-bottom: 6px; }
.foot { background: var(--era-footer); color: #e6e6e6; font-size: 14px; margin-top: 40px; }
.foot .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.foot a { color: #fff; }
.foot .small { color: #cfcfcf; font-size: 13px; }
.foot p { margin: 10px 0 0; }

h1, h2, h3 { color: var(--era-heading); font-weight: 900; text-transform: uppercase; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(26px, 4vw, 40px); letter-spacing: .12em; }
h2 { font-size: clamp(19px, 2.4vw, 24px); letter-spacing: .1em; }
h3, h4 { font-size: 16px; letter-spacing: .08em; }
h1:focus { outline: none; }
.eyebrow { font-size: 12.8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--era-brand); margin: 0 0 6px; }
p { margin: 0 0 1em; }
a { color: var(--era-brand); }
.lede { font-size: 18px; color: var(--era-heading); max-width: 60ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: .6rem 1.3rem; border: 2px solid var(--era-brand);
  border-radius: var(--era-radius); font: 700 15px/1.2 var(--era-font); cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--era-brand); color: #fff; }
.btn--primary:hover { background: var(--era-brand-dark); border-color: var(--era-brand-dark); }
.btn--ghost { background: #fff; color: var(--era-brand); }
.btn--ghost:hover { background: var(--era-band); }
.btn--small { min-height: 36px; padding: .35rem .8rem; font-size: 13.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--era-brand); cursor: pointer; text-decoration: underline; min-height: 44px; }
:focus-visible { outline: 3px solid var(--era-brand); outline-offset: 2px; }
.topbar :focus-visible, .owner :focus-visible { outline-color: #fff; }
label { display: block; font-size: 14.4px; font-weight: 700; color: var(--era-heading); margin: 0 0 6px; }
textarea { width: 100%; font: 17px/1.5 var(--era-font); color: var(--era-heading); background: #fff;
  border: 1.5px solid var(--era-field-edge); border-radius: var(--era-radius); padding: 10px 12px; resize: vertical; }

.screen { display: none; }
.screen.on { display: block; }
.page { padding-top: 34px; padding-bottom: 10px; }
.narrow { max-width: 640px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.notice { background: var(--era-band); border-left: 4px solid var(--era-brand); padding: 18px 20px; border-radius: 0 var(--era-radius) var(--era-radius) 0; color: var(--era-heading); white-space: pre-line; }
.why { border-left: 4px solid var(--era-warn); background: #fff8e6; color: #5c4300; padding: 12px 16px; border-radius: 0 var(--era-radius) var(--era-radius) 0; }
.ok { color: var(--era-ok); font-weight: 700; } .need { color: var(--era-warn); font-weight: 700; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* your conversations */
.convos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.convo { border: 1px solid var(--era-line); border-radius: var(--era-radius); padding: 14px 16px; display: grid; gap: 6px; }
.convo .state { color: var(--era-heading); font-weight: 700; }
.convo .meta { font-size: 14px; }

/* the conversation */
.talk { max-width: 760px; margin: 0 auto; }
.talk > .row.between, #s-results .page > .row.between { margin-bottom: 18px; }
.progress { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px; }
.progress li { flex: 1 1 110px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; border-top: 4px solid var(--era-line); padding-top: 6px; }
.progress li.done { color: var(--era-brand); border-top-color: var(--era-brand); }
.progress li.now { color: var(--era-heading); border-top-color: var(--era-brand); }
.progress-now { display: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--era-heading); margin: -10px 0 16px; }
.log { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: 12px; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.msg p { margin: 0 0 .7em; } .msg p:last-child, .msg ul:last-child { margin-bottom: 0; }
.msg ul { margin: 0 0 .7em; padding-left: 1.2em; }
.era { align-self: flex-start; background: var(--era-band); color: var(--era-heading); border: 1px solid var(--era-line); border-top-left-radius: 3px; }
.owner { align-self: flex-end; background: var(--era-brand); color: #fff; border-top-right-radius: 3px; white-space: pre-wrap; }
.who { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; white-space: normal; }
.era .who { color: var(--era-brand); }
.owner .who { color: var(--era-on-brand-soft); }
.filechip { display: inline-flex; align-items: center; gap: 8px; margin: 8px 8px 0 0; padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; white-space: normal; }
.owner .filechip { background: rgba(255,255,255,.14); color: #fff; }
.filechip svg { width: 16px; height: 16px; flex: none; }
.filechip .x { background: none; border: 0; padding: 0 2px; cursor: pointer; font: 700 18px/1 var(--era-font); color: inherit; min-width: 28px; min-height: 28px; }
.hint { color: var(--era-text); font-style: italic; margin: 0 0 4px; }
.thinking { align-self: flex-start; display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px dashed var(--era-brand);
  color: var(--era-heading); border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 700; margin-top: 12px; width: fit-content; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--era-brand); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--era-brand); margin-left: 2px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.status { border-left: 4px solid var(--era-bad); background: #fdf1f0; color: #6d1916; padding: 12px 16px; border-radius: 0 var(--era-radius) var(--era-radius) 0; margin-top: 14px; }
.status .btn { margin-top: 8px; }
.finished { border: 2px solid var(--era-brand); border-radius: var(--era-radius); padding: 18px 20px; margin-top: 18px; }
.composer { margin-top: 16px; border-top: 1px solid var(--era-line); padding-top: 14px; }
.drop { border: 2px dashed var(--era-field-edge); border-radius: var(--era-radius); padding: 10px 14px; margin-top: 10px; font-size: 14px; color: var(--era-text); text-align: center; }
.drop.over, .composer.over .drop { border-color: var(--era-brand); background: var(--era-band); }
.attached { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2px; }
.attached .filechip { background: var(--era-band); color: var(--era-heading); border: 1px solid var(--era-line); }
.attached .filechip.up { opacity: .7; }
.composer .row.between { margin-top: 10px; }
.fileerr { color: var(--era-bad); font-size: 14px; font-weight: 700; margin: 8px 0 0; }

/* results */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--era-brand); margin: 18px 0 0; flex-wrap: wrap; }
.tabs button { font: 700 13.5px/1.2 var(--era-font); letter-spacing: .05em; text-transform: uppercase; color: var(--era-brand); background: #fff;
  border: 2px solid var(--era-line); border-bottom: 0; border-radius: var(--era-radius) var(--era-radius) 0 0; padding: 12px 14px; cursor: pointer; min-height: 44px; }
.tabs button[aria-selected="true"] { background: var(--era-brand); border-color: var(--era-brand); color: #fff; }
.panel { display: none; padding: 22px 0; }
.panel.on { display: block; }
.doc { max-width: 900px; color: var(--era-heading); }
.doc h2, .doc h3 { margin-top: 1.4em; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin: 0 0 .5em; }
.doc blockquote { margin: 4px 0 14px; padding-left: 12px; border-left: 3px solid var(--era-line); color: var(--era-text); font-style: italic; }
.dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.draft { display: inline-block; font-size: 11.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--era-warn);
  border: 1.5px solid var(--era-warn); border-radius: 3px; padding: 1px 7px; vertical-align: middle; }
.cite { display: block; font-size: 13.5px; color: var(--era-text); font-style: italic; border-left: 3px solid var(--era-line); padding-left: 10px; margin-top: 4px; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fig { border-top: 4px solid var(--era-brand); background: var(--era-band); padding: 12px 14px; border-radius: 0 0 var(--era-radius) var(--era-radius); }
.fig .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--era-heading); }
.fig .h { font-size: 14px; color: var(--era-heading); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--era-brand); border-bottom: 2px solid var(--era-brand); padding: 8px; }
td { border-bottom: 1px solid var(--era-line); padding: 10px 8px; vertical-align: top; color: var(--era-heading); overflow-wrap: anywhere; }
td.words { color: var(--era-text); font-style: italic; }
.tablewrap { overflow-x: auto; }
.callout { border: 2px solid var(--era-brand); border-radius: var(--era-radius); padding: 16px 18px; background: #fff; margin: 14px 0; }
.callout p:first-child { font-weight: 700; color: var(--era-heading); }
blockquote.callout { font-style: normal; color: var(--era-heading); }
.doctitle { margin-top: 6px; }
.draftnote { border-left: 4px solid var(--era-warn); background: #fff8e6; color: #5c4300; padding: 10px 14px; border-radius: 0 var(--era-radius) var(--era-radius) 0; font-weight: 700; font-size: 14.5px; }
.stages { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0 !important; margin: 10px 0 8px; }
.stages li { text-align: center; padding: 10px 4px; margin: 0; border-radius: var(--era-radius); background: var(--era-band); color: #6b7280; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stages li.past { color: var(--era-brand); }
.stages li.here { background: var(--era-brand); color: #fff; }
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.area { border: 1px solid var(--era-line); border-radius: var(--era-radius); padding: 12px 14px; }
.area h3 { margin: 0 0 6px; }
.area p { margin: 8px 0 0; font-size: 15px; }
.chip { display: inline-block; font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--era-band); color: var(--era-brand); }
.chip--strong { background: var(--era-brand); color: #fff; }
.canvas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 14px; }
.canvas div { border: 1.5px solid var(--era-line); border-radius: 4px; padding: 8px 10px; background: #fff; overflow-wrap: anywhere; }
.canvas b { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--era-brand); margin-bottom: 4px; }
.c-partners { grid-column: 1; grid-row: 1 / 3; } .c-activities { grid-column: 2; grid-row: 1; } .c-resources { grid-column: 2; grid-row: 2; }
.c-value { grid-column: 3; grid-row: 1 / 3; } .c-relations { grid-column: 4; grid-row: 1; } .c-channels { grid-column: 4; grid-row: 2; }
.c-segments { grid-column: 5; grid-row: 1 / 3; } .c-costs { grid-column: 1 / 3; grid-row: 3; } .c-revenue { grid-column: 3 / 6; grid-row: 3; }
td.ok { color: var(--era-ok); font-weight: 700; } td.need { color: var(--era-warn); font-weight: 700; }

/* the two panels over the page: talk to a person, and something wrong */
dialog { border: 2px solid var(--era-brand); border-radius: var(--era-radius); box-shadow: var(--era-shadow); padding: 22px; max-width: min(540px, calc(100vw - 32px)); color: var(--era-heading); }
dialog::backdrop { background: rgba(20, 30, 50, .45); }
dialog dt { font-size: 12.8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--era-brand); margin-top: 12px; }
dialog dd { margin: 2px 0 0; }
.feedback { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: #fff; color: var(--era-brand); border: 2px solid var(--era-brand); border-radius: 999px;
  padding: 10px 16px; font: 700 14px/1.2 var(--era-font); box-shadow: var(--era-shadow); cursor: pointer; min-height: 44px; }

@media (max-width: 600px) {
  .head .tool { font-size: 16px; } .head .right .hide-small { display: none; }
  .head .wrap { flex-wrap: wrap; } .head .right { gap: 12px; }
  .foot .wrap { grid-template-columns: 1fr; }
  .topbar .wrap { justify-content: center; }
  .msg { max-width: 94%; }
  .progress li { flex: 1 1 0; font-size: 0; padding-top: 0; } .progress-now { display: block; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; } .tabs button { flex: none; padding: 8px 10px; font-size: 11.5px; }
  .stages { grid-template-columns: 1fr; } .stages li { text-align: left; padding: 8px 12px; }
  .canvas { display: block; } .canvas div { margin-bottom: 6px; }
  .feedback { right: 10px; bottom: 10px; padding: 8px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .dots i, .caret::after { animation: none; } }
@media print {
  .topbar, .banner, .head .right, .tabs, .composer, .foot, .noprint, .feedback, .skip { display: none !important; }
  .panel { display: none !important; } .panel.on { display: block !important; }
  .fig, li, tr, .area, .canvas div { break-inside: avoid; }
}
.icon { flex: none; vertical-align: -3px; }
@media (max-width: 600px) { main { padding-bottom: 64px; } }

/* Cold review, BEA-548 (WCAG 2.2 AA and the PRD's 44-pixel targets). */
label.btn:has(+ input.visually-hidden:focus-visible) { outline: 3px solid var(--era-brand); outline-offset: 2px; }
.foot :focus-visible { outline-color: #fff; }
.stages li { color: #5a6270; }
.btn--small { min-height: 44px; }
.filechip .x { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; }
.head .right a, .head .right .link { display: inline-flex; align-items: center; min-height: 44px; }
.topbar a { display: inline-flex; align-items: center; min-height: 32px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.progress li.now { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.convo .title { font-weight: 900; color: var(--era-heading); overflow-wrap: anywhere; }
td.act { width: 1%; }
td.act .btn { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 600px) {
  .feedback { top: 42%; bottom: auto; right: 0; writing-mode: vertical-rl; transform: rotate(180deg); border-radius: 0 8px 8px 0;
    padding: 12px 8px; min-height: 0; min-width: 44px; }
}
@media (max-width: 600px) { main .wrap { padding-right: 34px; } }