/*
 * The portal's own layer on the website's look (build prompt v1.10). The tokens, fonts, rows (.zm-market-row,
 * .zm-askrow), FAQ (.zm-qa) and green come from site/market.css, copied from the website by scripts/sync-site-style.sh;
 * this file only uses them. Off-white page, white panels with hairline dividers, Montserrat headings, Source Sans 3 body,
 * and the site green for the one primary button on a screen. Everything else is outlined.
 */
.zm {
  --text: var(--ink);
  --accent: var(--green);
  --ok-bg: #eef6ef;
  --ok-text: var(--green-dark);
  --warn: #9a3412;
  --field: #cfd2cd;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, .brand-name { font-family: var(--head); font-weight: 400; color: var(--ink); }
h1 { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.25; margin: 0 0 10px; }
a { color: var(--link); }

/* Header, as the website's */
header { display: flex; gap: 20px; align-items: center; min-height: 60px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 32px; width: auto; }
.brand-name { font-size: 16px; margin-right: auto; color: var(--muted); }
header nav { display: flex; gap: 24px; }
header nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 18px 0; border-bottom: 2px solid transparent; }
header nav a:hover { border-bottom-color: var(--ink); }
#who { color: var(--muted); font-size: 15px; }

main { max-width: 860px; margin: 28px auto 64px; padding: 0 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; margin-bottom: 16px; }

