/* A nowrap button is a width FLOOR, and the floor moves with the language.
   "Message the front desk" fits a 320 phone; its Spanish counterpart, "Mandar
   mensaje al consultorio", measures 297px and forced both portal panes to
   335px inside a 320 viewport, so the whole page took a horizontal scrollbar.
   Letting the label wrap at phone widths fixes it for EVERY language rather
   than for the one string that happened to expose it, which is the point: the
   next translation is not going to be shorter. Scoped to the portal panes so
   the marketing site's buttons keep their single-line shape. */
@media (max-width:400px){
  .pp-side .btn,.pp-main .btn{white-space:normal;line-height:1.3}
  /* Same shape as the button rule above it, found the same way: a nowrap label that
     only the longer Spanish string outgrows. "REVISAR EN LA PRÓXIMA VISITA" measures
     202px against an English "REVIEW AT NEXT VISIT" that fits, and pushed the
     Spanish portal 40px wide at 320. Wrapping the pill fixes it for every future
     language rather than for the one string that exposed it. */
  .pp-pill{white-space:normal}
}

/* ============================================================
   RIDGEVIEW PORTALS · the patient home + the team console
   Rides on ridgeview.css tokens. Everything here is pp- scoped.
   ============================================================ */
body{background:var(--porcelain)}
.pp-ribbon{
  position:sticky;top:0;z-index:120;
  background:var(--ink-deepest);color:rgba(250,247,241,0.72);
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  display:flex;justify-content:center;align-items:center;gap:0.9rem;flex-wrap:wrap;
  padding:0.6rem 1rem;text-align:center;
}
.pp-ribbon strong{color:var(--teal-bright);font-weight:500}
.pp-ribbon a{color:var(--porcelain);border-bottom:1px solid rgba(250,247,241,0.35);padding-bottom:1px}
.pp-ribbon a:hover{border-bottom-color:var(--porcelain)}
.pp-ribbon .csep{opacity:0.4}

.pp-shell{display:grid;grid-template-columns:288px minmax(0,1fr);align-items:start}
.pp-side{
  position:sticky;top:0;height:100vh;overflow:auto;
  background:var(--paper);border-right:1px solid var(--hairline-soft);
  padding:1.8rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:1.5rem;
}
.pp-side--ink{background:var(--ink);border-right-color:transparent}
.pp-side .logo{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);letter-spacing:-0.01em}
.pp-side .logo .mono{font-size:0.6rem;letter-spacing:0.2em;color:var(--pine);margin-left:0.3rem}
.pp-side--ink .logo{color:var(--porcelain)}
.pp-side--ink .logo .mono{color:var(--teal-bright)}
.pp-console-tag{font-family:var(--font-mono);font-size:0.56rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,247,241,0.45);margin-top:0.4rem}

.pp-id{display:flex;align-items:center;gap:0.9rem;padding:0.95rem 1rem;border:1px solid var(--hairline-soft);border-radius:16px;background:var(--porcelain)}
.pp-side--ink .pp-id{background:rgba(250,247,241,0.06);border-color:rgba(250,247,241,0.12)}
.pp-id__avatar{
  width:50px;height:62px;flex:none;border-radius:999px 999px 10px 10px;
  background:var(--ink);color:var(--teal-bright);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-mono);font-size:0.85rem;letter-spacing:0.05em;
}
.pp-id__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pp-side--ink .pp-id__avatar{background:var(--porcelain);color:var(--pine)}
.pp-id__name{font-weight:600;color:var(--ink);font-size:0.94rem;line-height:1.3}
.pp-side--ink .pp-id__name{color:var(--porcelain)}
.pp-id__chip{
  display:inline-block;margin-top:0.35rem;
  font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pine);border:1px solid rgba(23,126,112,0.35);border-radius:999px;padding:0.18rem 0.55rem;
}
.pp-side--ink .pp-id__chip{color:var(--teal-bright);border-color:rgba(43,164,145,0.45)}
/* 0.55rem is 8.8px, the smallest type anywhere on the site and well under the
   9.6-10.2px the mono micro-register otherwise holds to. It names the patient's
   insurance plan, which is not decoration. Phones only; the desktop sidebar is
   read at arm's length on a large screen and keeps its finer setting. */
@media (max-width:900px){.pp-id__chip{font-size:0.66rem}}

