/* ============================================================================
   _ui.css - the shared visual language of the customer app (10 Sep 2026)

   Extracted from tasks/my-tasks.html, which Joe signed off on 10 Sep, so that
   every surface a customer approves work on looks like the same product. Before
   this file, each page carried its own copy of the pattern and they drifted:
   the content pages still used red/green before-after fills that were thrown out
   on My Tasks ("that doesn't really work"), at 13px against My Tasks' 15.5px.

   HOW TO USE
     <link rel="stylesheet" href="../_ui.css">     after Tailwind, before the page's own <style>
     <div class="card k-cu"> ... </div>            the kind class sets the colour vars

   MY TASKS IS THE SOURCE OF TRUTH for the language. It keeps its own inline copy
   deliberately: it is a signed-off page and its variants live with it. When the
   language changes there, change it here in the same pass.

   ONE COLOUR, ONE MEANING (Joe, Sep 9). Blue is a blog post, green a new page,
   teal a content optimization, orange a post on another site, gold the monthly
   strategy, and navy the brand's own: the domain's plan and every custom GEO plan.
   Accepted work takes the kind's colour, never green: green already means "new page".
   Violet was added on Sep 10 for a custom plan and retired on Sep 11 (Joe: "purple
   still?"): the app uses it nowhere else, and a plan is not a task kind.
   One exception, Sep 11: the plan icons on Custom GEO Plans are blue (Joe: "make the icons blue instead
   of black"). That page carries no task cards, so nothing on it reads blue as a blog post; it sets the
   tile vars in its own <style> and leaves this file alone.
   ============================================================================ */

