still in the grid as
a 7th cell. With only 7 grid tracks declared, the chevron (cell 8)
wrapped to a new row.
Fix: target the cell WRAPPER via :nth-child so the entire grid cell
collapses out. Live row layout: 8 cells, invoice is cell 7. Modal
row: 9 cells (extra Upload column), invoice is cell 8. */
body[data-role="team"] .proj-row:not(.modal) > div:nth-child(7),
body[data-role="team"] .proj-head:not(.modal) > div:nth-child(7) {
display: none !important;
}
body[data-role="team"] .proj-row.modal > div:nth-child(8),
body[data-role="team"] .proj-head.modal > div:nth-child(8) {
display: none !important;
}
/* Project edit Financial section: hidden via JS in renderProject() */
/* Financial section now hidden via JS conditional in renderProject() */
/* ── Retainer page: hide ONLY the invoice/export action buttons for team role.
Jake/Dan B/Niamh see full retainer visibility (days used, days remaining,
allowance bar, sparkline, kind label) so they can see their own consumption
against the contracted retainer. They just can't trigger invoicing. ── */
body[data-role="team"] .ret-actions-bar button[onclick*="createRetainerInvoice"],
body[data-role="team"] .ret-actions-bar button[onclick*="exportRetainerPDF"]{
display:none !important;
}
/* Hide hourly_rate / day_rate / fee_amount input fields in retainer edit */
body[data-role="team"] [data-field="day_rate"],
body[data-role="team"] [data-field="hourly_rate"],
body[data-role="team"] [data-field="fee_amount"]{
display:none !important;
}
/* ── Hide stat cards on Finance/CRM pages for team role ── */
/* (Belt-and-braces — the page itself shows admin-only placeholder, so this
is just in case) */
body[data-role="team"] #page-finance .journey,
body[data-role="team"] #page-finance .fin-subtabs,
body[data-role="team"] #page-crm .crm-stats,
body[data-role="team"] #page-crm .crm-filters{
display:none !important;
}
/* ── Hide Invoice sidebar group on Projects for team role ── */
/* The whole "Invoice" filter block (Ready to invoice / Awaiting PO / Invoiced)
is commercial info — team role shouldn't see counts or filter by it.
Same on Modal page. */
body[data-role="team"] #sb-live-invoice,
body[data-role="team"] #sb-live-invoice + .sb-divider,
body[data-role="team"] #sb-modal-invoice,
body[data-role="team"] #sb-modal-invoice + .sb-divider{
display:none !important;
}
/* ── Collapse Invoice column track on Projects table for team role ── */
/* Hiding the cells with display:none leaves an empty grid column. Override
the grid template so the column track itself is removed. */
body[data-role="team"] .proj-head,
body[data-role="team"] .proj-row{
grid-template-columns:minmax(220px,1.4fr) 130px 110px minmax(240px,1.8fr) 110px 90px 44px;
}
body[data-role="team"] .proj-head.modal,
body[data-role="team"] .proj-row.modal{
grid-template-columns:minmax(200px,1.2fr) 130px 110px minmax(220px,1.6fr) 110px 110px 90px 44px;
}
/* ═══════════════════════════════════════════════════════════════════
LOGIN-ORBITS — orbital rings brand moment behind the login card
═══════════════════════════════════════════════════════════════════ */
/* SVG fills viewport, slightly oversized for an "inside the system" feel */
.login-orbits{
position:absolute;
top:50%;left:50%;
/* Large enough that even the inner ring (r=240 in 1000-unit viewBox)
comfortably surrounds the login card on desktop screens. */
width:min(150vh, 150vw);
height:min(150vh, 150vw);
transform:translate(-50%, -50%);
pointer-events:none;
z-index:0;
overflow:visible;
}
/* Login card sits above the orbits */
.login-overlay .login-card{
position:relative;
z-index:1;
}
/* Centre breathing room — soft glow behind the card */
.login-overlay{
background:
radial-gradient(ellipse 80% 60% at 50% 40%, var(--accent-pale) 0%, var(--paper) 70%, var(--paper) 100%);
}
/* Each ring rotates around the SVG centre (0, 0) */
.orbit-ring{
transform-origin:0 0;
}
.orbit-0{ animation:orbit-ccw 160s linear infinite; }
.orbit-1{ animation:orbit-cw 120s linear infinite; }
.orbit-2{ animation:orbit-ccw 90s linear infinite; }
.orbit-3{ animation:orbit-cw 65s linear infinite; }
.orbit-4{ animation:orbit-ccw 45s linear infinite; }
@keyframes orbit-cw{
from{ transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
@keyframes orbit-ccw{
from{ transform:rotate(0deg); }
to { transform:rotate(-360deg); }
}
/* Labels counter-rotate at the same speed (opposite direction) so they
stay readable as the satellite traces the ring. The label group is
already translated to the satellite's position, so its local (0,0)
IS the satellite — rotating around 0 0 here cancels the parent. */
.orbit-label{
transform-origin:0 0;
}
.orbit-label-0{ animation:orbit-cw 160s linear infinite; }
.orbit-label-1{ animation:orbit-ccw 120s linear infinite; }
.orbit-label-2{ animation:orbit-cw 90s linear infinite; }
.orbit-label-3{ animation:orbit-ccw 65s linear infinite; }
.orbit-label-4{ animation:orbit-cw 45s linear infinite; }
/* Mono telemetry text */
.orbit-tag-text{
font-family:'PP Supply Mono', ui-monospace, monospace;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
fill:var(--ink-3);
opacity:0.6;
text-anchor:middle;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
.orbit-0, .orbit-1, .orbit-2, .orbit-3, .orbit-4,
.orbit-label-0, .orbit-label-1, .orbit-label-2, .orbit-label-3, .orbit-label-4{
animation:none;
}
}
/* ═══════════════════════════════════════════════════════════════════
ORBIT MODAL (sign-out, future generic modals)
═══════════════════════════════════════════════════════════════════ */
.orbit-modal-backdrop{
position:fixed;inset:0;z-index:6000;
background:rgba(11,14,25,0.4);
display:flex;align-items:center;justify-content:center;
padding:24px;
backdrop-filter:blur(2px);
animation:orbit-modal-fade-in 0.12s ease-out;
}
@keyframes orbit-modal-fade-in{
from{opacity:0;}
to{opacity:1;}
}
.orbit-modal{
background:var(--paper);
border:1px solid var(--line);
border-radius:16px;
padding:28px 32px 24px;
width:100%;max-width:400px;
box-shadow:0 12px 48px -12px rgba(11,14,25,.18), 0 4px 12px -4px rgba(11,14,25,.08);
}
.orbit-modal-title{
font-size:18px;font-weight:600;letter-spacing:-.018em;
color:var(--ink);margin-bottom:6px;
}
.orbit-modal-body{
font-size:13.5px;color:var(--ink-3);
letter-spacing:-.005em;
line-height:1.5;
margin-bottom:22px;
}
.orbit-modal-actions{
display:flex;gap:10px;justify-content:flex-end;
}
/* Hide CRM subtitle when team role (admin-only placeholder showing) */
body[data-role="team"] #page-crm .page-subtitle{
display:none !important;
}
/* Also hide the "+ New lead" button */
body[data-role="team"] #page-crm .page-head .pill-btn{
display:none !important;
}
/* Hide the page-title-meta when class .hidden is added by JS */
.page-title-meta.hidden{display:none !important;}
/* ─── Modifier: suppress the "ACTIVE" mono tag on certain stat.active cards.
The top-right ACTIVE label only makes sense on Projects/Modal where the
user is actively filter-toggling. On dashboards (Time tracking top project)
the card is just a highlighted KPI, not a toggle state. */
.stat.active.no-active-tag::after{
content:none;
}
/* "by Paragon" attribution — pill (on dark) and login card (on light) */
.brand-pill .brand-by{
color:rgba(255,255,255,.55);
font-weight:400;
}
.login-by{
font-size:13px;
color:var(--ink-3);
font-weight:400;
letter-spacing:-.005em;
}
/* ═══════════════════════════════════════════════════════════════════
FLIGHTDECK — personal daily dashboard
First page in the nav. Composes greeting + today's logged time + orbital
animation + today's projects (from Weekly) + personal task list.
Reuses the same dark gradient as .stat.active so the hero feels native
to the app's design language.
═══════════════════════════════════════════════════════════════════ */
.fd-shell{padding:24px 32px 48px;}
/* HERO — dark gradient stat card matching .stat.active */
.fd-hero{
position:relative;
background:radial-gradient(ellipse 140% 100% at 100% 100%, var(--accent-deep) 0%, var(--ink) 55%, var(--ink) 100%);
color:#fff;
border-radius:16px;
padding:32px 36px;
margin-bottom:24px;
overflow:hidden;
min-height:260px;
display:grid;
grid-template-columns:1fr auto;
gap:32px;
align-items:stretch;
}
/* Status pill — top-right of Flightdeck hero. Click to cycle through states. */
.fd-status-pill{
position:absolute;
top:14px;right:18px;
z-index:3;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
border-radius:100px;
padding:6px 12px 6px 10px;
display:flex;align-items:center;gap:8px;
cursor:pointer;
font:inherit;
transition:background .15s, border-color .15s, transform .08s;
}
.fd-status-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);}
.fd-status-pill:active{transform:scale(0.97);}
.fd-status-pill .fd-status-text{
font-family:'PP Supply Mono', ui-monospace, monospace;
font-size:9px;
letter-spacing:.18em;
font-weight:500;
color:rgba(255,255,255,.85);
text-transform:uppercase;
}
.fd-status-pill .fd-status-dot{
width:7px;height:7px;border-radius:50%;
background:#5dd16a; /* Default: Active = green */
box-shadow:0 0 0 2px rgba(93,209,106,.18);
}
/* State-driven dot colours, set by JS via class on the pill */
.fd-status-pill.is-away .fd-status-dot{background:#f0a93a;box-shadow:0 0 0 2px rgba(240,169,58,.18);}
.fd-status-pill.is-focus .fd-status-dot{background:#7d8aff;box-shadow:0 0 0 2px rgba(125,138,255,.18);}
.fd-status-pill.is-meeting .fd-status-dot{background:#d63c2a;box-shadow:0 0 0 2px rgba(214,60,42,.18);}
.fd-hero-left{display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2;gap:24px;}
.fd-greeting h2{font-size:36px;font-weight:600;letter-spacing:-.025em;line-height:1.05;color:#fff;margin:0;}
.fd-greeting h2 .quiet{color:rgba(255,255,255,.45);font-weight:500;}
.fd-greeting-sub{margin-top:8px;color:rgba(255,255,255,.55);font-size:11px;font-family:'PP Supply Mono', ui-monospace, monospace;letter-spacing:.16em;text-transform:uppercase;font-weight:400;}
.fd-greeting-sub strong{color:rgba(255,255,255,.85);font-weight:500;}
.fd-context-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.fd-ctx{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:100px;}
.fd-ctx-icon{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);flex-shrink:0;}
.fd-ctx-label{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1;}
.fd-ctx-sep{display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.25);flex-shrink:0;}
.fd-ctx-value{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:12px;color:#fff;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-transform:uppercase;line-height:1;}
.fd-today{margin-top:auto;padding-top:20px;}
.fd-today-label{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.55);text-transform:uppercase;font-weight:500;margin-bottom:10px;}
.fd-today-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.fd-today-value{font-size:48px;font-weight:600;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;color:#fff;}
.fd-today-value .unit{font-size:18px;color:rgba(255,255,255,.55);font-weight:500;margin-left:8px;}
.fd-today-of{color:rgba(255,255,255,.65);font-size:13px;}
.fd-today-of strong{color:#fff;font-weight:500;}
/* Hero right — orbital animation */
.fd-hero-right{position:relative;display:flex;align-items:center;justify-content:center;min-width:280px;}
.fd-orbit-stage{position:relative;width:280px;height:280px;}
.fd-orbit-stage svg{width:100%;height:100%;display:block;overflow:visible;}
.fd-orbit-stage .fd-ring{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;}
.fd-orbit-stage .fd-sat-accent{fill:var(--accent);}
.fd-orbit-stage .fd-sat-light{fill:#fff;}
.fd-orbit-stage .fd-sat-soft{fill:#7d8aff;}
.fd-orbit-stage .fd-sat-mid{fill:#a5acff;}
.fd-orbit-stage .fd-core{fill:#fff;}
.fd-orbit-stage .fd-core-glow{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5;}
@keyframes fd-orbit-cw{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes fd-orbit-ccw{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
/* Rotate each satellite around the SVG viewBox centre (0,0) — NOT around its
own bounding-box centre. This is the same pattern as the login orbital.
Periods are roughly half the login screen's: the Flightdeck card is much
smaller, so satellites need to move faster to feel alive instead of static. */
/* Periods are tuned so each satellite has visually-comparable apparent motion.
Outer rings naturally cover more distance per second at the same angular
velocity, so inner rings need shorter periods to feel as alive as outer ones.
The pattern alternates direction (CCW/CW/CCW/CW/CCW) like the login screen. */
.fd-orbit-stage .fd-spin-1{transform-origin:0 0;animation:fd-orbit-ccw 14s linear infinite;} /* innermost — fastest period to compensate for tiny arc */
.fd-orbit-stage .fd-spin-2{transform-origin:0 0;animation:fd-orbit-cw 18s linear infinite;}
.fd-orbit-stage .fd-spin-3{transform-origin:0 0;animation:fd-orbit-ccw 24s linear infinite;}
.fd-orbit-stage .fd-spin-4{transform-origin:0 0;animation:fd-orbit-cw 32s linear infinite;}
.fd-orbit-stage .fd-spin-5{transform-origin:0 0;animation:fd-orbit-ccw 42s linear infinite;} /* outermost — slowest period (still feels alive due to long arc) */
@media (prefers-reduced-motion:reduce){
.fd-orbit-stage .fd-spin-1,
.fd-orbit-stage .fd-spin-2,
.fd-orbit-stage .fd-spin-3,
.fd-orbit-stage .fd-spin-4,
.fd-orbit-stage .fd-spin-5{animation:none;}
}
/* Two-column grid */
.fd-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.fd-section{display:flex;flex-direction:column;}
.fd-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding:0 4px;}
.fd-section-head .ttl{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.fd-section-head .count{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:10px;color:var(--ink-3);font-weight:400;letter-spacing:.16em;text-transform:uppercase;}
.fd-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;flex:1;}
/* Project rows — clickable to open the project slide-over */
.fd-proj{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line-soft);transition:background 0.15s;cursor:pointer;}
.fd-proj:hover{background:var(--line-soft);}
.fd-proj:last-child{border-bottom:none;}
.fd-proj .name{font-weight:500;font-size:14.5px;color:var(--ink);}
.fd-proj .meta{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:8px;}
.fd-proj .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);}
.fd-proj .meta .folder{color:var(--accent);font-weight:500;}
.fd-proj .hours{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.fd-proj .hours.zero{color:var(--ink-4);}
/* Tasks */
.fd-task-input-row{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-soft);}
.fd-plus{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:300;line-height:1;}
.fd-task-input-row input{flex:1;font:inherit;border:none;outline:none;background:none;font-size:14.5px;color:var(--ink);}
.fd-task-input-row input::placeholder{color:var(--ink-4);}
.fd-hint{font-family:'PP Supply Mono', ui-monospace, monospace;font-size:10px;color:var(--ink-4);letter-spacing:.16em;text-transform:uppercase;}
.fd-task{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line-soft);transition:background 0.15s;}
.fd-task:hover{background:var(--line-soft);}
.fd-task:last-of-type{border-bottom:none;}
.fd-task:hover .fd-task-x{opacity:.6;}
.fd-check{width:18px;height:18px;border:1.5px solid var(--ink-4);border-radius:50%;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;transition:all 0.15s;line-height:1;}
.fd-check:hover{border-color:var(--accent);}
.fd-task.done .fd-check{background:var(--accent);border-color:var(--accent);}
.fd-task.done .fd-title{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px;}
.fd-title{flex:1;font-size:14.5px;color:var(--ink);cursor:text;}
.fd-tag{font-size:11px;font-weight:500;padding:3px 9px;border-radius:6px;background:var(--accent-pale);color:var(--accent-deep);letter-spacing:-.01em;}
.fd-tag.tag-bd{background:#fff5e6;color:#a35d10;}
.fd-tag.tag-ops{background:#e8f5ed;color:#1a7943;}
.fd-tag.tag-hr{background:#fce8f4;color:#9e3675;}
.fd-tag.tag-studio{background:#eef0fe;color:var(--accent-deep);}
.fd-tag.tag-grey{background:var(--line-soft);color:var(--ink-3);}
.fd-task-x{opacity:0;background:none;border:none;color:var(--ink-3);font-size:18px;cursor:pointer;padding:0 4px;line-height:1;transition:opacity 0.15s,color 0.15s;}
.fd-task-x:hover{color:var(--accent);opacity:1 !important;}
.fd-completed-toggle{padding:14px 22px;font-family:'PP Supply Mono', ui-monospace, monospace;font-size:10px;color:var(--ink-3);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-align:center;border-top:1px solid var(--line-soft);font-weight:500;}
.fd-completed-toggle:hover{background:var(--line-soft);}
.fd-empty{padding:32px 22px;text-align:center;color:var(--ink-3);font-size:13px;}
/* Mobile/tablet — stack the grid columns */
@media (max-width:900px){
.fd-hero{grid-template-columns:1fr;}
.fd-hero-right{display:none;} /* hide orbital on narrow viewports — saves space */
.fd-grid{grid-template-columns:1fr;}
}
/* Urgent project checkbox in the project edit form */
.urgent-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:10px;transition:border-color .12s,background .12s;flex-wrap:wrap;}
.urgent-checkbox:hover{border-color:var(--ink-4);background:#fafafa;}
.urgent-checkbox input[type="checkbox"]{width:16px;height:16px;accent-color:var(--urgent);cursor:pointer;flex-shrink:0;}
.urgent-checkbox .urgent-dot{width:8px;height:8px;border-radius:50%;background:var(--urgent);flex-shrink:0;}
.urgent-checkbox .urgent-label{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.urgent-checkbox .urgent-hint{font-size:11px;color:var(--ink-3);width:100%;padding-left:34px;letter-spacing:-.005em;}
.urgent-checkbox input:checked ~ .urgent-label{color:var(--urgent);}
/* ─── Freelancers in Weekly ──────────────────────────────────────── */
/* Divider row between team members and freelancers */
.prow.freelancer-divider{display:contents;}
.freelancer-divider-label{
grid-column:1 / -1;
padding:14px 16px 8px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line-soft);
background:var(--line-soft);
font-family:'PP Supply Mono', ui-monospace, monospace;
font-size:10px;color:var(--ink-3);font-weight:500;
letter-spacing:.18em;text-transform:uppercase;
}
/* Freelancer person cell — slightly different visual to indicate they're external.
Uses a faint accent tint on the avatar. */
.prow .person-cell.freelancer{background:#fafaf8;}
.prow .person-cell.freelancer .avatar{
background:transparent;
color:var(--ink-2);
border:1.5px dashed var(--ink-4);
}
.prow .person-cell.freelancer .role{font-style:italic;}
.prow .person-cell.freelancer .name{position:relative;}
/* Tiny remove-x next to freelancer name, only visible on hover */
.freelancer-remove{
display:none;
margin-left:6px;
background:none;border:none;cursor:pointer;
color:var(--ink-4);font-size:14px;line-height:1;
padding:0 2px;border-radius:3px;
transition:color .12s;
}
.prow .person-cell.freelancer:hover .freelancer-remove{display:inline-block;}
.freelancer-remove:hover{color:var(--accent);}
/* Add freelancer button — sits at the bottom of the project bank */
.pbank-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--line-soft);}
.freelancer-add-btn{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;
background:var(--paper);
border:1px dashed var(--ink-4);
color:var(--ink-2);
font:inherit;font-size:13px;font-weight:500;
letter-spacing:-.01em;
padding:9px 14px;border-radius:10px;
cursor:pointer;
transition:border-color .12s,color .12s,background .12s;
}
.freelancer-add-btn:hover{
border-color:var(--accent);
color:var(--accent);
border-style:solid;
}
.freelancer-add-btn svg{flex-shrink:0;}
/* Generic role-visibility utility — hide elements from team-level users. */
body[data-role="team"] .only-pm{display:none !important;}
.freelancer-divider-hint{color:var(--ink-4);font-weight:400;text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;font-size:11px;margin-left:4px;}
/* ─── Chip context menu (right-click on Weekly chips) ─────────────── */
.chip-ctx-menu{
position:fixed;
z-index:1000;
background:var(--paper);
border:1px solid var(--line);
border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
padding:5px;
min-width:200px;
font-size:13px;
letter-spacing:-.005em;
}
.chip-ctx-item{
display:flex;align-items:center;gap:10px;
width:100%;
padding:8px 10px;
background:none;border:none;
font:inherit;text-align:left;
color:var(--ink);
cursor:pointer;
border-radius:6px;
transition:background .12s;
}
.chip-ctx-item:hover{background:var(--line-soft);}
.chip-ctx-item.is-on{color:var(--urgent);font-weight:500;}
.chip-ctx-item.danger{color:var(--ink-3);}
.chip-ctx-item.danger:hover{color:var(--accent);background:var(--accent-soft);}
.chip-ctx-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex-shrink:0;}
.chip-ctx-item.is-on .chip-ctx-dot{background:var(--urgent);}
.chip-ctx-sep{height:1px;background:var(--line-soft);margin:4px 6px;}
/* Inline edit input for task titles — replaces the .fd-title element when
the user clicks. Visually matches the title so the edit feels seamless. */
.fd-title-edit{
flex:1;
font:inherit;
font-size:14.5px;
color:var(--ink);
background:var(--paper);
border:1px solid var(--accent);
outline:none;
padding:4px 8px;
border-radius:6px;
letter-spacing:-.005em;
box-shadow:0 0 0 3px var(--accent-soft);
}
/* Select fields in modals — match the look of text inputs but show a chevron */
.modal-select{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b0e19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
padding-right:36px;
cursor:pointer;
}
/* The 'h' unit suffix that used to sit next to the number — removed.
Numbers now stand alone; the column header and project-row totals
carry the unit signal. */
/* ═══════════════════════════════════════════════════════════════════
ORBIT — STYLE ADDITIONS (April 2026, v3)
Permission visual fixes + button hover/click states.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
1. TEAM-ROLE PERMISSION FIXES
Hides £ fee column on deliverable rows for team users (Jake / Dan B
/ Niamh) so they can tick deliverables but never see the fees.
═══════════════════════════════════════════════════════════════════ */
body[data-role="team"] .dlv-fee-wrap,
body[data-role="team"] .dlv-fee-pm {
display: none !important;
}
body[data-role="team"] .dlv-main {
grid-template-columns: 24px 1fr 24px;
}
body[data-role="team"] .deliv-col-headers {
grid-template-columns: 24px 1fr 32px;
}
body[data-role="team"] .deliv-col-h.fee {
display: none !important;
}
body[data-role="team"] .deliv-total {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
2. SLIDE-OVER FOOTER POSITIONING
When team users open a project (no Financial section), the modal body
is shorter than viewport and the sticky footer drifts up. Flex
layout pins it to the actual bottom regardless of body height.
═══════════════════════════════════════════════════════════════════ */
.slideover {
display: flex;
flex-direction: column;
}
.slideover .so-body {
flex: 1 1 auto;
overflow-y: auto;
}
.slideover .so-footer {
position: relative;
bottom: auto;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
3. PROJECTS TABLE GRID FOR TEAM USERS
Default grid template assumes invoice column is visible. For team
users that column is hidden, so the chevron needs an explicit grid.
═══════════════════════════════════════════════════════════════════ */
body[data-role="team"] .proj-head,
body[data-role="team"] .proj-row {
grid-template-columns: minmax(220px, 1.4fr) 130px 110px minmax(240px, 1.8fr) 110px 90px 44px;
}
body[data-role="team"] .proj-head.modal,
body[data-role="team"] .proj-row.modal {
grid-template-columns: minmax(200px, 1.2fr) 130px 110px minmax(220px, 1.6fr) 110px 110px 90px 44px;
}
/* ═══════════════════════════════════════════════════════════════════
4. STANDALONE DELIVERABLES SECTION SPACING
═══════════════════════════════════════════════════════════════════ */
.so-section + .deliverables-block {
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════════════════════
5. BUTTON INTERACTION — STATIC GLOW + LIFT + PRESS
─────────────────────────────────────────────────────────────────
On hover: the button lifts 2px, gains a soft drop shadow, AND a
subtle accent-blue glow blooms around it. No rotation, no moving
parts. Reads as "this is active" without animation noise.
On click: presses back down, glow stays.
Crucially: this DOES NOT animate background-color (which is what
caused the white-flash bug on the dark button — CSS can't animate
from a radial-gradient to a flat colour, so the browser snapped
through the underlying base layer).
═══════════════════════════════════════════════════════════════════ */
/* Setup: explicit transition only on transform and shadow.
Background animations are deliberately excluded — the dark button's
gradient can't be animated against a flat colour. */
.pill-btn {
transition: transform 200ms ease, box-shadow 200ms ease, border-color 120ms;
transform: translateY(0);
}
/* Hover: 2px lift + soft drop shadow.
No accent glow — kept clean and simple.
`:not(:disabled):not(.muted)` excludes secondary buttons. */
.pill-btn:hover:not(:disabled):not(.muted) {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(11, 14, 25, 0.14);
}
/* Active (mid-click): press back to 0. Faster transition (80ms) so
the click feels responsive, not laggy. */
.pill-btn:active:not(:disabled):not(.muted) {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(11, 14, 25, 0.18);
transition: transform 80ms ease, box-shadow 80ms ease;
}
/* Muted secondary buttons stay calm — no lift, no glow.
Just a gentle background shift on hover so they recede behind
primary actions. */
.pill-btn.muted:hover:not(:disabled) {
background-color: rgba(11, 14, 25, 0.04);
}
/* Disabled buttons: explicitly no animation. */
.pill-btn:disabled {
cursor: not-allowed;
transform: translateY(0);
box-shadow: none;
}
/* Reduced-motion preference: keep the glow but drop the lift. */
@media (prefers-reduced-motion: reduce) {
.pill-btn:hover:not(:disabled):not(.muted) {
transform: translateY(0);
}
.pill-btn:active:not(:disabled):not(.muted) {
transform: translateY(0);
}
}
/* Mobile-only elements: hidden by default at all widths, shown
inside the @media (max-width: 640px) block below. */
.mobile-tab-bar,
.mobile-more-sheet,
.mobile-day-picker { display: none; }
/* ═══════════════════════════════════════════════════════
MOBILE STYLES — All rules below scoped to ≤640px.
Added 2026-05-06. Do not modify desktop selectors above.
Empty for now; rules added per implementation step.
═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ─── LOGIN SCREEN (mobile) ─────────────────────────────────────
Stacked layout: orbital diagram in top 60vh, form modal card
in lower portion. Orbits keep rotating (existing animations
untouched). Background goes off-white so the white card visibly
separates. Card becomes a proper modal sitting above the orbits.
─────────────────────────────────────────────────────────────── */
.login-overlay {
/* Override desktop flex-centring; use absolute positioning
so we can place orbits and card in distinct zones. */
display: block;
padding: 0;
background: #fafafa;
/* SVG extends beyond viewport at 130vw — clip at overlay bounds
to prevent horizontal scrollbars. */
overflow: hidden;
}
/* Orbital diagram centred behind the card. The desktop SVG sits at
150vmin (huge), so satellites positioned at coords up to viewBox ~570
are visible. On mobile we constrain to 163vw — large enough that
orbits feel substantial. Satellites on outer rings will sweep
in and out of view during rotation, mirroring desktop's effect
where outermost orbits also extend off-screen. */
.login-overlay .login-orbits {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 163vw;
height: 163vw;
max-height: 163vw;
overflow: visible;
}
/* Card centred in the viewport, sitting above the orbital field
so the rings rotate behind and around it. Closer to the desktop
composition that the user already knows. */
.login-overlay .login-card {
position: absolute;
top: 50%;
left: 24px;
right: 24px;
transform: translateY(-50%);
width: auto;
max-width: none;
padding: 24px 24px 28px;
background: var(--paper);
border: 0.5px solid var(--line);
border-radius: 20px;
box-shadow:
0 8px 24px rgba(11, 14, 25, 0.08),
0 2px 8px rgba(11, 14, 25, 0.04);
z-index: 10;
}
/* Smaller logo on mobile so the card stays compact */
.login-overlay .login-mark {
width: 36px;
height: 36px;
margin: 0 auto 10px;
}
/* Title + subtitle centred and slightly smaller */
.login-overlay .login-title {
font-size: 20px;
text-align: center;
}
.login-overlay .login-sub {
font-size: 13px;
text-align: center;
margin-bottom: 18px;
}
/* Form labels centred to match the card's centred composition */
.login-overlay .login-label {
text-align: center;
}
/* Centre the select's selected text */
.login-overlay #login-name-select {
text-align: center;
text-align-last: center;
}
/* Bearing labels (OPS · 117°, RES · 290° etc.) — double the
desktop size so they stay readable against the larger orbital
SVG on mobile. */
.login-overlay .orbit-tag-text {
font-size: 22px;
}
/* ─── BOTTOM TAB BAR (mobile shell) ────────────────────────────
Fixed nav at the bottom of every page on mobile. Hidden on
desktop entirely (display: none above this media query, no
rule needed). Uses a frosted-glass look matching iOS conventions.
─────────────────────────────────────────────────────────────── */
.mobile-tab-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(56px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 0.5px solid var(--line);
align-items: stretch;
z-index: 100;
}
.mobile-tab-bar .mtb-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
color: var(--ink-3);
font-family: inherit;
/* Remove default button styling */
min-height: 44px;
}
.mobile-tab-bar .mtb-btn.active { color: var(--accent); }
.mobile-tab-bar .mtb-btn.active .mtb-icon-fill { fill: var(--accent); }
.mobile-tab-bar .mtb-icon { width: 22px; height: 22px; }
.mobile-tab-bar .mtb-icon-fill { fill: none; }
.mobile-tab-bar .mtb-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
}
.mobile-tab-bar .mtb-finance-glyph {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 500;
line-height: 1;
}
/* ─── MOBILE MORE SHEET ────────────────────────────────────────
Bottom sheet shown when tapping "More" in the tab bar. Lists
less-used destinations (Modal, Retainer, Weekly, CRM, Sign out).
─────────────────────────────────────────────────────────────── */
.mobile-more-sheet:not([hidden]) {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(11, 14, 25, 0.4);
display: block;
}
.mobile-more-sheet .mms-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--paper);
border-radius: 20px 20px 0 0;
padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
max-height: 80vh;
overflow-y: auto;
}
.mobile-more-sheet .mms-handle {
width: 36px;
height: 4px;
background: var(--line);
border-radius: 2px;
margin: 0 auto 12px;
}
.mobile-more-sheet .mms-title {
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: 'PP Supply Mono', ui-monospace, monospace;
padding: 8px 24px 12px;
}
.mobile-more-sheet .mms-item {
display: block;
width: 100%;
text-align: left;
padding: 14px 24px;
border: none;
background: transparent;
font-family: inherit;
font-size: 16px;
color: var(--ink);
cursor: pointer;
}
.mobile-more-sheet .mms-item.destructive { color: var(--urgent); }
.mobile-more-sheet .mms-divider {
height: 0.5px;
background: var(--line);
margin: 8px 0;
}
/* ─── PAGE SHELL (applies to all pages) ────────────────────────
The desktop layout uses a top header + main content area. On
mobile we hide the desktop top nav (data-page buttons) but
keep the brand pill and logout button visible at the top of
each page. Each page also needs space at the bottom for the
tab bar.
─────────────────────────────────────────────────────────────── */
/* Hide the desktop pill nav (Dashboard/Projects/etc.) on mobile —
bottom tab bar replaces it. Brand pill + logout stay visible. */
.hdr .nav-center { display: none; }
/* Header shrinks for mobile — only brand and user-pill remain.
1fr auto would give brand pill all available space (stretching it).
auto auto + space-between keeps both pills at their natural sizes
with empty space in the middle. */
.hdr {
grid-template-columns: auto auto;
justify-content: space-between;
padding: 8px 16px;
gap: 12px;
}
/* Every page needs bottom padding to clear the tab bar */
.page.active {
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
/* ─── DASHBOARD (page-flightdeck) ──────────────────────────────
Mobile dashboard: single-column hero with greeting, today's
hours, and a compact London/Time row. FOCUS status pill is
hidden — duplicates info from the brand pill area.
─────────────────────────────────────────────────────────────── */
#page-flightdeck .fd-shell {
padding: 12px 16px 0;
max-width: 100%;
}
#page-flightdeck .fd-hero {
grid-template-columns: 1fr;
padding: 18px 18px 20px;
}
#page-flightdeck .fd-hero-right { display: none; }
/* Hide the FOCUS / ACTIVE pill on mobile — clutters the small card */
#page-flightdeck .fd-status-pill { display: none; }
/* London weather + Time clock: keep but compact, side by side on
one row. Desktop has them in fd-context-row already; we just
restyle for tighter spacing. */
#page-flightdeck .fd-context-row {
display: flex;
flex-wrap: nowrap;
gap: 8px;
margin-top: 12px;
}
#page-flightdeck .fd-context-row .fd-ctx {
padding: 6px 10px;
font-size: 11px;
flex: 0 0 auto;
}
#page-flightdeck .fd-context-row .fd-ctx-label {
font-size: 10px;
}
/* Greeting headline tighter */
#page-flightdeck .fd-greeting h2 {
font-size: 26px;
}
#page-flightdeck .fd-greeting-sub {
font-size: 11px;
margin-top: 4px;
}
/* "Today's logged time" — let the value and "of an 8-hour day"
wrap cleanly. */
#page-flightdeck .fd-today {
margin-top: 16px;
}
#page-flightdeck .fd-today-row {
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
}
#page-flightdeck .fd-today-value {
font-size: 36px;
}
#page-flightdeck .fd-today-of {
font-size: 12px;
}
/* Two-column grid (projects | tasks) becomes one column */
#page-flightdeck .fd-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* ─── PROJECTS LIVE/MODAL — minimal card layout ────────────────
Per Dan's feedback: cards are JUST name + meta + chevron.
Status pill, team avatars, deliverables dots, due date all
hidden on mobile. They live on the project detail screen.
Cards stay tight and scannable.
─────────────────────────────────────────────────────────────── */
/* Hide the .proj-head row entirely — column headers don't fit cards */
.proj-head { display: none; }
/* Convert .proj-row from grid to a stacked card */
.proj-row,
.proj-row.modal {
display: block;
grid-template-columns: none !important;
padding: 14px;
border: 0.5px solid var(--line);
border-radius: 12px;
margin-bottom: 8px;
background: var(--paper);
border-bottom: 0.5px solid var(--line);
position: relative;
}
.proj-row:hover { background: var(--paper); }
/* The wrapper card around all rows: drop its border so each row-card
stands alone */
#page-live .card,
#page-modal .card {
border: none;
background: transparent;
padding: 0;
}
/* Name + meta block */
.proj-row .proj-cell-inner {
margin-bottom: 0;
padding-right: 24px; /* leave room for the absolute chevron */
}
.proj-row .proj-name {
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.proj-row .proj-meta {
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
/* Hide ALL middle/footer cells — cards are JUST name + meta + chevron.
Status, team avatars, next-steps, deliverables, due date, invoice,
upload pill: all gone on mobile cards. They show on detail screen. */
.proj-row > div:not(.proj-cell-inner):not(.row-chev) {
display: none;
}
/* Chevron absolutely positioned top-right of card */
.proj-row .row-chev {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
opacity: 1;
color: var(--ink-4);
font-size: 18px;
}
/* ─── PAGE LAYOUTS — tighten side padding for mobile ───────────
Desktop .layout-full uses 24px horizontal padding which steals
48px of viewport width on a 390px iPhone — too much. Drop to
12px so content has room to breathe and tables don't overflow. */
.layout-full {
padding: 8px 12px 80px;
}
.rep-retainer-banner {
padding: 12px 14px;
font-size: 11.5px;
}
/* ─── FOLDER GROUP HEADERS ─────────────────────────────────────
Hide "· N projects" count on mobile.
─────────────────────────────────────────────────────────────── */
.folder-group-count { display: none; }
/* ─── ACTIVE-ORBIT CONTEXT BAR ─────────────────────────────────
Hidden on Live/Modal mobile per Dan's feedback.
─────────────────────────────────────────────────────────────── */
#page-live .context-bar,
#page-modal .context-bar { display: none; }
/* ─── STAT CARDS (Live/Modal pages) ────────────────────────────
2 columns at mobile. Corner ring SVG and "ACTIVE" tag hidden.
─────────────────────────────────────────────────────────────── */
.stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
.stat {
padding: 14px 12px 14px 14px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(n+3) { border-bottom: none; }
.stat-val { font-size: 26px; }
.stat-val .unit { font-size: 26px; }
.stat-lbl { font-size: 9.5px; }
.stat-sub {
font-size: 10.5px;
margin-top: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-corner { display: none; }
.stat.active::after { display: none; }
/* Toolbar (search + filter + add button) wraps on mobile */
.toolbar {
flex-wrap: wrap;
gap: 8px;
}
.toolbar .search { flex: 1 1 100%; }
.toolbar .pill-select { flex: 1 1 auto; }
.toolbar .toolbar-right { flex: 0 0 auto; }
/* ─── SLIDE-OVER (project detail) ──────────────────────────────
Full-screen on mobile, slides up from bottom, footer 50/50.
─────────────────────────────────────────────────────────────── */
.overlay { justify-content: stretch; }
.slideover {
width: 100vw;
max-width: 100vw;
height: 100vh;
animation: slideup-mobile 0.22s cubic-bezier(.4, 0, .2, 1);
box-shadow: none;
}
@keyframes slideup-mobile {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.so-header { padding: 14px 16px; }
.so-body {
padding: 18px 16px 24px;
scroll-padding-bottom: 50vh;
}
/* Footer buttons fill width 50/50 */
.so-footer {
padding: 12px 16px;
gap: 8px;
}
.so-footer .pill-btn {
flex: 1;
justify-content: center;
padding: 12px 16px;
}
/* ─── PER-DELIVERABLE PERFORMANCE TABLE (slide-over) ───────────
4 columns instead of 5: drop Cost. The 4th header child IS the
Cost label, and each row's .margin-row-cost is the value.
Hide both so the grid has exactly 4 visible children matching
the 4-column template. */
.margin-row-cost { display: none; }
.margin-head > div:nth-child(4) { display: none; }
.margin-head,
.margin-row {
grid-template-columns: 1.5fr 70px 60px 60px;
gap: 8px;
padding: 10px 12px;
}
.margin-head { font-size: 9.5px; }
/* After hiding child 4 (Cost), visible header children are
1=Deliverable, 2=Fee, 3=Hours, 5=Margin. Apply alignments
to the visible ones. */
.margin-head > div:nth-child(1) { text-align: left; }
.margin-head > div:nth-child(2),
.margin-head > div:nth-child(3),
.margin-head > div:nth-child(5) { text-align: right; }
/* ─── TIME PAGE ────────────────────────────────────────────────
Mobile shows ONE day at a time instead of the full week grid.
The desktop renderer still outputs all 5 day cells per row;
we hide 4 of them via CSS based on data-active-day on #page-time.
The week label and "This week" button hide; a new mobile day
picker (prev/next + day label) takes their place.
─────────────────────────────────────────────────────────────── */
/* Subtabs (My time / Team / Reports) fill viewport width */
#page-time .subtabs {
display: flex;
width: 100%;
padding: 3px;
background: var(--line-soft);
border-radius: 100px;
margin-bottom: 12px;
}
#page-time .subtabs button {
flex: 1;
padding: 8px 0;
border: none;
background: transparent;
color: var(--ink-2);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
/* Active subtab gets the dark Orbit gradient — same as .pill-btn.dark */
#page-time .subtabs button.active {
background: radial-gradient(ellipse 140% 100% at 100% 100%, var(--accent-deep) 0%, var(--ink) 75%, var(--ink) 100%);
color: var(--paper);
box-shadow: 0 1px 3px rgba(11, 14, 25, 0.25);
}
/* Hide the desktop weeknav (left/right week, "This week" button).
The mobile day picker replaces it. */
#page-time .toolbar-right { display: none; }
/* Hide the page-title-meta ("4-8 MAY · 2.0H LOGGED") on Time mobile.
The day picker pill already shows the active day, and the hour
count reflects the whole week which doesn't fit a single-day view. */
#page-time #time-page-meta { display: none; }
/* Show mobile day picker on Time page only — but ONLY for My time and
Team views, not Reports (Reports has its own period selector and
doesn't operate per-day). The :has() selector hides it when the
reports view is active. Falls back to always-visible on browsers
without :has() support which is acceptable. */
#page-time .mobile-day-picker {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 16px 0;
padding: 0;
}
#page-time:has(#time-view-reports.active) .mobile-day-picker {
display: none;
}
.mobile-day-picker .mdp-arrow {
border: none;
background: transparent;
padding: 8px;
cursor: pointer;
color: var(--ink-2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 36px;
height: 36px;
}
.mobile-day-picker .mdp-arrow:hover { background: var(--line-soft); }
.mobile-day-picker .mdp-current {
font-size: 13px;
font-weight: 500;
text-align: center;
background: var(--line-soft);
padding: 8px 18px;
border-radius: 100px;
min-width: 130px;
}
/* Toolbar layout on Time page: subtabs full width, weeknav hidden,
day picker on its own line below. */
#page-time .toolbar {
flex-direction: column;
align-items: stretch;
}
/* Hide the 4-card stats hero (Top project / Hours / Projects / Days)
on My time and Team views — only My time and Team have it. Reports
uses .rep-summary not .stats. */
#page-time #time-view-mine .stats,
#page-time #time-view-team .stats { display: none; }
/* Hide the "Daily total" totals row on mobile — single-day view
means the daily total IS the same as the visible day cell value. */
#page-time .totals-row { display: none; }
/* Hide the time grid header row entirely on mobile. The day picker
pill already shows the active day, and the "Project" header is
implicit from context. The header has different markup from rows
so the column-hiding rules below don't apply to it cleanly. */
#page-time .time-grid-head { display: none; }
/* Stack Add project / Copy last week buttons full-width on mobile */
#page-time .grid-actions {
flex-direction: column;
gap: 8px;
padding: 16px 12px;
}
#page-time .grid-actions .pill-btn {
width: 100%;
justify-content: center;
}
/* Time grid: collapse from 7 columns (project + 5 days + total)
to 2 columns (project + active day). The total column hides too. */
#page-time .time-grid-head,
#page-time .time-grid-row,
#page-time .tg-row {
grid-template-columns: 1fr 70px;
}
/* Hide all day cells/headers EXCEPT the one matching activeDayIndex.
The grid columns in the desktop layout map to children:
child 1: project info
children 2-6: Mon Tue Wed Thu Fri (indexes 0-4)
child 7: total
We use data-active-day to drive nth-child visibility. */
/* Default: hide days 2-6 (positions matching all 5 day cells) */
#page-time .time-grid-head > .num-h,
#page-time .time-grid-row > .num-cell:not(.total-col),
#page-time .tg-row > .num-cell:not(.total-col) {
display: none;
}
/* Hide the total column on mobile (single day, no need for week sum) */
#page-time .total-col { display: none; }
/* Show only the day column matching data-active-day. The day cells
are children 2-6 (after the project info cell at child 1).
activeDay 0 = Mon = nth-child(2), activeDay 1 = Tue = nth-child(3), etc.
Each rule below shows the correct day cell. */
#page-time[data-active-day="0"] .time-grid-head > .num-h:nth-child(2),
#page-time[data-active-day="0"] .time-grid-row > .num-cell:nth-child(2),
#page-time[data-active-day="0"] .tg-row > .num-cell:nth-child(2) {
display: flex;
}
#page-time[data-active-day="1"] .time-grid-head > .num-h:nth-child(3),
#page-time[data-active-day="1"] .time-grid-row > .num-cell:nth-child(3),
#page-time[data-active-day="1"] .tg-row > .num-cell:nth-child(3) {
display: flex;
}
#page-time[data-active-day="2"] .time-grid-head > .num-h:nth-child(4),
#page-time[data-active-day="2"] .time-grid-row > .num-cell:nth-child(4),
#page-time[data-active-day="2"] .tg-row > .num-cell:nth-child(4) {
display: flex;
}
#page-time[data-active-day="3"] .time-grid-head > .num-h:nth-child(5),
#page-time[data-active-day="3"] .time-grid-row > .num-cell:nth-child(5),
#page-time[data-active-day="3"] .tg-row > .num-cell:nth-child(5) {
display: flex;
}
#page-time[data-active-day="4"] .time-grid-head > .num-h:nth-child(6),
#page-time[data-active-day="4"] .time-grid-row > .num-cell:nth-child(6),
#page-time[data-active-day="4"] .tg-row > .num-cell:nth-child(6) {
display: flex;
}
/* ─── REPORTS TAB ──────────────────────────────────────────────
Reports has its own period selector and 4-card summary, plus
wide tables. On mobile we declutter aggressively: hide the
redundant "Last 30 days · 6 Apr — 6 May" lens row (the Period
filter immediately below already shows the same info), drop
the FOCUS tag on the dark hours card, and trim the billable
projects table to its essential 3 columns.
─────────────────────────────────────────────────────────────── */
/* Hide the period note line above the filter card — duplicates
the Period filter pills directly below. */
#page-time .lens-row { display: none; }
/* Hide the FOCUS pseudo-tag on the dark hours card — same reason
we hide it on .stat.active::after on Live/Modal pages. Saves
visual noise in a smaller card. */
#page-time .rep-card.dark::after { display: none; }
/* Filter card: each filter group (Period, Status) puts its label
ABOVE the pills on mobile rather than to the left. Saves
horizontal space and stops the pills from overflowing. */
#page-time .rep-filters {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px;
}
#page-time .rep-filter-grp {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
#page-time .rep-filter-lbl {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
#page-time .rep-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#page-time .rep-filter-pill {
padding: 6px 12px;
font-size: 12px;
}
/* 4-card summary: 2x2 grid, smaller padding/typography */
#page-time .rep-summary {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
#page-time .rep-card {
padding: 14px 14px;
}
#page-time .rep-lbl {
font-size: 9.5px;
}
#page-time .rep-val {
font-size: 28px;
}
#page-time .rep-sub {
font-size: 10.5px;
}
/* Section headers (Billable projects, etc.) — let the badge wrap
onto its own line below the title rather than overflow. */
#page-time .rep-section-h {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px;
}
#page-time .rep-section-title {
font-size: 13px;
flex-wrap: wrap;
}
#page-time .rep-section-meta {
font-size: 10.5px;
}
/* ─── REPORTS TABLES — fixed 60 / 20 / 20 column layout on mobile ───
The Reports tables on desktop have 5–6 columns. On mobile we keep
only three: the name column (60%), Hours (20%) and Margin (20%).
Why fixed-percentage rather than auto: with auto layout, long content
in one cell pushes the others to character-width, which is what was
causing the staircase letter-stacking. Fixed layout ignores content
width and obeys the percentages we set.
Totals row caveat: every rep-tbl totals row uses
on
its first cell. The colspan'd cell still counts as nth-child(1), so
the cells that follow it have nth-child indices 1 less than the
equivalent cells in the data rows. That's why the totals row needs
its own hiding rules (hide nth-child 3 + 5 instead of 2/4/6).
Tables covered:
- .rep-tbl (no .rep-tbl-deliverable): Project | Status | Hours |
Fee | Margin | Health → keep Project, Hours, Margin
- .rep-tbl-deliverable: Deliverable | Projects | Fee | Hours |
Cost | Margin → keep Deliverable, Hours, Margin
Retainer-section .rep-tbl variants (5 cols) follow the same pattern;
hiding nth-child 2 + 4 keeps col 1, 3, 5 visible. */
#page-time .rep-section table {
font-size: 12px;
width: 100%;
table-layout: fixed;
}
/* Billable projects table (Project, Status, Hours, Fee, Margin, Health):
hide Status (2), Fee (4), Health (6) in head and body rows. */
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(2),
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(4),
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(6),
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) tbody tr:not(.totals) td:nth-child(2),
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) tbody tr:not(.totals) td:nth-child(4),
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) tbody tr:not(.totals) td:nth-child(6) {
display: none;
}
/* Margin by deliverable type table (Deliverable, Projects, Fee, Hours, Cost, Margin):
hide Projects (2), Fee (3), Cost (5) in head and body rows. */
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(2),
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(3),
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(5),
#page-time .rep-section .rep-tbl-deliverable tbody tr:not(.totals) td:nth-child(2),
#page-time .rep-section .rep-tbl-deliverable tbody tr:not(.totals) td:nth-child(3),
#page-time .rep-section .rep-tbl-deliverable tbody tr:not(.totals) td:nth-child(5) {
display: none;
}
/* Totals row — every rep-tbl uses
as its first cell,
so cell indices shift by one. To keep the same visible columns:
Billable / retainer 6-col table: hide Fee (nth-child 3), Health (nth-child 5).
Visible left→right: "N projects shown" | Hours | Margin.
Billable / retainer 5-col table (retainer Days vs alloc): hide nth-child 3 only.
Visible: "N projects" | Hours | last column (Margin or %).
Deliverable table totals: there is no totals row in this table, no action needed.
Simpler unified rule: hide td:nth-child(3) and td:nth-child(5) on every
totals row. nth-child(5) won't match anything on the 5-cell totals
variant, which is fine. */
#page-time .rep-section .rep-tbl tbody tr.totals td:nth-child(3),
#page-time .rep-section .rep-tbl tbody tr.totals td:nth-child(5) {
display: none;
}
/* Force the 60 / 20 / 20 width split on the visible columns.
The trick: the FIRST visible cell in each row gets 60%, second gets 20%,
third gets 20%. We use the universal-selector approach via column
widths on visible nth-children only. Easiest with explicit per-column
widths on the th elements; since table-layout:fixed, widths cascade. */
/* Billable / retainer-billable / retainer-days tables (.rep-tbl :not(deliverable)) */
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(1) { width: 60%; }
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(3) { width: 20%; }
#page-time .rep-section .rep-tbl:not(.rep-tbl-deliverable) thead th:nth-child(5) { width: 20%; }
/* Margin by deliverable table */
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(1) { width: 60%; }
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(4) { width: 20%; }
#page-time .rep-section .rep-tbl-deliverable thead th:nth-child(6) { width: 20%; }
/* Cell padding and wrapping: allow project names to wrap onto multiple
lines but stop the character-by-character break that overflow-wrap:
anywhere was causing. word-wrap:break-word is the safer default. */
#page-time .rep-section table th,
#page-time .rep-section table td {
padding: 10px 8px;
word-break: normal;
overflow-wrap: break-word;
}
/* Numeric cells: right-align and use tabular figures so columns line up
down the table. */
#page-time .rep-section table td.num-cell,
#page-time .rep-section table td.margin-cell {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Totals row at the bottom of each table — make it match the data row
density rather than the bulkier desktop totals styling. The data rows
have padding 10px 8px; we tighten the totals to 8px to keep it visually
punchier than the rows above but not as tall as before. */
#page-time .rep-section .rep-tbl tbody tr.totals td {
padding: 8px 8px;
font-size: 12px;
line-height: 1.3;
}
/* Insight callout (dark "X is at -134% margin..." box) — the desktop
version sits inside a wrapper with padding 0 22px 18px, which is
wider than the table's cell padding on mobile. Match the inset to
the cells so the callout reads as part of the table flow, and
tighten the callout's own padding to be on the same scale. */
#page-time .rep-section .rep-insight-wrap {
padding: 0 8px 12px;
}
#page-time .rep-section .rep-insight {
padding: 10px 12px;
font-size: 11.5px;
line-height: 1.35;
border-radius: 8px;
}
/* ─── PIPELINE & INVOICING (Finance) ────────────────────────────
The 4-card "journey" row on desktop becomes 2×2 on mobile so each
card has room for the £value at a sensible size. The lifecycle
section headers stack title/badge/meta vertically because they
don't fit on one line. */
/* 4 cards → 2×2 grid */
#page-finance .journey {
grid-template-columns: 1fr 1fr;
}
/* Cards: reset desktop right-borders, use a 1-px grid line instead */
#page-finance .j-card {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 14px 14px;
}
/* Remove inner edge borders so the 2×2 grid has clean outer borders only */
#page-finance .j-card:nth-child(2n) {
/* right column — no right edge needed; nothing to do */
}
#page-finance .j-card:nth-child(n+3) {
/* bottom row — no bottom border */
border-bottom: none;
}
/* Vertical divider between the two columns */
#page-finance .j-card:nth-child(2n+1) {
border-right: 1px solid var(--line);
}
/* The big £ value: desktop is 24px which clips on a 380px viewport
when the number is >£100k. Drop to 20px and let it wrap if needed
(e.g. for "£128,210" which needs roughly 100px at 20px Inter). */
#page-finance .j-val {
font-size: 20px;
line-height: 1.05;
}
/* Label: don't let "FOCUS IN ORBIT" stack to one word per line — kill
the uppercase letter-spacing slightly and shrink. The step bubble
stays inline. */
#page-finance .j-lbl {
font-size: 10px;
letter-spacing: .02em;
margin-bottom: 6px;
gap: 4px;
}
#page-finance .j-sub {
font-size: 10.5px;
margin-top: 4px;
}
/* Section header (e.g. "In Orbit · 30 PROJECTS · £128,210 · Pre-invoice")
stacks vertically on mobile. Title row stays horizontal (title + badge),
meta drops to its own line below. */
#page-finance .fin-section-h {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 14px;
}
#page-finance .fin-section-h-left {
flex-wrap: wrap;
gap: 8px;
}
#page-finance .fin-section-title {
font-size: 13px;
}
#page-finance .fin-section-meta {
font-size: 11px;
line-height: 1.4;
}
#page-finance .fin-section-total {
font-size: 13px;
}
/* Pipeline project rows: on desktop these are 4-column
(name | pill | action button | amount). On a 380px viewport the fixed
pixel widths (200/200/175) push the action and amount off-screen, where
they get clipped by .fin-section's overflow:hidden — making the lifecycle
actions unreachable from mobile. We intentionally hide button + amount
on mobile (lifecycle actions like "Mark paid" are desktop activities)
and run the row as a 70 / 30 split: name+sub on the left, status pill
on the right. */
#page-finance .fin-row {
grid-template-columns: 70% 30%;
gap: 12px;
padding: 12px 14px;
}
#page-finance .fin-row .fin-btn-slot,
#page-finance .fin-row .fin-amount {
display: none;
}
/* Make sure the pill stays right-aligned in its 30% column */
#page-finance .fin-row .fin-pill-slot {
justify-content: flex-end;
}
}