/* The portal stylesheet, shared by index.html (the sign-in page, the client, coach and attorney portals) and agent.html (the Culture Agent Portal). Edit here; both pages load it. */
:root{
  --ink:#0B0A09;
  --ink-2:#141211;
  --red:#CF2F3C;
  --red-dim:#E7C9CC;
  --red-lift:#B0242F;
  --cream:#ECE7DF;
  --cream-2:#000000;

  /* the working surfaces */
  --page:#FAF9F7;
  --panel:#FFFFFF;
  --panel-2:#F2F0EC;
  --text:#16150F;
  --mute:#4A4641;
  --hair:#E2DFD8;
  --ok:#3F7A52;
  --shell:1400px;
  --nav:230px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);color:var(--text);
  font-family:"EB Garamond",Georgia,serif;font-size:17.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.98;margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 22px}
.shell{display:flex;gap:0;max-width:var(--shell);margin:0 auto;align-items:flex-start}
.main{flex:1 1 auto;min-width:0;padding:26px 24px 60px}
.hidden{display:none!important}
.eyebrow{
  font-family:Oswald,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red);
}
.eyebrow.pale{color:var(--cream-2)}
.red{color:var(--red)}

/* masthead */
header.mast{border-bottom:1px solid var(--red-dim);background:var(--ink)}
.mast{background:var(--ink)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;max-width:var(--shell)}
.mast .name{color:var(--cream)}
.mast .sub{color:var(--cream-2)}
.mark{display:flex;align-items:center;gap:11px;min-width:0}
.mark .name{font-family:Anton,sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.01em}
.mark .bar{width:2px;height:17px;background:var(--red);display:inline-block}
.mark .sub{font-family:Oswald,sans-serif;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}
.mark .athlete-logo{width:100px;height:100px;background:#000000;display:none;margin-left:auto;align-items:center;justify-content:center}
.mark .athlete-logo.active{display:none}
.athlete-logo .logo-text{text-align:center;color:#ffffff;font-family:Anton,sans-serif;font-size:16px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}

/* Athlete section hero logo */
.sect#s-athlete .athlete-logo-hero{width:280px;height:280px;background:#000000;display:flex;align-items:center;justify-content:center;margin-left:auto;margin-bottom:32px}
.sect#s-athlete .athlete-logo-hero .logo-text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ffffff;font-family:Anton,sans-serif;font-size:48px;font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.who{display:flex;align-items:center;gap:14px;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2)}
.who button{color:var(--cream);padding-bottom:2px}
.who button:hover{color:var(--red)}

/* notification bell. It lives in the dark masthead, so the panel it opens is
   drawn on the light working surface to match the rest of the portal. */
.notif{position:relative;flex:0 0 auto}
.notif-bell{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--cream);transition:background .18s ease,color .18s ease}
.notif-bell:hover{background:rgba(236,231,223,.13)}
.notif-bell svg{width:20px;height:20px;display:block}
.notif-bell.ring svg{animation:notifRing 1.5s ease-in-out 1}
@keyframes notifRing{0%,100%{transform:rotate(0)}12%{transform:rotate(13deg)}28%{transform:rotate(-11deg)}44%{transform:rotate(8deg)}62%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
.notif-count{position:absolute;top:0;right:-1px;min-width:18px;height:18px;padding:0 4px;background:var(--red);color:#FFF;border-radius:9px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;line-height:18px;letter-spacing:0;text-align:center;box-shadow:0 0 0 2px var(--ink)}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:370px;max-width:calc(100vw - 32px);background:var(--panel);color:var(--text);border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:2px;box-shadow:0 18px 44px rgba(11,10,9,.3);z-index:900;overflow:hidden;text-align:left}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--hair)}
.notif-head .t{font-family:Anton,sans-serif;font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.notif-head button{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.notif-head button:hover{text-decoration:underline}
.notif-since{padding:9px 16px;background:var(--panel-2);border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--mute)}
.notif-list{list-style:none;margin:0;padding:0;max-height:min(56vh,430px);overflow-y:auto}
.notif-list li{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid var(--hair);cursor:pointer}
.notif-list li:last-child{border-bottom:0}
.notif-list li:hover{background:var(--panel-2)}
.notif-list li.fresh{background:#FCF2F3}
.notif-list li.fresh:hover{background:#F8E7E9}
.notif-list li .ico{flex:0 0 20px;font-size:16px;line-height:1.35;text-align:center}
.notif-list li .body{flex:1 1 auto;min-width:0}
.notif-list li .ttl{display:block;font-size:15.5px;line-height:1.35}
.notif-list li.fresh .ttl{font-weight:600}
.notif-list li .meta{display:block;margin-top:3px;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.notif-list li .new{flex:0 0 auto;align-self:center;background:var(--red);color:#FFF;padding:2px 7px;border-radius:9px;font-family:Oswald,sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.notif-empty{padding:26px 20px;text-align:center;font-size:15px;color:var(--mute)}
@media(max-width:600px){.notif-panel{position:fixed;top:64px;right:12px;left:12px;width:auto}}

/* sign in */
.signin{min-height:76vh;display:grid;place-items:center;padding:52px 0}
.card-signin{width:100%;max-width:460px}
.card-signin h1{font-size:clamp(42px,10vw,64px);margin:16px 0 0}
.card-signin h1 .l2{display:block;color:var(--red)}
.lede{color:var(--mute);font-size:18px;margin:18px 0 30px;max-width:38ch}
label{display:block;font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);margin-bottom:8px}
input[type=email]{
  width:100%;padding:13px 14px;background:var(--panel);border:1px solid var(--hair);
  border-radius:2px;color:var(--text);font-family:"EB Garamond",serif;font-size:16.5px;
}
.signin input[type=email],.signin input[type=password]{background:var(--ink-2);border-color:rgba(236,231,223,.16);color:var(--cream)}
input:focus-visible,button:focus-visible,.drop:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn{
  display:block;width:100%;margin-top:18px;padding:15px 18px;
  background:var(--red);color:#FFF;border-radius:0;
  font-family:Oswald,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background .18s ease;
}
.btn:hover{background:var(--red-lift)}
.btn{border-radius:2px}
.btn.ghost{background:var(--panel);border:1px solid var(--hair);color:var(--text);width:auto;display:inline-block;margin:0;padding:11px 18px;font-size:12px}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}
.signin .btn.ghost{background:none;color:var(--cream)}
/* The three ways into an account sit in a column under the form so a first time
   client can see that signing in is not the only thing on offer. */
.signin-links{display:flex;flex-direction:column;align-items:flex-start}
.signin-links .linkbtn{margin-top:14px}
.signin-hint{color:var(--mute);font-size:16px;line-height:1.55;margin-top:24px}
.signin-hint.first{color:var(--cream);border-left:3px solid var(--red);padding:12px 0 12px 16px}
.sent{border-left:3px solid var(--red);padding:14px 0 14px 16px;margin-top:22px;font-size:17px}
.fineprint{font-size:15.5px;color:var(--mute);margin-top:26px;line-height:1.55;border-top:1px solid var(--hair);padding-top:18px}
.fineprint em{color:var(--cream);font-style:italic}

/* signature: the matter file */
.filetab{margin-top:0}
.tab{
  display:inline-block;background:var(--red);color:#FFF;padding:8px 22px 7px;
  font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.folder{background:var(--panel);color:var(--text);padding:28px 30px 30px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--hair);border-top:0}
.folder h2{font-size:clamp(30px,6.4vw,46px)}
.folder h2 .dot{color:var(--red)}
.matter{font-size:16.5px;color:#2D2A26;margin-top:8px}

/* checklist */
.checklist{list-style:none;margin:26px 0 0;padding:0;border-top:2px solid var(--ink)}
.checklist li{display:flex;gap:16px;align-items:flex-start;padding:17px 0;border-bottom:1px solid rgba(11,10,9,.16)}
.num{
  flex:0 0 auto;font-family:Anton,sans-serif;font-size:19px;line-height:1;color:#000000;
  width:28px;padding-top:3px;
}
.num.done{color:var(--ok)}
.num.active{color:var(--red)}
.step-t{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:block}
.step-d{font-size:16px;color:#2D2A26}
.step-a{margin-left:auto;align-self:center}
.step-a a{
  font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#FFF;background:var(--red);padding:10px 16px;text-decoration:none;white-space:nowrap;display:inline-block;
}
.step-a a:hover{background:var(--ink)}
.status{
  font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#3D3A36;align-self:center;margin-left:auto;white-space:nowrap;
}
.status.done{color:var(--ok)}

/* panels */
.grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin:20px 0 64px}
.panel{background:var(--panel);border:1px solid var(--hair);padding:24px;border-radius:2px}
.panel.attention{border:2px solid var(--red);box-shadow:0 8px 24px rgba(207,47,60,.25)}
.panel h3{color:var(--text)}
.panel h3{font-size:25px;margin-bottom:6px}
.panel .sub{font-size:16px;color:var(--mute);margin:0 0 18px}
.drop{border:1.5px dashed #C9C4BA;background:var(--panel-2);padding:30px 18px;text-align:center;
  cursor:pointer;border-radius:2px;transition:border-color .18s,background .18s;width:100%;box-sizing:border-box;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.drop:hover,.drop.over{border-color:var(--red);background:#FCF2F3}
.drop .big{font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.drop .small{font-size:15px;color:var(--mute);margin-top:6px}
.files{list-style:none;margin:18px 0 0;padding:0}
.files li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--hair);font-size:16px}
.files .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .sz{margin-left:auto;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--mute);white-space:nowrap}
/* The attorney's reading of the document above it. A row of its own rather than
   a taller file row, so the list of files still scans as a list of files. */
.files li.anx{display:block;border-top:none;padding:0 0 12px 26px;font-size:15.5px;line-height:1.55}
.files li.anx .who{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:4px}
.files li.anx .who .mine{color:var(--red)}
/* Marks the couple of words that say whose a note is, on the athlete's file. */
.tagword{color:var(--red);text-transform:uppercase;letter-spacing:.05em;font-size:.85em}
.files li.anx .txt{display:block;border-left:2px solid var(--hair);padding-left:12px;white-space:pre-wrap}
/* The row does not carry the whole analysis any more: it carries enough to
   recognise which one it is and a button that opens it in full. */
.files li.anx .peek{display:block;border-left:2px solid var(--hair);padding-left:12px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li.anx .anxact{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-left:12px}
.files li.anx .who .pill{margin-left:8px;vertical-align:middle}
.files .anxbtn{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--hair);color:var(--text);padding:5px 10px;cursor:pointer;white-space:nowrap}
.files .anxbtn:hover{border-color:var(--red);color:var(--red)}
/* Says which kind of document the row is. Fixed width so a long file name
   beside it cannot squeeze the one word that tells them apart. */
.files .chip{flex:0 0 auto}
/* Which of the two kinds a document is, on the row itself. A form and an
   uploaded file are read for different reasons and this is what says which one
   you are looking at, on either side of the portal. */
.files .chip.doc{color:var(--cream-2);border-color:var(--hair)}
.files .chip.form{color:#6B5C1A;border-color:#E3D3A8;background:#FBF6E7}
/* A file row carries two names: the title it is read under, and the name of the
   stored file in small type beneath it, with the date it reached the file. The
   title is what a person gave it; the file name is what the scanner did. */
.files .nm{flex:1 1 220px;min-width:0;white-space:normal;line-height:1.3}
.files .nm a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .nm .fn{display:block;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.08em;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
/* Where a document came from, as an arrow with a caption under it: out to the
   client, in from the client, or filed by the firm onto the client's record. */
.orig{display:inline-flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto;min-width:58px}
.orig svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orig .cap{font-family:Oswald,sans-serif;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.orig.sent{color:var(--red)}
.orig.recv{color:var(--ok)}
.orig.filed{color:var(--mute)}
/* The folder picker on an attorney's row, in the same clothes as the buttons. */
.files select.fsel{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel);border:1px solid var(--hair);color:var(--text);padding:4px 6px;max-width:170px;cursor:pointer;margin:0;width:auto}
.files select.fsel:hover{border-color:var(--red)}
/* The tools over the folders: a search box and the button that makes a folder. */
.doctools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.doctools input{flex:1 1 220px;margin:0;width:auto}
.doctools .found{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--mute);white-space:nowrap}
/* One folder on the Documents tab. The head is a button that folds the list
   under it away; the count says what is inside while it is folded. */
.dfold{margin-top:14px;border:1px solid var(--hair);border-radius:2px;background:var(--panel)}
.dfold.unfiled{border-style:dashed}
.dfold .dfh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px}
.dfold .dft{display:flex;gap:10px;align-items:center;flex:1 1 200px;min-width:0;background:none;border:0;padding:0;
  cursor:pointer;color:var(--text);text-align:left;font-family:Oswald,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-radius:0}
.dfold .dft:hover .fname{color:var(--red)}
.dfold .dft .car{display:inline-block;width:0;height:0;border-left:6px solid currentColor;border-top:5px solid transparent;
  border-bottom:5px solid transparent;transition:transform .16s;flex:0 0 auto}
.dfold.open .dft .car{transform:rotate(90deg)}
.dfold .dft .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfold .dft .cnt{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:400;letter-spacing:.1em;color:var(--mute);
  border:1px solid var(--hair);padding:2px 7px;flex:0 0 auto}
.dfold .dfa{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.dfold .dfa .anxbtn{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--hair);color:var(--text);padding:5px 10px;cursor:pointer;white-space:nowrap;border-radius:0;width:auto;margin:0}
.dfold .dfa .anxbtn:hover{border-color:var(--red);color:var(--red)}
.dfold .dfa .anxbtn:disabled{opacity:.35;cursor:default;border-color:var(--hair);color:var(--text)}
.dfold .files{margin:0;padding:0 12px 4px;display:none}
.dfold.open .files{display:block}
.dfold .files li:first-child{border-top:1px solid var(--hair)}
.dfold .files li.hidden{display:none}
/* The head over a list of documents: the kind, and where the list lives. Both
   sides of the portal use it, so a list in a matter file and the same kind of
   list in the client's vault are told apart at a glance rather than by reading
   the paragraph under them. */
.doclist .dl-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  border-left:3px solid var(--hair);padding-left:12px}
.doclist.kind-doc .dl-head{border-left-color:var(--cream-2)}
.doclist.kind-form .dl-head{border-left-color:var(--red)}
.doclist .dl-kind{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.doclist .dl-where{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--hair);padding:3px 8px}
.doclist .dl-note{font-size:15px;color:var(--mute);margin:8px 0 0;padding-left:15px}
/* One redline or one comment the attorney has put on a document, as the client
   reads it under the analysis. The struck-out text is what the document says
   now; the inserted text is what it should say instead. */
.anxmk{list-style:none;margin:10px 0 0;padding:0}
.anxmk li{border-left:2px solid var(--hair);padding:0 0 0 12px;margin-top:12px;font-size:16px;line-height:1.55}
.anxmk .at{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);display:block;margin-bottom:4px}
.anxmk del{color:var(--red);text-decoration:line-through}
.anxmk ins{color:var(--ok);text-decoration:none;border-bottom:1px solid rgba(110,154,120,.6)}
.anxmk .why{display:block;color:var(--mute);font-size:15px;margin-top:4px}
/* One redline being written, in the attorney's composer. */
.mkrow{border-left:2px solid var(--hair);padding-left:12px;margin-top:12px}
.mkrow input,.mkrow textarea{margin-top:6px}
/* ---- The document itself, opened in the portal so it can be marked up where
   it is read. A redline is written by selecting the wording in the document
   and saying what it should say instead, so the mark sits on the passage it is
   about rather than being described from memory in a box beside it. The text
   layer classes below are pdf.js's own: the canvas is the page as drawn and
   the transparent text on top of it is what the selection actually grabs. ---- */
.modal-content.rl{max-width:1240px;width:96%;max-height:94vh;display:flex;flex-direction:column}
.rl-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.rl-bar .btn.ghost{padding:7px 12px;font-size:11px}
.rl-bar .btn{padding:9px 16px;font-size:11px;width:auto;display:inline-block;margin:0}
.rl-bar .grow{flex:1 1 auto}
.rl-bar .on{border-color:var(--red);color:var(--red)}
.rl-wrap{display:flex;gap:18px;margin-top:12px;align-items:flex-start}
.rl-pages{flex:1 1 auto;overflow:auto;max-height:66vh;background:var(--panel-2);
  border:1px solid var(--hair);padding:14px}
.rl-side{flex:0 0 330px;overflow:auto;max-height:66vh;padding-left:16px;border-left:1px solid var(--hair)}
.rl-page{position:relative;margin:0 auto 16px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.rl-page canvas{display:block}
.rl-page img{display:block;width:100%;height:auto}
.rl-doc{padding:44px 48px;font-size:16.5px;line-height:1.75;font-family:"EB Garamond",Georgia,serif}
.rl-doc p{margin:0 0 12px;white-space:pre-wrap}
.rl-doc p.h{font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
/* Where the marks are drawn. It never takes the pointer, so a highlight can
   never come between the attorney and the wording underneath it. */
.rl-marks{position:absolute;inset:0;pointer-events:none;z-index:2}
.rl-hl{position:absolute;background:rgba(207,47,60,.20);border-bottom:2px solid var(--red)}
.rl-hl.cm{background:rgba(63,122,82,.16);border-bottom-color:var(--ok)}
.rl-hl.on{background:rgba(207,47,60,.42);outline:1px solid var(--red)}
.rl-hl.cm.on{background:rgba(63,122,82,.36);outline:1px solid var(--ok)}
/* ---- the tracked changes ----
   A mark can be read two ways. As a highlight it says where on the page the
   pencil has been; as a tracked change it says what the passage would actually
   become, which is the thing a client is trying to work out. Both are the same
   mark, drawn differently.
   On a drawn page there is nothing to reflow, so the band is struck through
   where it sits and what the passage should say instead is put under it. */
.rl-hl.strike::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--red)}
.rl-chip{position:absolute;z-index:3;max-width:66%;padding:2px 6px;background:var(--panel);
  border:1px solid var(--ok);color:var(--ok);font-family:Oswald,sans-serif;font-size:9.5px;
  font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.rl-chip.out{border-color:var(--red);color:var(--red)}
/* On wording the change is written into the sentence itself, because a page of
   text reflows at every width and a band drawn over it would not follow. */
.rl-tc{background:rgba(207,47,60,.10)}
.rl-tc.cm{background:rgba(63,122,82,.10)}
.rl-tc.on{outline:1px solid var(--red)}
.rl-tc.cm.on{outline:1px solid var(--ok)}
.rl-tc del{color:var(--red);text-decoration:line-through}
.rl-tc ins{color:var(--ok);text-decoration:none;border-bottom:1px solid rgba(63,122,82,.6)}
.rl-tc .n{font-family:Oswald,sans-serif;font-size:9px;font-weight:600;color:var(--mute);padding:0 2px}
.rl-tc .note{color:var(--ok);font-style:italic}
/* The catcher that turns a drag into an area, for a scan or a photograph with
   no text in it to select. */
.rl-catch{position:absolute;inset:0;z-index:3;cursor:crosshair}
.rl-band{position:absolute;border:1.5px dashed var(--red);background:rgba(207,47,60,.12);pointer-events:none}
.rl-pop{position:fixed;z-index:1100;width:340px;max-width:92vw;background:var(--panel);
  border:1px solid var(--hair);box-shadow:0 8px 28px rgba(0,0,0,.22);padding:14px;border-radius:3px}
.rl-pop .rl-quote{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--red);
  text-decoration:line-through;max-height:96px;overflow:auto}
.rl-pop textarea{min-height:70px;margin-top:10px}
.rl-pop input{margin-top:8px}
.rl-pop .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.rl-item{border-left:2px solid var(--hair);padding-left:12px;margin-top:14px;font-size:15.5px;line-height:1.5}
.rl-item.cm{border-left-color:var(--ok)}
.rl-item.sel{border-left-color:var(--red)}
.rl-item del{color:var(--red);text-decoration:line-through}
.rl-item ins{color:var(--ok);text-decoration:none;border-bottom:1px solid rgba(63,122,82,.6)}
.rl-item .why{display:block;color:var(--mute);font-size:14.5px;margin-top:3px}
.rl-item .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rl-item .acts .linkbtn{margin-top:4px;font-size:10.5px}
.rl-item input,.rl-item textarea{margin-top:6px;font-size:15px}
.rl-vers{border-top:1px solid var(--hair);padding:10px 0;font-size:15px}
.rl-vers .mini{display:block}
.rl-vers .linkbtn{margin-top:4px;margin-right:14px;font-size:10.5px}
.rl-empty{color:var(--mute);font-size:15px;display:block;margin-top:8px}
.textLayer{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;
  text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:1}
.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.textLayer span.markedContent{top:0;height:0}
.textLayer .endOfContent{position:absolute;inset:100% 0 0;z-index:0;cursor:default;user-select:none}
@media (max-width:900px){
  .rl-wrap{flex-direction:column}
  .rl-side{flex:1 1 auto;width:100%;padding-left:0;border-left:0;border-top:1px solid var(--hair);
    padding-top:14px;max-height:none}
  .rl-pages{max-height:52vh;width:100%}
}
.tick{color:var(--ok)}
.req{list-style:none;margin:0;padding:0}
.req li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:16.5px;color:var(--text)}
.req li:first-child{border-top:0}
.req .box{width:16px;height:16px;border:1.5px solid #BFBAB0;margin-top:5px;flex:0 0 auto;border-radius:2px}
.req li.have{color:var(--mute)}
.req li.have .box{background:var(--ok);border-color:var(--ok)}
.msg{border-left:3px solid var(--red);padding-left:16px;margin-top:24px;font-size:17px}
.msg .from{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:7px}

/* attorney */
table{width:100%;border-collapse:collapse;font-size:16.5px}
th{
  font-family:Oswald,sans-serif;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);padding:0 0 12px;border-bottom:2px solid var(--red);
}
td{padding:15px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
td.nm{font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.pill{
  display:inline-block;font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--hair);color:var(--mute);border-radius:2px;
}
.pill.wait{color:#6B5C1A;border-color:#E3D3A8;background:#FBF6E7}
.pill.done{color:var(--ok);border-color:#BFD9C6;background:#F0F7F2}
.pill.new{background:var(--red);color:#FFF;border-color:var(--red)}
.actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}

footer{border-top:1px solid var(--hair);padding:22px 0 40px;font-size:14.5px;color:var(--mute);margin-top:30px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}

@media(max-width:840px){
  body{font-size:17px}
  .grid{grid-template-columns:1fr}
  .folder{padding:24px 20px 26px}
  .checklist li{flex-wrap:wrap}
  .step-a,.status{margin-left:44px;width:100%;text-align:left;margin-top:10px}
  th.hide,td.hide{display:none}
  .mark .sub{display:none}
  .sect#s-athlete .athlete-logo-hero{width:180px;height:180px;margin-bottom:24px}
  .sect#s-athlete .athlete-logo-hero .logo-text{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- added for the live build ---- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row > div{flex:1 1 200px}
.mini{font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2)}
.required-indicator{color:var(--red);font-family:Oswald,sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;display:inline}
input[type=text],input[type=password],input[type=url],input[type=tel],textarea{
  width:100%;padding:12px 14px;background:var(--panel);border:1px solid var(--hair);
  border-radius:2px;color:var(--text);font-family:"EB Garamond",serif;font-size:16.5px;
}
textarea{min-height:74px;resize:vertical}
.err{color:var(--red);font-size:16px;margin-top:12px}
.ok{color:var(--ok);font-size:16px;margin-top:12px}
.okmsg{color:var(--ok);font-size:16px;margin-top:12px}
.linkbtn{font-family:Oswald,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);border-bottom:1px solid var(--red);margin-top:16px;display:inline-block}
.linkbtn:hover{color:var(--red)}
/* A slot already taken, or a choice already made. Greyed and unclickable so a
   second tap cannot book a second time. */
.linkbtn:disabled,.linkbtn[disabled]{color:var(--mute);border-bottom-color:var(--hair);
  cursor:default;pointer-events:none;opacity:.55}
.linkbtn.chosen,.linkbtn.chosen[disabled]{color:var(--ok);border-bottom-color:var(--ok);opacity:1}
/* Small destructive control that sits inside a table row. */
.rowbtn{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);border-radius:2px;
  background:transparent;padding:5px 9px;white-space:nowrap}
.rowbtn:hover{color:var(--red);border-color:var(--red)}
.rowbtn:disabled{opacity:.45;pointer-events:none}
td.act,th.act{text-align:right;width:1%;white-space:nowrap}
tr.pick{cursor:pointer}
tr.pick:hover td{color:var(--red)}
tr.on td{color:var(--red)}
.empty{color:var(--mute);font-size:16px;padding:14px 0}
.spin{color:var(--mute);font-size:16px;padding:18px 0}
.demo{background:var(--red);color:#fff;font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:7px}
.formlink{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair);font-size:16.5px}
.formlink a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--red)}
.formlink .when{margin-left:auto;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}

/* ---- v2 additions ---- */
select{width:100%;padding:11px 13px;background:var(--panel);border:1px solid var(--hair);border-radius:2px;
  color:var(--text);font-family:"EB Garamond",serif;font-size:16.5px}
select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.typepill{display:inline-block;font-family:Oswald,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);
  background:var(--panel-2);padding:4px 9px;border-radius:2px}
.typepill.missing{color:var(--red);border-color:rgba(207,47,60,.6)}
.thread{list-style:none;margin:16px 0 0;padding:0;max-height:none}
.thread li{padding:13px 0;border-top:1px solid var(--hair);font-size:16.5px}
.thread .meta{font-family:Oswald,sans-serif;font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.thread .meta .rd{color:var(--ok)}
.thread li.firm{border-left:3px solid var(--red);padding-left:14px;background:var(--panel-2)}
.thread .msgacts{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.thread .replybtn{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:1px solid var(--hair);color:var(--text);
  padding:5px 10px;cursor:pointer}
.thread .replybtn:hover{border-color:var(--red);color:var(--red)}
.thread .quote{border-left:2px solid var(--hair);padding:2px 0 2px 10px;margin:0 0 8px;
  font-size:14.5px;color:var(--mute);white-space:pre-wrap}
.thread .quote .qwho{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:3px}
.replybar{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--hair);border-left:3px solid var(--red);background:var(--panel-2);
  padding:10px 12px;margin-bottom:10px}
.replybar .rb-txt{font-size:14.5px;color:var(--mute);line-height:1.5}
.replybar .rb-who{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:3px}
.replybar .rb-x{background:none;border:0;color:var(--mute);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.replybar .rb-x:hover{color:var(--red)}
/* The Messages desk: the inbox rows, and what a message carries besides words */
.md-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.md-head h3{margin-bottom:4px}
.md-head .sub{margin:0}
.md-filter.on{border-color:var(--red);color:var(--red)}
.md-list{list-style:none;margin:12px 0 0;padding:0}
.md-list li{padding:13px 12px;border-top:1px solid var(--hair);cursor:pointer}
.md-list li:hover{background:var(--panel-2)}
.md-list li.on{border-left:3px solid var(--red);background:var(--panel-2)}
.md-list li.unread .md-who{font-weight:600}
.md-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.md-who{font-size:17px}
.md-who .badge{display:inline-block;margin-left:8px;background:var(--red);color:#fff;font-size:10px;font-weight:600;
  padding:1px 7px;border-radius:10px;vertical-align:middle}
.md-title{color:var(--mute);font-size:15px}
.md-when{font-family:Oswald,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.md-peek{margin-top:4px;font-size:15px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-peek .md-from{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-right:4px}
.thread .msgdoc,.thread .msgfee{margin-top:8px;font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.thread .mdk{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.thread .msgdoc .sz{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--mute)}
.gear{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  color:var(--cream);transition:background .18s ease,color .18s ease}
.gear:hover{background:rgba(236,231,223,.13);color:var(--red)}
.gear svg{width:20px;height:20px;display:block}
.setfield{margin-top:16px}
.setfield label{display:block;font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.folder .typepill{border-color:rgba(11,10,9,.25);color:#2D2A26}
/* The Engagement Agreement panel in the client vault: the one document set
   apart from the rest, with a red rule and its own eyebrow, and each letter as
   a card with a status pill and the button that matters most drawn in red. */
/* The Engagement Agreement panel: the one document that makes the rest of the
   file possible, drawn as the vault's dark headline card in the letter's own
   colours so it is never taken for one row among many. */
.agpanel{background:var(--ink);color:var(--cream);border:1px solid var(--ink);border-left:4px solid var(--red);border-radius:2px;box-shadow:0 12px 30px rgba(11,10,9,.18)}
.agpanel .ageyebrow{display:block;font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.agpanel h3{color:#FFF;font-size:30px}
.agpanel .sub{color:#B3AEA6}
.agpanel .aglist li{border-top-color:rgba(255,255,255,.14)}
.agpanel .aglist .agt{color:#FFF;font-size:19px}
.agpanel .aglist .agsub{color:#CFC9C0}
.agpanel .aglist .agact .btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#FFF}
.agpanel .aglist .agact .btn.ghost:hover{border-color:var(--red);color:#FFF;background:rgba(207,47,60,.18)}
.agpanel .okmsg{color:#9CD3AC}
.agpanel .agsteps{display:flex;gap:8px 22px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none}
.agpanel .agsteps li{display:flex;align-items:center;font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8E887F}
.agpanel .agsteps li strong{display:inline-flex;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3);align-items:center;justify-content:center;margin-right:8px;font-size:11px;font-weight:600;color:#B3AEA6}
.agpanel .agsteps li.now{color:#FFF}
.agpanel .agsteps li.now strong{background:var(--red);border-color:var(--red);color:#FFF}
.agpanel .agsteps li.done{color:#9CD3AC}
.agpanel .agsteps li.done strong{background:var(--ok);border-color:var(--ok);color:#FFF}
/* The agreement card over the vault's tabs, dark like the panel it opens, and
   ringed in red while a signature is waiting. */
.kpi-card.kpi-sign{background:var(--ink);border-color:var(--ink)}
.kpi-card.kpi-sign .label,.kpi-card.kpi-sign .value{color:#FFF}
.kpi-card.kpi-sign .subtext{color:#B3AEA6}
.kpi-card.kpi-sign.due{border-color:var(--red);box-shadow:0 0 0 3px rgba(207,47,60,.22)}
.kpi-card.kpi-sign.due .value{color:var(--red)}
.kpi-card .value.kpi-word{font-size:26px;letter-spacing:.02em}
/* A count on a filter chip, so the decision of which list to open is made
   before it is opened. */
.filter-chip .n{font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.06em;margin-left:6px;opacity:.7}
.filter-chip .n:empty{display:none}
.blk h4 .hcount{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.1em;color:#FFF;background:var(--red);border-radius:10px;padding:1px 8px;margin-left:8px;vertical-align:middle}
.blk h4 .hcount:empty{display:none}
.blk.allclear .hint{color:var(--ok)}
.aglist{list-style:none;margin:16px 0 0;padding:0}
.aglist li{display:block;padding:16px 0 0;border-top:1px solid var(--hair);margin-top:16px}
.aglist li:first-child{border-top:0;margin-top:0;padding-top:0}
.aglist .agrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.aglist .agt{font-weight:600;font-size:18px;flex:1 1 220px;min-width:0}
.aglist .agsub{display:block;font-size:15px;color:var(--mute);margin-top:6px;line-height:1.5}
.aglist .agact{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.aglist .agact .btn{width:auto;display:inline-block;margin:0;padding:12px 20px;font-size:12px}
.aglist .agact .btn.ghost{padding:11px 18px}
/* A summary card that goes somewhere when pressed. */
.kpi-card.kpi-go{cursor:pointer}
.kpi-card.kpi-go:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* The client list of documents, flat or in the folders Naomi made. */
.cdocs{margin-top:6px}
.cdocs>.files{margin-top:8px}
/* A document request and where it stands, on either side. */
.req .lbl{flex:1 1 auto}
.req .st{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;margin-top:5px}
.req li.have .st{color:var(--ok)}
.req li.na{color:var(--mute)}
.req li.na .box{border-style:dashed}
.req li.na .lbl{text-decoration:line-through}
.req .acts{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto;align-items:center}
.blk{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.blk:first-child{border-top:0;margin-top:0;padding-top:0}
.blk h4{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:18px;margin:0 0 4px;letter-spacing:.01em}
.blk .hint{font-size:15.5px;color:var(--mute);margin:0 0 14px}
.lines{list-style:none;margin:14px 0 0;padding:0}
.lines li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--hair);font-size:16px}
/* The Forms library: one row per form, the buttons in a column on the right. */
.fl-list li.fl-row{align-items:flex-start;gap:18px;padding:16px 0}
.fl-list .fl-main{flex:1 1 auto;min-width:0}
.fl-list .fl-title{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.fl-list .fl-meta{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.fl-list .fl-blurb{font-size:15.5px;line-height:1.5;color:var(--mute);margin-top:6px;max-width:70ch}
.fl-list .fl-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:0 0 auto;max-width:280px}
.fl-list .fl-actions .btn.ghost{padding:8px 12px;font-size:11px;text-decoration:none;text-align:center}
@media(max-width:760px){.fl-list li.fl-row{flex-direction:column}.fl-list .fl-actions{justify-content:flex-start;max-width:none}}
.lines .amt{margin-left:auto;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.04em;white-space:nowrap}
.lines .sub{display:block;font-size:14px;color:var(--mute)}

/* ---- About Your Portal guide pages (client + coaches) ---- */
.guide .panel{background:#FFFFFF;padding:26px 28px 28px;overflow:hidden;overflow-wrap:anywhere;word-wrap:break-word}
.guide .panel h3{font-size:24px;margin-bottom:10px;line-height:1.05}
.guide .panel > p{margin:0;font-size:16.5px;line-height:1.65;color:var(--text)}
.guide .panel > p + p{margin-top:10px}
.guide .panel .sub{font-size:16px;line-height:1.6;margin:0 0 6px}
.guide .lines{margin:12px 0 0}
.guide .lines li{display:block;padding:12px 0 12px 16px;border-top:1px solid var(--hair);border-left:2px solid var(--red-dim);
  font-size:16.5px;line-height:1.65;color:var(--text);margin-top:6px}
.guide .lines li:first-child{margin-top:0}
.guide ul.lines li > strong:first-child{color:var(--red);font-family:Oswald,sans-serif;font-size:13.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;margin-right:2px}
.guide ol.lines{list-style:none;counter-reset:step}
.guide ol.lines li{counter-increment:step;position:relative;padding-left:44px;border-left:0}
.guide ol.lines li::before{content:counter(step);position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:50%;
  background:var(--red);color:#fff;font-family:Oswald,sans-serif;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;line-height:1}
.guide h4{margin:20px 0 6px;color:var(--red);font-family:Oswald,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.guide .faq{margin-top:14px}
.guide .faq > div{padding:14px 0;border-top:1px solid var(--hair)}
.guide .faq > div:first-child{border-top:0;padding-top:4px}
.guide .faq h4{margin:0 0 6px;font-size:17px;letter-spacing:0;text-transform:none;font-family:"EB Garamond",Georgia,serif;font-weight:600;color:var(--text)}
.guide .faq h4::before{content:"Q.";color:var(--red);font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;margin-right:8px;position:relative;top:-1px}
.guide .faq p{margin:0;font-size:16.5px;line-height:1.65;color:var(--text)}
@media(max-width:600px){
  .guide .panel{padding:18px 16px 20px}
  .guide .lines li{padding-left:12px}
}
.tot{display:flex;justify-content:space-between;padding:12px 0 0;margin-top:6px;border-top:2px solid var(--red);
  font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mini-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mini-row > *{flex:1 1 120px}
/* Who the matter belongs to, shown at the top of every open matter so the
   name, address and phone are there without hunting for the client record. */
.clientgrid{display:flex;gap:16px 28px;flex-wrap:wrap}
.clientgrid > div{flex:1 1 190px;min-width:0}
.clientgrid .cval{display:block;margin-top:5px;font-size:16.5px;color:var(--text);word-break:break-word}
.clientgrid .cval a{color:var(--text);border-bottom:1px solid var(--hair);text-decoration:none}
.clientgrid .cval a:hover{color:var(--red);border-bottom-color:var(--red)}
.clientgrid .cval.none{color:var(--mute)}
.modal-content .sub{font-size:16px;color:var(--mute);margin:0}
/* Two controls now share the last column of the Matters table. */
td.act .rowbtn + .rowbtn{margin-left:6px}
td.act .swtoggle + .rowbtn{margin-left:10px}
/* Reopening a closed matter. A switch rather than a button, since active or
   closed is a state the matter sits in, not a one way action. */
.swtoggle{position:relative;display:inline-flex;align-items:center;gap:7px;vertical-align:middle;cursor:pointer;
  font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.swtoggle:hover{color:var(--ok)}
.swtoggle input{position:absolute;width:1px;height:1px;opacity:0}
.swtoggle .track{flex:none;position:relative;width:30px;height:16px;border:1px solid var(--hair);
  border-radius:9px;background:var(--panel-2);transition:background .16s,border-color .16s}
.swtoggle .track::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;
  border-radius:50%;background:var(--mute);transition:transform .16s,background .16s}
.swtoggle input:checked + .track{border-color:var(--ok);background:rgba(63,122,82,.22)}
.swtoggle input:checked + .track::after{transform:translateX(14px);background:var(--ok)}
.swtoggle input:focus-visible + .track{outline:2px solid var(--red);outline-offset:2px}
.swtoggle input:disabled + .track{opacity:.45}
.chip{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--hair);color:var(--mute);white-space:nowrap}
.chip.due{color:var(--red);border-color:rgba(207,47,60,.6)}
.chip.paid{color:var(--ok);border-color:rgba(110,154,120,.6)}
.chip.draft{color:var(--cream-2)}
/* The draft invoice builder on a matter's Billing tab. */
.dv{border:1px solid var(--hair);padding:16px;margin-top:12px;background:var(--panel-2)}
.dv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.dv-num{font-family:Anton,sans-serif;font-size:22px;letter-spacing:.02em;line-height:1.1}
.dv-state{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.dv-state.dirty{color:var(--red)}
.dv-calc{padding:11px 13px;border:1px solid var(--hair);border-radius:2px;font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.04em;background:var(--panel)}
.dv-lines{margin-top:18px;border-top:2px solid var(--ink)}
.dv-group{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:14px 0 4px}
.dv-line{display:grid;grid-template-columns:130px minmax(160px,1fr) 80px 100px 110px auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair)}
.dv-line input{padding:8px 10px;font-size:14px;margin:0}
.dv-line .dv-wide{grid-column:span 2}
.dv-line .dv-amt{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.04em;text-align:right;white-space:nowrap}
.dv-line .dv-amt.neg{color:var(--red)}
.dv-line .linkbtn{margin:0;white-space:nowrap}
.dv-sums{margin-top:12px}
.dv-sums div{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}
.dv-sums .grand{border-top:2px solid var(--red);margin-top:6px;padding-top:10px;font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.dv-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.dv-pull{border:1px solid var(--hair);padding:12px 14px;margin-top:12px;background:var(--panel)}
.dv-pull label{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--hair);font-size:15px;cursor:pointer}
.dv-pull label.first{border-top:0}
.dv-pull input[type=checkbox]{width:16px;height:16px;margin-top:4px;flex:0 0 auto}
.dv-pull .amt{margin-left:auto;font-family:Oswald,sans-serif;font-size:14px;white-space:nowrap}
.dv-pull .sub{display:block;font-size:14px;color:var(--mute)}
@media(max-width:760px){.dv-line{grid-template-columns:1fr 1fr}.dv-line .dv-desc,.dv-line .dv-wide{grid-column:1 / -1}}
label.check{display:flex;gap:10px;align-items:flex-start;font-family:"EB Garamond",serif;font-size:16px;
  text-transform:none;letter-spacing:0;color:var(--cream);margin-top:12px}
/* the sign in card sits on the light page, so its checkbox wording is read in black */
.signin label.check{color:#000000}
label.check input{width:16px;height:16px;margin-top:4px;flex:0 0 auto}
.hit{padding:14px 0;border-top:1px solid var(--hair)}
.hit .top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.hit .nm2{font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.hit .ex{font-size:15.5px;color:var(--mute);margin-top:6px;line-height:1.5}
.hit mark{background:rgba(207,47,60,.28);color:var(--cream);padding:0 2px}
.steps{list-style:none;margin:14px 0 0;padding:0;counter-reset:s}
.steps li{display:flex;gap:14px;padding:9px 0;font-size:16px;color:var(--mute)}
.steps li .mk{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;
  width:22px;flex:0 0 auto;color:rgba(236,231,223,.3);padding-top:3px}
.steps li.past{color:var(--cream)}
.steps li.past .mk{color:var(--ok)}
.steps li.now{color:var(--cream)}
.steps li.now .mk{color:var(--red)}
.steps li.now .t2{border-bottom:2px solid var(--red);padding-bottom:2px}
.folder .steps li{color:#3D3A36}
.folder .steps li.past{color:var(--ink)}
.folder .steps li.past .mk{color:var(--ok)}
.folder .steps li.now{color:var(--ink)}
.folder .steps li.now .mk{color:var(--red)}
.folder .steps li .mk{color:rgba(11,10,9,.28)}
.tasklist{list-style:none;margin:12px 0 0;padding:0}
.tasklist li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:16.5px;align-items:flex-start}
.tasklist .box2{width:17px;height:17px;border:1.5px solid #BFBAB0;margin-top:4px;flex:0 0 auto;cursor:pointer;border-radius:2px}
.tasklist li.done .box2{background:var(--ok);border-color:var(--ok)}
.tasklist li.done{color:var(--mute)}
.tasklist .due{margin-left:auto;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tasklist .due.late{color:var(--red)}

/* ---- batch one ---- */
.strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.strip button{flex:1 1 150px;text-align:left;border:1px solid var(--hair);padding:14px 16px;
  background:var(--panel);border-radius:2px}
.strip button:hover{border-color:var(--red)}
.strip .n{font-family:Anton,sans-serif;font-size:26px;line-height:1;display:block;color:var(--ink)}
.strip .n.hot{color:var(--red)}
.strip .l{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#2D2A26;display:block;margin-top:5px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--hair);margin-bottom:16px}
.tabs button{font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);padding:10px 16px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-bottom-color:var(--red)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{flex:0 1 auto;width:auto;min-width:130px;padding:9px 11px;font-size:15px}
.filters .clear{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);border-bottom:1px solid var(--hair)}
.filters .clear:hover{color:var(--red);border-color:var(--red)}
.dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:6px;vertical-align:middle}
.charts{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:20px}
@media(max-width:840px){.charts{grid-template-columns:1fr}}
.chartwrap{border:1px solid var(--hair);padding:22px}
.chartwrap h3{font-size:21px;margin-bottom:2px}
.chartwrap .sub{font-size:15px;color:var(--mute);margin:0 0 18px}
.legend{display:flex;gap:16px;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:middle}
.notes{list-style:none;margin:14px 0 0;padding:0}
.notes li{padding:12px 0;border-top:1px solid var(--hair);font-size:16.5px;line-height:1.55}
.notes .when{font-family:Oswald,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);display:block;margin-bottom:4px}
.notes .del{font-family:Oswald,sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin-left:10px}
.notes .del:hover{color:var(--red)}
.statusrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.bday{font-size:16px;padding:9px 0;border-top:1px solid var(--hair)}
.bday .d{font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-right:10px}
.hit2{padding:12px 0;border-top:1px solid var(--hair);cursor:pointer}
.hit2:hover .nm2{color:var(--red)}

/* ---- navigation ---- */
.nav{flex:0 0 var(--nav);position:sticky;top:0;align-self:flex-start;padding:26px 0 40px;
  border-right:1px solid var(--hair);min-height:calc(100vh - 56px);background:var(--page)}
.nav .grp{font-family:Oswald,sans-serif;font-size:14px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);padding:0 22px;margin:20px 0 8px}
.nav .grp:first-child{margin-top:0}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 22px;font-family:Oswald,sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--text);text-decoration:none;
  border-left:3px solid transparent;cursor:pointer}
.nav a:hover{background:var(--panel-2)}
.nav a.on{border-left-color:var(--red);color:var(--red);background:var(--panel)}
.nav .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:600;
  padding:4px 7px;border-radius:10px;letter-spacing:.04em;line-height:1.3;white-space:normal;max-width:60px;text-align:center}

/* Expandable nav items */
.nav-item-with-sub{display:flex;flex-direction:column}
.nav-expand{display:flex;align-items:center;gap:10px;width:100%;padding:11px 22px;font-family:Oswald,sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--text);background:none;border:none;
  border-left:3px solid transparent;cursor:pointer;text-align:left;text-decoration:none}
.nav-expand:hover{background:var(--panel-2)}
.nav-expand[aria-expanded="true"]{color:var(--red);border-left-color:var(--red)}
.nav-arrow{width:16px;height:16px;flex:0 0 auto;margin-left:auto;transition:transform .2s ease}
.nav-expand[aria-expanded="true"] .nav-arrow{transform:rotate(180deg)}
.nav-submenu{display:flex;flex-direction:column;background:var(--panel-2);border-left:1px solid var(--hair)}
.nav-submenu.hidden{display:none}
.nav-sub-link{display:block;padding:8px 22px 8px 44px;font-family:Oswald,sans-serif;font-size:12px;
  font-weight:400;letter-spacing:.05em;color:var(--text);text-decoration:none;border-left:3px solid transparent;
  cursor:pointer}
.nav-sub-link:hover{background:var(--page);border-left-color:var(--hair)}
.nav-sub-link.on{color:var(--red);border-left-color:var(--red);background:var(--page)}

.navtoggle{display:none}
.navtoggle .bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:19px;height:14px;flex:0 0 auto}
.navtoggle .bars i{display:block;height:2px;background:var(--text);border-radius:1px}
.navtoggle[aria-expanded="true"] .bars i{background:var(--red)}
.sect{display:none}
.sect.on{display:block}
.sect > h2{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,4vw,34px);
  margin:0 0 4px;letter-spacing:.01em}
.sect > .lede2{font-size:16.5px;color:var(--mute);margin:0 0 24px;max-width:70ch}
.mtabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--hair);margin:0 0 22px}
.mtabs button{font-family:Oswald,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);padding:12px 15px;border-bottom:2px solid transparent;margin-bottom:-1px}
.mtabs button.on{color:var(--text);border-bottom-color:var(--red)}
.mtabs button .b{background:var(--red);color:#fff;font-size:9px;padding:1px 6px;border-radius:9px;margin-left:6px}
.mpane{display:none}
.mpane.on{display:block}
/* the Engagement tab: a box to sign in, and the letter inside the signing modal */
.sigpad{display:block;width:100%;max-width:520px;height:140px;margin-top:10px;background:#FFFDF9;border:1px dashed var(--hair);border-radius:3px;touch-action:none;cursor:crosshair}
.egdoc{max-height:52vh;overflow:auto;border:1px solid var(--hair);background:#0B0A09;margin:6px 0 14px}
.egsign{border-top:1px solid var(--hair);padding-top:14px}
.modal-content.rl .egdoc{flex:1 1 auto;min-height:200px}
/* the letter viewer: the Engagement Agreement read inside the portal, no pop-up needed */
.egview .egdoc{max-height:none;min-height:300px}
.egtools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.egtools .sub{flex:1 1 200px}
/* editing the client's contact details on the matter card, and another person's on the file */
.mcedit{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.btn.ghost .plus{display:inline-block;font-size:16px;line-height:1;font-weight:600;margin-right:4px;vertical-align:-1px}
.egneed{outline:2px solid var(--red);outline-offset:2px;transition:outline-color .3s}
.eglist{margin-top:8px}
.eglist li{align-items:flex-start}
.eglist li .egtext{flex:1 1 auto;font-size:15px;line-height:1.45}
.eglist li .egtext b{font-weight:600}
.eglist li input.egline{width:100%;font-size:15px}
.flash{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-8px);z-index:9999;background:var(--ok);color:#fff;
  padding:12px 20px;border-radius:3px;font-size:15.5px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;max-width:min(92vw,560px);text-align:center}
.flash.on{opacity:1;transform:translateX(-50%) translateY(0)}
.mcedit.on{display:block}
.mcedit .row > div{flex:1 1 180px}
.actionbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
@media(max-width:900px){
  .shell{display:block}
  .nav{position:static;flex:none;width:auto;min-height:0;border-right:0;border-bottom:1px solid var(--hair);
    padding:0;display:none}
  .nav.open{display:block;padding-bottom:14px}
  .nav .grp{padding:14px 22px 6px}
  .navtoggle{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:14px 22px;border-bottom:1px solid var(--hair);
    font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    background:var(--panel)}
  .main{padding:20px 18px 50px}
}

/* ---- batch three ---- */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--red)}
th .arrow{font-size:9px;margin-left:4px}
td.cb,th.cb{width:26px}
td.cb input,th.cb input{width:15px;height:15px;cursor:pointer}
.bulkbar{display:none;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 0;margin-bottom:10px;
  border-bottom:1px solid var(--red-dim)}
.bulkbar.on{display:flex}
.bulkbar .cnt{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}
.recent{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.recent button{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);padding:7px 12px;color:var(--mute)}
.recent button:hover{border-color:var(--red);color:var(--cream)}
.recent .lbl2{font-family:Oswald,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);align-self:center;margin-right:4px}
.logtable td{font-size:15.5px}
.logtable td.w{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--mute);white-space:nowrap}
.sweep li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair);font-size:16px}
.sweep .amt{margin-left:auto;font-family:Oswald,sans-serif;font-size:14px}
.timeprompt{position:fixed;right:20px;bottom:20px;z-index:80;background:var(--panel);box-shadow:0 6px 24px rgba(0,0,0,.18);
  border:1px solid var(--red);padding:16px 18px;max-width:330px;display:none}
.timeprompt.on{display:block}
.timeprompt h5{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 8px}
.timeprompt p{font-size:15.5px;margin:0 0 10px;color:var(--text)}
.timeprompt .row2{display:flex;gap:8px}
.timeprompt input{padding:8px 10px;font-size:15px}
input[type=date],input[type=datetime-local],input[type=number]{width:100%;padding:12px 14px;background:var(--panel);
  border:1px solid var(--hair);border-radius:2px;color:var(--text);font-family:"EB Garamond",serif;font-size:16.5px}

/* ---- Modern Dashboard Components ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0}
.kpi-card{background:var(--panel);border:1px solid var(--hair);padding:20px;border-radius:4px;transition:all .2s ease}
.kpi-card:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(207,47,60,.1)}
.kpi-card .label{font-family:Anton,sans-serif;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:8px;line-height:.98}
.kpi-card .value{font-size:32px;font-weight:bold;color:var(--text);margin-bottom:4px;font-family:Anton,sans-serif}
.kpi-card .subtext{font-size:13px;color:var(--mute)}
.kpi-card .trend{font-size:12px;margin-top:8px;padding:6px 0;border-top:1px solid var(--hair);font-family:Anton,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}

/* The athlete's NIL tools: reporting meter, deliverables, take-home */
.nil-meter{height:10px;background:var(--hair);border-radius:5px;overflow:hidden;margin:10px 0 6px;display:flex}
.nil-meter i{display:block;height:100%;background:var(--ok)}
.nil-meter i.warn{background:#C9A227}
.nil-meter i.late{background:var(--red)}
.pill.late{color:#FFF;background:var(--red);border-color:var(--red)}
.nil-deal{display:block;padding:14px 0}
.nil-deal+.nil-deal{border-top:1px solid var(--hair)}
.nil-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.nil-row .pill{margin-left:auto}
.nil-dlv{display:flex;gap:12px;align-items:center;padding:8px 0}
.nil-dlv+.nil-dlv{border-top:1px dashed var(--hair)}
.nil-dlv .t{flex:1}
.nil-dlv.done .t{text-decoration:line-through;color:var(--mute)}
.nil-tick{width:24px;height:24px;border:2px solid #C9C4BA;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:transparent;background:var(--panel)}
.nil-tick:hover{border-color:var(--ok)}
.nil-dlv.done .nil-tick{background:var(--ok);border-color:var(--ok);color:#FFF}
.nil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 16px;margin-top:14px}
.nil-grid label{display:block;font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.nil-grid input,.nil-grid select{margin:0}
.nil-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text);margin-top:16px}
.nil-check input{width:18px;height:18px;margin:0}
.nil-out{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.nil-big{font-family:Anton,sans-serif;font-size:44px;color:var(--text);line-height:1;letter-spacing:.01em}
.nil-stack{display:flex;height:22px;border-radius:3px;overflow:hidden;margin:16px 0 10px;border:1px solid var(--hair);background:var(--hair)}
.nil-stack span{display:block;height:100%;min-width:0}
.nil-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--mute)}
.nil-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.nil-lines{list-style:none;margin:14px 0 0;padding:0;font-size:14px}
.nil-lines li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px dashed var(--hair)}
.nil-lines li strong{font-weight:600}
.nil-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.nil-inline>div{flex:1 1 150px}
.nil-inline .btn.ghost{flex:none}
.nil-cheer{color:var(--ok);font-family:Oswald,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:2px}
.status-badge.active{background:#E3F2FD;color:#1565C0}
.status-badge.pending{background:#FFF3E0;color:#E65100}
.status-badge.completed{background:#E8F5E9;color:#2E7D32}
.status-badge.overdue{background:#FFEBEE;color:#C62828}

.timeline{margin:20px 0;position:relative}
.timeline-item{display:flex;gap:16px;margin-bottom:20px;position:relative}
.timeline-item::before{content:'';position:absolute;left:6px;top:24px;bottom:-20px;width:2px;background:var(--hair)}
.timeline-item:last-child::before{display:none}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--red);flex:0 0 auto;margin-top:4px}
.timeline-dot.done{background:var(--ok)}
.timeline-dot.pending{background:var(--cream-2)}
.timeline-content{flex:1;padding-top:0}
.timeline-content .date{font-family:Oswald,sans-serif;font-size:10px;color:var(--mute);text-transform:uppercase}
.timeline-content .title{font-weight:600;margin:4px 0}
.timeline-content .desc{font-size:15px;color:var(--mute)}

.real-time-indicator{display:inline-flex;align-items:center;gap:6px;font-family:Oswald,sans-serif;font-size:10px;text-transform:uppercase;color:var(--ok)}
.real-time-indicator::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.insight-box{background:linear-gradient(135deg,var(--red-dim) 0%,var(--page) 100%);border-left:4px solid var(--red);padding:16px;border-radius:2px;margin:16px 0}
.insight-box .icon{font-size:24px;margin-bottom:8px}
.insight-box .title{font-family:Oswald,sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.insight-box .text{font-size:15px;line-height:1.5}

.progress-detailed{margin:16px 0}
.progress-detailed .label-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}
.progress-detailed .bar{height:12px;background:var(--hair);border-radius:6px;overflow:hidden}
.progress-detailed .fill{height:100%;background:linear-gradient(90deg,var(--red) 0%,#FF6B7A 100%);transition:width .4s ease}
.progress-detailed .milestone{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--mute)}

.filter-chip{display:inline-block;background:var(--panel-2);border:1px solid var(--hair);padding:6px 12px;border-radius:16px;margin:4px;cursor:pointer;transition:all .2s}
.filter-chip:hover,.filter-chip.active{border-color:var(--red);background:var(--page);color:var(--red)}
.filter-chip.active::after{content:' ✓';font-weight:bold}

.smart-action{background:var(--panel-2);border-left:3px solid var(--red);padding:14px 16px;margin:12px 0;border-radius:2px;cursor:pointer;transition:all .2s}
.smart-action:hover{background:var(--page);border-left-color:#FF6B7A}
.smart-action .icon{margin-right:8px;font-size:18px}
.smart-action .text{display:inline}
.smart-action .timestamp{display:block;font-size:12px;color:var(--mute);margin-top:4px}

.list-with-icons li{display:flex;align-items:flex-start;gap:12px}
.list-with-icons .icon{flex:0 0 24px;font-size:18px;text-align:center}

/* one row per outstanding thing on the client dashboard, each with its own
   View button that opens that exact item */
.attn-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.attn-item:first-child{border-top:0}
.attn-item .icon{flex:0 0 24px;font-size:18px;line-height:1.4;text-align:center}
.attn-item .what{flex:1 1 auto;min-width:0;font-size:16px}
.attn-item .what strong{font-weight:600}
.attn-item .what .sub{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.attn-item .attn-view{flex:0 0 auto;align-self:center;padding:8px 16px;font-size:11px}
.attn-item.late .what strong{color:var(--red)}

/* brief highlight on whatever the View button just brought into view */
@keyframes attnFlash{0%{background:rgba(207,47,60,.16)}100%{background:transparent}}
.attn-flash{animation:attnFlash 2.4s ease-out;border-radius:2px}

.absent-state{text-align:center;padding:40px 20px;color:var(--mute)}
.absent-state .icon{font-size:48px;margin-bottom:12px}
.absent-state .title{font-family:Oswald,sans-serif;font-size:14px;text-transform:uppercase;margin-bottom:8px}
.absent-state .text{font-size:15px;line-height:1.5}

/* Modal Styles */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal.open{display:flex}
/* The Engagement Agreement dialogs sit over everything else the portal can
   draw, including the What's New zoom and the redline pop-ups. */
#egSignModal,#egViewModal{z-index:1300}
.egdoc .egloading{padding:48px 24px;text-align:center;color:#B3AEA6;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
.egdoc .egloading .btn{display:inline-block;width:auto;margin:14px 6px 0}
.modal-content{background:var(--panel);border-radius:4px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;padding:24px;position:relative}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h3{margin:0}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--mute);padding:0;width:32px;height:32px}
.modal-close:hover{color:var(--text)}

@media(max-width:840px){.kpi-grid{grid-template-columns:1fr}}

/* What's New post styles */
.whats-new-post{background:var(--panel-2);border:1px solid var(--hair);border-radius:4px;padding:16px;margin-bottom:16px;cursor:pointer;transition:all .2s ease}
.whats-new-post:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(207,47,60,.15)}
.whats-new-post .wnp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.whats-new-post .wnp-title{font-family:Anton,Impact,sans-serif;font-size:18px;font-weight:400;text-transform:uppercase;letter-spacing:.005em;color:var(--text);flex:1 1 auto;min-width:0}
.whats-new-post .wnp-badge{background:var(--red);color:#fff;font-family:Oswald,sans-serif;font-size:9px;font-weight:600;padding:3px 8px;border-radius:2px;flex:0 0 auto;white-space:nowrap}
.whats-new-post .wnp-meta{font-family:Oswald,sans-serif;font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--mute);margin-bottom:8px;text-transform:uppercase}
.whats-new-post .wnp-content{font-size:16px;line-height:1.6;margin-bottom:12px;color:var(--text);white-space:pre-wrap}
.whats-new-post .wnp-attachments{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.whats-new-post .wnp-attachment{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--panel);border:1px solid var(--hair);border-radius:2px;font-size:13px;text-decoration:none;color:var(--text);transition:all .2s ease}
.whats-new-post .wnp-attachment:hover{border-color:var(--red);color:var(--red)}
.whats-new-post .wnp-attachment-icon{font-size:14px}
.whats-new-post .wnp-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--hair)}
.whats-new-post .wnp-actions button{padding:6px 10px;font-size:11px}

/* Tag styles */
.wnp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wnp-tag{background:var(--panel);border:1px solid var(--hair);border-radius:3px;padding:4px 8px;font-size:12px;color:var(--text);display:inline-block}
.wnp-tag.predefined{background:var(--red);color:#fff;border-color:var(--red)}
.wnp-tag.custom{background:var(--panel);border-color:var(--text);opacity:.7}
.tag-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}

/* What's New composer: the attorney's desk for firm-wide posts */
.wn-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;margin-top:10px}
.wn-types label.check{padding:7px 10px;border:1px solid var(--hair);border-radius:2px;background:var(--panel-2);margin:0;font-size:15px;cursor:pointer;color:#000}
.wn-types label.check:hover{border-color:var(--red)}
.wn-types label.check.on{border-color:var(--red);background:#FBF0F1}
.wn-types-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.wn-types-head .mini{color:var(--mute)}
.wn-count{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.wn-files{list-style:none;margin:10px 0 0;padding:0}
.wn-files li{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--hair);border-radius:2px;background:var(--panel-2);margin-top:6px;font-size:14px}
.wn-files li .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wn-files li .sz{color:var(--mute);font-size:12px;white-space:nowrap}
.wn-files li .thumb{width:44px;height:44px;object-fit:cover;border-radius:2px;border:1px solid var(--hair);flex:0 0 auto;background:#fff}
.wn-files li button{background:none;border:1px solid var(--hair);border-radius:2px;padding:4px 8px;font-size:11px;cursor:pointer;color:var(--mute)}
.wn-files li button:hover{color:var(--red);border-color:var(--red)}
.wn-drop{margin-top:14px;padding:22px;border:2px dashed var(--hair);border-radius:4px;text-align:center;color:var(--mute);font-size:15px;transition:border-color .2s ease,background .2s ease}
.wn-drop.over{border-color:var(--red);background:#FBF0F1}
.wn-drop .btn.ghost{margin-top:8px}
.wn-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.wn-actions .btn{width:auto;display:inline-block;margin:0;padding:11px 20px;font-size:12px}
.wn-post-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.whats-new-post .wnp-badge.draft{background:var(--panel);color:var(--mute);border:1px solid var(--hair)}
.whats-new-post .wnp-types{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.whats-new-post .wnp-types .chip{font-size:9.5px}
.whats-new-post .wnp-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.whats-new-post .wnp-images a{display:block;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:#fff;aspect-ratio:4/3}
.whats-new-post .wnp-images img{width:100%;height:100%;object-fit:cover;display:block}
.whats-new-post .wnp-images a:hover{border-color:var(--red)}
.whats-new-post.is-draft{border-style:dashed}
.whats-new-post.is-editing{border-color:var(--red);box-shadow:0 0 0 2px rgba(207,47,60,.15)}
#wnList .whats-new-post{cursor:default}
#mwnList .whats-new-post{cursor:default}
/* Client's What's New wall: search, tag filters, and a gallery of posts laid out
   from the left. The title sits above the graphic; both open the post. */
.wn-tools{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:0 0 16px}
.wn-search{position:relative;flex:1 1 300px;max-width:520px;display:block}
.wn-search input[type=search]{width:100%;padding:12px 14px 12px 42px;background:var(--panel);border:1px solid var(--hair);border-radius:2px;font:inherit;font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none}
.wn-search input[type=search]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wn-search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.wn-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.wn-tag{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--hair);border-radius:2px;background:var(--panel);color:var(--mute);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.wn-tag:hover{border-color:var(--red);color:var(--text)}
.wn-tag.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wn-tag .n{opacity:.6;margin-left:6px}
.wn-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,330px));justify-content:start;gap:30px 24px;list-style:none;margin:0;padding:0}
.wn-card{display:flex;flex-direction:column;gap:10px;min-width:0;animation:wnRise .35s ease both}
.wn-card:nth-child(2){animation-delay:.05s}.wn-card:nth-child(3){animation-delay:.1s}.wn-card:nth-child(4){animation-delay:.15s}.wn-card:nth-child(n+5){animation-delay:.2s}
@keyframes wnRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wn-card-title{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:.01em;color:var(--text);background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;width:100%;overflow-wrap:anywhere;text-transform:none}
.wn-card-title:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.wn-card-art{display:block;width:100%;aspect-ratio:4/5;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--panel-2);cursor:pointer;padding:0;margin:0;position:relative;text-align:left;font:inherit;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
.wn-card-art:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(207,47,60,.14)}
.wn-card-art img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease}
.wn-card-art:hover img{transform:scale(1.025)}
.wn-card-art .wn-card-text{display:block;padding:22px 22px 40px;height:100%;box-sizing:border-box;font-size:16px;line-height:1.55;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical}
.wn-card-art .wn-card-count{position:absolute;right:10px;bottom:10px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;background:var(--ink);color:#fff;border-radius:2px}
.wn-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.wn-card-tags .chip{font-size:9.5px;background:var(--panel);cursor:pointer}
.wn-card-tags .chip:hover{border-color:var(--red);color:var(--red)}
.wn-card.is-skel .wn-card-title,.wn-card.is-skel .wn-card-art{background:linear-gradient(90deg,var(--panel-2) 25%,#E9E6E0 50%,var(--panel-2) 75%);background-size:200% 100%;animation:wnShimmer 1.4s linear infinite;border-color:transparent}
.wn-card.is-skel .wn-card-title{height:22px;width:70%}
@keyframes wnShimmer{to{background-position:-200% 0}}
@media(max-width:600px){.wn-gallery{grid-template-columns:1fr}.wn-card-art{aspect-ratio:auto;min-height:200px}}
.wn-post-modal .modal-content{max-width:880px;max-height:92vh;padding:28px}
.wn-post-modal .modal-header{align-items:flex-start;gap:16px}
.wn-post-modal .modal-header h3{font-size:28px;line-height:1.05;overflow-wrap:anywhere}
.wn-post-tags{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 18px}
.wn-post-img{display:block;border:1px solid var(--hair);border-radius:3px;background:var(--panel-2);margin:0 0 14px;overflow:hidden}
.wn-post-img img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}
.wn-post-img:hover{border-color:var(--red)}
.wn-post-modal .wn-post-content{font-size:17.5px;line-height:1.65;white-space:pre-wrap;margin:0 0 18px;color:var(--text)}
.wn-docs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.wn-doc{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--panel-2);border:1px solid var(--hair);border-radius:2px;font-size:14px;text-decoration:none;color:var(--text);transition:all .2s ease}
.wn-doc:hover{border-color:var(--red);color:var(--red)}
.wn-doc .sz{color:var(--mute);font-size:12px}
/* Full-screen viewer for a post's graphic: the picture at the full width of the
   screen, scrolled like a page, so a poster reads without squinting. Clicking
   the picture toggles between that and fitting the whole thing on screen. */
.wn-zoom{display:none;position:fixed;inset:0;z-index:1200;background:rgba(11,10,9,.97);flex-direction:column;color:#ECE7DF}
.wn-zoom.open{display:flex}
.wn-zoom-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0B0A09;border-bottom:3px solid var(--red);flex:0 0 auto}
.wn-zoom-bar .ttl{flex:1 1 auto;min-width:0;font-family:Oswald,sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wn-zoom-bar button,.wn-zoom-bar a{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1px solid rgba(236,231,223,.35);border-radius:2px;background:none;color:#ECE7DF;cursor:pointer;text-decoration:none;white-space:nowrap;margin:0;width:auto}
.wn-zoom-bar button:hover,.wn-zoom-bar a:hover{border-color:var(--red);color:#fff}
.wn-zoom-bar .x{font-size:22px;line-height:1;padding:4px 12px;letter-spacing:0}
.wn-zoom-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}
.wn-zoom-body img{display:block;width:100%;height:auto;margin:0 auto 4px;background:#fff;cursor:zoom-out}
.wn-zoom.fit .wn-zoom-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;box-sizing:border-box}
.wn-zoom.fit .wn-zoom-body img{width:auto;max-width:100%;max-height:calc(100vh - 100px);object-fit:contain;margin:0;cursor:zoom-in}
.wn-zoom-wait{padding:40px;text-align:center;font-family:Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:#B3AEA6}
@media(max-width:600px){.wn-zoom-bar .ttl{display:none}.wn-zoom-bar{gap:6px;padding:8px 10px}.wn-zoom-bar button,.wn-zoom-bar a{padding:7px 9px;font-size:10px}}
/* Attorney's tag picker in the composer */
.wn-tags-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wn-tag-new{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.wn-tag-new input[type=text]{flex:1 1 220px;max-width:360px;margin:0}
.wn-tag-new .btn{width:auto;display:inline-block;margin:0;padding:10px 16px;font-size:12px}
.whats-new-post .wnp-types .chip.tag{color:var(--text);border-color:var(--ink)}


/* ---------- Coaches Portal ---------- */
.k-spot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.k-spot{background:var(--panel);border:1px solid var(--hair);display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
.k-spot:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.k-spot.is-draft{border-style:dashed;opacity:.85}
.k-spot.is-editing{outline:2px solid var(--red);outline-offset:2px}
.k-spot-photo{position:relative;aspect-ratio:4/3;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.k-spot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.k-spot-photo img.loaded{opacity:1}
.k-spot-photo .k-spot-initials{font-family:Anton,Oswald,sans-serif;font-size:56px;letter-spacing:.06em;color:var(--cream);opacity:.85}
.k-spot-photo img.loaded ~ .k-spot-initials{display:none}
.k-spot-photo .k-spot-sport{position:absolute;left:12px;top:12px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 8px}
.k-spot-photo .k-spot-status{position:absolute;right:12px;top:12px;background:var(--red);color:#fff;font-family:Oswald,sans-serif;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.k-spot-photo .k-spot-status.draft{background:var(--panel);color:var(--mute);border:1px solid var(--hair)}
.k-spot-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.k-spot-body h4{font-family:Oswald,sans-serif;font-size:20px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--text)}
.k-spot-meta{font-size:14px;color:var(--mute)}
.k-spot-measure{display:flex;flex-wrap:wrap;gap:6px}
.k-spot-bio{font-size:15px;line-height:1.55;margin:4px 0 0;color:var(--text);white-space:pre-wrap}
.k-spot-stats{margin:4px 0 0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--text)}
.k-spot-actions{margin-top:auto;padding-top:10px}
.k-spot-actions .btn{font-size:11px;padding:9px 14px}
.k-doclist li,.k-coachlist li,.k-reqlist li{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.k-doclist li > span:first-child,.k-coachlist li > span:first-child,.k-reqlist li > span:first-child{flex:1 1 260px;min-width:0}
.k-doclist .mini-row,.k-coachlist .mini-row{flex:0 0 auto;margin:0}
.k-doclist .btn,.k-coachlist .btn,.k-req-work .btn{font-size:10.5px;padding:7px 11px}
.k-reply{display:block;margin-top:10px;border-left:3px solid var(--red);background:var(--panel-2);padding:8px 12px;font-size:14.5px;line-height:1.55;white-space:pre-wrap}
.k-reply .qwho{font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:3px}
.k-req-work{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--hair)}
.k-req-work select{max-width:220px;margin-bottom:8px}
.k-req-work textarea{min-height:70px;margin-bottom:8px}
/* A position (or coach) dropdown beside a search box */
.k-posfilter{display:flex;align-items:center;gap:8px;flex:0 1 auto}
.k-posfilter select{margin:0;padding:10px 12px;width:auto;min-width:170px;max-width:280px}
.k-posfilter .mini{color:var(--mute)}
/* The desk connecting a coach with a player from a request */
.k-req-coach{display:block;margin-top:4px;font-size:14.5px}
.k-req-connect{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;padding:10px 12px;background:var(--panel-2);border-left:3px solid var(--red)}
.k-req-connect .k-lbl{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);flex:0 0 100%}
.k-req-work .k-req-connect select{flex:1 1 220px;max-width:360px;margin:0}
.k-req-connect .btn{flex:0 0 auto}
.pill.you{background:var(--cream);color:var(--ink);border-color:var(--ink)}
.k-spot-photo .k-spot-match.conn{background:var(--red);color:#fff}
#view-coach .filetab .tab{background:var(--ink)}
/* Filter chips on the Player Spotlight: one row per facet, values toggle on and off */
.k-facets{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.k-facet{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.k-facet .k-facet-name{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);min-width:118px}
.k-facet .filter-chip{margin:2px;padding:5px 11px;font-size:13.5px;line-height:1.2;user-select:none}
.k-facet .filter-chip.fit{border-color:var(--red);color:var(--red);font-weight:600}
.k-facet .filter-chip.fit.active{background:var(--red);color:#fff}
.k-facets-clear{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:none;border:0;cursor:pointer;padding:6px 8px}
.k-spot-photo .k-spot-match{position:absolute;left:12px;bottom:12px;background:var(--cream);color:var(--ink);font-family:Oswald,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px}
.k-spot-tags{display:flex;flex-wrap:wrap;gap:6px}
.k-spot-tags .chip.lvl{color:var(--text);border-color:var(--ink)}
.k-spot-note{font-size:14.5px;line-height:1.5;margin:2px 0 0;color:var(--text);font-style:italic;border-left:2px solid var(--red);padding-left:10px}
/* Film: a still frame with a play button until pressed, then the embed */
.k-film{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;margin:4px 0 0}
.k-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.k-film video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
.k-film-play:disabled{cursor:progress;color:var(--mute)}
.k-film-play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,rgba(11,10,9,.2),rgba(11,10,9,.85));color:var(--cream);border:0;cursor:pointer;font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.k-film-play::before{content:"";width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--cream)}
.k-film-play:hover{color:#fff}
/* Where a request stands: a four-stop track */
.k-steps{display:flex;align-items:flex-start;margin:10px 0 4px;padding:0;list-style:none;max-width:560px}
.k-steps li{flex:1 1 0;position:relative;text-align:center;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:20px}
.k-steps li::before{content:"";position:absolute;top:5px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--panel);border:2px solid var(--hair);box-sizing:border-box;z-index:1}
.k-steps li::after{content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;background:var(--hair)}
.k-steps li:first-child::after{display:none}
.k-steps li.done{color:var(--text)}
.k-steps li.done::before{background:var(--ink);border-color:var(--ink)}
.k-steps li.done::after{background:var(--ink)}
.k-steps li.now{color:var(--red)}
.k-steps li.now::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(207,47,60,.18)}
.k-steps li.now::after{background:var(--ink)}
.k-steps li.closed.now::before{background:var(--mute);border-color:var(--mute);box-shadow:none}
.k-steps li.closed.now{color:var(--mute)}
.k-steps small{display:block;font-family:"EB Garamond",serif;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--mute);margin-top:2px}
.k-next{display:block;font-size:14.5px;color:var(--text);margin-top:6px}
.k-next strong{font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-right:6px}
.pill.upd{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Standing needs */
.k-needlist li{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.k-needlist li > span:first-child{flex:1 1 260px;min-width:0}
.k-needlist .mini-row{flex:0 0 auto;margin:0}
.k-needlist .btn{font-size:10.5px;padding:7px 11px}
.k-needlist li.paused{opacity:.6}
.k-pickrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.k-pickrow .filter-chip{margin:0;padding:6px 12px;font-size:14px}
.k-pickrow input[type=text]{flex:1 1 160px;max-width:240px;margin:0}
.k-board-need{border-top:1px solid var(--hair);padding:14px 0}
.k-board-need:first-child{border-top:0}
.k-board-need h4{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 2px;color:var(--text)}
.k-board-matches{list-style:none;margin:8px 0 0;padding:0}
.k-board-matches li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 0 8px 12px;border-left:2px solid var(--red-dim);margin-top:6px;font-size:15px}
.k-board-matches li .btn{font-size:10.5px;padding:7px 11px}
/* Your Program / For Your Career: the coach's choice of what the portal is for. */
.k-focus{display:flex;gap:4px;margin:0 18px 14px;padding:3px;background:var(--panel-2);border:1px solid var(--hair);border-radius:3px}
.k-focus button{flex:1 1 0;background:none;border:0;border-radius:2px;padding:7px 4px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);cursor:pointer;width:auto;margin:0;line-height:1.2}
.k-focus button:hover{color:var(--text)}
.k-focus button.on{background:var(--ink);color:#fff}
.k-focus-card{margin:0 0 6px;padding:16px 18px;background:var(--panel);border:1px solid var(--hair);border-radius:3px;text-align:left}
.k-focus-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:10px}
.k-focus-head .sub{font-size:14px;color:var(--mute)}
.k-focus.big{margin:0;background:none;border:0;padding:0;gap:10px;flex-wrap:wrap}
.k-focus.big button{flex:1 1 200px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--hair);background:var(--panel-2);color:var(--text);text-transform:none;letter-spacing:0;font-family:"EB Garamond",serif;font-size:14px;font-weight:400;line-height:1.4}
.k-focus.big button strong{font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.k-focus.big button span{color:var(--mute)}
.k-focus.big button:hover{border-color:var(--red)}
.k-focus.big button.on{border-color:var(--red);background:#FBF0F1}
.k-focus.big button.on strong{color:var(--red)}
/* The career side behind its $30-a-month subscription. A locked section keeps
   its heading and shows the wall; everything else in it is hidden. */
.k-locktag{font-size:11px;margin-left:6px;opacity:.75}
.sect.k-locked > *:not(.k-wall):not(h2){display:none!important}
.k-wall{background:var(--panel);border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:3px;padding:26px 28px;margin:14px 0 20px;text-align:left}
.k-wall h3{margin-top:6px}
.k-wall .price{font-family:Anton,Impact,sans-serif;font-size:46px;line-height:1;color:var(--ink);margin:14px 0 2px}
.k-wall .price small{font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px}
.k-wall ul.inc{list-style:none;padding:0;margin:14px 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 18px}
.k-wall ul.inc li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.45}
.k-wall ul.inc li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--red);transform:rotate(45deg)}
.k-career-card{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 18px;background:var(--panel);border:1px solid var(--hair);border-radius:3px;margin:0 0 6px;text-align:left}
.k-career-card .st{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--hair);border-radius:2px;color:var(--mute);white-space:nowrap}
.k-career-card .st.ok{color:var(--ok);border-color:#BFD9C6;background:#F0F7F2}
.k-career-card .st.warn{color:#6B5C1A;border-color:#E3D3A8;background:#FBF6E7}
.k-career-card .st.off{color:#FFF;background:var(--red);border-color:var(--red)}
.k-job.is-pending{border-left:4px solid var(--red)}
.wnp-badge.pending{background:var(--red);color:#fff}
#view-coach .k-off{display:none!important}
/* The sport gate, shown once, the first time a coach signs in. */
.k-gate .modal-content{max-width:560px}
.k-gate .eyebrow{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.k-gate h3{font-family:Anton,Oswald,sans-serif;font-weight:400;font-size:30px;text-transform:uppercase;margin:0 0 12px;color:var(--text)}
.k-gate p{font-size:16.5px;line-height:1.55;margin:0 0 14px;color:var(--text)}
.k-gate .warn{border-left:3px solid var(--red);background:var(--panel-2);padding:10px 14px;font-size:15px;color:var(--text)}
.k-lock{display:inline-flex;align-items:center;gap:6px;font-family:Oswald,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);border-radius:2px;padding:3px 8px;vertical-align:middle}
/* The Coach Profile panel, its documents and the share link. */
.k-profile-docs{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.k-profile-docs .k-pd{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel-2);border:1px solid var(--hair);border-radius:2px;font-size:14px}
.k-profile-docs .k-pd .k{font-family:Oswald,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.k-profile-docs .k-pd.miss{border-style:dashed;color:var(--mute);font-style:italic}
.k-vis label.check{padding:12px 14px;border:1px solid var(--hair);border-radius:2px;background:var(--panel-2);margin:0 0 8px;font-size:16px;cursor:pointer;color:var(--text)}
.k-vis label.check:hover{border-color:var(--red)}
.k-vis label.check.on{border-color:var(--red);background:#FBF0F1}
.k-vis label.check .sub{font-size:14px;margin-top:2px}
.k-share{margin-top:14px;padding:14px;background:var(--panel-2);border:1px solid var(--hair);border-radius:2px}
.k-share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.k-share-row input[type=text]{flex:1 1 260px;margin:0;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.k-share-row .btn{flex:0 0 auto}
/* Job Openings cards. */
.k-job-list{display:flex;flex-direction:column;gap:14px}
.k-job{background:var(--panel);border:1px solid var(--hair);border-radius:3px;padding:18px 20px}
.k-job.is-closed{opacity:.75;border-style:dashed}
.k-job.is-draft{border-style:dashed}
.k-job.is-editing{outline:2px solid var(--red);outline-offset:2px}
.k-job-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.k-job-head h4{font-family:Oswald,sans-serif;font-size:19px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0 0 2px;color:var(--text)}
.k-job-desc{font-size:15.5px;line-height:1.55;margin:10px 0 0;white-space:pre-wrap;color:var(--text)}
.k-job-meta{font-size:14px;color:var(--mute)}
.k-job-hand{margin-top:14px;padding-top:12px;border-top:1px dashed var(--hair)}
/* Conditions, clearance, the carousel and dictation. */
.k-mic{flex:0 0 auto;font-family:Oswald,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--hair);background:var(--panel);border-radius:2px;cursor:pointer;color:var(--mute)}
.k-mic:hover{border-color:var(--red);color:var(--red)}
.k-mic.on{background:var(--red);color:#fff;border-color:var(--red);animation:kpulse 1.2s ease-in-out infinite}
@keyframes kpulse{0%,100%{box-shadow:0 0 0 0 rgba(207,47,60,.35)}50%{box-shadow:0 0 0 7px rgba(207,47,60,0)}}
.k-with-mic{display:flex;gap:8px;align-items:flex-start}
.k-with-mic>input,.k-with-mic>textarea{flex:1 1 auto}
.chip.fit{background:#F0F7F2;border-color:#BFD9C6;color:var(--ok)}
.chip.miss{background:#FBF6E7;border-color:#E3D3A8;color:#6B5C1A}
.k-clear{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.k-clear div{padding:10px 12px;border:1px solid var(--hair);border-radius:2px;background:var(--panel-2);font-size:14px}
.k-clear div.ok{border-color:#BFD9C6;background:#F0F7F2}
.k-clear div.opt{opacity:.8}
.k-clear .k-clear-k{display:block;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.k-clear div.ok .k-clear-k{color:var(--ok)}
.k-alert{border-left:3px solid var(--red);padding:10px 14px;margin:8px 0;background:var(--panel)}
.k-alert.seen{border-left-color:var(--hair)}
.k-move{border:1px solid var(--hair);border-radius:3px;padding:14px 16px;margin-top:10px;background:var(--panel)}
.k-move.fit{border-color:#BFD9C6;box-shadow:inset 3px 0 0 var(--ok)}
.k-move h4{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0 0 2px}
.k-job-hand textarea{min-height:70px;margin-bottom:8px}
.k-job-hand .btn{font-size:11px;padding:9px 14px}
.k-job-ints{list-style:none;margin:12px 0 0;padding:0}
.k-job-ints li{padding:10px 0 10px 12px;border-left:2px solid var(--hair);margin-top:6px;font-size:15px}
.k-job-ints .k-req-work select{max-width:240px}
@media (max-width:640px){.k-spot-grid{grid-template-columns:1fr}.k-facet .k-facet-name{min-width:100%}.k-steps small{display:none}}

/* ---- Culture Agent Portal (g-*) and the firm's Agents desk (gd-*) ---- */
.g-jump{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 18px}
.g-jump > div{flex:1 1 220px;max-width:360px}
.g-jump label{margin-bottom:6px}
.g-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--hair);background:var(--panel);margin-bottom:8px;font-size:15.5px;cursor:pointer;text-align:left;width:100%}
.g-alert.urgent{border-left:3px solid var(--red)}
.g-alert .when{margin-left:auto;color:var(--mute);font-size:13px;white-space:nowrap}
.g-tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.g-tbl th{text-align:left;font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:8px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
.g-tbl td{padding:10px;border-bottom:1px solid var(--hair);vertical-align:top}
.g-tbl tr.g-row{cursor:pointer}
.g-tbl tr.g-row:hover td{background:var(--panel-2)}
.g-tbl tfoot td{font-weight:600;border-bottom:0}
.g-wrap{overflow-x:auto}
.g-tag{display:inline-block;padding:3px 9px;border:1px solid var(--hair);border-radius:12px;font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;background:var(--panel)}
.g-tag.red{color:#FFF;background:var(--red);border-color:var(--red)}
.g-tag.ok{color:var(--ok);border-color:#BFD9C6;background:#F0F7F2}
.g-tag.wait{color:#6B5C1A;border-color:#E3D3A8;background:#FBF6E7}
.g-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.g-field{margin-bottom:14px}
.g-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.g-filters > div{flex:1 1 160px;max-width:260px}
.g-filters label{margin-bottom:6px}
.g-thread{list-style:none;margin:0 0 16px;padding:0;max-height:420px;overflow:auto}
.g-thread li{padding:10px 14px;margin:0 0 8px;border-radius:3px;background:var(--panel-2);max-width:80%}
.g-thread li.mine{margin-left:auto;background:var(--red-dim)}
.g-thread .meta{font-family:Oswald,sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.g-doc{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair);flex-wrap:wrap}
.g-doc:first-child{border-top:0}
.g-doc .name{flex:1 1 200px}
.g-doc .exp{color:var(--mute);font-size:14px}
.g-doc.expiring .exp,.g-doc.expired .exp{color:var(--red);font-weight:600}
.g-notice{padding:14px 16px;background:var(--panel-2);border-left:3px solid var(--red);margin:0 0 18px;font-size:15.5px}
.g-notice.quiet{border-left-color:var(--hair);color:var(--mute)}
.g-detail{margin-top:18px}
.g-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:15.5px;margin:10px 0 16px}
.g-kv dt{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.g-kv dd{margin:0}
.g-ok{color:var(--ok)}
.g-red{color:var(--red);font-weight:600}
.g-inline{display:inline-block;width:auto;min-width:0;padding:6px 8px;font-size:14px}
.g-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* compliance: the checklist against an athlete, the reminders, the rules */
.g-check{list-style:none;margin:0;padding:0}
.g-check li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--hair)}
.g-check li:first-child{border-top:0}
.g-check input[type=checkbox]{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--red)}
.g-check .lab{font-size:15.5px;line-height:1.45}
.g-check .why{display:block;color:var(--mute);font-size:13.5px;margin-top:3px;line-height:1.45}
.g-check .by{display:block;color:var(--mute);font-size:12.5px;margin-top:3px;font-family:Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.g-check li.done .lab{color:var(--mute)}
.g-grp{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:16px 0 4px}
.g-grp:first-child{margin-top:0}
.g-prog{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;white-space:nowrap}
.g-prog .bar{width:72px;height:6px;background:var(--panel-2);border:1px solid var(--hair);position:relative;overflow:hidden}
.g-prog .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red)}
.g-prog.complete .bar i{background:var(--ok)}
.g-rule{padding:10px 0;border-top:1px solid var(--hair)}
.g-rule:first-child{border-top:0}
.g-rule .cite{font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.g-rule .head{font-weight:600;margin-top:2px}
.g-rule .txt{color:var(--mute);font-size:14.5px;line-height:1.5;margin-top:3px}
.g-sum{cursor:pointer;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* the deal calculator */
.g-stack{display:flex;height:22px;border:1px solid var(--hair);background:var(--panel-2);overflow:hidden;margin:14px 0 8px}
.g-stack span{display:block;height:100%;min-width:2px}
.g-key{display:flex;gap:12px 18px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);margin-bottom:10px}
.g-key i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.g-lines{list-style:none;margin:0;padding:0;font-size:15.5px}
.g-lines li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hair)}
.g-lines li:first-child{border-top:0}
.g-lines li.total{font-weight:600;border-top:2px solid var(--text)}
.g-lines strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.g-flag{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--hair);border-left:3px solid var(--red);background:var(--panel);margin:8px 0 0;font-size:14.5px;line-height:1.45}
.g-flag.ok{border-left-color:var(--ok)}
.g-danger{color:var(--red);border-color:var(--red)}
@media(max-width:840px){.g-thread li{max-width:100%}.g-kv{grid-template-columns:1fr}.g-kv dt{padding-top:8px}}

/* The invoice editor: one row per line, every field on it editable. */
.ie-lines{margin-top:14px;border-top:2px solid var(--ink)}
.ie-line{display:grid;grid-template-columns:110px 130px minmax(160px,1fr) 80px 100px 110px 90px auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair)}
.ie-line input,.ie-line select{padding:8px 10px;font-size:14px;margin:0;width:100%}
.ie-line input:disabled{opacity:.35}
.ie-line .dv-amt{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.04em;text-align:right;white-space:nowrap}
.ie-line .dv-amt.neg{color:var(--red)}
.ie-line .linkbtn{margin:0;white-space:nowrap}
@media (max-width:900px){.ie-line{grid-template-columns:1fr 1fr}.ie-line .ie-desc{grid-column:span 2}}