.pp-nav{display:flex;flex-direction:column;gap:0.2rem}
.pp-nav button{
  display:flex;align-items:center;gap:0.75rem;width:100%;text-align:left;
  padding:0.7rem 0.9rem;border-radius:12px;font-size:0.9rem;color:var(--body-soft);
  transition:background 0.3s ease,color 0.3s ease;
}
.pp-side--ink .pp-nav button{color:rgba(250,247,241,0.65)}
.pp-nav button .mono{font-size:0.58rem;letter-spacing:0.1em;color:var(--body-faint);width:1.4rem;flex:none}
.pp-nav button:hover{background:var(--mist);color:var(--ink)}
.pp-side--ink .pp-nav button:hover{background:rgba(250,247,241,0.08);color:var(--porcelain)}
.pp-nav button[aria-current="true"]{background:var(--ink);color:var(--porcelain)}
.pp-side--ink .pp-nav button[aria-current="true"]{background:var(--porcelain);color:var(--ink)}
.pp-nav button[aria-current="true"] .mono{color:var(--teal-bright)}
.pp-side--ink .pp-nav button[aria-current="true"] .mono{color:var(--pine)}

.pp-side__foot{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--hairline-soft);display:flex;flex-direction:column;gap:0.55rem;font-size:0.78rem;color:var(--body-faint)}
.pp-side--ink .pp-side__foot{border-top-color:rgba(250,247,241,0.12);color:rgba(250,247,241,0.45)}
.pp-side__foot a{color:var(--pine)}
.pp-side--ink .pp-side__foot a{color:var(--teal-bright)}
.pp-side__foot .pp-out{color:var(--coral-deep)}
.pp-side--ink .pp-side__foot .pp-out{color:var(--coral)}

.pp-main{padding:clamp(1.7rem,3.4vw,2.9rem) clamp(1.2rem,4vw,3.2rem) clamp(3rem,6vw,4.5rem);max-width:1240px;width:100%}
.pp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1.3rem;flex-wrap:wrap;margin-bottom:1.9rem}
.pp-top h1{font-size:clamp(1.85rem,3.4vw,2.6rem);line-height:1.08}
.pp-top h1 em{font-style:italic;color:var(--pine)}
.pp-top__date{margin-top:0.55rem;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--body-faint)}
.pp-actions{display:flex;gap:0.65rem;flex-wrap:wrap}

.pp-panel[hidden]{display:none}
.pp-grid{display:grid;gap:1.25rem;margin-bottom:1.25rem}
.pp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-card{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:20px;
  padding:1.55rem 1.65rem 1.5rem;box-shadow:var(--shadow-soft);position:relative;min-width:0;
  animation:ppRise 0.7s var(--ease-out) both;
}
.pp-grid > *:nth-child(2){animation-delay:0.06s}
.pp-grid > *:nth-child(3){animation-delay:0.12s}
.pp-grid > *:nth-child(4){animation-delay:0.18s}
@keyframes ppRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pp-card--ink{
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(43,164,145,0.18), transparent 62%),
    var(--ink);
  border-color:transparent;color:rgba(250,247,241,0.8);
}
.pp-card--ink h2,.pp-card--ink h3,.pp-card--ink .pp-big{color:var(--porcelain)}
.pp-kicker{
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--pine);margin-bottom:0.95rem;display:flex;align-items:center;gap:0.55rem;
}
.pp-kicker::before{content:"";width:1.2rem;height:1px;background:var(--teal);flex:none}
.pp-card--ink .pp-kicker{color:var(--teal-bright)}
.pp-big{font-family:var(--font-display);font-size:clamp(1.45rem,2.4vw,1.9rem);color:var(--ink);line-height:1.14;font-weight:420}
.pp-big em{font-style:italic;color:var(--pine)}
.pp-card--ink .pp-big em{color:var(--teal-bright)}
.pp-sub{margin-top:0.6rem;font-size:0.88rem;line-height:1.68;color:var(--body-soft)}
.pp-card--ink .pp-sub{color:rgba(250,247,241,0.65)}
.pp-cardfoot{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--hairline-soft);display:flex;gap:0.9rem;flex-wrap:wrap;align-items:center}
.pp-card--ink .pp-cardfoot{border-top-color:rgba(250,247,241,0.14)}
.pp-link{
  font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--coral-deep);border-bottom:1px solid rgba(231,111,81,0.4);padding-bottom:2px;cursor:pointer;
  background:none;border-top:0;border-left:0;border-right:0;
}
.pp-link:hover{border-bottom-color:var(--coral-deep)}
.pp-card--ink .pp-link{color:var(--coral)}

