/* =============================================================================
   physiciansbackoffice.com — the journal layout
   Layers on /assets/brand.css (tokens, focus, buttons, footer). Loaded after it.

   The site is a journal of walkthroughs: a slate running head on every page, a
   title block over a heavy rule, an italic vignette, and the form itself as
   Figure 1 with numbered callouts that link to the matching section. Ochre is a
   ring, a rule and a numeral, never a fill and never body text.
   ============================================================================= */

@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- browser surfaces ---------- */
::selection{background:var(--primary);color:#FFF}
html{scrollbar-color:var(--primary) var(--primary-tint);accent-color:var(--primary)}
body{text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}
a{text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

.skip{position:absolute;left:16px;top:-100px;z-index:10;background:#FFF;color:var(--primary);
  font-family:var(--sans);font-weight:600;font-size:15px;padding:10px 14px;border:2px solid var(--primary);border-radius:var(--radius)}
.skip:focus{top:12px}

/* ---------- running head ---------- */
.masthead{background:var(--primary-900);color:#FFF;border-bottom:3px solid var(--accent-dk)}
.masthead>.wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px}
.masthead .name{color:#FFF;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.005em;padding:12px 0}
.masthead .name:hover{color:var(--accent-dk);text-decoration:none}
.masthead .issue{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.86);white-space:nowrap}
.masthead .issue a{color:inherit;text-decoration:none;padding:12px 0}
.masthead .issue a:hover{color:var(--accent-dk)}

/* ---------- title block ---------- */
.titleblock{padding:52px 0 28px;border-bottom:2px solid var(--primary)}
.titleblock h1{font-size:clamp(34px,5vw,54px);letter-spacing:-.014em;max-width:22ch}
.titleblock .vignette{font-style:italic;font-size:clamp(19px,2.3vw,23px);line-height:1.5;color:var(--gray700);max-width:var(--measure);margin-top:20px}
.titleblock .byline{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--gray700);margin-top:24px}
.titleblock .byline b{font-weight:600;color:var(--ink)}
.titleblock .byline .sep{color:var(--gray300);margin:0 8px}

/* ---------- figures ---------- */
.figures{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start;padding:36px 0 4px}
@media(max-width:880px){.figures{grid-template-columns:1fr;gap:28px}}
.figures.solo{grid-template-columns:minmax(0,480px)}

figure.plate{margin:0;min-width:0}
.plate .frame{position:relative;border:1px solid var(--gray300);background:#FFF;overflow:visible;margin-left:14px}
.plate figcaption{margin-left:14px}
.plate img{display:block;width:100%;height:auto}
.callouts{list-style:none;margin:0;padding:0}
.callouts li{position:absolute;width:0;height:0;left:var(--x);top:var(--t)}
.callouts a{
  position:absolute;left:0;top:0;transform:translate(calc(-100% - 6px),-50%);
  width:32px;height:32px;border-radius:50%;background:#FFF;
  border:2.5px solid var(--accent);color:var(--primary);
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:27px;text-align:center;
  text-decoration:none;box-shadow:0 2px 6px rgba(34,48,63,.28);
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.callouts a::after{content:'';position:absolute;inset:-7px}      /* 46px hit area */
.callouts a:hover,.callouts a:focus-visible{background:var(--primary);color:#FFF;border-color:var(--primary);transform:translate(calc(-100% - 6px),-50%) scale(1.08)}
figcaption{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--gray700);margin-top:12px}
figcaption b{color:var(--ink);font-weight:600}
figcaption a{color:var(--primary)}

/* the second figure sits inside the body column */
.body figure.plate{margin:28px 0 8px}

/* ---------- specimen: one box, sent back and answered (home Figure 1) ---------- */
.specimen{margin:0 0 0 14px;min-width:0}
.specimen .sheet{background:#FFF;border:1px solid var(--gray300);box-shadow:0 1px 2px rgba(34,48,63,.06),0 8px 24px -12px rgba(34,48,63,.18)}
.specimen .formhead{display:flex;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid var(--gray300);font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--gray700)}
.specimen .formhead b{color:var(--ink);font-weight:600}
.specimen .row{position:relative;padding:26px 22px 24px}
.specimen .row+.row{border-top:1px dashed var(--gray300)}
.specimen .ask{font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--gray700);max-width:52ch}
.specimen .line{margin-top:14px;padding:0 4px 6px;border-bottom:1.5px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.2vw,34px);line-height:1.25;color:var(--primary)}
.specimen .bad .line{color:var(--gray500);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px;padding-right:150px}
.specimen .verdict{margin-top:10px;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--gray700)}
.specimen .verdict b{color:var(--ink);font-weight:600}
.specimen .stamp{position:absolute;right:26px;top:52px;transform:rotate(-7deg);border:2.5px solid var(--accent-tx);border-radius:4px;padding:5px 10px 4px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-tx);background:rgba(255,255,255,.85);mix-blend-mode:multiply}
.specimen .good .mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);vertical-align:-5px;margin-right:8px}
.specimen .good .mark svg{width:13px;height:13px;stroke:#FFF;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.specimen figcaption{margin-left:0}
@media(max-width:560px){
  .specimen{margin-left:0}
  .specimen .row{padding:22px 16px 20px}
  .specimen .formhead{padding:10px 16px;flex-direction:column;gap:2px}
  .specimen .bad .line{padding-right:4px}
  .specimen .stamp{position:static;display:inline-block;margin-top:12px}
}

/* ---------- video ---------- */
.video{border:1px solid var(--gray300);background:#FFF;min-width:0}
.video .still{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:var(--primary-900);color:#FFF;text-decoration:none;overflow:hidden}
.video .still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video .play{position:relative;width:60px;height:60px;border-radius:50%;border:2.5px solid var(--accent-dk);display:grid;place-items:center;background:rgba(34,48,63,.55);transition:background .18s,transform .18s}
.video .play svg{width:22px;height:22px;margin-left:3px;fill:#FFF}
.video a.still:hover .play,.video a.still:focus-visible .play{background:var(--accent-dk);transform:scale(1.06)}
.video a.still:hover .play svg{fill:var(--primary-900)}
.video .pending{position:relative;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.86);text-align:center;padding:0 16px}
.video .pending .play{margin:0 auto 12px;border-color:rgba(255,255,255,.4)}
.video .meta{padding:14px 16px 16px;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--gray700)}
.video .meta b{color:var(--ink);font-weight:600}
.video .meta p+p{margin-top:.5em}

/* ---------- provenance ticket ---------- */
.ticket{
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--gray700);
  border-top:1px solid var(--gray300);border-bottom:1px solid var(--gray300);
  padding:12px 0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:4px 28px;
}
.ticket div{display:inline}
.ticket dt{display:inline;font-weight:600;color:var(--ink);font-variant-caps:all-small-caps;letter-spacing:.04em;font-size:17px}
.ticket dt::after{content:' '}
.ticket dd{display:inline;margin:0}

/* ---------- key points ---------- */
.keypoints{background:var(--primary-tint);border:1px solid var(--gray300);padding:24px 28px 26px;max-width:var(--measure);margin:34px 0 0}
.keypoints h2{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin:0 0 12px}
.keypoints ul{margin:0;padding-left:1.15em}
.keypoints li{font-size:18px;line-height:1.55;color:var(--gray700)}
.keypoints li+li{margin-top:8px}
.keypoints li::marker{color:var(--accent-tx)}

/* ---------- article body ---------- */
.body{max-width:var(--measure)}
.body>section{scroll-margin-top:28px;padding:2px 14px;margin:0 -14px}
.body>section:target{border-radius:var(--radius)}
.body h2{font-size:28px;margin:52px 0 12px;display:flex;align-items:baseline;gap:12px}
.body h2 .n{
  flex:none;display:inline-block;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--accent);color:var(--primary);
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:26px;text-align:center;
  transform:translateY(-3px);
}
.body h3{font-size:21px;margin:26px 0 6px}
.body p+p,.body p+ul,.body p+ol,.body ul+p,.body ol+p,.body table+p{margin-top:1.05em}
.body ul,.body ol{padding-left:1.3em}
.body li+li{margin-top:.45em}
.body li::marker{color:var(--accent-tx)}
.body em{font-style:italic}
.body table{border-collapse:collapse;width:100%;font-size:17px;line-height:1.5;margin:1.2em 0;font-variant-numeric:tabular-nums}
.body th,.body td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-top:1px solid var(--gray300)}
.body tr:last-child td{border-bottom:1px solid var(--gray300)}
.body th{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray700);border-top:0}
.body td:last-child,.body th:last-child{padding-right:0}
.cite{font-family:var(--sans);font-size:14px;color:var(--gray700)}
.body .note{font-size:17px;color:var(--gray700)}

