*{margin:0;padding:0;box-sizing:border-box}
/* Dark form controls: date pickers, selects and scrollbars follow the theme
   instead of drawing a black calendar icon on a black field. */
:root{color-scheme:dark}
body{background:#0d1117;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;line-height:1.6;padding:20px;max-width:1200px;margin:0 auto;-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
/* Section headings match the Hub: small caps label with a thin rule running
   out to the right edge (or up to the buttons in a section-head). */
h2{font-size:.75rem;font-weight:600;color:#8b949e;text-transform:uppercase;letter-spacing:.08em;margin:36px 0 12px;display:flex;align-items:center;gap:12px}
h2::after{content:"";flex:1;height:1px;background:#21262d;min-width:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #388bfd;outline-offset:2px}

/* nav: this portal's bar became the shared one. It now lives in mm-nav.css,
   loaded ahead of this file. Canonical source: workspace/shared/mm-nav/. */

/* login */
.login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login-card{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:12px;padding:32px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(1,4,9,.45)}
.login-brand{font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.login-brand span{color:#58a6ff;font-weight:400}
.login-sub{color:#8b949e;font-size:.88rem;margin-top:-10px}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:#8b949e}
input,select,textarea{background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:9px 11px;color:#e6edf3;font-size:.92rem;font-family:inherit;width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#6e7681}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:#484f58}
input:focus,select:focus,textarea:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 3px rgba(56,139,253,.25)}
input[type=checkbox],input[type=radio]{accent-color:#2f81f7;box-shadow:none}

/* buttons */
.btn{background:#21262d;border:1px solid #30363d;border-radius:6px;padding:9px 16px;color:#e6edf3;font-size:.9rem;font-weight:600;line-height:1.35;cursor:pointer;font-family:inherit;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover:not(:disabled){background:#30363d;border-color:#8b949e}
.btn:active:not(:disabled){background:#282e33}
.btn:focus-visible{outline:2px solid #388bfd;outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:#238636;border-color:#2ea043;color:#fff}
.btn.primary:hover:not(:disabled){background:#2ea043;border-color:#3fb950}
.btn.danger{background:#8b2c2c;border-color:#b04a4a;color:#fff}
.btn.danger:hover:not(:disabled){background:#a33a3a;border-color:#da6363}
.btn.small{padding:5px 11px;font-size:.8rem}
.err{color:#f85149;font-size:.82rem;min-height:1em}

/* clock */
.clock-card{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:12px;padding:32px 28px;text-align:center;margin-bottom:16px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.clock-state{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#8b949e;font-size:.82rem;font-weight:500;background:#0d1117;border:1px solid #30363d;border-radius:999px;padding:3px 12px}
.dot{width:9px;height:9px;border-radius:50%;background:#484f58;display:inline-block}
.dot.on{background:#3fb950;box-shadow:0 0 0 4px rgba(63,185,80,.15)}
.timer{font-size:3rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;margin:12px 0 20px;font-variant-numeric:tabular-nums;line-height:1.2}
.clock-btn{font-size:1rem;padding:13px 40px;min-width:180px;background:#238636;border-color:#2ea043;color:#fff;border-radius:8px}
.clock-btn:hover:not(:disabled){background:#2ea043;border-color:#3fb950}
.clock-btn.out{background:#8b2c2c;border-color:#b04a4a}
.clock-btn.out:hover:not(:disabled){background:#a33a3a;border-color:#da6363}
.hint{color:#8b949e;font-size:.8rem;margin-top:10px;min-height:1em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stats+.stats{margin-top:12px}
.stats+.table-wrap,.stats+.hint{margin-top:12px}
.stat{background:linear-gradient(180deg,#181e26 0%,#161b22 70%);border:1px solid #30363d;border-radius:10px;padding:14px 16px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.stat-label{color:#8b949e;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.stat-val{font-size:1.5rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px;font-variant-numeric:tabular-nums}
.stat-val.small{font-size:1.1rem}
.stat-val.green{color:#3fb950}
.stat-val.amber{color:#d29922}

/* tables */
.table-wrap{background:#161b22;border:1px solid #30363d;border-radius:10px;overflow-x:auto;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;color:#8b949e;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 14px;border-bottom:1px solid #30363d;white-space:nowrap;background:#1a1f27}
td{padding:10px 14px;border-bottom:1px solid #21262d;white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:none}
/* A note printed inside a table panel, above the header row. */
.table-wrap>.hint{margin:0;padding:10px 14px;min-height:0}
tr.clickable{cursor:pointer}
tr.clickable td{transition:background-color .12s}
tr.clickable:hover{background:#1c2128}
/* Empty states: a quiet tray icon over the message, so a blank panel reads
   as "nothing here yet" rather than "still loading" or "broken". */
.empty{padding:26px 22px;text-align:center;color:#8b949e;font-size:.88rem}
.empty::before{content:"";display:block;width:34px;height:34px;margin:0 auto 10px;border-radius:9px;
  background:rgba(110,118,129,.12) no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")}
td.empty::before,td .empty::before,.modal .empty::before,.perm-list .empty::before{display:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
td.actions{text-align:right}
td.actions .btn+.btn{margin-left:6px}

/* badges */
/* Pills, tinted like the Hub's meta tags: same hue per meaning as before,
   with a faint fill so they read at a glance in a dense table. */
.badge{font-size:.72rem;font-weight:500;line-height:1.5;padding:1px 9px;border-radius:999px;border:1px solid #30363d;color:#8b949e;background:rgba(110,118,129,.1);display:inline-block;white-space:nowrap;vertical-align:middle}
.badge.pending{color:#d29922;border-color:rgba(158,106,3,.75);background:rgba(187,128,9,.1)}
.badge.paid{color:#3fb950;border-color:rgba(46,160,67,.5);background:rgba(46,160,67,.1)}
.badge.cancelled{color:#8b949e;text-decoration:line-through}
.badge.live{color:#3fb950;border-color:rgba(46,160,67,.5);background:rgba(46,160,67,.1)}
.badge.off{color:#8b949e}
.badge.admin{color:#bc8cff;border-color:rgba(137,87,229,.6);background:rgba(163,113,247,.1)}
.badge.flag{color:#f0883e;border-color:rgba(189,86,29,.75);background:rgba(219,109,40,.1)}
.badge.new{color:#58a6ff;border-color:rgba(31,111,235,.6);background:rgba(56,139,253,.1)}
tr.is-new td{background:rgba(31,111,235,.08)}
#signup-to-login{color:#58a6ff}
.signup-url{word-break:break-all;background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:10px;margin:8px 0}

.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin:36px 0 12px;flex-wrap:wrap}
.section-head h2{margin:0;flex:1 1 auto;white-space:nowrap}
.section-head>span:not(.hint){display:inline-flex;gap:6px;flex-wrap:wrap}
.section-head>.hint:empty{display:none}
.section-head>.hint{margin-top:0}
#view-me>div:first-child>.section-head{margin-top:12px}

/* payout details */
.payout-box{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:18px;max-width:620px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.payout-box .hint{margin:0 0 12px}
.payout-box input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.payout-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.payout-actions .hint{margin:0}
.payout-actions .hint.ok{color:#3fb950}
.payout-actions .hint.bad{color:#f85149}

/* my profile */
section>h2:first-child,section>.section-head:first-child{margin-top:12px}
.profile-box label+label{margin-top:14px}
.profile-box{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:18px;max-width:620px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.profile-box .hint{margin:0 0 12px}
.profile-box .kv+.hint{margin:14px 0 0;padding-top:12px;border-top:1px solid #21262d}
.profile-box select{width:100%}
.profile-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.profile-actions .hint{margin:0}
.profile-actions .hint.ok{color:#3fb950}
.profile-actions .hint.bad{color:#f85149}
#p-tz-hint{margin:6px 0 0;font-size:.78rem}

/* First-run onboarding. Covers the page rather than sitting inside it, so the
   only ways out are finishing it or signing out. */
.onboard-wrap{min-height:90vh;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.onboard-card{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:12px;padding:28px;width:100%;max-width:520px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(1,4,9,.45)}
.onboard-card h2{display:block}
.onboard-card h2::after{display:none}
.onboard-head{border-bottom:1px solid #30363d;padding-bottom:14px;margin-bottom:18px}
.onboard-steps{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.78rem;color:#8b949e}
.ostep.active{color:#58a6ff;font-weight:600}
.ostep.done{color:#3fb950}
.onboard-card h2{margin:0 0 8px;font-size:1.15rem}
.onboard-step .hint{margin:0 0 14px}
.onboard-step label{display:block;margin-bottom:12px}
.onboard-step select,.onboard-step input{width:100%}
#ob-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#ob-tz-hint{margin:-6px 0 14px;font-size:.78rem}
.onboard-actions{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.onboard-actions .hint{margin:0}
.onboard-actions .hint.bad{color:#f85149}
.onboard-summary{margin-bottom:14px}
.onboard-summary .kv dd.muted{color:#8b949e}
#ob-warn.bad{color:#f85149}
/* Readable but deliberately not competing with Continue: someone without a
   wallet needs this, everyone else should not be drawn to it. */
#ob-skip-2{color:#8b949e;font-size:.8rem;text-decoration:underline}
.onboard-foot{margin:20px 0 0;border-top:1px solid #30363d;padding-top:14px;font-size:.78rem}
.onboard-foot a{color:#58a6ff;text-decoration:underline}
.onboard-summary .kv dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* key/value blocks: the profile sign-in panel and the admin contact card */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:.85rem}
.kv dt{color:#8b949e}
.kv dd{margin:0;color:#e6edf3;overflow-wrap:anywhere}
.contact-card{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:14px 16px;margin-bottom:16px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}

/* Sits above the nav, in a colour used nowhere else on the portal, because
   forgetting you are inside someone else's account is the whole risk. */
.imp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#4d2d00;border-bottom:1px solid #9e6a00;color:#ffd59a;
  padding:8px 16px;font-size:.85rem;font-weight:600}
.imp-bar .btn{background:#ffd59a;border-color:#ffd59a;color:#2b1800;font-weight:600}
.imp-bar .btn:hover{background:#fff;border-color:#fff}

/* The name in the bar is the only way into My Profile, so unlike the other
   dashboards it has to survive on a phone. mm-nav.css hides it under 560px. */
.nav a.who{color:#8b949e;border-bottom:0;cursor:pointer}
.nav a.who:hover{color:#e6edf3}
.nav a.who.active{color:#e6edf3}
@media(max-width:560px){
  .nav a.who{display:inline;max-width:14ch}
}

/* warnings */
.warn{background:rgba(187,128,9,.12);border:1px solid #9e6a03;border-left-width:3px;border-radius:8px;line-height:1.5;padding:11px 14px;color:#e3b341;font-size:.85rem;margin-bottom:14px}

/* toolbars */
.toolbar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:12px}
/* Fields in a toolbar sit at the height of the small buttons beside them. */
.toolbar input,.toolbar select{padding:5px 9px;font-size:.84rem;min-height:31px}
.toolbar label.inline{margin-right:4px}
.toolbar .spacer{flex:1}
label.inline{flex-direction:row;align-items:center;gap:7px;white-space:nowrap}
label.inline input{width:auto}

/* flagged rows */
tr.flagged td{background:rgba(187,128,9,.08)}
tr.flagged td:first-child{box-shadow:inset 3px 0 0 #bd561d}
tr.total-row td{border-top:1px solid #30363d;border-bottom:none;font-weight:700;background:#1c2128}
/* Every other column is nowrap, so without a floor this one gets crushed to a
   few characters and the row grows to a dozen lines. */
td.small-text{white-space:normal;color:#8b949e;font-size:.82rem;min-width:240px;max-width:360px}
tr.dimmed td{opacity:.55}
/* A pay run note repeats the period, so it is the one column that gives way
   rather than pushing the row actions off the edge. */
td.cell-note{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.small-note{color:#8b949e;font-size:.78rem}

/* assignments */
.tasks{display:flex;flex-direction:column;gap:10px}
.task{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:border-color .15s}
.task:hover{border-color:#484f58}
.task.done{opacity:.6}
.task-main{min-width:0}
.task-title{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.task-detail{color:#8b949e;font-size:.84rem;margin-top:3px}
.task-detail.done-note{color:#3fb950}
.task .btn{flex:none}

/* projects: a parent card with its sub-projects indented beneath */
.project{display:flex;flex-direction:column;gap:6px}
.subtasks{display:flex;flex-direction:column;gap:6px;margin-left:18px;padding-left:12px;border-left:2px solid #30363d}
.task.sub{padding:10px 14px}
.task.sub .task-title{font-weight:500;font-size:.9rem}
.task.done-soft .task-title{color:#8b949e}
.task-main{flex:1 1 auto}
.pj-report{margin-top:8px;padding:9px 11px;border:1px solid #2a3b2e;background:rgba(46,160,67,.06);border-radius:8px;color:#c9d1d9;font-size:.84rem;white-space:pre-wrap;overflow-wrap:anywhere}
.pj-report-head{display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#3fb950;margin-bottom:4px}
.pj-actions{display:inline-flex;gap:6px;flex-wrap:wrap;flex:none;justify-content:flex-end}
.pj-person{margin:22px 0 10px;font-size:1rem}
.pj-person .hint{margin:0 0 0 6px;font-weight:400}
.hint.warn-line{color:#d29922;margin-top:0}

/* tools & resources */
.res-group{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.res-head{color:#8b949e;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:10px}
.res-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.res-link{display:block;background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:9px 12px;text-decoration:none;color:#58a6ff;transition:border-color .15s,background-color .15s}
.res-link:hover{border-color:#58a6ff;background:#1c2128}
.res-label{display:block;font-size:.88rem;font-weight:600}
.res-detail{display:block;color:#8b949e;font-size:.78rem;margin-top:2px}

/* shift report */
.report-card{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:18px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.report-card textarea{resize:vertical}
.report-card textarea:disabled{opacity:.5}
#report-for{margin-top:0;margin-bottom:10px}
#report-for:empty{display:none}
.report-cell{display:flex;align-items:center;gap:8px;min-width:0;max-width:280px}
.report-snip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8b949e;font-size:.82rem}
.report-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.report-actions .hint{margin-top:0}
.report-meta{color:#8b949e;font-size:.78rem;margin-bottom:6px}
.report-text{white-space:pre-wrap;font-size:.9rem}
.badge.done{color:#3fb950;border-color:rgba(46,160,67,.5);background:rgba(46,160,67,.1);margin-right:6px}
.done-list{margin-top:12px}
.done-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.done-list li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.done-list .mono{color:#8b949e;font-size:.8rem;min-width:4.5em}
.badge.kind-reddit{color:#f0883e;border-color:#bd561d}
.badge.kind-assignment{color:#58a6ff;border-color:#1f6feb}
.badge.kind-task{color:#bc8cff;border-color:#8957e5}

/* expanding a shift row to read its report */
.caret-col{width:1px;padding-right:0}
.caret{background:none;border:none;color:#8b949e;cursor:pointer;padding:2px 4px;line-height:1;
  font-size:.8rem;border-radius:4px;transition:transform .12s ease,color .12s ease;display:block}
.caret:hover{color:#e6edf3}
.caret:focus-visible{outline:2px solid #388bfd;outline-offset:1px}
.caret.open{transform:rotate(90deg);color:#e6edf3}
/* Every other cell is nowrap; a paragraph of prose needs the opposite. */
.report-row>td{white-space:normal;background:#0f1319;padding:14px 18px 16px 34px;
  box-shadow:inset 0 1px 0 #21262d}
.report-row .report-text{max-width:70ch}
.report-row .report-actions{margin-top:10px}

/* checklist */
.checklist{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;border:1px solid #30363d;border-radius:6px;padding:8px;margin-bottom:12px}
label.check{flex-direction:row;align-items:center;gap:9px;color:#e6edf3;font-size:.88rem;padding:5px 6px;border-radius:4px;cursor:pointer}
label.check:hover{background:#1c2128}
label.check input{width:auto;flex:none}

/* modal */
.modal{position:fixed;inset:0;background:rgba(1,4,9,.75);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:24px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 16px 48px rgba(1,4,9,.7)}
.modal-card h3{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;margin:-4px 0 16px;padding-bottom:12px;border-bottom:1px solid #21262d}
.modal-card label{margin-bottom:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid #21262d}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* permissions */
.access-cell{display:flex;align-items:center;gap:7px;margin-top:4px;white-space:nowrap}
.btn.tiny{padding:1px 8px;font-size:.7rem;font-weight:500}
.perm-scope{border:1px solid #30363d;border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#0f141a;transition:border-color .15s}
.perm-scope:hover{border-color:#484f58}
.perm-scope.perm-all:hover{border-color:#e3b341}
.perm-scope label{margin-bottom:0}
.perm-head{flex-direction:row;align-items:center;gap:9px;color:#e6edf3;font-size:.92rem;cursor:pointer}
.perm-head input{width:auto;flex:none}
.perm-all{border-color:#d29922}
.perm-all strong{white-space:nowrap}
.perm-overridden{opacity:.45}
.perm-body{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.perm-body>label{flex-direction:row;align-items:center;gap:8px;font-size:.84rem;cursor:pointer}
.perm-body>label input{width:auto;flex:none}
.perm-list{max-height:220px;overflow-y:auto;border:1px solid #30363d;border-radius:6px;padding:4px;margin-top:3px}
.perm-item{flex-direction:row;align-items:center;gap:9px;color:#e6edf3;font-size:.86rem;padding:5px 7px;border-radius:4px;cursor:pointer}
.perm-item:hover{background:#1c2128}
.perm-item input{width:auto;flex:none}
.perm-areas{margin-top:10px;border-top:1px solid #30363d;padding-top:8px}
.perm-areas-head{margin:0 0 4px;font-size:.86rem}
.perm-areas-sub{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.perm-areas-sub small{color:#8b949e;font-size:.75rem;font-weight:400;line-height:1.3}
.perm-area{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 7px;border-radius:4px}
.perm-area:hover{background:#1c2128}
.perm-area>div{display:flex;flex-direction:column;min-width:0;font-size:.86rem;color:#e6edf3}
.perm-area small{color:#8b949e;font-size:.75rem;line-height:1.3}
.perm-area select{width:auto;flex:none;padding:3px 6px;font-size:.8rem}

/* invoice */
.invoice-card{width:100%;max-width:720px;max-height:92vh;display:flex;flex-direction:column;gap:10px}
.invoice-bar{display:flex;justify-content:flex-end;gap:10px}
.invoice-paper{background:#fff;color:#1b1f24;border-radius:8px;padding:34px 38px;overflow-y:auto;font-size:.9rem}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid #1b1f24;padding-bottom:14px}
.inv-brand{font-weight:700;font-size:1.25rem}
.inv-brand span{color:#0969da;font-weight:400}
.inv-meta{color:#57606a;font-size:.8rem}
.inv-no{text-align:right}
.inv-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:1rem}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0 24px}
.inv-label{color:#57606a;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}
.inv-payto{border:1px solid #d0d7de;border-left:3px solid #1b1f24;border-radius:6px;padding:10px 14px;margin:0 0 22px}
/* The address has to survive being read off a printed page, so it wraps at any
   character rather than running off the edge or shrinking to fit. */
.inv-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;word-break:break-all;line-height:1.5}
.inv-table{width:100%;border-collapse:collapse;font-size:.85rem}
.inv-table th{color:#57606a;border-bottom:1px solid #1b1f24;padding:8px 10px}
.inv-table td{color:#1b1f24;border-bottom:1px solid #e4e8ed;padding:8px 10px;white-space:normal}
.inv-table tr.inv-total td{border-bottom:none;border-top:2px solid #1b1f24;font-size:.95rem}
.inv-table tr.inv-total td:last-child{text-align:right}

@media(max-width:600px){
  body{padding:12px}
  .timer{font-size:2.3rem}
  .clock-card{padding:26px 18px}
  h2{margin-top:30px}
  .row2{grid-template-columns:1fr}
  .toolbar{gap:8px}
  .toolbar .spacer{display:none}
  .task{flex-direction:column;align-items:stretch;gap:10px}
  .task>.badge{align-self:flex-start}
  .subtasks{margin-left:6px;padding-left:10px}
  .pj-actions{justify-content:flex-start}
  .inv-parties{grid-template-columns:1fr;gap:14px}
  .invoice-paper{padding:20px}
  /* No room for a preview of the text on a phone. The badge stays, so an
     unwritten report is still visible, and the caret opens the rest. */
  .report-cell .report-snip{display:none}
  table{font-size:.82rem}
  th,td{padding:9px 8px}
  /* The table scrolls sideways on a phone, and the panel cell is as wide as
     the table. Without a cap the report runs off into that scroll and has to
     be read one sideways swipe per line. */
  .report-row>td{padding:12px 12px 14px 22px}
  .report-row .report-text,.report-row .report-meta,.report-row .done-list{max-width:calc(100vw - 64px)}
}

@media print{
  body{background:#fff;color:#000;padding:0;max-width:none}
  .nav,.toolbar,.section-head .btn,.modal,#login{display:none !important}
  .table-wrap{background:none;border:none;overflow:visible}
  th{color:#000;border-bottom:1px solid #000}
  td{border-bottom:1px solid #ddd}
  tr.flagged td,tr.total-row td{background:none}
  .badge{border-color:#999;color:#333}
  .warn{background:none;color:#000;border-color:#000}

  /* Printing an invoice prints only the invoice: the overlay is a .modal, so
     it has to be dug back out of the blanket hide above. */
  body.print-invoice>#app,body.print-invoice>#modal{display:none !important}
  body.print-invoice #invoice-overlay{display:block !important;position:static;background:none;padding:0}
  body.print-invoice .invoice-card{max-width:none;max-height:none;display:block}
  body.print-invoice .invoice-bar{display:none !important}
  body.print-invoice .invoice-paper{padding:0;overflow:visible;border-radius:0}
}

/* ---- reddit posting queue ---- */
.racct{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:border-color .15s}
.racct:hover{border-color:#484f58}
.racct-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;transition:background-color .12s}
.racct-head:hover{background:#1c2129}
.racct-title{font-weight:600;font-size:.95rem}
.racct-sub{color:#8b949e;font-size:.8rem;margin-top:2px}
.racct-badge{font-size:.72rem;font-weight:500;padding:1px 9px;border-radius:999px;border:1px solid #30363d;color:#8b949e;background:rgba(110,118,129,.1);flex:none;white-space:nowrap}
.racct-badge.flag{color:#f0883e;border-color:rgba(189,86,29,.75);background:rgba(219,109,40,.1)}
.racct-badge.paid{color:#3fb950;border-color:rgba(46,160,67,.5);background:rgba(46,160,67,.1)}
.racct-badge.quiet{opacity:.55}
.racct-body{border-top:1px solid #30363d;padding:14px 16px;background:#0f141a}
.racct-meta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #21262d;font-size:.86rem}
.racct-meta .hint{margin-top:0}
.racct-meta>div{display:flex;align-items:center;gap:8px}
/* the Redgifs email is typed into a login box, so it has to survive a
   double-click select without dragging the username in with it */
.rg-acct{display:inline-flex;align-items:center;gap:6px}
.rg-acct+.rg-acct{margin-left:10px;padding-left:10px;border-left:1px solid #30363d}
.rg-acct .hint{user-select:all}
/* Notes For Account Manager: full width under the meta row, line breaks kept */
.racct-meta>.racct-notes{flex-basis:100%;display:block}
.racct-notes-body{margin-top:4px;padding:8px 10px;border-left:3px solid #d29922;background:#1c1a14;border-radius:4px;color:#e6edf3;white-space:pre-wrap;line-height:1.45}

.ritem{border:1px solid #21262d;border-radius:8px;padding:12px 14px;margin-bottom:10px;background:#161b22}
.ritem.done{opacity:.55}
.ritem-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ritem-head .badge{margin-left:8px}
.ritem-subs{margin-top:10px}

.story-label{color:#8b949e;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.story{margin-top:10px}
.story-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.story-title{font-weight:600;font-size:.95rem;margin-top:4px;padding:8px 10px;background:#0d1117;border:1px solid #21262d;border-radius:6px}
/* pre-wrap so the blank lines between paragraphs are visible exactly as they
   will paste into Reddit */
.story-body{white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:.86rem;line-height:1.55;margin-top:4px;padding:10px 12px;background:#0d1117;border:1px solid #21262d;border-radius:6px;max-height:340px;overflow-y:auto;color:#c9d1d9}
.btn.ok{color:#3fb950;border-color:#238636}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:.75rem;padding:3px 9px;border-radius:999px;border:1px solid #30363d;background:#0d1117;color:#c9d1d9;cursor:default}
.chip.on{border-color:#2ea043;color:#3fb950}
.chip.banned{border-color:#bd561d;color:#f0883e;text-decoration:line-through}
/* a banned subreddit that today's schedule still asks for: must not be missed */
.chip.danger{border-color:#f85149;background:rgba(248,81,73,.16);color:#ff7b72;font-weight:600}
.chip.unlisted{border-color:#9e6a03;color:#e3b341}
/* the account holds verification in this subreddit, so the post is worth more
   care than an ordinary pick. Padding sheds the extra border width so the chip
   does not stand taller than the plain ones beside it in the same row. */
.chip.verified{border:2px solid #e0a800;padding:2px 8px;color:#f2cc60;
  background:rgba(224,168,0,.1);font-weight:600}
.chip.verified .chip-tag{color:#c9972b}
.chip-tag{color:#6e7681;font-size:.65rem;margin-left:5px}
.rsubs{margin-top:12px;border-top:1px solid #21262d;padding-top:10px}
.rsubs summary{cursor:pointer;color:#8b949e;font-size:.82rem}
.rsubs summary:hover{color:#c9d1d9}
/* inside a posting row this reads as a label, matching the suggested list
   directly above it rather than the account-wide list at the bottom */
.rsubs.in-item{border-top:0;padding-top:0}
.rsubs.in-item summary{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}

/* activity tracker */
.act-hint{margin:0 0 12px}
#act-stats{margin-bottom:12px}
.act-pct{color:#8b949e;font-size:.85rem;font-weight:400}
.act-row{cursor:pointer}
.act-row:hover td{background:#1c2128}
.act-live{border-color:#2ea043;color:#3fb950}
.act-meter{display:inline-block;width:52px;height:6px;border-radius:3px;background:#30363d;vertical-align:middle;overflow:hidden}
.act-meter i{display:block;height:100%;background:#8b949e;border-radius:3px}
.act-chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:#e6edf3;margin-right:10px;white-space:nowrap}
.act-chip i{width:10px;height:10px;border-radius:2px;display:inline-block}
.act-chip .hint{margin:0;font-size:.75rem}
.act-shift-key{background:rgba(88,166,255,.2);border:1px solid rgba(88,166,255,.45)}
.act-legend{display:flex;flex-wrap:wrap;gap:6px 0;margin-bottom:12px}
.act-note{padding:0 14px 12px}
.act-person{background:linear-gradient(180deg,#181e26 0%,#161b22 60%);border:1px solid #30363d;border-radius:10px;padding:12px 14px 6px;margin-bottom:12px;scroll-margin-top:70px}
.act-person-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:8px}
.act-person-head .hint{margin:0}
.act-day{margin-bottom:10px}
.act-day-label{font-size:.75rem;color:#8b949e;margin-bottom:2px}
.act-svg{display:block;width:100%;height:40px;background:#0d1117;border-radius:4px}
.act-shift{fill:rgba(88,166,255,.2)}
.act-grid{stroke:#21262d;stroke-width:1;vector-effect:non-scaling-stroke}
.act-now{stroke:#e6edf3;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.act-ticks{position:relative;height:16px;font-size:.7rem;color:#8b949e}
.act-ticks span{position:absolute;top:1px;white-space:nowrap}
.act-tip{position:fixed;z-index:50;pointer-events:none;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:8px 10px;font-size:.8rem;box-shadow:0 6px 20px rgba(0,0,0,.4);min-width:150px}
.act-tip .hint{margin:0 0 4px;min-height:0}
.act-tip i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px}

/* job titles: multi-pick dropdown and the titles editor */
.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:#8b949e}
.tpick{background:#0d1117;border:1px solid #30363d;border-radius:6px}
.tpick[open]{border-color:#58a6ff}
.tpick summary{padding:9px 11px;color:#e6edf3;font-size:.92rem;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.tpick summary::-webkit-details-marker{display:none}
.tpick summary::after{content:"\25BE";position:absolute;right:11px;color:#8b949e}
.tpick-list{max-height:320px;overflow-y:auto;border-top:1px solid #30363d;padding:4px}
.tpick-new{display:flex;gap:8px;align-items:center;padding:8px;border-top:1px solid #30363d}
#modal-body>.tpick-new{border-top:none;padding:8px 0 0}
.tpick-new input{flex:1;padding:7px 9px}
.tpick-new .btn{flex:none}
.title-row-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.title-row-head input{flex:1}
.title-row-head .btn{flex:none}
.title-secs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.title-row .hint{margin-top:6px}
.sub-label{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;margin:16px 0 6px}

/* Chatters (2026-10-23): one page serves staff.* and chatters.*; anything
   tagged for the other site is switched off here rather than per element. */
.offsite { display: none !important; }
.acct-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.acct-card { background: linear-gradient(180deg,#181e26 0%,#161b22 60%); border: 1px solid #30363d; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.acct-card h3 { margin: 0 0 4px; font-size: 1rem; }
.acct-card .acct-meta { color: #8b949e; font-size: .82rem; }
.acct-card .acct-notes { margin-top: 8px; white-space: pre-wrap; font-size: .88rem; }
#wrong-site .btn{display:block;text-align:center;text-decoration:none}
#wrong-site .hint a{color:#58a6ff}