/* Lineup -- every page's base, the boss's working screens, and the team's
   phone pages.

   THE SHOP FRONT (the sales page, signing in, terms) wears shopfront.css on
   top of this, generated by the JTS kit and scoped to body.shopfront. The
   WORKING SCREENS are dark, quiet and plain, like every JTS tool: the
   schedule is read at a glance on a phone by the fryer, so the time of a
   shift is the loudest thing on any screen.

   One accent, a marker orange -- the colour of a shift written on a
   whiteboard -- and eight position colours, used only as the thin bar down
   the side of a shift and the name of its position. */

:root {
  --bg:        #111418;
  --surface:   #181c22;
  --surface-2: #1f242c;
  --surface-3: #262c35;
  --line:      #2c333d;
  --ink:       #eef1f5;
  --dim:       #9aa4b2;
  --accent:    #ff9f43;           /* the marker */
  --on-accent: #1a1206;
  --good:      #6fd08f;
  --warn:      #e8b04b;
  --bad:       #ef6461;
  --today:     #221c14;           /* an opaque tint: sticky cells need one */
  --r:         12px;
}

/* The position colours. Picked apart from each other and from the orange,
   and bright enough to read as text on the dark ground. */
.rc0 { --rc: #6aa9ff; }
.rc1 { --rc: #7bd88f; }
.rc2 { --rc: #f78fb3; }
.rc3 { --rc: #c7a2ff; }
.rc4 { --rc: #5fd4d4; }
.rc5 { --rc: #ffd166; }
.rc6 { --rc: #ff9e7a; }
.rc7 { --rc: #b8c4d6; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 22px 90px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
.lead { font-size: 17px; max-width: 62ch; }
.tiny { font-size: 12.5px; }
.dim { color: var(--dim); }
.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---- the public header (layout.html) ------------------------------------ */
.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: inherit;
         text-decoration: none; width: fit-content; }
.jts-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; }
.say-btn {
  margin-left: auto;
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
}
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap; justify-content: flex-end; }
.sf-nav a { color: var(--dim); text-decoration: none; font-size: 14px; }
.sf-nav .sf-tools { display: inline-flex; align-items: center; gap: 7px; }
.sf-nav .sf-tools svg { width: 16px; height: 16px; }
.cog { margin-left: 6px; text-decoration: none; font-size: 19px;
       color: var(--dim); padding: 2px 6px; }
.cog:hover { color: var(--ink); }
.cog.on { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; }

.pagehead { margin: 26px 0 10px; }
.pagehead h1 { margin: 0 0 4px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 18px 0;
}
.card h2 { margin: 0 0 10px; font-size: 20px; }
.card h3 { margin: 18px 0 4px; font-size: 16px; }
details.card > summary { cursor: pointer; }

/* ---- forms ---------------------------------------------------------------- */
.fld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px;
       min-width: 0; border: 0; padding: 0; }
.fld-label { font-weight: 600; font-size: 14px; }
.fld-label i { font-style: normal; color: var(--dim); font-weight: 400; }
.fld-note { color: var(--dim); font-size: 13.5px; margin: 4px 0 14px; max-width: 62ch; }
.fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
           gap: 0 16px; }

/* EVERY KIND OF BOX, including one with no type at all: `input[type=text]`
   does not match <input name="x">, which is how Shop Rate once shipped ten
   raw white boxes on a dark page. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], input[type=url], input:not([type]),
select, textarea {
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  min-width: 0;
}
select { padding-right: 8px; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }

button, .go {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.go.wide { display: block; width: 100%; text-align: center; padding: 13px 18px; font-size: 16px; }
.btn-quiet, button.btn-quiet {
  display: inline-block;
  background: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { border-color: var(--dim); }
.danger, button.danger {
  background: none;
  color: var(--bad);
  border: 1px solid rgba(239, 100, 97, .5);
  border-radius: 9px;
  padding: 8px 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.danger:hover { background: rgba(239, 100, 97, .1); }
.linkish { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); }

/* ---- messages -------------------------------------------------------------- */
.warn {
  border-left: 4px solid var(--warn);
  background: rgba(232, 176, 75, .1);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
}
.warn.bad { border-color: var(--bad); background: rgba(239, 100, 97, .1); }
.warn.good { border-color: var(--good); background: rgba(111, 208, 143, .1); }
.notice {
  max-width: 1180px;
  margin: 8px auto;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
}
.notice.warn-line { border-color: var(--warn); }

/* ---- tables and pills (the desk) ------------------------------------------- */
.scroll { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line);
                   text-align: left; vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--dim); font-weight: 600; }
.desk section { margin: 26px 0; }
.desk .tbl td form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.desk .tbl select { width: auto; padding: 5px 8px; font-size: 13px; }
.desk .tbl button { padding: 5px 10px; font-size: 13px; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.pill.new, .pill.trial { border-color: var(--accent); color: var(--accent); }
.pill.good, .pill.paying, .pill.comped { border-color: var(--good); color: var(--good); }
.pill.bad, .pill.lapsed, .pill.stopped, .pill.trialover { border-color: var(--bad); color: var(--bad); }

.foot { max-width: 1180px; margin: 60px auto 0; padding-top: 18px;
        border-top: 1px solid var(--line); }
.foot a { color: var(--dim); }

/* ===========================================================================
   THE BOSS'S SCREENS
   =========================================================================== */
.app-top {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--ink);
             text-decoration: none; min-width: 0; }
.app-brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-brand-words b { font-size: 16px; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; max-width: 42vw; }
.app-brand-words span { font-size: 12px; color: var(--accent); font-weight: 700;
                        letter-spacing: .06em; text-transform: uppercase; }
/* The brand and the two tabs sit left; Subscribe and the gear sit right. */
.app-nav { display: flex; gap: 4px; margin-left: 8px; margin-right: auto; }
.app-nav a {
  color: var(--dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  padding: 7px 12px;
  border-radius: 8px;
}
.app-nav a:hover { color: var(--ink); background: var(--surface-2); }
.app-nav a.on { color: var(--ink); background: var(--surface-3); }
.pay-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 159, 67, .45);
  border-radius: 8px;
  padding: 5px 11px;
}
.app-top .cog { margin-left: 0; }

