/* DRIMS Team Ops — scoped to .drims-ops so the theme is untouched */
.drims-ops {
  --do-bg: #ffffff;
  --do-surface: #f7f7f5;
  --do-border: #e4e4df;
  --do-text: #1d1d1b;
  --do-muted: #6b6b66;
  --do-accent: #2f5bea;
  --do-accent-bg: #eef2fe;
  --do-good: #1f8a4c;
  --do-good-bg: #e6f4ec;
  --do-warn: #a15c00;
  --do-warn-bg: #fdf1dc;
  --do-bad: #c0352b;
  --do-bad-bg: #fbe7e5;
  --do-radius: 10px;
  color: var(--do-text);
  background: var(--do-bg);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  position: relative;
}
.drims-ops *, .drims-ops *::before, .drims-ops *::after { box-sizing: border-box; }
.drims-ops [hidden] { display: none !important; }
/* On theme pages the content column is often ~650px; break out to a wide layout (no transform, so the fixed drawer still works) */
.drims-ops--page { width: min(1400px, calc(100vw - 32px)) !important; max-width: none !important; margin-left: calc(50% - min(700px, calc(50vw - 16px))) !important; margin-right: 0 !important; }
.drims-ops--wpadmin { margin-top: 12px; border-radius: var(--do-radius); border: 1px solid var(--do-border); }
.drims-ops h2, .drims-ops h3 { margin: 0; color: var(--do-text); line-height: 1.25; }
.drims-ops a { color: var(--do-accent); text-decoration: none; }
.drims-ops a:hover { text-decoration: underline; }
.drims-ops-note { padding: 16px; border: 1px solid #e4e4df; border-radius: 10px; background: #f7f7f5; }
.drims-ops-loading, .do-empty { padding: 20px; color: var(--do-muted); text-align: center; }
.do-empty--bad { color: var(--do-bad); }
.do-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.do-muted { color: var(--do-muted); font-size: 12.5px; }
.do-bad { color: var(--do-bad); }
.do-warn { color: var(--do-warn); }
.do-n { text-align: right; font-variant-numeric: tabular-nums; }
.do-c { text-align: center; }

/* header */
.do-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.do-title { display: flex; align-items: baseline; gap: 10px; }
.do-title h2 { font-size: 22px; font-weight: 650; }
.do-hello { color: var(--do-muted); }
.do-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.do-live { font-size: 12.5px; padding: 4px 10px 4px 22px; border-radius: 999px; background: var(--do-surface); color: var(--do-muted); position: relative; white-space: nowrap; }
.do-live::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #b5b5ae; }
.do-live--live { color: var(--do-good); background: var(--do-good-bg); }
.do-live--live::before { background: var(--do-good); animation: do-pulse 2s infinite; }
.do-live--polling::before { background: var(--do-warn); }
@keyframes do-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,76,.5); } 70% { box-shadow: 0 0 0 6px rgba(31,138,76,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,76,0); } }

/* controls */
.do-input, .drims-ops input[type="date"] {
  font: inherit; color: var(--do-text); background: var(--do-bg); border: 1px solid var(--do-border); border-radius: 8px;
  padding: 6px 9px; min-height: 34px; max-width: 100%;
}
.do-input:focus, .drims-ops input:focus, .drims-ops select:focus, .do-btn:focus-visible, .do-tab:focus-visible, .do-sort:focus-visible { outline: 2px solid var(--do-accent); outline-offset: 1px; }
.do-btn { font: inherit; font-weight: 600; border: 1px solid var(--do-accent); background: var(--do-accent); color: #fff; border-radius: 8px; padding: 6px 14px; min-height: 34px; cursor: pointer; }
.do-btn:disabled { opacity: .45; cursor: default; }
.do-btn--ghost { background: transparent; color: var(--do-text); border-color: var(--do-border); }
.do-btn--small { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.do-btn--bad { background: var(--do-bad); border-color: var(--do-bad); color: #fff; }
.do-search { width: 280px; }

/* tabs */
.do-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--do-border); margin-bottom: 14px; overflow-x: auto; }
.do-tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--do-muted); cursor: pointer; white-space: nowrap; }
.do-tab.is-active { color: var(--do-text); border-bottom-color: var(--do-accent); font-weight: 600; }
.do-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.do-weeknav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* kpis */
.do-caption { color: var(--do-muted); margin-bottom: 8px; }
.do-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.do-kpi { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 12px; }
.do-kpi__label { font-size: 12.5px; color: var(--do-muted); }
.do-kpi__value { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.do-kpi__sub { font-size: 12px; color: var(--do-muted); }
.do-kpi--good .do-kpi__value { color: var(--do-good); }
.do-kpi--warn { border-color: #f0d4a6; }
.do-kpi--warn .do-kpi__value { color: var(--do-warn); }
.do-kpi--bad { border-color: #f0bdb8; background: var(--do-bad-bg); }
.do-kpi--bad .do-kpi__value { color: var(--do-bad); }

/* tables */
.do-tablewrap { overflow-x: auto; border: 1px solid var(--do-border); border-radius: var(--do-radius); margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.do-table { width: 100%; border-collapse: collapse; background: var(--do-bg); margin: 0; }
.do-table th, .do-table td { padding: 9px 10px; border-bottom: 1px solid var(--do-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.do-table td:first-child { white-space: normal; min-width: 160px; }
.do-table th { font-size: 12.5px; font-weight: 600; color: var(--do-muted); background: var(--do-surface); position: sticky; top: 0; }
.do-table tbody tr:last-child td { border-bottom: 0; }
.do-table--click tbody tr { cursor: pointer; }
.do-table--click tbody tr:hover, .do-table--click tbody tr:focus { background: var(--do-surface); outline: none; }
.do-table tr.is-warning td:first-child { box-shadow: inset 3px 0 0 var(--do-bad); }
.do-table tr.is-dirty { background: #f3f6ff; }
.do-table tr.is-inactive { opacity: .55; }
.do-sort { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font-weight: 600; }
.do-sort.is-active { color: var(--do-text); }
.do-name { font-weight: 600; }
.do-scores .do-score { width: 80px; }
.do-scores .do-notes { width: 100%; min-width: 220px; }
.do-people .do-input { width: 100%; min-width: 130px; }
.do-people .do-small { margin-top: 4px; font-size: 12.5px; min-height: 28px; }
.do-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; padding: 10px 12px; margin: 0 -12px; background: var(--do-bg); border-top: 1px solid var(--do-border); box-shadow: 0 -6px 12px rgba(0,0,0,.04); }

/* chips */
.do-chip { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--do-surface); color: var(--do-muted); margin: 1px 4px 1px 0; white-space: nowrap; }
.do-chip--good { background: var(--do-good-bg); color: var(--do-good); }
.do-chip--warn { background: var(--do-warn-bg); color: var(--do-warn); }
.do-chip--bad { background: var(--do-bad-bg); color: var(--do-bad); }
.do-count { display: inline-block; font-size: 12px; font-weight: 600; background: var(--do-surface); color: var(--do-muted); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.do-status { display: inline-block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--do-muted); margin-right: 6px; }

/* sections, tasks */
.do-section { margin-bottom: 18px; }
.do-section h3, .do-h3 { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.do-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.do-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.do-tasks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--do-border); border-radius: var(--do-radius); max-height: 560px; overflow-y: auto; }
.do-task { display: flex; gap: 10px; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--do-border); margin: 0; }
.do-task:last-child { border-bottom: 0; }
.do-task__main { min-width: 0; }
.do-task__main a { font-weight: 600; word-break: break-word; }
.do-task__meta { text-align: right; flex-shrink: 0; max-width: 45%; }

/* banners, rule */
.do-banner { padding: 10px 12px; border-radius: var(--do-radius); margin-bottom: 12px; }
.do-banner--bad { background: var(--do-bad-bg); color: var(--do-bad); }
.do-banner--warn { background: var(--do-warn-bg); color: var(--do-warn); }
.do-rule { padding: 10px 12px; border-radius: var(--do-radius); background: var(--do-surface); margin-bottom: 14px; }
.do-rule--warn { background: var(--do-warn-bg); color: var(--do-warn); }

/* warning cards */
.do-card__stat { margin: 6px 0; font-weight: 600; }
.do-weeks { margin-bottom: 6px; }

/* bars */
.do-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; padding: 18px 0 34px; position: relative; }
.do-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.do-bar__fill { width: 70%; max-width: 28px; min-height: 2px; background: var(--do-accent); border-radius: 4px 4px 0 0; }
.do-bar__val { font-size: 11px; color: var(--do-text); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.do-bar__day { position: absolute; bottom: -18px; font-size: 11px; color: var(--do-muted); }
.do-bar__hrs { position: absolute; bottom: -32px; font-size: 10.5px; color: var(--do-muted); }

/* drawer */
.do-drawer[hidden] { display: none; }
.do-drawer { position: fixed; inset: 0; z-index: 100000; }
.do-drawer__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 18, .35); }
.do-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(920px, 100%); background: var(--do-bg); overflow-y: auto; padding: 20px 16px 40px; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.do-drawer__close { position: sticky; top: 0; float: right; font-size: 26px; line-height: 1; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--do-border); background: var(--do-bg); cursor: pointer; color: var(--do-text); }
.do-personhead { margin-bottom: 12px; }
.do-personhead h3 { font-size: 20px; }
body.admin-bar .do-drawer__panel { top: 32px; }

.do-foot { margin-top: 10px; font-size: 12px; color: var(--do-muted); }
.do-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--do-text); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100001; max-width: calc(100% - 32px); }
.do-toast--bad { background: var(--do-bad); }
.do-toast[hidden] { display: none; }

@media (max-width: 640px) {
  .drims-ops { padding: 12px; }
  .do-title h2 { font-size: 19px; }
  .do-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .do-kpi__value { font-size: 22px; }
  .do-search { width: 100%; }
  .do-task { flex-direction: column; }
  .do-task__meta { text-align: left; max-width: none; }
  .do-bars { gap: 2px; }
  .do-bar__hrs { display: none; }
}

/* ===================== v1.1 additions ===================== */
.drims-ops h4 { margin: 10px 0 6px; font-size: 13.5px; font-weight: 650; color: var(--do-text); }
.do-nowrap { white-space: nowrap; }
.do-tag { display: inline-block; font-size: 11.5px; line-height: 1; padding: 3px 7px; margin: 2px 4px 2px 0; border-radius: 6px; background: #eef1fb; color: #2a3f8f; white-space: nowrap; }
/* who is credited on a store's profit — content, not a repeated role label */
.do-credit { display: inline-block; font-size: 11.5px; line-height: 1; padding: 3px 7px; margin: 2px 4px 2px 0; border-radius: 6px; background: #eef1fb; color: #2a3f8f; white-space: nowrap; }
.do-loc { display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--do-muted); border: 1px solid var(--do-border); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.do-inline { display: inline-flex; align-items: center; gap: 8px; }
.do-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.do-nav__arrow { min-width: 34px; padding: 7px 10px; font-size: 15px; line-height: 1; }
.do-nav__pick { display: inline-flex; }
.do-navpick { padding: 7px 10px; min-height: 36px; }
.do-nav__label { margin-left: 4px; white-space: nowrap; }
@media (max-width: 640px) { .do-nav__label { width: 100%; margin-left: 0; } }
.do-link { font: inherit; background: none; border: 0; padding: 0; color: var(--do-accent); cursor: pointer; font-weight: 600; }
.do-link:hover { text-decoration: underline; }
.do-link--bad { color: var(--do-bad); }
.do-num { width: 90px; text-align: right; }
.do-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.do-filters .do-input { min-width: 180px; }
.do-tasktable td { white-space: normal; }
.do-tasktable td:first-child { min-width: 240px; }
.do-card-box { background: var(--do-bg); border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 14px; }
.do-card-box h3 { font-size: 15px; margin-bottom: 10px; }
button.do-card-box { font: inherit; text-align: left; color: inherit; cursor: pointer; }
button.do-card-box:hover { background: var(--do-surface); }
.do-card-box--bad { border-left: 4px solid var(--do-bad); }
.do-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.do-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.do-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.do-field .do-input { font-weight: 400; }
.do-field--wide { grid-column: 1 / -1; }
.do-formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; }
.do-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 4px; white-space: nowrap; }
.do-grid-side { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 800px) { .do-grid-side { grid-template-columns: 1fr; } }

