/* RetURN.org consumer portal - the shared stylesheet.

   The team practice calls for a single stylesheet instead of per-page <style> blocks;
   the existing 8 pages predate that and are unwound separately, but the portal is NEW
   surface area, so it starts life the right way: every portal page loads this file and
   carries only page-specific rules inline.

   The look is login.html's, which is the site's: cream paper, navy ink, brass accent,
   Familjen Grotesk for UI, Newsreader for prose, pill buttons. Accessibility floors
   are built in, not patched after: body copy 16px+, controls 44px+, visible focus. */

:root{
  --ink:var(--biw-navy-600,#253551);--ink-soft:#4A5A75;--paper:var(--biw-paper,#F6F3EE);--paper-2:#EDE9E0;
  --slate:var(--biw-navy-600,#253551);--slate-lift:#1A59E0;--brass:var(--biw-brass,#A8894C);--brass-lift:#C4A468;
  --label:#F6F3EA;--card:#FFFFFF;--rule:#D9D3C7;--shadow:rgba(37,53,81,.16);--maxw:1140px;
}
*{box-sizing:border-box}
/* Avada blank.php guards, same as every page here - harmless standalone, load-bearing
   if this markup is ever previewed inside BIW. */
html body.page-template-blank-php,html body.fusion-body{display:block!important;width:auto!important;min-width:0!important}
.fusion-body #wrapper.wrapper_blank,#wrapper{display:block!important;width:auto!important;min-width:0!important;max-width:100%!important}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Newsreader",Georgia,serif;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,.ui{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
[hidden]{display:none!important}
.urnmark{width:46px;height:46px;flex:0 0 46px;display:block}

/* ---------- header ---------- */
header.pchrome{border-bottom:1px solid var(--rule);background:var(--paper)}
.pchrome .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.pchrome .logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.pchrome .logo .word{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.01em}
.pchrome .logo .word span{color:var(--brass)}
.pnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pnav a,.pnav button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 14px;border:0;background:none;cursor:pointer;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;border-radius:999px}
.pnav a:hover,.pnav button:hover{color:var(--slate-lift);background:var(--paper-2)}
.pnav a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
/* PERSONAL | ORGS. One account is a family at home and staff at work, so the two
   sides sit next to each other rather than behind a "Switch" link. */
.pswitch{display:inline-flex;align-items:center;gap:2px;padding:3px;margin-right:6px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:999px}
.pswitch a{min-height:38px;padding:0 14px;border-radius:999px;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center}
.pswitch a:hover{color:var(--slate-lift)}
.pswitch a[aria-current="page"]{color:var(--ink);background:var(--card);
  box-shadow:0 1px 2px var(--shadow)}
.backlink{display:inline-flex;align-items:center;min-height:44px;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;
  color:var(--ink-soft);text-decoration:none}
.backlink:hover{color:var(--slate-lift)}

/* ---------- page scaffold ---------- */
main.pmain{padding:48px 0 90px}
main.pnarrow{display:flex;align-items:flex-start;justify-content:center;padding:64px 20px 80px}
.pcard{width:100%;max-width:27rem}
.eyebrow{font-family:"Courier Prime",ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin:0 0 10px}
.pcard .eyebrow,.pcard h1,.pcard .sub{text-align:center}
h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.sub{margin:0 0 28px;color:var(--ink-soft);font-size:16.5px}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:28px 26px 24px;box-shadow:0 1px 3px var(--shadow)}
.panel h2{font-size:19px;margin:0 0 14px}
.panel + .panel{margin-top:22px}

/* ---------- forms ---------- */
.field{display:block;margin:0 0 16px}
.field span{display:block;font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px}
.pricenote{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink-soft);margin:12px 0 0}
.field .hint{display:block;font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:400;color:var(--ink-soft);margin:4px 0 0;line-height:1.45}
.field input,.field textarea{width:100%;padding:12px 13px;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;min-height:44px}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
/* A select in a .field gets what its input gets (2026-09-05): the partner Team
   block's role select was the browser default, 19px tall, under the 44px floor. */
.field select{width:100%;padding:8px 12px;min-height:44px;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:8px}
.field select:focus{outline:2px solid var(--brass-lift);outline-offset:1px;border-color:var(--brass-lift)}
.field input:focus,.field textarea:focus{outline:2px solid var(--brass-lift);outline-offset:1px;border-color:var(--brass-lift)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#8A2A1F}
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;
  min-height:48px;padding:0 26px;border-radius:999px;text-align:center;text-decoration:none;
  border:1px solid var(--slate);background:var(--slate);color:var(--label);cursor:pointer;
  transition:background .16s ease}
