/* Client portal. Loads after /style.css and uses the box palette scoped to body.portal.
   White page, navy type, teal for state (fills only), red for the one thing the client has to do. */

body.portal{background:var(--white);color:var(--navy);}
.portal a{color:var(--teal-ink);}
.portal .mono{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--chocolate);}
.portal .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.portal .skip{position:absolute;left:-9999px;top:8px;background:var(--white);color:var(--navy);padding:8px 12px;z-index:10;}
.portal .skip:focus{left:8px;}
.portal :focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

/* SIGN IN */
.signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 22px;}
.signin-card{width:100%;max-width:420px;text-align:center;}
.signin-agent{margin:0 auto 32px;}
.signin h1{font-size:clamp(26px,4vw,34px);color:var(--navy);margin-bottom:36px;}
.gbtn{display:flex;justify-content:center;min-height:44px;}
.linkbtn{background:none;border:0;padding:6px 0;margin-top:22px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);text-decoration:underline;text-underline-offset:4px;}
.magic{margin-top:22px;text-align:left;}
.magic[hidden]{display:none;}
.magic label{display:block;margin-bottom:8px;}
.magic-row{display:flex;gap:10px;}
.magic input{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--navy);padding:10px 12px;border:1px solid var(--navy);border-radius:0;background:var(--white);}
.pbtn{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--navy);color:var(--white);border:1px solid var(--navy);padding:0 16px;cursor:pointer;min-height:44px;}
.pbtn:hover{background:var(--navy-deep);}
.pbtn[disabled]{opacity:.6;cursor:default;}
.msg{margin:22px 0 0;font-size:14.5px;min-height:1.5em;color:var(--navy);}
.msg.err{color:var(--red);}
.signin-foot{margin-top:48px;}
.signin-foot a{color:var(--chocolate);}

/* WORKSPACE */
.ws{display:grid;grid-template-columns:280px 1fr;min-height:100vh;}
.rail{background:var(--navy);color:var(--white);padding:36px 28px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.rail .mono{color:var(--white);}
.rail-mark{width:44px;height:44px;border:1px solid var(--white);}
.rail h1{font-size:22px;line-height:1.25;color:var(--white);}
.rail nav{display:block;height:auto;}
.rail nav ol{list-style:none;margin:0;padding:0;counter-reset:sec;}
.rail nav li{counter-increment:sec;}
.rail nav a{display:flex;gap:12px;align-items:baseline;padding:9px 10px;margin:0 -10px;color:var(--white);text-decoration:none;font-size:15px;border-left:2px solid transparent;}
.rail nav a::before{content:counter(sec,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;font-size:11px;}
.rail nav a:hover,.rail nav a:focus-visible{background:var(--navy-deep);border-left-color:var(--teal);}
.rail .other a{display:block;color:var(--white);font-size:14px;padding:4px 0;}
.rail-bottom{margin-top:auto;}
.rail-bottom .who{font-size:13px;margin:0 0 10px;word-break:break-all;}
.rail .pbtn{background:var(--navy);border-color:var(--white);width:100%;}
.rail .pbtn:hover{background:var(--navy-deep);}
.rail :focus-visible{outline-color:var(--white);}

.content{padding:56px 64px 96px;max-width:1040px;}
.content > p.state{font-size:17px;}
.sec{padding:40px 0 48px;border-top:2px solid var(--teal);scroll-margin-top:16px;}
.sec + .sec{margin-top:24px;}
/* Room below the last section, so a link to any section can bring it to the top. */
.sec:last-child{min-height:calc(100vh - 32px);}
.sec-head{display:grid;grid-template-columns:130px 1fr;gap:44px;align-items:baseline;margin-bottom:28px;}
.sec-head .mono{padding-top:6px;}
.sec-head h2{font-size:clamp(24px,3vw,32px);color:var(--navy);}
.sec-body{margin-left:174px;}
.sec-body p{margin:0 0 14px;max-width:680px;}
/* Overview: the walking agent on the right, its top level with the heading row, the overview text in the
   left 55 percent. Below 1280px that column gets too narrow for the text, so the drawing goes under it,
   standing on a rule the full content width and capped at 280px tall. */
.sec-agent{display:grid;grid-template-columns:minmax(0,55%) minmax(0,1fr);column-gap:40px;align-items:start;}
.sec-figure{justify-self:end;}
.sec-figure img{width:360px;}
@media (max-width:1279px){
  .sec-agent{grid-template-columns:1fr;}
  .sec-figure{justify-self:stretch;width:auto;margin-top:16px;}
  .sec-agent .sec-figure img{width:240px;}
}
.empty{color:var(--chocolate);font-size:15px;}
/* Decisions, Risks and Results: the sitting agent, small and muted, left of the empty-state line. */
.empty-agent{display:flex;align-items:flex-end;gap:24px;}
.empty-agent .agent{flex:none;}
.empty-agent .agent img{opacity:.7;}
.empty-agent .empty{margin:0 0 4px;}

/* Overview */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 32px;margin-top:24px;background:var(--mist);padding:20px 24px;}
.facts div{padding:10px 0;}
.facts dt{margin-bottom:4px;}
.facts dd{margin:0;font-size:15.5px;}

/* Status chips: teal = done or on track, navy = in progress, chocolate = planned, red = waiting on the client or blocked */
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid transparent;white-space:nowrap;}
.chip.done,.chip.accepted{background:var(--teal);color:var(--navy);}
.chip.in_progress,.chip.active{background:var(--navy);color:var(--white);}
.chip.planned{background:var(--white);color:var(--chocolate);border-color:var(--chocolate);}
.chip.blocked,.chip.client{background:var(--red);color:var(--white);}