/* chart: created vs completed */
.do-chart2 { display: flex; gap: 4px; align-items: stretch; height: 160px; padding-bottom: 20px; overflow-x: auto; }
.do-chart2__col { flex: 1 0 22px; display: flex; flex-direction: column; }
.do-chart2__bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.do-chart2__a, .do-chart2__b { width: 42%; max-width: 14px; min-height: 1px; border-radius: 3px 3px 0 0; }
.do-chart2__a { background: #9db1f5; }
.do-chart2__b { background: var(--do-good); }
.do-chart2__lbl { text-align: center; font-size: 10.5px; color: var(--do-muted); margin-top: 4px; }
.do-legend { font-size: 12px; color: var(--do-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.do-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.do-sw--a { background: #9db1f5; } .do-sw--b { background: var(--do-good); }

/* hours strip */
.do-strip { display: flex; gap: 3px; flex-wrap: wrap; max-width: 420px; }
.do-strip__cell { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: #e9ebe6; vertical-align: middle; }
.do-strip__cell--0 { background: #e9ebe6; color: var(--do-muted); }
.do-strip__cell--1 { background: #c6d6fb; color: #1d2b5c; }
.do-strip__cell--2 { background: #8fb0f6; }
.do-strip__cell--3 { background: #5486ef; }
.do-strip__cell--4 { background: #2f5bea; }
.do-strip__cell.is-quiet { box-shadow: inset 0 0 0 2px var(--do-warn); }
.do-hours td { white-space: normal; }

/* report cards table */
.do-cards td { vertical-align: top; white-space: normal; }
.do-cards .do-rate { width: 64px; text-align: center; }
.do-cards .do-notes { width: 100%; min-width: 220px; resize: vertical; }
.do-auto { font-size: 12.5px; color: var(--do-muted); min-width: 170px; }
.do-table tr.is-warning td:first-child { box-shadow: inset 3px 0 0 var(--do-bad); }

/* modal + report */
.do-modal[hidden] { display: none; }
.do-modal { position: fixed; inset: 0; z-index: 100002; }
.do-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 18, .45); }
.do-modal__panel { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); width: min(900px, calc(100% - 24px)); max-height: 94vh; overflow-y: auto; background: var(--do-bg); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
body.admin-bar .do-modal__panel { top: calc(3vh + 32px); max-height: calc(94vh - 32px); }
.do-modal__bar { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: center; padding: 10px 16px; background: var(--do-bg); border-bottom: 1px solid var(--do-border); }
.do-modal__extra { margin-right: auto; }
.do-modal__body { padding: 20px 24px 28px; }
.do-report section { margin: 18px 0; }
.do-report h3 { font-size: 15px; margin-bottom: 6px; border-bottom: 1px solid var(--do-border); padding-bottom: 4px; }
.do-report p { margin: 6px 0; }
.do-report ul { margin: 4px 0 4px 18px; padding: 0; }
.do-report__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.do-report__head h2 { font-size: 24px; margin: 2px 0 6px; }
.do-report__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--do-muted); }
.do-report__score { min-width: 130px; text-align: center; border-radius: 12px; padding: 12px 16px; background: var(--do-surface); }
.do-report__score span { font-size: 40px; font-weight: 700; line-height: 1; }
.do-report__score small { font-size: 15px; color: var(--do-muted); margin-left: 2px; }
.do-report__score em { display: block; font-style: normal; font-size: 12.5px; margin-top: 6px; }
.do-report__score--good { background: var(--do-good-bg); color: var(--do-good); }
.do-report__score--warn { background: var(--do-warn-bg); color: var(--do-warn); }
.do-report__score--bad { background: var(--do-bad-bg); color: var(--do-bad); }
.do-report__table td:last-child { white-space: normal; }
.do-report__total td { font-weight: 700; background: var(--do-surface); }
.do-report__tasks { max-height: 260px; overflow: auto; }
.do-report footer { margin-top: 20px; font-size: 11.5px; }
.do-history { display: flex; flex-wrap: wrap; gap: 10px; }

/* mistakes */
.do-mistake-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.do-mlist { list-style: none; margin: 0; padding: 0; }
.do-mlist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--do-border); }
.do-mlist li > div { flex: 1; }
.do-pts { flex: 0 0 34px; text-align: center; font-weight: 700; color: var(--do-bad); background: var(--do-bad-bg); border-radius: 6px; padding: 3px 0; }

/* incentives */
.do-incent { margin-bottom: 12px; }
.do-incent__total { font-size: 20px; font-weight: 700; }
.do-profitform { margin-bottom: 18px; border-color: #b9c8f7; background: #fafbff; }
.do-credits { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.do-credit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.do-credit .do-input { min-width: 200px; }
.do-slabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
details.do-section summary { cursor: pointer; font-weight: 650; }

/* people */
.do-rolepick { display: flex; flex-wrap: wrap; gap: 4px; min-width: 260px; max-width: 360px; }
.do-rolebtn { font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-bg); color: var(--do-muted); cursor: pointer; }
.do-rolebtn.is-on { background: #2a3f8f; border-color: #2a3f8f; color: #fff; }
.do-people td { vertical-align: top; }

/* settings */
.do-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
.do-settings__wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .do-settings { grid-template-columns: 1fr; } }

/* my work hero */
.do-hero { display: grid; grid-template-columns: minmax(170px, 220px) 1fr minmax(220px, 1fr); gap: 12px; margin-bottom: 16px; }
.do-hero > div { border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 12px 14px; background: var(--do-surface); }
.do-hero__num { font-size: 40px; font-weight: 700; line-height: 1.1; }
.do-hero__num small { font-size: 15px; color: var(--do-muted); }
.do-hero__score--good .do-hero__num { color: var(--do-good); }
.do-hero__score--warn .do-hero__num { color: var(--do-warn); }
.do-hero__score--bad .do-hero__num { color: var(--do-bad); }
.do-hero__week > div { margin: 3px 0; }
.do-trend { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-top: 6px; }
.do-trend__bar { flex: 1; max-width: 34px; min-height: 4px; border: 0; border-radius: 4px 4px 0 0; cursor: pointer; background: #b5b5ae; }
.do-trend__bar--good { background: var(--do-good); }
.do-trend__bar--warn { background: #e0a23a; }
.do-trend__bar--bad { background: var(--do-bad); }
@media (max-width: 800px) { .do-hero { grid-template-columns: 1fr; } }

/* print: only the report card */

/* v1.3 — founders, connections, attendance */
.do-founder { font-weight: 600; color: var(--do-accent); }
.do-accounts { display: flex; flex-wrap: wrap; gap: 4px; text-decoration: none !important; }
.do-acct { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: var(--do-warn-bg); color: var(--do-warn); white-space: nowrap; }
.do-acct.is-on { background: var(--do-good-bg); color: var(--do-good); }
.at-table th.is-today, .at-table td.is-today { box-shadow: inset 0 2px 0 var(--do-accent); }
.at-table td.at-cell { padding: 4px; text-align: center; vertical-align: middle; min-width: 92px; }
.at-cell--good .at-time, .at-day.at-cell--good { color: var(--do-good); }
.at-cell--warn { background: var(--do-warn-bg); }
.at-cell--jb { background: var(--do-surface); }
.at-btn { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 4px; border-radius: 8px; cursor: pointer; text-align: center; }
.at-btn:hover, .at-cell.is-editing .at-btn { background: rgba(0,0,0,.05); outline: 1px dashed var(--do-border); }
.at-btn:focus-visible { outline: 2px solid var(--do-accent); }
.at-time { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; }
.at-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; }
.at-flags i { font-style: normal; font-size: 10.5px; line-height: 1.3; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--do-warn); border: 1px solid #f1d9ad; white-space: nowrap; }
.at-manual { font-size: 11px; color: var(--do-muted); margin-left: 2px; }
.at-editrow > td { background: var(--do-surface); }
.at-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 0; }
.at-edit .at-note { flex: 1 1 220px; min-width: 0; }
.at-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin: 0 4px 0 10px; border: 1px solid var(--do-border); }
.at-key.at-cell--good { background: var(--do-good-bg); }
.at-settings { margin-bottom: 10px; }
.at-groups-h { margin-top: 18px !important; }
.at-chat { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--do-border); }
.at-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.at-day { border: 1px solid var(--do-border); border-radius: 8px; padding: 6px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cn-table td { vertical-align: top; min-width: 150px; }
.cn-table td:last-child { min-width: 170px; }
.cn-table td:first-child { min-width: 150px; }
.cn-table tr.is-busy { opacity: .55; pointer-events: none; }
.cn-linked { display: flex; gap: 6px; align-items: flex-start; }
.cn-linked > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cn-ok { color: var(--do-good); font-weight: 700; }
.cn-unlink { font-size: 18px; line-height: 1; padding: 0 4px; }
.cn-create { display: flex; margin-top: 6px; }
.cn-phone { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cn-phone .do-input { min-width: 0; flex: 1 1 100%; width: 100%; }
.cn-all { margin: 4px 0 10px; }
.cn-table select.do-input { max-width: 240px; width: 100%; display: block; }
@media (max-width: 700px) { .at-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* v1.4 — clock, day detail, view as */
button.do-bar { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 6px; }
button.do-bar:hover { background: var(--do-surface); }
button.do-bar:hover .do-bar__fill { filter: brightness(1.12); }
button.do-bar:focus-visible { outline: 2px solid var(--do-accent); outline-offset: 2px; }
button.do-bar.is-selected { background: var(--do-surface); box-shadow: inset 0 -3px 0 var(--do-accent); }
button.do-bar.is-selected .do-bar__day { color: var(--do-accent); font-weight: 700; }
.dy-hint { margin: -6px 0 6px; }
.dy { border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 14px; background: var(--do-bg); margin-top: 8px; }
.dy-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.dy-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dy-stats > div { flex: 1 1 120px; border: 1px solid var(--do-border); border-radius: 8px; padding: 8px 10px; background: var(--do-surface); display: flex; flex-direction: column; min-width: 0; }
.dy-stats small { color: var(--do-muted); font-size: 11.5px; }
.dy-stats strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.dy-stats em { font-style: normal; font-size: 12px; color: var(--do-muted); }
.dy-stats .dy-bad strong { color: var(--do-bad); }
.dy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dy-block h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--do-muted); }
.dy-list { list-style: none; margin: 0; padding: 0; }
.dy-item { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--do-border); font-size: 13.5px; }
.dy-item:last-child { border-bottom: 0; }
.dy-time { color: var(--do-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.do-clock { display: inline-flex; align-items: center; gap: 8px; }
.do-clock[hidden] { display: none !important; }
.ck-btn { font-weight: 700; }

.drims-ops .do-btn.ck-btn--in { background: var(--do-good); border-color: var(--do-good); color: #fff; }
.drims-ops .do-btn.ck-btn--in:hover { background: #17703d; }
.drims-ops .do-btn.ck-btn--out { background: #fff; color: var(--do-bad); border: 1px solid #efc2bd; }
.drims-ops .do-btn.ck-btn--out:hover { background: var(--do-bad-bg); }
.ck-on { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--do-good); white-space: nowrap; }
.ck-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--do-good); animation: do-pulse 2s infinite; }
.ck-off { font-size: 12.5px; color: var(--do-muted); white-space: nowrap; }
.va-select select { max-width: 210px; }
.drims-ops .va-banner a.do-btn { color: #fff; text-decoration: none; }
.va-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 28px; background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #f0d58a; font-size: 14px; }
@media (max-width: 960px) { .va-banner { padding: 10px 16px; } .va-select select { max-width: 150px; } }


/* v1.5 — online now, short days, my reports */
.on-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--do-good); box-shadow: 0 0 0 0 rgba(31,138,76,.5); animation: do-pulse 2s infinite; flex: 0 0 9px; }
.on-dot--on_break { background: #e0a106; animation: none; }
.on-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--do-border); border-radius: var(--do-radius); background: var(--do-bg); }
.on-strip > strong { margin-right: 6px; display: inline-flex; align-items: center; font-size: 13.5px; }
.on-chip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface); color: var(--do-text); cursor: pointer; }
.on-chip:hover { border-color: var(--do-good); }
button.do-strip__cell { border: 0; padding: 0; font-family: inherit; cursor: pointer; }
button.do-strip__cell:hover { outline: 2px solid var(--do-text); outline-offset: 1px; }
.do-strip__cell.is-short { background: #f6c9c3 !important; color: #9b2a20 !important; box-shadow: inset 0 0 0 1.5px #d9534a; }
.do-strip__cell.is-off { opacity: .45; }
button.do-bar.is-short .do-bar__fill { background: #d9534a; }
button.do-bar.is-short .do-bar__day { color: var(--do-bad); }
.do-trend--wide { height: 90px; max-width: 640px; }


/* v1.6 — store profit */
.pf-tabs { display: inline-flex; gap: 6px; margin-right: 8px; }
.pf-label { margin-left: 4px; }
.pf-table td { vertical-align: top; }
.pf-table .do-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.pf-head h2 { font-size: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-days tr.is-future td { opacity: .45; }
.pf-days tr.is-picked td { background: color-mix(in srgb, var(--do-accent, #5b3df5) 6%, transparent); }
.pf-days tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--do-accent, #5b3df5); }
.pf-addacct { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.pf-addacct input[data-nf="label"] { flex: 1 1 220px; }
.pf-addacct select { max-width: 240px; }
.pf-settings { margin-bottom: 10px; }
.pf-member { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.pf-member select[data-mf="person_id"] { flex: 1 1 200px; }
.pf-member-actions { display: flex; gap: 8px; margin-top: 8px; }
.pf-grid th.is-today { box-shadow: inset 0 -2px 0 var(--do-accent); }
.pf-grid td { padding: 4px; }
.pf-grid td:first-child { min-width: 170px; padding: 6px 10px; }
.pf-cell { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-cell.is-missing { background: var(--do-warn-bg); border-color: #efc98a; }
.pf-cell.is-dirty { border-color: var(--do-accent); box-shadow: 0 0 0 1px var(--do-accent); }
.pf-other td { background: var(--do-surface); }
.pf-copy { display: grid; grid-template-columns: 200px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.pf-copy input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pf-install { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-install input { flex: 1 1 260px; max-width: 360px; }
.st-space { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
@media (max-width: 700px) { .pf-copy { grid-template-columns: 1fr; } .pf-head { flex-direction: column; } }

@media print {
  html.do-printing body * { visibility: hidden !important; }
  html.do-printing .do-modal, html.do-printing .do-modal * { visibility: visible !important; }
  html.do-printing .do-modal { position: absolute; inset: 0; }
  html.do-printing .do-modal__backdrop, html.do-printing .do-noprint { display: none !important; }
  html.do-printing .do-modal__panel { position: static; transform: none; width: 100%; max-height: none; overflow: visible; box-shadow: none; }
  html.do-printing .do-report__tasks { max-height: none; overflow: visible; }
}

/* ---------- v1.6.1 Store profit: store list → store workspace ---------- */
.drims-ops .do-body.is-refetch { opacity: .55; transition: opacity .15s; }
.pf-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-filter select { min-width: 150px; }
.pf-shift { min-width: 34px; font-size: 16px; line-height: 1; }
.pf-date { width: 150px; }
.pf-label { margin-left: 6px; font-weight: 600; }
.pf-search { margin-left: auto; max-width: 260px; }
.pf-kpis .do-kpi:first-child .do-kpi__value { font-size: 30px; }
.pf-delta { font-weight: 600; white-space: nowrap; }
.pf-delta--good { color: var(--do-good); }
.pf-delta--bad { color: var(--do-bad); }
.pf-delta--muted { color: var(--do-muted); }
.pf-chipbtn { border: 0; cursor: pointer; font: inherit; font-size: 12px; margin-top: 4px; }
.pf-chipbtn:hover { filter: brightness(.96); text-decoration: underline; }
.pf-table .do-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.pf-foot { margin-top: 10px; }
.pf-emptystate { text-align: center; padding: 40px 20px; border: 1px dashed var(--do-border); border-radius: var(--do-radius); }
.pf-emptystate h3 { margin-bottom: 6px; }
.pf-emptystate .do-btn { margin-top: 10px; }

.pf-storehead { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.pf-storehead__main { min-width: 0; }
.pf-storehead__title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-storehead__title h2 { font-size: 21px; }
.pf-switch { font-size: 19px; font-weight: 650; padding: 5px 34px 5px 10px; max-width: 100%; }
.pf-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--do-border); margin: 14px 0 16px; overflow-x: auto; }
.pf-subtab { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; color: var(--do-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pf-subtab:hover { color: var(--do-text); }
.pf-subtab.is-on { color: var(--do-text); border-bottom-color: var(--do-accent); }
.pf-subtab:focus-visible { outline: 2px solid var(--do-accent); outline-offset: -2px; }
.pf-badge { font-size: 11px; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 10px; background: var(--do-warn-bg); color: var(--do-warn); }

.pf-card { background: var(--do-bg); border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 14px 16px; }
.pf-cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.pf-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.pf-chart { position: relative; }
.pf-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-ch__grid { stroke: var(--do-border); stroke-width: 1; }
.pf-ch__zero { stroke: #a9a9a2; stroke-width: 1; }
.pf-ch__tick { fill: var(--do-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-ch__bar.is-pos { fill: var(--do-good); }
.pf-ch__bar.is-neg { fill: var(--do-bad); }
.pf-ch__bar.is-faded { opacity: .4; }
.pf-ch__bar.is-hover { opacity: 1; filter: brightness(1.12); }
.pf-ch__hit { fill: transparent; cursor: pointer; outline: none; }
.pf-ch__hit:hover, .pf-ch__hit:focus-visible { fill: rgba(0, 0, 0, .035); }
.pf-tip { position: absolute; top: 4px; z-index: 3; min-width: 180px; padding: 8px 10px; border-radius: 8px; background: #1d1d1b; color: #fff; font-size: 12px; line-height: 1.45; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.pf-tip__head { font-weight: 600; margin-bottom: 4px; color: #d8d8d3; }
.pf-tip__row { display: flex; gap: 8px; align-items: baseline; }
.pf-tip__row b { font-variant-numeric: tabular-nums; min-width: 72px; }
.pf-tip__row span { color: #bdbdb7; }
.pf-tip__row.is-strong b { font-size: 14px; }

.pf-bdlist { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.pf-bd__top { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.pf-bd__top span:first-child { flex: 1; }
.pf-bd__top strong { font-variant-numeric: tabular-nums; }
.pf-bd__top .do-muted { width: 40px; text-align: right; }
.pf-bd__track { height: 6px; border-radius: 3px; background: var(--do-surface); margin-top: 4px; overflow: hidden; }
.pf-bd__fill { height: 100%; border-radius: 3px; background: #9a9a94; }
.pf-bd--good .pf-bd__fill { background: var(--do-good); }
.pf-bd--bad .pf-bd__fill { background: var(--do-bad); }
.pf-bd--total { padding-bottom: 8px; border-bottom: 1px solid var(--do-border); font-weight: 600; }
.pf-bd--good .pf-bd__top, .pf-bd--bad .pf-bd__top { font-weight: 650; }

.pf-hint { font-size: 13px; }
.pf-hint kbd { font: 600 11px/1 inherit; padding: 2px 5px; border: 1px solid var(--do-border); border-bottom-width: 2px; border-radius: 4px; background: var(--do-bg); }
.pf-dailywrap { max-height: calc(100vh - 260px); overflow: auto; }
.pf-daily thead th { position: sticky; top: 0; z-index: 2; background: var(--do-surface); vertical-align: bottom; }
.pf-daily th[scope="row"], .pf-daily thead th:first-child, .pf-daily tfoot th { position: sticky; left: 0; z-index: 1; background: var(--do-bg); text-align: left; font-weight: 600; }
.pf-daily thead th:first-child { z-index: 3; background: var(--do-surface); }
.pf-daily td.pf-in { padding: 3px 4px; }
.pf-daily .pf-acctcol { min-width: 112px; font-weight: 600; }
.pf-daily tfoot th, .pf-daily tfoot td { font-weight: 650; border-top: 2px solid var(--do-border); background: var(--do-surface); position: sticky; bottom: 0; }
.pf-daily tfoot th { z-index: 2; }
.pf-daily tr.is-future th, .pf-daily tr.is-future td { opacity: .45; }
.pf-daily tr.is-focus th, .pf-daily tr.is-focus td { background: color-mix(in srgb, var(--do-accent) 8%, var(--do-bg)); }
.pf-cell { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-cell.is-missing { background: var(--do-warn-bg); border-color: #efc98a; }
.pf-cell.is-missing::placeholder { color: var(--do-warn); opacity: .8; font-size: 12px; }
.pf-cell.is-dirty { border-color: var(--do-accent); box-shadow: inset 0 0 0 1px var(--do-accent); }
.pf-prev { font-size: 11px; color: var(--do-muted); }

.pf-addcard { margin-top: 14px; padding: 12px 14px; border-radius: var(--do-radius); background: var(--do-surface); }
.pf-addcard h4 { margin: 0 0 8px; font-size: 14px; }
.pf-addacct { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pf-addacct .do-field { margin-bottom: 0; flex: 1 1 200px; }
.pf-addacct .do-btn { margin-bottom: 1px; }
.pf-accts td { vertical-align: top; }
.pf-dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.pf-dl dt { color: var(--do-muted); }
.pf-dl dd { margin: 0; }
.pf-install { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-install .do-input { flex: 1 1 260px; max-width: 360px; }
details.pf-card summary { display: flex; gap: 8px; align-items: center; }
.pf-copy { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; margin-top: 8px; font-size: 13px; }

@media (max-width: 900px) {
  .pf-overview { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pf-search { margin-left: 0; max-width: none; flex: 1 1 100%; }
  .pf-storehead { flex-direction: column; gap: 8px; }
  .pf-filter select { min-width: 0; flex: 1 1 auto; }
  .pf-label { flex: 1 1 100%; margin-left: 0; }
  .pf-date { width: 138px; }
  .pf-ch__tick { font-size: 20px; }
  .pf-kpis .do-kpi:first-child { grid-column: 1 / -1; }
  .pf-dailywrap { max-height: none; }
  .pf-copy { grid-template-columns: 1fr; gap: 2px; }
  .pf-dl { grid-template-columns: 120px 1fr; }
}
.pf-back { margin-right: 4px; }
.pf-kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pf-kpis .do-kpi:first-child .do-kpi__value { font-size: 28px; }
.pf-daily th[scope="row"] { font-size: 13.5px; color: var(--do-text); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.pf-daily .pf-sep { border-left: 1px solid var(--do-border); }
.pf-savebar { align-items: center; }
.pf-savebar[hidden] { display: none; }
@media (max-width: 700px) {
  .pf-back { order: -1; }
  .pf-cell { width: 84px; }
  .pf-daily .pf-acctcol { min-width: 92px; }
}
.pf-daily tbody th[scope="row"] { top: auto; }
.pf-daily tfoot th { top: auto; bottom: 0; }
.pf-setup { max-width: 640px; }
.pf-setup h3 { margin-bottom: 8px; }
.pf-setup p { margin: 0 0 8px; }
.pf-setup .pf-addacct { margin-top: 12px; }
.pf-strip { margin-bottom: 10px; font-size: 13.5px; }
.pf-strip__edit { margin-top: 8px; padding: 12px 14px; border-radius: var(--do-radius); background: var(--do-surface); display: flex; flex-direction: column; gap: 10px; }
.pf-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pf-line .do-field { margin-bottom: 0; flex: 0 1 260px; }
.pf-line .do-check { margin-bottom: 8px; }
.pf-more summary { cursor: pointer; color: var(--do-muted); font-size: 13px; }
.pf-more .pf-addacct { margin-top: 6px; }

/* ---------- v1.6.2 spacing + responsive pass ---------- */
.do-daywrap { display: inline-flex; align-items: center; gap: 8px; }
.do-controls { gap: 10px 12px; }
@media (min-width: 701px) { .do-kpis:not(.pf-kpis) { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.do-settings { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
@media (max-width: 640px) { .do-settings { grid-template-columns: minmax(0, 1fr); } }
.do-grid2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.do-formgrid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.do-card-box, .do-settings > *, .do-grid2 > *, .do-section { min-width: 0; }
.do-card-box { overflow-x: auto; }
.do-card-box .do-table td { white-space: normal; }
.do-check.cn-all { white-space: normal; align-items: flex-start; }
.do-toolbar > * { max-width: 100%; }

/* ---------- v1.7 payslip (Indian format, prints to one page) ---------- */
.ps { font-size: 13.5px; color: #1d1d1b; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--do-border); }
/* logo on its own line, company details stacked underneath it, all flush left */
.ps-co { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
.ps-logo { display: block; max-height: 42px; max-width: 190px; width: auto; }
.ps-co__name { font-size: 19px; font-weight: 700; }
.ps-co__lines { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.5; color: var(--do-muted); max-width: 420px; }
.ps-co__legal { font-weight: 600; color: var(--do-text); letter-spacing: .01em; }
.ps-addr { white-space: pre-line; }
.ps-co__ids { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ps-title { text-align: right; }
.ps-title h2 { font-size: 20px; margin: 2px 0 6px; }
.ps-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--do-border); }
.ps-emp h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--do-muted); margin-bottom: 8px; }
.ps-fact { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 3px 0; }
.ps-fact span { color: var(--do-muted); }
.ps-net__box { background: var(--do-good-bg); border: 1px solid #bfe3cd; border-radius: var(--do-radius); padding: 14px 16px; border-left: 4px solid var(--do-good); }
.ps-net__amt { font-size: 26px; font-weight: 700; color: #14663a; font-variant-numeric: tabular-nums; }
.ps-net__days { margin-top: 10px; padding: 10px 16px; border: 1px solid var(--do-border); border-radius: var(--do-radius); }
.ps-net__days .ps-fact { grid-template-columns: 110px 1fr; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; margin: 16px 0; }
.ps-table { border: 1px solid var(--do-border); border-radius: var(--do-radius); }
.ps-table th { background: var(--do-surface); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; position: static; }
.ps-table td { white-space: normal; }
.ps-table tr.ps-total td { font-weight: 700; background: var(--do-surface); border-top: 1px solid var(--do-border); }
.ps-netline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--do-border); border-radius: var(--do-radius); background: var(--do-surface); }
.ps-netline__amt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-words { text-align: right; margin: 10px 0 18px; }
.ps-notes { padding: 10px 12px; border-left: 3px solid var(--do-border); margin-bottom: 16px; }
.ps-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 14px; border-top: 1px solid var(--do-border); }
.ps-sign { text-align: center; font-weight: 600; }
.ps-sign__line { width: 170px; border-bottom: 1px solid #9a9a94; margin-bottom: 6px; height: 34px; }
.ps-foot__note { max-width: 460px; text-align: right; }
@media (max-width: 700px) {
  .ps-head, .ps-foot { flex-direction: column; align-items: flex-start; }
  .ps-title, .ps-foot__note { text-align: left; }
  .ps-summary { grid-template-columns: 1fr; }
  .ps-fact, .ps-net__days .ps-fact { grid-template-columns: 120px 1fr; }
  .ps-words { text-align: left; }
}
@media print {
  .ps { font-size: 11.5pt; }
  .ps-net__amt { font-size: 20pt; }
  .ps-grid { grid-template-columns: 1fr 1fr; }
}
.pe-details td { background: var(--do-surface); }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 4px 14px; margin-bottom: 8px; }
.pe-grid .do-field { margin-bottom: 6px; }
.do-link--small { font-size: 12px; margin-left: 8px; }
.onb-card { margin-bottom: 12px; }
.onb-card h4 { font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.onb-files { margin: 6px 0 10px; font-size: 13px; }
.onb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.onb-actions select { max-width: 260px; }

/* ---------------------------------------------------------------- v1.8 people directory */
.do-seg { display: inline-flex; border: 1px solid var(--do-border); border-radius: 9px; overflow: hidden; background: var(--do-bg); }
.do-segbtn { appearance: none; border: 0; background: transparent; padding: 7px 13px; font: inherit; font-size: 13px; color: var(--do-muted); cursor: pointer; }
.do-segbtn + .do-segbtn { border-left: 1px solid var(--do-border); }
.do-segbtn.is-on { background: var(--do-accent); color: #fff; font-weight: 600; }
.do-segbtn:hover:not(.is-on) { background: var(--do-surface); color: var(--do-text); }

.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 14px; }
.pg-grid--muted { opacity: .72; }
.pg-card { display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%;
  background: var(--do-bg); border: 1px solid var(--do-border); border-radius: 14px; padding: 16px;
  font: inherit; color: var(--do-text); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.pg-card:hover, .pg-card:focus-visible { border-color: var(--do-accent); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); transform: translateY(-1px); }
.pg-card.is-inactive { background: var(--do-surface); }
.pg-card__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pg-card__id { display: grid; min-width: 0; }
.pg-card__name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-card__role { font-size: 12.5px; color: var(--do-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-card__facts { display: grid; gap: 5px; font-size: 12.5px; color: var(--do-muted); min-width: 0; }
.pg-fact { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pg-fact svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.pg-card__foot { display: flex; flex-wrap: wrap; gap: 5px; }

.pg-av { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--do-surface); border: 1px solid var(--do-border); }
.pg-av--txt { display: inline-flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 15px; color: var(--do-accent); background: #eef1fd; letter-spacing: .02em; }
.pg-av__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pg-av--lg { width: 76px; height: 76px; font-size: 24px; }

.pf-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--do-border); }
.pf-name { font-size: 21px; margin: 0 0 2px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.pf-cols .do-card-box h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--do-muted); }
.pf-note { margin-top: 14px; font-size: 12px; }
/* label above value, so a long email or address wraps instead of being clipped */
.pf-fact { display: grid; gap: 1px; padding: 6px 0; border-bottom: 1px dashed var(--do-border); }
.pf-fact:last-child { border-bottom: 0; }
.pf-fact > span { font-size: 12px; color: var(--do-muted); }
.pf-fact > strong { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pg-grid { grid-template-columns: 1fr; }
  .pf-head { flex-direction: column; align-items: flex-start; }
}

/* page header: says which page you are on and what it is for, tinted by section */
.do-pagehead { margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--do-accent); }
.do-pagehead__title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 650; }
/* portal.css carries these for the portal shell, but the dashboard shortcode does not load it,
   so the icon needs its own base here or it draws as a filled blob */
.drims-ops .po-ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.do-pagehead__title .po-ico { width: 18px; height: 18px; opacity: .8; }
.do-pagehead__blurb { margin: 3px 0 0; font-size: 12.5px; color: var(--do-muted); max-width: 78ch; }
.do-pagehead--work { border-left-color: #2f5bea; }
.do-pagehead--work .po-ico { color: #2f5bea; }
.do-pagehead--performance { border-left-color: #7a4ddb; }
.do-pagehead--performance .po-ico { color: #7a4ddb; }
.do-pagehead--money { border-left-color: #1f8a4c; }
.do-pagehead--money .po-ico { color: #1f8a4c; }
.do-pagehead--admin { border-left-color: #6b6b66; }
.do-pagehead--admin .po-ico { color: #6b6b66; }

/* small icon-only action button, e.g. removing a draft payslip from a month */
.do-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 1px solid var(--do-border); border-radius: 8px; background: var(--do-bg);
  color: var(--do-muted); cursor: pointer; vertical-align: middle; }
.do-iconbtn:hover { background: var(--do-surface); color: var(--do-text); }
.do-iconbtn--bad:hover { border-color: var(--do-bad); color: var(--do-bad); background: var(--do-bad-bg); }
.do-iconbtn:disabled { opacity: .45; cursor: default; }
.do-iconbtn .po-ico { width: 15px; height: 15px; }
.do-btn .po-ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.pr-addrow { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 14px; max-width: 100%; }
/* the person list is long, so let the label wrap and the select shrink rather than
   pushing the page wider than the screen */
.pr-addrow .do-inline { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.pr-addrow select { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .pr-addrow, .pr-addrow .do-inline { width: 100%; } }
.pr-removed { white-space: nowrap; }

/* ---------------------------------------------------------------- v1.10 */
/* page title: one line, no paragraph under it */
.do-pagehead { margin: 0 0 14px; padding-left: 0; border-left: 0; display: flex; align-items: center; gap: 8px; }
.do-pagehead__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

/* settings sections */
.do-seg--page { margin: 0 0 16px; }

/* salary, on the person's card */
.pf-salary__now { font-size: 15px; margin-bottom: 10px; }
.pf-salary__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-salary__form .do-num { width: 120px; }
.pf-salary__hist { margin-top: 10px; font-size: 12.5px; }
.pf-salary__hist ul { margin: 6px 0 0; padding-left: 18px; }
.pf-salary__hist li { margin: 2px 0; }

/* payroll: prorated first month, and the collapsed "left out" list */
.pr-prorate { font-size: 11.5px; margin-top: 3px; white-space: nowrap; }
details.pr-removed { margin: 0 0 14px; font-size: 13px; }
details.pr-removed > summary { cursor: pointer; color: var(--do-muted); }
.pr-removed__list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }

/* payslip generator */
.gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.gen-grid .do-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--do-muted); }
.gen-grid .do-input { width: 100%; }
.gen-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* per-store Shopify app keys */
.pf-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pf-keys .do-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--do-muted); }
.pf-keys .do-input { width: 100%; }
.pf-applist { margin-top: 16px; }
.pf-applist .do-table td { vertical-align: top; }

/* a setup problem, explained as a next step rather than raw API output */
/* expenses ------------------------------------------------------------------ */
.do-input--tiny { max-width: 78px; }
.do-formbar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.do-field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ex-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ex-heads { border-left: 3px solid var(--do-warn); }
.ex-warn { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.ex-warn li { line-height: 1.45; }
.ex-form { background: var(--do-surface); }
.ex-alloc { margin: 4px 0 2px; }
.ex-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* a store chip and its share sit together, so the split reads as one control */
.ex-store { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--do-border); border-radius: 999px; padding: 4px 10px 4px 9px; font-size: 13px; font-weight: 600; }
.ex-store.is-on { border-color: var(--do-accent); background: #eef2fe; }
.ex-store .do-input { max-width: 58px; padding: 2px 6px; min-height: 26px; font-weight: 400; }
.ex-table td { vertical-align: top; }
.ex-table tr.is-inactive td { opacity: .55; }

/* removing a store: set apart from the settings above it, but not shouting */
.pf-danger { border-color: #f0bdb8; }
.pf-danger h3 { color: var(--do-bad); }
.pf-danger__row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--do-border); flex-wrap: wrap; }
.pf-danger__row > div { min-width: 0; flex: 1 1 260px; }
.pf-danger__row .do-muted { margin-top: 2px; }
.pf-danger__confirm { margin-top: 10px; max-width: 340px; }
.pf-danger__confirm code { background: var(--do-bad-bg); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

.pf-problem { display: grid; gap: 6px; overflow-wrap: anywhere; }
.pf-problem em { font-style: normal; font-weight: 600; }
/* scope names are long single words — let them break rather than widen the page on a phone */
.pf-problem code { font-size: .92em; overflow-wrap: anywhere; }
.pf-subs { font-size: 11px; margin-top: 2px; white-space: nowrap; }

/* expenses: overview meters, the Shopify table and the month calendar.
   These were called .ex-bar, the same name the toolbars use. The grid below therefore laid out
   every expenses toolbar as label / track / value, which is why the Import and Add buttons ran
   half the width of the page: they were sitting in the column meant for a bar. */
.ex-meters { display: grid; gap: 10px; }
.ex-meter { display: grid; grid-template-columns: minmax(96px, 1fr) 2.2fr auto; gap: 12px; align-items: center; font-size: 13px; }
.ex-meter__name { font-weight: 600; }
.ex-meter__track { background: var(--do-surface); border-radius: 999px; height: 8px; overflow: hidden; }
.ex-meter__track i { display: block; height: 100%; background: var(--do-accent); border-radius: 999px; }
.ex-meter__val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.ex-meter__val em { font-style: normal; font-weight: 400; color: var(--do-muted); margin-left: 7px; font-size: 12px; }
tr.is-quiet td { background: var(--do-warn-bg); }
.ex-plans { margin-top: 12px; font-size: 13px; }
.ex-plans summary { cursor: pointer; font-weight: 600; }
.ex-plan { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ex-plan > span { min-width: 78px; font-weight: 600; }

.ex-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ex-cal__wd { font-size: 11px; font-weight: 700; color: var(--do-muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.ex-cal__pad { min-height: 84px; }
.ex-cal__day { min-height: 84px; border: 1px solid var(--do-border); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.ex-cal__day.has-items { background: var(--do-surface); }
.ex-cal__day.is-today { border-color: var(--do-accent); box-shadow: inset 0 0 0 1px var(--do-accent); }
.ex-cal__n { font-size: 11px; font-weight: 700; color: var(--do-muted); }
.ex-chip { display: flex; justify-content: space-between; gap: 5px; width: 100%; text-align: left; font: inherit; font-size: 11px; line-height: 1.25; background: var(--do-bg); border: 1px solid var(--do-border); border-left: 3px solid var(--do-accent); border-radius: 5px; padding: 3px 5px; cursor: pointer; }
.ex-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-chip__amt { font-weight: 600; white-space: nowrap; }
.ex-chip--ads, .ex-chip--ai { border-left-color: #7c3aed; }
.ex-chip--rent, .ex-chip--services, .ex-chip--contractors { border-left-color: #a15c00; }
.ex-chip--apps, .ex-chip--tooling { border-left-color: #1f8a4c; }
/* a phone cannot show seven columns of anything useful, so the month becomes a list */
@media (max-width: 720px) {
  .ex-cal { grid-template-columns: 1fr; }
  .ex-cal__wd, .ex-cal__pad { display: none; }
  .ex-cal__day { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ex-cal__day:not(.has-items) { display: none; }
  .ex-cal__n { min-width: 26px; }
  .ex-chip { width: auto; flex: 1 1 160px; }
}
/* review: one proposal per block, with its statement text so you can tell what it is */
.ex-prop { border: 1px solid var(--do-border); border-radius: var(--do-radius); padding: 10px 12px; margin-top: 10px; }
.ex-prop__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ex-prop__eg { font-size: 11px; margin: 3px 0 8px; overflow-wrap: anywhere; }
.ex-prop__act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-prop__act .do-field { margin-bottom: 0; min-width: 150px; }
.ex-prop__act .do-input { min-width: 120px; }
tr.is-unmatched td { background: var(--do-warn-bg); }
.ex-desc { font-size: 11px; overflow-wrap: anywhere; max-width: 280px; }
.ex-import { border: 1px dashed var(--do-border); border-radius: var(--do-radius); padding: 10px 12px; }
.ex-pick { cursor: pointer; display: inline-flex; align-items: center; }
.ex-importres { border-left: 3px solid var(--do-accent); }
.ex-other { border-left: 3px solid var(--do-warn); }
.ex-other .do-btn { margin-top: 10px; }

/* Filtering a month, and the total that follows what is on screen. A total that ignored the
   filter would be worse than none: the reader would trust it. */
.ex-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.do-sep { width: 1px; align-self: stretch; background: var(--do-border); margin: 0 4px; }
.do-table tfoot .do-total th { border-top: 2px solid var(--do-border); font-weight: 700;
  background: var(--do-surface); }
.ex-imports { border-left: 3px solid var(--do-border); }
.ex-imports .do-btn { margin-top: 10px; }
.do-btn.is-off { opacity: .45; cursor: not-allowed; }
.do-table .do-small { font-size: 12px; margin-top: 2px; }

/* expenses, made to read as one screen ------------------------------------- */
/* The views and the import control share the tab bar. Importing is occasional and belongs with
   the navigation; a dashed panel across the top of every view competed with the numbers under it
   and made the tab look like a settings page. */
.ex-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; border-bottom: 1px solid var(--do-border); margin: 14px 0 18px; }
.ex-head .pf-subtabs { border-bottom: 0; margin: 0; flex: 1 1 auto; }
.ex-importbar { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; flex: 0 0 auto; }
.ex-cur { width: auto; min-width: 104px; }
.ex-pick { cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; }
.do-input--small { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.ex-search { width: 190px; }

/* toolbars sit on one line and their buttons keep their own width */
.ex-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ex-bar > .do-btn, .ex-bar > .ex-pick, .ex-bar > .do-input { flex: 0 0 auto; }

/* filter chips: the state of the table, not buttons competing with the actions */
.pf-chip { font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  background: var(--do-surface); border: 1px solid var(--do-border); color: var(--do-muted);
  border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.pf-chip:hover { color: var(--do-text); border-color: var(--do-muted); }
.pf-chip.is-on { background: var(--do-accent); border-color: var(--do-accent); color: #fff; }
.pf-chip:focus-visible { outline: 2px solid var(--do-accent); outline-offset: 2px; }
.pf-chip + .pf-chip { margin-left: 4px; }

/* the selection bar only exists while something is selected, and says what will go */
.ex-selbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--do-accent-bg, #eef2fe); border: 1px solid var(--do-accent);
  border-radius: var(--do-radius); padding: 9px 12px; margin-bottom: 12px; font-size: 13px; }
.ex-selbar__sp { flex: 1 1 auto; }
.ex-pickcol { width: 34px; padding-right: 0 !important; }
.ex-pickcol input { width: 16px; height: 16px; accent-color: var(--do-accent); cursor: pointer; }
.do-table tr.is-picked td { background: var(--do-accent-bg, #eef2fe); }

/* set-aside vendors, as chips you can take back in one click */
.ex-ignored .ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 999px; padding: 4px 4px 4px 11px; }
.ex-chip__x { border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; line-height: 1;
  color: var(--do-muted); padding: 0 6px; border-radius: 999px; }
.ex-chip__x:hover { color: var(--do-bad); background: var(--do-bad-bg); }

/* numbers are read down a column, so they line up and share one weight */
.do-table .do-num { font-variant-numeric: tabular-nums; }
.do-kpi__value { letter-spacing: -.01em; }

/* Review: a row per vendor rather than a card per vendor. Sixty subscriptions to work through is
   sixty scroll-lengths when each one is a box; on one line each it is a list you can get through. */
.ex-props { border: 1px solid var(--do-border); border-radius: var(--do-radius); margin-top: 10px; overflow: hidden; }
.ex-prop { border: 0; border-radius: 0; margin: 0; padding: 10px 12px; }
.ex-prop + .ex-prop { border-top: 1px solid var(--do-border); }
.ex-prop:nth-child(even) { background: var(--do-surface); }
.ex-prop__head strong { font-size: 14px; }
.ex-prop__eg { margin: 2px 0 7px; }
.ex-prop__act .do-input { min-height: 32px; padding: 4px 8px; font-size: 13px; min-width: 104px; }
.ex-prop__act .do-field { min-width: 132px; }
.ex-prop__act select.do-input { min-width: 124px; }

/* the pick column is as wide as a checkbox and no wider */
.ex-pickcol { width: 1%; white-space: nowrap; padding-right: 0 !important; }

/* the Shopify panel keeps a card edge when it is the only thing on the row */
.ex-plans { border-top: 1px solid var(--do-border); padding-top: 10px; }

/* the one line that points at the currency, where a wrong month is actually noticed */
.ex-hint { font-size: 13px; color: var(--do-muted); margin: -6px 0 16px; }
.ex-hint .do-link { font-size: 13px; }
.ex-swap { margin-left: 8px; }
.ex-importbar .pf-badge { margin-left: 6px; }

/* presence on the People page. The dot rides the face on a card and sits before the name in the
   accounts table, so "who is working right now" is one glance rather than a separate screen. */
.pg-card__face { position: relative; display: inline-flex; }
.pg-card__face .on-dot { position: absolute; right: -1px; bottom: -1px; margin: 0;
  outline: 2px solid #fff; }   /* a ring, not a box-shadow: the dot's pulse animates that */
.pg-card.is-online { border-color: var(--do-good); }
.pg-card__now { color: var(--do-good); font-weight: 600; }
.do-namefield { display: flex; align-items: center; gap: 6px; }
.do-namefield .on-dot { flex: 0 0 auto; }

/* payroll: the bank statement against what is owed */
.pr-bank { border: 1px dashed var(--do-border); border-radius: var(--do-radius); padding: 10px 12px; }
.pr-bankmatch { border-left: 3px solid var(--do-accent); }
.pr-bonus { white-space: nowrap; }
.pr-bonus .do-input { width: 92px; }
.pr-bonuslabel { width: 120px; margin-left: 6px; }
.do-table tr.pr-short td { background: var(--do-warn-bg); }

/* a difference has more than one honest answer, so the answers sit with the warning */
.ex-why { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; vertical-align: middle; }
.ex-explained { border-left: 3px solid var(--do-good); }

/* the export group sits at the far end of the filter row, away from the controls that change it */
.pf-spacer { flex: 1 1 auto; }
.pf-export { display: inline-flex; align-items: center; gap: 6px; }

/* the Google Sheet panel: the address to share is the step people miss, so it gets its own box */
.gs-share { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: var(--do-radius);
  padding: 10px 12px; margin: 12px 0; font-size: 13px; }
/* the address is the thing people are here to copy, so it gets the full width rather than being
   cut off at whatever the input's default happens to be */
.gs-share .do-input { margin-top: 6px; width: 100%; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.gs-id { min-width: 280px; flex: 1 1 280px; }
.gs-card .do-tablewrap { margin-top: 12px; }

/* the Apps Script route: numbered steps, then the script itself, ready to copy */
.gs-steps { margin-top: 16px; border-top: 1px solid var(--do-border); padding-top: 14px; }
.gs-steps h4 { margin: 0 0 8px; font-size: 14px; }
.gs-steps ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.gs-script { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.45; border: 1px solid var(--do-border); border-radius: var(--do-radius);
  padding: 10px 12px; margin-top: 10px; background: var(--do-surface); color: var(--do-text);
  resize: vertical; white-space: pre; }
.gs-alt { margin-top: 16px; border-top: 1px solid var(--do-border); padding-top: 12px; font-size: 13px; }
.gs-alt summary { cursor: pointer; font-weight: 600; }
.gs-alt > *:not(summary) { margin-top: 10px; }

/* --- chargebacks: a deadline nobody sees is a dispute already lost, so the urgent ones look it */
.pf-cb { margin-bottom: 14px; }
.pf-cb.is-urgent { border-color: var(--do-bad); }
.pf-cblist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pf-cbrow { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--do-border); border-radius: var(--do-radius);
  background: var(--do-surface); color: inherit; font: inherit; }
.pf-cbrow:hover, .pf-cbrow:focus-visible { border-color: var(--do-bad); }
.pf-cbrow.is-urgent { background: var(--do-bad-bg); border-color: var(--do-bad); }
.pf-cbrow__when { flex: 0 0 auto; min-width: 116px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-cbrow.is-urgent .pf-cbrow__when { color: var(--do-bad); }
.pf-cbrow__what { flex: 1 1 auto; }
.pf-cbrow__go { flex: 0 0 auto; color: var(--do-accent, inherit); }
.pf-cbnote { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .pf-cbrow { flex-wrap: wrap; gap: 2px 10px; }
  .pf-cbrow__when { min-width: 0; }
  .pf-cbrow__what { flex-basis: 100%; }
}

/* --- tracked spaces: track and private are two different decisions, so two columns */
.st-spacehint { margin-bottom: 10px; line-height: 1.5; }
.st-spaces th.do-c, .st-spaces td.do-c { width: 90px; }
/* a personal list inside a performance dashboard needs to look like it stops here */
.pv-mine { border-left: 3px solid var(--do-border); padding-left: 12px; }

/* a day somebody was away in Jibble: distinct from both "present" and "nothing came in" */
.at-cell--off { background: repeating-linear-gradient(135deg, var(--do-surface), var(--do-surface) 6px, transparent 6px, transparent 12px); }
.at-off { font-size: 11px; text-transform: lowercase; }

/* --- vault: a page that should look like it is holding something */
.vt-card { max-width: 780px; }
.vt-locked { text-align: left; }
.vt-bar { gap: 8px; margin-bottom: 12px; }
.vt-search { flex: 1 1 260px; max-width: 420px; }
.vt-secret { min-width: 200px; }
.vt-plain { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.vt-code { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.vt-code__digits { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: 2px; }
/* Reveal / Code / Edit / Delete sat close enough together to mis-hit, and one of them is Delete.
   A gap wide enough to aim at, and they wrap instead of squeezing on a narrow screen. */
/* Unlock and the recovery link were a single space apart, which reads as one control and invites
   the wrong click — and the wrong click there is the one you make when you are already locked out. */
.vt-unlockbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.vt-acts { display: flex; align-items: center; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.vt-acts .do-link { padding: 4px 2px; }
.vt-card--edit { box-shadow: 0 0 0 2px var(--do-accent); scroll-margin-top: 16px; }
/* A QR has to stay square, high-contrast and big enough for a phone to find. White behind it even
   in dark mode: a scanner reads dark-on-light, and an inverted code is a code that does not scan. */
.vt-qr { margin-top: 10px; }
.vt-qr__img { display: block; width: 168px; height: 168px; background: #fff; padding: 6px;
  border-radius: 6px; border: 1px solid var(--do-border); object-fit: contain; }
.vt-qr__img svg { display: block; width: 100%; height: 100%; }
.vt-qrfield input[type="file"] { padding: 7px; background: var(--do-surface); }
/* ---- the vault list: one quiet line per account, everything inside it when opened ---- */
.vt-list { border: 1px solid var(--do-border); border-radius: var(--do-radius); overflow: hidden; }
.vt-row + .vt-row { border-top: 1px solid var(--do-border); }
.vt-row.is-open { background: var(--do-surface); }
.vt-row.is-picked { background: var(--do-accent-bg); }
.vt-row__head { display: flex; align-items: stretch; }
.vt-row__pick { display: flex; align-items: center; padding: 0 4px 0 12px; cursor: pointer; }
.vt-row__pick input { width: 16px; height: 16px; cursor: pointer; }
.vt-row__main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; }
.vt-row__main:hover { background: rgba(0, 0, 0, .025); }
.vt-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.vt-row__sub { color: var(--do-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; min-width: 0; }
.vt-row__marks { display: flex; gap: 5px; flex: 0 0 auto; }
.vt-mark { font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--do-muted);
  background: var(--do-bg); border: 1px solid var(--do-border); border-radius: 999px; padding: 2px 7px; }
.vt-row__chev { flex: 0 0 auto; color: var(--do-muted); font-size: 18px; line-height: 1;
  transition: transform .18s ease; }
.vt-row.is-open .vt-row__chev { transform: rotate(90deg); }
/* the open animation: grid-template-rows is the one way to animate to a height nobody knows yet */
.vt-row__body { padding: 2px 14px 14px 46px; animation: vtOpen .18s ease-out; }
@keyframes vtOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vt-row__body { animation: none; }
  .vt-row__chev { transition: none; }
}
.vt-f { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--do-border); }
.vt-f:first-child { border-top: 0; }
.vt-f__label { flex: 0 0 150px; color: var(--do-muted); font-size: 12.5px; padding-top: 2px; }
.vt-f__body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vt-f__acts { flex: 0 0 auto; display: flex; gap: 12px; }
/* a block of recovery codes is a paragraph: it scrolls inside itself instead of stretching the row */
.vt-codesblock { margin: 0; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55;
  background: var(--do-bg); border: 1px solid var(--do-border); border-radius: 8px; padding: 8px 10px;
  width: 100%; }
.vt-note-text { white-space: pre-wrap; word-break: break-word; }
.vt-row__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--do-border); }
.vt-row__footacts { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) {
  .vt-row__sub { display: none; }
  .vt-row__body { padding-left: 14px; }
  .vt-f { flex-direction: column; gap: 4px; }
  .vt-f__label { flex: none; }
}
.vt-pick { width: 34px; text-align: center; }
.vt-pick input { width: 16px; height: 16px; cursor: pointer; }
.do-table tr.is-picked > td { background: var(--do-accent-bg); }
.vt-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.vt-reckey { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; line-height: 1.7;
  padding: 12px; border: 1px dashed var(--do-border); border-radius: var(--do-radius);
  background: var(--do-surface); white-space: pre-wrap; word-break: break-all; }
.vt-log { max-height: 320px; overflow: auto; }
.vt-note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.vt-foot { margin-top: 16px; font-size: 12.5px; line-height: 1.6; }
.vt-open { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* --- out of office: Jibble owns leave, the portal only says where somebody is */
.on-dot--away { background: transparent; border: 2px solid var(--do-muted, #8a8a8a); box-sizing: border-box; }
.on-away { margin-left: 10px; font-weight: 600; }
.on-chip--away { opacity: .85; }
.at-away { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }

/* Adding a space by ID: a personal ClickUp space is invisible to the team endpoint, so it can only
   get here by being typed in. */
.st-addspace { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.st-addspace .do-field { flex: 1 1 320px; margin: 0; }

/* Where somebody last opened the portal from. Deliberately quiet: it is an approximate signal and
   should not read like a fact the portal is asserting. */
.pg-fact--seen { color: var(--do-muted); }
.do-tznote { margin-left: 8px; font-weight: 400; }

/* Anyone missed in payroll. Loud enough to notice, quiet when there is nothing to say. */
.pg-gaps { margin-bottom: 16px; }
.pg-clear { margin-bottom: 16px; }
.do-rule--good { border-left: 3px solid var(--do-good); background: var(--do-good-bg); }
.pg-hint { margin-bottom: 10px; font-size: 12.5px; }

/* A review: one form, one period, four numbers and your notes. */
.rv-new { margin-bottom: 16px; }
.rv-rates { margin-top: 8px; }
.rv-rates .do-field { flex: 1 1 150px; }
.rv-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.rv-live { font-size: 13px; }

/* ================================================================== v1.40 the report document
 *
 * A performance report is a document, not a dashboard panel, and it is printed far more often
 * than it is read on screen. So it is typeset once, in measurements that mean something on paper
 * (pt, mm), and the screen simply shows the same page on a white sheet.
 *
 * Nothing in here uses the portal's chips, cards or accent colour. A document about somebody's
 * job should not look like a product UI.
 */
.rp {
  --rp-ink: #1f2733;
  --rp-head: #2a4160;
  --rp-rule: #d4dae2;
  --rp-soft: #f4f6f8;
  color: var(--rp-ink);
  font-size: 14px;
  line-height: 1.62;
  max-width: 44em;
  margin: 0 auto;
}
.rp-title { text-align: center; margin: 4px 0 26px; }
.rp-title h1 { font-size: 23px; font-weight: 700; color: var(--rp-head); letter-spacing: -.01em; margin: 0 0 6px; line-height: 1.25; }
.rp-title__sub { font-size: 13px; color: #5d6b7d; margin: 0; }

/* the identity table, and the assessment table, which is the same object saying something else */
.rp-facts { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 13.5px; }
.rp-facts th, .rp-facts td { border: 1px solid var(--rp-rule); padding: 9px 12px; text-align: left; vertical-align: top; }
.rp-facts th { background: var(--rp-soft); font-weight: 600; width: 34%; color: var(--rp-ink); }
.rp-facts td { background: #fff; }

.rp-part {
  font-size: 17px; font-weight: 700; color: var(--rp-head);
  margin: 30px 0 14px; padding-bottom: 7px; border-bottom: 2px solid var(--rp-rule);
}
.rp-h { font-size: 15px; font-weight: 700; color: var(--rp-head); margin: 22px 0 8px; }
.rp-h--plain { margin-top: 26px; }
.rp-sub { font-size: 14px; font-weight: 700; color: #3c4f6b; margin: 16px 0 6px; }
.rp-p { margin: 0 0 11px; }
.rp-expected { color: #4a5666; }
.rp-ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.rp-ul li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.rp-ul li::before { content: "•"; position: absolute; left: 3px; color: #7d8a9c; }
.rp-ul--tight li { margin-bottom: 3px; }
.rp-note { color: #6b7787; font-size: 12.5px; }
.rp-late { color: #b3261e; font-size: 12px; font-weight: 600; }
.rp-count { color: #6b7787; font-weight: 400; font-size: 12.5px; }

/* the one thing on the page that is allowed to raise its voice */
.rp-callout {
  border: 1px solid var(--rp-rule); border-left-width: 4px;
  background: var(--rp-soft); padding: 12px 15px; margin: 4px 0 18px;
  font-weight: 650; line-height: 1.55;
}
.rp-callout--bad  { border-color: #e3b4ae; border-left-color: #b3261e; background: #fdf5f4; color: #8c1d18; }
.rp-callout--warn { border-color: #e6d3aa; border-left-color: #b07d18; background: #fdfaf2; color: #7a5510; }
.rp-callout--good { border-color: #b7d9c2; border-left-color: #1e7a45; background: #f4fbf6; color: #14532d; }
.rp-callout--neutral { border-left-color: var(--rp-head); }

.rp-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13.5px; }
.rp-table th, .rp-table td { border: 1px solid var(--rp-rule); padding: 7px 11px; text-align: left; }
.rp-table th { background: var(--rp-soft); font-weight: 600; }
.rp-table .rp-n { text-align: right; white-space: nowrap; }
.rp-table__total td { font-weight: 700; background: var(--rp-soft); }

.rp-foot { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--rp-rule); font-size: 12px; color: #6b7787; }

/* ---- the remarks composer. Not the document: how the document gets written. */
.rk { margin: 26px auto 0; max-width: 44em; border-top: 2px solid var(--do-border); padding-top: 20px; }
.rk__h { font-size: 15px; margin: 0 0 4px; }
.rk__lead { font-size: 13px; margin: 0 0 14px; max-width: 46em; }
.rk__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.rk__item { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 10px; padding: 11px 13px; }
.rk__text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.rk__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--do-muted); }
.rk__compose { display: grid; gap: 10px; }
.rk__box { width: 100%; resize: vertical; line-height: 1.55; }
.rk__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rk__hint { font-size: 12.5px; }

/* ---- on paper.
 * @page carries the margins and the running footer, so the document is not responsible for
 * leaving room for them. Sections are kept off page breaks where a split would read badly.
 */
@media print {
  @page {
    size: A4;
    margin: 18mm 16mm 20mm;
  }
  html.do-printing .do-modal__body { padding: 0 !important; }
  html.do-printing .rp {
    max-width: none;
    font-size: 10.5pt;
    line-height: 1.55;
    color: #000;
  }
  html.do-printing .rp-title { margin-bottom: 8mm; }
  html.do-printing .rp-title h1 { font-size: 17pt; }
  html.do-printing .rp-title__sub { font-size: 9.5pt; }
  html.do-printing .rp-part { font-size: 13pt; margin-top: 8mm; }
  html.do-printing .rp-part--break { break-before: page; page-break-before: always; }
  html.do-printing .rp-h { font-size: 11.5pt; }
  html.do-printing .rp-sub { font-size: 10.5pt; }
  html.do-printing .rp-facts, html.do-printing .rp-table { font-size: 9.5pt; }
  html.do-printing .rp-note { font-size: 9pt; }
  /* a heading at the foot of a page with its first line overleaf is the classic printed-web look */
  html.do-printing .rp-part, html.do-printing .rp-h, html.do-printing .rp-sub { break-after: avoid; page-break-after: avoid; }
  html.do-printing .rp-facts, html.do-printing .rp-table, html.do-printing .rp-callout { break-inside: avoid; page-break-inside: avoid; }
  html.do-printing .rp-ul li { break-inside: avoid; page-break-inside: avoid; }
  html.do-printing .rp-callout { background: #fdf5f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.do-printing .rp-callout--neutral, html.do-printing .rp-callout--good, html.do-printing .rp-callout--warn { background: #f4f6f8 !important; }
  html.do-printing .rp-facts th, html.do-printing .rp-table th, html.do-printing .rp-table__total td {
    background: #f4f6f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ================================================== v1.40 spacing, and the People table rebuilt
 *
 * One rule for a row of buttons, used everywhere, so "Reveal Edit Delete" and "Save Details" and
 * "Read Edit Delete" all sit the same distance apart instead of each screen inventing a gap.
 */
.do-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.do-btnrow--end { justify-content: flex-end; }
.do-btnrow--tight { gap: 8px; }
.do-hint { display: block; font-size: 12px; color: var(--do-muted); line-height: 1.45; font-weight: 400; margin-top: 2px; }

/* THE PEOPLE TABLE.
 *
 * Nine columns of live form controls is a lot to ask of automatic table layout, and it was not
 * coping: the account chips took the width they wanted, everything else was squeezed below its
 * own minimum, and the Save button was pushed past the right edge of the scroller. Fixed layout
 * with declared widths, a name column pinned to the left and an actions column pinned to the
 * right, so the two things you need while scrolling sideways are always on screen.
 */
.do-tablewrap--people { overflow: auto; max-height: min(74vh, 900px); }
/* The minimum is the SUM of the column widths, not a round number below it. Under fixed layout a
 * table narrower than its columns scales every one of them down, which is what clipped
 * "Attendance" to "Attendanc" underneath the pinned actions column. */
.do-people { table-layout: fixed; min-width: 1365px; }
.do-people--pay { min-width: 1525px; }
.do-people col.pe-c-name   { width: 215px; }
.do-people col.pe-c-roles  { width: 265px; }
.do-people col.pe-c-access { width: 145px; }
.do-people col.pe-c-lead   { width: 160px; }
.do-people col.pe-c-works  { width: 115px; }
.do-people col.pe-c-accts  { width: 175px; }
.do-people col.pe-c-flags  { width: 160px; }
.do-people col.pe-c-pay    { width: 160px; }
.do-people col.pe-c-act    { width: 130px; }
/* the role chips are the tallest thing in the row; a little less padding is several fewer lines */
.do-people .do-rolebtn { padding: 3px 7px; font-size: 11px; }

.do-people th, .do-people td { padding: 12px 14px; vertical-align: top; white-space: normal; }
.do-people td > * + * { margin-top: 8px; }
.do-people .do-input { width: 100%; min-width: 0; }          /* min-width was what overflowed the cell */
.do-people .do-small { margin-top: 8px; font-size: 12.5px; }
.do-people .do-check { margin-top: 0; white-space: normal; align-items: flex-start; line-height: 1.4; }
.do-people .pe-flags .do-check + .do-check,
.do-people .pe-pay .do-check { margin-top: 9px; }
.do-people .do-rolepick { min-width: 0; max-width: none; gap: 5px; }
.do-people .do-founder { font-size: 12.5px; line-height: 1.45; }
.do-people .do-accounts { gap: 5px; }
.do-people .pe-accts { white-space: normal; }
.do-people .do-acct { white-space: nowrap; }

/* pinned name and actions. The header cells need their own z so they win at the crossing point. */
.do-people th:first-child, .do-people td:first-child,
.do-people th:last-child,  .do-people td:last-child { position: sticky; background: var(--do-bg); }
.do-people th:first-child, .do-people td:first-child { left: 0; }
.do-people th:last-child,  .do-people td:last-child  { right: 0; }
.do-people td:first-child { box-shadow: 1px 0 0 var(--do-border); }
.do-people td:last-child  { box-shadow: -1px 0 0 var(--do-border); }
.do-people thead th { background: var(--do-surface); z-index: 3; }
.do-people thead th:first-child, .do-people thead th:last-child { z-index: 4; background: var(--do-surface); }
.do-people tbody td:first-child, .do-people tbody td:last-child { z-index: 2; }
.do-people tr.is-dirty td:first-child, .do-people tr.is-dirty td:last-child { background: #f3f6ff; }
.do-people tbody tr:hover td:first-child, .do-people tbody tr:hover td:last-child { background: var(--do-surface); }
.do-people .pe-act { vertical-align: top; }
/* Two buttons side by side do not fit a column this narrow, and half-fitting is how you get a
 * wrapped row with ragged left edges. Stacked and stretched is deliberate and reads as a pair. */
.do-people .pe-act .do-btnrow { flex-direction: column; align-items: stretch; gap: 8px; }

/* the details drawer, which is the "edit page" */
.do-people .pe-details td { background: var(--do-surface); padding: 0; }
.do-people .pe-details td:first-child, .do-people .pe-details td:last-child { position: static; box-shadow: none; }
.pe-drawer { padding: 18px 20px 20px; border-left: 3px solid var(--do-accent); }
.pe-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pe-drawer__head h4 { font-size: 15px; margin: 0; }
.pe-block { margin-bottom: 20px; }
.pe-block__t { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--do-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--do-border); }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 20px; margin-bottom: 0; }
.pe-grid .do-field { margin-bottom: 14px; }
.pe-drawer__foot { padding-top: 16px; border-top: 1px solid var(--do-border); }

/* the profile modal, which is the other thing called "the edit page" */
.pf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.pf-cols .do-card-box { padding: 16px 18px; }
.pf-fact { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 14px; padding: 7px 0; border-bottom: 1px solid var(--do-border); font-size: 13.5px; align-items: baseline; }
.pf-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-fact > span { color: var(--do-muted); }
.pf-fact > strong { word-break: break-word; }
.pf-head { gap: 16px; align-items: center; margin-bottom: 18px; }
.pf-note { margin-top: 16px; font-size: 12.5px; }
.pf-salary__form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.pf-salary__form .do-input { min-width: 0; flex: 1 1 130px; }

/* a modal that is a form deserves the same bar as one that is a document */
.do-modal__bar { gap: 12px; padding: 12px 20px; }
.do-modal__extra { display: inline-flex; align-items: center; gap: 14px; flex: 1 1 auto; }

@media (max-width: 760px) {
  .do-people th:first-child, .do-people td:first-child,
  .do-people th:last-child,  .do-people td:last-child { position: static; box-shadow: none; }
  .pe-drawer { padding: 14px; }
}

/* One spacing scale for rows of controls, applied to every screen that had invented its own.
 * Two numbers, and a reason for each: buttons and inputs have a border you can see, so 10px is
 * enough air between them; bare text links have no edge of their own and read as one run-on
 * sentence at 10, so they get 14. Nothing else. */
.do-savebar   { gap: 10px; padding: 12px 14px; }
.onb-actions  { gap: 10px; }
.pf-install   { gap: 10px; }
.pf-tabs      { gap: 8px; margin-right: 12px; }
.rv-actions   { gap: 14px; margin-top: 16px; }
.rv-new .do-formgrid { gap: 0 18px; }
.rv-rates     { margin-top: 4px; }
.do-formgrid  { gap: 0 18px; }
.do-section + .do-section { margin-top: 22px; }
.pf-cardhead  { gap: 8px 14px; margin-bottom: 12px; }
.do-tablewrap + .do-savebar { margin-top: -8px; }

/* The printed sheet is a sheet, not the modal photographed.
 *
 * The modal is a fixed, centred, rounded panel 900px wide sitting on a dimmed page. Left alone,
 * print keeps all of that: the document came out inside a rounded box, offset from the left
 * margin, with the right-hand columns running off the edge of the paper. Everything that makes it
 * a panel is undone here, and the page underneath is forced plain white.
 */
@media print {
  html.do-printing, html.do-printing body {
    width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: #fff !important;
  }
  /* The modal stays OUT OF FLOW. The page behind it is hidden with visibility, which keeps its
   * height — let the modal join that flow and the dashboard's blank height prints as a page of
   * nothing before the document starts. */
  html.do-printing .do-modal {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    bottom: auto !important; background: none !important;
  }
  html.do-printing .do-modal__panel,
  body.admin-bar html.do-printing .do-modal__panel {
    position: static !important; top: auto !important; left: auto !important;
    transform: none !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    margin: 0 !important; border-radius: 0 !important; border: 0 !important;
    box-shadow: none !important; background: #fff !important;
    max-height: none !important; overflow: visible !important;
  }
  html.do-printing #wpadminbar, html.do-printing .po-nav, html.do-printing .po-head { display: none !important; }
}

/* ================================================================ v1.41 report cards by period */
.cp-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.cp-date { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--do-muted); }
.cp-date .do-input { min-width: 150px; }
.cp-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; }
.cp-chip { font: inherit; font-size: 12.5px; border: 1px solid var(--do-border); background: var(--do-bg); color: var(--do-text);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.cp-chip span { color: var(--do-muted); margin-left: 4px; }
.cp-chip.is-on { border-color: var(--do-accent); color: var(--do-accent); background: #f3f6ff; }
.cp-table th, .cp-table td { padding: 12px 14px; vertical-align: top; }
.cp-table .do-rate { width: 78px; }
.cp-notes { width: 100%; min-width: 320px; min-height: 76px; resize: vertical; line-height: 1.5; white-space: pre-wrap; }
.cp-table td:nth-last-child(3) { width: 42%; white-space: normal; }
.cp-th-hint { font-weight: 400; }
.cp-savehint { font-size: 12.5px; }
.rp-rate { font-weight: 600; color: #6b7787; font-size: .9em; margin-left: 6px; }

/* ================================================================== v1.43 workload */
.wl-kpis { margin-bottom: 16px; }
.wl-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 860px) { .wl-grid { grid-template-columns: 1fr; } }
.wl-card { padding: 18px 20px; margin-bottom: 16px; }
.wl-grid .wl-card { margin-bottom: 0; }
.wl-card h3 { margin: 0 0 12px; }
.wl-sub { font-size: 12.5px; margin: -6px 0 12px; }
.wl-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wl-donut svg { width: 180px; height: 180px; flex: 0 0 auto; }
.wl-donut path, .wl-donut circle { cursor: default; }
.wl-donut path:hover { opacity: .85; }
.wl-donut__n { font-size: 30px; font-weight: 700; fill: var(--do-text); }
.wl-donut__l { font-size: 11px; fill: var(--do-muted); }
.wl-legend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--do-text); }
.wl-legend--col { flex-direction: column; gap: 10px; margin: 0; }
.wl-legend--col li { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.wl-legend--col b { margin-left: auto; font-variant-numeric: tabular-nums; }
.wl-legend li { display: inline-flex; align-items: center; gap: 7px; }
.wl-sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.wl-free { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-free li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--do-surface); border-radius: 8px; font-size: 13.5px; }
.wl-bars { display: grid; gap: 6px; }
.wl-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; align-items: center; gap: 14px; min-height: 26px; }
.wl-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.wl-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.wl-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-bar { display: flex; gap: 2px; height: 16px; min-width: 6px; }
.wl-bars--thin .wl-bar { height: 12px; }
.wl-seg { display: block; height: 100%; min-width: 3px; }
.wl-seg:first-child { border-radius: 0; }
.wl-seg:last-child { border-radius: 0 4px 4px 0; }
.wl-seg:hover { filter: brightness(.9); }
.wl-total { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--do-text); white-space: nowrap; }
.wl-tip { position: fixed; z-index: 9999; pointer-events: none; background: #1f2733; color: #fff; font-size: 12.5px; padding: 6px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.wl-grid .wl-card { display: flex; flex-direction: column; }
.wl-grid .wl-donut { flex: 1; justify-content: center; }

/* v1.45 — All reports, a person's record, the warning zone */
.ar-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 18px; }
.ar-filters .do-input { min-width: 170px; }
.ar-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.ar-name { margin: 0; font-size: 20px; }
/* reports as blocks inside one accordion per person — no sideways scrolling, no overlapping buttons */
.ar-filters__gap { flex: 1 1 auto; }
.ar-acc { border: 1px solid var(--do-border); border-radius: 12px; background: var(--do-bg); margin: 0 0 10px; overflow: hidden; }
.ar-acc > summary { list-style: none; }
.ar-acc > summary::-webkit-details-marker { display: none; }
.ar-acc__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; }
.ar-acc__sum::before { content: '›'; font-size: 20px; line-height: 1; color: var(--do-muted); transition: transform .15s; margin-right: 2px; }
.ar-acc[open] > .ar-acc__sum::before { transform: rotate(90deg); }
.ar-acc[open] > .ar-acc__sum { border-bottom: 1px solid var(--do-border); }
.ar-acc__name { display: flex; align-items: baseline; gap: 10px; flex: 1 1 200px; min-width: 0; }
.ar-acc__name strong { font-size: 15px; }
.ar-acc__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-acc__count { font-size: 13px; color: var(--do-muted); }
.ar-acc__body { padding: 14px 18px 16px; }
.ar-acc__foot { margin-top: 12px; }
.ar-items { display: flex; flex-direction: column; gap: 10px; }
.ar-item { border: 1px solid var(--do-border); border-radius: 10px; padding: 12px 14px; background: var(--do-surface); }
.ar-item, .ar-item * { white-space: normal; }
.ar-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ar-item__when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-item__when .do-muted { font-size: 12.5px; }
.ar-item__sum { margin: 8px 0 10px; line-height: 1.55; max-width: 110ch; overflow-wrap: anywhere; }
.ar-item__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-item__acts .do-btn.ar-del { color: var(--do-bad); border-color: var(--do-bad-bg); }
.ar-item__acts .do-btn.ar-del:hover { background: var(--do-bad-bg); }
.rr-mistakes td, .rr-warn td { white-space: normal; overflow-wrap: anywhere; }
.wz-rule { margin: 0 0 14px; max-width: 760px; }
.wz-card { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.wz-name { padding: 0; text-align: left; }
.wz-scores { display: flex; flex-wrap: wrap; gap: 4px; }
.wz-acts { margin-top: 4px; }

/* v1.46 — People → Accounts & access as one accordion per person */
.pe-acc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.pe-accs { display: flex; flex-direction: column; gap: 8px; }
.pe-acc { border: 1px solid var(--do-border); border-radius: 12px; background: var(--do-bg); overflow: hidden; }
.pe-acc.is-inactive { opacity: .75; }
.pe-acc.is-dirty { border-color: var(--do-warn, #b7791f); }
.pe-acc > summary { list-style: none; }
.pe-acc > summary::-webkit-details-marker { display: none; }
.pe-acc__sum { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; }
.pe-acc__sum::before { content: '›'; font-size: 20px; line-height: 1; color: var(--do-muted); transition: transform .15s; }
.pe-acc[open] > .pe-acc__sum::before { transform: rotate(90deg); }
.pe-acc[open] > .pe-acc__sum { border-bottom: 1px solid var(--do-border); background: var(--do-surface); }
.pe-acc__who { display: flex; align-items: baseline; gap: 10px; flex: 1 1 260px; min-width: 0; }
.pe-acc__who strong { font-size: 15px; white-space: nowrap; }
.pe-acc__email { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-acc__facts { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.pe-rolechip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--do-surface); border: 1px solid var(--do-border); white-space: nowrap; }
.pe-acc__unsaved { display: none; }
.pe-acc.is-dirty .pe-acc__unsaved { display: inline; }
.pe-acc__body { padding: 16px 18px 18px; }
.pe-acc__body .pe-block { margin: 0 0 16px; }
.pe-acc__body .pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.pe-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.pe-inline { flex-direction: row; align-items: center; gap: 8px; }
.pe-inline .do-input { width: auto; }
.pe-acc__foot { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--do-border); }
.pe-gone { margin-top: 18px; }

/* People → Roles */
.rl-lead { max-width: 780px; margin: 0 0 16px; }
.rl-new { margin: 0 0 18px; }
.rl-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.rl-form .do-field { min-width: 220px; }
.rl-form .rl-desc { flex: 1 1 360px; }
.rl-list { display: flex; flex-direction: column; gap: 8px; }
.rl-item { display: flex; gap: 12px 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--do-border); border-radius: 12px; padding: 12px 16px; background: var(--do-bg); }
.rl-main { flex: 1 1 380px; min-width: 0; }
.rl-title { display: flex; align-items: baseline; gap: 10px; }
.rl-text { margin: 4px 0; line-height: 1.5; }
.rl-pages { margin: 4px 0 0; }
.rl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rl-acts .ar-del { color: var(--do-bad); }

/* People → Role permissions */
.rp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.rp-wrap { overflow-x: auto; border: 1px solid var(--do-border); border-radius: 12px; background: var(--do-bg); }
.rp-grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.rp-grid th, .rp-grid td { border-bottom: 1px solid var(--do-border); padding: 8px 10px; }
.rp-grid thead th { position: sticky; top: 0; background: var(--do-surface); vertical-align: bottom; }
.rp-role { text-align: center; min-width: 92px; font-weight: 600; font-size: 12.5px; }
.rp-role span { display: block; }
.rp-role em { display: block; font-style: normal; font-weight: 400; color: var(--do-muted); font-size: 11.5px; }
.rp-role.is-sys { background: var(--do-surface); }
.rp-page { text-align: left; font-weight: 600; min-width: 230px; position: sticky; left: 0; background: var(--do-bg); z-index: 1; }
thead .rp-page { z-index: 2; background: var(--do-surface); }
.rp-page span { display: block; font-weight: 400; font-size: 12px; }
.rp-cell { text-align: center; }
.rp-cell input { width: 18px; height: 18px; cursor: pointer; }
.rp-cell.is-focus, .rp-role.is-focus { background: var(--do-warn-bg, #fff7e0); }
.rp-group td { background: var(--do-surface); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--do-muted); }
.rp-admin { font-weight: 400; color: var(--do-muted); }
.rp-cell.is-inherited input { opacity: .35; cursor: default; }