/* ============================================================
   Territory planning. The page's own pieces, on a tp- prefix so
   nothing in pages.css reaches them and they reach nothing else:
   1. Two reps' books with the clashing rows joined
   2. The ledger: a data problem and what it does to the plan
   3. The real count: three bars, each shorter than the last
   4. One account near a segment line, at two points in the year
   5. The rules, and how each reads to an agent and to a rep
   6. What the planning tool does and what Quill handles
   The ochre accent comes from suite.css.
   ============================================================ */

/* ---- Console: the same proportions as the CRM Hygiene and CRM Migration
   consoles, which each size theirs in their own page file. The hero and
   statement rules for this page are in the product lists in pages.css and
   quill.css. ---- */
.page--territory-planning .plate--console { margin-top: 0; padding: 48px 56px 0; background-image: url(art/hero-territory.jpg); background-position: center 70%; }
.page--territory-planning .app--findings { grid-template-columns: 316px minmax(0, 1fr); min-height: 0; font-size: 14px; }
.page--territory-planning .app--findings .app-side { padding: 18px 12px 24px; }
.page--territory-planning .app--findings .app-side-label { padding: 18px 12px 10px; }
.page--territory-planning .app--findings .app-side a { padding: 11px 12px; margin-bottom: 4px; font-size: 14px; line-height: 1.45; border-radius: var(--r); }
.page--territory-planning .app--findings .app-main { padding: 24px 28px 28px; }
.page--territory-planning .app--findings .finding { padding: 20px 24px 20px; }
.page--territory-planning .app--findings .finding-top h4 { font-size: 16px; }
.page--territory-planning .app--findings .finding > p { margin-top: 10px; font-size: 14px; color: var(--ink-600); }
.page--territory-planning .app--findings .finding dl { margin-top: 16px; padding-top: 14px; gap: 10px 18px; grid-template-columns: 104px 1fr; }
.page--territory-planning .app--findings .finding dd { font-size: 14px; }
.page--territory-planning .app--findings .finding-fix { margin-top: 16px; padding-top: 14px; }
.page--territory-planning .app--findings .finding-fix p { font-size: 14px; }
.page--territory-planning .app--findings .finding-actions { margin-top: 18px; }
@media (max-width: 1000px) { .page--territory-planning .app--findings { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 900px) { .page--territory-planning .app--findings { grid-template-columns: minmax(0, 1fr); } .page--territory-planning .app--findings .app-side a { margin-bottom: 0; } }
@media (max-width: 640px) { .page--territory-planning .plate--console { padding: 24px 16px 0; } }

/* ------------------------------------------------------------
   1. Two books. Every row is the same height, so a clashing pair
   sits on one line and a rule can run straight across between
   the two cards. --row is the row's index in its book.
   ------------------------------------------------------------ */
.tp-books { margin: 0; --tp-head: 76px; --tp-row: 56px; }
.tp-books-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: start; }
.tp-book { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.tp-book-h { height: var(--tp-head); display: flex; flex-direction: column; justify-content: center; padding: 0 24px; border-bottom: 1px solid var(--line); }
.tp-book-h b { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-book-h span { margin-top: 2px; font-size: 0.8125rem; color: var(--ink-500); }
.tp-book li { height: var(--tp-row); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--ink-100); font-size: 0.9375rem; color: var(--ink-800); transition: background-color 0.6s ease 0.9s, color 0.6s ease 0.9s; }
.tp-book li:last-child { border-bottom: 0; }
.tp-book li span { flex: none; font-size: 0.8125rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.tp-book li.is-clash { background: var(--lavender-100); color: var(--ink-900); font-weight: 500; }
.tp-book li.is-clash span { color: var(--lavender-800); font-weight: 450; }

.tp-links { position: relative; align-self: stretch; }
.tp-link { position: absolute; left: -1px; right: -1px; top: calc(1px + var(--tp-head) + var(--row) * var(--tp-row) + var(--tp-row) / 2 - 4px); height: 8px; }
.tp-link::before { content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 4px 50%, var(--lavender-600) 3.5px, transparent 4px),
        radial-gradient(circle at calc(100% - 4px) 50%, var(--lavender-600) 3.5px, transparent 4px),
        linear-gradient(var(--lavender-500), var(--lavender-500)) center / calc(100% - 8px) 1.5px no-repeat; }
.tp-link span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; font-weight: 600; color: var(--lavender-700); }

