/* portal.css -- session 481 (briefs/session-481-brief.md Part 7): the Client Portal's stylesheet. The mockups (mh-client-portal-mockups-v1.0,
   01 to 06) are the specification: every inline style there is a named token or class here. Phone first (390 wide); from 900 wide the desktop
   files (1360 wide): the header's links across the top, the content padded 32 by 40. Every class starts pt- (the portal's own). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format("woff2")}
:root{
  --pt-deep:#144d54; --pt-deeper:#0e363b; --pt-teal:#1d6e77; --pt-aqua:#6fd5d4; --pt-yellow:#ffd13a; --pt-yellow-2:#f5c21c; --pt-orange:#ff8a33;
  --pt-ink:#16181a; --pt-text:#4d545a; --pt-soft:#6b747b; --pt-line:#dfe3e6; --pt-chip:#e9ecee; --pt-edge:#c9d0d4; --pt-ground:#f2f4f5; --pt-card:#ffffff;
  --pt-tint:#dceff0; --pt-green-bg:#e2f4ee; --pt-green-ink:#08513f; --pt-amber-bg:#fdf0d8; --pt-amber-ink:#7a5312; --pt-peach-bg:#ffe8d6; --pt-peach-ink:#9a4a0e;
  --pt-dot-scheduled:#1d6e77; --pt-dot-tbc:#b7791f; --pt-dot-done:#2e9c7c;
  --pt-qc-bg:#ece6f8; --pt-qc-ink:#4b3592; --pt-dot-qc:#6b4fbb;   /* session 487: a Quality Check's own colour, never a clean's */
  --pt-font:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --pt-card-radius:14px; --pt-card-shadow:0 4px 14px 0 rgba(14,54,59,0.08);
  --pt-panel-radius:18px; --pt-panel-shadow:0 10px 30px 0 rgba(14,54,59,0.22);
  --pt-btn-radius:10px; --pt-go-shadow:0 6px 16px 0 rgba(217,106,24,0.28);
  --pt-pad:16px; --pt-gap:14px; --pt-tap:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pt{margin:0;background:var(--pt-ground);color:var(--pt-text);font-family:var(--pt-font);font-size:14px;font-weight:450;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.pt a{color:var(--pt-teal)}
.pt a:hover{color:var(--pt-deep)}
.pt :focus-visible{outline:3px solid var(--pt-orange);outline-offset:2px}
.pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the office's View their portal band: never looks like the person's own sign-in */
.pt-band{background:repeating-linear-gradient(135deg,#16181a 0 14px,#2a2d30 14px 28px);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;font-weight:600}
.pt-band b{color:var(--pt-yellow)}
.pt-band form{margin:0 0 0 auto}
.pt-band button{min-height:var(--pt-tap);padding:0 18px;border-radius:var(--pt-btn-radius);border:2px solid var(--pt-yellow);background:transparent;color:var(--pt-yellow);font:inherit;font-weight:700;cursor:pointer}
.pt-band button:hover{background:var(--pt-yellow);color:var(--pt-ink)}

/* the header and its stripe */
.pt-head{background:var(--pt-deep);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px}
.pt-brand{flex:1;min-width:0;font-size:19px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-back{width:var(--pt-tap);height:var(--pt-tap);border:none;background:rgba(255,255,255,0.12);border-radius:var(--pt-btn-radius);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;text-decoration:none}
.pt .pt-back{color:#fff}
.pt-back:hover{background:rgba(255,255,255,0.2)}
.pt-nav{display:none}
.pt-stripe{height:6px;background:repeating-linear-gradient(90deg,#1d6e77 0px,#1d6e77 60px,#6fd5d4 60px,#6fd5d4 120px,#ffd13a 120px,#ffd13a 180px,#ff8a33 180px,#ff8a33 240px)}

/* the account button and its menu (details, no script) */
.pt-acct{position:relative;flex:none}
.pt-acct>summary{list-style:none;width:var(--pt-tap);height:var(--pt-tap);border-radius:999px;background:var(--pt-yellow);color:var(--pt-ink);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pt-acct>summary::-webkit-details-marker{display:none}
.pt-acct>summary:hover{box-shadow:0 0 0 3px rgba(255,209,58,0.35)}
.pt-menu{position:absolute;right:0;top:52px;z-index:20;width:260px;max-width:calc(100vw - 32px);background:var(--pt-card);color:var(--pt-text);border-radius:var(--pt-card-radius);box-shadow:0 10px 30px 0 rgba(14,54,59,0.22);padding:8px 0}
.pt-menu-who{padding:10px 16px 12px;border-bottom:1px solid var(--pt-line)}
.pt-menu-name{font-size:15px;font-weight:700;color:var(--pt-ink)}
.pt-menu-sub{font-size:13px;color:var(--pt-soft)}
.pt-menu a,.pt-menu button{display:flex;align-items:center;width:100%;min-height:var(--pt-tap);padding:0 16px;font:inherit;font-weight:600;color:var(--pt-deep);text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer;text-align:left}
.pt-menu a:hover,.pt-menu button:hover{background:var(--pt-ground)}
.pt-menu form{margin:0}

/* the page */
.pt-main{padding:var(--pt-pad);display:flex;flex-direction:column;gap:var(--pt-gap);max-width:1360px;margin:0 auto}
.pt-wide{display:none}
.pt-title{font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--pt-ink);margin:0}
.pt-sub{font-size:15px;margin-top:6px}
.pt-h2{font-size:17px;font-weight:700;color:var(--pt-ink);margin:0}
.pt-day-head{font-size:17px;font-weight:700;color:var(--pt-ink);padding:0 4px}
.pt-note{font-size:13px;color:var(--pt-soft)}

/* buttons */
.pt-go{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--pt-btn-radius);background:linear-gradient(180deg,var(--pt-yellow),var(--pt-yellow-2));color:var(--pt-ink);font-family:inherit;font-weight:700;font-size:16px;min-height:52px;padding:0 20px;box-shadow:var(--pt-go-shadow);cursor:pointer;text-decoration:none}
.pt .pt-go{color:var(--pt-ink)}
.pt-go:hover{filter:brightness(1.04);box-shadow:0 8px 20px 0 rgba(217,106,24,0.34)}
.pt-go[disabled],.pt-go[aria-disabled="true"]{opacity:0.55;cursor:not-allowed;filter:none}
.pt-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--pt-edge);border-radius:var(--pt-btn-radius);background:var(--pt-card);color:var(--pt-deep);font-family:inherit;font-weight:700;font-size:14px;min-height:var(--pt-tap);padding:0 16px;cursor:pointer;text-decoration:none}
.pt .pt-btn{color:var(--pt-deep)}
.pt-btn:hover{border-color:var(--pt-teal);background:#f7fafa}
.pt-pick{position:relative}
.pt-pick>summary{list-style:none;justify-content:space-between;min-height:48px;font-size:15px}
.pt-pick>summary::-webkit-details-marker{display:none}
.pt-pick-list{position:absolute;left:0;right:0;top:54px;z-index:15;background:var(--pt-card);border-radius:var(--pt-card-radius);box-shadow:0 10px 30px 0 rgba(14,54,59,0.22);padding:6px 0;max-height:360px;overflow:auto}
.pt-pick-list a{display:flex;align-items:center;min-height:var(--pt-tap);padding:0 16px;font-weight:600;color:var(--pt-ink);text-decoration:none}
.pt-pick-list a:hover{background:var(--pt-ground);text-decoration:underline}
.pt-pick-list a[aria-current="true"]{color:var(--pt-deep);font-weight:800}

/* the dark panel */
.pt-panel{background:linear-gradient(135deg,var(--pt-deep),var(--pt-deeper));border-radius:var(--pt-panel-radius);box-shadow:var(--pt-panel-shadow);padding:20px;color:#fff;display:flex;flex-direction:column;gap:14px}
.pt-panel-top{display:flex;align-items:flex-end;gap:12px}
.pt-big{font-size:64px;font-weight:800;line-height:0.9;letter-spacing:-0.04em}
.pt-big-sub{font-size:15px;font-weight:600;color:var(--pt-aqua);padding-bottom:4px}
.pt-today{display:flex;flex-direction:column;gap:10px}
.pt-today a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:#fff;background:rgba(255,255,255,0.10);border-radius:var(--pt-btn-radius);padding:12px 14px;min-height:var(--pt-tap)}
.pt .pt-today a{color:#fff}
.pt-today a:hover{background:rgba(255,255,255,0.16)}
.pt-today-name{font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pt-panel-none{font-size:14px;color:#d8eeee}
.pt-hero{gap:8px;align-items:flex-start}
.pt-hero-name{font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.pt-hero-what{font-size:15px;font-weight:600;color:var(--pt-aqua)}
.pt-hero-guest{font-size:14px;color:#fff}

/* status pills */
.pt-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pt-pill-ready{background:var(--pt-green-bg);color:var(--pt-green-ink)}
.pt-pill-sched{background:var(--pt-tint);color:var(--pt-deep)}
.pt-pill-tbc{background:var(--pt-amber-bg);color:var(--pt-amber-ink)}
.pt-pill-qc{background:var(--pt-qc-bg);color:var(--pt-qc-ink)}
.pt-pill-grey{background:var(--pt-chip);color:var(--pt-text)}

/* the six tiles */
.pt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-tile{background:var(--pt-card);border-radius:var(--pt-card-radius);box-shadow:var(--pt-card-shadow);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:112px;min-width:0}
a.pt-tile:hover{box-shadow:0 6px 18px 0 rgba(14,54,59,0.14)}
a.pt-tile:hover .pt-tile-title{text-decoration:underline}
.pt-ico{width:38px;height:38px;border-radius:var(--pt-btn-radius);background:var(--pt-tint);display:flex;align-items:center;justify-content:center;flex:none}
.pt-ico svg{width:20px;height:20px;fill:none;stroke:var(--pt-teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-ico-peach{background:var(--pt-peach-bg)}
.pt-ico-peach svg{stroke:var(--pt-peach-ink)}
.pt-ico-amber{background:var(--pt-amber-bg)}
.pt-ico-amber svg{stroke:var(--pt-amber-ink)}
.pt-ico-green{background:var(--pt-green-bg)}
.pt-ico-green svg{stroke:var(--pt-green-ink)}
.pt-tile-title{font-size:17px;font-weight:700;color:var(--pt-ink);letter-spacing:-0.015em}
.pt-tile-sub{font-size:13px;color:var(--pt-soft)}
/* Coming soon: quieter, flat, not a link */
.pt-soon{background:transparent;box-shadow:none;border:1px dashed var(--pt-edge);cursor:default}
.pt-soon .pt-ico{background:var(--pt-chip)}
.pt-soon .pt-ico svg{stroke:#9aa3a9}
.pt-soon .pt-tile-title{color:#7d868c}
.pt-soon-tag{display:inline-block;align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--pt-chip);color:var(--pt-soft);font-size:12px;font-weight:600}

/* cards and rows */
.pt-card{background:var(--pt-card);border-radius:var(--pt-card-radius);box-shadow:var(--pt-card-shadow)}
.pt-card-pad{padding:16px;display:flex;flex-direction:column;gap:12px}
.pt-card-head{padding:14px 16px;border-bottom:1px solid var(--pt-line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.pt-row{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;border-bottom:1px solid var(--pt-line);min-height:var(--pt-tap)}
.pt-row:last-child{border-bottom:none}
a.pt-row:hover{background:#f8fafa}
a.pt-row:hover .pt-row-title{text-decoration:underline}
.pt-row-main{flex:1;min-width:0}
.pt-row-title{font-size:15px;font-weight:700;color:var(--pt-ink)}
.pt-row-sub{font-size:13px;color:var(--pt-soft)}
.pt-row-qc{font-size:13px;color:var(--pt-text);margin-top:2px}
.pt-chev{width:18px;height:18px;flex:none;fill:none;stroke:var(--pt-soft);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-empty{padding:14px 16px;color:var(--pt-soft)}
.pt-kv{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--pt-line)}
.pt-kv:last-child{border-bottom:none}
.pt-kv-k{color:var(--pt-soft)}
.pt-kv-v{font-weight:600;color:var(--pt-ink);text-align:right}

/* the List and Calendar switch */
.pt-seg{display:flex;background:var(--pt-chip);border-radius:999px;padding:4px}
.pt-seg a{flex:1;min-height:var(--pt-tap);border-radius:999px;color:var(--pt-ink);font-weight:700;font-size:14px;padding:0 20px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.pt-seg a:hover{text-decoration:underline}
.pt-seg a[aria-current="page"]{background:var(--pt-deep);color:#fff}

/* the month, phone */
.pt-cal{padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px}
.pt-cal-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.pt-cal-month{font-size:19px;font-weight:800;color:var(--pt-ink);letter-spacing:-0.02em}
.pt-cal-nav{width:var(--pt-tap);height:var(--pt-tap);border:none;background:var(--pt-chip);border-radius:var(--pt-btn-radius);color:var(--pt-deep);display:flex;align-items:center;justify-content:center;text-decoration:none}
.pt-cal-nav svg,.pt-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-cal-nav:hover{background:var(--pt-tint)}
.pt-cal-nav[aria-disabled="true"]{opacity:0.35;pointer-events:none}
.pt-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:12.5px;font-weight:600;color:var(--pt-soft)}
.pt-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pt-day{height:52px;border-radius:var(--pt-btn-radius);color:var(--pt-ink);font-size:15px;font-weight:450;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none}
.pt .pt-day{color:var(--pt-ink)}
.pt-day:hover{background:var(--pt-ground)}
.pt-day.has{font-weight:700}
.pt-day.today{box-shadow:inset 0 0 0 2px var(--pt-yellow)}
.pt-day.on{background:var(--pt-deep);color:#fff}
.pt .pt-day.on{color:#fff}
.pt-dots{display:flex;gap:3px;height:7px;align-items:center;font-size:11px;font-weight:800;line-height:7px}
.pt-dot{width:7px;height:7px;border-radius:999px;display:inline-block}
.pt-dot-sched{background:var(--pt-dot-scheduled)}
.pt-dot-tbc{background:var(--pt-dot-tbc)}
.pt-dot-qc{background:var(--pt-dot-qc)}
.pt-dot-done{background:var(--pt-dot-done)}
.pt-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--pt-text);padding:4px 4px 0}
.pt-legend .pt-dot{width:8px;height:8px}

/* the month, desktop (drawn from 900 wide) */
.pt-month{overflow:hidden}
.pt-mdows{display:grid;grid-template-columns:repeat(7,1fr);background:var(--pt-chip)}
.pt-mdows div{padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--pt-text)}
.pt-mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--pt-line)}
.pt-mcell{background:var(--pt-card);min-height:104px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pt-mcell.out{background:var(--pt-ground)}
.pt-mnum{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;font-size:14px;font-weight:700;color:var(--pt-ink);text-decoration:none}
.pt .pt-mnum{color:var(--pt-ink)}
a.pt-mnum:hover{background:var(--pt-ground);text-decoration:underline}
.pt-mnum.today{background:var(--pt-yellow)}
.pt-bar{display:block;text-decoration:none;border-radius:6px;padding:4px 8px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-bar:hover{text-decoration:underline}
.pt .pt-bar-sched{background:var(--pt-tint);color:var(--pt-deep)}
.pt .pt-bar-tbc{background:var(--pt-amber-bg);color:var(--pt-amber-ink)}
.pt .pt-bar-qc{background:var(--pt-qc-bg);color:var(--pt-qc-ink)}
.pt .pt-bar-done{background:var(--pt-green-bg);color:var(--pt-green-ink)}

/* tables (desktop) */
.pt-table{width:100%;border-collapse:collapse}
.pt-table th{text-align:left;padding:12px 16px;font-size:12.5px;font-weight:600;color:var(--pt-text);background:var(--pt-chip)}
.pt-table td{padding:14px 16px;border-top:1px solid var(--pt-line);font-size:14px;color:var(--pt-text);vertical-align:middle}
.pt-table td a.pt-home{font-weight:700;color:var(--pt-ink);text-decoration:none}
.pt-table td a.pt-home:hover{text-decoration:underline}
.pt-table-foot{padding:14px 20px;border-top:1px solid var(--pt-line);font-size:13px;color:var(--pt-soft)}
.pt-card-title{padding:16px 20px;display:flex;align-items:center;gap:12px}
.pt-card-title .pt-h2w{font-size:24px;font-weight:700;color:var(--pt-ink);letter-spacing:-0.025em;flex:1;margin:0}
.pt-card-title .pt-ico{width:40px;height:40px;background:var(--pt-deep)}
.pt-card-title .pt-ico svg{stroke:#fff}

/* stat cards (desktop Home) */
.pt-stats{grid-template-columns:1.1fr 1fr 1fr 1fr;gap:22px}
.pt-stat{background:var(--pt-card);border-radius:var(--pt-card-radius);box-shadow:var(--pt-card-shadow);padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
a.pt-stat:hover{box-shadow:0 6px 18px 0 rgba(14,54,59,0.14)}
a.pt-stat:hover .pt-stat-label{text-decoration:underline}
.pt-stat-n{font-size:36px;font-weight:800;color:var(--pt-ink);letter-spacing:-0.035em;line-height:1}
.pt-stat-label{font-size:12.5px;font-weight:600;color:var(--pt-text)}
.pt-stat-sub{font-size:11.5px;color:var(--pt-soft)}
.pt-stat.pt-soon{background:transparent}

/* forms */
.pt-form{display:flex;flex-direction:column;gap:12px;padding:20px}
.pt-label{font-size:14px;font-weight:700;color:var(--pt-ink)}
.pt-in{width:100%;min-height:48px;border:1px solid var(--pt-edge);border-radius:var(--pt-btn-radius);padding:0 14px;font:inherit;font-size:16px;color:var(--pt-ink);background:#fff}
.pt-in:focus{border-color:var(--pt-teal);outline:3px solid rgba(29,110,119,0.25);outline-offset:0}
textarea.pt-in{min-height:96px;padding:10px 14px}
.pt-err{background:#fdecea;color:#8a2a1c;border-radius:var(--pt-btn-radius);padding:10px 14px;font-weight:600}
.pt-ok{background:var(--pt-green-bg);color:var(--pt-green-ink);border-radius:var(--pt-btn-radius);padding:10px 14px;font-weight:600}
.pt-quiet-link{font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.pt-sign{max-width:460px;width:100%;margin:24px auto 0}
.pt-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-contents{display:contents}
.pt-brand .pt-wide{display:none}

@media (min-width:900px){
  .pt-head{padding:12px 40px;gap:24px}
  .pt-brand{flex:none;font-size:20px}
  .pt-head .pt-back{display:none}
  .pt-nav{display:flex;flex:1;gap:4px}
  .pt-nav a{text-decoration:none;color:#fff;font-weight:500;font-size:15px;padding:0 14px;min-height:44px;display:flex;align-items:center;border-radius:var(--pt-btn-radius)}
  .pt .pt-nav a{color:#fff}
  .pt-nav a:hover{background:rgba(255,255,255,0.08);text-decoration:underline}
  .pt-nav a[aria-current="page"]{font-weight:700;background:rgba(255,255,255,0.12)}
  .pt-head .pt-pick>summary{background:rgba(255,255,255,0.12);border:none;color:#fff;min-height:44px}
  .pt-head .pt-pick-list{left:auto;right:0;width:320px}
  .pt-main{padding:32px 40px;gap:22px}
  .pt-phone{display:none}
  .pt-wide{display:block}
  .pt-wide.pt-stats,.pt-wide.pt-tiles-wide{display:grid}
  .pt-wide.pt-cal-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .pt-wide.pt-wide-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .pt-tiles-wide{grid-template-columns:repeat(3,1fr);gap:22px}
  .pt-title{font-size:40px;letter-spacing:-0.035em;line-height:1.02}
  .pt-panel{padding:22px;gap:12px}
  .pt-sign{margin-top:48px}
  .pt-pick-body{display:none}
  .pt-brand .pt-wide{display:inline}
  .pt-photos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:899px){
  .pt-head .pt-pick{display:none}
}
/* Session 483: the sign-in pages say Howdy, with "by" and the company's name small beneath (the setting's long name, never typed). */
.pt-brand-two{display:flex;flex-direction:column;line-height:1.1;gap:2px}
.pt-brand-by{font-size:12px;font-weight:600;letter-spacing:0;color:#6fd5d4;white-space:nowrap}

/* Session 483 (briefs/session-483-brief.md; mockups 07 Request a service and 08 My home, and 01's one deep clean line). Their inline styles, named here.
   Desktop: the phone designs in the portal's desktop frame (the request form 640 wide, a home's sections in two columns). */
:root{ --pt-field-radius:6px; --pt-opt-min:64px; --pt-opt-pad:12px 14px; --pt-opt-ring:inset 0 0 0 2px var(--pt-deep); --pt-label-size:12.5px; --pt-hero-name:28px }
/* 01: Home's one amber line */
.pt-due{display:flex;align-items:center;gap:12px;background:var(--pt-amber-bg);border-radius:var(--pt-card-radius);padding:var(--pt-opt-pad);text-decoration:none;min-height:var(--pt-tap)}
.pt-due-ico{width:38px;height:38px;border-radius:var(--pt-btn-radius);background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pt-due-ico svg,.pt-due-chev{width:20px;height:20px;fill:none;stroke:var(--pt-amber-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-due-chev{width:18px;height:18px;flex:none}
.pt-due-words{flex:1;font-size:14px;font-weight:600;color:var(--pt-amber-ink)}
.pt .pt-due:hover .pt-due-words{text-decoration:underline}
/* 07: Request a service */
.pt-req{display:flex;flex-direction:column;gap:var(--pt-gap);width:100%}
.pt-req-q{font-size:17px;font-weight:700;color:var(--pt-ink);padding:0 4px;margin:0}
.pt-opts{display:flex;flex-direction:column;gap:8px}
.pt-opt{position:relative;display:flex;align-items:center;gap:12px;text-align:left;background:var(--pt-card);border-radius:var(--pt-card-radius);padding:var(--pt-opt-pad);min-height:var(--pt-opt-min);border:1px solid var(--pt-line);cursor:pointer;width:100%}
.pt-opt:hover{border-color:var(--pt-teal)}
.pt-opt:has(.pt-opt-in:checked){box-shadow:var(--pt-opt-ring);border-color:transparent}
.pt-opt:focus-within{outline:3px solid var(--pt-orange);outline-offset:2px}
.pt-opt-in{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pt-opt-words{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-opt-name{font-size:15px;font-weight:700;color:var(--pt-ink)}
.pt-opt-line,.pt-opt-reply{font-size:13px;color:var(--pt-soft)}
.pt-opt-reply{font-style:normal;color:var(--pt-amber-ink);font-weight:600}
.pt-opt-price{font-size:13px;font-weight:700;color:var(--pt-deep);white-space:nowrap}
.pt-fields{padding:var(--pt-pad);display:flex;flex-direction:column;gap:16px}
.pt-fld{display:flex;flex-direction:column;gap:6px;font-size:var(--pt-label-size);font-weight:600;color:var(--pt-text)}
.pt-fin{min-height:48px;border:1px solid var(--pt-edge);border-radius:var(--pt-field-radius);padding:0 12px;font-size:16px;font-family:inherit;color:var(--pt-ink);background:#fff;width:100%;font-weight:450}
.pt-fin:focus{border-color:var(--pt-teal);outline:3px solid rgba(29,110,119,0.25);outline-offset:0}
.pt-fta{padding:12px;resize:vertical;min-height:72px;line-height:1.4}
.pt-fhint{font-size:12.5px;font-weight:450;color:var(--pt-soft)}
.pt-under{font-size:13px;color:var(--pt-soft);text-align:center}
.pt-wait{background:var(--pt-amber-bg);border-radius:var(--pt-btn-radius);padding:10px 12px;font-size:13px;color:var(--pt-amber-ink);font-weight:600}
.pt-beds{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pt-beds legend{padding:0 0 6px}
.pt-bed{gap:4px}
.pt-kv-chg .pt-kv-v{display:flex;flex-direction:column;gap:2px}
.pt-was{font-weight:450;color:var(--pt-soft)}
/* 08: a home */
.pt-home{display:flex;flex-direction:column;gap:var(--pt-gap)}
.pt-hpick{justify-content:space-between;min-height:48px;font-size:15px;width:100%}
.pt-hhero{padding:20px;display:flex;flex-direction:column;gap:6px;color:#fff}
.pt-hhero-name{font-size:var(--pt-hero-name);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.pt .pt-hhero-addr{color:var(--pt-aqua);font-size:15px;font-weight:600;display:inline-flex;align-items:center;min-height:var(--pt-tap);align-self:flex-start}   /* 44 px to tap */
.pt-hhero-facts{font-size:14px}
.pt-sec{background:var(--pt-card);border-radius:var(--pt-card-radius);box-shadow:var(--pt-card-shadow);padding:var(--pt-pad);display:flex;flex-direction:column;gap:10px}
.pt-sec-head{display:flex;align-items:center;gap:12px}
.pt-sec-t{flex:1;font-size:17px;font-weight:700;color:var(--pt-ink);margin:0}
.pt-sec-btn{min-height:var(--pt-tap);white-space:nowrap}
.pt-srow{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.pt-srow-k{color:var(--pt-soft);flex:none}
.pt-srow-v{color:var(--pt-ink);font-weight:600;text-align:right;overflow-wrap:anywhere}
.pt .pt-btn-dark{background:var(--pt-deep);color:#fff;border:none;min-height:48px}
.pt .pt-btn-dark:hover{background:var(--pt-deeper);color:#fff}
@media (max-width:420px){ .pt-sec-btn{padding:0 12px} }
@media (min-width:900px){
  .pt-req{max-width:640px;margin:0 auto}
  .pt-wide.pt-wide-stack{display:flex;flex-direction:column;gap:var(--pt-gap)}
  .pt-home{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .pt-home>.pt-hhero,.pt-home>.pt-hpicker,.pt-home>.pt-ok,.pt-home>.pt-under{grid-column:1 / -1}
  .pt-hpicker{max-width:360px}
}

/* Session 487: Notifications, the person's own email choices (client-portal.mjs notificationsBody). */
.pt-nt-intro{margin:0;color:var(--pt-text)}
.pt-nt-form{display:flex;flex-direction:column;gap:18px}
.pt-nt-to{margin:0;color:var(--pt-text);overflow-wrap:anywhere}
.pt-nt-to b{color:var(--pt-ink)}
.pt-nt-grp{display:flex;flex-direction:column;gap:8px}
.pt-nt-chks,.pt-nt-segs,.pt-nt-opts{display:flex;flex-wrap:wrap;gap:8px}
.pt-nt-chk,.pt-nt-seg,.pt-nt-opt{position:relative;display:inline-flex;align-items:center;min-height:var(--pt-tap);cursor:pointer}
.pt-nt-chk input,.pt-nt-seg input,.pt-nt-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pt-nt-chk span,.pt-nt-seg span,.pt-nt-opt span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--pt-edge);background:var(--pt-card);color:var(--pt-text);font-weight:600}
.pt-nt-chk input:checked+span,.pt-nt-seg input:checked+span,.pt-nt-opt input:checked+span{border-color:var(--pt-teal);background:var(--pt-tint);color:var(--pt-deep)}
.pt-nt-chk input:focus-visible+span,.pt-nt-seg input:focus-visible+span,.pt-nt-opt input:focus-visible+span{outline:3px solid var(--pt-orange);outline-offset:2px}
.pt-nt-chk input:disabled+span,.pt-nt-seg input:disabled+span,.pt-nt-opt input:disabled+span{cursor:default;opacity:.75}
.pt-nt-chk span:hover,.pt-nt-seg span:hover,.pt-nt-opt span:hover{border-color:var(--pt-teal)}
.pt-nt-ev{border:none;border-top:1px solid var(--pt-line);margin:0;padding:12px 0 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.pt-nt-ev legend{padding:0;display:flex;flex-direction:column;gap:2px;float:left;width:100%}
.pt-nt-ev legend+*{clear:both}
.pt-nt-ev-name{font-weight:700;color:var(--pt-ink);font-size:15px}
.pt-nt-ev-when{font-size:13px;color:var(--pt-soft)}
.pt-nt-save{align-self:flex-start;min-width:140px}
@media (min-width:900px){ .pt-nt{max-width:860px} .pt-nt-ev{flex-direction:row;align-items:center;gap:16px} .pt-nt-ev legend{float:none;width:auto;flex:1} .pt-nt-ev legend+*{clear:none} }

/* Session 491 (briefs/session-491-brief.md Part 1): Invoices and reports. The two approved phone mockups (howdy-invoices-phone-v1, howdy-why-this-fee-phone-v1)
   are the specification: the Due now card (the panel's gradient, 20 padding, 6 gap, 44 px 800 figure), the list rows (14 by 16, the 1 px divider: .pt-row), the
   yellow Make a report (52 high: .pt-go), the fee card (16 padding, 12 gap, the 24 px name and amount). From 900 wide: two columns, Howdy's own wide pattern. */
.pt-bill,.pt-bill-a,.pt-bill-b,.pt-bill-one{display:flex;flex-direction:column;gap:var(--pt-gap)}
.pt-due-card{gap:6px}
.pt-due-label{font-size:15px;font-weight:600;color:var(--pt-aqua)}
.pt-due-amt{font-size:44px;font-weight:800;letter-spacing:-0.04em;line-height:1;color:#fff}
.pt-due-line{font-size:14px;color:#fff}
.pt-pill-due{background:var(--pt-peach-bg);color:var(--pt-peach-ink)}
.pt-pill-paid{background:var(--pt-green-bg);color:var(--pt-green-ink)}
.pt-bill-line{border-bottom:none}
.pt-bill-go{min-height:52px;padding:0 20px;box-shadow:var(--pt-go-shadow);text-decoration:none}
.pt-go-ico{width:20px;height:20px;fill:none;stroke:var(--pt-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-amt{font-size:15px;font-weight:700;color:var(--pt-ink);white-space:nowrap}
.pt-sub-head{padding:12px 16px 4px;font-size:13px;font-weight:700;color:var(--pt-soft);text-transform:none}
.pt-fee{padding:16px;display:flex;flex-direction:column;gap:12px}
.pt-fee-head{display:flex;align-items:center;gap:12px}
.pt-ico-peach{background:var(--pt-peach-bg)}
.pt-ico-peach svg{stroke:var(--pt-peach-ink)}
.pt-fee-kicker{font-size:12.5px;font-weight:600;color:var(--pt-soft)}
.pt-fee-name{font-size:24px;font-weight:700;color:var(--pt-ink);letter-spacing:-0.025em;line-height:1.2;overflow-wrap:anywhere}
.pt-fee-amt{font-size:24px;font-weight:800;color:var(--pt-ink);white-space:nowrap}
.pt-fee-p{margin:0;font-size:15px;color:var(--pt-ink)}
.pt-fee-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-fee-photo{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#c9dedd}
.pt-fee-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pt-fee-tag{position:absolute;left:8px;bottom:8px;background:#fff;border-radius:6px;padding:2px 8px;font-size:12.5px;font-weight:600;color:var(--pt-ink)}
.pt-btn-ico{width:18px;height:18px;fill:none;stroke:var(--pt-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-agr{padding:8px 16px 16px}
.pt-agr p{margin:0 0 10px;color:var(--pt-ink);font-size:15px}
.pt-agr-h{margin:14px 0 6px;scroll-margin-top:16px}
.pt-rep-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pt-rep-pick .pt-in{width:auto;min-width:120px}
.pt-rep-scroll{overflow-x:auto}
.pt-rep-table{border-collapse:collapse;width:100%;font-size:13px}
.pt-rep-table th,.pt-rep-table td{padding:8px 6px;border-bottom:1px solid var(--pt-line);text-align:right;white-space:nowrap;color:var(--pt-ink);font-weight:500}
.pt-rep-table thead th{color:var(--pt-soft);font-weight:600}
.pt-rep-table tbody th{text-align:left;font-weight:700;white-space:normal;min-width:120px}
@media (min-width:900px){
  .pt-bill{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:22px}
  .pt-bill-one{max-width:860px}
  .pt-fee-photos{grid-template-columns:repeat(3,1fr)}
}
@media print{
  .pt-head,.pt-stripe,.pt-band,.pt-rep-pick,.pt-note{display:none}
  body.pt{background:#fff}
  .pt-card,.pt-panel{box-shadow:none;border:1px solid var(--pt-line)}
  .pt-due-card{background:#fff;color:var(--pt-ink)}
  .pt-due-card .pt-due-amt,.pt-due-card .pt-due-line{color:var(--pt-ink)}
  .pt-due-card .pt-due-label{color:var(--pt-soft)}
  .pt-rep-scroll{overflow:visible}
}