/* =============================================================================
   Silvertime portal — application styles
   -----------------------------------------------------------------------------
   Loaded AFTER assets/site.css and inherits every token from it: --accent
   burgundy, --sage, --bg cream, Caprasimo headings, Figtree body, 20px radius,
   soft shadows. Nothing here redefines the brand; it adds the pieces the
   marketing site has no need for — dashboards, multi-step forms, document
   viewer, tables.

   DESIGN NOTE (for whoever restyles this): the knobs worth turning are the
   :root block immediately below. The February 2025 change request asked for
   squared buttons with icons inside the form flows, which is why
   --portal-radius-sm is small while the site's own pill buttons stay pill
   shaped in the header and footer. Change one value to reunite them.
   ============================================================================= */

:root{
  --portal-radius-sm: 6px;     /* form controls, choice tiles, table chips      */
  --portal-radius:    16px;    /* cards and panels                              */
  --portal-rail:      248px;   /* left step rail on the Will / LPA forms        */
  --portal-art:       232px;   /* right illustration column                     */
  --portal-line:      var(--sage-200);
  --portal-ok:        #3E6B4A;
  --portal-ok-tint:   #EDF3EE;
  --portal-warn:      #8A5A12;
  --portal-warn-tint: #FBF1DF;
  --portal-err:       #9A3B1E;
  --portal-err-tint:  #FBEDE8;
  --portal-doc-face:  Georgia, 'Times New Roman', serif;  /* legal documents     */
}

/* ---------- app frame ---------------------------------------------------- */
.app{padding:38px 0 64px}
.app .wrap{max-width:1160px}
.app-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.app-head h1{font-size:clamp(30px,3.4vw,42px);margin:0}
.app-head .lede{margin:8px 0 0;color:var(--muted);font-size:17.5px;max-width:62ch}
.app-head .spacer{margin-left:auto}
.eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-700);margin:0 0 6px}
.eyebrow.muted{color:var(--soft)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow-md)}