/* Forms */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 15px; }
label input { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
input, textarea, select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 6px; background: #fff; color: var(--ink); }
textarea { width: 100%; }
#lookup-form, #code-form { display: flex; gap: 10px; }
#q { flex: 1; }
#code { width: 11ch; letter-spacing: 0.15em; }

/* Buttons: outlined by default; .primary is the site's green button (one per screen). */
button { font: inherit; font-size: 16px; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--field); background: #fff; color: var(--ink); }
button:hover { border-color: var(--ink); }
button.primary { background: var(--green); border-color: var(--green); color: #fff; }
button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
button.secondary { background: #fff; color: var(--ink); }
button.link { background: none; border: none; color: var(--link); text-decoration: underline; padding: 0; min-height: 44px; font-weight: 400; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* One row style everywhere (front door, Fix My Internet, pages, choices): the website's Ask rows, on white. */
.zm-market-list { max-width: none; background: #fff; }
button.zm-market-row { width: 100%; background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left;
  font-weight: 400; min-height: 64px; padding: 12px 6px; }
button.zm-market-row:hover { background: #fafaf8; border-color: var(--line); }
.row-arrow { color: var(--ink); font-size: 18px; }
/* Answers inside the decision tree: outlined rows; Continue is the green button. */
button.choice { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left;
  font-weight: 400; font-size: 17px; min-height: 52px; padding: 10px 16px; }
button.choice::after { content: "→"; }
button.choice:disabled { color: var(--muted); }
.fix-buttons { display: grid; gap: 8px; margin-top: 12px; }
.fix-buttons button.primary { justify-self: start; }

.hint, .muted { color: var(--muted); margin: 0 0 12px; font-size: 15px; }
.msg { min-height: 1.4em; margin: 8px 0 0; color: var(--warn); }
.msg.ok { color: var(--ok-text); }
.msg.strong { font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--muted); }
td.why { color: var(--warn); }
.banner { background: var(--ok-bg); color: var(--ok-text); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* Tools and copy buttons */
#tools, #fix-tools { display: flex; flex-wrap: wrap; gap: 8px; }
#tools a, #tools span, #fix-tools a, #fix-tools span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--field); color: var(--ink); text-decoration: none; background: #fff; font-size: 15px; }
#tools span, #fix-tools span { opacity: 0.55; border-style: dashed; }
.tool { display: flex; flex-direction: column; gap: 4px; }
.tool small { color: var(--muted); max-width: 22ch; }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
button.copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 0;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-weight: 400; }
button.copy:hover, button.copy:focus-visible { border-color: var(--green); }
button.copy:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
button.copy.copied { color: var(--ok-text); border-color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* Working screens: the tool bar with Back stays at the top */
.fix-bar { position: sticky; top: 60px; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  margin-bottom: 16px; display: grid; gap: 8px; }
.fix-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fix-bar-row button { min-height: 40px; font-size: 15px; }
#fix-copies .copy-line { margin: 0 8px 0 0; font-size: 15px; }
.crumb { color: var(--muted); margin: 0 0 4px; font-size: 15px; }

/* Step blocks */
.block { border-radius: 8px; padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--line); background: #fff; }
.block-head { font-weight: 600; margin-bottom: 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.block.customer { background: #f3f8f3; border-color: #cfe3d2; }
.block.customer .block-body { font-size: 18px; }
.block.customer.draft { border-style: dashed; }
.block.note, .block.know { background: #fbf7ea; border-color: #ece0b8; color: #4d4223; }
.block.reminder { background: #fbeeec; border-color: #efc9c4; color: #6e231c; }
.block.system { background: #fafaf8; color: var(--muted); font-size: 15px; }
.block.system .block-body, .block.know .block-body, .block.rep .block-body { white-space: pre-line; }
.block .source { display: block; color: var(--muted); margin-top: 6px; }
.block dl { margin-top: 6px; }
.block dd small { display: block; color: var(--muted); }
.block.banner { background: var(--ok-bg); border-color: #cfe3d2; color: var(--ok-text); font-weight: 600; }
.block.banner.not-live { background: #fff6dc; border-color: #ecd48a; color: #5c4a12; }
.say-line { background: #f3f8f3; border-left: 3px solid var(--green); padding: 10px 14px; margin: 0 0 16px; }
.step-details { margin: 0 0 12px; }
.step-details summary { cursor: pointer; color: var(--muted); font-size: 15px; width: max-content; }
.step-details .block { margin: 8px 0 0; }
.plain-line { margin: 0 0 12px; }
.todo { color: var(--warn); font-weight: 600; }
.ticket-maker { padding: 4px 0 12px; margin: 6px 0 12px; display: grid; gap: 10px; justify-items: start; }
.ticket-input { display: block; font-weight: 400; margin: 6px 0; }
.visit-picker > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.visit-choice { background: #fff; color: var(--ink); }
.visit-choice[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.ticket-input select, .ticket-input input { display: block; margin-top: 4px; width: 100%; max-width: 520px; }
label.tick { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
label.tick input { display: inline; width: auto; margin-top: 5px; }
.reason-text { display: block; margin: 12px 0; width: 100%; }
.reason-text textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; }

/* Pages from the Page spec tab */
.page-section { margin: 0 0 26px; }
.page-section > h2 { font-size: 13px; font-family: var(--body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.row-title { font-size: 22px; margin: 0 0 14px; }
dl.numbers { background: #fff; border-top: 1px solid var(--line); display: block; }
dl.numbers dt { float: left; clear: left; width: 40%; padding: 12px 0; color: var(--muted); }
dl.numbers dd { margin-left: 40%; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
dl.numbers dt { border-bottom: 1px solid var(--line); }
.num-link { display: block; }
.zm-qa { background: #fff; }

/* Quick actions */
.quick { display: grid; gap: 12px; justify-items: start; }
.quick-body { display: grid; gap: 10px; justify-items: start; width: 100%; }
.quick .row, .confirm .row { display: flex; gap: 8px; flex-wrap: wrap; }
.quick .muted { margin: 0; }
.confirm { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; width: 100%; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; width: 100%; }
.plan-card { display: grid; gap: 4px; text-align: left; padding: 16px; min-height: 0; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-weight: 400; }
.plan-card strong { font-family: var(--head); font-weight: 600; font-size: 18px; }
.plan-card.current, .plan-card:disabled { border: 2px solid var(--green); background: #f3f8f3; color: var(--ink); opacity: 1; }
.plan-card small { color: var(--green-dark); font-weight: 600; }
table.statements th, table.statements td { padding: 8px 10px 8px 0; vertical-align: middle; }

/* Support, report, print */
#support-body table { font-size: 15px; margin: 8px 0; }
#support-body pre { white-space: pre-wrap; font: inherit; background: #fafaf8; padding: 8px; border-radius: 6px; }
dialog { border: 1px solid var(--line); border-radius: 8px; padding: 22px; max-width: 520px; width: calc(100% - 32px); }
dialog textarea { width: 100%; }
#print-body { display: none; }
@media print {
  body.printing header, body.printing main { display: none; }
  body.printing #print-body { display: block; }
  #print-body table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  #print-body td, #print-body th { border: 1px solid #999; padding: 4px; vertical-align: top; }
}

/* The account snapshot: a compact read-only panel above every screen after the caller check. */
.snapshot { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; font-size: 15px; }
.snapshot dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.snapshot dl > div { display: flex; gap: 6px; }
.snapshot dt { margin: 0; }
.snapshot dt::after { content: ":"; }
.snapshot dd { margin: 0; color: var(--ink); }

@media (max-width: 640px) {
  header { padding: 0 16px; gap: 12px; flex-wrap: wrap; }
  header nav { gap: 14px; }
  main { padding: 0 16px; }
  .card { padding: 18px 16px; }
  #lookup-form, #code-form { flex-direction: column; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  td { border: none; padding: 2px 0; }
  dl.numbers dt { float: none; width: auto; border: 0; padding: 10px 0 0; }
  dl.numbers dd { margin: 0; padding: 0 0 10px; }
}

/* Place an order (Oct 28 2026) */
/* The first screen (Oct 28 2026): Existing customer and New customer side by side; one column once a lookup finds someone. */
.two-panels { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-top: 8px; }
.two-panels.found { grid-template-columns: 1fr; }
.two-panels .panel { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.two-panels .panel h2 { margin-top: 0; }
.two-panels.found #panel-new { display: none; }
.new-order-link { margin: 14px 0 0; color: var(--muted); }
button.outline { background: #fff; border-color: var(--green); color: var(--green); }
button.outline:hover { background: #fff; border-color: var(--green-dark); color: var(--green-dark); }
@media (max-width: 640px) { .two-panels { grid-template-columns: 1fr; } }

/* The Plume check (Oct 29 2026): a word mark beside each row, so the colour is never the only signal. */
.plume-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.plume-row:first-child { border-top: 0; }
.plume-row ul { margin: 4px 0 0; padding-left: 18px; }
.plume-mark { flex: 0 0 96px; font-size: 13px; font-weight: 600; text-align: center; border-radius: 999px; padding: 2px 8px; }
.plume-row.green .plume-mark { background: var(--ok-bg); color: var(--ok-text); }
.plume-row.amber .plume-mark { background: #fff4e5; color: #8a4b00; }
.plume-row.red .plume-mark { background: #fdecec; color: #a01919; }
.plume-row.wait .plume-mark { background: #eef0f3; color: #3d4652; }
.plume-message { font-weight: 600; }
.plume-frontline { margin-top: 12px; padding: 12px; background: #fafaf8; border: 1px solid var(--line); border-radius: 6px; }
.plume-frontline h3 { margin: 0 0 6px; font-size: 16px; }
.plume-frontline ul { margin: 0 0 8px; padding-left: 18px; }
a.button-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--field);
  background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
a.button-link:hover { border-color: var(--ink); }

/* The five Router restart answers with their Plume lines (Oct 29 2026): taller buttons, the name in bold. */
button.choice.plume-option { height: auto; padding-top: 10px; padding-bottom: 10px; align-items: flex-start; }
.plume-option .opt-text { display: flex; flex-direction: column; gap: 4px; }
.plume-option .opt-live, .plume-option .opt-static { font-weight: 400; font-size: 15px; }
.plume-option .opt-static { color: var(--muted); }
.plume-option .opt-live[hidden] { display: none; }
.mark-word { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 0 8px; }
.mark-word.green { background: var(--ok-bg); color: var(--ok-text); }
.mark-word.amber { background: #fff4e5; color: #8a4b00; }
.mark-word.red { background: #fdecec; color: #a01919; }
.mark-word.wait { background: #eef0f3; color: #3d4652; }