/* Customer portal (/portal/, /portal/admin/, /portal/demo/). Builds on styles.css + the co-v2 checkout look:
   cream cards (#fffdf8 on --paper), lime accents, dark panels. Mobile first. */
.pp { --card: #fffdf8; }
.pp .section-light { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(64px, 8vw, 110px); }
.pp .hero.page-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.pp-demo-bar { background: var(--lime); color: var(--ink); font-size: .88rem; font-weight: 600; text-align: center; padding: 8px 16px; }
.pp-demo-bar a { color: var(--ink); }
.pp-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--muted-light); font-size: .92rem; }
.pp-meta strong { color: var(--text-light); font-weight: 600; }
.pp-grid { display: grid; gap: var(--space-md); }
.pp-grid > * { min-width: 0; }
@media (min-width: 1000px) { .pp-grid { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; } .pp-grid.pp-grid-track { grid-template-columns: minmax(0, 1fr) 360px; } }
.pp-card { background: var(--card); border: 1px solid var(--line-light); border-radius: var(--radius); box-shadow: 0 30px 50px -36px rgba(30,35,20,.4); padding: var(--card-pad); color: var(--text-dark); min-width: 0; }
.pp-card + .pp-card { margin-top: var(--space-md); }
.pp-card h2, .pp-card h3 { color: var(--text-dark); }
.pp-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0 0 .3em; }
.pp-card h3 { font-size: 1.05rem; margin: 0 0 .6em; }
.pp-intro { color: var(--muted-dark); margin: 0 0 18px; }
.pp-reqnote { font-size: .84rem; color: var(--muted-dark); margin: 0 0 20px; }
.pp-reqnote b, .pp .req { color: #5d7a00; }
.pp-dark { background: var(--ink); color: var(--text-light); border-color: var(--ink); }
.pp-dark h2, .pp-dark h3 { color: var(--text-light); }
/* step nav */
.pp-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.pp-steps::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .pp-steps { flex-direction: column; overflow: visible; position: sticky; top: 100px; } }
.pp-steps button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--card); color: var(--muted-dark); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.pp-steps button:hover { border-color: var(--lime-deep); }
.pp-steps .n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-light); font-size: .8rem; }
.pp-steps .is-done button { color: var(--text-dark); }
.pp-steps .is-done .n { background: rgba(159,203,29,.18); border-color: rgba(159,203,29,.6); color: #4d6600; }
.pp-steps .is-current button { background: var(--ink); color: var(--text-light); border-color: var(--ink); }
.pp-steps .is-current .n { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pp-steps .has-err .n { background: #ffe1d8; border-color: var(--coral); color: #a33b1d; }
/* fields on cream */
.pp-card .field > label, .pp-card .field > legend, .pp-card .pp-label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); padding: 0; }
.pp-card .optional { color: var(--muted-dark); font-weight: 400; font-size: .85rem; }
.pp-card input[type="text"], .pp-card input[type="email"], .pp-card input[type="tel"], .pp-card input[type="url"], .pp-card input[type="date"], .pp-card input[type="password"], .pp-card select, .pp-card textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text-dark); background: var(--paper); border: 1.5px solid var(--line-light); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; }
.pp-card textarea { min-height: 96px; resize: vertical; }
.pp-card input:focus, .pp-card select:focus, .pp-card textarea:focus { outline: none; border-color: var(--lime-deep); box-shadow: 0 0 0 4px rgba(159,203,29,.22); }
.pp-card [aria-invalid="true"] { border-color: var(--coral) !important; }
.pp-help { margin: -2px 0 8px; font-size: .85rem; color: var(--muted-dark); }
.pp-err { margin: 6px 0 0; font-size: .85rem; color: #b8401f; font-weight: 600; }
.pp-err:empty { display: none; }
.pp-group { border: 0; padding: 18px; margin: 0 0 16px; border-radius: var(--radius-sm); background: var(--paper); }
.pp-group > legend { float: left; width: 100%; font-weight: 700; margin-bottom: 4px; color: var(--text-dark); }
.pp-group > legend + * { clear: both; }
.pp-group .field input, .pp-group .field select, .pp-group .field textarea { background: #fffdf8; }
.pp-gcols { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .pp-gcols { grid-template-columns: 1fr 1fr; } }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { position: relative; }
.pp-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pp-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-light); background: var(--paper); font-size: .9rem; font-weight: 500; color: var(--text-dark); }
.pp-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--text-light); }
.pp-chip input:checked + span::before { content: "✓"; color: var(--lime); font-weight: 700; }
.pp-chip input:focus-visible + span { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.pp-pkgnote { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(200,240,75,.22); font-size: .86rem; color: #3c4f00; }
.pp-rows { display: grid; gap: 10px; }
.pp-row { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--paper); position: relative; }
@media (min-width: 720px) { .pp-row { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 44px; align-items: end; } }
.pp-row .field { margin: 0; }
.pp-row input { background: #fffdf8 !important; }
.pp-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-light); background: #fffdf8; color: var(--muted-dark); cursor: pointer; font-size: 1.1rem; }
.pp-iconbtn:hover { color: #b8401f; border-color: var(--coral); }
.pp-add { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px dashed rgba(20,22,18,.3); background: transparent; color: var(--text-dark); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
.pp-add:hover { border-color: var(--lime-deep); background: rgba(200,240,75,.15); }
.pp-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pp-color { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); }
.pp-color input[type="color"] { width: 40px; height: 40px; border: 0; padding: 0; background: none; border-radius: 10px; cursor: pointer; }
.pp-color input[type="text"] { width: 104px !important; min-height: 40px !important; padding: 8px 10px !important; font-family: ui-monospace, Menlo, monospace; font-size: .9rem !important; }
.pp-consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-sm); background: var(--paper); font-weight: 500; cursor: pointer; }
.pp-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.pp-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.pp-save { font-size: .85rem; color: var(--muted-dark); display: inline-flex; align-items: center; gap: 6px; }
.pp-save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-deep); }
.pp-save.is-saving::before { background: #e3b341; }
.pp-save.is-error::before { background: var(--coral); }
.btn-ghost-dark { --bg: transparent; color: var(--text-dark); border: 1.5px solid rgba(20,22,18,.25); }
.btn-ghost-dark:hover { border-color: var(--ink); }
/* package card */
.pp-pkg { font-size: .92rem; }
.pp-pkg .kicker { color: var(--lime) !important; margin: 0 0 6px; }
.pp-pkg h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 0 0 4px; }
.pp-pkg ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; color: #d4d6cd; }
.pp-pkg li { display: flex; gap: 9px; }
.pp-pkg li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--lime); }
.pp-pkg .pp-pkg-fine { margin: 14px 0 0; color: var(--muted-light); font-size: .82rem; }
/* uploads */
.pp-drop { display: grid; place-items: center; gap: 6px; text-align: center; padding: 28px 18px; border-radius: var(--radius-sm); border: 2px dashed rgba(20,22,18,.25); background: var(--paper); color: var(--muted-dark); cursor: pointer; transition: border-color .2s, background-color .2s; }
.pp-drop strong { color: var(--text-dark); font-size: 1.02rem; }
.pp-drop.is-over, .pp-drop:hover { border-color: var(--lime-deep); background: rgba(200,240,75,.16); }
.pp-drop:focus-within { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.pp-drop svg { width: 34px; height: 34px; color: #5d7a00; }
.pp-cats { display: grid; gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .pp-cats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .pp-cats { grid-template-columns: 1fr 1fr 1fr; } }
.pp-cat { position: relative; display: block; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-light); background: var(--paper); cursor: pointer; }
.pp-cat input { position: absolute; opacity: 0; }
.pp-cat b { display: flex; justify-content: space-between; gap: 6px; font-size: .92rem; color: var(--text-dark); }
.pp-cat b em { font-style: normal; font-weight: 700; font-size: .75rem; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 99px; background: var(--paper-2); color: var(--muted-dark); }
.pp-cat b em.has { background: var(--lime); color: var(--ink); }
.pp-cat small { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted-dark); line-height: 1.4; }
.pp-cat:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; background: #fffdf8; }
.pp-cat:has(input:focus-visible) { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.pp-files { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pp-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line-light); }
.pp-file-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: var(--lime); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pp-file-name { margin: 0; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); }
.pp-file-meta { margin: 0; font-size: .8rem; color: var(--muted-dark); }
.pp-file-meta .tag { display: inline-block; padding: 0 7px; border-radius: 99px; background: var(--paper-2); margin-right: 6px; }
.pp-bar { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 6px; }
.pp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); transition: width .2s; }
.pp-file.is-error { border-color: var(--coral); }
.pp-file a.pp-dl, .pp-file button { font: inherit; font-size: .85rem; font-weight: 600; color: var(--text-dark); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; min-height: 44px; padding: 0 4px; }
.pp-linkform { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border-radius: var(--radius-sm); background: var(--paper); }
@media (min-width: 720px) { .pp-linkform { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto; align-items: end; } }
.pp-linkform .field { margin: 0; }
.pp-linkform input, .pp-linkform select { background: #fffdf8 !important; }
/* tracker */
.pp-now { display: grid; gap: 6px; padding: 22px; border-radius: var(--radius-sm); background: var(--ink); color: var(--text-light); margin-bottom: 22px; }
.pp-now .kicker { margin: 0; color: var(--lime); }
.pp-now h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--text-light); }
.pp-now p { margin: 0; color: #d4d6cd; }
.pp-live { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted-light); }
.pp-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200,240,75,.2); animation: pulse 2.4s ease-in-out infinite; }
.pp-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pp-track li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
.pp-track li::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line-light); }
.pp-track li:last-child::before { display: none; }
.pp-track li.is-done::before { background: var(--lime-deep); }
.pp-track .dot2 { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-light); background: var(--card); font-size: .8rem; font-weight: 700; color: var(--muted-dark); z-index: 1; }
.pp-track .is-done .dot2 { background: var(--lime-deep); border-color: var(--lime-deep); color: var(--ink); }
.pp-track .is-current .dot2 { background: var(--lime); border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 5px rgba(200,240,75,.35); }
.pp-track h4 { margin: 5px 0 2px; font-size: 1rem; color: var(--text-dark); }
.pp-track .is-todo h4 { color: var(--muted-dark); font-weight: 500; }
.pp-track time, .pp-track .when { font-size: .8rem; color: var(--muted-dark); }
.pp-track p { margin: 4px 0 0; font-size: .9rem; color: var(--text-dark); }
.pp-track blockquote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--lime-deep); background: var(--paper); border-radius: 0 10px 10px 0; font-size: .88rem; }
.pp-cycles { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.pp-cycles button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line-light); background: var(--paper); font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-dark); cursor: pointer; }
.pp-cycles button[aria-pressed="true"] { background: var(--ink); color: var(--text-light); border-color: var(--ink); }
.pp-cycles button small { font-weight: 500; opacity: .75; margin-left: 4px; }
.pp-review { border: 2px solid var(--lime-deep); }
.pp-review .pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pp-msgs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.pp-msg { padding: 10px 14px; border-radius: 14px; background: var(--paper); font-size: .92rem; max-width: 92%; }
.pp-msg.by-client { justify-self: end; background: var(--ink); color: var(--text-light); }
.pp-msg.by-system { justify-self: center; background: transparent; color: var(--muted-dark); font-size: .82rem; text-align: center; }
.pp-msg.is-internal { background: #fff3c4; border: 1px dashed #c9a400; }
.pp-msg small { display: block; font-size: .74rem; opacity: .7; margin-top: 2px; }
.pp-summary dl { margin: 0; display: grid; gap: 4px 18px; }
@media (min-width: 720px) { .pp-summary dl { grid-template-columns: 220px minmax(0, 1fr); } }
.pp-summary dt { font-weight: 600; font-size: .86rem; color: var(--muted-dark); }
.pp-summary dd { margin: 0 0 8px; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-summary h4 { margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.pp-summary h4 button { font: inherit; font-size: .85rem; background: none; border: 0; text-decoration: underline; text-decoration-color: var(--lime-deep); cursor: pointer; min-height: 40px; }
.pp-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 4px; border: 1px solid rgba(0,0,0,.15); }
.pp-banner { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .92rem; }
.pp-banner.is-error { background: #ffe1d8; color: #7a2a12; }
.pp-banner.is-ok { background: rgba(200,240,75,.3); color: #2f3d00; }
.pp-loading { padding: 40px; text-align: center; color: var(--muted-dark); }
/* admin */
.pa-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pa-table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-dark); padding: 8px 10px; border-bottom: 1px solid var(--line-light); }
.pa-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.pa-table tr:hover td { background: var(--paper); }
.pa-table a { color: var(--text-dark); font-weight: 700; }
.pa-stage { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--paper-2); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pa-stage.s-client_review { background: var(--lime); }
.pa-stage.s-delivered { background: var(--ink); color: var(--lime); }
.pa-stage.s-received { background: #ffe9c7; }
@media (max-width: 719px) { .pa-table thead { display: none; } .pa-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-light); } .pa-table td { display: block; border: 0; padding: 3px 4px; } }
.pa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pa-stagebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pa-stagebtns label { position: relative; }
.pa-stagebtns input { position: absolute; opacity: 0; }
.pa-stagebtns span { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line-light); background: var(--paper); font-size: .86rem; font-weight: 600; cursor: pointer; }
.pa-stagebtns input:checked + span { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.pa-stagebtns input:focus-visible + span { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.pa-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--text-dark); }
/* /purchased/ hand-off card */
.pp-handoff { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.pp-handoff-card { max-width: 860px; border: 2px solid var(--lime-deep); }
.pp-handoff-card h2 em { color: #5d7a00; }
.pp-handoff-steps { color: var(--text-dark); margin: 6px 0 18px; }
.pp-handoff-steps strong { color: var(--text-dark); }
.pp-ppo-actions { margin: 0 0 10px; }
.pp-handoff-steps li { background: var(--paper); border-color: var(--line-light); color: var(--muted-dark); }
.pp-handoff-steps li strong { display: block; }
.pp-handoff-steps li::before { color: #5d7a00; }

/* ── Task checklists (team page) + progress (customer tracker, template order status) ── */
.pp-progress { display: block; height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.pp-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); border-radius: inherit; transition: width .5s var(--ease); }
.pp-taskbox { margin: 18px 0 22px; padding: 16px 18px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--paper); }
.pp-taskhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pp-taskhead h3 { margin: 0; font-size: 1rem; }
.pp-pct { font-weight: 700; font-size: .92rem; color: #5d7a00; }
.pp-tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pp-tasks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .95rem; color: var(--muted-dark); }
.pp-tasks li time { font-size: .8rem; color: var(--muted-dark); white-space: nowrap; }
.pp-tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-light); display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--ink); }
.pp-tasks li.is-done { color: var(--text-dark); }
.pp-tasks li.is-done .pp-tick { background: var(--lime); border-color: var(--lime); }
.dl-orderstatus { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--paper); color: var(--text-dark); }
.dl-os-h { margin: 0 0 8px; font-weight: 700; font-size: .92rem; }
.pa-count { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pa-count.is-complete strong { color: #5d7a00; }
.pp-progress.pa-mini { display: inline-block; width: 64px; height: 6px; vertical-align: middle; }
.pa-taskrow td { padding-top: 0 !important; }
.pa-table tr.pa-taskrow:hover td { background: transparent; }
.pa-checklists { display: grid; gap: 12px; }
.pa-checklists.is-compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pa-tasks { margin: 0; padding: 12px 14px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--paper); min-width: 0; }
.pa-tasks legend { padding: 0 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-dark); }
.pa-pct { margin-left: 6px; color: #5d7a00; text-transform: none; letter-spacing: 0; }
.pa-tasks .pp-progress { height: 6px; margin: 4px 0 8px; }
.pa-tasks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-tasks li { display: flex; align-items: center; gap: 6px; }
.pa-tasks label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; min-height: 36px; border: 1px solid var(--line-light); border-radius: 999px; background: var(--card); cursor: pointer; font-size: .86rem; color: var(--text-dark); transition: background .2s, border-color .2s; }
.pa-tasks label:hover { border-color: var(--lime-deep); }
.pa-tasks input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #7ea50f; cursor: pointer; }
.pa-tasks li.is-done label { background: #eef9cf; border-color: var(--lime-deep); }
.pa-tasks li.is-saving label { opacity: .55; }
.pa-tasks time { font-size: .74rem; color: var(--muted-dark); }
.pa-checklists:not(.is-compact) .pa-tasks ul { flex-direction: column; flex-wrap: nowrap; }
.pa-checklists:not(.is-compact) .pa-tasks li { justify-content: space-between; }
@media (max-width: 719px) { .pa-table tr.pa-taskrow { border-bottom: 1px solid var(--line-light); padding-top: 0; } .pa-table tr.pa-row { border-bottom: 0; } .pa-tasks time { display: none; } .pa-checklists:not(.is-compact) .pa-tasks time { display: inline; } }
/* Subtasks (team page): a count button opens each task's subtasks */
.pa-tasks > ul > li { display: block; min-width: 0; }
.pa-task { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pa-checklists:not(.is-compact) .pa-task { justify-content: flex-start; }
.pa-checklists:not(.is-compact) .pa-task time { margin-left: auto; }
.pa-checklists.is-compact .pa-tasks > ul > li.is-open { flex: 1 1 100%; }
.pa-tasks li.is-part > .pa-task label { border-color: var(--lime-deep); border-style: dashed; }
.pa-subtoggle { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; min-width: 44px; padding: 4px 9px; border: 1px solid var(--line-light); border-radius: 999px; background: var(--card); color: var(--muted-dark); font: inherit; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background .2s; }
.pa-subtoggle:hover, .pa-subtoggle[aria-expanded="true"] { border-color: var(--lime-deep); color: var(--text-dark); }
.pa-subtoggle svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.pa-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pa-subtoggle:focus-visible { outline: 2px solid #7ea50f; outline-offset: 2px; }
li.is-done > .pa-task .pa-subtoggle { background: #eef9cf; border-color: var(--lime-deep); color: #4c6400; }
.pa-tasks ul.pa-subs { display: grid; gap: 2px; flex-direction: initial; margin: 6px 0 4px 14px; padding: 2px 0 2px 12px; border-left: 2px solid var(--line-light); }
.pa-tasks ul.pa-subs[hidden] { display: none; }
.pa-tasks .pa-subs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pa-tasks .pa-subs label { border: 0; background: none; border-radius: 6px; padding: 5px 6px; min-height: 34px; font-size: .84rem; color: var(--muted-dark); align-items: flex-start; }
.pa-tasks .pa-subs label span { line-height: 1.35; padding-top: 1px; }
.pa-tasks .pa-subs label:hover { background: var(--card); }
.pa-tasks .pa-subs li.is-done label { background: none; color: var(--text-dark); }
.pa-tasks .pa-subs input[type="checkbox"] { width: 17px; height: 17px; flex: none; }
.pa-tasks .pa-subs time, .pa-mig { font-size: .72rem; color: var(--muted-dark); white-space: nowrap; display: inline !important; }
.pa-me { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: .82rem; color: var(--muted-dark); }
.pa-me input { width: 150px; min-height: 36px; padding: 6px 10px; font-size: .88rem; }
@media (max-width: 719px) {
  .pa-tasks ul.pa-subs { margin-left: 4px; padding-left: 8px; }
  .pa-tasks .pa-subs li { flex-wrap: wrap; gap: 0 8px; }
  .pa-tasks .pa-subs time { padding-left: 31px; margin-top: -6px; }
  .pa-subtoggle { min-height: 36px; }
  .pa-me { display: flex; } .pa-me input { flex: 1; }
}
/* Customer tracker: task in progress (subtasks started) */
.pp-tasks li.is-part .pp-tick { border-color: var(--lime-deep); background: linear-gradient(90deg, var(--lime) 50%, transparent 50%); }
.pp-tasks li .pp-part { font-size: .8rem; color: #5d7a00; font-weight: 600; white-space: nowrap; }

/* ── Website balance (pay first → paid invoice), 19 Oct 2026 ── */
.pp-balance{border:2px solid var(--lime,#c8f04b)}
.pp-balance.is-paid{border-color:#9fcb1d}
.pp-bal-amt{font-size:2.2rem;letter-spacing:-.02em;margin:6px 0 14px}.pp-bal-amt span{font-size:.95rem;opacity:.7;margin-left:6px}
.pp-bal-notes{margin:14px 0 6px;padding-left:18px;font-size:.92rem;line-height:1.55}.pp-bal-notes li{margin:4px 0}
.pp-invoice{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#f6f8ef;border-radius:14px;padding:14px 16px;margin:14px 0}.pp-invoice>div{flex:1;min-width:160px}
.pp-care{margin-top:16px;padding:16px 18px;border-radius:14px;background:#0e100d;color:#f3f4ef}.pp-care h3{margin:0 0 6px;color:#c8f04b}.pp-care p{margin:0 0 10px;opacity:.9}.pp-care .btn-ghost-dark{color:#f3f4ef;border-color:#f3f4ef}
.pa-balance{margin:0 0 16px;padding:16px 18px;border-radius:16px;border:2px dashed #9fcb1d;background:#fbfcf6}
.pa-bal-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}.pa-bal-head h3{margin:0;font-size:1.15rem}
.pa-bal-mode{display:flex;gap:8px;align-items:center;font-size:.9rem}.pa-bal-mode select{max-width:100%}
.pa-pending{background:#fff7d6;border:2px solid #e8c547;border-radius:14px;padding:12px 16px;margin:12px 0}.pa-pending-list ul{margin:6px 0 0;padding-left:18px}
.pa-preview{background:#fff;border:1px solid #dfe3d4;border-radius:12px;padding:12px 14px;margin:12px 0}.pa-preview pre,.pa-outbox pre{white-space:pre-wrap;font:inherit;font-size:.88rem;margin:6px 0 0}
.pa-outbox{margin-top:12px}.pa-outbox summary{cursor:pointer;font-weight:600}.pa-outbox li{margin:10px 0;padding:10px;background:#fff;border-radius:10px;list-style:none}.pa-outbox ul{padding:0}
.pa-balglobal{display:flex;flex-direction:column;gap:4px;margin-top:8px}.pa-balglobal small{opacity:.7}
.pa-balance code{word-break:break-all;font-size:.8rem}
@media (max-width:640px){.pp-bal-amt{font-size:1.8rem}.pa-bal-head{flex-direction:column;align-items:flex-start}.pa-bal-mode{flex-wrap:wrap}.pa-balance .pp-actions .btn,.pp-balance .btn{width:100%;text-align:center}}

/* ── Video format picker (19 Oct 2026) ── */
.pp-ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.pp-ratio{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border:2px solid #dfe3d4;border-radius:16px;background:#fff;cursor:pointer;text-align:center;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.pp-ratio input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pp-ratio:focus-within,.pp-ratio:focus-visible{outline:3px solid #9fcb1d;outline-offset:2px}
.pp-ratio.is-on{border-color:#0e100d;box-shadow:0 0 0 3px #c8f04b inset}
.pp-ratio strong{font-size:1.1rem}.pp-ratio small{opacity:.75}.pp-ratio-use{font-size:.78rem;opacity:.65;line-height:1.3}
.pp-ratio-tick{position:absolute;top:8px;right:10px;background:#c8f04b;border-radius:999px;width:22px;height:22px;display:grid;place-items:center;font-size:.8rem;font-weight:800}
.pp-ratio.is-extra{border-style:dashed;background:#fafaf7;color:#5b5f55}.pp-ratio.is-extra em{font-style:normal;font-family:inherit;letter-spacing:0;font-size:.78rem;font-weight:700;color:#5d7a00;margin-top:2px}.pp-ratio.is-extra.is-asking{border-color:#9fcb1d}
.pp-ratio[disabled],.pp-format.is-locked .pp-ratio{cursor:not-allowed;opacity:.65}
.pp-shape{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:6px}.pp-shape i{display:block;background:#0e100d;border-radius:5px;max-width:100%;max-height:100%}
.pp-ratio.is-on .pp-shape i{background:linear-gradient(135deg,#0e100d 60%,#9fcb1d)}.pp-ratio.is-extra .pp-shape i{background:transparent;border:2px dashed #9fcb1d}
.pp-sizes{border:0;padding:0;margin:10px 0}.pp-sizes legend{font-weight:700;margin-bottom:6px}.pp-sizes small{opacity:.7}
.pp-fmt-pv{margin:12px 0;border:1px solid #dfe3d4;border-radius:14px;padding:10px 14px;background:#fff}.pp-fmt-pv summary{cursor:pointer;font-weight:700}
.pp-fmt-videos{list-style:none;padding:0;margin:8px 0 0}.pp-fmt-videos li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #eef0e8}.pp-fmt-vname{min-width:90px;font-weight:600}
.pp-fmt-ask{border:2px dashed #9fcb1d;border-radius:14px;padding:12px 14px;margin:0 0 12px;background:#fbfcf6}
.pp-fmt-reqs{margin:6px 0;padding-left:18px;font-size:.92rem}
.pa-format{margin:0 0 16px;padding:16px 18px;border-radius:16px;border:2px solid #0e100d;background:#fff}
.pa-fmt-picks{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:10px 0 0}.pa-fmt-picks li{display:flex;align-items:center;gap:8px;background:#f6f8ef;border-radius:12px;padding:8px 12px}
.pa-shape{width:30px;height:30px;margin:0}.pa-fmt-pv{margin:2px 0 0;padding-left:18px}
@media (max-width:640px){.pp-ratios{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-shape{width:46px;height:46px}}
.pp-format .pp-banner{background:#fff6d6;border:1px solid #e9cf6b;border-radius:14px;padding:12px 16px;margin:12px 0;color:#3d3a1e}

/* D23 order-email change card (19 Oct 2026) */
.pp-email-section { padding-top: 0; }
.pp-email { max-width: 720px; }
.pp-email-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm, 1rem); }
.pp-email-codes input { font-size: 1.3rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.pp-email-note { font-size: .92rem; opacity: .8; }
.pp-email-help { margin-top: var(--space-sm, 1rem); font-size: .95rem; }
.pp-email-help summary { cursor: pointer; font-weight: 600; }
.pp-email { scroll-margin-top: 110px; }
.pp-email .pp-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.pp-email-link { background: none; border: 0; padding: .6rem .4rem; font: inherit; font-weight: 600; color: var(--text-dark); text-decoration: underline; cursor: pointer; }
.pp-email-help summary { color: var(--text-dark); }
/* D16 file expiry (test copy): per-file "Available until" labels, the note under deliverables and the top banner */
.pp-exp { font-weight: 600; color: #2f3d00; }
.pp-exp.is-soon { color: #8a5a00; }
.pp-exp.is-urgent, .pp-exp.is-gone { color: #b8401f; }
.pp-exp-tag { display: inline-block; padding: 2px 9px; border-radius: 99px; background: #ffe1d8; color: #7a2a12; font-size: .78rem; font-weight: 700; margin-right: 6px; }
.pp-keep { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: #fff6d6; border: 1px solid #e9cf6b; color: #3d3a1e; font-size: .88rem; line-height: 1.5; }
.pp-keep .pp-linkbtn { font: inherit; font-weight: 700; color: var(--text-dark); background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; min-height: 32px; }
.pp-keep-banner.is-soon { background: #fff1cc; border: 1px solid #e3b23c; color: #5a3d00; }
.pp-keep-banner.is-urgent { background: #ffe1d8; border: 1px solid #e07a5a; color: #7a2a12; }
.pp-keep-banner.is-gone { background: var(--paper-2, #efece3); color: var(--text-dark); }
.pp-keep-banner a { color: inherit; font-weight: 700; }
.pp-keep.is-calm { background: var(--paper-2, #efece3); border-color: transparent; }