/* =============================================================================
   The hosted page's own styles: sign-in, the bar, saving status, the choice
   panel, the sharing screen and the directory. Everything else is the offline
   file's stylesheet, unchanged (it comes with shell.html).
   ============================================================================= */
[hidden]{display:none!important}

/* --- the bar above the planner ---------------------------------------------- */
#jw-bar{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--sub);margin-bottom:14px}
#jw-bar .jw-barline{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;min-width:0}
#jw-bar .jw-who span{color:var(--ink);overflow-wrap:anywhere}
#jw-bar .jw-cohort{background:var(--accent-bg);color:var(--accent);font-weight:600;border-radius:5px;padding:1px 8px}
#jw-bar .jw-baractions{display:flex;gap:6px;flex-wrap:wrap}

/* --- screens: sign-in, no access, choose, problem --------------------------- */
.jw-card{max-width:440px;margin:7vh auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 24px 20px}
.jw-card .title{margin-bottom:4px}
.jw-card label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);
  font-weight:600;margin:14px 0 5px}
.jw-card input[type=email],.jw-card input[type=text]{width:100%;max-width:none;font:inherit;font-size:15px;
  padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink)}
#jw-code{font-size:22px;letter-spacing:.3em;font-variant-numeric:tabular-nums;max-width:12em}
.jw-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
button.jw-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:7px 14px}
button.jw-primary:hover{color:#fff;filter:brightness(1.12)}
button:disabled{opacity:.55;cursor:default}
.jw-msg{font-size:13px;color:var(--accent);margin:12px 0 0;min-height:1.2em}
.jw-msg.bad{color:#9a3412}
.jw-fine{font-size:12px;color:var(--sub)}
.jw-choices{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.jw-choice{text-align:left;font-size:14px;padding:10px 12px}

/* --- saving status: always in view ------------------------------------------- */
#jw-status{position:fixed;right:14px;bottom:14px;z-index:40;max-width:min(420px,calc(100% - 28px));
  display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;font-size:12.5px;color:var(--sub);box-shadow:0 2px 10px rgba(0,0,0,.08)}
#jw-status[data-kind=saved]{color:var(--accent)}
#jw-status[data-kind=failed]{border-color:#9a3412;color:#9a3412}
#jw-status[data-kind=choose]{border-color:var(--c9080);color:var(--c9080)}

/* --- choosing between two devices' versions ---------------------------------- */
#jw-conflicts{position:fixed;left:50%;transform:translateX(-50%);bottom:62px;z-index:41;
  width:min(660px,calc(100% - 28px));max-height:62vh;overflow:auto;background:var(--card);
  border:1px solid var(--c9080);border-radius:var(--radius);padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
#jw-conflicts h3{margin:0 0 2px;font-size:14px}
.jw-conflict{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.jw-conflict h4{margin:0 0 6px;font-size:13px}
.jw-versions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jw-version{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.jw-vlabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);font-weight:600}
.jw-vtext{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;flex:1}
@media (max-width:600px){.jw-versions{grid-template-columns:1fr}}

/* --- the sharing screen ------------------------------------------------------- */
.jw-overlay{position:fixed;inset:0;z-index:50;background:rgba(20,28,30,.45);overflow:auto;padding:4vh 14px}
.jw-overlay .jw-card{margin:0 auto 6vh;max-width:540px}
.jw-sharing-intro{font-size:13.5px;margin:10px 0 4px}
.jw-field{border-top:1px solid var(--line);padding:12px 0 4px}
.jw-field:first-of-type{border-top:none}
.jw-field input[type=text],.jw-field input[type=email],.jw-field input[type=tel]{width:100%;max-width:none;font:inherit;
  font-size:14px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink)}
.jw-switch{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px;color:var(--ink);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400}
.jw-card .jw-switch{text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:var(--ink);margin:8px 0 0}

/* --- the directory ------------------------------------------------------------ */
#jw-directory h2.sec:first-child{margin-top:30px}
.jw-person{padding:8px 0;border-top:1px solid #f2f3f5;font-size:13px;line-height:1.45}
.jw-person:first-child{border-top:none}
.jw-person .jw-pname{font-weight:600;overflow-wrap:anywhere}
.jw-person .jw-pname.none{font-weight:400;color:var(--sub);font-style:italic}
.jw-person .jw-pline{color:var(--sub);font-size:12.5px;overflow-wrap:anywhere}
.jw-person a{color:var(--accent)}

/* --- My data ------------------------------------------------------------------ */
.jw-mdrow{border-top:1px solid var(--line);padding:10px 0}
.jw-mdrow:first-of-type{border-top:none}
.jw-mdrow .jw-fine{margin:4px 0 0}
.jw-import-counts{font-size:13px;padding-left:18px;margin:8px 0}
.jw-import-counts li{margin-bottom:4px}
.jw-card .jw-deliberate{border:1px solid #9a3412;border-radius:6px;padding:6px 8px;margin-top:12px}
button.jw-danger{border-color:#9a3412;color:#9a3412;font-weight:600}
button.jw-danger:hover{background:#9a3412;color:#fff}

/* --- privacy notice ----------------------------------------------------------- */
.jw-notice h2.sec{margin-top:18px}
.jw-notice-p{font-size:13.5px;margin:4px 0 8px}
.jw-notice-list{font-size:13.5px;padding-left:18px;margin:4px 0 8px}
.jw-notice-list li{margin-bottom:4px}
button.jw-link{border:none;background:none;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:12.5px}
#jw-privacy{z-index:60}

/* --- All work (Code 10) --------------------------------------------------------
   The hosted page's list of every work item. Uses the planner's own tokens and
   its period cards; adds the row (a checkbox target and an open target, each at
   least 44 px), the controls, the section headers and the details. Every other
   tab keeps the page's width; only All work widens, and only while its details
   panel is open on a computer. */
.aw-main{min-width:0}
.aw-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:8px}
.aw-seg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aw-ctl-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);font-weight:600;margin-right:2px}
.aw-segbtn{min-height:44px;min-width:44px;padding:6px 14px;font-size:13px;border-radius:22px}
.aw-segbtn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.aw-segbtn[aria-pressed=true]:hover{color:#fff}
.aw-hide{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 4px;font-size:13px;color:var(--ink);cursor:pointer}
.aw-hide input[type=checkbox]{width:18px;height:18px}
.aw-showing{font-size:12.5px;color:var(--sub);margin:4px 0 12px}
.aw-viewbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;
  background:var(--accent-bg);color:var(--accent);border-radius:8px;padding:6px 6px 6px 14px;margin:0 0 14px;font-size:13.5px;font-weight:600}
.aw-viewbar button{min-height:44px;padding:6px 14px;font-size:13px}

/* sections: Past due, weeks, Earlier weeks, No confirmed date */
.aw-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.aw-sechead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:10px 15px;min-height:44px;
  font-size:14px;font-weight:600;color:var(--ink);background:#f5f6f8;border-bottom:1px solid var(--line)}
summary.aw-sechead{cursor:pointer;list-style:none}
summary.aw-sechead::-webkit-details-marker{display:none}
details.aw-sec:not([open]) > .aw-sechead{border-bottom:none}
.aw-seccap{margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
.aw-pinned > .aw-sechead{background:#fdf3dc}
.aw-nodate > .aw-sechead{background:#fdf6e7}
.aw-subhead{font-size:12px;font-weight:600;color:var(--sub);margin:0;padding:8px 15px;background:#fafafa;border-top:1px solid var(--line)}
.aw-empty{font-size:13px;color:var(--sub);margin:0;padding:12px 15px}

/* a row: [checkbox target] [open target: date column | course, title, line, labels] */
.aw-row{display:flex;align-items:stretch;border-top:1px solid #eef0f2;background:var(--card)}
.aw-sec > .aw-row:first-of-type,.aw-sec > .aw-sechead + .aw-row{border-top:none}
.pbody .aw-row{margin:0 -17px;padding:0 6px}
.aw-box{flex:none;display:flex;align-items:flex-start;justify-content:center;width:44px;min-height:44px;padding-top:13px;cursor:pointer}
.aw-box input[type=checkbox]{width:18px;height:18px;margin:0}
.aw-boxspace{flex:none;width:44px}
.aw-rest{flex:1;min-width:0}
.aw-open{display:flex;gap:10px;align-items:flex-start;width:100%;min-height:44px;padding:10px 12px 10px 4px;margin:0;
  text-align:left;font:inherit;color:inherit;background:none;border:none;border-radius:0;cursor:pointer}
.aw-open:hover{background:#f6f8f8;color:inherit}
.aw-open:focus-visible,.aw-box:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.aw-resrow .aw-rest{display:flex;gap:10px;padding:10px 12px 10px 4px}
.aw-resrow{background:#f1f5f4}
.aw-date{flex:none;width:68px;display:flex;flex-direction:column;font-size:12px;line-height:1.3;color:var(--sub)}
.aw-date .aw-md{font-size:13.5px;font-weight:600;color:var(--ink)}
.aw-date.aw-nodatecol .aw-md{font-size:12px}
.aw-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* The course tag sits at the start of the title, which flows on beside it. */
.aw-head{display:block}
.aw-head .tag{margin-right:7px;vertical-align:1px}
.aw-title{font-size:14px;line-height:1.4;font-weight:500;overflow-wrap:anywhere}
.aw-line{font-size:12.5px;color:var(--sub);line-height:1.4}
.aw-badges{display:flex;flex-wrap:wrap;gap:5px}
.aw-badge{display:inline-block;font-size:11.5px;font-weight:600;line-height:1.3;padding:2px 7px;border-radius:4px;border:1px solid transparent}
.aw-badge-pastdue{background:#fdf0d0;color:#7a2e0b}
.aw-badge-confirm{background:#fff;color:#7a420b;border:1px dashed #b06b1a}
.aw-badge-waiting{background:#eceff3;color:#374151}
.aw-badge-suggest{background:var(--accent-bg);color:var(--accent);border:1px dashed var(--accent)}
.aw-flag{font-size:12px;color:#7a420b}
.aw-chain{font-size:12px;color:var(--sub)}
.aw-row.done .aw-title{text-decoration:line-through;color:var(--done)}
.aw-note .aw-title{font-size:13px;color:var(--sub);font-style:italic}
.aw-parts{padding:0 0 8px 82px}
.aw-part{display:flex;align-items:flex-start;gap:4px}
.aw-part .aw-box{padding-top:12px}
.aw-ptext{display:flex;flex-direction:column;padding-top:10px;font-size:13px}
.aw-part.done .aw-pt{text-decoration:line-through;color:var(--done)}
.aw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the details: full screen on a phone or tablet, a side panel on a computer */
.aw-details{background:var(--card);color:var(--ink);font-size:14px}
.aw-dtop{display:flex;justify-content:flex-end}
.aw-dclose,.aw-dtoggle{min-height:44px;min-width:44px;padding:8px 16px;font-size:14px}
.aw-dkind{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);font-weight:600}
.aw-dtitle{font-size:19px;line-height:1.3;margin:8px 0 12px;overflow-wrap:anywhere}
.aw-dlink{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:8px;background:var(--accent);
  color:#fff;font-weight:600;text-decoration:none;margin-bottom:12px}
.aw-dlink:hover{filter:brightness(1.15)}
.aw-dlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.aw-dl{display:grid;grid-template-columns:78px 1fr;gap:10px 12px;margin:6px 0 14px}
.aw-dl dt{font-size:12.5px;color:var(--sub)}
.aw-dl dd{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;overflow-wrap:anywhere}
.aw-dsub{font-size:13px;color:var(--sub)}
.aw-dstatus{font-weight:600}
.aw-dflag{border:1px dashed #b06b1a;border-radius:8px;padding:8px 12px;margin-bottom:14px}
.aw-dflag p{margin:2px 0;font-size:13px}
.aw-dflagnote{color:#7a420b}
.aw-dsource h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin:0 0 4px}
.aw-dsource p{font-size:13px;color:var(--sub);margin:0}
html.aw-lock,html.aw-lock body{overflow:hidden}

@media (max-width:1023.98px){
  .aw-details{position:fixed;inset:0;z-index:55;overflow:auto;padding:12px 16px 40px}
  .aw-dtop{justify-content:flex-start}
}
@media (min-width:1024px){
  body.aw-wide #planner,body.aw-wide #jw-bar{max-width:1240px}
  .aw-layout.aw-open{display:grid;grid-template-columns:minmax(0,820px) 380px;gap:24px;align-items:start;justify-content:center}
  .aw-details{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;border:1px solid var(--line);
    border-radius:var(--radius);padding:12px 18px 18px}
}
@media (max-width:600px){
  .aw-date{width:56px}
  .aw-parts{padding-left:60px}
  .aw-seccap{margin-left:0;flex-basis:100%}
}
.aw-row.aw-selected{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
/* 44 px targets for what All work shows that the planner draws: the tab bar,
   and the slot pickers under "My assignments". Hosted page only. */
#tabs .tab{min-height:44px}
#aw-slots .opt{display:flex;align-items:center;gap:8px;min-height:44px}
#aw-slots .opt label{flex:1;min-height:44px;display:flex;align-items:center;cursor:pointer}
#aw-slots .opt input[type=checkbox]{width:18px;height:18px}
#aw-slots select,#aw-slots input[type=date]{min-height:44px}

/* --- Home (Code 11) ---------------------------------------------------------------
   One question: where do I start? The where-you-are line across the top;
   progress and Needs attention side by side on a computer; the starting
   places in a row. One column on a phone, in that order. */
.hm-date{font-size:12.5px;font-weight:600;color:var(--sub);margin:0}
.hm-where{font-size:22px;line-height:1.3;color:var(--accent);margin:4px 0 6px}
.hm-next{font-size:14.5px;margin:0 0 18px}
.hm-grid{display:grid;gap:12px;margin-bottom:24px}
.hm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.hm-h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin:0 0 10px;font-weight:600}
.hm-prog + .hm-prog{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hm-proglabel{margin:0;font-size:14px}
.hm-progname{font-weight:600}
.hm-prog .meter{margin:8px 0 6px}
.hm-progcourses{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12.5px;color:var(--sub)}
.hm-attnlist{display:flex;flex-direction:column;gap:8px}
.hm-attnbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;text-align:left;
  padding:9px 13px;font-size:14px;border-radius:8px}
.hm-attnlabel{font-weight:600}
.hm-attnstep{font-size:12.5px;font-weight:400}
.hm-attn-pastdue{background:#fdf0d0;border-color:#efd59a;color:#7a2e0b}
.hm-attn-confirm{background:#fff;border:1px dashed #b06b1a;color:#7a420b}
.hm-attn-waiting{background:#eceff3;border-color:#d8dde3;color:#374151}
.hm-attnbtn:hover{border-color:var(--accent)}
.hm-attn-pastdue:hover{color:#7a2e0b}.hm-attn-confirm:hover{color:#7a420b}.hm-attn-waiting:hover{color:#374151}
.hm-attnwait{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.hm-attnlist + .hm-attnwait{margin-top:10px}
.hm-h2{font-size:18px;line-height:1.3;margin:0 0 2px;color:var(--ink)}
.hm-sub{font-size:13px;color:var(--sub);margin:0 0 12px}
.hm-none{font-size:14px;margin:0;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.hm-cards{display:grid;gap:10px}
.hm-startcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%;min-height:44px;margin:0;text-align:left;
  padding:13px 15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--ink)}
button.hm-startcard:hover{border-color:var(--accent);color:var(--ink)}
.hm-reason{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700;line-height:1.35}
.hm-cardhead .tag{margin-right:7px;vertical-align:1px}
.hm-cardtitle{font-weight:600;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.hm-cardline{font-size:12.5px;color:var(--sub)}
.hm-empty .hm-cardtext{font-size:13.5px;color:var(--ink)}
.hm-openall{margin:20px 0 10px}
button.hm-primary{min-height:44px;padding:8px 20px;background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;font-size:14px}
button.hm-primary:hover{color:#fff;filter:brightness(1.15)}
.hm-standing{font-size:12.5px;color:var(--sub);margin:0}
@media (min-width:1024px){
  .hm-grid{grid-template-columns:1fr 1fr;align-items:start}
  .hm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* All work's pointer to Home (Code 11). */
.aw-pointer{margin:0 0 10px}
button.aw-tohome{min-height:44px;padding:8px 14px;font-size:13.5px;font-weight:600;background:var(--accent-bg);border-color:transparent;color:var(--accent)}
button.aw-tohome:hover{border-color:var(--accent)}

/* The tab bar on a phone (Code 11): an edge with more tabs past it fades. */
#tabs.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
#tabs.more-left{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
#tabs.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* Catching up (Code 13): "Bring your progress into Jimmy". A centred panel on
   a computer, the whole screen on a phone; every target at least 44 px. */
#jw-catchup .cu-card{max-width:560px}
.cu-choices{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cu-h2{font-size:16px;margin:14px 0 4px;color:var(--ink)}
button.cu-choice{min-height:44px;text-align:left;font-size:14px;padding:10px 14px;color:var(--ink)}
button.cu-choice:hover{border-color:var(--accent)}
button.cu-btn{min-height:44px;padding:8px 16px;font-size:14px}
.cu-steps{font-size:14px;line-height:1.5;padding-left:22px;margin:8px 0}
.cu-steps li{margin-bottom:8px}
.cu-past{font-size:14px;padding-left:20px;margin:8px 0}
.cu-past li{margin-bottom:4px}
.cu-note{font-weight:600}
@media (max-width:600px){
  #jw-catchup{padding:0;background:var(--card)}
  #jw-catchup .cu-card{margin:0;max-width:none;min-height:100%;border:none;border-radius:0}
}
/* The way back to it, under Past due on All work and Home. */
.cu-linkline{margin:0;padding:0 15px 6px}
.hm-card .cu-linkline{padding:6px 0 0}
button.cu-link{min-height:44px;padding:8px 0;border:none;background:none;color:var(--accent);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
button.cu-link:hover{color:var(--accent);filter:brightness(1.2)}
#jw-catchup-open{min-height:44px}
/* All work's Undo bar, after "Mark these as done". */
.aw-undo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;padding:8px 14px;background:var(--accent-bg);
  border:1px solid var(--accent);border-radius:var(--radius);font-size:14px;color:var(--ink)}
.aw-undo button{min-height:44px;padding:6px 16px;font-size:14px;font-weight:600}