.app-banner, .app-flash, .app-tip {
  max-width: 1320px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.app-banner { border-color: rgba(255, 159, 67, .5); }
.app-banner.warn { border-color: rgba(239, 100, 97, .55); background: rgba(239, 100, 97, .08); }
.app-flash { border-color: rgba(111, 208, 143, .5); background: rgba(111, 208, 143, .08); }
.app-tip { border-color: rgba(255, 159, 67, .5); background: rgba(255, 159, 67, .07); margin: 12px 0; }
.app-main { max-width: 1320px; margin: 0 auto; }
.app-bg .foot { max-width: 1320px; }

.empty {
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  margin: 18px 0;
}
.empty h2 { margin: 0 0 6px; }

/* ---- the week ------------------------------------------------------------ */
.wk-head { display: flex; flex-wrap: wrap; align-items: flex-end;
           justify-content: space-between; gap: 10px 18px; margin: 18px 0 12px; }
.wk-title h1 { margin: 0; font-size: 28px; font-variant-numeric: tabular-nums; }
.wk-title p { margin: 2px 0 0; }
.wk-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin: 0 0 12px; }
.wk-tools form { margin: 0; }
.wk-more { position: relative; }
.wk-more > summary {
  list-style: none;
  cursor: pointer;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
}
.wk-more > summary::-webkit-details-marker { display: none; }
.wk-more[open] > summary { color: var(--ink); }
.wk-more form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 8px; padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface);
}

.wk-note { margin: 0 0 14px; }
.wk-note .fld { margin: 0; }
.wk-note-row { display: flex; gap: 8px; }
.wk-note-row input { flex: 1 1 auto; }
.wk-note-row button { flex: none; }

.wk-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.wk-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}
.wk-grid th, .wk-grid td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px;
  vertical-align: top;
  text-align: left;
}
.wk-grid tr > :last-child { border-right: 0; }
.wk-grid thead th { background: var(--surface-2); font-size: 13px; font-weight: 600;
                    padding: 9px 8px; white-space: nowrap; }