/* Your Process: vertical rail */
.process{list-style:none;margin:0;padding:0;position:relative;}
.process::before{content:'';position:absolute;left:8px;top:10px;bottom:10px;width:1px;background:var(--navy);}
.process li{position:relative;padding:0 0 30px 44px;}
.process li:last-child{padding-bottom:0;}
.marker{position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;box-sizing:border-box;}
.marker.done{background:var(--teal);}
.marker.active{background:var(--navy);}
.marker.planned{background:var(--white);border:2px solid var(--chocolate);}
.process h3{font-size:20px;color:var(--navy);display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.process .dates{display:block;margin:6px 0 6px;}
.process p{margin:0;max-width:620px;}
.value-line{margin-top:28px !important;font-style:italic;}

/* This Week */
.week{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;}
.week > div{border-top:1px solid var(--navy);padding-top:14px;}
.week h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--chocolate);font-weight:500;margin-bottom:10px;}
.week .needs{border-top:2px solid var(--red);}
.week .needs h3{color:var(--red);}
.md ul,.md ol{margin:0 0 12px;padding-left:20px;}
.md li{margin-bottom:6px;}
.md h3,.md h4,.md h5{font-family:'Fraunces',Georgia,serif;font-size:17px;color:var(--navy);text-transform:none;letter-spacing:0;margin:10px 0 6px;}
.md p{margin:0 0 10px;}

/* Work Log, Waiting On You, Deliverables: register rows */
.reg{list-style:none;margin:0;padding:0;}
.reg li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:16px 0;border-top:1px solid var(--navy);}
.reg li:last-child{border-bottom:1px solid var(--navy);}
.reg .t{font-weight:500;}
.reg .d{grid-column:1 / -1;margin:0;font-size:14.5px;}
.reg .meta{text-align:right;}
.reg .when{display:block;margin-top:6px;}
.waiting li{border-color:var(--red);}
.waiting .t,.waiting .due{color:var(--red);}
.waiting .due{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;}
.reg li.muted .t,.reg li.muted .d{color:var(--chocolate);}
.reg li.muted .t{font-weight:400;}
.reg .result{display:block;font-family:'Fraunces',Georgia,serif;font-size:22px;line-height:1.2;color:var(--navy);}
.reg .d .mono{margin-right:6px;}
.docbtn{background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left;}

/* Picker and no-access */
.picker{list-style:none;margin:24px 0 0;padding:0;max-width:640px;}
.picker li{border-top:1px solid var(--navy);}
.picker li:last-child{border-bottom:1px solid var(--navy);}
.picker a{display:block;padding:16px 0;text-decoration:none;color:var(--navy);}
.picker a:hover .ttl{text-decoration:underline;}
.picker .ttl{display:block;font-family:'Fraunces',Georgia,serif;font-size:20px;margin-top:4px;}
.solo{max-width:640px;margin:0 auto;padding:96px 22px;}
.solo h1{font-size:clamp(26px,4vw,34px);margin-bottom:18px;}
.solo .pbtn{margin-top:28px;}

@media (max-width:900px){
  .ws{grid-template-columns:1fr;}
  .rail{position:static;height:auto;padding:24px 22px;}
  .content{padding:32px 22px 72px;}
  .sec-head{grid-template-columns:1fr;gap:6px;}
  .sec-body{margin-left:0;}
  .week{grid-template-columns:1fr;}
}