/* portal header additions on top of .masthead */
.masthead .who{display:flex;align-items:center;gap:10px;color:#F5E7E1;font-weight:600;font-size:15.5px}
.masthead .who .avatar{width:34px;height:34px;border-radius:50%;background:#F5E7E1;color:var(--accent-700);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.masthead nav a.on{background:#F5E7E1;color:var(--accent-700)}

/* ---------- cards, panels, notices --------------------------------------- */
.panel{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-sm);padding:26px 28px}
.panel + .panel{margin-top:20px}
.panel h2{font-size:26px;margin:0 0 6px}
.panel h3{font-size:20px;margin:0 0 6px}
.panel .sub{color:var(--muted);margin:0 0 16px;font-size:15.5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.small{font-size:14px;color:var(--soft)}
.hint{font-size:14.5px;color:var(--muted);margin:8px 0 0;line-height:1.6}
.opt{font-weight:400;color:var(--soft);font-size:14px}
.linky{background:none;border:0;padding:0;color:var(--accent-700);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}

.notice{border-radius:var(--portal-radius-sm);padding:14px 18px;font-size:15.5px;line-height:1.6;margin:0 0 18px;
  border-left:4px solid var(--accent);background:var(--accent-100);color:var(--accent-900)}
.notice.ok{border-left-color:var(--portal-ok);background:var(--portal-ok-tint);color:#22412B}
.notice.warn{border-left-color:var(--portal-warn);background:var(--portal-warn-tint);color:#5A3B08}
.notice.err{border-left-color:var(--portal-err);background:var(--portal-err-tint);color:#6B2712}
.notice b{display:block;margin-bottom:2px}

/* ---------- buttons: squared variants for the form flows (Feb 2025 CR) ---- */
.btn-sq{border-radius:var(--portal-radius-sm)}
.btn-sm{padding:9px 16px;min-height:40px;font-size:15px}
.btn svg{flex-shrink:0}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--portal-radius-sm);border:2px solid var(--portal-line);background:var(--surface);
  color:var(--accent-700);cursor:pointer}
.iconbtn:hover{border-color:var(--accent);background:var(--accent-100)}
.iconbtn.danger:hover{border-color:var(--portal-err);color:var(--portal-err);background:var(--portal-err-tint)}

/* ---------- forms --------------------------------------------------------- */
.f-label{display:block;font-weight:700;font-size:15.5px;margin:18px 0 7px}
.f-control{font-family:var(--body);font-size:16px;color:var(--text);background:var(--bg);
  border:2px solid var(--portal-line);border-radius:var(--portal-radius-sm);padding:12px 14px;min-height:50px;width:100%}
textarea.f-control{min-height:130px;resize:vertical;line-height:1.6}
.f-control:hover{border-color:var(--sage-300)}
.f-control:focus{border-color:var(--accent);background:#fff;outline:3px solid var(--accent-200);outline-offset:0}
.f-control:disabled{background:var(--sage-100);color:var(--muted)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.money-in{display:flex;align-items:stretch}
.money-in .cur{display:flex;align-items:center;padding:0 14px;background:var(--sage-100);border:2px solid var(--portal-line);
  border-right:0;border-radius:var(--portal-radius-sm) 0 0 var(--portal-radius-sm);font-weight:700;color:var(--muted)}
.money-in .f-control{border-radius:0 var(--portal-radius-sm) var(--portal-radius-sm) 0}

/* choice tiles — one per answer, squared with room for an icon */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.choice{display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:left;
  background:var(--surface);border:2px solid var(--portal-line);border-radius:var(--portal-radius-sm);
  padding:16px 18px;font:inherit;font-weight:700;font-size:16px;color:var(--text);cursor:pointer;min-height:60px}
.choice:hover{border-color:var(--accent-300);background:#fff}
.choice.on{border-color:var(--accent);background:var(--accent-100);color:var(--accent-800)}
.choice .small{font-weight:400}

.checkline{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:2px solid var(--portal-line);
  border-radius:var(--portal-radius-sm);padding:14px 16px;margin-top:12px;cursor:pointer;font-size:15.5px;line-height:1.55}
.checkline:hover{border-color:var(--accent-300)}
.checkline.on{border-color:var(--accent);background:var(--accent-100)}
.checkline input{margin-top:3px;width:19px;height:19px;accent-color:var(--accent);flex-shrink:0}

/* ---------- dashboard ----------------------------------------------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.tile{display:flex;gap:18px;align-items:center;text-align:left;background:var(--surface);border:0;
  border-radius:var(--portal-radius);box-shadow:var(--shadow-sm);padding:24px 26px;cursor:pointer;font:inherit;width:100%}
.tile:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.tile .ill{width:74px;height:74px;flex-shrink:0}
.tile h3{font-size:21px;margin:0 0 4px}
.tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.tile .go{margin-left:auto;color:var(--accent-700)}

.setup-card{display:flex;gap:18px;align-items:center;background:var(--sage-100);border-radius:var(--portal-radius);
  padding:20px 24px;margin-bottom:22px}
.setup-card .tick{width:42px;height:42px;border-radius:50%;background:var(--portal-ok);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.setup-card .tick.todo{background:var(--accent-200);color:var(--accent-800)}
.setup-card p{margin:0;font-size:15.5px}
.setup-card .btn{margin-left:auto}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 22px}
.stat{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-sm);padding:18px 20px}
.stat .n{font-family:var(--heading);font-size:34px;line-height:1.05;color:var(--accent-700)}
.stat .k{font-size:14px;color:var(--soft);margin-top:4px}

/* ---------- tables -------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-sm)}
table.data{width:100%;border-collapse:collapse;font-size:15.5px;min-width:660px}
table.data th{text-align:left;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);
  font-weight:700;padding:14px 18px;border-bottom:2px solid var(--portal-line);white-space:nowrap}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--accent-700)}
table.data td{padding:14px 18px;border-bottom:1px solid var(--portal-line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--accent-100)}
table.data td.actions{white-space:nowrap;text-align:right}
table.data td.actions .iconbtn{width:36px;height:36px;margin-left:6px}
.empty{padding:44px 28px;text-align:center;color:var(--muted)}
.empty .ill{width:120px;height:120px;margin:0 auto 12px}

.chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 13px;font-size:13.5px;font-weight:700;white-space:nowrap}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.draft{background:var(--sage-100);color:var(--muted)}
.chip.review{background:var(--accent-100);color:var(--accent-700)}
.chip.approved{background:var(--portal-ok-tint);color:var(--portal-ok)}
.chip.attention{background:var(--portal-err-tint);color:var(--portal-err)}
.chip.submitted{background:#E9EFF4;color:#31536B}
.chip.high{background:var(--portal-err-tint);color:var(--portal-err)}
.chip.normal{background:var(--sage-100);color:var(--muted)}
.chip.inactive{background:var(--sage-100);color:var(--soft)}

/* ---------- account set-up carousel (6.2.1.1 / 6.2.1.3) ------------------- */
.carousel{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-md);
  padding:clamp(26px,3.4vw,42px);max-width:940px;margin:0 auto}
.carousel .qgrid{display:grid;grid-template-columns:1fr var(--portal-art);gap:38px;align-items:center}
.carousel h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 10px}
.carousel .qill{width:100%;max-width:var(--portal-art)}
.dots{display:flex;gap:8px;justify-content:center;margin:26px 0 18px}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--sage-200)}
.dots span.on{background:var(--accent);transform:scale(1.25)}
.dots span.done{background:var(--accent-300)}
.car-nav{display:flex;gap:12px;align-items:center;border-top:1px solid var(--portal-line);padding-top:20px}
.car-nav .right{margin-left:auto;display:flex;gap:12px}
.speak{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 6px}
.speak a{display:flex;align-items:center;gap:12px;background:var(--accent-100);border-radius:var(--portal-radius-sm);
  padding:18px 20px;text-decoration:none;color:var(--accent-800);font-weight:700}
.speak a:hover{background:var(--accent-200)}

/* ---------- multi-step form shell ---------------------------------------- */
.formshell{display:grid;grid-template-columns:var(--portal-rail) minmax(0,1fr) var(--portal-art);gap:32px;align-items:start}
.rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-sm);padding:14px}
.rail button{display:flex;align-items:center;gap:11px;background:none;border:0;text-align:left;font:inherit;
  font-size:15px;color:var(--muted);padding:10px 12px;border-radius:var(--portal-radius-sm);cursor:pointer;width:100%}