.pp-pill{
  display:inline-block;font-family:var(--font-mono);font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:999px;padding:0.24rem 0.62rem;border:1px solid var(--hairline);color:var(--body-faint);white-space:nowrap;
}
.pp-pill--done{color:var(--pine);border-color:rgba(23,126,112,0.4);background:rgba(23,126,112,0.08)}
.pp-pill--due{color:var(--coral-deep);border-color:rgba(231,111,81,0.45);background:rgba(231,111,81,0.08)}
.pp-card--ink .pp-pill--done{color:var(--teal-bright);border-color:rgba(43,164,145,0.5);background:rgba(43,164,145,0.12)}

.pp-track{height:10px;border-radius:999px;background:var(--mist);overflow:hidden;margin:1rem 0 0.55rem}
.pp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--pine));width:0;transition:width 1.4s var(--ease-out)}
.pp-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.06em;color:var(--body-faint)}

.pp-rows{list-style:none;margin:0;padding:0}
.pp-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.72rem 0;border-bottom:1px dashed var(--hairline-soft);font-size:0.86rem;color:var(--body-soft)}
.pp-rows li:last-child{border-bottom:0}
.pp-rows .num{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink);white-space:nowrap}
.pp-rows strong{color:var(--ink);font-weight:600}
.pp-rows .pp-when{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--body-faint)}

.pp-thread{display:flex;flex-direction:column;gap:0.85rem;max-width:660px}
.pp-msg{max-width:82%;padding:0.85rem 1.05rem;border-radius:16px;font-size:0.9rem;line-height:1.6;color:var(--ink)}
.pp-msg--in{background:var(--mist);border-bottom-left-radius:4px;align-self:flex-start}
.pp-msg--out{background:var(--ink);color:var(--porcelain);border-bottom-right-radius:4px;align-self:flex-end}
.pp-msg__meta{display:block;margin-top:0.45rem;font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.6}
.pp-compose{display:flex;gap:0.65rem;margin-top:1.2rem;max-width:660px}
.pp-compose input{
  flex:1;min-width:0;border:1px solid var(--hairline);border-radius:999px;
  padding:0.8rem 1.2rem;font:inherit;font-size:0.9rem;background:var(--paper);color:var(--ink);
}
.pp-compose input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.pp-send{
  flex:none;background:var(--coral);color:var(--ink-deepest);border-radius:999px;
  padding:0.8rem 1.5rem;font-weight:600;font-size:0.88rem;
  transition:transform 0.3s var(--ease-out),background 0.3s ease,color 0.3s ease;
}
.pp-send:hover{transform:translateY(-1px);background:var(--coral-deep);color:var(--porcelain)}
.pp-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem}
.pp-chip{
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid var(--hairline);border-radius:999px;padding:0.4rem 0.8rem;color:var(--body-soft);
  transition:border-color 0.3s ease,color 0.3s ease;
}
.pp-chip:hover{border-color:var(--teal);color:var(--pine)}

.pp-stat .pp-stat__num{font-family:var(--font-mono);font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--ink);letter-spacing:-0.01em}
.pp-stat .pp-stat__label{margin-top:0.4rem;font-size:0.8rem;line-height:1.55;color:var(--body-faint)}
.pp-stat .pp-stat__delta{margin-top:0.65rem;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pine)}

.pp-table-wrap{overflow-x:auto}
.pp-table{width:100%;border-collapse:collapse;font-size:0.86rem;min-width:560px}
.pp-table th{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--body-faint);font-weight:400;text-align:left;padding:0.45rem 0.6rem;border-bottom:1px solid var(--hairline)}
.pp-table td{padding:0.7rem 0.6rem;border-bottom:1px dashed var(--hairline-soft);color:var(--body-soft)}
.pp-table td:first-child{color:var(--ink);font-weight:500}
.pp-table .num{font-family:var(--font-mono);font-size:0.78rem;white-space:nowrap}

.pp-filter{
  width:100%;max-width:380px;border:1px solid var(--hairline);border-radius:999px;
  padding:0.75rem 1.2rem;font:inherit;font-size:0.9rem;background:var(--paper);color:var(--ink);margin-bottom:1.1rem;
}
.pp-filter:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Same iOS auto-zoom rule as the what-it-costs selects: any control under 16px
   zooms the page on focus. The patient filter and both message composers are the
   only typing surfaces in either console, so this is all of them. */
@media (max-width:900px){.pp-filter,.pp-compose input{font-size:16px}}

