/* 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}
/* My 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}
}