/* the one authored motion: a callout tap lands on its section and the ochre
   settles out of it. Exponential ease-out from a visible default. */
.body>section:target{animation:settle 2.6s cubic-bezier(.16,1,.3,1) both}
@keyframes settle{from{background:rgba(192,138,46,.26)}to{background:rgba(192,138,46,0)}}
@media(prefers-reduced-motion:reduce){
  .body>section:target{animation:none;background:rgba(192,138,46,.12)}
  .callouts a,.video .play{transition:none}
}

/* ---------- why it comes back ---------- */
.body>section.returns{border-top:2px solid var(--primary);margin:56px 0 0;padding:22px 0 0}
.returns h2{margin-top:0}

/* ---------- disclosure ---------- */
.disclosure{margin-top:84px;padding-top:26px;border-top:1px solid var(--gray300);max-width:var(--measure)}
.disclosure h2{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray700);margin:0 0 12px}
.disclosure h2.title{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.006em;line-height:1.18;text-transform:none;color:var(--primary);margin:0 0 14px}
.disclosure p{font-size:17px;line-height:1.65;color:var(--gray700)}
.disclosure .btn{margin-top:20px}

/* ---------- contents ---------- */
.contents{border-top:2px solid var(--primary);margin-top:84px;padding-top:26px}
.contents h2{font-size:28px;margin-bottom:6px}
.contents .lede{font-size:18px;color:var(--gray700);margin-bottom:10px}
.contents ol{list-style:none;counter-reset:c;margin:0;padding:0}
.contents li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--gray300);align-items:baseline;counter-increment:c}
.contents li::before{content:counter(c);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent-tx);font-variant-numeric:tabular-nums}
.contents .t{font-size:20px;font-weight:600;line-height:1.3}
.contents .t a{color:var(--primary);text-decoration:none}
.contents .t a:hover{color:var(--accent-tx);text-decoration:underline}
.contents .f{display:block;font-size:16px;font-weight:400;color:var(--gray700);margin-top:3px;line-height:1.5}
.contents li[aria-current="page"] .t a{color:var(--ink);pointer-events:none}
.contents li[aria-current="page"]::before{color:var(--ink)}
@media(max-width:640px){
  .contents li{grid-template-columns:32px minmax(0,1fr)}
}