.wk-grid thead th em, .wk-day h2 em, .crew-date em {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--on-accent); background: var(--accent);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.wk-grid .who {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 170px;
  background: var(--surface);
}
.wk-grid thead .who { background: var(--surface-2); z-index: 2; }
.wk-grid tbody .who b { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.wk-grid tbody .who .dim { font-size: 12px; font-weight: 400; }
.wk-grid td.today, .wk-grid th.today { background: var(--today); }
.wk-grid thead th.today { background: #2a2217; }
.wk-grid tr.gone .who b { color: var(--dim); }
.wk-grid tfoot th, .wk-grid tfoot td {
  font-size: 12.5px; color: var(--dim); font-weight: 600; border-bottom: 0;
  background: var(--surface-2);
}
.wk-grid tfoot td span { display: block; font-weight: 400; }

/* A shift. The time is the loudest thing; the position rides beside it in
   its colour; a note is a quiet line underneath. */
.chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px 6px;
  padding: 5px 7px;
  margin: 0 0 5px;
  border-radius: 7px;
  background: var(--surface-2);
  border-left: 3px solid var(--rc, var(--dim));
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.25;
  min-width: 0;
}
a.chip:hover { background: var(--surface-3); }
a.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip .t { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip .r { color: var(--rc, var(--dim)); font-weight: 600; overflow-wrap: anywhere; }
.chip .n { flex-basis: 100%; color: var(--dim); font-size: 11.5px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Always visible, never hidden with opacity: a control that is invisible
   but still pressable is how rows get deleted by accident. */
.add {
  display: block;
  text-align: center;
  padding: 2px 0;
  border: 1px dashed transparent;
  border-radius: 7px;
  color: #6b7583;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.25;
}
/* Quiet until the cell is pointed at -- but always there and always
   pressable, which a touch screen with no pointer needs. */
.wk-grid td:hover .add { border-color: var(--line); color: var(--dim); }
/* An empty day keeps a faint box, so it reads as a place to add one. */
.wk-grid td .add:only-child { border-color: #262c35; }
.add:hover, .add:focus-visible { color: var(--accent); border-color: var(--accent); }

/* THE SAME WEEK, a day at a time, on a phone. */
.wk-days { display: none; }
.wk-daytabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.wk-daytabs a {
  flex: 1 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--dim);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
}
.wk-daytabs a b { font-size: 12px; }
.wk-daytabs a span { font-size: 17px; font-weight: 700; color: var(--ink);
                     font-variant-numeric: tabular-nums; }
.wk-daytabs a.today { border-color: var(--accent); }
.wk-daytabs a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wk-daytabs a.on span { color: var(--on-accent); }
.wk-day { display: none; }
.wk-day.on { display: block; }
.wk-day h2 { font-size: 18px; margin: 4px 0 10px; }
.wk-day h2 .dim { display: block; font-size: 13px; font-weight: 400; margin-top: 2px; }
.wk-daylist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
              border-radius: var(--r); background: var(--surface); }
.wk-daylist li {
  display: grid;
  grid-template-columns: minmax(84px, 30%) 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.wk-daylist li:last-child { border-bottom: 0; }
.wk-daylist li.gone .wk-dayname { color: var(--dim); }
.wk-dayname { overflow-wrap: anywhere; padding-top: 4px; }
.wk-daychips .chip { margin-bottom: 4px; }
.wk-daychips .off { display: inline-block; color: var(--dim); padding-top: 4px; font-size: 14px; }
.wk-daylist .add { padding: 5px 10px; font-size: 13.5px; white-space: nowrap;
                   border-color: var(--line); color: var(--dim); }

@media (max-width: 759px) {
  body { padding: 0 14px 70px; }
  .wk-grid-wrap { display: none; }
  .wk-days { display: block; }
  .app-brand { margin-right: auto; }
  .app-nav { margin: 0; order: 3; width: 100%; }
  .app-nav a { flex: 1; text-align: center; background: var(--surface); }
  .wk-title h1 { font-size: 23px; }
}

/* ---- the shift form (a pop-up on the board, a page without script) ------ */
.sh-dialog {
  width: min(580px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  overflow: auto;
}
.sh-dialog::backdrop { background: rgba(4, 6, 9, .66); }
.sh-page { max-width: 620px; margin: 18px 0; }
.sh-page .sh-form { background: var(--surface); border: 1px solid var(--line);
                    border-radius: 16px; }
.sh-form { padding: 16px 20px 20px; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-head h2 { margin: 2px 0 12px; font-size: 20px; }
.sh-x {
  background: none;
  color: var(--dim);
  font-size: 26px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 8px;
}
.sh-x:hover { color: var(--ink); background: var(--surface-2); }
.sh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sh-row .fld { margin-bottom: 12px; }
.sh-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.preset {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rc, var(--dim));
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.preset:hover { background: var(--surface-3); }
.sh-read {
  min-height: 22px;
  margin: -4px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sh-read.bad { color: var(--bad); font-weight: 600; }
.sh-also { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 14px; }
.sh-also legend { font-size: 13.5px; font-weight: 600; padding: 0 4px; }
.sh-also-days { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sh-also-days .check { font-size: 14px; }
.sh-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sh-buttons .btn-quiet { margin-left: auto; }
/* The day, with a day back and a day on either side. The script shows the
   arrows; without it they stay hidden and the box still works. Quiet, not
   the orange every <button> gets by default. */
/* Who and Day share a row; the day has two arrows beside it, so it gets
   the larger share or its words are cut off. */
.sh-row.sh-whoday { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.day-pick { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.day-pick select { flex: 1; }
.day-step, button.day-step {
  flex: none;
  width: 40px;
  padding: 0;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.day-step:hover:not(:disabled) { background: var(--surface-3); border-color: var(--dim); }
.day-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 480px) {
  .sh-row, .sh-row.sh-whoday { grid-template-columns: 1fr; }
  .sh-row.sh-times { grid-template-columns: 1fr 1fr; }
  .sh-form { padding: 14px 14px 18px; }
}

/* ---- the team ------------------------------------------------------------- */
.link-card {
  border: 1px solid rgba(255, 159, 67, .55);
  background: rgba(255, 159, 67, .07);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 18px 0;
}
.link-card h2 { margin: 0 0 6px; font-size: 20px; }
.made-link {
  word-break: break-all;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.team-list { list-style: none; margin: 0; padding: 0; }
.team-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.team-list > li:first-child { border-top: 0; }
.team-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.team-who b { font-size: 16px; overflow-wrap: anywhere; }
.team-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.team-acts form { margin: 0; }
.team-edit > summary {
  list-style: none;
  cursor: pointer;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
}
.team-edit > summary::-webkit-details-marker { display: none; }
.team-edit[open] { flex-basis: 100%; }
.team-edit[open] > summary { color: var(--ink); display: inline-block; }
.team-edit form { margin-top: 10px; }
.code {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  color: var(--accent);
}

/* ---- settings --------------------------------------------------------------- */
.radio-set { gap: 8px; }
.radio-set legend { margin-bottom: 6px; }
.save-sum { color: var(--dim); font-size: 14px; }

/* ===========================================================================
   THE TEAM'S PHONE PAGES
   =========================================================================== */
.crew-bg { padding: 0; }
.crew-wrap { max-width: 560px; margin: 0 auto; padding: 14px 14px 60px; }
.crew-card {
  margin: 28px 0;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.crew-card h1 { margin: 2px 0 10px; font-size: 26px; }
.crew-biz { color: var(--accent); font-weight: 700; font-size: 12.5px;
            letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.crew-preview {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  font-size: 14px;
}
.crew-top { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 12px; margin: 6px 0 14px; }
.crew-top h1 { margin: 2px 0 0; font-size: 26px; overflow-wrap: anywhere; }
.crew-top form { margin: 4px 0 0; flex: none; }
.crew-out {
  background: none;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
}
.crew-welcome, .crew-note, .crew-changes {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 15px;
}
.crew-welcome { border: 1px solid rgba(111, 208, 143, .5); background: rgba(111, 208, 143, .08); }
.crew-note { border: 1px solid var(--line); background: var(--surface); }
.crew-note.is-new { border-color: var(--accent); }
.crew-note b { display: block; font-size: 12.5px; color: var(--accent);
               letter-spacing: .05em; text-transform: uppercase; }
.crew-changes { border: 1px solid var(--accent); background: rgba(255, 159, 67, .08); }
.crew-changes h3 { margin: 0 0 6px; font-size: 15px; color: var(--accent); }
.crew-changes ul { margin: 0; padding-left: 18px; }
.crew-changes li { margin: 3px 0; font-variant-numeric: tabular-nums; }
.crew-new {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: 1px;
}
.crew-view { display: flex; gap: 0; margin: 4px 0 14px; border: 1px solid var(--line);
             border-radius: 10px; overflow: hidden; }
.crew-view a {
  flex: 1;
  text-align: center;
  padding: 9px 10px;
  color: var(--dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
}
.crew-view a.on { background: var(--surface-3); color: var(--ink); }
.crew-weekbox { margin: 0 0 22px; }
.crew-week { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
             gap: 2px 10px; font-size: 19px; margin: 8px 0 8px; }
.crew-week span { font-size: 13.5px; font-weight: 400; color: var(--dim);
                  font-variant-numeric: tabular-nums; }
.crew-days { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
             border-radius: 14px; background: var(--surface); overflow: hidden; }
.crew-day {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.crew-day:first-child { border-top: 0; }
.crew-day.is-today { background: var(--today); box-shadow: inset 3px 0 0 var(--accent); }
.crew-day.is-past { opacity: .5; }
.crew-date { display: flex; flex-direction: column; line-height: 1.2; }
.crew-date b { font-size: 16px; }
.crew-date span { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.crew-date em { align-self: flex-start; margin: 4px 0 0; }
.crew-body { min-width: 0; }
.crew-mine, .crew-team ul { list-style: none; margin: 0; padding: 0; }
.crew-shift { margin: 0 0 8px; }
.crew-shift:last-child { margin-bottom: 0; }
.crew-time { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
             line-height: 1.25; }
.crew-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13.5px; color: var(--dim); }
.crew-role { color: var(--rc, var(--dim)); font-weight: 700; }
.crew-over { color: var(--warn); }
.crew-snote { display: block; font-size: 13.5px; color: var(--ink); opacity: .85; }
.crew-offtext { margin: 2px 0 0; color: var(--dim); font-size: 15px; }
.crew-day.is-off .crew-offtext { font-size: 16px; }
.crew-team { display: none; }
.view-team .crew-team { display: block; margin-top: 8px; padding-top: 8px;
                        border-top: 1px dashed var(--line); }
.crew-team .crew-shift { display: grid; grid-template-columns: auto 1fr; gap: 0 8px;
                         align-items: baseline; margin-bottom: 5px; }
.crew-team .crew-time { font-size: 14px; font-weight: 600; grid-column: 1; grid-row: 1; }
.crew-team .crew-who { font-weight: 600; font-size: 14px; grid-column: 2; grid-row: 1;
                       overflow-wrap: anywhere; }
.crew-team .crew-meta { grid-column: 1 / -1; font-size: 12.5px; }
.crew-team .crew-len { display: none; }
.crew-team .crew-offtext { font-size: 13.5px; }
.crew-foot { color: var(--dim); font-size: 13.5px; border-top: 1px solid var(--line);
             padding-top: 14px; margin-top: 8px; }
.crew-foot b { color: var(--ink); }
.crew-foot .crew-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.crew-pin { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
            margin: 12px 0 4px; background: var(--surface); }
.crew-pin > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.crew-pin[open] > summary { margin-bottom: 6px; }
.crew-pin form { margin-top: 8px; }

/* ===========================================================================
   THE SALES PAGE'S OWN PIECES (the rest is shopfront.css)
   =========================================================================== */
.lu-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.lu-steps li {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 44px 18px 18px;
  background: var(--surface);
}
.lu-steps li::before {
  content: counter(list-item);
  position: absolute;
  top: 12px;
  left: 18px;
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.lu-steps h3 { margin: 0 0 6px; font-size: 17px; }
.lu-steps p { margin: 0; color: var(--dim); }

.lu-show { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
           gap: 28px 40px; align-items: start; }
.lu-phone { margin: 0; }
.lu-phone-screen {
  border: 10px solid #05070a;
  border-radius: 34px;
  background: var(--bg);
  padding: 16px 12px 20px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45), 0 0 0 1px #2b323c;
  font-size: 15px;
  line-height: 1.5;
}
.lu-phone figcaption { margin-top: 10px; }
.crew-bar { display: flex; justify-content: space-between; align-items: baseline;
            margin: 0 2px 10px; }
.crew-bar b { color: var(--accent); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.crew-bar span { font-weight: 700; font-size: 17px; }
/* The sales page styles its headings bigger; inside the phone they must be
   the real page's size, or the picture is not of the real page. */
body.shopfront .lu-phone-screen h2.crew-week { font-size: 19px; line-height: 1.15; margin: 8px 0; }
body.shopfront .lu-phone-screen h3 { font-size: 15px; }
body.shopfront .lu-phone-screen p, body.shopfront .lu-phone-screen li { max-width: none; }
.lu-points { display: grid; gap: 18px; }
.lu-points div { border-top: 2px solid var(--accent); padding-top: 12px; }
.lu-points b { display: block; margin: 0 0 4px; font-size: 17px; }
.lu-points p { margin: 0; color: var(--dim); }
.lu-price { display: grid; gap: 18px 36px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.lu-price .amount, .lu-pay .amount { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800;
                                     letter-spacing: -.02em; line-height: 1; margin: 0; }
.lu-price .amount small, .lu-pay .amount small { font-size: 16px; font-weight: 600;
                                                 color: var(--dim); letter-spacing: 0; }
.lu-price ul { margin: 12px 0 0; padding-left: 18px; }
.lu-price li { margin: 0 0 6px; }
.lu-rule { border-left: 4px solid var(--accent); padding: 10px 14px;
           background: var(--surface-2); border-radius: 6px; margin-top: 0; }
.lu-pay { margin: 12px 0; }
.lu-start { max-width: 820px; }
.lu-contact { font-size: 15px; }
.lu-contact a { font-weight: 600; }
@media (max-width: 820px) {
  .lu-show { grid-template-columns: minmax(0, 1fr); }
  .lu-phone { max-width: 380px; }
}

/* ===========================================================================
   THE WEEK ON PAPER
   =========================================================================== */
.print-bg { background: #fff; color: #111; padding: 18px; }
.print-bar { display: flex; justify-content: space-between; align-items: center;
             margin: 0 0 14px; }
.print-bar .linkish { color: #444; }
.print-title { font-size: 22px; margin: 0 0 12px; color: #111; }
.print-title span { display: block; font-size: 15px; font-weight: 600; color: #555; }
.print-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #111; }
.print-grid th, .print-grid td { border: 1px solid #999; padding: 5px 6px; vertical-align: top; text-align: left; }
.print-grid thead th { background: #eee; }
.print-grid tbody th { white-space: nowrap; }
.print-grid td div { white-space: nowrap; font-variant-numeric: tabular-nums; }
.print-grid i { color: #555; }
.print-note { margin: 12px 0 0; font-size: 14px; color: #111; }
.print-foot { margin: 14px 0 0; font-size: 12px; color: #555; }
@media print {
  .print-bar { display: none; }
  .print-bg { padding: 0; }
  @page { size: landscape; margin: 12mm; }
}


/* jts-more: written by jtsapps_site/kit/push_hublink.py */
/* The way out to the rest of the JTS tools, top of every app's Settings.
   Quiet -- it is a door, not a thing being sold, so it is outlined rather
   than filled and sits where the gear in the header already is. Its own
   colours: the six stylesheets do not share a button rule. */
/* NO NEGATIVE MARGIN. -8px pulled the button's box down over the
   <h1> by 4px -- harmless here because the button still won the
   hit test, but an overlapping box stealing a click is a fault
   this project has already chased once, and it is not worth
   carrying for four pixels. Measured clear at 1700 and 430 wide. */
.jts-more{display:flex;justify-content:flex-end;margin:0 0 2px}
.jts-more-btn{display:inline-block;text-decoration:none;
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--accent,#7bc043);background:transparent;
  border:1px solid var(--line,#2b323c)}
.jts-more-btn:hover{border-color:var(--accent,#7bc043);
  background:rgba(127,127,127,.10)}
/* end jts-more */