.btn:hover{background:#1B2942}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--slate);border-color:var(--rule)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.wide{width:100%}
.msg{margin:0 0 16px;padding:12px 14px;border-radius:8px;font-size:16px;line-height:1.5;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif}
.msg.bad{color:#7A2419;background:rgba(138,42,31,.09);border:1px solid rgba(138,42,31,.22)}
.msg.ok{color:#2C6B45;background:rgba(63,143,95,.10);border:1px solid rgba(63,143,95,.24)}
.msg a{color:inherit;font-weight:600}
.rowlink{margin:16px 0 0;text-align:center;font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px}
.rowlink a,.linkbtn{display:inline-flex;align-items:center;min-height:44px;color:var(--slate-lift);
  text-decoration:none;font-weight:600;font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;
  font-size:16px;background:none;border:0;padding:0 6px;cursor:pointer}
.rowlink a:hover,.linkbtn:hover{text-decoration:underline}
/* The Google button's slot. Hidden until Google's own button is inside it, so a
   blocked or slow script leaves no empty box behind. */
.gsplit{display:flex;align-items:center;gap:12px;margin:18px 0}
.gsplit::before,.gsplit::after{content:"";height:1px;flex:1;background:var(--rule)}
.gsplit span{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.gslot[hidden]{display:none}
.gslot .gbtn{display:flex;justify-content:center}
.aside{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule);text-align:center}
.aside p{margin:0 0 14px;font-size:16px;color:var(--ink-soft)}

/* ---------- demo notes (same voice as home.html's .dnote) ---------- */
.dnote{background:#FFF8E1;border:1px dashed #C9A24B;border-radius:12px;padding:14px 16px;margin:24px 0 0;
  font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:#5D4A1E}
.dnote strong{color:#8A6A1E}
.dnote code{font-family:"Courier Prime",ui-monospace,monospace;font-size:15.5px;white-space:nowrap}

/* ---------- dashboard ---------- */
.idgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:26px 0 0}
.idcard{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:20px;box-shadow:0 1px 3px var(--shadow);display:flex;flex-direction:column;gap:12px}
.idcard .who{display:flex;align-items:center;gap:12px}
.idcard .who img,.idcard .who .rp-initials{width:48px;height:48px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--brass)}
.idcard .who .rp-initials{display:flex;align-items:center;justify-content:center;background:var(--paper-2);
  color:var(--ink-soft);font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-weight:700;font-size:17px}
.idcard h2{margin:0;font-size:20px;overflow-wrap:anywhere}
.idcard .pid{font-family:"Courier Prime",ui-monospace,monospace;font-size:16px;color:var(--ink-soft);margin:2px 0 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:4px 12px}
.chip.done{color:#2C6B45;background:rgba(63,143,95,.12)}
.chip.part{color:#8A6A1E;background:rgba(201,162,75,.16)}
.chip.none{color:var(--ink-soft);background:var(--paper-2)}
.idcard .meta{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink-soft);margin:0}
.idcard .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.idcard .actions .btn{flex:1 1 auto;padding:0 16px}
.empty{background:var(--card);border:1px dashed var(--rule);border-radius:16px;
  padding:42px 28px;text-align:center;margin:26px 0 0}
.empty h2{margin:0 0 8px}
/* /manage/'s not-yours state is the page's only visible heading, so it is the h1;
   sized like the h2 it replaced. */
.empty h1{margin:0 0 8px;font-size:24px}
.empty p{margin:0 0 20px;color:var(--ink-soft)}

/* ---------- editor ---------- */
.edhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 26px}
.edhead .pid{font-family:"Courier Prime",ui-monospace,monospace;font-size:17px;color:var(--ink-soft);margin:6px 0 0}
.edgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:34px;align-items:start}
@media(max-width:900px){.edgrid{grid-template-columns:1fr}}
.evsticky{position:sticky;top:20px}
@media(max-width:900px){.evsticky{position:static}}
.prevlabel{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;
  display:flex;align-items:center;gap:10px}
.prevstate{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;border-radius:999px;padding:3px 10px}
.prevstate.dirty{color:#8A6A1E;background:rgba(201,162,75,.16)}
.prevstate.saved{color:#2C6B45;background:rgba(63,143,95,.12)}
.savebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.savebar .note{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink-soft)}
.photorow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.photorow img,.photorow .rp-initials{width:64px;height:64px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--brass)}
.photorow .rp-initials{display:flex;align-items:center;justify-content:center;background:var(--paper-2);
  color:var(--ink-soft);font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-weight:700;font-size:22px}
.filebtn input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- public /id/ page ---------- */
.idpage{max-width:29rem;margin:0 auto}
.idpage .rocard{box-shadow:0 24px 48px -18px rgba(0,0,0,.35)}
.idstate{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:34px 28px;text-align:center;box-shadow:0 1px 3px var(--shadow)}
.idstate h1{font-size:26px}
.idstate p{color:var(--ink-soft);margin:0 0 20px}
.idstate .pid{font-family:"Courier Prime",ui-monospace,monospace;color:var(--ink);font-size:17px}
.whatnow{margin:30px 0 0;text-align:center}
.whatnow p{font-family:"Familjen Grotesk",Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink-soft);margin:0 0 12px}
.whatnow .links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.legal{margin:40px auto 0;max-width:34rem;text-align:center;font-size:16px;line-height:1.55;color:#8A97A1}
@media(max-width:560px){
  main.pnarrow{padding:40px 16px 60px}
  h1{font-size:26px}
  .panel{padding:24px 20px 20px}
}