/* App-only additions on top of the mockup styles (reports.css, admin.css). */
[hidden]{display:none!important}
/* Slate (Test mode band, from 03. Design/rejections.html), light and dark */
:root{--slate:#304654}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--slate:#2b3f4a}}
:root[data-theme="dark"]{--slate:#2b3f4a}
.envtag{font:600 12px/1 "Barlow";letter-spacing:.4px;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--mustard-soft);color:var(--mustard-ink)}
.who-menu{position:relative}
button.avatar{border:0;cursor:pointer;padding:0}
.menu{position:absolute;right:0;top:44px;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:230px;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.menu b{display:block;font-weight:500}
.menu small{display:block;color:var(--ink-3);font-size:13px;margin:2px 0 12px}
/* Your working days, in the avatar menu */
.wdays{margin:0 0 12px}
.wdays span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.wdays div{display:flex;gap:4px}
.wdays button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);color:var(--ink-2);font:600 12px "Barlow";cursor:pointer;padding:0}
.wdays button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:var(--on-violet)}
.err{color:var(--maroon-ink);font-size:13.5px;margin:8px 0 0;display:none}
.err.on{display:block}
.loading{padding:40px 28px;color:var(--ink-3)}
.empty{padding:28px;color:var(--ink-3);font-size:14.5px}
/* Sign-in page */
.signin{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.signin .box{width:100%;max-width:420px;background:var(--raised);border:1px solid var(--line);border-radius:28px;padding:34px 30px}
.signin .mark{font:700 34px/1 "Barlow Condensed";letter-spacing:.5px;margin-bottom:22px}
.signin .mark span{color:var(--violet)}
.signin h1{font:700 40px/1 "Barlow Condensed";margin:0 0 8px}
.signin p{color:var(--ink-2);font-size:14.5px;margin:0 0 20px}
.signin .btn{width:100%;justify-content:center;padding:11px 16px;font-size:15px}
.signin .note{font-size:13px;color:var(--ink-3);margin:16px 0 0}
.signin .msg{background:var(--maroon-soft);color:var(--maroon-ink);border-radius:14px;padding:12px 14px;font-size:14px;margin:0 0 16px}
/* Email previews: the stored email carries Gmail-friendly inline colours; on screen follow the theme */
.letter > div[style]{color:inherit!important;font:inherit!important;line-height:inherit!important}
.letter p[style*="font-size:12px"]{color:var(--ink-3)!important}
.letter a{color:var(--violet)}
/* Choice cards (interview result) */
.choice{display:grid;gap:8px;margin:4px 0 12px}
.choice label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:14px;padding:10px 12px;cursor:pointer;margin:0}
.choice label:has(input:checked){border-color:var(--violet);box-shadow:0 0 0 1px var(--violet);background:var(--violet-soft)}
.choice input{width:auto;margin:3px 0 0;accent-color:var(--violet)}
.choice b{display:block;font-weight:600}
.choice small{display:block;color:var(--ink-2);font-size:13px;line-height:1.4}
.r-when{font-size:13.5px;color:var(--ink-2);margin:6px 0 0}
/* How it works strip (Email > DD Request Email) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 6px;padding:0}
.steps li{list-style:none;background:var(--raised);border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.steps .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:600 14px "Barlow"}
.steps b{display:block;font-weight:600;font-size:14.5px}
.steps small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
@media (max-width:800px){.steps{grid-template-columns:minmax(0,1fr)}}
/* Disabled buttons look switched off: grey, not clickable. The reason sits next to them (the action bar hint). */
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-strong)}
.btn.primary:disabled{background:var(--panel);border-color:var(--line-strong);color:var(--ink-3);opacity:1}
/* Placeholders read as examples, not filled-in values */
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.75;font-style:italic}
/* Header on tablet and phone: when the tabs don't fit beside the theme switch and avatar, the tabs drop
   to their own row (wrap-reverse keeps the switch and avatar on top) and wrap inside their pill if needed. */
@media (max-width:1000px){
  .top{flex-wrap:wrap-reverse;row-gap:10px}
  .top-r{margin-left:auto}
  .top .tabs{flex-wrap:wrap;overflow:visible;border-radius:22px}
}
/* Notifications: the bell in the top bar, its panel, and the settings table (web/shared/notify.js) */
.bell-menu{position:relative}
.bell{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.bell:hover,.bell[aria-expanded="true"]{color:var(--ink);border-color:var(--line-strong)}
.bell svg{width:18px;height:18px}
.bell-n{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--late);color:#fff;font:600 11px/18px "Barlow";text-align:center;box-shadow:0 0 0 2px var(--bg)}
.npanel{position:absolute;right:-54px;top:46px;width:400px;max-height:min(560px,75vh);display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:18px;z-index:31;box-shadow:0 10px 34px rgba(0,0,0,.14);overflow:hidden}
.nhead{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.nhead b{font:700 20px/1 "Barlow Condensed";margin-right:auto}
.nseg button{min-height:26px;padding:3px 10px;font-size:12.5px}
.nicon{border:0;background:transparent;color:var(--ink-3);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.nicon:hover{background:var(--panel);color:var(--ink)}
.nicon svg{width:17px;height:17px}
.nlist{list-style:none;margin:0;padding:4px 0;overflow-y:auto}
.nitem{display:flex;gap:11px;align-items:flex-start;padding:10px 16px;text-decoration:none;color:var(--ink-2)}
.nitem:hover,.nitem:focus-visible{background:var(--panel)}
.nitem .nk{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.nitem .nk svg{width:16px;height:16px}
.nitem.k-deadline_soon .nk{background:var(--mustard-soft);color:var(--mustard-ink)}
.nitem.k-deadline_late .nk{background:var(--late-soft);color:var(--late-ink)}
.nitem.k-activity .nk{background:var(--green-soft);color:var(--green-ink)}
.nitem .nt{flex:1;min-width:0}
.nitem b{display:block;font-weight:500;font-size:14px;line-height:1.35;color:var(--ink-2)}
.nitem.unread b{font-weight:600;color:var(--ink)}
.nitem small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.nitem em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:3px}
.ndot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--violet);margin-top:7px}
.nempty{padding:26px 18px;margin:0;color:var(--ink-3);font-size:14px;text-align:center}
.nfoot{border-top:1px solid var(--line);padding:9px 12px;display:flex;justify-content:flex-end}
.nsub{font-size:13.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.45}
.nsub.warn{background:var(--mustard-soft);color:var(--mustard-ink);border-radius:12px;padding:9px 12px;margin:12px 0 0}
.nprefs{display:grid;font-size:13.5px}
.nrow{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,62px);align-items:center;gap:4px;padding:9px 0;border-top:1px solid var(--line)}
.nrow.nhd{border-top:0;padding:0 0 6px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.2}
.nrow b{display:block;font-weight:600}
.nrow small{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.35;margin-top:1px}
.nrow label{display:grid;place-items:center;margin:0;cursor:pointer;min-height:32px}
.nrow input{width:18px;height:18px;accent-color:var(--violet);cursor:pointer;margin:0}
@media (max-width:640px){
  /* the top bar's buttons wrap instead of pushing the page sideways */
  .top-r{flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0}
  .npanel{position:fixed;left:8px;right:8px;top:62px;width:auto;max-height:calc(100vh - 170px)}
  .nrow{grid-template-columns:minmax(0,1fr) repeat(3,48px)}
  .nrow.nhd{font-size:11px}
}