/* SwiftUI Quest — styles for the things that belong to one reader: how far they have got,
   their own dates (assets/schedule.js) and their account (assets/account.js). Kept apart from
   style.css so the course's look and these controls can change without touching each other. */

/* a button that reads as a link */
.linkbtn{
  background:none; border:none; border-bottom:1px solid rgba(242,116,95,.35); padding:0; margin:0;
  font:inherit; color:var(--swiftsoft); cursor:pointer; border-radius:0;
}
.linkbtn:hover{border-bottom-color:var(--swiftsoft);}
.linkbtn:focus-visible, .startbtn:focus-visible, .planform input:focus-visible{outline:2px solid var(--swift); outline-offset:3px;}

/* ---------- how far through the course ---------- */
/* the thin line at the very top of every course page */
.progressline{position:fixed; top:0; left:0; right:0; height:3px; z-index:5; background:rgba(233,230,223,.07);}
.progressline i{display:block; height:100%; width:0; background:var(--swift); transition:width .3s;}

/* the panel at the top of the calendar: the bar, and the reader's dates (or the way to start) */
.course{margin:34px 0 0; border:1px solid var(--rule); background:var(--panel); padding:18px 20px 16px;}
.progress{height:10px; background:var(--codebg); border:1px solid var(--rule); border-radius:5px; overflow:hidden;}
.progress i{display:block; height:100%; width:0; background:var(--swift); transition:width .3s;}
.course-line{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 22px; margin-top:14px;}
#progresstext{font-family:"Spectral SC"; font-weight:500; font-size:13px; letter-spacing:.16em; white-space:nowrap;}
.course + .today{margin-top:18px;}

/* ---------- the reader's dates: the Start button, the dates once chosen, and the form ---------- */
#startctl{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-width:0; font-size:15px;}
#startctl.editing{flex:1 1 100%;}
.startbtn{
  background:var(--swift); color:#1b1c20; border:none; border-radius:0; cursor:pointer;
  font-family:"Spectral SC"; font-weight:600; font-size:13.5px; letter-spacing:.16em; padding:10px 22px;
  outline:1px solid var(--swift); outline-offset:3px; transition:background .15s;
}
.startbtn:hover{background:#ff6a50;}
.startbtn:disabled{background:rgba(233,230,223,.16); color:var(--ink2); outline-color:transparent; cursor:default;}
.plannote{color:var(--ink2); font-style:italic; font-weight:300;}
.plandates{font-weight:300;}

.planform{flex:1 1 100%; display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:14px 26px; align-items:end; margin-top:4px;}
.planrow{display:flex; flex-direction:column; gap:5px; min-width:0;}
.planform label, .planlabel{font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.2em; color:var(--ink2);}
.planform input[type="date"]{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--codebg);
  border:1px solid var(--rule); padding:6px 10px; border-radius:0; color-scheme:dark; min-height:36px; min-width:0;
}
.planrow.paces{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 10px;}
.planrow.paces .planlabel{margin-right:4px;}
.planpreview{grid-column:1 / -1; margin:0; color:var(--ink2); font-style:italic; font-weight:300;}
.planpreview.bad{color:var(--swiftsoft); font-style:normal;}
.planrow.planbtns{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 20px;}

/* a calendar row before the reader has dates: just "Day 1", promoted to where the date would be */
.day .when .date:empty{display:none;}
.day .when .date:empty + .dn{color:var(--swiftsoft);}

/* ---------- the account strip (top right of every page) ---------- */
.sheet{position:relative;}
.acct{
  position:absolute; top:20px; right:34px; max-width:calc(100% - 68px);
  display:flex; align-items:baseline; gap:12px; white-space:nowrap;
  font-family:"Spectral SC"; font-weight:500; font-size:12px; letter-spacing:.16em; color:var(--ink2);
}
.acct:empty{display:none;}
.acct .who{overflow:hidden; text-overflow:ellipsis; min-width:0; text-transform:lowercase;}
.acct .state{color:var(--ink2); opacity:.75;}
.acct .state:empty{display:none;}
.acct .state.waiting{color:var(--swiftsoft); opacity:1;}
.acct .linkbtn{font-family:"Spectral SC"; letter-spacing:.16em; flex:none;}

/* under the counters on the calendar page: where progress is being kept */
.acct-note{
  margin:0; max-width:250px; text-align:center; font-size:14px; line-height:1.5;
  font-weight:300; color:var(--ink2); overflow-wrap:anywhere;
}
.acct-note:empty{display:none;}

/* a short message that goes away by itself */
.acct-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:10;
  width:max-content; max-width:min(560px, calc(100vw - 32px));
  background:var(--panel); color:var(--ink); border:1px solid var(--swift);
  padding:11px 18px; font-size:15px; line-height:1.45; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.acct-toast[hidden]{display:none;}

@media(max-width:700px){
  .acct{top:13px; right:18px; max-width:calc(100% - 36px); font-size:11px; gap:10px;}
  .acct-note{flex-basis:100%; max-width:none; text-align:left;}
  .course{padding:16px 14px 14px;}
  .planform{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 12px;}
  .planform input[type="date"]{width:100%;}
  .startbtn{padding:11px 18px;}
  /* style.css puts " · " before the day number on a phone, to follow the date; with no date it leads */
  .day .when .date:empty + .dn::before{content:none;}
}