/* Plays once: the rules close in from both books, then the rows tint */
html.js .tp-books .tp-link::before { clip-path: inset(0 50% 0 50%); transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
html.js .tp-books .tp-link span { opacity: 0; transition: opacity 0.5s ease 0.9s; }
html.js .tp-books:not(.is-shown) .tp-book li.is-clash { background: transparent; color: var(--ink-800); font-weight: 450; }
html.js .tp-books:not(.is-shown) .tp-book li.is-clash span { color: var(--ink-500); }
html.js .tp-books.is-shown .tp-link::before { clip-path: inset(0 0 0 0); }
html.js .tp-books.is-shown .tp-link span { opacity: 1; }
html.js .tp-books .tp-link:nth-child(2)::before { transition-delay: 0.5s; }

@media (max-width: 900px) { .tp-books-grid { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); } .tp-link span { display: none; } .tp-book-h, .tp-book li { padding: 0 16px; } }
@media (max-width: 680px) {
    .tp-books-grid { grid-template-columns: 1fr; gap: 14px; }
    .tp-links { display: none; }
}

/* ------------------------------------------------------------
   2. The ledger: on the left what is wrong in the CRM, on the
   right what it does to the plan. Same two columns as the
   section head above it.
   ------------------------------------------------------------ */
.tp-ledger-h, .tp-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.tp-ledger-h { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; font-weight: 500; color: var(--ink-500); }
.tp-ledger ul { list-style: none; }
.tp-ledger li { align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.tp-ledger h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-ledger p { position: relative; padding-left: 36px; color: var(--ink-700); max-width: 52ch; }
.tp-ledger p::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--lavender-600); }
@media (max-width: 900px) {
    .tp-ledger-h { display: none; }
    .tp-ledger ul { border-top: 1px solid var(--line); }
    .tp-ledger li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .tp-ledger p { padding-left: 28px; }
}

/* ------------------------------------------------------------
   3. The real count. The bar is the share of records that is left;
   the hatched part behind it is what the agents took out.
   ------------------------------------------------------------ */
.tp-count { margin: 0; }
.tp-count ol { list-style: none; border-top: 1px solid var(--line); }
.tp-count li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.tp-count-n b { display: block; font-family: var(--serif); font-weight: 450; font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tp-count-n span { display: block; margin-top: 10px; color: var(--ink-600); max-width: 38ch; }
.tp-count-bar { position: relative; height: 40px; border-radius: 4px; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--ink-300) 6px 7px); }
.tp-count-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--ink-300); transition: width 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.tp-count li:nth-child(2) .tp-count-bar i { background: var(--lavender-400); transition-delay: 0.5s; }
.tp-count li:nth-child(3) .tp-count-bar i { background: var(--lavender-600); transition-delay: 0.7s; }
html.js .tp-count:not(.is-shown) .tp-count-bar i { width: 100%; }
@media (max-width: 900px) { .tp-count li { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; } .tp-count-bar { height: 28px; } }

/* ------------------------------------------------------------
   4. One account near a segment line. The ring is the headcount
   the plan was made with and stays put; the dot is the live value.
   ------------------------------------------------------------ */
.tp-seg { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 40px 32px; }
.tp-seg-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); }
html:not(.js) .tp-seg-tabs { display: none; }
.tp-seg-tabs button { margin-bottom: -1px; padding: 0 0 14px; border-bottom: 2px solid transparent; font-size: 0.9375rem; font-weight: 500; color: var(--ink-500); transition: color 0.2s ease, border-color 0.2s ease; }
.tp-seg-tabs button:hover { color: var(--lavender-700); }
.tp-seg-tabs button[aria-pressed="true"] { color: var(--ink-900); border-bottom-color: var(--lavender-500); }