/* ---------- author ---------- */
.author{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:start;max-width:calc(var(--measure) + 192px);margin-top:84px;padding-top:26px;border-top:2px solid var(--primary)}
.author img{width:160px;height:160px;display:block;background:var(--gray100)}
.author h2{font-size:28px;margin-bottom:10px}
.author p{color:var(--gray700);font-size:18px}
@media(max-width:640px){.author{grid-template-columns:1fr;gap:20px}.author img{width:120px;height:120px}}

/* ---------- subscribe ---------- */
.subscribe{margin-top:84px;padding:28px 0 0;border-top:1px solid var(--gray300);max-width:var(--measure)}
.subscribe h2{font-size:28px}
.subscribe p{color:var(--gray700)}
.subscribe .note{font-size:17px;margin-top:12px}

/* ---------- home ---------- */
.cover .titleblock h1{font-size:clamp(40px,7.2vw,76px);letter-spacing:-.02em;max-width:14ch}
.cover .tagline{font-style:italic;font-size:clamp(22px,3vw,30px);line-height:1.35;color:var(--accent-tx);margin-top:16px;max-width:var(--measure)}
.cover .standfirst{font-size:clamp(19px,2.1vw,21px);line-height:1.6;color:var(--gray700);max-width:var(--measure);margin-top:22px}

/* ---------- article shell ---------- */
main>.wrap{padding-bottom:84px}
@media(max-width:600px){
  .masthead .name{font-size:15px;white-space:nowrap}
  .masthead .issue{font-size:12px}
  .masthead .issue .long{display:none}
  .callouts a{width:20px;height:20px;font-size:11px;line-height:16px;border-width:2px}
  .callouts a::after{inset:-12px}
  /* adjacent form lines are 18px apart on a phone; each numeral carries a second,
     spread-out top (--tm) so the column keeps a 26px pitch and never piles up */
  .callouts li{top:var(--tm,var(--t))}
  .body h2 .n{width:26px;height:26px;font-size:12px;line-height:22px}
  .titleblock{padding:36px 0 22px}
  .figures{padding-top:28px}
  .body h2{font-size:25px;margin-top:44px}
  .disclosure h2.title{font-size:25px}
  .contents,.disclosure,.author,.subscribe{margin-top:64px}
  main>.wrap{padding-bottom:64px}
}

/* ---------- footer ---------- */
footer .links a{display:inline-block;padding:6px 0;margin-right:22px}

/* ---------- outbound marker ---------- */
a[href^="http"]:not([href*="physiciansbackoffice.com"]):not(.btn):not(.bare):not(.still)::after{
  content:'';display:inline-block;width:.62em;height:.62em;margin-left:.28em;vertical-align:0;
  background:var(--gray500);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1h7.8v7.8H9.3V3.9L2.4 10.8 1.2 9.6l6.9-6.9H3.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1h7.8v7.8H9.3V3.9L2.4 10.8 1.2 9.6l6.9-6.9H3.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- print: a page prints as a reprint ---------- */
@media print{
  .skip,.masthead .issue,.video,.contents,.subscribe,footer .links{display:none}
  .masthead{border-bottom:2px solid #000;background:#FFF;color:#000}
  .masthead .name{color:#000}
  .figures{grid-template-columns:1fr;gap:0}
  body{font-size:11pt;line-height:1.5;color:#000;background:#FFF}
  .body{max-width:none}
  .callouts a{box-shadow:none}
  a::after{content:'' !important;display:none !important}
  .body a[href^="http"]::after{content:' (' attr(href) ')' !important;font-size:9pt;color:#555}
  h2{break-after:avoid}
  figure,.keypoints,table{break-inside:avoid}
}