/* ---- the kinds. Every component below reads --c, --c2, --cs and --tint ---- */
.k-blog     { --c:#2563eb; --c2:#3b82f6; --cs:rgba(37,99,235,.30);  --tint:#eff6ff; }
.k-page     { --c:#059669; --c2:#10b981; --cs:rgba(5,150,105,.30);  --tint:#ecfdf5; }
.k-cu       { --c:#0891b2; --c2:#06b6d4; --cs:rgba(8,145,178,.30);  --tint:#ecfeff; }
.k-citation { --c:#ea580c; --c2:#f97316; --cs:rgba(234,88,12,.30);  --tint:#fff7ed; }
.k-strategy { --c:#ca8a04; --c2:#eab308; --cs:rgba(202,138,4,.30);  --tint:#fefce8; }
.k-domain   { --c:#262840; --c2:#3a2f52; --cs:rgba(38,40,64,.30);   --tint:#f4f4f8; }
/* work that is not a piece of content: under the hood, and the account's own paperwork */
.k-technical{ --c:#475569; --c2:#64748b; --cs:rgba(71,85,105,.30);  --tint:#f1f5f9; }
.k-report   { --c:#6b7280; --c2:#9ca3af; --cs:rgba(107,114,128,.25);--tint:#f9fafb; }

/* ---- the navy strip: one skeleton so nothing jumps ----
   17 Sep (Joe): no page opens with it any more ("We've kind of moved away from hero on all of the pages"). It is the
   page's call to action, lower down where the page has earned it: the number that matters, the few that back it, and
   .strip-go, the one button. */
.strip { position:relative; overflow:hidden; border-radius:.75rem; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); background:linear-gradient(135deg,#262840 0%,#30334e 60%,#3a2f52 100%); }
.strip::after { content:''; position:absolute; pointer-events:none; border-radius:9999px; background:radial-gradient(circle,#4ADE8033 0%,transparent 70%); width:18rem; height:18rem; top:-7rem; right:-5rem; }
.strip-in { position:relative; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:1rem 1.5rem; }
.strip-n { font-size:2.25rem; font-weight:700; line-height:1; color:#4ADE80; }
.strip-h { font-size:1rem; font-weight:700; color:#fff; white-space:nowrap; }
.strip-s { font-size:.75rem; margin-top:.125rem; color:rgba(231,227,252,0.65); }
.strip-s a { font-weight:600; color:#4ADE80; }
.strip-s a:hover { text-decoration:underline; }
.strip-div { height:2.5rem; width:1px; flex-shrink:0; background:rgba(255,255,255,0.12); }
.strip-l { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:rgba(231,227,252,0.5); }
.strip-v { font-size:1rem; font-weight:700; line-height:1.25; color:#fff; }
.strip-v.good { color:#4ADE80; } .strip-v.warn { color:#fbbf24; } .strip-v.bad { color:#fca5a5; }
.strip-go { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:.5rem; background:#fff; color:#262840; font-size:15px; font-weight:700; white-space:nowrap; transition:background .12s; }
.strip-go:hover { background:#f3f4f6; }
.strip-go i, .strip-go svg { font-size:.75rem; }
/* paging on the strip is drawn for a dark ground */
.hnav { height:2.1rem; width:2.1rem; border-radius:.5rem; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:rgba(231,227,252,0.8); display:inline-flex; align-items:center; justify-content:center; transition:background .12s, color .12s; }
.hnav:hover:not(:disabled) { background:rgba(255,255,255,0.14); color:#fff; }
.hnav:disabled { opacity:.3; cursor:default; }

/* ---- the card: one per thing waiting. Colour says the kind ---- */
.card { position:relative; border:1px solid #e5e7eb; border-radius:1rem; background:#fff; padding:1.35rem 1.6rem 1.35rem 1.85rem; cursor:pointer; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--c) 0%, var(--c2) 100%); }
.card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.10); border-color:var(--c2); }
.card:hover .cgo:not(.quiet) { filter:brightness(1.06); box-shadow:0 10px 22px var(--cs); }
.card.flat { cursor:default; }
.card.flat:hover { transform:none; box-shadow:0 1px 2px rgba(15,23,42,.05); border-color:#e5e7eb; }
.tile { height:2.9rem; width:2.9rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex-shrink:0; background:linear-gradient(135deg, var(--c) 0%, var(--c2) 100%); box-shadow:0 8px 18px var(--cs); }
.tile.sm { height:2.4rem; width:2.4rem; border-radius:.7rem; font-size:.9rem; }
.tile.xs { height:2rem; width:2rem; border-radius:.55rem; font-size:.8rem; box-shadow:0 3px 8px var(--cs); }
.klabel { font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--c); line-height:1.25; }
.klabel.sm { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.ctitle { font-size:17px; font-weight:600; color:#1f2937; line-height:1.35; }
.chead { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.cdot { color:#d1d5db; font-size:15px; font-weight:400; }
.cwhat { font-size:14.5px; color:#4b5563; line-height:1.6; }
.cmeta { font-size:13px; color:#6b7280; }
.cgo { display:inline-flex; align-items:center; gap:.45rem; height:2.35rem; padding:0 1rem; border-radius:.6rem; border:1px solid var(--c); background:var(--c); color:#fff; font-size:13.5px; font-weight:700; white-space:nowrap; box-shadow:0 4px 10px var(--cs); transition:box-shadow .15s, filter .15s; }
/* .quiet: a call to action on a card in a long list. Filled buttons are right when there are one
   or two on a page; twenty in a column are noise, so the words carry it at rest and the button
   fills under the cursor (Joe, Sep 10, on My Tasks). Same box either way: nothing moves. */
.cgo.quiet { border-color:transparent; background:transparent; color:var(--c); box-shadow:none; }
.card:hover .cgo.quiet { border-color:var(--c); background:var(--c); color:#fff; box-shadow:0 6px 14px var(--cs); }
.cghost { display:inline-flex; align-items:center; gap:.45rem; height:2.35rem; padding:0 .95rem; border-radius:.6rem; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:13.5px; font-weight:700; white-space:nowrap; }
.cghost:hover { border-color:var(--c); color:var(--c); }
.cwait { font-size:12px; font-weight:700; color:#6b7280; }
.cwait.late { color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:9999px; padding:.15rem .6rem; }

/* ---- the queue row: the same card, drawn as a table because it carries columns ----
   Content Optimizations, Blog Articles and New Pages are My Tasks' list with numbers beside
   each item, so they are the same object: the kind's rail down the left edge, the kind's tile,
   the kind's call to action. Put the kind class on the <tr>, not on the tile, or nothing here
   resolves. (Sep 14: extracted from three private copies that had drifted apart.) */
.qtable { border-collapse:separate; border-spacing:0 8px; }
.qrow td { background:#fff; border-top:1px solid #e7e9f0; border-bottom:1px solid #e7e9f0; transition:border-color .12s ease, box-shadow .12s ease; }
.qrow td:first-child { position:relative; border-left:1px solid #e7e9f0; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.qrow td:last-child { border-right:1px solid #e7e9f0; border-top-right-radius:12px; border-bottom-right-radius:12px; }
/* the rail, as .card::before. 4px rather than 5: a row is shorter than a card */
.qrow td:first-child::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:12px 0 0 12px; background:linear-gradient(180deg, var(--c) 0%, var(--c2) 100%); }
.qrow:hover td { border-color:var(--c2); box-shadow:0 2px 10px var(--cs); }
.qtile { height:2.1rem; width:2.1rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; flex-shrink:0; background:linear-gradient(135deg, var(--c) 0%, var(--c2) 100%); box-shadow:0 4px 10px var(--cs); }
.qttl { font-size:15px; font-weight:600; color:#1f2937; line-height:1.35; overflow-wrap:anywhere; }
.qsub { display:block; font-size:12px; color:#9ca3af; margin-top:.15rem; }

/* THE ROW'S CALL TO ACTION. A button that is invisible until the cursor lands on the row means
   nothing on screen says what the row does, which is worse than the row of filled buttons it was
   trying to avoid. My Tasks answered this in .cgo.quiet and the answer holds here: the words in
   the kind's colour at rest, the filled button under the cursor, the same box either way so
   nothing moves. (Joe, Sep 14: "the hover CTA only showing on hover. We need to remove that.") */
.qgo { display:inline-flex; align-items:center; gap:.4rem; height:2rem; padding:0 .8rem; border-radius:.55rem; border:1px solid transparent; background:transparent; color:var(--c); font-size:12.5px; font-weight:700; white-space:nowrap; transition:background .12s, color .12s, border-color .12s, box-shadow .12s; }
.qrow:hover .qgo { border-color:var(--c); background:var(--c); color:#fff; box-shadow:0 4px 10px var(--cs); }
.qgo.ghost { color:#6b7280; }
.qrow:hover .qgo.ghost { border-color:#d1d5db; background:#fff; color:#374151; box-shadow:none; }
/* THE CONTENT QUEUES (Blog Articles, New Pages, Content Optimizations): the row outline is the whole hover. Joe, 22 Sep:
   "remove the divides columns + CTA button background showing on hover". The seams were the shadow above, which is set
   per td, so every cell cast its own and the gaps between them drew column lines; and the CTA stays as words in the
   kind's colour. My Tasks keeps the rules above. */
.qtable.calm .qrow:hover td { box-shadow:none; }
.qtable.calm .qrow:hover .qgo { border-color:transparent; background:transparent; color:var(--c); box-shadow:none; }
.qtable.calm .qrow:hover .qgo.ghost { color:#6b7280; }
/* leaving something out of the queue is a quiet thing: grey until you mean it */
.qx { display:inline-flex; align-items:center; justify-content:center; height:2rem; width:2rem; border-radius:.5rem; color:#d1d5db; flex-shrink:0; transition:color .12s, background .12s; }
.qx:hover { color:#dc2626; background:#fef2f2; }
.qsort { cursor:pointer; user-select:none; white-space:nowrap; }
.qsort:hover { color:#374151; }
.qdot { width:8px; height:8px; border-radius:9999px; display:inline-block; }
.qnum { font-size:13px; font-weight:600; color:#374151; white-space:nowrap; font-variant-numeric:tabular-nums; }
.qtype { display:inline-flex; align-items:center; gap:.4rem; font-size:12px; font-weight:600; white-space:nowrap; color:#6b7280; }
.qtype i { font-size:10px; color:#9ca3af; }
.qtype.on { color:var(--c); } .qtype.on i { color:var(--c2); }

/* ---- the support link: which page an article is written for, and how many a page has ----
   Sep 11 standup. Joe: "each blog article isn't random, it supports a specific service page and
   we can map that on the blog articles page". Tien, on the page queues: "a column here to tell
   the number of support blog articles... they can see the whole big tree, it's supporting each
   other." One link, read from either end, so one component. It takes the colour of the end it
   NAMES, not the end it sits on: on a page queue it names blog articles and is blue, on the blog
   queue it names a page and stays neutral, because that page can be any kind. Nothing to show is
   a gap worth seeing rather than a blank cell. */
.qsup { display:inline-flex; align-items:center; gap:.4rem; max-width:13rem; font-size:12.5px; font-weight:600; color:#374151; line-height:1.35; }
.qsup i { flex-shrink:0; font-size:10px; color:#9ca3af; }
.qsup span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qsup.blog { color:#1d4ed8; } .qsup.blog i { color:#60a5fa; }
a.qsup:hover { text-decoration:underline; }
.qsup.none { color:#c4c8d0; font-weight:500; }
.qsup.none i { color:#e5e7eb; }

/* the action plan a row came from. Gold, because that is the strategy's colour everywhere else */
.qplan { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:.375rem; background:#fefce8; color:#854d0e; font-size:12px; font-weight:700; white-space:nowrap; }
.qplan i { font-size:9px; color:#ca8a04; }
.qplan .d { font-weight:500; color:#a16207; }
a.qplan:hover { background:#fef9c3; }

/* the sheet: one white surface for the thing itself (a draft, a page, a document) */
.sheet { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem 2rem 1.4rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid #f1f5f9; }

/* ---- headings and prose ---- */
.h2 { font-size:20px; font-weight:800; color:#111827; letter-spacing:-.015em; line-height:1.3; display:flex; align-items:center; gap:.7rem; }
.h2::before { content:''; flex-shrink:0; width:.3rem; height:1.2rem; border-radius:2px; background:linear-gradient(180deg, var(--c) 0%, var(--c2) 100%); }
.h3 { font-size:15px; font-weight:800; color:#374151; letter-spacing:.01em; line-height:1.3; display:flex; align-items:center; gap:.6rem; }
.h3::before { content:''; flex-shrink:0; width:.25rem; height:.9rem; border-radius:2px; background:linear-gradient(180deg, var(--c) 0%, var(--c2) 100%); }
.p { font-size:16.5px; color:#374151; line-height:1.75; }
.lead { font-size:17.5px; color:#111827; font-weight:600; line-height:1.6; }
.facts { font-size:14.5px; color:#374151; line-height:1.7; background:var(--tint); border:1px solid var(--cs); border-radius:.75rem; padding:1rem 1.15rem; }
.facts i { flex-shrink:0; color:var(--c); width:1rem; text-align:center; }
.facts div { display:flex; align-items:baseline; gap:.6rem; }
.rule { border:0; border-top:1px solid #e5e7eb; margin:2rem 0; }
.cwarn { font-size:13.5px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:.6rem; padding:.6rem .85rem; display:flex; align-items:center; gap:.6rem; }

/* ---- the item you are deciding on: the title card is the disclosure ---- */
.rhead { position:relative; overflow:hidden; display:block; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.rhead::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--c) 0%, var(--c2) 100%); }
.rtop { display:flex; align-items:flex-start; gap:1.15rem; padding:1.35rem 1.75rem 1.35rem 2rem; cursor:pointer; list-style:none; }
.rtop::-webkit-details-marker { display:none; }
.rtopright { margin-left:auto; align-self:center; flex-shrink:0; display:flex; flex-direction:column; align-items:stretch; gap:.5rem; }
.accopen { flex-shrink:0; justify-content:space-between; display:inline-flex; align-items:center; gap:.55rem; border:1px solid #e5e7eb; border-radius:.55rem; padding:.45rem .5rem .45rem .8rem; background:#f8fafc; transition:background .12s, border-color .12s; }
.rtop:hover .accopen { background:#f1f5f9; border-color:#d1d5db; }
.rhead[open] .acccar { transform:rotate(180deg); }
.accname { font-size:14px; font-weight:800; color:#374151; letter-spacing:.01em; line-height:1.25; }
.acccar { flex-shrink:0; height:1.5rem; width:1.5rem; border-radius:.4rem; border:1px solid #e5e7eb; background:#fff; color:#4b5563; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .15s, color .12s; }
.accbody, .accbody p, .accbody li { font-size:14.5px; color:#4b5563; line-height:1.7; }
.accbody { padding:1.1rem 1.75rem 1.5rem 2rem; border-top:1px solid #f1f5f9; }
.accbody p { margin:.5rem 0; } .accbody p:first-child { margin-top:0; } .accbody p:last-child { margin-bottom:0; }
.ul { font-size:14.5px; color:#4b5563; line-height:1.65; list-style:disc; padding-left:1.2rem; columns:2; column-gap:2.5rem; }
.ul li { margin:.25rem 0; break-inside:avoid; }
@media (max-width:1100px){ .ul { columns:1; } }

/* the evidence is context for the work, not a list to work through: one band */
.ev { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.9rem; }
.evrow { padding:.85rem 1rem; border-left:3px solid var(--c2); border-radius:.5rem; background:#f8fafc; }
.evf { font-size:14px; font-weight:700; color:#111827; line-height:1.4; }
.evb { font-size:14px; color:#4b5563; line-height:1.6; margin-top:.25rem; }
.evs { font-size:12.5px; color:#9ca3af; margin-top:.5rem; }
.evs a { color:var(--c); font-weight:600; text-decoration:underline; }

/* ---- ONE CHANGE PER CARD. No red and green walls: Now is grey, New is black,
        and the only colour is on the one button that matters. ---- */
.blk { border:1px solid #e5e7eb; border-radius:.9rem; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05); transition:border-color .12s, box-shadow .12s, opacity .12s; }
.blk.accepted { border-color:var(--c2); box-shadow:0 0 0 1px var(--c2), 0 8px 20px var(--cs); }
.blk.discarded { opacity:.45; }
.bhead { display:flex; align-items:flex-start; gap:.9rem; padding:1.2rem 1.5rem .6rem; }
.bnum { flex-shrink:0; height:1.9rem; width:1.9rem; border-radius:.6rem; background:#f3f4f6; color:#6b7280; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.blk.accepted .bnum { background:linear-gradient(135deg, var(--c) 0%, var(--c2) 100%); color:#fff; box-shadow:0 4px 10px var(--cs); }
.bsec { font-size:17.5px; font-weight:700; color:#111827; line-height:1.35; }
.bwhere { font-size:15px; color:#6b7280; line-height:1.6; margin-top:.15rem; max-width:52rem; }
.baccept { flex-shrink:0; display:inline-flex; align-items:center; gap:.45rem; height:2.3rem; padding:0 1.05rem; border-radius:.55rem; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:14px; font-weight:700; transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
.baccept:hover { border-color:var(--c); color:var(--c); }
.baccept.on { background:var(--c); border-color:var(--c); color:#fff; box-shadow:0 4px 10px var(--cs); }
.bstate { flex-shrink:0; font-size:14px; font-weight:700; color:var(--c); }
.bbody { padding:.4rem 1.5rem 1.2rem; }
.brow { margin-top:1.15rem; }
.blab { display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af; margin-bottom:.45rem; }
.blab.hi { color:var(--c); }
.bnow { font-size:15.5px; color:#6b7280; line-height:1.7; white-space:pre-wrap; background:#f8fafc; border:1px solid #eef2f7; border-left:3px solid #d1d5db; border-radius:.5rem; padding:.9rem 1.15rem; max-width:54.5rem; }
.bnew, .bschema { font-size:16px; color:#111827; line-height:1.7; white-space:pre-wrap; outline:none; border-left:3px solid var(--c2); padding:.1rem 0 .1rem 1.15rem; }
.bnew[contenteditable="true"] { border-radius:.4rem; box-shadow:0 0 0 2px #bfdbfe; }
.bnow > p, .bnow > ul, .bnow > ol, .bnow > h3, .bnow > blockquote,
.bnew > p, .bnew > ul, .bnew > ol, .bnew > h3, .bnew > blockquote { max-width:52rem; }
.bwhy { font-size:15px; color:#4b5563; line-height:1.65; margin-top:1.3rem; padding-top:1rem; border-top:1px solid #f1f5f9; max-width:52rem; }
.bwhy b { color:var(--c); font-weight:800; }
.bfoot { display:flex; gap:1.6rem; padding:0 1.4rem 1.1rem; }
.bfoot button { font-size:14px; font-weight:600; color:#6b7280; }
.bfoot button:hover { color:#111827; text-decoration:underline; }
.bcode { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; line-height:1.55; color:#334155; background:#f8fafc; border:1px solid #e5e7eb; border-radius:.5rem; padding:.85rem 1rem; overflow:auto; max-height:28rem; white-space:pre; margin-top:.7rem; }
details.bschema > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem; font-size:15px; font-weight:600; color:#4b5563; border:0; padding:0; }
details.bschema > summary::-webkit-details-marker { display:none; }
details.bschema > summary::before { content:'\25b8'; color:#9ca3af; width:.7rem; }
details.bschema[open] > summary::before { content:'\25be'; }
details.bschema > summary:hover { color:#111827; }

/* the decision, always within reach while you read */
.bar { position:sticky; bottom:0; z-index:20; background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.9rem 1.25rem; box-shadow:0 -2px 12px rgba(15,23,42,.06); }

/* ---- markdown inside a block or a preview ---- */
.md { font-size:14.5px; color:#111827; line-height:1.65; }
.md h1,.md h2,.md h3 { color:#111827; font-weight:700; margin:1.1rem 0 .4rem; }
.md h1 { font-size:1.35rem; } .md h2 { font-size:1.05rem; } .md h3 { font-size:.95rem; }
.md h3:first-child { margin-top:0; }
.md p { margin:.5rem 0; } .md p:first-child { margin-top:0; }
.md ul,.md ol { list-style:disc; padding-left:1.35rem; margin:.55rem 0; } .md ol { list-style:decimal; }
.md li { margin:.2rem 0; }
.md a { color:#2563eb; text-decoration:underline; }
.md strong { color:#111827; }
.md code { font-family:ui-monospace, monospace; font-size:.9em; background:#f1f5f9; padding:.1rem .3rem; border-radius:.25rem; }
.md table { width:100%; max-width:none; border-collapse:collapse; margin:.7rem 0; font-size:14.5px; }
.md th, .md td { border:1px solid #e5e7eb; padding:.45rem .65rem; text-align:left; vertical-align:top; }
.md th { background:#f8fafc; font-weight:700; }
/* .md is 14.5px for drawers and previews; where it carries the work itself it takes .p's size.
   This rule must stay AFTER .md or the cascade drops it (the bug caught by the smoke test Sep 10). */
.p.md, .p.md p, .p.md li { font-size:16.5px; line-height:1.75; }
.bnow.md, .bnew.md { white-space:normal; }

/* ---- chips, segments, paging: the small shared furniture ---- */
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:9999px; font-size:12px; font-weight:600; white-space:nowrap; }
.c-keep { background:#e5e7eb; color:#374151; }
.c-need { background:#fef3c7; color:#b45309; }
.c-new { background:#ecfdf5; color:#047857; }
.c-improve { background:#eff6ff; color:#1d4ed8; }
.c-kind { background:var(--tint); color:var(--c); }
.seg { display:inline-flex; border-radius:.5rem; border:1px solid #e5e7eb; background:#f3f4f6; padding:2px; }
.seg button { padding:.3rem .8rem; border-radius:.375rem; font-size:13px; font-weight:600; color:#6b7280; white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; }
.seg button.active { background:#fff; color:#2563eb; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.seg button:disabled { color:#c4c8d0; cursor:not-allowed; }
.pnav { display:inline-flex; align-items:center; gap:.45rem; height:2.25rem; padding:0 .85rem; border-radius:.55rem; border:1px solid #d1d5db; background:#fff; color:#4b5563; font-size:13px; font-weight:600; }
.pnav:hover:not(:disabled) { background:#f9fafb; color:#111827; }
.pnav:disabled { opacity:.4; cursor:default; }
.pnum { height:2.25rem; min-width:2.25rem; padding:0 .5rem; border-radius:.55rem; border:1px solid #e5e7eb; background:#fff; color:#4b5563; font-size:13px; font-weight:700; }
.pnum:hover { background:#f9fafb; color:#111827; }
.pnum.on { background:#111827; border-color:#111827; color:#fff; }
.fld { width:100%; font-size:14px; border:1px solid #d1d5db; border-radius:8px; padding:.5rem .75rem; background:#fff; }
.fld:focus { outline:none; box-shadow:0 0 0 3px #bfdbfe; border-color:#2563eb; }

/* the slide-out review panel, so a customer can approve from the module page
   or from My Tasks and meet the same thing (Joe, Sep 10) */
.panel { transition:transform .28s ease; }
.panel-hidden { transform:translateX(100%); }
.panel-head { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #e5e7eb; padding:1rem 1.5rem; display:flex; align-items:center; gap:.75rem; }