.tp-seg-track { position: relative; height: 176px; margin: 28px 8px 4px; }
.tp-seg-track::before { content: ""; position: absolute; left: 0; right: 0; top: 96px; height: 2px; background: var(--ink-200); }
.tp-seg-zone { position: absolute; top: 0; font-size: 0.8125rem; font-weight: 500; color: var(--ink-500); }
.tp-seg-zone--l { left: 0; }
.tp-seg-zone--r { right: 0; }
.tp-seg-line { position: absolute; left: 50%; top: 30px; height: 96px; border-left: 1.5px dashed var(--lavender-500); }
.tp-seg-line span { position: absolute; left: 0; top: -30px; transform: translateX(-50%); white-space: nowrap; font-size: 0.8125rem; font-weight: 600; color: var(--lavender-700); }
.tp-seg-plan, .tp-seg-live { position: absolute; top: 97px; left: 42.5%; border-radius: 50%; transform: translate(-50%, -50%); }
.tp-seg-plan { width: 20px; height: 20px; background: #fff; border: 2px solid var(--ink-400); }
.tp-seg-live { width: 12px; height: 12px; background: var(--lavender-600); transition: left 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.tp-seg-plan span, .tp-seg-live span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.8125rem; }
.tp-seg-plan span { top: 26px; color: var(--ink-600); }
.tp-seg-live span { bottom: 20px; font-weight: 600; color: var(--lavender-800); opacity: 0; transition: opacity 0.4s ease; }
.tp-seg[data-state="update"] .tp-seg-live { left: 57.5%; }
.tp-seg[data-state="update"] .tp-seg-live span { opacity: 1; transition-delay: 0.8s; }
.tp-seg-axis i { position: absolute; top: 150px; transform: translateX(-50%); font-style: normal; font-size: 0.75rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.tp-seg-axis i:nth-child(1) { left: 0; transform: none; }
.tp-seg-axis i:nth-child(2) { left: 25%; }
.tp-seg-axis i:nth-child(3) { left: 50%; }
.tp-seg-axis i:nth-child(4) { left: 75%; }
.tp-seg-axis i:nth-child(5) { left: auto; right: 0; transform: none; }

.tp-seg-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.tp-seg-out dt { font-size: 0.8125rem; color: var(--ink-500); }
.tp-seg-out dd { min-height: 3.4rem; margin-top: 6px; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-seg-out small { display: block; margin-top: 4px; font-family: var(--font); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--lavender-700); }
.tp-seg-ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-600); }
.tp-seg-ask b { font-weight: 600; color: var(--ink-900); }
.tp-seg-actions { display: flex; gap: 6px; flex: none; }
.tp-seg[data-state="plan"] .when-update, .tp-seg[data-state="update"] .when-plan { display: none; }
.tp-seg[data-state="update"] .tp-seg-ask .when-update, .tp-seg[data-state="update"] .tp-seg-out small { animation: finding-in 0.45s var(--ease-out) 0.9s both; }
@media (max-width: 900px) {
    .tp-seg { padding: 22px 20px 24px; }
    .tp-seg-out { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
    .tp-seg-ask { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .tp-seg-tabs { gap: 20px; } .tp-seg-axis i:nth-child(2), .tp-seg-axis i:nth-child(4) { display: none; } }

/* ------------------------------------------------------------
   5. The rules. A plain sheet on the left; on the right, the
   picked rule as an agent applies it and as a rep reads it.
   ------------------------------------------------------------ */
.tp-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.tp-rules-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding-bottom: 12px; }
.tp-rules-doc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--line); }
.tp-rules-doc-h b { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-rules-doc-h span { font-size: 0.8125rem; color: var(--ink-500); }
.tp-rules-doc ol { list-style: none; counter-reset: tp-rule; padding: 12px 12px 0; }
.tp-rules-doc li { counter-increment: tp-rule; }
.tp-rules-doc button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; width: 100%; padding: 14px 16px; border-radius: var(--r); text-align: left; line-height: 1.5; color: var(--ink-700); transition: background-color 0.2s ease, color 0.2s ease; }
.tp-rules-doc button::before { content: counter(tp-rule, decimal-leading-zero); padding-top: 2px; font-size: 0.8125rem; font-weight: 500; color: var(--lavender-600); font-variant-numeric: tabular-nums; }
.tp-rules-doc button:not([aria-selected="true"]):hover { background: var(--ink-50); color: var(--ink-900); }
.tp-rules-doc button[aria-selected="true"] { background: var(--lavender-100); color: var(--ink-900); }
.tp-rule > div { padding: 26px 0 28px; border-top: 1px solid var(--line); }
.tp-rule > div:last-child { border-bottom: 1px solid var(--line); }
.tp-rule span { display: block; margin-bottom: 12px; font-size: 0.8125rem; font-weight: 500; color: var(--lavender-700); }
.tp-rule p { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.38; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-rule + .tp-rule { margin-top: 32px; }
/* Every rule's panel sits in one grid cell, so the column is always as tall
   as the longest one and the page does not move when a rule is picked */
html.js .tp-rules-out { display: grid; }
html.js .tp-rule { grid-area: 1 / 1; }
html.js .tp-rule:not(.is-active) { visibility: hidden; }
html.js .tp-rule + .tp-rule { margin-top: 0; }
html.js .tp-rule.is-active { animation: finding-in 0.45s var(--ease-out); }
@media (max-width: 900px) { .tp-rules { grid-template-columns: 1fr; gap: 28px; } .tp-rules-doc button { padding: 12px; } }

/* ------------------------------------------------------------
   The short answer: the question, then the one-sentence answer set
   large with its three steps marked, then the detail in two columns
   ------------------------------------------------------------ */
.tp-answer h2 { max-width: 26ch; }
.tp-answer-lead { margin-top: 56px; max-width: 40ch; font-family: var(--serif); font-weight: 450; font-size: 2.25rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-500); text-wrap: pretty; }
.tp-clause { color: var(--ink-900); }
.tp-n { white-space: nowrap; }
.tp-n::before { content: attr(data-n) "\2009"; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; line-height: 0; vertical-align: 0.9em; color: var(--lavender-700); }
.tp-answer-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.tp-answer-more p { max-width: 48ch; color: var(--ink-600); }
.tp-answer-more strong { font-weight: 600; color: var(--ink-900); }
.tp-answer-more a { color: var(--lavender-700); border-bottom: 1px solid var(--lavender-200); }
.tp-answer-more a:hover { border-bottom-color: var(--lavender-700); }
@media (max-width: 900px) { .tp-answer-lead { margin-top: 40px; font-size: 1.75rem; } .tp-answer-more { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } }
@media (max-width: 600px) { .tp-answer-lead { font-size: 1.5rem; } }