.rail button:hover:not(:disabled){background:var(--accent-100);color:var(--accent-800)}
.rail button:disabled{opacity:.45;cursor:default}
.rail button.on{background:var(--accent);color:#fff;font-weight:700}
.rail button.done{color:var(--text)}
.rail .rn{width:25px;height:25px;border-radius:50%;background:var(--sage-200);color:var(--text);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.rail button.on .rn{background:#fff;color:var(--accent-700)}
.rail button.done .rn{background:var(--portal-ok);color:#fff}
.formpage{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-md);padding:clamp(24px,3vw,38px)}
.formpage h2{font-size:clamp(24px,2.6vw,31px);margin:0 0 8px}
.formpage .lede{color:var(--muted);font-size:16.5px;margin:0 0 4px;line-height:1.6}
.artside{position:sticky;top:104px;text-align:center;padding-top:8px}
.artside svg{width:100%;max-width:var(--portal-art)}
.artside p{font-size:14.5px;color:var(--soft);margin:10px 0 0;line-height:1.55}
.formnav{display:flex;gap:12px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--portal-line);flex-wrap:wrap}
.formnav .right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* person accordions (max 6 attorneys / 4 executors) */
.person{border:2px solid var(--portal-line);border-radius:var(--portal-radius-sm);margin-top:12px;background:var(--surface);overflow:hidden}
.person.open{border-color:var(--accent-300)}
.person-h{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--bg)}
.person.open .person-h{background:var(--accent-100)}
.person-h .role{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.person-h b{font-size:16px}
.person-h .chev{margin-left:auto;color:var(--muted);transition:transform .15s ease}
.person.open .person-h .chev{transform:rotate(180deg)}
.person-b{display:none;padding:6px 18px 20px}
.person.open .person-b{display:block}
.person-nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.addrow{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}

/* summary */
.sumsec{border:1px solid var(--portal-line);border-radius:var(--portal-radius-sm);margin-top:16px;overflow:hidden}
.sumsec .sh{display:flex;align-items:center;gap:12px;background:var(--sage-100);padding:12px 18px}
.sumsec .sh h3{margin:0;font-size:18px}
.sumsec .sh .btn{margin-left:auto}
.sumrow{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:11px 18px;border-top:1px solid var(--portal-line);font-size:15.5px}
.sumrow b{color:var(--muted);font-weight:700}

/* payment */
.paygrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.payside{background:var(--sage-100);border-radius:var(--portal-radius);padding:24px;position:sticky;top:104px}
.payside h3{margin:0 0 14px;font-size:20px}
.money-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--sage-200);font-size:15.5px}
.money-row.total{border-bottom:0;border-top:2px solid var(--accent);margin-top:6px;padding-top:14px;font-weight:700;font-size:17px}
.amt{display:inline-flex;align-items:stretch;border:2px solid var(--portal-line);border-radius:var(--portal-radius-sm);background:#fff;overflow:hidden}
.amt .cur{display:flex;align-items:center;padding:0 9px;background:var(--sage-200);color:var(--text);font-weight:700;font-size:14px}
.amt .val{display:flex;align-items:center;padding:6px 12px;font-weight:700;font-variant-numeric:tabular-nums}
.charity-banner{display:flex;gap:16px;align-items:center;border:2px solid;border-radius:var(--portal-radius-sm);padding:16px 20px;margin-bottom:20px}
.charity-banner svg{width:58px;height:58px;flex-shrink:0}
.charity-banner img{max-height:52px;width:auto}
.charity-banner b{display:block;font-size:17px}
.charity-banner span{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ---------- modal + toast ------------------------------------------------- */
.modal-back{position:fixed;inset:0;background:rgba(43,10,16,.55);z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding:28px 16px;overflow:auto}
.modal{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-md);width:min(940px,100%);
  max-height:calc(100vh - 56px);display:flex;flex-direction:column;overflow:hidden}
.modal .mh{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--portal-line);background:var(--bg)}
.modal .mh h3{margin:0;font-size:20px}
.modal .mh .tools{margin-left:auto;display:flex;gap:8px}
.modal .mb{overflow:auto;padding:24px;background:var(--sage-100)}
.confirm{background:var(--surface);border-radius:var(--portal-radius);box-shadow:var(--shadow-md);padding:28px;max-width:520px;margin:auto}
.confirm h3{margin:0 0 8px;font-size:23px}
.confirm p{margin:0 0 20px;color:var(--muted);line-height:1.6}
.confirm-row{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

#toast-root{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{display:flex;align-items:center;gap:10px;background:var(--accent-900);color:#FBF3EC;padding:12px 20px;
  border-radius:999px;font-size:15px;font-weight:600;box-shadow:var(--shadow-md)}
.toast.ok{background:var(--portal-ok)}

#scrollDown{position:fixed;right:24px;bottom:24px;z-index:80}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .formshell{grid-template-columns:200px minmax(0,1fr)}
  .artside{display:none}
  .paygrid{grid-template-columns:1fr}
  .payside{position:static}
}
@media (max-width:860px){
  .formshell{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;overflow-x:auto;gap:6px}
  .rail button{white-space:nowrap;width:auto}
  .tiles,.grid-2,.grid-3,.f-row,.speak,.carousel .qgrid{grid-template-columns:1fr}
  .carousel .qill{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .sumrow{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tile:hover{transform:none}
}