.pp-sched-wrap{overflow-x:auto;padding-bottom:0.5rem}
.pp-sched{display:grid;grid-template-columns:56px repeat(3,minmax(160px,1fr));gap:0 0.7rem;position:relative;min-width:640px}
.pp-sched__head{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--pine);padding-bottom:0.7rem;border-bottom:1px solid var(--hairline);margin-bottom:0.5rem;white-space:nowrap}
.pp-sched__body{position:relative}
.pp-sched__col{border-left:1px dashed var(--hairline-soft)}
.pp-hour{position:absolute;left:0;transform:translateY(-50%);font-family:var(--font-mono);font-size:0.58rem;color:var(--body-faint)}
.pp-block{
  position:absolute;left:7px;right:7px;border-radius:10px;padding:0.42rem 0.6rem;
  font-size:0.66rem;line-height:1.4;overflow:hidden;
  border:1px solid rgba(23,126,112,0.3);background:rgba(23,126,112,0.08);color:var(--pine);
}
.pp-block strong{display:block;font-weight:600;color:var(--ink);font-size:0.7rem}
.pp-block--dr{border-color:var(--hairline);background:var(--paper);color:var(--body-soft)}
.pp-block--admin{border-style:dashed;background:transparent;color:var(--body-faint)}
.pp-block--admin strong{color:var(--body-faint);font-weight:500}
.pp-block--open{border-color:rgba(231,111,81,0.5);background:rgba(231,111,81,0.07);color:var(--coral-deep)}
.pp-block--open strong{color:var(--coral-deep)}
.pp-nowline{position:absolute;left:0;right:0;height:2px;background:var(--coral);z-index:2;border-radius:999px;pointer-events:none}
.pp-nowline::before{content:"";position:absolute;left:-2px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--coral)}

.pp-bars{display:flex;flex-direction:column;gap:0.85rem;margin-top:0.4rem}
.pp-barrow{display:grid;grid-template-columns:56px 1fr 74px;gap:0.8rem;align-items:center;font-family:var(--font-mono);font-size:0.64rem;color:var(--body-faint)}
.pp-bar{height:8px;border-radius:999px;background:var(--mist);overflow:hidden}
.pp-bar i{display:block;height:100%;border-radius:999px;background:var(--teal)}
.pp-bar i.warn{background:var(--coral)}
.pp-barrow .num{color:var(--ink);text-align:right}

.pp-switch{display:inline-flex;align-items:flex-start;gap:0.7rem;cursor:pointer;user-select:none}
.pp-switch input{position:absolute;opacity:0}
.pp-switch__track{width:42px;height:24px;border-radius:999px;background:var(--hairline);position:relative;transition:background 0.3s ease;flex:none;margin-top:2px}
.pp-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper);transition:transform 0.3s var(--ease-out)}
.pp-switch input:checked + .pp-switch__track{background:var(--teal)}
.pp-switch input:checked + .pp-switch__track::after{transform:translateX(18px)}
.pp-switch input:focus-visible + .pp-switch__track{outline:2px solid var(--teal);outline-offset:2px}
.pp-switch__label{font-size:0.82rem;line-height:1.55;color:var(--body-soft)}

.pp-note{font-size:0.78rem;line-height:1.65;color:var(--body-faint);margin-top:0.95rem}
.pp-note a{color:var(--coral-deep)}

@media (max-width:980px){
  /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr) and that auto minimum is
     MIN-CONTENT, so the single mobile column was sized by the widest thing in the
     active tab and the whole console grew with it. Measured on the shipped build at
     320: Schedule 413px of document overflow, Patients 333px, Messages 72px, and
     still 373 / 294 / 32 at 360, which is the commonest Android width there is.
     Both wide surfaces already sit in their own overflow-x:auto wrapper
     (.pp-sched-wrap, .pp-table-wrap); those wrappers could never do their job while
     the column was free to inflate instead. Nothing else changes: a column that CAN
     shrink is what lets them scroll in place. */
  .pp-shell{grid-template-columns:minmax(0,1fr)}
  .pp-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--hairline-soft)}
  .pp-side--ink{border-bottom-color:transparent}
  .pp-nav{flex-direction:row;flex-wrap:wrap}
  .pp-nav button{width:auto;padding:0.55rem 0.8rem}
  .pp-nav button .mono{display:none}
  .pp-side__foot{margin-top:0.4rem;flex-direction:row;flex-wrap:wrap;gap:1rem;align-items:center}
  .pp-grid--3,.pp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .pp-grid--2,.pp-grid--3,.pp-grid--4{grid-template-columns:1fr}
  .pp-msg{max-width:95%}
  .pp-top{flex-direction:column;align-items:flex-start}
}