/* ------------------------------------------------------------
   6. Planning tool and Quill, as two plain lists
   ------------------------------------------------------------ */
.tp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.tp-split h3 { padding-bottom: 18px; border-bottom: 1px solid var(--ink-300); font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); }
.tp-split > div:last-child h3 { border-bottom-color: var(--lavender-500); }
.tp-split li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-800); }
.tp-split-note { margin-top: 40px; max-width: 72ch; color: var(--ink-600); }
.tp-split-note a { color: var(--lavender-700); border-bottom: 1px solid var(--lavender-200); }
.tp-split-note a:hover { border-bottom-color: var(--lavender-700); }
@media (max-width: 760px) { .tp-split { grid-template-columns: 1fr; gap: 40px; } }

@media (prefers-reduced-motion: reduce) {
    html.js .tp-books .tp-link::before, html.js .tp-books .tp-link span { clip-path: none !important; opacity: 1 !important; transition: none !important; }
    .tp-book li, .tp-count-bar i, .tp-seg-live, .tp-seg-live span { transition: none !important; }
    html.js .tp-count:not(.is-shown) .tp-count-bar i { width: var(--w); }
    .tp-seg .when-update, .tp-seg-out small, html.js .tp-rule.is-active { animation: none !important; }
}
/* On phones the "planned" label sits left of its ring, clear of the segment line */
@media (max-width: 560px) { .tp-seg-plan span { left: auto; right: -6px; transform: none; } }