/* Porto front-end theme glue for the applicant side of the jobs portal.
   Porto (theme.css, theme-elements.css, skins/default.css) supplies the header, title band, footer, fonts and the Bootstrap 5 base.
   This file (1) defines the colour variables the page components use, (2) gives the old page markup (.card, .btn, .msg, bare inputs, tables)
   the Porto look, and (3) adds the few jobs-only pieces.  Page components are in jobs-front.css (generated from jobs.css). */
:root{
  --ink:#333333; --muted:#777777; --line:#DDDDDD;
  --accent:#0088CC; --accent-hover:#0077B3; --accent-dark:#0077B3; --accent-text:#0088CC; --accent-soft:#E8F4FA; --accent-icon:#0088CC; --blue:#0088CC; --on-accent:#fff;
  --ok:#3C763D; --okbg:#DFF0D8; --bad:#A94442; --badbg:#F2DEDE; --infobg:#D9EDF7;
  --gold:#FFC107; --gold-dark:#E0A800; --gold-soft:#FFF3CD; --gold-text:#856404; --sun:#FFF9E5;
  --btn-border:#CCCCCC; --radius:.25rem; --shadow:0 1px 1px rgba(0,0,0,.04);
}

/* ---- header: logo left, account links right */
.jobs-header .header-body{border-bottom:1px solid #e5e5e5;box-shadow:none}
.jobs-header .header-logo img{height:48px;width:auto}
.jobs-header .header-container{min-height:72px}
.jobs-header .header-nav-top .nav-link{font-size:.85rem;font-weight:600;padding:.5rem .75rem;color:#555}
.jobs-header .header-nav-top .nav-link .ico{margin-right:.4em;opacity:.7}
.jobs-header .header-nav-top a.nav-link:hover{color:var(--accent)}
.jobs-header .header-nav-top .who{color:#888;font-weight:500}
@media(max-width:575px){.jobs-header .header-nav-top .who{display:none}.jobs-header .header-logo img{height:40px}}
.devbanner{position:relative;z-index:1}

/* ---- page area */
.jobs-wrap{max-width:860px;margin:0 auto}
.jobs-wrap.wide{max-width:none}
.jobs-wrap a{text-decoration:none}
.jobs-wrap a:hover{text-decoration:underline}
.jobs-wrap h1{font-size:1.8rem;font-weight:600}
.jobs-wrap h2{font-size:1.25rem;font-weight:600}
.jobs-wrap h3{font-size:1.05rem;font-weight:600}
.jobs-wrap .ico{opacity:.8}
.page-header h1{font-size:1.9rem}

/* ---- cards */
.jobs-wrap .card{background:#fff;border:1px solid #ddd;border-top:3px solid var(--accent);border-radius:.25rem;box-shadow:0 1px 1px rgba(0,0,0,.04);padding:22px 26px;margin-bottom:20px;display:block}
.jobs-wrap .card.narrow{max-width:520px;margin-left:auto;margin-right:auto}
.jobs-wrap .card>h1:first-child,.jobs-wrap .card>h2:first-child{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #eee}
.jobs-wrap .home .card{margin-bottom:0;padding:20px}

/* ---- buttons */
.jobs-wrap .btn,button.btn,a.btn{display:inline-block;font-weight:600;font-size:.9rem;line-height:1.5;padding:.5rem 1.2rem;border-radius:.25rem;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;vertical-align:middle;text-align:center;text-decoration:none}
.jobs-wrap .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;text-decoration:none}
.jobs-wrap .btn.small{padding:.25rem .7rem;font-size:.82rem}
.jobs-wrap .btn.ghost{background:#fff;color:#444;border-color:#ccc}
.jobs-wrap .btn.ghost:hover{background:#f2f2f2;border-color:#bbb;color:#222}
.jobs-wrap .btn.attn{background:var(--gold);border-color:var(--gold-dark);color:#212529}
.jobs-wrap .btn.attn:hover{background:var(--gold-dark);color:#212529}
.jobs-wrap .btn[disabled]{opacity:.55;cursor:not-allowed}
.jobs-wrap .btn .ico{opacity:1;margin-right:.4em}
.jobs-wrap .btn .ico.after{margin:0 0 0 .4em}
.jobs-wrap .btn:not(:last-child){margin-right:6px}
.jobs-wrap .actions .btn,.jobs-wrap .copybox .btn{margin-right:0}
.jobs-wrap p .btn,.jobs-wrap td .btn{margin-top:3px;margin-bottom:3px}

/* ---- messages */
.jobs-wrap .msg,.jobs-wrap .errlist{border:1px solid transparent;border-radius:.25rem;padding:.75rem 1rem;margin:0 0 16px}
.jobs-wrap .msg.ok{background:var(--okbg);border-color:#d6e9c6;color:var(--ok)}
.jobs-wrap .msg.bad,.jobs-wrap .errlist{background:var(--badbg);border-color:#ebccd1;color:var(--bad)}
.jobs-wrap .msg.info{background:var(--infobg);border-color:#bce8f1;color:#31708f}
.jobs-wrap .errlist{padding-left:2rem}

/* ---- forms: bare inputs get the Bootstrap field look */
.jobs-wrap input[type=text],.jobs-wrap input[type=email],.jobs-wrap input[type=tel],.jobs-wrap input[type=date],.jobs-wrap input[type=time],.jobs-wrap input[type=password],.jobs-wrap input[type=number],.jobs-wrap input[type=url],.jobs-wrap select,.jobs-wrap textarea{display:block;width:100%;font:inherit;font-size:.95rem;line-height:1.5;padding:.5rem .8rem;color:#444;background:#fff;border:1px solid #ccc;border-radius:.25rem;box-sizing:border-box}
.jobs-wrap input:focus,.jobs-wrap select:focus,.jobs-wrap textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(0,136,204,.15)}
.jobs-wrap textarea{min-height:110px;resize:vertical}
.jobs-wrap input[type=checkbox],.jobs-wrap input[type=radio]{width:20px;height:20px;margin-right:6px;accent-color:var(--accent);flex:none}
.jobs-wrap label.q{display:block;font-weight:600;font-size:.9rem;margin:18px 0 6px;color:#444}
.jobs-wrap label.q .req{color:#d2322d}
.jobs-wrap .help{font-weight:400;color:var(--muted);font-size:.85rem}
.jobs-wrap .check.block{margin:18px 0}
.jobs-wrap .copybox input{flex:1}
.jobs-wrap .captchabox{margin:14px 0 4px}
.jobs-wrap .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}

/* ---- application progress bar (the old .progress, which Bootstrap also uses for something else) */
.jobs-wrap .progress{display:block;height:auto;background:none;overflow:visible;border-radius:0;margin:0 0 16px;font-size:inherit}
.progress-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem;margin-bottom:6px}
.jobs-wrap .progress .bar{height:12px;background:#e9ecef;border-radius:.25rem;overflow:hidden}
.jobs-wrap .progress .bar span{display:block;height:100%;background:var(--accent);border-radius:.25rem;transition:width .3s}

/* ---- step buttons (Porto nav-tab look) */
.jobs-wrap .steps{gap:6px}
.jobs-wrap .steps a,.jobs-wrap .steps span{border-radius:.25rem;border:1px solid #ddd;background:#f6f6f6;color:#555;padding:7px 14px;font-weight:600;text-decoration:none}
.jobs-wrap .steps a:hover{background:#fff;color:#000;text-decoration:none}
.jobs-wrap .steps .done a{border-color:#cfe6c4;background:var(--okbg);color:var(--ok)}
.jobs-wrap .steps .done a .ico{color:var(--ok);opacity:1}
.jobs-wrap .steps .cur a,.jobs-wrap .steps .cur span{border-color:var(--accent);border-top:3px solid var(--accent);background:#fff;color:var(--accent-dark)}
.jobs-wrap .steps .done.cur a{background:var(--okbg);box-shadow:0 0 0 2px var(--accent)}

/* ---- pills, tables, small boxes */
.jobs-wrap .pill{border-radius:.25rem;padding:.2em .6em;font-weight:600;font-size:.75rem;line-height:1.3;white-space:nowrap}
.jobs-wrap table.list{width:100%;border:1px solid #ddd;border-collapse:collapse;background:#fff;font-size:.92rem}
.jobs-wrap table.list th,.jobs-wrap table.list td{border:1px solid #ddd;padding:.55rem .7rem;text-align:left;vertical-align:middle}
.jobs-wrap table.list th{background:#f3f3f3;font-weight:600}
.jobs-wrap table.list tr:nth-child(even) td{background:#fafafa}
.jobs-wrap .legal,.jobs-wrap .rep{border-radius:.25rem}
.jobs-wrap .tabs button,.jobs-wrap .slot{border-radius:.25rem}
.jobs-wrap .tabs button{border:1px solid #ddd;background:#f6f6f6;color:#555;font-weight:600}
.jobs-wrap .tabs button.on{background:#fff;border-top:3px solid var(--accent);color:var(--accent-dark)}
.jobs-wrap .slot{border:1px solid #ccc;background:#fff}
.jobs-wrap .slot:hover{border-color:var(--accent);background:var(--accent-soft)}
.jobs-wrap .pair label{border-radius:.25rem;border:1px solid #ccc}
.jobs-wrap .pair label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.jobs-wrap .rep{background:#fafafa}

/* ---- footer */
.jobs-footer{background:#1d2127;color:#9a9ea5;margin-top:0;font-size:.9rem}
.jobs-footer a{color:#cfd3d8;text-decoration:none}
.jobs-footer a:hover{color:#fff;text-decoration:underline}
.jobs-footer .ico{margin-right:6px;opacity:.7}
.jobs-footer h5{color:#fff;font-weight:600;letter-spacing:.03em}

/* ---- phones */
@media(max-width:600px){
  .jobs-wrap .card{padding:16px 16px}
  .jobs-wrap h1{font-size:1.4rem}
  .jobs-wrap .btn{padding:.45rem 1rem}
}
@media print{.jobs-header,.jobs-footer,.page-header,.devbanner{display:none!important}}

/* ---- homepage lists: the admin page grid class ".cols" must not turn a two-column bullet list into a grid */
.jobs-wrap ul.offer.cols{display:block;grid-template-columns:none;columns:2;column-gap:28px}
.jobs-wrap ul.offer{padding-left:1.2em}
@media(max-width:600px){.jobs-wrap ul.offer.cols{columns:1}}

/* ---- Weeks step: the list of camp weeks above the question */
.jobs-wrap .weekshead{margin:6px 0 10px;font-size:1rem}
.jobs-wrap table.weeklist{max-width:520px;margin-bottom:6px}

/* ---- personality step: a clear "pick one per line" cue, numbered lines, a live counter */
.jobs-wrap .pickhow{display:flex;gap:12px;align-items:flex-start;background:var(--infobg);border:1px solid #bce8f1;border-left:4px solid var(--accent);border-radius:.25rem;padding:12px 16px;margin:0 0 14px;color:#31708f}
.jobs-wrap .pickhow>i{margin-top:3px;font-size:1.1rem}
.jobs-wrap .pickbar{position:sticky;top:8px;z-index:30;background:#fff;border:1px solid #ddd;border-radius:.25rem;padding:8px 14px 10px;margin:0 0 16px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.jobs-wrap .pickbar-text{font-size:.9rem;margin-bottom:6px}
.jobs-wrap .pickbar-text #pickmsg{color:var(--bad);font-weight:600}
.jobs-wrap .pickbar.complete .pickbar-text #pickmsg{color:var(--ok)}
.jobs-wrap .pickbar .bar{height:10px;background:#e9ecef;border-radius:.25rem;overflow:hidden}
.jobs-wrap .pickbar .bar span{display:block;height:100%;background:var(--accent);transition:width .25s}
.jobs-wrap .pickbar.complete .bar span{background:#47a447}
.jobs-wrap .pairrow{display:flex;align-items:stretch;gap:10px;margin:8px 0;padding:6px;border:1px solid transparent;border-radius:.3rem}
.jobs-wrap .pairrow .pairno{flex:none;width:30px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#888;background:#f1f1f1;border-radius:.25rem}
.jobs-wrap .pairrow .pair{flex:1;margin:0;position:relative}
.jobs-wrap .pairrow .pair label{margin:0}
.jobs-wrap .pairrow.missing{background:#fdf0f0;border-color:#ebccd1}
.jobs-wrap .pairrow.missing .pairno{background:#d2322d;color:#fff}
@media(max-width:560px){.jobs-wrap .pairrow{gap:6px;padding:4px}.jobs-wrap .pairrow .pairno{width:24px}}
/* the counter floats at the top of the window once you scroll past it (see the script in the personality step) */
.jobs-wrap .pickbar{position:static}
.jobs-wrap .pickbar.floating{position:fixed;top:8px;z-index:1050;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* ---- mailing address type-ahead (js/address.js) */
.jobs-wrap .addr-hint{font-size:.8rem;color:var(--muted);margin-top:4px}
.jobs-wrap .addr-note{font-size:.85rem;color:var(--ok);background:var(--okbg);border:1px solid #d6e9c6;border-radius:.25rem;padding:6px 10px;margin-top:6px}
.jobs-wrap .addr-suggest{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:2px;background:#fff;border:1px solid #ccc;border-radius:.25rem;box-shadow:0 8px 20px rgba(0,0,0,.15);overflow:hidden}
.jobs-wrap .addr-suggest[hidden]{display:none}
.jobs-wrap .addr-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #eee;background:#fff;padding:9px 12px;font:inherit;font-size:.9rem;color:#333;cursor:pointer}
.jobs-wrap .addr-item:last-child{border-bottom:0}
.jobs-wrap .addr-item:hover,.jobs-wrap .addr-item.on{background:var(--accent-soft)}

/* ---- "Change my ..." openers are buttons (details/summary) */
.jobs-wrap details.togglebox{margin:0 0 10px}
.jobs-wrap details.togglebox>summary{list-style:none;display:inline-block;cursor:pointer;user-select:none}
.jobs-wrap details.togglebox>summary::-webkit-details-marker{display:none}
.jobs-wrap details.togglebox>summary::marker{content:""}
.jobs-wrap details.togglebox[open]>summary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.jobs-wrap details.togglebox[open]>summary .ico.after{transform:rotate(180deg)}
.jobs-wrap details.togglebox>summary+*{margin-top:12px}

/* ---- camp location: big side-by-side buttons (one is chosen) */
.jobs-wrap .campbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:4px 0 6px}
.jobs-wrap .campbtn{position:relative;display:block;margin:0;cursor:pointer}
.jobs-wrap .campbtn input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.jobs-wrap .campbtn .cb-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:12px 8px;border:2px solid #d5d9de;border-radius:.4rem;background:#fff;color:#444;text-align:center;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.jobs-wrap .campbtn .cb-in .ico{font-size:1.5rem;color:#9aa3ad;opacity:1;margin:0;transition:color .15s}
.jobs-wrap .campbtn .cb-in strong{font-size:1rem;font-weight:600}
.jobs-wrap .campbtn:hover .cb-in{border-color:var(--accent);box-shadow:0 3px 10px rgba(0,136,204,.15);transform:translateY(-1px)}
.jobs-wrap .campbtn:hover .cb-in .ico{color:var(--accent)}
.jobs-wrap .campbtn input:checked+.cb-in{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);box-shadow:0 0 0 3px rgba(0,136,204,.18)}
.jobs-wrap .campbtn input:checked+.cb-in .ico{color:var(--accent)}
.jobs-wrap .campbtn input:checked+.cb-in::after{content:"\f058";font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;position:absolute;top:8px;right:10px;color:var(--accent);font-size:1rem}
.jobs-wrap .campbtn input:focus-visible+.cb-in{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:420px){.jobs-wrap .campbtns{grid-template-columns:1fr}.jobs-wrap .campbtn .cb-in{flex-direction:row;min-height:56px;justify-content:flex-start;padding-left:18px;gap:12px}}

/* ---- dashboard: the application and the booked interview share one card, side by side */
.jobs-wrap .combo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 32px}
.jobs-wrap .combo-int{border-left:1px solid #e5e5e5;padding-left:32px}
.jobs-wrap .combo-int h2.ivtime{font-size:1.2rem;border:0;padding:0;margin:0 0 10px}
.jobs-wrap .combo-int .eyebrow .ico{margin-right:6px}
@media(max-width:820px){.jobs-wrap .combo-grid{grid-template-columns:1fr}.jobs-wrap .combo-int{border-left:0;padding-left:0;border-top:1px solid #e5e5e5;margin-top:14px;padding-top:16px}}

/* ---- the in-page confirm box (js/ui.js builds <dialog class="modal">).  Bootstrap's own ".modal" rule hides it, which left the page locked behind an invisible box. */
dialog.modal{display:none;position:fixed;inset:0;margin:auto;top:0;left:0;width:min(440px,92vw);height:fit-content;max-height:90vh;padding:26px 28px 24px;border:0;border-top:3px solid var(--accent);border-radius:.25rem;background:#fff;color:#333;box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:3000;overflow:visible}
dialog.modal[open]{display:block}
dialog.modal::backdrop{background:rgba(0,0,0,.5)}
dialog.modal .modal-msg{font-size:1.05rem;font-weight:600;margin:0 0 20px;line-height:1.45}
dialog.modal .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
dialog.modal .btn{display:inline-block;margin:0;font-weight:600;font-size:.9rem;padding:.5rem 1.2rem;border-radius:.25rem;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
dialog.modal .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
dialog.modal .btn.ghost{background:#fff;color:#444;border-color:#ccc}
dialog.modal .btn.ghost:hover{background:#f2f2f2;border-color:#bbb}

/* ---- dashboard: "pick your interview time" is the first thing they see once the application is in */
.jobs-wrap .card.todo-now{display:flex;gap:22px;align-items:flex-start;border-top-color:var(--gold);background:#fffbea;border-color:#f0e2a8;padding:24px 28px}
.jobs-wrap .card.todo-now .todo-now-icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--gold);color:#212529;display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.jobs-wrap .card.todo-now .todo-now-icon .ico{opacity:1;margin:0}
.jobs-wrap .card.todo-now .eyebrow{color:var(--gold-text);margin:0 0 4px}
.jobs-wrap .card.todo-now h2{font-size:1.5rem;border:0;padding:0;margin:0 0 8px}
.jobs-wrap .card.todo-now p{margin:0 0 12px}
.jobs-wrap .btn.big{font-size:1.1rem;padding:.75rem 1.7rem;background:var(--gold);border-color:var(--gold-dark);color:#212529;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.jobs-wrap .btn.big:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#212529}
@media(max-width:560px){.jobs-wrap .card.todo-now{flex-direction:column;gap:12px;padding:18px}.jobs-wrap .card.todo-now .todo-now-icon{width:52px;height:52px;font-size:1.4rem}.jobs-wrap .btn.big{display:block;width:100%}}

/* ---- interview page, after booking: one clear "you are all set" card */
.jobs-wrap .card.allset{display:flex;gap:22px;align-items:flex-start;border-top-color:#47a447;background:#f6fbf4;border-color:#cfe6c4;padding:26px 30px}
.jobs-wrap .allset-icon{flex:none;width:68px;height:68px;border-radius:50%;background:#47a447;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem}
.jobs-wrap .allset-icon .ico{opacity:1;margin:0}
.jobs-wrap .allset-body{flex:1;min-width:0}
.jobs-wrap .allset .eyebrow{color:#2f7a2f;margin:0 0 4px}
.jobs-wrap .allset h2{font-size:1.5rem;border:0;padding:0;margin:0 0 8px}
.jobs-wrap .allset-where{margin:0 0 10px;font-size:1.02rem}
.jobs-wrap .allset-where .ico,.jobs-wrap .allset-note .ico{margin-right:8px;color:#47a447;opacity:1}
.jobs-wrap .allset-note{margin:0 0 6px;color:#555}
.jobs-wrap .allset .changebox{margin-top:18px;padding-top:14px;border-top:1px solid #dcebd5}
.jobs-wrap .allset .changebody{background:#fff;border:1px solid #ddd;border-radius:.25rem;padding:14px 16px}
@media(max-width:560px){.jobs-wrap .card.allset{flex-direction:column;gap:12px;padding:18px}.jobs-wrap .allset-icon{width:54px;height:54px;font-size:1.6rem}}

/* ---- header stays in the normal page flow: the theme's "sticky" script pinned it to the top of the window, which hid the TEST SITE strip behind it and left a big empty gap under the logo */
#header.jobs-header{height:auto!important;min-height:0!important}
#header.jobs-header .header-body{position:relative!important;top:auto!important}

/* ---- signed-in header: under 768px the links fold into a dropdown at the top right */
.jobs-header .jobs-menu{display:none}
.jobs-header .jobs-menu .btn{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-dark);font-weight:600;padding:.45rem .8rem}
.jobs-header .jobs-menu .btn .ico{margin-right:.45em;opacity:1}
.jobs-header .jobs-menu .dropdown-item{padding:.6rem 1.1rem;font-weight:600}
.jobs-header .jobs-menu .dropdown-item .ico{margin-right:.6em;width:1.1em;text-align:center;opacity:.7}
@media(max-width:767px){.jobs-header .header-nav-top,.jobs-header nav.header-nav-top{display:none!important}.jobs-header .jobs-menu{display:block!important}.jobs-header .header-container{min-height:60px}}
.jobs-header .jobs-menu .dropdown-toggle::before,.jobs-header .jobs-menu .dropdown-toggle::after{display:none!important;content:none!important}
.jobs-header .jobs-menu .btn .ico-after{margin-left:.5em}

/* ---- pay confirmation (after hiring) */
.jobs-wrap ul.ticklist{list-style:none;margin:8px 0 0;padding:0}
.jobs-wrap ul.ticklist li{padding:5px 0}
.jobs-wrap ul.ticklist li .ico{margin-right:8px;color:#47a447;opacity:1}
.jobs-wrap ul.ticklist li.wait .ico{color:var(--gold-dark)}

/* ---- a step that is coming but not open yet */
.jobs-wrap .card.upnext{background:#f6f6f6;border-style:dashed;border-top-color:#bbb;opacity:.9}
.jobs-wrap .card.upnext h2{color:#777;border:0;padding:0}

/* ---- hired: one compact card; sign-in folded away */
.jobs-wrap .card.hiredcard h2{border:0;padding:0;margin:0 0 6px}
.jobs-wrap .card.hiredcard ul.ticklist li{padding:6px 0}
.jobs-wrap details.signinbox>summary{cursor:pointer;list-style:none}
.jobs-wrap details.signinbox>summary::-webkit-details-marker{display:none}
.jobs-wrap details.signinbox>summary h2{display:inline-block;margin:0;border:0;padding:0}
.jobs-wrap details.signinbox[open]>summary{margin-bottom:12px}

/* ---- the name menu (top right) is the same on every screen size */
.jobs-header .jobs-menu{display:block!important}
.jobs-header .jobs-menu .dropdown-menu{min-width:240px}

/* ---- payroll form: calmer layout (numbered steps, two-column fields, choice cards) */
.jobs-wrap .paynote{background:var(--accent-soft);border:1px solid #cfe5f3;border-radius:.35rem;padding:12px 18px;margin:0 0 18px;color:#2c4a5e}
.jobs-wrap .paynote p{margin:4px 0;font-size:.95rem}
.jobs-wrap .paynote .ico{margin-right:8px;color:var(--accent);opacity:1}
.jobs-wrap .paystep h2{display:flex;align-items:center;gap:12px;font-size:1.25rem;border:0;padding:0;margin:0 0 10px}
.jobs-wrap .paystep .stepno{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:.95rem;font-weight:700}
.jobs-wrap .paystep .paysub{font-size:1.02rem;margin:20px 0 8px;padding-top:14px;border-top:1px solid #eee}
.jobs-wrap .payform .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.jobs-wrap .payform .pgrid input[type=text],.jobs-wrap .payform .pgrid input[type=password]{width:100%;max-width:100%}
.jobs-wrap .payform .pgrid label.q{margin-top:0}
.jobs-wrap .payform .help{font-weight:400}
.jobs-wrap .payhero{font-size:1.15rem;margin:0 0 10px}
.jobs-wrap .payhero strong{font-size:1.9rem;color:var(--accent-dark)}
.jobs-wrap .sumbox{background:#f7f8f9;border:1px solid #e5e8eb;border-radius:.3rem;padding:6px 16px;margin:0 0 8px}
.jobs-wrap .sumbox>div{display:flex;gap:14px;padding:6px 0}
.jobs-wrap .sumbox>div+div{border-top:1px solid #eceff1}
.jobs-wrap .sumbox .k{flex:none;width:84px;color:#8a8f96;font-size:.85rem;padding-top:2px}
.jobs-wrap .choices{display:grid;gap:8px;margin:4px 0 0}
.jobs-wrap .choices.inline{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.jobs-wrap .choice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 14px;border:1px solid #d5d9de;border-radius:.35rem;background:#fff;cursor:pointer;font-weight:400}
.jobs-wrap .choice:hover{border-color:var(--accent)}
.jobs-wrap .choice input{margin-top:4px;flex:none}
.jobs-wrap .choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px rgba(0,136,204,.15)}
.jobs-wrap .choice small{color:#777}
.jobs-wrap .payform details.togglebox{margin-top:12px}
.jobs-wrap .payform details.togglebox .changebody{margin-top:10px}
@media(max-width:560px){.jobs-wrap .payform .pgrid{grid-template-columns:1fr}.jobs-wrap .sumbox>div{flex-direction:column;gap:2px}.jobs-wrap .choices.inline{grid-template-columns:1fr}}

/* ---- weeks step: a note for each week they can work */
.jobs-wrap .wknotes{margin-top:18px}
.jobs-wrap .wknote{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:10px;align-items:center;margin:6px 0}
.jobs-wrap .wknote input{width:100%;max-width:100%}
.jobs-wrap .wknlabel{font-weight:600}
@media(max-width:560px){.jobs-wrap .wknote{grid-template-columns:1fr;gap:2px}}

/* ---- weeks step: the note sits to the right of each ticked week */
.jobs-wrap .wkrow{display:grid;grid-template-columns:minmax(210px,290px) 1fr;gap:10px;align-items:center;margin:4px 0}
.jobs-wrap .wkrow input.wkinline{width:100%;max-width:100%}
@media(max-width:560px){.jobs-wrap .wkrow{grid-template-columns:1fr;gap:4px;margin:8px 0}}
.jobs-wrap .wkhint{background:#eef6fb;border-left:4px solid #0088cc;border-radius:4px;padding:8px 12px;margin:6px 0 12px;font-size:.92rem}
.jobs-wrap .wkrow input.wkinline{border:1px solid #8aa4b8;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.jobs-wrap .wkrow input.wkinline:focus{border-color:#0088cc;box-shadow:0 0 0 3px rgba(0,136,204,.2)}

/* ---- phone polish (2026-10-26) */
.jobs-wrap table.list td,.jobs-wrap table.list th{overflow-wrap:anywhere}
@media(max-width:767px){
  .jobs-wrap input[type=text],.jobs-wrap input[type=email],.jobs-wrap input[type=tel],.jobs-wrap input[type=date],.jobs-wrap input[type=time],.jobs-wrap input[type=password],.jobs-wrap input[type=number],.jobs-wrap input[type=url],.jobs-wrap select,.jobs-wrap textarea{font-size:16px}   /* 16px stops iPhones zooming in when a box is tapped */
  .jobs-wrap .btn,.jobs-wrap button.btn,.jobs-wrap a.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35em}
  .jobs-wrap .btn.small{min-height:40px}
  .jobs-wrap .opts label,.jobs-wrap label.check{padding-top:4px;padding-bottom:4px}
  .jobs-wrap table.list.stack,.jobs-wrap table.list.stack tbody,.jobs-wrap table.list.stack tr,.jobs-wrap table.list.stack td{display:block;width:100%}
  .jobs-wrap table.list.stack tr:first-child{display:none}
  .jobs-wrap table.list.stack tr{border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:6px 10px;background:#fff}
  .jobs-wrap table.list.stack td{border:0!important;padding:4px 0!important;background:none!important}
  .jobs-wrap table.list.stack td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#777}
  .jobs-wrap table.list.stack td .btn{margin:4px 6px 0 0}
}

/* phone: the step buttons become ONE swipeable row instead of seven stacked lines */
@media(max-width:600px){
  .jobs-wrap ol.steps{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin-left:-4px;margin-right:-4px;scrollbar-width:thin}
  .jobs-wrap ol.steps li{flex:none}
  .jobs-wrap ol.steps a,.jobs-wrap ol.steps span{white-space:nowrap;padding:8px 12px;font-size:.85rem}
}

/* ---- My schedule */
.jobs-wrap .mysched{border-top:1px solid #e3e8f2;padding:10px 0}
.jobs-wrap .mydays{display:flex;gap:6px;margin:6px 0}
.jobs-wrap .mday{min-width:46px;text-align:center;padding:5px 0;border-radius:6px;border:1px solid #d6dce8;font-size:.85rem;font-weight:600}
.jobs-wrap .mday.on{background:#0088cc;border-color:#0088cc;color:#fff}
.jobs-wrap .mday.off{color:#aab;background:#f6f6f6}
.jobs-wrap .cantform{border-top:1px solid #e3e8f2;margin-top:10px;padding-top:10px}
.jobs-wrap .cantdays{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:8px}
/* several references at once */
.refrow{padding:10px 0 4px;border-top:1px solid #e3e8f2}
.refrow:first-of-type{border-top:0;padding-top:0}
/* dashboard: one compact to-do card */
.jobs-wrap .card.todocard{border-top-color:var(--gold);background:#fffbea;border-color:#f0e2a8;padding:16px 20px}
.jobs-wrap .tc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.jobs-wrap .tc-head h2{font-size:1.2rem;border:0;padding:0;margin:0}
.jobs-wrap .tc-count{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#212529;font-weight:700;display:flex;align-items:center;justify-content:center}
.jobs-wrap .tc-list{list-style:none;margin:0;padding:0}
.jobs-wrap .tc-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #f0e2a8}
.jobs-wrap .tc-icon{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #f0e2a8;color:var(--gold-text);display:flex;align-items:center;justify-content:center}
.jobs-wrap .tc-icon .ico{margin:0;opacity:1}
.jobs-wrap .tc-item.req .tc-icon{background:var(--gold);border-color:var(--gold-dark);color:#212529}
.jobs-wrap .tc-body{flex:1;min-width:0}
.jobs-wrap .tc-body .small{margin-top:2px}
.jobs-wrap .tc-btn{flex:none;margin:0;background:var(--gold);border-color:var(--gold-dark);color:#212529;font-weight:600}
.jobs-wrap .tc-btn:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#212529}
@media(max-width:560px){.jobs-wrap .tc-item{flex-wrap:wrap}.jobs-wrap .tc-body{flex-basis:calc(100% - 54px)}.jobs-wrap .tc-btn{width:100%;text-align:center}}
/* my schedule: shift line, asked-off day, jump bar */
.jobs-wrap .myshift{margin-top:6px;font-size:1rem}
.jobs-wrap .myshift .ico{margin-right:8px;color:var(--accent);opacity:1}
.jobs-wrap .mday.asked{background:#fff4d6;border-color:#f0e2a8;color:#7a5200;text-decoration:line-through}
.jobs-wrap .jumpbar{margin:0 0 14px}
.jobs-wrap .jumpbar .pill{text-decoration:none;margin-right:4px}
.jobs-wrap .pill.nextup{background:#e6f5ec;color:#1f7a45}
/* my schedule: plain-English summary per place */
.jobs-wrap .mysummary{font-size:1.2rem;margin:0 0 10px;line-height:1.5}
.jobs-wrap .mysay{color:#53648f}
.jobs-wrap .mykv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0 0 6px}
.jobs-wrap .mykv dt{color:#53648f;font-weight:600}
.jobs-wrap .mykv dd{margin:0}
.jobs-wrap .mykey{margin:0}
/* to-do card: one colour per kind of item */
.jobs-wrap .card.todocard{background:#fff}
.jobs-wrap .tc-item{--tc:#e0a800;--tcbg:#fff8e1;--tctx:#212529;background:var(--tcbg);border:1px solid transparent;border-left:5px solid var(--tc);border-radius:6px;padding:12px 14px;margin-top:10px}
.jobs-wrap .tc-item.tone-blue{--tc:#0088cc;--tcbg:#eef6fc;--tctx:#fff}
.jobs-wrap .tc-item.tone-green{--tc:#3f9b46;--tcbg:#eef8ef;--tctx:#fff}
.jobs-wrap .tc-item.tone-purple{--tc:#7b4fb5;--tcbg:#f4effa;--tctx:#fff}
.jobs-wrap .tc-item .tc-icon,.jobs-wrap .tc-item.req .tc-icon{background:var(--tc);border-color:var(--tc);color:var(--tctx)}
.jobs-wrap .tc-item .tc-btn{background:var(--tc);border-color:var(--tc);color:var(--tctx)}
.jobs-wrap .tc-item .tc-btn:hover{filter:brightness(.92);background:var(--tc);border-color:var(--tc);color:var(--tctx)}
/* my schedule: add-to-calendar button */
.jobs-wrap .mycal{margin:10px 0 0}
.tracker-card h2{margin-bottom:14px}
ol.tracker{list-style:none;margin:0;padding:0;display:flex}
ol.tracker li{flex:1;position:relative;text-align:center;padding:0 6px;font-size:.85rem}
ol.tracker li:not(:last-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:3px;background:#dee2e6}
ol.tracker li.done:not(:last-child)::after{background:#0088cc}
ol.tracker .tk-dot{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#e9ecef;color:#6c757d;font-weight:700;position:relative;z-index:1}
ol.tracker li.done .tk-dot{background:#0088cc;color:#fff}
ol.tracker li.current .tk-dot{background:#fff;border:3px solid #0088cc;color:#0088cc}
ol.tracker .tk-t{display:block;font-weight:700;margin-top:6px}
ol.tracker .tk-s{display:block;color:#6c757d}
ol.tracker li.current .tk-t{color:#0088cc}
@media(max-width:640px){
  ol.tracker{flex-direction:column;gap:14px}
  ol.tracker li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;text-align:left;padding:0}
  ol.tracker li:not(:last-child)::after{display:none}
  ol.tracker .tk-dot{grid-row:1 / span 2}
  ol.tracker .tk-t{margin-top:0}
}