/* * The Jobtracker application stylesheet, extracted from app.html on 21 September 2026. * Same rules, its own file, stamped and cached for a year. */ /* The heading face. One family, one weight, two subsets: a page with no macron on it never fetches latin-ext. See /fonts/README.md for why this is the only webfont on the site. */ @font-face { font-family:Bitter; src:url(/fonts/bitter-700-latin.woff2?v=222764fa2f) format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF; } @font-face { font-family:Bitter; src:url(/fonts/bitter-700-latin-ext.woff2?v=6b126d7c5d) format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF; } /* Bitter 700 sets at 89.5% of the width of Georgia bold, measured rather than guessed, so the swap barely moves the line. Where Georgia is missing the stack falls through to the generic. */ @font-face { font-family:"Bitter Fallback"; src:local("Georgia"); size-adjust:89.5%; font-weight:700; } :root { --paper:#FFFFFF; --surface:#FFFFFF; --ink:#201e1d; --muted:#5A6169; --line:#E3E5E8; --display:Bitter,"Bitter Fallback",Georgia,"Times New Roman",serif; --accent:#164E52; --accent-ink:#FFFFFF; --accent-hover:#103A3E; --accent-soft:#ECF2F3; --ring:rgba(22,78,82,0.15); --pill-ink:#40454B; --pill-line:#E3E5E8; --warn:#8F5F08; --warn-soft:#FAF4E6; --warn-line:#E8DCC0; --danger:#B42318; --danger-soft:#F9ECEA; --radius:6px; --chrome:#FFFFFF; --chrome-ink:var(--ink); --chrome-muted:#5A6169; --chrome-line:#E3E5E8; --chrome-active-bg:#ECF2F3; --chrome-active-ink:#164E52; --chrome-select:#FFFFFF; --logo-bg:var(--ink); --logo-ink:#FFFFFF; --stat-num:var(--ink); --label-ink:#40454B; --input-line:#8B94A0; --closed-bg:#F1F2F4; --good-bg:#F0F7F2; --good-line:#CDE3D3; --good-ink:#1E5631; /* Money leaving. Deliberately not the danger red: PAYE is not an error, it is a fact, and a table of red warnings about your own tax would be theatre. */ --out:#9A3A28; --out-soft:#FBF5F3; --out-line:#EBD9D4; --contact-bg:#FAFAFB; --bar-bg:#ECEDEF; --bar-fill:var(--accent); /* Your Career's own colour (22 September 2026), beside Your Hunt's teal: indigo, 7.9:1 on white and 6.8:1 on its soft ground, so it carries text as well as the teal does. */ --career:#3D4A9C; --career-hover:#2F3A80; --career-soft:#EEF0F9; --career-line:#CBD0EC; /* THE STAGES (1 October 2026), warming as a job moves on. Each ink is at least 5:1 on its own soft ground. */ --st-saved:#4A5058; --st-saved-soft:#F1F2F4; --st-saved-line:#D5D8DC; --st-applied:#2F5DA8; --st-applied-soft:#EAF0FA; --st-applied-line:#C3D3EE; --st-screening:#6A45A3; --st-screening-soft:#F2EDF9; --st-screening-line:#D8CCEC; --st-interview:#A34A0C; --st-interview-soft:#FDF1E4; --st-interview-line:#F0D2B0; --st-offer:#7A6000; --st-offer-soft:#FBF5DC; --st-offer-line:#EADC9E; --st-accepted:#1E6B3A; --st-accepted-soft:#E8F4EC; --st-accepted-line:#BFDDC9; --st-closed:#8A3B3B; --st-closed-soft:#F7EEEE; --st-closed-line:#E6CFCF; /* Your Timesheets' own colour (1 October 2026), the third beside teal and indigo: amber, 5.9:1 on white and 5.4:1 on its soft ground, dark enough to carry text. */ --time:#8B5A0B; --time-hover:#6F4708; --time-soft:#FBF3E4; --time-line:#EBD5AE; } * { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; line-height:1.55; } /* Headings only. Everything else stays on the system stack. */ h1, h2 { font-family:var(--display); letter-spacing:-0.015em; } header.app { position:sticky; top:0; z-index:20; background:var(--chrome); border-bottom:1px solid var(--chrome-line); padding:calc(0.65rem + env(safe-area-inset-top)) 1rem 0; } .brand { display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; } /* THE SIDEBAR CARRIES THE FULL DOMAIN LOCKUP, the identical svg the marketing site puts in its header, so the app and the site read as one product rather than two. The lockup is 7.4:1, so exactly ONE of width or height may be set or it distorts: height is the one to fix, because the sidebar is a fixed 253px (230px until 1 October 2026, widened 10% for Your Timesheets) and the vertical rhythm of the chrome is what has to stay predictable. 23px of height comes out at roughly 170px of width, which clears the 0.9rem of sidebar padding on both sides with room left over. */ .brandlock { position:relative; margin:0; flex:0 0 auto; line-height:0; } .brandlock .logo { display:block; width:auto; height:23px; max-width:100%; } /* TWICE THE SIZE (James, 4 October 2026: "it is small"). On a phone it is up to 30px high, 209px wide. A fixed 30px left the row 0.4px short at 390px, so the bell dropped onto a line of its own, and any wider plan chip ("Career and Timesheets") did the same on every phone. So the lockup takes what the row has left after the chip and the bell, up to its full size and never under 120px wide, keeping its shape. In the sidebar, see below: the whole width of the column. */ @media (max-width:939px) { .brandlock { flex:1 1 0; min-width:120px; max-width:209px; } .brandlock .logo { width:100%; height:auto; } } /* The lockup is a link home. Somebody sent "have a look at the demo" needs a way back to the site that is not the browser's back button. */ .brandlock .brandhome { display:block; color:inherit; text-decoration:none; line-height:0; border-radius:4px; } @media (pointer:coarse) { .brandlock .brandhome { display:flex; align-items:center; min-height:44px; } } .brandlock .brandhome:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } /* The lockup is drawn as paths, so the h1 needs real text underneath it for screen readers and for the document outline. It is clipped rather than hidden, because display:none would take the page's only heading out of the accessibility tree entirely. */ .brandlock .lockuptext { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .brand small { color:var(--chrome-muted); font-size:0.66rem; font-weight:500; letter-spacing:0.02em; } /* Off screen until it is focused, exactly as on every other page. */ .skip { position:absolute; left:-9999px; top:0; background:var(--ink,#201e1d); color:#fff; padding:0.6rem 1.1rem; z-index:100; border-radius:0 0 6px 0; font-weight:600; text-decoration:none; } .skip:focus { left:0; } #searchPicker { background:var(--chrome-select); color:var(--chrome-ink); border:1px solid var(--input-line); border-radius:5px; font-size:0.85rem; width:auto; max-width:40vw; padding:0.3rem 0.5rem; } nav.tabs { display:flex; gap:2px; overflow-x:auto; padding:0.5rem 0; } nav.tabs button { appearance:none; border:none; background:none; cursor:pointer; white-space:nowrap; font:inherit; font-size:0.82rem; font-weight:500; color:var(--chrome-muted); padding:0.35rem 0.65rem; border-radius:5px; } nav.tabs button:hover { color:var(--chrome-ink); background:#F4F5F6; } nav.tabs button.active { background:var(--chrome-active-bg); color:var(--chrome-active-ink); font-weight:600; } /* The tools, nested under Tools. Hidden on a phone, where nav.tabs is a horizontal scrolling strip and a nested list would be unreadable: the pills above the tool serve there. */ .subnav { display:none; } .subnav-item { width:100%; text-align:left; } .sidelinks { display:flex; gap:0.9rem; flex-wrap:wrap; padding:0 0 0.55rem; } /* HIDDEN MEANS HIDDEN. .syncbar and .installhint set display:flex, which outranks the browser's own [hidden] rule, so both drew an empty bar at the top of every screen while hidden. */ [hidden] { display:none !important; } .installhint { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin:0 0 0.9rem; padding:0.6rem 0.8rem; border:1px solid var(--soft-line,#CDDEE0); border-radius:8px; background:var(--good-bg,#ECF2F3); font-size:0.85rem; } .installhint span { flex:1 1 14rem; } .sitebanner{background:#FAF4E6;color:#8F5F08;border-bottom:1px solid #E8DCC0;padding:.6rem 1rem;text-align:center;font-weight:600;font-size:.95rem} .syncbar { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin:0 0 0.9rem; padding:0.5rem 0.75rem; border:1px solid var(--line); border-radius:8px; background:var(--accent-soft,#ECF2F3); font-size:0.82rem; } .syncbar.err { border-color:var(--warn-line,#E6C9A8); background:var(--warn-soft,#FDF4E7); } .syncwho { font-weight:700; } .syncmsg { color:var(--muted); flex:1 1 auto; } .syncbar .syncnow { font-size:0.82rem; } /* The tick at the top right when everything is saving on its own (29 September 2026). */ .syncbar.compact { padding:0; border:0; background:none; justify-content:flex-end; position:relative; margin:0 0 0.6rem; } .topbars > .syncbar.compact { flex:1 1 auto; align-self:center; } .syncpill { display:inline-flex; align-items:center; gap:0.4rem; border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:0.22rem 0.7rem; font:inherit; font-size:0.8rem; color:var(--muted); cursor:pointer; } .syncpill:hover, .syncpill:focus-visible { border-color:var(--accent); color:var(--ink); } .syncdetail { display:none; position:absolute; right:0; top:100%; z-index:40; width:min(20rem, 90vw); margin-top:2px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0.6rem 0.75rem; box-shadow:0 8px 24px rgba(0,0,0,0.08); font-size:0.82rem; display:none; } .syncbar.compact:hover .syncdetail, .syncbar.compact:focus-within .syncdetail, .syncbar.compact.open .syncdetail { display:grid; gap:0.3rem; } .syncdetail .syncnow { justify-self:start; } .acctwho { overflow-wrap:anywhere; margin:0.2rem 0 0.1rem; } .paynotad { border:1px dashed var(--line); border-radius:8px; padding:0.6rem 0.75rem; } .synchint { flex-basis:100%; margin-top:-0.2rem; } .starthere .todo { display:inline-grid; place-items:center; width:1.3rem; height:1.3rem; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); font-size:0.72rem; font-weight:750; } .moresetup { margin-top:0.7rem; } .insnudge { margin:0.2rem 0 0.6rem; } .insnudge .linkish, .insgaps .linkish { font-size:inherit; } .lifemoney { margin:0.4rem 0; padding-left:1.1rem; display:grid; gap:0.35rem; } @media print { .syncbar { display:none !important; } } /* The bookmark offered where the jobs are, directly under the account row. Same shape as the sync bar so the top of the app stays one thing, and quieter, because it is an offer. */ .capturehint { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin:0 0 0.6rem; padding:0.5rem 0.75rem; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:0.82rem; } .capturehint .grow { flex:1 1 18rem; } /* The strip and the sync line on one row (James, 28 September 2026), wrapping when there is no room. */ .topbars { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:stretch; margin:0 0 0.9rem; } .topbars > .capturehint, .topbars > .syncbar { margin:0; } .topbars > .capturehint.slim { flex:1 1 34rem; } .topbars > .capturehint:not(.slim) { flex:1 1 100%; } .topbars > .syncbar { flex:1 1 28rem; } .capturehint .capturebtn { cursor:grab; } .hintx { border:0; background:none; color:var(--muted); font-size:1.1rem; line-height:1; padding:0.2rem 0.35rem; cursor:pointer; border-radius:4px; } .hintx:hover { background:var(--accent-soft); color:var(--ink); } /* The recording, under the bar it belongs to. Its own row in the flex, so it takes the full width rather than squeezing in beside the button that opened it. */ .capturefilm { flex:1 0 100%; margin:0.6rem 0 0.1rem; } /* The full width of the column (James, 24 September 2026: "still too small"). The 900px cap was the size of the old GIF; the video is 1600 wide, so the column is the only limit now. */ .capturefilm video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; background:#F7F8F9; border:1px solid var(--line); border-radius:8px; } .capturefilm .tiny { margin-top:0.35rem; } /* What the plan allows against what has been used. Three columns, the last one right aligned because it is where the numbers are and numbers read down an edge. */ .usetable { width:100%; border-collapse:collapse; font-size:0.88rem; } .usetable th { text-align:left; font-size:0.68rem; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding:0 0.5rem 0.35rem 0; border-bottom:1px solid var(--line); } .usetable td { padding:0.42rem 0.5rem 0.42rem 0; border-bottom:1px solid var(--line); vertical-align:top; } .usetable td:first-child { font-weight:600; } .usetable td:last-child, .usetable th:last-child { text-align:right; padding-right:0; font-variant-numeric:tabular-nums; } .aimeter { height:0.5rem; border-radius:999px; background:var(--line); overflow:hidden; margin:0 0 0.8rem; } .aibar { height:100%; background:var(--accent); border-radius:999px; } /* The Feedback button, beside the state line at the foot of every screen. Quiet, because it is an offer rather than a task, and always in the same place so it can be found from anywhere. */ .fbopen { display:inline-block; margin:0 0 0.4rem; padding:0.35rem 0.85rem; font:inherit; font-size:0.8rem; font-weight:650; color:var(--accent); background:var(--accent-soft); border:1px solid var(--soft-line,#CDDEE0); border-radius:999px; cursor:pointer; } .fbopen:hover { background:var(--accent); color:#fff; } .fbkind { text-align:left; } .fbkind.on { border-color:var(--accent); background:var(--accent-soft); } @media print { .capturehint { display:none !important; } } /* The ad grows with what is in it, to about twenty five lines. sizeAdBoxes reads this cap back, so the two cannot disagree. */ textarea.adbox { min-height:7rem; max-height:36rem; } /* What the capture read from the sentences rather than from data, ticked and refusable. */ .capture-extra { margin:0.7rem 0 0; padding:0.6rem 0.7rem; border:1px solid var(--line); border-radius:8px; background:var(--accent-soft); } .capture-tick { display:flex; align-items:flex-start; gap:0.5rem; margin-top:0.45rem; font-size:0.9rem; } .capture-tick input { margin-top:0.2rem; } .sidehead { font-size:0.62rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin:0.9rem 0 0.2rem; padding:0 0.2rem; } .sidelinks a { color:var(--chrome-muted); font-size:0.72rem; font-weight:500; text-decoration:none; } .sidelinks a:hover { color:var(--chrome-ink); text-decoration:underline; } /* Your account and Sign out, directly under the tabs: the same size as the other side links, and the button made to read as one of them rather than as a control. */ .acctlinks { flex-direction:column; gap:0.35rem; margin-top:0.6rem; padding:0; } .acctlinks .linkish { color:var(--chrome-muted); font-size:0.72rem; font-weight:500; text-decoration:none; } .acctlinks .linkish:hover { color:var(--chrome-ink); text-decoration:underline; } @media (max-width:939px) { .acctlinks { display:none; } } /* The fold that holds them. Its own marker, so the row reads as one line at any width. */ .sidelinks-fold { margin:1.1rem 0 0.4rem; } .sidelinks-fold > summary { cursor:pointer; list-style:none; margin:0; } .sidelinks-fold > summary::-webkit-details-marker { display:none; } .sidelinks-fold > summary::after { content:"\25B8"; margin-left:0.35rem; color:var(--chrome-muted); } .sidelinks-fold[open] > summary::after { content:"\25BE"; } main { max-width:900px; margin:0 auto; padding:1rem 1rem calc(4.5rem + env(safe-area-inset-bottom)); } /* THE FOOTER SHARES MAIN'S GUTTER, not the window edge, so the small print starts on the same vertical line as the content above it instead of hugging the bottom left corner. A rule above it and real padding inside it give it the room to read as a footer. */ footer.app { max-width:900px; margin:2.5rem auto 5rem; border-top:1px solid var(--line); padding:1.3rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); color:var(--muted); font-size:0.78rem; line-height:1.65; } footer.app p { margin:0 0 0.55rem; max-width:68ch; } /* The negative inline start pulls the first link's text back onto the gutter line, so the padding that makes each link a comfortable target does not visibly indent the row. */ .footcols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem 1.6rem; } @media (max-width:699px) { .footcols { grid-template-columns:repeat(2,minmax(0,1fr)); } } .foothead { font-size:0.7rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink); margin-bottom:0.3rem; } .footcols a, .footcols button { display:block; padding:0.2rem 0; color:var(--muted); text-decoration:none; font-size:0.82rem; background:none; border:none; font-family:inherit; text-align:left; cursor:pointer; } /* A button does not inherit the footer's line height as a link does, so Take the tour, Subscription and Settings sat 3 to 5px shorter than the links beside them and the four columns' rows stepped out of line (5 October 2026). */ .footcols button { line-height:inherit; } .footcols a:hover, .footcols button:hover { color:var(--accent); text-decoration:underline; } /* What the app itself is doing: the version and when the last sync landed. */ .footstate { margin-top:1.1rem; padding-top:0.7rem; border-top:1px solid var(--line); font-size:0.76rem; color:var(--muted); } .footlinks { display:flex; flex-wrap:wrap; align-items:center; gap:0 0.1rem; margin-left:-0.55rem; } .footlinks a { display:inline-flex; align-items:center; min-height:44px; padding:0 0.55rem; border-radius:5px; color:var(--ink); font-weight:600; text-decoration:none; } .footlinks a:hover { background:var(--accent-soft); color:var(--accent); text-decoration:underline; } .footlinks .sep { color:var(--muted); } /* A plain-English note on a label. Shown on hover AND on keyboard focus AND on tap, because a bare title attribute is none of those on a phone. A LIGHT CARD (James, 10 October 2026: "why does it have a black background, capital letters?"). The note is a white card in the app's own tokens with a small arrow at its "?", in sentence case whatever the heading or table around it does, and fixed to the screen by helpFix: above the line it explains, or below when there is no room, and always inside the screen. */ .help { position:relative; display:inline-flex; margin-left:0.3rem; vertical-align:middle; cursor:help; } /* The ? is 18px to look at and 36px to hit: the extra is an invisible margin around it, so nothing moves (WCAG 2.2 SC 2.5.8). */ .help::before { content:""; position:absolute; inset:-9px; } button.help { appearance:none; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; } .help .helpq { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; font-weight:700; line-height:1; text-transform:none; letter-spacing:0; transition:background-color 0.12s, color 0.12s; } .help:hover .helpq, .help.open .helpq { background:var(--accent); color:var(--accent-ink); } .help:focus { outline:none; } .help:focus-visible .helpq { outline:2px solid var(--accent); outline-offset:2px; } .help .helptip { position:fixed; left:0; top:0; z-index:85; box-sizing:border-box; width:max-content; max-width:min(320px, calc(100vw - 24px)); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(26,29,33,0.06), 0 10px 28px rgba(26,29,33,0.14); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; font-weight:400; font-style:normal; line-height:1.5; text-align:left; text-transform:none; letter-spacing:normal; white-space:normal; overflow-wrap:break-word; cursor:auto; opacity:0; visibility:hidden; transition:opacity 0.14s ease, visibility 0s linear 0.14s; } /* The arrow at the "?": a turned square on the edge nearest it, at the "?"'s own place along that edge (--hx). */ .help .helptip::before { content:""; position:absolute; left:var(--hx, 50%); bottom:-6px; width:10px; height:10px; background:var(--surface); border:1px solid var(--line); border-width:0 1px 1px 0; transform:translateX(-50%) rotate(45deg); } .help .helptip.hbelow::before { bottom:auto; top:-6px; border-width:1px 0 0 1px; } /* Open: tapped or clicked open, or (until Escape) hovered with a mouse or reached by the keyboard. One at a time. */ .help.open .helptip, .help:focus-visible:not(.hshut) .helptip { opacity:1; visibility:visible; transition:opacity 0.14s ease; } @media (hover:hover) { .help:hover:not(.hshut) .helptip { opacity:1; visibility:visible; transition:opacity 0.14s ease; } } @media (prefers-reduced-motion:reduce){ .help .helptip, .help .helpq { transition:none !important; } } /* Two parts: "What it is", a hairline, then "In plain words", with why it matters as a soft note under it. */ .help.htwo .helptip { width:min(340px, calc(100vw - 24px)); max-width:none; } /* On a phone a note is the screen's width less 8px each side, so it sits evenly however near an edge its "?" is. */ @media (max-width:480px) { .help .helptip { max-width:calc(100vw - 16px); } .help.htwo .helptip { width:calc(100vw - 16px); } } /* A note inside a figure's label or a table heading takes none of its capitals, letter spacing or small type. */ .help .helptip span { text-transform:none; letter-spacing:normal; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit; } .help .helptip .hoff, .help .helptip .hplain, .help .helptip .hwhy { display:block; } .help .helptip .hplain { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .help .helptip .hwhy { margin-top:10px; padding:8px 10px; border-radius:8px; background:var(--accent-soft); font-size:13px; line-height:1.45; } .help .helptip .hhd { display:block; margin-bottom:2px; font-size:12px; font-weight:650; line-height:1.4; color:var(--accent); } .help .helptip .hsr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* Segmented control, for switching a view: the calendar's list or month, the jobs list, board or table, and the Tools. One outline around the set, the chosen one tinted, so a switch never looks like the action buttons beside it. */ .seg { display:inline-flex; flex-wrap:nowrap; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface); } .seg .btn { border:0; border-radius:0; margin:0; background:transparent; } .seg .btn + .btn { border-left:1px solid var(--line); } .seg .btn.on { background:#E3EFE8; color:var(--accent); font-weight:650; } /* Month grid. minmax(0,1fr) so a day with four interviews cannot widen its column and push the week out of shape. */ .cgrid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .chead { background:#FAFAFB; padding:0.45rem 0.3rem; text-align:center; font-size:0.66rem; font-weight:750; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); } .cday { background:#fff; min-height:5.6rem; padding:0.3rem; display:flex; flex-direction:column; gap:0.18rem; } .cday.other { background:#FCFCFD; } .cday.other .cdate { color:#6B7481; } .cday.today { background:var(--accent-soft, #ECF2F3); } .cday.today .cdate { color:var(--accent); font-weight:800; } .cdate { font-size:0.72rem; font-weight:650; color:var(--muted); } .cev { display:block; width:100%; text-align:left; font:inherit; font-size:0.68rem; line-height:1.25; background:var(--accent); color:#fff; border:none; border-radius:4px; padding:0.16rem 0.3rem; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cev:hover { background:var(--accent-hover, #103A3E); } .cevt { font-weight:700; margin-right:0.2rem; } /* THE MONTH ON A PHONE (front-end audit re-run A7, 15 September 2026). Chips cut to four letters with the time hidden told nobody anything, and each was a 17px target stacked 3px from the next. Below 700px a day with something on it is one button the size of its cell, showing a dot and the time of each entry, and the day you tap is listed in full under the grid. A phone opens on the list anyway. */ .cdaybtn, .cdaylist { display:none; } .cday.sel { box-shadow:inset 0 0 0 2px var(--accent); } @media (max-width:699px){ .cday { position:relative; min-height:4.4rem; } .cev { display:none; } .cdaybtn { display:flex; flex-direction:column; align-items:flex-start; gap:2px; position:absolute; inset:0; width:100%; margin:0; padding:1.45rem 0.22rem 0.25rem; border:0; border-radius:0; background:transparent; font:inherit; color:var(--ink); text-align:left; cursor:pointer; } .cdaybtn:focus-visible { outline-offset:-3px; } .cdot { display:flex; align-items:center; gap:3px; font-size:0.62rem; font-weight:650; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; } .cdot::before { content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--accent); } .cmore { font-size:0.62rem; font-weight:650; color:var(--muted); padding-left:9px; } .cdaylist { display:block; margin-top:0.2rem; } } @media (min-width:940px) { /* THE COLUMN SCROLLS, AND SAYS SO. On a 900px screen the nav is taller than the viewport, so Sign in and More from Jobtracker were below the fold with no cue at all: a scrollbar that only appears once you are already scrolling is no help to somebody who does not know there is anything down there. The fade at the bottom edge is the cue, and the tighter rhythm below buys back about 40px so most screens do not need it (21 September audit). */ header.app { position:fixed; top:0; left:0; bottom:0; width:253px; border-bottom:none; border-right:1px solid var(--chrome-line); padding:1.1rem 0.9rem 1.6rem; overflow-y:auto; scrollbar-width:thin; -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); } /* The mask is decoration; it must never hide the last item outright, so the padding above gives it something of its own to fade over. */ header.app:hover, header.app:focus-within { -webkit-mask-image:none; mask-image:none; } .brand { display:flex; flex-wrap:wrap; } .brand .grow { display:none; } /* The lockup takes a row of its own, so the tagline can never end up beside it and collide with the wordmark when the sidebar is at its narrowest. */ .brandlock { width:100%; } /* The lockup across the whole column (4 October 2026): about 224px by 32px, twice the area of the 23px one, as large as the 253px sidebar holds without the sidebar itself growing. Width set, height from the file's own 920 by 132, so it cannot distort. */ .brandlock .logo { width:100%; height:auto; max-width:232px; } .brand small { width:100%; margin-top:0.55rem; line-height:1.45; } /* THE PLAN, IN FULL (James, 7 October 2026: "Team seat: Career and Timesheets · Compli..." was cut off). In the sidebar the chip wraps to a second line inside the column rather than running past its edge. */ #tierBadge { display:flex; flex-wrap:wrap; gap:0.3rem; max-width:100%; min-width:0; } #tierBadge .tierchip { white-space:normal; text-align:left; line-height:1.35; max-width:100%; overflow-wrap:anywhere; } #tierBadge .aichip { margin-left:0; } #searchPicker { width:100% !important; max-width:none !important; margin-top:1rem; } nav.tabs { flex-direction:column; gap:1px; padding-top:0.8rem; overflow:visible; } /* The sidebar is a column here, so the nested list reads as one. A rule down the left is what says these belong to the item above rather than being five more sections. */ .subnav { display:flex; flex-direction:column; gap:1px; margin:0.15rem 0 0.35rem 0.85rem; padding-left:0.75rem; border-left:2px solid var(--chrome-line); } .subnav-item { font-size:0.82rem; padding:0.34rem 0.5rem; color:var(--chrome-muted); } .subnav-item:hover { color:var(--chrome-ink); background:#F4F5F6; } .subnav-item.on { color:var(--chrome-active-ink); font-weight:650; background:var(--chrome-active-bg); } nav.tabs button { text-align:left; padding:0.42rem 0.65rem; } .sidelinks { flex-direction:column; gap:0.3rem; margin-top:0.9rem; border-top:1px solid var(--chrome-line); padding-top:0.7rem; } main { margin-left:253px; margin-right:0; max-width:none; padding:1.3rem 1.75rem 4.5rem; } /* 1296px is the 1240px content column of the form-heavy tabs plus its two 1.75rem gutters, so the footer text lines up with the cards above it instead of stretching the whole way across a 1900px screen. */ footer.app { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:3rem; align-items:center; margin-left:253px; margin-right:0; max-width:1296px; padding:1.4rem 1.75rem calc(1.6rem + env(safe-area-inset-bottom)); } /* The shell is fluid so Board and Table use the whole screen. Form-heavy tabs stay readable: full-width text inputs across 1900px are unusable. */ /* The dashboard is charts, tiles and a task list, none of which is a text input, so it takes the same width as Settings rather than the narrower form measure. */ .tab-dashboard { max-width:1500px; } /* The whole width (James, 24 September 2026). Settings is two columns, profile and plan, so no single field runs across the screen; the 1500px cap only left an empty band beside them. */ .tab-settings { max-width:none; } /* The job page is two columns, so it may use the whole width. A 1400px cap left a dead band to the right of the side column on anything wider than about 1650px, which is what James circled. */ .tab-detail { max-width:none; } } /* Closer together (T17, James 7 October 2026: "tighten gaps between sections"): were 1.1rem 0 0.55rem and 1.6rem 0 0.5rem. */ h2 { font-size:1.15rem; font-weight:650; letter-spacing:-0.01em; margin:0.85rem 0 0.45rem; } h3 { font-size:0.7rem; font-weight:650; text-transform:uppercase; letter-spacing:0.09em; color:var(--muted); margin:1.15rem 0 0.4rem; } /* The suffix is read, not glanced at: it inherited the eyebrow's small size and came out near 9px (A12). */ h3 small { font-weight:400; text-transform:none; letter-spacing:0; font-size:0.8rem; color:var(--muted); } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0.8rem 0.95rem; margin:0.45rem 0; } .card.clickable { cursor:pointer; position:relative; padding-right:1.7rem; } .card.clickable:hover { border-color:#B9BEC5; } .card.clickable::after { content:"›"; position:absolute; right:0.65rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:1.05rem; line-height:1; } .card.clickable:active, .bcard:active { background:#F4F5F6; } .muted { color:var(--muted); } .small { font-size:0.82rem; } .tiny { font-size:0.72rem; } .row { display:flex; gap:0.55rem; flex-wrap:wrap; align-items:center; } .grow { flex:1 1 auto; } .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; } .spanall { grid-column:1 / -1; } /* A way of using it: the box, the name, what it does, and why anybody would. */ .wayrow { align-items:flex-start; gap:0.6rem; margin:0.45rem 0; } .wayrow input { margin-top:0.2rem; } .wayrow strong { font-weight:650; } /* What a way of using it needs said or set, directly under its own row. */ .wayextra { margin:0.1rem 0 0.75rem 1.7rem; } .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.55rem; } @media (max-width:600px){ .grid2,.grid3 { grid-template-columns:1fr; } } .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:0; margin:0.65rem 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); } .stat { min-width:0; padding:0.55rem 0.8rem; border-right:1px solid var(--line); } .stat:last-child { border-right:none; } .stat b { display:block; font-size:1.3rem; font-weight:650; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:var(--stat-num); } .stat span { display:block; font-size:0.62rem; font-weight:550; line-height:1.25; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); overflow-wrap:anywhere; } label { display:block; font-size:0.72rem; font-weight:550; color:var(--label-ink); margin:0.7rem 0 0.2rem; } /* Search boxes are text boxes too. Leaving input[type=search] off this list drew every search field in the app at the browser's own 21px, beside 36px selects. */ /* Email, phone and password too (James, 28 September 2026): left off this list, they were drawn at the browser's own short height beside every other box, and they are the fiddliest ones to type in. */ input[type=text],input[type=search],input[type=number],input[type=date],input[type=time],input[type=url],input[type=email],input[type=tel],input[type=password],select,textarea { width:100%; font:inherit; color:var(--ink); background:#FFFFFF; border:1px solid var(--input-line); border-radius:5px; padding:0.42rem 0.55rem; } textarea { min-height:4rem; resize:vertical; } input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); } a:focus-visible,button:focus-visible,[tabindex]:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn { appearance:none; cursor:pointer; font:inherit; font-size:0.82rem; font-weight:550; border-radius:5px; padding:0.42rem 0.85rem; border:1px solid var(--input-line); background:#FFFFFF; color:var(--ink); } .btn:hover { border-color:#5A6169; } .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; } .demonote { border-color:var(--accent); margin-bottom:0.75rem; } .careerview .demonote { border-color:var(--career); } /* The demo's example results and the line beside each button it never presses (James, 28 September 2026). */ .pill.demo-ex { background:var(--accent-soft); color:var(--accent); border-color:var(--soft-line, #CDDEE0); margin-left:0.35rem; vertical-align:middle; font-weight:650; } h3 .pill.demo-ex { font-size:0.66rem; } .demo-run { margin-top:0.45rem; padding:0.45rem 0.6rem; border-radius:6px; background:var(--accent-soft); border:1px solid var(--soft-line, #CDDEE0); overflow-wrap:anywhere; } .demo-run a { color:var(--accent); font-weight:600; } .demo-docbtns { flex-wrap:wrap; gap:0.4rem; } /* In the demo a button that is never pressed looks it. Scoped to the demo: elsewhere nothing changes. */ .isdemo .btn:disabled, .isdemo input:disabled { opacity:0.55; cursor:not-allowed; } .btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); } .btn.danger { border-color:var(--danger); color:var(--danger); background:none; } .btn.small { padding:0.22rem 0.55rem; font-size:0.76rem; } .btn.block { width:100%; margin-top:0.75rem; } .pill { display:inline-block; font-size:0.68rem; font-weight:600; padding:0.1rem 0.45rem; border-radius:4px; background:var(--closed-bg); color:var(--pill-ink); white-space:nowrap; border:1px solid var(--pill-line); } .pill.warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); } .pill.closed { background:var(--closed-bg); color:var(--muted); } /* A stage's pill, lane, cards and count all wear its colour. */ .st-saved { --st:var(--st-saved); --st-soft:var(--st-saved-soft); --st-line:var(--st-saved-line); } .st-applied { --st:var(--st-applied); --st-soft:var(--st-applied-soft); --st-line:var(--st-applied-line); } .st-screening { --st:var(--st-screening); --st-soft:var(--st-screening-soft); --st-line:var(--st-screening-line); } .st-interview { --st:var(--st-interview); --st-soft:var(--st-interview-soft); --st-line:var(--st-interview-line); } .st-offer { --st:var(--st-offer); --st-soft:var(--st-offer-soft); --st-line:var(--st-offer-line); } .st-accepted { --st:var(--st-accepted); --st-soft:var(--st-accepted-soft); --st-line:var(--st-accepted-line); } .st-closed { --st:var(--st-closed); --st-soft:var(--st-closed-soft); --st-line:var(--st-closed-line); } .pill.stage { background:var(--st-soft); color:var(--st); border-color:var(--st-line); font-weight:650; } .bcol[class*="st-"] { background:var(--st-soft); border-color:var(--st-line); border-top:3px solid var(--st); } .bcol[class*="st-"] h4 { color:var(--st); } .bcol[class*="st-"] .bcard { border-left:3px solid var(--st); } .bcol[class*="st-"] .bfold { color:var(--st); } .stat.statlink[class*="st-"] { border-top:3px solid var(--st); } .stat.statlink[class*="st-"] b { color:var(--st); } .stagechip[class*="st-"].on { background:var(--st); color:#FFFFFF; border-color:var(--st); } .stagechip[class*="st-"]:not(.on) { color:var(--st); border-color:var(--st-line); } /* Fit reads at a glance: Dream role the strongest green, Great fit a lighter one, and everything else the plain grey pill. */ .pill.fit0 { background:#D5EADD; color:var(--accent); border-color:#AFD3BD; } .pill.fit1 { background:var(--good-bg); color:#1E5631; border-color:var(--good-line); } /* An employer you work for now, from Your Career (28 September 2026). */ .pill.held { background:var(--good-bg); color:#1E5631; border-color:var(--good-line); } /* The one sample card on a TikTok arrival's board (5 October 2026): marked so nobody mistakes it for their own. */ .pill.sample { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); font-weight:700; } .card.leanstart { border-left:4px solid var(--accent, #164E52); } .card.leanstart .btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; padding:0 1.2rem; } @media (max-width:600px){ .card.leanstart .btn { flex:1 1 100%; } } .notice { background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:5px; padding:0.5rem 0.75rem; font-size:0.82rem; margin:0.5rem 0; } /* THE PLAN BANNER. Full width, and it states what they have before anything is offered. */ .planbar { border:1px solid var(--line); background:var(--accent-soft); border-radius:10px; padding:1rem 1.15rem; margin:0.2rem 0 1.1rem; } .planbar .pb-name { font-family:var(--display, inherit); font-size:1.45rem; letter-spacing:-0.02em; margin:0.1rem 0 0.15rem; } .planbar .pb-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:0.5rem 1.6rem; margin-top:0.75rem; } .planbar .pb-facts dt { font-size:0.68rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); } .planbar .pb-facts dd { margin:0.1rem 0 0; font-weight:650; } /* The comparison. The column somebody is on is marked so the table reads as where they are. */ .plantable td.pt-c { text-align:center; width:11rem; font-variant-numeric:tabular-nums; } .plantable .pt-mine { background:var(--good-bg); } .plantable th.pt-mine { box-shadow:inset 0 -2px 0 var(--good-ink); } /* THE BANNER IS TWO COLUMNS when there is a plan they are not on: what they have, and what the other one would add, side by side. One column on a phone, where stacking is right because there is no empty half to fill. */ .planbar.has-adds { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; } @media (min-width:900px){ .planbar.has-adds { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0 2rem; } .planbar.has-adds .pb-adds { border-left:1px solid var(--soft-line,#CDDEE0); padding-left:2rem; } } .pb-adds { min-width:0; } /* Inside the purchase card, above the three prices. Tinted so it reads as part of the offer rather than as a note after it. */ .buyincludes { border:1px solid var(--soft-line,#CDDEE0); background:var(--soft,#ECF2F3); border-radius:9px; padding:0.8rem 1rem; margin:0 0 0.2rem; } .addlist { margin:0.5rem 0 0.55rem; padding-left:1.15rem; } .addlist li { margin:0 0 0.3rem; break-inside:avoid; } .pt-yes { color:var(--good-ink); font-weight:700; } .pt-no { color:var(--muted); } @media (max-width:640px){ .plantable td.pt-c { width:5.5rem; } } /* THE DEMO BAR. Fixed above everything, including the sidebar, so it cannot scroll away and cannot be mistaken for one of the in-page notices. Teal rather than amber: nothing is wrong, this is a showroom, and a warning colour would say otherwise. SOFT SINCE THE 21 SEPTEMBER AUDIT (S5): a solid accent bar across the top of every demo screen was the last saturated block in the app, and it read as an alert on a product whose whole point is that nothing here is going wrong. The tint says the same thing without shouting it, and the green button inside it is still the brightest thing on the bar. */ .demobar { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; background:var(--accent-soft); color:var(--ink); border-bottom:1px solid var(--soft-line,#CDDEE0); padding:0.5rem 1rem; padding-top:calc(0.5rem + env(safe-area-inset-top)); font-size:0.85rem; line-height:1.35; box-shadow:0 2px 10px rgba(26,29,33,0.08); } .demobar b { font-weight:700; } .demobar .grow { flex:1 1 16rem; } /* THE DEMO'S OWN COLOUR (James, 8 October 2026: "make it OBVIOUS it's the demo"). Plum, used nowhere else in the app, so it can never be mistaken for a stage, a product or a warning: the top bar's edge, the side menu's edge and the strip at the foot of every screen (app.js, #demofoot), which cannot be closed. */ :root { --demo:#6E2A5E; --demo-hover:#561F49; --demo-soft:#F7EEF4; --demo-line:#E3C9DA; } body.isdemo .demobar { background:var(--demo-soft); border-bottom:3px solid var(--demo); } body.isdemo .demobar a { color:var(--demo); } body.isdemo .demobar .btn.dbcta { background:var(--demo); border-color:var(--demo); color:#fff; } body.isdemo .demobar .btn.dbcta:hover { background:var(--demo-hover); } body.isdemo header.app { box-shadow:inset -4px 0 0 var(--demo); } .demofoot { position:fixed; left:0; right:0; bottom:0; z-index:58; display:flex; align-items:center; gap:0.5rem 0.9rem; flex-wrap:wrap; background:var(--demo); color:#fff; padding:0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom)); font-size:0.85rem; line-height:1.35; box-shadow:0 -2px 10px rgba(26,29,33,0.12); } .demofoot .dftext { flex:1 1 18rem; } .demofoot b { font-weight:700; } .demofoot .dflink { color:#fff; font-weight:650; text-decoration:underline; text-underline-offset:2px; } .demofoot .dflink:focus-visible, .demofoot .dfcta:focus-visible { outline:2px solid #fff; outline-offset:2px; } .demofoot .btn.dfcta { background:#fff; color:var(--demo); border-color:#fff; font-weight:700; } .demofoot .btn.dfcta:hover { background:var(--demo-soft); color:var(--demo-hover); } /* Room for the strip, so it never covers the last thing on the page. */ body.isdemo main { padding-bottom:calc(4.5rem + env(safe-area-inset-bottom)); } body.isdemo footer.app { margin-bottom:3.5rem; } @media (max-width:939px) { /* On a phone it sits on top of the phone bar (0.5rem of padding, a 44px button and its 1px rule), one line. */ .demofoot { bottom:calc(0.5rem + 45px + env(safe-area-inset-bottom)); padding:0.4rem 0.75rem; font-size:0.78rem; gap:0.3rem 0.6rem; } .demofoot .dfmore { display:none; } .demofoot .dftext { flex:1 1 auto; } body.isdemo main { padding-bottom:calc(8.5rem + env(safe-area-inset-bottom)); } body.isdemo footer.app { margin-bottom:calc(6.5rem + env(safe-area-inset-bottom)); } body.isdemo .savebar { bottom:calc(0.5rem + 45px + 2.6rem + env(safe-area-inset-bottom)); } } @media print { .demofoot { display:none !important; } } .demobar a { color:var(--accent); font-weight:650; } .demobar .btn { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:650; } .demobar .btn:hover { background:var(--accent-hover); color:#fff; } /* THE INSTALL BAR (James's review, 23 September 2026). The same shape as the demo bar and the same reason: something that has to be seen before the page is used. It is quieter, because this is a suggestion rather than a statement about what you are looking at, and it never comes back once it has been dismissed or the app has been installed. */ .installbar { position:fixed; top:0; left:0; right:0; z-index:55; display:flex; align-items:center; gap:0.6rem 0.9rem; flex-wrap:wrap; background:var(--chrome); color:var(--chrome-ink); border-bottom:1px solid var(--chrome-line); padding:0.45rem 1rem; padding-top:calc(0.45rem + env(safe-area-inset-top)); font-size:0.84rem; line-height:1.4; } .installbar .grow { flex:1 1 18rem; } .installbar .btn { min-height:34px; padding:0.3rem 0.7rem; font-size:0.8rem; } .installbar .linkish { color:var(--chrome-muted); font-size:0.8rem; } body.hasinstallbar { padding-top:var(--installbar-h, 2.4rem); } body.hasinstallbar header.app { top:var(--installbar-h, 2.4rem); } @media (min-width:1150px){ body.hasinstallbar header.app { top:0; padding-top:var(--installbar-h, 2.4rem); } } /* Both bars at once: the demo one sits on top and the install one under it. */ body.isdemo.hasinstallbar { padding-top:calc(var(--demobar-h, 2.6rem) + var(--installbar-h, 2.4rem)); } body.isdemo .installbar { top:var(--demobar-h, 2.6rem); } body.isdemo.hasinstallbar header.app { top:calc(var(--demobar-h, 2.6rem) + var(--installbar-h, 2.4rem)); } /* Everything else moves down by the bar's height rather than sliding under it. The value is a variable so the one number lives in one place; JS measures the bar and sets it. */ body.isdemo { padding-top:var(--demobar-h, 2.6rem); } body.isdemo header.app { top:var(--demobar-h, 2.6rem); } @media (min-width:1150px){ body.isdemo header.app { top:0; padding-top:var(--demobar-h, 2.6rem); } } .good { background:var(--good-bg); border:1px solid var(--good-line); border-radius:5px; padding:0.5rem 0.75rem; font-size:0.82rem; margin:0.5rem 0; } .fab { position:fixed; right:calc(1.3rem + env(safe-area-inset-right)); bottom:calc(1.3rem + env(safe-area-inset-bottom)); z-index:30; cursor:pointer; min-height:48px; background:var(--accent); color:#fff; border:none; border-radius:6px; font-size:0.88rem; font-weight:600; padding:0.65rem 1.1rem; box-shadow:0 2px 8px rgba(26,29,33,0.18); } /* Room under the last card for the button, so nothing ends up permanently beneath it. */ body.withfab main { padding-bottom:calc(6.5rem + env(safe-area-inset-bottom)); } /* The footer is below main, so on a wide screen the fixed button sat over its last links at the end of the page. */ body.withfab footer.app { padding-bottom:calc(5.2rem + env(safe-area-inset-bottom)); } .fab:hover { background:var(--accent-hover); } /* * JO SITS ABOVE THE ADD JOB BUTTON (James, 23 September 2026). The corner belongs to the one * thing people press most, so the helper goes above it rather than taking it. Below 940px the * phone's bottom bar owns that edge entirely and the button is hidden: Jo is in More instead, * which is where everything else that does not fit lives. */ body.withfab .jt-ask-fab { bottom:calc(5.1rem + env(safe-area-inset-bottom)); } @media (max-width:939px) { .jt-ask-fab { display:none !important; } } /* Under a modal or the tour, never over them, and clear of a job's sticky Save bar (the audit, 25 September 2026). */ .jt-ask-fab { z-index:55; } @media (min-width:940px) and (max-width:1149px) { body:has(.savebar) .jt-ask-fab { bottom:calc(5.6rem + env(safe-area-inset-bottom)); } } /* ON A PHONE THE BUTTON STEPS ASIDE WHILE YOU READ. A fixed button always covers something, and on a narrow screen "+ Add job" sat over the last line of whichever card scrolled beneath it: it hid part of the effort chart on 14 September. Below 940px, wherever the tabs run across the top, it is a 56px round + (the words stay for screen readers), it slides away while you scroll down, and it comes back the moment you scroll up, reach the end of the page, or change tab. Hidden means visibility:hidden too, so it leaves the tab order. */ .fab { transition:transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s; } @media (max-width:939px) { .fab { width:56px; height:56px; min-height:56px; padding:0; border-radius:50%; font-size:1.7rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(26,29,33,0.24); } .fab .fab-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } body.fab-away .fab { transform:translateY(calc(100% + 1.6rem + env(safe-area-inset-bottom))); opacity:0; visibility:hidden; transition:transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s; } } @media (prefers-reduced-motion: reduce) { .fab, body.fab-away .fab { transition:none; } } /* AT REST IT SITS ON NOTHING YOU READ (front-end audit re-run A2, 15 September 2026). The button's markup lives in the header. With the sidebar on screen it is an ordinary full-width button under the search picker, beside the tabs, instead of floating over a card's corner (and, fixed to the sidebar's foot, over its last links). Where the round button floats over the content, the list cards it passes keep a right-hand column as wide as the button, so a card title parked under it at rest is never cut. */ @media (min-width:940px) { .fab { position:static; width:100%; min-height:40px; margin:0.85rem 0 0; padding:0.5rem 0.9rem; box-shadow:none; transition:none; } body.withfab main { padding-bottom:4.5rem; } body.withfab footer.app { padding-bottom:calc(1.6rem + env(safe-area-inset-bottom)); } } @media (max-width:939px) { body.withfab main .card.clickable { padding-right:4.4rem; } /* ONE HEADER ROW ON A PHONE: the logo, the plan and the bell. With the bell at its 44px touch size the row ran 12px over and the bell dropped onto a line of its own. The spacer's gap goes, the bell's target reaches into the header's own padding, and on a phone the plan chip drops its "Free". */ .brand .grow { display:none; } #tierBadge { margin-left:auto; } } @media (pointer:coarse) and (max-width:939px) { .bellbtn { margin-right:-8px; } } @media (max-width:599px) { .tiersub { display:none; } } /* AND STILL ONE ROW AT 360px (13 October 2026). With a plan, the AI count and the bell together (a Team seat member), "Career and Timesheets" and "AI: 50 left" pushed the bell onto a second row at 390px. Below 480px the two chips show their short forms ("Career", "AI 50"); the full words stay in each button's title and label, and stay in the page for a screen reader. The bell is never the thing that gives way. */ .chiptiny { display:none; } @media (max-width:479px) { .chipfull { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .chiptiny { display:inline; } .brand #tierBadge { flex-wrap:nowrap; } } /* The Work and Income traffic light (renderMsdPanel). A lit lamp on a dark housing, with the colour named in the heading beside it, and the panel tinted to match. Every text pair here is one contrast.mjs checks: ink and muted on the good, warn and danger panels. */ .tl { border:1px solid var(--line); border-radius:8px; padding:0.8rem 0.95rem 0.85rem; margin:0 0 1.2rem; background:var(--surface); } .tl.tl-green { border-color:var(--good-line); background:var(--good-bg); } .tl.tl-orange { border-color:var(--warn-line); background:var(--warn-soft); } .tl.tl-red { border-color:#EBC8C4; background:var(--danger-soft); } .tl-head { display:flex; align-items:flex-start; gap:0.85rem; } .tl-head .tl-lights { margin-top:0.1rem; } .tl-lights { display:inline-flex; gap:0.3rem; padding:0.32rem 0.42rem; border-radius:999px; background:var(--ink,#201e1d); flex:0 0 auto; } .tl-l { width:0.95rem; height:0.95rem; border-radius:50%; background:#3A3F45; } .tl-l.on.tl-red { background:#F2555A; } .tl-l.on.tl-orange { background:#F5A623; } .tl-l.on.tl-green { background:#3DBE72; } /* Not set yet: a pale housing with each lamp outlined in its own colour, so it reads as a traffic light waiting to be set rather than a dark switch or a widget that has not loaded (A25). */ .tl-lights.tl-unset { background:#F4F5F6; box-shadow:inset 0 0 0 1px var(--line); } .tl-unset .tl-l { background:#FFFFFF; } .tl-unset .tl-l.tl-red { box-shadow:inset 0 0 0 2px #E4A09B; } .tl-unset .tl-l.tl-orange { box-shadow:inset 0 0 0 2px #EDBE72; } .tl-unset .tl-l.tl-green { box-shadow:inset 0 0 0 2px #8FCBA8; } /* An h3 under the tab's own heading, drawn as the panel's title rather than as an eyebrow. */ .tl .tl-word { margin:0; font-size:1rem; font-weight:700; letter-spacing:-0.005em; text-transform:none; color:var(--ink); } .tl ul { margin:0.4rem 0 0; padding-left:1.15rem; font-size:0.86rem; } .tl ul li { margin:0.15rem 0; } .tl-dates { display:grid; gap:0.45rem 1.4rem; margin:0.75rem 0 0; } @media (min-width:700px) { .tl-dates { grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); } } .tl-date dt { font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); } .tl-date dd { margin:0.1rem 0 0; font-weight:650; } .tl-date dd small { display:block; font-weight:400; font-size:0.78rem; color:var(--muted); } .tl-date.soon dd small { color:var(--warn); font-weight:650; } .tl-form { margin-top:0.75rem; } .tl-form > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; } .tl-colours { border:0; padding:0; margin:0.2rem 0 0.7rem; min-width:0; } .tl-opts { display:flex; flex-wrap:wrap; gap:0.4rem; } /* Two by two on a phone, so "Not set" is never left alone on a second row (A26). */ @media (max-width:599px) { .tl-opts { display:grid; grid-template-columns:1fr 1fr; } } .tl-colours legend { padding:0; margin-bottom:0.35rem; } .tl-colours label { display:inline-flex; align-items:center; gap:0.4rem; min-height:44px; margin:0; padding:0 0.8rem; border:1px solid var(--input-line); border-radius:6px; background:#FFFFFF; font-weight:600; color:var(--ink); cursor:pointer; } .tl-colours input { accent-color:var(--accent); margin:0; } .tl-dash { display:flex; align-items:center; gap:0.65rem; } .tl-dot { width:0.8rem; height:0.8rem; border-radius:50%; flex:0 0 auto; } .tl-dot.tl-green { background:#1E7A45; } .tl-dot.tl-orange { background:#B45F06; } .tl-dot.tl-red { background:#B42318; } table.rep,table.pay { border-collapse:collapse; width:100%; font-size:0.8rem; } table.rep th,table.rep td,table.pay th,table.pay td { text-align:left; border-bottom:1px solid var(--line); padding:0.4rem 0.5rem; vertical-align:top; } table.rep th,table.pay th { font-size:0.62rem; font-weight:650; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); } table.pay td,table.pay th { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } table.pay td:first-child,table.pay th:first-child { text-align:left; } table.pay tr.total td { font-weight:650; border-top:2px solid var(--ink); } /* THE WHOLE PACKAGE (049). Three totals across the top, then the parts grouped under a quiet heading row. The worth-to-you figure is the one in colour: it is the number the person lives on. */ .pkgtot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem 1.4rem; margin:0 0 0.8rem; } @media (max-width:640px){ .pkgtot { grid-template-columns:1fr; } } .pkgfig { font-family:var(--display, Georgia, serif); font-size:1.45rem; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.15; } /* Green text, not the green notice box: .good is already that box elsewhere in the app. */ .pkgfig.pkgworth { color:var(--good-ink, #1E5631); } /* A PHONE STACKS EACH PART: its name, then the three figures under it with their own headings, rather than a table that scrolls sideways and hides two of the three numbers. */ @media (max-width:640px){ table.pkgtable, table.pkgtable tbody { display:block; width:100%; min-width:0; } /* It no longer scrolls, so the sideways-scroll fade every other table wrapper gets on a phone would only fade out its Edit buttons. More specific than that rule, so it wins wherever it sits. */ .paywrap:has(table.pkgtable) { overflow-x:visible; -webkit-mask-image:none; mask-image:none; } table.pkgtable tr.pkghead { display:none; } table.pkgtable tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; column-gap:0.5rem; align-items:end; padding:0.5rem 0; border-bottom:1px solid var(--line); } table.pkgtable td { border-bottom:none; padding:0.05rem 0; text-align:left; white-space:normal; } table.pkgtable td:first-child { grid-column:1 / -1; font-weight:600; margin-bottom:0.15rem; } table.pkgtable td[data-l]::before { content:attr(data-l); display:block; font-size:0.64rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; } table.pkgtable tr.pkggroup { display:block; border-bottom:none; padding-bottom:0; } table.pkgtable tr.total { border-top:2px solid var(--ink); } table.pkgtable tr.total td { border-top:none; } } table.pay tr.pkggroup td { text-align:left; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding-top:0.7rem; border-bottom:none; } table.pkgtable td:last-child { width:1%; } /* INCENTIVES (051). The deals and the scorecard stack on a phone the way the package does: the name, then each figure under its own heading, so nothing scrolls sideways. --cols is set on the table. */ .pkgtot.two { grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:640px){ .pkgtot.two { grid-template-columns:1fr 1fr; } /* Three figures that belong together stay side by side on a phone, a size down, not one a row. */ .pkgtot.three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.6rem 0.7rem; } .pkgtot.three .pkgfig { font-size:1.1rem; } table.inctable, table.inctable tbody { display:block; width:100%; min-width:0; } .paywrap:has(table.inctable) { overflow-x:visible; -webkit-mask-image:none; mask-image:none; } table.inctable tr:first-child { display:none; } table.inctable tr { display:grid; grid-template-columns:repeat(var(--cols, 3),minmax(0,1fr)) auto; column-gap:0.5rem; align-items:end; padding:0.5rem 0; border-bottom:1px solid var(--line); } table.inctable td { border-bottom:none; padding:0.05rem 0; text-align:left; white-space:normal; } table.inctable td:first-child { grid-column:1 / -1; font-weight:600; margin-bottom:0.15rem; } table.inctable td[data-l]::before { content:attr(data-l); display:block; font-size:0.64rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; } } table.inctable td:last-child { width:1%; } /* A lapsed plan's Your Career (careerReadOnly): the note says why nothing can be changed. */ .careerronote { border-color:var(--accent); background:var(--accent-soft); } /* LEAVE (052). The law it is worked out under sits at the top, quiet, on every visit. */ .leavelaw { background:var(--accent-soft); border-color:var(--soft-line, #CDDEE0); } .incsum { margin-top:0.1rem; padding:0.6rem 0.75rem; border-radius:8px; background:var(--accent-soft); font-weight:600; font-variant-numeric:tabular-nums; } .incgrant { padding:0.6rem 0; border-top:1px solid var(--line); display:grid; gap:0.2rem; } /* SECOND JOB AND TAX CODES (050). The code picker sits in the table, so it is kept narrow; the advice reads as separate points, each with its own space. */ table.taxjobs select { width:auto; min-width:7.5rem; } /* A four-column table that fits a phone, so the sideways-scroll fade would only hide its Edit buttons. */ .paywrap:has(table.taxjobs) { -webkit-mask-image:none; mask-image:none; } table.taxjobs td:first-child { white-space:normal; } .taxtips > div + div { margin-top:0.6rem; padding-top:0.6rem; border-top:1px solid var(--line); } /* THE DEDUCTIONS READ AS A BLOCK. Four rows that looked identical to the gross figure above them are now a tinted band with its own subtotal, so the question people actually have ("where did it go, and how much of it") is answered by the shape of the table before anyone reads a number. */ table.pay tr.gross td { font-weight:650; } table.pay tr.dedhead td { background:var(--out-soft); border-bottom:none; padding:0.5rem 0.5rem 0.15rem; font-size:0.62rem; font-weight:650; text-transform:uppercase; letter-spacing:0.06em; color:var(--out); text-align:left; } table.pay tr.ded td { background:var(--out-soft); color:var(--out); border-bottom-color:var(--out-line); } table.pay tr.ded td:first-child { color:var(--muted); padding-left:1.15rem; } table.pay tr.dedtotal td { font-weight:650; border-top:1px solid var(--out-line); } table.pay tr.dedtotal td:first-child { color:var(--out); } .paywrap { overflow-x:auto; } /* The ends of an advertised range. The midpoint is marked because it is the row the itemised breakdown underneath is modelling, so the two read as one answer rather than two. */ .rangemonthly .rm-net { font-weight:700; font-variant-numeric:tabular-nums; } .rangemonthly .rm-mid td { background:var(--good-bg); } .rangemonthly .rm-asked td, .rangemonthly .rm-offered td { border-top:1px solid var(--line); } .rangemonthly .rm-asked td:first-child, .rangemonthly .rm-offered td:first-child { font-weight:650; } /* Amounts line up in a column whether or not they are in a table. */ input.moneyin { font-variant-numeric:tabular-nums; } .contact { background:var(--contact-bg); border:1px solid var(--line); border-radius:5px; padding:0.55rem 0.75rem; margin:0.45rem 0; } .contact .who { font-weight:650; } .contact .meta { font-size:0.76rem; color:var(--muted); } .timeline { list-style:none; margin:0.4rem 0 0; padding:0; } .timeline li { position:relative; padding:0 0 0.75rem 1.3rem; border-left:1px solid var(--line); margin-left:0.4rem; } .timeline li::before { content:""; position:absolute; left:-4px; top:0.4rem; width:7px; height:7px; border-radius:50%; background:var(--muted); } .timeline .when { font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); } details.adder { margin-top:0.55rem; } details.adder > summary { cursor:pointer; list-style:none; display:inline-block; font-weight:550; font-size:0.78rem; color:var(--accent); border:1px solid var(--input-line); border-radius:5px; padding:0.28rem 0.7rem; background:#fff; } details.adder > summary:hover { border-color:var(--accent); } details.adder > summary::-webkit-details-marker { display:none; } details.adder[open] > summary { margin-bottom:0.4rem; background:var(--accent-soft); border-color:var(--accent); } details.plain > summary { cursor:pointer; font-weight:600; font-size:0.82rem; } /* A FOLDED SECTION (John Parker's review, 20 September 2026: "its mad admin applying for a job, hard to want to also do a second version of admin. I think you could cut the actionable fields in this page to a handful of key things"). Every field is still in the page and still saved; what changes is how many of them a person has to look at on the day they add a job. A fold inside a card separates itself with a rule; a fold that IS a card wears the card's border and puts what used to be the h3 into its summary. */ details.fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.45rem; font-size:0.7rem; font-weight:650; text-transform:uppercase; letter-spacing:0.09em; color:var(--muted); } details.fold > summary::-webkit-details-marker { display:none; } details.fold > summary::after { content:"+"; color:var(--accent); font-size:0.95rem; line-height:1; } details.fold[open] > summary::after { content:"\2212"; } details.fold > summary:hover { color:var(--accent); } details.fold > summary small { font-weight:400; text-transform:none; letter-spacing:0; font-size:0.78rem; } /* On a phone the note goes under its heading: beside it, "JOB DESCRIPTION" broke over two lines next to two lines of note (phone audit, 4 October 2026). The plus or minus stays at the end of the heading's line. */ @media (max-width:599px) { details.fold > summary { flex-wrap:wrap; row-gap:0.15rem; } details.fold > summary small { order:2; flex:1 0 100%; } details.fold > summary::after { order:1; margin-left:auto; } } .card > details.fold { border-top:1px solid var(--line); margin:0.75rem 0 0; padding-top:0.6rem; } details.fold.card > summary { margin:0; } details.fold > .grid2, details.fold > .grid3, details.fold > textarea { margin-top:0.65rem; } /* The hidden-pay card, which is the answer to the question people ask first. */ .paycard { border:1px solid var(--accent); border-radius:var(--radius); background:var(--accent-soft); padding:0.7rem 0.85rem; margin:0.75rem 0 0; } .paycard .pt { font-weight:650; font-size:0.95rem; margin-bottom:0.25rem; } .paycard p { margin:0 0 0.6rem; font-size:0.84rem; } /* Native controls (range sliders, checkboxes, radio buttons, progress) in the brand green rather than the browser's blue, which appears nowhere else in the palette (front-end audit S13, 14 September 2026). accent-color inherits, so one declaration covers the page. */ html { accent-color:var(--accent); } .bar { display:flex; height:4px; border-radius:2px; overflow:hidden; background:var(--bar-bg); margin:0.45rem 0; } .bar i { display:block; height:100%; background:var(--bar-fill); } hr { border:none; border-top:1px solid var(--line); margin:0.9rem 0; } /* THE BOARD SCROLLS SIDEWAYS, AND SAYS SO (the 21 September audit). In the split view the board gets about 720px and holds 1,000px of columns, so Offer and Closed sat off the right edge with no scrollbar drawn and nothing to suggest there was more. The fade is the cue; the always-drawn scrollbar is the handle. Both come off when there is nothing hidden, because a fade over a board that already fits is just a smudge. */ .board { display:flex; gap:0.5rem; overflow-x:auto; align-items:stretch; padding:0.2rem 0 0.6rem; scrollbar-width:thin; scroll-snap-type:x proximity; } .board::-webkit-scrollbar { height:10px; } .board::-webkit-scrollbar-thumb { background:#C7CCD2; border-radius:5px; } .board::-webkit-scrollbar-track { background:#F1F2F4; border-radius:5px; } .boardwrap { position:relative; } .boardwrap::after { content:""; position:absolute; top:0; right:0; bottom:10px; width:34px; pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), var(--paper)); opacity:0; transition:opacity 0.15s ease; } .boardwrap.more::after { opacity:1; } .bcol { scroll-snap-align:start; } .bcol { flex:1 1 180px; min-width:172px; max-width:340px; background:#F7F8F9; border:1px solid var(--line); border-radius:6px; padding:0.4rem 0.45rem; } .bcol.dragover { outline:2px dashed var(--accent); outline-offset:-2px; } /* LIST AND BOARD TOGETHER (James, 16 September 2026), which is the default. The list kept the left third of a wide screen and left the rest empty, so the board now fills it and both are live at once. Below 1100px there is no room for two, so the board half stands down and the list runs full width; the switcher still opens the board on its own. */ .jsplit { display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr); gap:1rem; align-items:start; } .jsplit .board { padding-top:0; } /* The list is far longer than the board, so the board stays put while you scroll the list. */ .jsplit-board { position:sticky; top:0.6rem; max-height:calc(100vh - 1.2rem); overflow:visible; } /* THE SCROLLBAR ON SCREEN (audit 3, N3, 26 September 2026). The board scrolled inside this sticky box, so its sideways scrollbar sat under the tallest column, off the bottom of the screen, and Offer and Closed looked cut off rather than scrollable. The board now keeps to the screen's height itself, so the scrollbar is always drawn in view, under the fade that says there is more. */ .jsplit .board { max-height:calc(100vh - 1.8rem); overflow:auto; } .jsplit-board .stagebar { display:none; } @media (max-width:1100px){ .jsplit { display:block; } .jsplit-board { display:none; } } /* THE UPLOAD FORM (James, 16 September 2026). Three fields in a two-column grid inside a full-width card left "What it is" stretched across most of the screen to hold the word "CV", with the file button stranded beside it. Each field now takes the room it needs, the row wraps as the screen narrows, and the whole form stops at a readable width. */ /* NOT auto-fit. A file input renders a button and the chosen filename beside it, so it needs about twice the width of a select; auto-fit gave them equal tracks and a real filename ran under its neighbour. Explicit tracks, with the file field given the room it actually needs. */ /* The name gets the most room (James, 28 September 2026: "anything that has a name shouldn't have that small a box when there is so much space to the right"). No max-width: the row uses the width it has. */ .docform { display:grid; gap:0.6rem 0.9rem; grid-template-columns:minmax(0,1.5fr) minmax(0,0.9fr) minmax(0,2.4fr) auto; align-items:end; margin-top:0.7rem; } /* The virus check while an upload is in flight (James, 28 September 2026: show it, and take the few seconds). */ .docscan { margin-top:0.7rem; padding:0.6rem 0.75rem; border:1px solid var(--line); border-radius:6px; background:var(--surface); } .docscan .aibar { margin-top:0.35rem; } .docform label { display:block; } .docform .btn { width:100%; } /* A filename can be longer than any track, so it shrinks rather than pushing the row apart. */ .docform input[type="file"] { max-width:100%; font-size:0.85rem; } @media (max-width:980px){ .docform { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (max-width:640px){ .docform { grid-template-columns:1fr; } .docform .btn { width:auto; } } .bcol h4 { margin:0.15rem 0.2rem 0.35rem; font-size:0.6rem; font-weight:650; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); display:flex; justify-content:space-between; } .bcard { background:#fff; border:1px solid var(--line); border-radius:5px; padding:0.45rem 0.55rem; margin:0.3rem 0; cursor:pointer; } .bcard:hover { border-color:#A9AEB5; } .bcard .t { font-weight:600; font-size:0.8rem; line-height:1.35; } .bcard .m { font-size:0.72rem; color:var(--muted); margin-top:0.1rem; } /* An interview prep pack runs to a page and a half, and a ten-line box turned it into a peephole you had to scroll through in slices (James, 20 September 2026). It now opens at the height of the thing it holds, capped so it never runs past the screen, and can still be dragged. */ .coachout textarea { width:100%; min-height:34rem; max-height:calc(100vh - 12rem); resize:vertical; font-family:ui-monospace,Consolas,monospace; font-size:0.78rem; line-height:1.45; background:#FAFAFB; } @media (max-width:939px) { .coachout textarea { min-height:22rem; } } /* THE SCAM CHECK'S RESULT (James, 25 September 2026): the verdict first, in a colour that says it without alarm, then each sign with the ad's own words under it, then what to do next. The card stays white so the muted text keeps its contrast; the colour is the bar down its left side. */ .scamline { margin-top:0.35rem; } .scamline .linkish { font-size:inherit; } .scamwhy { margin-top:0.3rem; } .scamlocked .pill { margin-left:0.25rem; font-size:0.62rem; } .scamcard { margin-top:0.7rem; padding:0.6rem 0.75rem 0.65rem; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:6px; background:#FFFFFF; overflow-wrap:anywhere; } .scamcard.scam-none { border-left-color:var(--good-ink); } .scamcard.scam-caution { border-left-color:var(--warn); } .scamcard.scam-high { border-left-color:var(--danger); } .scamhead { margin-bottom:0.25rem; } .scamverdict { font-weight:650; font-size:0.95rem; } .scam-none .scamverdict { color:var(--good-ink); } .scam-caution .scamverdict { color:var(--warn); } .scam-high .scamverdict { color:var(--danger); } .scamcard h4 { margin:0.75rem 0 0.25rem; font-size:0.84rem; } .scamcard h4 small { font-weight:500; color:var(--muted); } .scamcard ul, .scamcard ol { margin:0; padding-left:1.1rem; } .scamcard li { margin:0.3rem 0; font-size:0.82rem; } .scamquote { margin-top:0.12rem; font-style:italic; } .scamsend { margin:0.3rem 0; padding-left:1.1rem; } .mback { position:fixed; inset:0; background:rgba(26,29,33,0.4); z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem 1rem; } /* No padding at the foot: the sticky action row IS the foot. With padding there, the row stuck that far above the bottom edge and the text scrolling under it showed through the gap. */ .mbox { background:#fff; border-radius:8px; padding:1.05rem 1.15rem 0; max-width:430px; width:100%; max-height:88vh; overflow:auto; border:1px solid var(--line); box-shadow:0 12px 32px rgba(26,29,33,0.22); position:relative; } .mbox.wide { max-width:560px; } /* A dialog that is a form of two columns (James, 28 September 2026: "some names and organisations are large so the text would get hidden"). At 430px each box held about twenty characters. */ .mbox.form { max-width:860px; } .mtitle { font-weight:650; font-size:0.98rem; margin-bottom:0.5rem; } .toastroot { position:fixed; left:50%; bottom:calc(1.1rem + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:59; display:flex; flex-direction:column; gap:0.35rem; align-items:center; } .toastmsg { background:var(--ink); color:#fff; font-size:0.8rem; font-weight:500; padding:0.45rem 0.85rem; border-radius:6px; box-shadow:0 4px 14px rgba(26,29,33,0.3); transition:opacity 0.3s ease; white-space:normal; text-align:center; max-width:min(92vw,420px); } .toastmsg.out { opacity:0; } .tierchip { appearance:none; cursor:pointer; border:1px solid var(--line); background:#F7F8F9; color:var(--label-ink); font-size:0.66rem; font-weight:600; border-radius:4px; padding:0.2rem 0.5rem; white-space:nowrap; } .tierchip:hover { border-color:#A9AEB5; } /* Previewing is a state somebody put the app into, so the chip stops looking like a quiet label and starts looking like something switched on. */ .tierchip.previewing { background:var(--warn-soft,#FAF4E6); border-color:var(--warn-line,#E8DCC0); color:var(--warn,#8F5F08); font-weight:700; } .tierchip.previewing:hover { border-color:var(--warn,#8F5F08); } /* "AI: 32 left" beside the plan chip (25 September 2026): the same quiet size, a link to the meter. */ .aichip { appearance:none; cursor:pointer; font-family:inherit; display:inline-block; margin-left:0.3rem; font-size:0.66rem; font-weight:600; border-radius:4px; padding:0.2rem 0.5rem; border:1px solid var(--line); background:#F7F8F9; color:var(--label-ink); text-decoration:none; white-space:nowrap; } .aichip:hover { border-color:#A9AEB5; } .aichip.low { background:var(--warn-soft,#FAF4E6); border-color:var(--warn-line,#E8DCC0); color:var(--warn,#8F5F08); } /* The AI meter, first on Subscription (25 September 2026). */ /* Every wait on the AI (25 September 2026): a bar timed to the action, with the seconds counted down. */ .aibar { margin:0.6rem 0 0.2rem; } .aibar-track { height:8px; border-radius:999px; background:var(--bar-bg); overflow:hidden; } .aibar-fill { height:100%; width:0; border-radius:999px; background:var(--bar-fill); transition:width 0.25s linear; } .aibar-row { display:flex; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; margin-top:0.3rem; font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion: reduce) { .aibar-fill { transition:none; } } .cvm-rtw { margin-top:0.7rem; display:grid; gap:0.25rem; } .cvm-rtw select { max-width:26rem; } .rtwset { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 14rem); gap:0.3rem 1rem; align-items:end; margin:0.6rem 0; } .rtwset > .tiny { grid-column:1 / -1; } .rtwset > [hidden] { display:none; } @media (max-width: 560px) { .rtwset { grid-template-columns:1fr; } } .aicard { margin:0 0 0.8rem; } .aicard .aim-top { display:flex; justify-content:space-between; align-items:flex-end; gap:0.8rem; flex-wrap:wrap; } .aicard .aim-num { font-size:1.15rem; margin-top:0.2rem; } .aicard .aim-num b { font-size:1.6rem; } .aicard .bar { height:8px; border-radius:4px; } .aicard.low { border-color:var(--warn-line,#E8DCC0); background:var(--warn-soft,#FAF4E6); } /* ===================== WAYS OF USING IT ===================== Each of these is a body class set by applyWays(). Nothing here changes a record; it changes what a person sitting in a particular place can stand to have on their screen. */ /* SHOULDER MODE. The values blur, the furniture does not: you can still navigate, and what you point at or type in comes back at once. A filter rather than a colour, because a redaction you can select and copy is not a redaction. */ body.shoulder .priv, body.shoulder #view input, body.shoulder #view textarea, body.shoulder #view select, body.shoulder .nawho, body.shoulder .contact .meta, body.shoulder .bcard .bmeta, body.shoulder #searchPicker { filter:blur(5px); transition:filter 0.12s ease; } body.shoulder .priv:hover, body.shoulder .priv:focus-within, body.shoulder #view input:focus, body.shoulder #view textarea:focus, body.shoulder #view select:focus, body.shoulder .card:hover .priv, body.shoulder .card:hover .nawho, body.shoulder .card:hover .contact .meta, body.shoulder .card:focus-within input, body.shoulder .card:focus-within textarea, body.shoulder .card:focus-within select, body.shoulder .card:hover input, body.shoulder .card:hover textarea, body.shoulder .card:hover select, body.shoulder .bcard:hover .bmeta, body.shoulder #searchPicker:hover, body.shoulder #searchPicker:focus { filter:none; } @media print { body.shoulder .priv, body.shoulder #view input, body.shoulder #view textarea, body.shoulder #view select { filter:none; } } /* THE COVER, for the moment somebody walks up behind you. Escape puts it there, Escape takes it away, and it says as little as the tab does. */ .screencover { position:fixed; inset:0; z-index:95; background:#F3F4F6; display:flex; align-items:center; justify-content:center; cursor:pointer; } .screencover .sc-inner { text-align:center; color:#9AA1AA; font-size:0.9rem; display:grid; gap:0.3rem; } .screencover strong { font-size:1.1rem; color:#6B727B; font-weight:600; } /* READING COMFORT. One token set each, so every size and colour in the app follows. */ body.comfort-large { font-size:1.12rem; } body.comfort-large .tiny { font-size:0.85rem; } body.comfort-large .small { font-size:0.95rem; } body.comfort-large input, body.comfort-large select, body.comfort-large textarea, body.comfort-large .btn { font-size:1rem; min-height:46px; } body.comfort-contrast { --muted:#33383E; --line:#8A9099; --soft-line:#8A9099; --ink:#000; } body.comfort-contrast .tiny, body.comfort-contrast .small, body.comfort-contrast .muted { color:#33383E; } body.comfort-contrast .card { border-width:2px; } body.comfort-still *, body.comfort-still *::before, body.comfort-still *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } /* SIMPLE OR EVERYTHING, in the header on every screen (James, 20 September 2026). Two buttons in one housing: the one you are in is filled, so the mode is readable rather than inferred. It sits in the dark chrome, so its colours come from the chrome variables, not the page ones. */ .modeswitch { display:inline-flex; border:1px solid var(--chrome-line, rgba(255,255,255,0.28)); border-radius:999px; overflow:hidden; margin-left:0.5rem; } .modebtn { appearance:none; cursor:pointer; background:none; border:0; color:var(--chrome-muted); font:inherit; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; padding:0.22rem 0.62rem; min-height:32px; } .modebtn:hover { color:var(--chrome-ink); } .modebtn.on { background:var(--chrome-ink, #fff); color:var(--chrome, #123); } .modebtn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } /* On a phone the header has no room for it: the phone bar's More menu carries it instead. */ @media (max-width:599px) { .modeswitch { display:none; } } .bellbtn { appearance:none; cursor:pointer; background:none; border:none; color:var(--chrome-muted); position:relative; padding:0.2rem 0.3rem; } .bellbtn:hover { color:var(--chrome-ink); } .bellcount { display:none; position:absolute; top:-3px; right:-4px; background:var(--danger); color:#fff; font-size:0.56rem; font-weight:700; min-width:13px; height:13px; border-radius:7px; align-items:center; justify-content:center; padding:0 3px; } .bellpanel { display:none; position:fixed; top:3.1rem; left:0.8rem; width:360px; max-width:94vw; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(26,29,33,0.18); z-index:55; max-height:60vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); } .bellpanel.open { display:block; } .bellhead { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.55rem 0.75rem; border-bottom:1px solid var(--line); } .bellitem { display:flex; gap:0.6rem; padding:0.6rem 0.75rem; border-bottom:1px solid var(--line); cursor:pointer; align-items:flex-start; border-left:3px solid transparent; } .bellitem:hover, .bellitem:focus-visible { background:#F7F8F9; } .bellitem:last-child { border-bottom:none; } /* The kind, as a word. Colour is never the only signal: the word says the same thing. */ .bellkind { flex:0 0 auto; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:0.15rem 0.4rem; border-radius:4px; margin-top:0.1rem; white-space:nowrap; } .belltext { display:flex; flex-direction:column; gap:0.1rem; min-width:0; } .belltext strong { font-size:0.86rem; line-height:1.3; } .bellsub { font-size:0.76rem; color:var(--muted); } .bellact { font-size:0.74rem; color:var(--muted); font-style:italic; margin-top:0.15rem; } .bellempty { padding:0.9rem 0.8rem; font-size:0.84rem; color:var(--muted); line-height:1.5; } .tone-bad { border-left-color:var(--danger); } .tone-bad .bellkind { background:var(--danger-soft); color:var(--danger); } .tone-warn { border-left-color:#8F5F08; } .tone-warn .bellkind { background:#FAF4E6; color:#8F5F08; } .tone-info { border-left-color:var(--muted); } .tone-info .bellkind { background:#F1F2F4; color:var(--muted); } .tone-good { border-left-color:var(--accent); } .tone-good .bellkind { background:var(--good-bg,#F0F7F2); color:var(--accent); } /* ONBOARDING IS THE FIRST THING ANYONE SEES, and at 520px it sat as a narrow dialog marooned in a very large empty shell, which read as a permission prompt rather than as the task. It is now the main event: a wide card, a headline at display size, and three choices sized like the decisions they are. Everything here is presentation only, the markup and the onclick handlers in renderOnboarding are untouched. */ .onboard { display:flex; justify-content:center; padding:2.4rem 0 4rem; } .obcard { background:#fff; border:1px solid var(--line); border-radius:10px; padding:2rem 2.2rem 2.2rem; max-width:820px; width:100%; } .obcard h2 { font-size:1.7rem; line-height:1.22; font-weight:650; margin-bottom:0.4rem; } .obcard .pill { font-size:0.76rem; padding:0.18rem 0.6rem; } .obcard label { font-size:0.85rem; margin-top:1.2rem; } .obcard input[type=text], .obcard select { font-size:1rem; padding:0.6rem 0.7rem; } .obopts { display:flex; flex-direction:column; gap:0.7rem; margin-top:0.55rem; } /* Each choice is a full-width target: 44px is the floor anyone quotes, and these clear it twice over, because the descriptions are the part people actually read before choosing. */ .obopt { appearance:none; cursor:pointer; display:block; width:100%; min-height:56px; text-align:left; background:#fff; border:1px solid var(--input-line); border-radius:8px; padding:0.95rem 1.1rem; font:inherit; font-size:1rem; color:var(--ink); transition:border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease; } .obopt strong { display:block; font-size:1.05rem; font-weight:650; letter-spacing:-0.01em; } .obopt:hover { border-color:var(--accent); background:var(--good-bg); box-shadow:0 1px 3px rgba(26,29,33,0.08); } /* Spelled out rather than left to the global focus-visible rule, because the border also has to move: a 2px ring against a 1px grey edge on white is easy to miss. */ .obopt:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); } .obopt:active { background:#F4F5F6; } .obopt span { display:block; font-size:0.9rem; line-height:1.5; color:var(--muted); margin-top:0.25rem; font-weight:400; } /* var(--muted) on var(--accent-soft) measures 5.5:1, so the descriptions still clear WCAG AA once a choice is selected and the ground goes tinted. */ .obopt.sel { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); } @media (max-width:599px) { .obcard { padding:1.3rem 1.1rem 1.5rem; border-radius:8px; } .obcard h2 { font-size:1.35rem; } } /* The first job, before anything else (James, 19 October 2026). Phone first: most arrivals from Facebook are on one, so the card fills the first screen and the two quieter ways out sit below the fold, as the brief asks. */ .onboard.firstjob { flex-direction:column; align-items:center; gap:1rem; } .fjcard { max-width:560px; } .fjcard .fjlead { font-size:1rem; line-height:1.55; margin:0 0 0.4rem; max-width:52ch; } .fjcard input[type=url], .fjcard input[type=text] { width:100%; font-size:1.05rem; padding:0.75rem 0.8rem; min-height:48px; } .fjcard .fjsite { min-height:1.3em; margin-top:0.4rem; } .fjcard .fjerr { color:var(--danger); min-height:1.2em; margin-top:0.5rem; } .fjcard .fjsave { width:100%; min-height:52px; font-size:1.05rem; margin-top:0.6rem; } .fjafter { display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; max-width:560px; width:100%; } /* "Here to track your hours instead?" just under the heading, in the first screen (James, 20 October 2026). */ .fjcard .fjhours { margin:-0.35rem 0 0.6rem; } .fjafter .linkbtn, .fjhours .linkbtn { appearance:none; background:none; border:0; padding:0.6rem 0.2rem; min-height:44px; font:inherit; font-size:0.95rem; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .fjhours .linkbtn { padding:0.45rem 0; text-align:left; } .fjafter .linkbtn:focus-visible, .fjhours .linkbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @media (max-width:599px) { .onboard.firstjob { padding-top:0.8rem; } /* Tall enough that the two quieter ways out start below the first screen on any phone, header and all. */ .fjcard { min-height:calc(100svh - 3rem); } } /* As many columns as there are plans: two, or three once the Career plan is offered (22 September 2026). */ .tierbox { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0.6rem; } @media (max-width:540px){ .tierbox { grid-template-columns:1fr; } } .tier { border:1px solid var(--line); border-radius:6px; padding:0.65rem 0.8rem; } .tier.hot { border-color:var(--accent); } .tier .price { font-size:1.35rem; font-weight:650; margin:0.15rem 0; } .tier ul { margin:0.4rem 0 0; padding-left:1.1rem; } .jobstable select, .jobstable input { padding:0.22rem 0.35rem; font-size:0.78rem; border-radius:4px; } .jobstable td { vertical-align:middle; } /* Kete, the decision toolkit */ .ktool { border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; margin:0.7rem 0; } .ktool h4 { margin:0 0 0.2rem; font-size:1.02rem; letter-spacing:-0.01em; } .ktool p { margin:0.2rem 0 0.8rem; color:var(--muted); font-size:0.86rem; } .kfrow { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; padding:0.45rem 0; border-bottom:1px solid var(--line); } .kfrow:last-child { border-bottom:none; } .kfl { flex:1 1 180px; min-width:150px; } .kfl b { display:block; font-size:0.85rem; font-weight:650; } .kfl span { font-size:0.71rem; color:var(--muted); } .kbtns { display:flex; gap:0.25rem; flex-wrap:wrap; } .kbtn { appearance:none; cursor:pointer; font:inherit; font-size:0.71rem; font-weight:600; border:1px solid var(--input-line); background:#fff; color:var(--label-ink); border-radius:5px; padding:0.26rem 0.5rem; } .kbtn:hover { border-color:#A9AEB5; } .kbtn.on { background:var(--accent); border-color:var(--accent); color:#fff; } .kscore { display:flex; align-items:baseline; gap:0.5rem; } .kscore b { font-size:2rem; font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } .kbar { height:6px; border-radius:3px; background:var(--bar-bg); overflow:hidden; margin:0.4rem 0; } .kbar i { display:block; height:100%; background:var(--bar-fill); } .kchip { display:inline-block; font-size:0.7rem; font-weight:600; background:var(--accent-soft); color:var(--accent); border:1px solid var(--soft-line,#CDDEE0); border-radius:4px; padding:0.12rem 0.45rem; margin:0.15rem 0.2rem 0 0; } /* CV Match and Tailor my CV (25 September 2026). Long CV lines and quotes wrap anywhere, so nothing pushes a phone sideways at 390px. */ .cvm .kscore b { font-size:1.6rem; } .cvm-group { margin-top:0.8rem; } .cvm-group h4 { margin:0 0 0.3rem; font-size:0.86rem; } .cvm-group h4 small { font-weight:500; color:var(--muted); } .cvm-group ul { margin:0; padding-left:1.1rem; } .cvm-group li { margin:0.35rem 0; overflow-wrap:anywhere; } .cvm-group .pill { font-size:0.66rem; } .cvm-quote { margin-top:0.15rem; font-style:italic; } .cvm-where { margin-top:0.2rem; } .cvm-tick { display:flex; gap:0.4rem; align-items:flex-start; font-size:0.8rem; font-weight:600; margin-top:0.3rem; cursor:pointer; } .cvm-tick input { margin-top:0.15rem; flex:none; } .cvm-tailor, .cvm-run, .cvm-made { margin-top:0.8rem; } .cvm-run .cvm-why { margin-top:0.35rem; } .cvm-sends { margin-top:0.4rem; } .cvm-files { gap:0.4rem; flex-wrap:wrap; margin-top:0.4rem; } .cvm-lock { margin-top:0.4rem; } .cvm-lock .linkish { font-size:inherit; } .cvm-add { margin-top:0.45rem; } .cv-keep { overflow-wrap:anywhere; } .cvm-pick { border:0; padding:0; margin:0; } .cvm-pickrow { display:flex; gap:0.5rem; align-items:flex-start; padding:0.45rem 0; border-bottom:1px solid var(--line); cursor:pointer; overflow-wrap:anywhere; } .cvm-pickrow input { margin-top:0.2rem; flex:none; } .cvm-sendlist { margin:0.3rem 0; padding-left:1.1rem; } .cvch-all { gap:0.4rem; flex-wrap:wrap; margin:0.5rem 0; } .cvch { border:1px solid var(--line); border-radius:8px; padding:0.6rem 0.7rem; margin:0.5rem 0; overflow-wrap:anywhere; } .cvch.on { border-color:var(--good-line); } .cvch.off { opacity:0.6; } .cvch-before, .cvch-after { font-size:0.85rem; margin-top:0.25rem; } .cvch-before { color:var(--muted); } .cvch-before .tiny, .cvch-after .tiny { display:inline-block; min-width:3.2rem; font-weight:600; color:var(--muted); } .cvch-src { margin-top:0.3rem; } .cvch-choice { display:flex; gap:1rem; margin-top:0.4rem; } .cvch-choice label { display:flex; gap:0.3rem; align-items:center; font-size:0.85rem; font-weight:600; cursor:pointer; margin:0; } .cvch-preview { white-space:pre-wrap; overflow-wrap:anywhere; font-size:0.78rem; max-height:18rem; overflow:auto; background:var(--bar-bg); padding:0.5rem; border-radius:6px; } /* Tailor My CV v2 (25 September 2026): each card says what kind of change it is and the ad's own words it answers, then the line now and the suggestion side by side where there is room (stacked on a phone), the evidence, and Accept, Edit or Skip. */ .cvch-head { gap:0.5rem; align-items:center; flex-wrap:wrap; } .cvch-head .pill { font-size:0.68rem; } .cvch-ad { margin-top:0.35rem; } .cvch-pair { display:grid; gap:0.2rem 0.9rem; grid-template-columns:minmax(0,1fr); margin-top:0.2rem; } @media (min-width:700px) { .cvch-pair { grid-template-columns:repeat(2,minmax(0,1fr)); } } .cvch-pair .tiny { display:block; } .cvch-why { margin-top:0.3rem; } .cvch-edit { width:100%; margin-top:0.2rem; font:inherit; font-size:0.85rem; } .cvch-warn { margin-top:0.2rem; color:var(--warn); } .cvch-warn:empty { display:none; } .cvch-gap { background:var(--bar-bg); border-style:dashed; } .cvm-pickchild { padding-left:1.4rem; } .cvm-pickunder { padding:0.35rem 0 0 1.4rem; } .cvm-teaser { margin-top:0.5rem; } .cvm-teaser .linkish { font-size:inherit; } .cvm-moved { margin:0.2rem 0 0.3rem; font-weight:600; } .cvm-rescore { margin-top:0.6rem; } .cvm-changes { margin-top:0.6rem; } .cvm-session { margin-top:0.5rem; overflow-wrap:anywhere; } .cvm-session ul { margin:0.3rem 0 0; padding-left:1.1rem; } .cvm-session li { margin:0.3rem 0; } /* Your top 10 questions for a job (25 September 2026): each question, why, the ad's words and the notes. */ .iq-list { margin:0.5rem 0 0; padding-left:1.3rem; } .iq-list > li { margin:0 0 0.75rem; padding-bottom:0.6rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; } .iq-list > li:last-child { border-bottom:0; } .iq-q { margin-bottom:0.2rem; } .iq-q .pill { font-size:0.66rem; } .iq-quote { margin-top:0.15rem; font-style:italic; } .iq-notes { margin-top:0.3rem; } .iq-ev { margin:0.2rem 0 0; padding-left:1.1rem; } .iq-ev li { margin:0.15rem 0; } .iq-gap { margin-top:0.3rem; background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:5px; padding:0.3rem 0.5rem; } .iq-practise { margin-top:0.35rem; font-size:0.8rem; } .iq-sends { margin-top:0.4rem; } .iq-tool { margin:0.6rem 0 0.2rem; padding:0.5rem 0.65rem; border:1px solid var(--line); border-radius:6px; } .iq-tool .linkish { font-size:inherit; } .iq-toolrow { gap:0.4rem; flex-wrap:wrap; margin-top:0.4rem; } .iq-toolrow select { flex:1 1 14rem; min-width:0; } /* The company page (25 September 2026): their website, the brief, and your notes there. */ .cosite { margin:0 0 0.6rem; overflow-wrap:anywhere; } .cosite .linkish { font-size:inherit; margin-left:0.3rem; } .cosite-ask { display:inline-flex; gap:0.35rem; margin-left:0.4rem; vertical-align:middle; } .cosite-edit { gap:0.4rem; flex-wrap:wrap; margin-top:0.3rem; } .cosite-edit input { flex:1 1 14rem; min-width:0; } .conote { padding:0.45rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; } .conote:last-child { border-bottom:0; } .conote-text { white-space:pre-line; } .colinks { gap:0.4rem; flex-wrap:wrap; } .cvtool-kids { margin:0 0 0.6rem 1.2rem; } .cvtool-kids .card { margin-top:0.35rem; } .docs-kids { margin-top:0.6rem; border-top:1px solid var(--line); padding-top:0.5rem; } .docs-tailored { list-style:none; margin:0.3rem 0 0; padding:0; } .docs-tailored li { margin:0.35rem 0; overflow-wrap:anywhere; } .sentrec { font-size:0.8rem; color:var(--muted); overflow-wrap:anywhere; } /* Which side of the table a contact sits on. Blue for inside the hiring company, grey for outside it, so the row reads at a glance without reading the words. */ .pill.side { font-weight:600; } .pill.side.int { background:var(--accent-soft); color:var(--accent); border-color:var(--soft-line,#CDDEE0); } .pill.side.ext { background:#F1F2F4; color:var(--muted); border-color:var(--line); } /* Settings: the profile form and the search on the left, the short cards on the right, so a wide screen is not one narrow column of boxes with nothing beside it. */ .setgrid { display:block; } @media (min-width:1000px) { .setgrid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); column-gap:1.75rem; align-items:start; } } .about3 { display:grid; gap:0.75rem; margin-bottom:1rem; } @media (min-width:900px) { .about3 { grid-template-columns:repeat(3, minmax(0,1fr)); } } .about3 .card { margin:0; } .about3 h4 { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--accent); margin:0 0 0.5rem; } .about3 p { margin:0; font-size:0.9rem; line-height:1.55; } .jobgrid { display:block; } @media (min-width:1150px) { /* The side column scales with the screen instead of sitting at a fixed 330px, so Pipeline and Likely questions get room on a wide monitor without swamping a laptop. Not sticky: the column is taller than any viewport, and a sticky column taller than the viewport hides its own bottom until the main column runs out. */ .jobgrid { display:grid; grid-template-columns:minmax(0,1fr) clamp(340px, 34%, 560px); gap:1.25rem; align-items:start; } .jobside { align-self:start; } /* the sticky savebar rule stops at 1149px; keep Save from stretching the full column */ .savebar .btn.block { width:auto; padding-left:2.5rem; padding-right:2.5rem; } } /* ---------- mobile and touch pass ---------- */ .quickbar { display:none; } /* The stage switcher. Hidden on a pointer device, where every column is already on screen and a second way to choose one would be noise. */ .stagebar { display:none; } .bstage { display:none; width:100%; margin-top:0.35rem; } .bcard:focus-within .bstage { display:block; } .hint-coarse { display:none; } .mactions { position:sticky; bottom:0; background:#fff; margin-left:-1.15rem; margin-right:-1.15rem; padding:0.6rem 1.15rem calc(1.05rem + env(safe-area-inset-bottom)); } @supports (height:88dvh) { .mbox { max-height:88dvh; } } @media (min-width:940px) { .mback { align-items:center; padding:1rem; } } /* 16px floor: iOS Safari zooms the viewport on focus of anything smaller. !important so inline font-size styles (search picker, modal textareas) cannot undercut it. */ @media (pointer:coarse), (max-width:939px) { input, select, textarea { font-size:16px !important; } } /* large touchscreens: keep the dense jobs table dense (the iPad focus-zoom trade-off on these inputs is accepted) */ @media (pointer:coarse) and (min-width:1150px) { .jobstable select, .jobstable input { font-size:0.85rem !important; } } @media (pointer:coarse) { .btn { min-height:44px; padding:0.5rem 0.9rem; } .btn.small { min-height:44px; padding:0.4rem 0.7rem; } .kbtn { min-height:44px; padding:0.55rem 0.7rem; } .kbtns { gap:0.5rem; } .bellbtn { min-width:44px; min-height:44px; } nav.tabs button { padding:0.65rem 0.8rem; } /* 36px to look at and 44px to hit, the way .help does it, so the header row keeps its size (A3). */ .tierchip { position:relative; min-height:36px; } .tierchip::before { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); } details.adder > summary, details.plain > summary { display:flex; align-items:center; flex-wrap:wrap; gap:0.3rem; min-height:44px; } .bstage { display:block; } .hint-fine { display:none; } .hint-coarse { display:inline; } input[type=range] { -webkit-appearance:none; appearance:none; height:44px; background:transparent; padding:0; } input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:var(--bar-bg); } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--accent); border:none; margin-top:-11px; } input[type=range]::-moz-range-track { height:6px; border-radius:3px; background:var(--bar-bg); } input[type=range]::-moz-range-thumb { width:28px; height:28px; border-radius:50%; background:var(--accent); border:none; } } @media (max-width:1149px) { .quickbar { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0.55rem 0.75rem; margin:0.55rem 0; } .quickbar label { margin:0; } .quickbar select { width:auto; flex:1 1 150px; } .savebar { position:sticky; bottom:0; z-index:15; background:var(--paper); border-top:1px solid var(--line); padding:0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom)); } .savebar .btn.block { margin-top:0; } } @media (max-width:939px) { .sidelinks, .sidelinks-fold, .morefrom { display:none; } .brand small { display:none; } #searchPicker { max-width:none !important; width:100% !important; order:5; margin-top:0.35rem; } nav.tabs { scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } nav.tabs button { scroll-snap-align:start; } /* The board no longer scrolls sideways on a phone, so fading its right edge would be fading nothing. The stage bar scrolls instead and gets the hint. */ .paywrap, .stagebar { -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); } .toastroot { bottom:calc(5.5rem + env(safe-area-inset-bottom)); } } /* ---------------------------------------------------------------- the board on a phone ONE STAGE AT A TIME, chosen from a switcher that shows all of them. What this replaces: seven columns at 78vw with mandatory scroll-snap, so each stage filled the screen, reaching Closed took six swipes, and the shape of the pipeline was invisible on the one device most people use. The switcher carries every stage AND its count in a single row, so the overview is better here than it ever was, and the column below it gets the full width instead of 78% of it. */ @media (max-width:699px) { /* STICKY. You go three cards into a list of eleven and then want a different stage; scrolling back to the top to do it is the difference between a tool and a chore. The offset matches the app header so it parks under it rather than over it. */ .stagebar { display:flex; gap:0.35rem; overflow-x:auto; padding:0.5rem 0; position:sticky; top:0; z-index:8; background:var(--paper,#fff); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; scrollbar-width:none; } .stagebar::-webkit-scrollbar { display:none; } .stagechip { appearance:none; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; gap:0.4rem; min-height:44px; padding:0 0.8rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font:inherit; font-size:0.84rem; font-weight:600; white-space:nowrap; } .stagechip .scount { font-variant-numeric:tabular-nums; font-size:0.76rem; font-weight:700; background:var(--chip,#F1F2F4); color:var(--muted); border-radius:999px; padding:0.05rem 0.4rem; min-width:1.4em; text-align:center; } .stagechip.empty { opacity:0.62; } .stagechip.on { background:var(--accent); border-color:var(--accent); color:#fff; } .stagechip.on .scount { background:rgba(255,255,255,0.22); color:#fff; } /* One column, full width, no horizontal scrolling at all. */ .board { display:block; overflow-x:visible; scroll-snap-type:none; } .bcol { display:none; min-width:0; max-width:none; background:transparent; border:none; padding:0; } .bcol.is-shown { display:block; } /* On a phone one lane fills the screen, so it is not drawn as a box; its cards keep their stage's edge. */ .bcol[class*="st-"] { background:transparent; border:none; } /* The column heading is redundant now: the chip above says the same thing and is lit. */ .bcol h4 { display:none; } /* Cards are the content now, so they get content sizing rather than column sizing. */ .bcard { padding:0.7rem 0.8rem; margin:0 0 0.5rem; border-radius:8px; } .bcard .t { font-size:0.95rem; line-height:1.35; } .bcard .m { font-size:0.84rem; margin-top:0.15rem; } /* The control that actually works on a touchscreen, made to look like it. A native select is deliberate: it opens the operating system's own picker, which is large, scrollable and accessible, and beats anything reimplemented in a div. */ .bstage { display:flex; align-items:center; gap:0.5rem; margin-top:0.55rem; border-top:1px solid var(--line); padding-top:0.5rem; } .bstage > span { font-size:0.74rem; font-weight:650; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); flex:0 0 auto; } .bstage select { flex:1 1 auto; min-height:44px; padding:0.3rem 0.55rem; border:1px solid var(--line); border-radius:7px; background:#fff; font:inherit; font-size:0.88rem; } /* The likely move, as one tap. Full width because it is the primary action on the card and a thumb should not have to aim. */ .bquick { appearance:none; cursor:pointer; display:block; width:100%; min-height:44px; margin-top:0.55rem; padding:0 0.8rem; border-radius:7px; border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-size:0.88rem; font-weight:650; } .bquick:active { background:var(--accent-hover); } /* Secondary once the obvious move has its own button. */ .bstage { border-top:none; padding-top:0.35rem; } .bstage > span { font-size:0.7rem; } /* A card is a tap target first. */ .bcard { box-shadow:0 1px 2px rgba(26,29,33,0.05); } .bcard:active { background:#FAFAFB; } } /* Room for a thumb at the bottom of a long stage, above the floating add button. */ @media (max-width:699px) { .bcol.is-shown { padding-bottom:4.5rem; } } @media (max-width:599px) { .tiny { font-size:0.79rem; } .stat span, table.rep th, table.pay th, .bcol h4, .timeline .when { font-size:0.69rem; } .pill, .tierchip { font-size:0.72rem; } .obnav { flex-direction:column; align-items:stretch; } .obnav .btn { width:100%; } .obnav .btn.primary { order:-1; } .obnav .btn.obback { order:9; } .obnav .grow { display:none; } } /* Four tiles in a row left each label 55 to 62px on a phone, so "interviewing" broke mid-word, and before that ran into "offers". Two by two, every label sits on one line. Every .stats block has four tiles, which is what the border rules below assume. */ @media (max-width:599px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat:nth-child(2n) { border-right:none; } .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); } } /* ------------------------------------------------------------ front-end audit, part 2 per tab */ /* A link in running text is the brand green, not the browser's blue. Anything with a class of its own (buttons, the sidebar, cards) sets its colour more specifically and is unaffected. */ a { color:var(--accent); } /* The one-tap stage move on a desktop card. Its styles only existed in the phone layout, so on a wide screen it drew as the browser's own grey button with a black border. */ @media (min-width:700px) { .bquick { appearance:none; display:inline-block; margin-top:0.35rem; padding:0.16rem 0.5rem; font:inherit; font-size:0.72rem; font-weight:600; color:var(--accent); background:var(--surface); border:1px solid var(--line); border-radius:5px; cursor:pointer; } .bquick:hover { border-color:var(--accent); } } /* Labels a screen reader needs and a sighted person does not. People and Companies used this class without it being defined, so their labels drew as block labels and pushed each filter onto a row of its own. */ .visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* One filter row that flows. It used to be four fixed columns, which was right when there were four controls and wrong the moment a tab had six: auto-fit lets each tab put as many slicers in the row as it needs, and wraps to a second row rather than squeezing them. */ .pfilters { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:0.5rem; align-items:center; margin:0 0 0.7rem; } .pfilters input, .pfilters select { margin:0; width:100%; } /* On a phone the slicers pair up rather than stacking one per row: six controls in one column is most of a screen before any results appear. The search box keeps the full width because its placeholder is a sentence. */ @media (max-width:699px) { .pfilters { grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.45rem; } .pfilters input[type="search"] { grid-column:1 / -1; } .pfilters .btn { grid-column:1 / -1; } } /* The jobs toolbar: a search box wide enough for its own placeholder, and the three views as one segmented control that never splits across two lines. */ .jobbar { display:flex; flex-wrap:wrap; gap:0.55rem; align-items:center; margin:0.4rem 0 0.6rem; } .jobbar input[type=search] { flex:1 1 260px; max-width:44rem; min-width:0; margin:0; } .jobbar .seg { margin-left:auto; } /* Accepted and Closed fold to a narrow strip on a wide screen, so the five working stages fit without scrolling and the whole pipeline is still on the board. A phone shows one stage at a time from the chips above it, so none of this applies there. */ .bfold, .bhide { display:none; } @media (min-width:700px) { .bcol.folded { flex:0 0 2.9rem; min-width:2.9rem; max-width:2.9rem; padding:0.35rem 0.2rem; } .bcol.folded > :not(.bfold) { display:none; } .bcol.folded .bfold { display:flex; } .bfold { flex-direction:column; align-items:center; gap:0.5rem; width:100%; min-height:12rem; padding:0.3rem 0; appearance:none; background:none; border:0; border-radius:4px; cursor:pointer; font:inherit; color:var(--muted); } .bfold .bfl { writing-mode:vertical-rl; transform:rotate(180deg); font-size:0.64rem; font-weight:650; text-transform:uppercase; letter-spacing:0.08em; } .bfold .bfc { font-size:0.74rem; font-weight:700; color:var(--ink); } .bfold:hover .bfl, .bfold:focus-visible .bfl { color:var(--accent); } .bhide { display:inline; appearance:none; background:none; border:0; padding:0; margin-left:0.35rem; font:inherit; font-size:0.62rem; font-weight:600; color:var(--accent); cursor:pointer; text-transform:none; letter-spacing:0; text-decoration:underline; } } /* Dragging is a mouse gesture. Below 700px the board is one stage at a time, so the hint is the tap and swipe one whatever the pointer is. */ @media (max-width:699px) { .hint-fine { display:none; } .hint-coarse { display:inline; } } /* The funnel drawn as a flow. On a phone the drawing is replaced by the same flow told one stage per row, top to bottom (.flowlist), because a sideways-scrolling drawing cut its labels mid-word (A11). */ .flowwrap { overflow-x:auto; margin:0.2rem 0 0.9rem; padding:0.75rem 0.8rem 0.6rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); } .flowcap { font-size:0.68rem; font-weight:650; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin:0 0 0.5rem; } .flow { display:block; width:100%; min-width:620px; height:auto; } .flowlist { display:none; } @media (max-width:699px) { .flow { display:none; } .flowlist { display:block; } .flowwrap { overflow-x:visible; } } .fl-top { font-size:0.95rem; } .fl-top b { font-size:1.15rem; font-variant-numeric:tabular-nums; } .fl-row { margin-top:0.85rem; } .fl-of { font-size:0.8rem; color:var(--muted); margin:0 0 0.3rem; } .fl-bar { display:flex; height:0.85rem; border-radius:4px; overflow:hidden; background:var(--bar-bg); } .fl-bar span { display:block; min-width:4px; } .fl-bar span + span { box-shadow:inset 2px 0 0 #FFFFFF; } .fl-keys { list-style:none; margin:0.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.2rem 0.95rem; font-size:0.86rem; } .fl-keys li { display:inline-flex; align-items:center; gap:0.35rem; } .fl-keys i { display:inline-block; flex:0 0 auto; width:0.72rem; height:0.72rem; border-radius:2px; } .fl-keys b { font-variant-numeric:tabular-nums; } .fl-go { background:#14503C; } .fl-live { background:#8D959F; } .fl-closed { background:#B68E3D; } .flow text { font-family:inherit; } .flownote { font-size:0.76rem; color:var(--muted); margin:0.45rem 0 0; } /* ------------------------------------------------------------ graphics that answer a question */ /* CONTRAST, 15 SEPTEMBER 2026. A mark that carries meaning holds 3:1 against the ground it sits on (WCAG 2.2 SC 1.4.11). Where darkening a fill would make two kinds look alike, the fill stays light and gets a darker outline instead, which is what carries the contrast. Checked by scripts/contrast.mjs. */ /* Every one of these has its words beside it: a sentence, a legend with the figures, or a label a screen reader reads. None needs a library, and none sends anything anywhere. */ .gfx-cap { font-size:0.68rem; font-weight:650; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin:0.95rem 0 0.35rem; } .gfx-say { font-size:0.84rem; margin:0.4rem 0 0; } .gfx-legend { display:flex; flex-wrap:wrap; gap:0.25rem 0.9rem; margin:0.45rem 0 0; font-size:0.75rem; color:var(--muted); } .gfx-legend > span { display:inline-flex; align-items:center; gap:0.35rem; } .gfx-legend i { display:inline-block; flex:0 0 auto; width:0.72rem; height:0.72rem; border-radius:2px; } .gfx-legend b { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; } /* The offer against the advertised range. */ .rangebar { position:relative; padding-bottom:1.8rem; } .rb-track { position:relative; height:10px; border-radius:5px; background:var(--bar-bg); margin:0 10px; } .rb-band { position:absolute; top:0; bottom:0; border-radius:5px; background:#BFDCCB; box-shadow:inset 0 0 0 1.5px #4E8A70; } .rb-mid { position:absolute; top:-6px; bottom:-6px; width:0; border-left:2px dashed #164E52; transform:translateX(-1px); } .rb-stem { position:absolute; bottom:50%; width:0; border-left:1px solid #8D959F; } .rb-dot { position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; box-sizing:border-box; z-index:2; } .rb-dot.asked, .lg-asked { background:#fff; border:3px solid #5A6169; } .rb-dot.counter, .lg-counter { background:#fff; border:3px solid #8F5F08; } .rb-dot.offered, .lg-offered { background:#14503C; border:2px solid #fff; box-shadow:0 0 0 1px #14503C; } .rb-dot.accepted, .lg-accepted { background:var(--ink,#201e1d); border:2px solid #fff; box-shadow:0 0 0 1px var(--ink,#201e1d); } .rb-lab { position:absolute; transform:translateX(-50%); text-align:center; white-space:nowrap; line-height:1.15; z-index:3; background:var(--surface); padding:0 0.15rem; } .rb-lab b { display:block; font-size:0.8rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .rb-lab small { display:block; font-size:0.66rem; color:var(--muted); } .rb-lab.al { transform:translateX(-10px); text-align:left; } .rb-lab.ar { transform:translateX(calc(-100% + 10px)); text-align:right; } .rb-end { position:absolute; top:calc(100% + 0.5rem); transform:translateX(-50%); font-size:0.7rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; } .rb-end.al { transform:translateX(-10px); } .rb-end.ar { transform:translateX(calc(-100% + 10px)); } .rb-end.mid { color:var(--accent); font-weight:600; } .gfx-legend i.lg-dot { border-radius:50%; box-sizing:border-box; } .gfx-legend i.lg-band { background:#BFDCCB; box-shadow:inset 0 0 0 1.5px #4E8A70; } .gfx-legend i.lg-mid { width:0; border-radius:0; border-left:2px dashed #164E52; } /* Where the pay goes. */ .paybar { display:flex; height:1.75rem; border-radius:6px; overflow:hidden; background:var(--bar-bg); } .paybar span { position:relative; display:block; min-width:2px; } .paybar span + span { box-shadow:inset 2px 0 0 #FFFFFF; } .paybar em { position:absolute; left:0.6rem; top:50%; transform:translateY(-50%); font-style:normal; font-size:0.78rem; font-weight:650; color:#fff; white-space:nowrap; } .pb-net { background:#14503C; } .pb-ks { background:#5CA37C; } .pb-sl { background:#B68E3D; } .pb-acc { background:#8D959F; } .pb-tax { background:#5A6169; } /* The silence meter: days since the last word, against the day 7 follow-up and the day 21 close. */ .silence { display:flex; align-items:center; gap:0.45rem; margin-top:0.4rem; font-size:0.72rem; color:var(--muted); } .silence .st { position:relative; flex:1 1 auto; max-width:9rem; height:5px; border-radius:3px; background:var(--bar-bg); } .silence .st i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:#4E8A70; } .silence .st b { position:absolute; left:33.33%; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:#5A6169; opacity:0.5; } .silence .sl { white-space:nowrap; font-variant-numeric:tabular-nums; } .silence.q-chase .st i { background:var(--warn); } .silence.q-chase .sl { color:var(--warn); font-weight:600; } .silence.q-close .st i { background:#9A3A28; } .silence.q-close .sl { color:var(--out); font-weight:600; } .bcard .silence .st { max-width:none; } /* Eight weeks of effort. */ .effweeks { position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0.4rem; height:5.2rem; margin:1.5rem 0 1.5rem; padding-right:3.1rem; border-bottom:1px solid var(--line); } .ew-col { position:relative; height:100%; } /* Stacked by kind, applications at the base, so a week's number shows what it is made of. This week is marked by a tint behind its column rather than a colour, because colour now means the kind. */ .ew-bar { position:absolute; left:14%; right:14%; bottom:0; border-radius:3px 3px 0 0; overflow:hidden; display:flex; flex-direction:column-reverse; background:var(--line); } .ew-s { display:block; flex:1 1 0; min-height:0; } .ew-s + .ew-s { border-bottom:1px solid var(--surface); } .ew-applied { background:var(--accent); } .ew-met { background:#4E8A70; } .ew-followed { background:#D7E9DF; box-shadow:inset 0 0 0 1.5px #4E8A70; } .ew-col.now::before { content:""; position:absolute; top:-1.35rem; bottom:0; left:0; right:0; border-radius:6px 6px 0 0; background:#EFF5F1; } .ew-n { position:absolute; left:-20%; right:-20%; text-align:center; font-size:0.72rem; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; } .ew-d { position:absolute; top:calc(100% + 0.25rem); left:-30%; right:-30%; text-align:center; font-size:0.64rem; color:var(--muted); white-space:nowrap; } .ew-col.now .ew-d { color:var(--accent); font-weight:650; } .ew-goal { position:absolute; left:0; right:0; height:0; border-top:1.5px dashed #8F5F08; z-index:1; pointer-events:none; } /* The goal's label sits in its own gutter at the right, level with the line, so it never lands on a bar. */ .ew-goal em { position:absolute; right:0; top:-0.45rem; line-height:0.9rem; font-style:normal; font-size:0.64rem; font-weight:650; color:#8F5F08; background:var(--surface); padding:0 0 0 0.3rem; } /* On a phone every other week keeps its date, so eight labels do not run into each other. */ @media (max-width:599px) { .ew-col.alt .ew-d { display:none; } } /* The job along one line. */ .jt { display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.7rem; margin:1.3rem 0 0.2rem; } .jt-lanes { display:grid; grid-auto-rows:1.6rem; font-size:0.64rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); } .jt-lanes span { display:flex; align-items:center; height:1.35rem; } .jt-plot { position:relative; height:4.8rem; margin:0 8px; } .jt-plot::before { content:""; position:absolute; left:-8px; right:-8px; top:0.68rem; border-top:1px solid var(--line); box-shadow:0 1.6rem 0 var(--line), 0 3.2rem 0 var(--line); } .jt-today { position:absolute; top:-0.25rem; bottom:0; width:0; border-left:1.5px dashed #8F5F08; } .jt-today em { position:absolute; bottom:100%; left:0; transform:translateX(-50%); font-style:normal; font-size:0.62rem; font-weight:650; color:#8F5F08; white-space:nowrap; } .jt-today.ar em { transform:translateX(-100%); } .jt-dot { position:absolute; width:12px; height:12px; box-sizing:border-box; } .jt-dot.k-stage, .lg-k-stage { background:#164E52; border-radius:2px; } .jt-dot.k-closed, .lg-k-closed { background:#9A3A28; border-radius:2px; } .jt-dot.k-in, .lg-k-in { background:#164E52; border-radius:50%; } .jt-dot.k-out, .lg-k-out { background:#fff; border:2px solid #164E52; border-radius:50%; } .jt-dot.k-event, .lg-k-event { background:#8F5F08; transform:rotate(45deg) scale(0.82); } .jt-dot.k-soon, .lg-k-soon { background:#fff; border:2px dashed #8F5F08; transform:rotate(45deg) scale(0.82); } /* The legend's own square corners would otherwise win over the round contact marks. */ .gfx-legend i.lg-k-in, .gfx-legend i.lg-k-out { border-radius:50%; box-sizing:border-box; } .gfx-legend i.lg-k-soon, .gfx-legend i.lg-k-out { box-sizing:border-box; } .jt-axis { display:flex; justify-content:space-between; font-size:0.66rem; color:var(--muted); margin:0.1rem 0 0; font-variant-numeric:tabular-nums; } /* The money runway, week by week. */ .rw-plot { position:relative; height:9rem; margin:0.3rem 0 0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); } .rw-plot svg { position:absolute; left:0; top:0; width:100%; height:100%; display:block; overflow:visible; } .rw-note { position:absolute; font-size:0.7rem; font-weight:650; white-space:nowrap; background:var(--surface); padding:0 0.25rem; border-radius:3px; line-height:1.3; } .rw-start { left:0.3rem; color:var(--accent); } .rw-zero { bottom:0.6rem; color:var(--danger); transform:translateX(-50%); } .rw-zero.ar { transform:translateX(-100%); } .rw-zero.al { transform:none; } .rw-sd { bottom:0.35rem; left:0.3rem; color:var(--warn); background:transparent; } .rw-dot { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--danger); border:2px solid #fff; box-shadow:0 0 0 1px var(--danger); } .rw-x { display:flex; justify-content:space-between; font-size:0.66rem; color:var(--muted); margin-top:0.25rem; font-variant-numeric:tabular-nums; } .gfx-legend i.lg-line { height:3px; border-radius:2px; background:#164E52; } .gfx-legend i.lg-sd { background:rgba(143,95,8,0.16); border:1px solid rgba(143,95,8,0.35); } /* Mood, as a line. */ .moodspark { display:block; flex:0 0 auto; } /* Bars inside the sources table. */ .dbcell { white-space:nowrap; } .databar { display:inline-block; vertical-align:middle; width:6rem; height:8px; border-radius:4px; background:var(--bar-bg); margin-right:0.5rem; overflow:hidden; } .databar i { display:block; height:100%; border-radius:4px; background:#5D9375; } .databar.count i { background:#7D8896; } tr.best .databar.rate i { background:var(--accent); } @media (max-width:599px) { .databar { width:3.2rem; } } /* The Career Compass hexagon. */ .hexwrap { display:grid; gap:0.3rem 1.6rem; align-items:center; margin-top:0.4rem; } @media (min-width:900px) { .hexwrap { grid-template-columns:minmax(0,440px) minmax(0,1fr); } } .hex { display:block; width:100%; max-width:440px; height:auto; margin:0 auto; } .hx-ring, .hx-spoke { fill:none; stroke:#E3E5E8; stroke-width:1; } .hx-shape { fill:rgba(22,78,82,0.16); stroke:#164E52; stroke-width:2; stroke-linejoin:round; } .hx-pt { fill:#fff; stroke:#164E52; stroke-width:2; } .hx-pt.top { fill:#164E52; } .hx-l { font-size:14px; fill:#5A6169; font-family:inherit; } .hx-l.top { fill:#164E52; font-weight:700; } /* The small card an event opens on the calendar. */ .calpop { position:absolute; z-index:60; width:min(18rem, calc(100vw - 2rem)); background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(26,29,33,0.18); padding:0.75rem 0.85rem; font-size:0.85rem; } .calpop .cpt { font-weight:650; margin:0 0 0.15rem; } .calpop .row { margin-top:0.6rem; } /* The Tools sub-tabs scroll sideways on a phone rather than wrapping into a pile. */ .subtabwrap { display:flex; overflow-x:auto; max-width:100%; margin:0.75rem 0 0.1rem; padding-bottom:2px; } .subtabwrap .seg { flex:0 0 auto; } .subtabwrap .btn { white-space:nowrap; } /* The same right-edge fade as the main tabs, so a strip cut at "In..." says there is more (A10). The margin lets the last tool scroll clear of the fade. */ @media (max-width:939px) { .subtabwrap { -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } .subtabwrap .seg { margin-right:28px; } } details.ksetup { margin:0.4rem 0 0.8rem; } details.ksetup > summary { cursor:pointer; } /* Backup as two labelled groups. A label styled as a button keeps the button's own type, not the small grey label style every other label gets. */ .bkgroup { margin:0 0 0.75rem; } .bkh { font-size:0.68rem; font-weight:650; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); margin:0 0 0.35rem; } label.btn { display:inline-flex; align-items:center; margin:0; font-size:0.82rem; font-weight:550; color:var(--ink); cursor:pointer; } label.btn:focus-within { outline:2px solid var(--accent); outline-offset:2px; } /* ------------------------------------------------------------ front-end audit re-run, 15 September 2026 */ /* A button beside a full-height input is the input's height (A15). */ .row.inrow { align-items:stretch; } /* The calendar's four actions in two pairs, so a phone gets two even rows instead of one button left alone on the second (A9). */ .calbar { margin:0.2rem 0 0.6rem; gap:0.55rem 1rem; } .calgrp { display:flex; flex-wrap:nowrap; align-items:center; gap:0.55rem; } /* The period is a short choice, so it does not stretch the whole width and push Print to a row of its own (A27). */ select.periodsel { width:auto; flex:1 1 12rem; max-width:20rem; min-width:0; } /* The jobs on a People card: one row each, a finger's height on a touchscreen (A17). */ .pjob a { color:var(--accent); text-decoration:none; } .pjob { margin:0.1rem 0; } /* Checkbox rows in a form. On a touchscreen each is a 44px row with a larger box (A28). */ .checkrow { display:flex; align-items:center; gap:0.5rem; font-weight:400; color:var(--ink); margin:0.5rem 0 0.2rem; } @media (pointer:coarse) { .pjob { display:flex; align-items:center; flex-wrap:wrap; gap:0 0.4rem; min-height:44px; margin:0; } .pjob a { display:inline-flex; align-items:center; min-height:44px; } .checkrow { min-height:44px; margin:0; } .checkrow input[type=checkbox] { width:1.15rem; height:1.15rem; flex:0 0 auto; } } /* Pay review and the CPD log wait behind one line for somebody between jobs (A16). */ details.backinwork { margin:1.6rem 0 0.4rem; } /* Its own marker, because a touch screen draws this summary as flex and the browser's triangle goes with it. */ details.backinwork > summary { padding:0.2rem 0; list-style:none; } details.backinwork > summary::-webkit-details-marker { display:none; } details.backinwork > summary::before { content:"\25B8"; display:inline-block; width:1.1em; color:var(--accent); } details.backinwork[open] > summary::before { content:"\25BE"; } /* The Work and Income record: a date is one line, and what is listed but not counted looks it (A22, A23). */ .rep .rdate { white-space:nowrap; } .rep tr.uncounted td { color:var(--muted); } .card.stackwrap { padding:0.3rem 0.4rem; } /* TABLES THAT BECOME CARDS ON A PHONE (A18, A22). Companies and the Work and Income record clipped their last columns and grew rows 150 to 230px tall, mostly blank. Below 700px each row is a card and each cell carries its column's name. Screen only: the record prints as the table a case manager expects. */ @media screen and (max-width:699px) { .stackwrap { overflow:visible; -webkit-mask-image:none; mask-image:none; } .card.stackcard { border:0; padding:0; background:transparent; } table.stack, table.stack tbody, table.stack tr { display:block; width:auto; } table.stack tr.stackhead { display:none; } table.stack tr { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:0.6rem 0.8rem 0.5rem; margin:0 0 0.55rem; } table.stack td { display:flow-root; border:0; padding:0.14rem 0 0.14rem 7.4rem; font-size:0.84rem; } table.stack td::before { content:attr(data-label); float:left; width:6.8rem; margin-left:-7.4rem; padding-top:0.12rem; font-size:0.69rem; font-weight:650; line-height:1.35; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); } table.stack td.lead { padding-left:0; font-size:0.95rem; margin-bottom:0.15rem; } table.stack td.lead::before { display:none; } table.stack td.nil { display:none; } table.stack td.rdate, table.stack td.remp { display:inline; padding:0; font-size:0.92rem; font-weight:650; color:var(--ink); } table.stack td.rdate::before { display:none; } table.stack td.remp::before { content:"\00b7"; float:none; width:auto; margin:0 0.35rem; padding:0; font-size:0.92rem; letter-spacing:0; color:var(--muted); } table.stack td.remp + td { margin-top:0.3rem; } } /* ---------------------------------------------------------------- easier to use (20 September 2026) Twelve changes James asked for after using the app himself: what to do next above what has happened, a grouped sidebar, a bar on the phone, one search, and less chrome top and bottom. */ /* A heading over each group of tabs, so eleven flat items read as three short lists. */ .navgroup { font-size:0.6rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; color:var(--chrome-muted); margin:0.9rem 0 0.25rem; padding:0 0.65rem; } /* A HEADING, NOT A TAB (Kim Innes, 25 September 2026). A hairline and room above each group after the first, lighter than the tabs beneath it, and nothing that answers a pointer as a tab would. */ .navgroup { cursor:default; user-select:none; opacity:0.85; } nav.tabs .navgroup ~ .navgroup, .acctlinks .navgroup { border-top:1px solid var(--chrome-line); padding-top:0.7rem; margin-top:1rem; } /* On a phone the tabs are a strip that scrolls sideways, where a heading mid-row is only noise. */ @media (max-width:939px) { .navgroup { display:none; } } /* The two products: a mark and a colour each on their group, and Your Career's own colour through its screens. Understand and Account stay plain; they belong to both. */ .navgroup.prod-hunt { color:var(--accent); } .navgroup.prod-career { color:var(--career); } .navgroup.prod-time { color:var(--time); } .navgroup.prod-hunt::before, .navgroup.prod-career::before, .navgroup.prod-time::before { content:""; display:inline-block; width:0.45rem; height:0.45rem; border-radius:2px; background:currentColor; margin-right:0.4rem; vertical-align:0.08em; } nav.tabs button.prod-career.active { background:var(--career-soft); color:var(--career); } nav.tabs button.prod-career:hover { color:var(--career); } nav.tabs button.prod-time.active { background:var(--time-soft); color:var(--time); } nav.tabs button.prod-time:hover { color:var(--time); } .prodlabel { font-size:0.66rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; margin:0 0 0.1rem; } .prodlabel.hunt { color:var(--accent); } .prodlabel.career { color:var(--career); } .prodlabel.time { color:var(--time); } .timeview .btn.primary { background:var(--time); border-color:var(--time); color:#FFFFFF; } .timeview .btn.primary:hover { background:var(--time-hover); border-color:var(--time-hover); } .timeview .startcard, .timeview .demonote { border-color:var(--time-line); } .pdot.time { background:var(--time); } #view > .prodlabel + h2 { margin-top:0; } .careerview .btn.primary { background:var(--career); border-color:var(--career); color:#FFFFFF; } .careerview .btn.primary:hover { background:var(--career-hover); border-color:var(--career-hover); } .careerview .careerjob.head, .careerview .startcard { border-color:var(--career-line); } .careerjob.lead { border-color:var(--career-line); } .careerpanel { border-color:var(--career-line); } .careerpanel .prodlabel { margin-bottom:0.2rem; } .btn.primary.career { background:var(--career); border-color:var(--career); color:#FFFFFF; } .btn.primary.career:hover { background:var(--career-hover); border-color:var(--career-hover); } .pdot { display:inline-block; width:0.55rem; height:0.55rem; border-radius:2px; margin-right:0.4rem; vertical-align:0.05em; } .pdot.hunt { background:var(--accent); } .pdot.career { background:var(--career); } .pdot + .pdot { margin-left:-0.2rem; } .focusask { gap:0.5rem; flex-wrap:wrap; } .obopt strong .pdot { display:inline-block; margin:0 0.4rem 0 0; } .obopt strong .pdot + .pdot { margin-left:-0.2rem; } /* THE ORDER OF THE SECTIONS (James, 4 October 2026): an Up and a Down button on each product's heading, and the same pair in Settings. Quiet until pointed at; the one with nowhere to go is greyed and skipped by Tab. */ .navorder { display:inline-flex; gap:1px; margin-left:auto; padding-left:0.25rem; flex:0 0 auto; } .ordermove { appearance:none; border:1px solid transparent; background:none; cursor:pointer; color:var(--chrome-muted); width:21px; height:22px; padding:0; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; line-height:0; } .ordermove svg { width:0.75rem; height:0.75rem; display:block; } .ordermove:hover:not([disabled]) { color:var(--chrome-ink); background:#F4F5F6; border-color:var(--chrome-line); } .ordermove:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .ordermove[disabled] { opacity:0.3; cursor:default; } /* The menu's own button rules (padding for a tab) are not for the heading's small controls. The fold button took them too, which set Your Job Hunt in from the headings under it. */ nav.tabs .navgroup button.ordermove, nav.tabs .navgroup button.navfold { padding:0; } nav.tabs .navgroup button.ordermove[disabled]:hover { background:none; } @media (min-width:940px) { nav.tabs .navgroup.hasorder { display:flex; align-items:center; padding-right:0; } /* The mark is a flex item here, and must never be the thing that gives way (it was squeezed to a line). */ nav.tabs .navgroup.hasorder::before { flex:0 0 auto; margin-right:0.35rem; } /* ONE LINE, WHATEVER THE NAME (James, 5 October 2026). Once the sidebar is long enough to scroll, its scrollbar takes 10 to 15px from the column, and YOUR TIMESHEETS, the longest name, pushed its Up and Down onto a second line under it while the other two fitted. The name never decides where the line breaks now: it starts from no width and takes what the mark and the pair leave (flex 1 1 0), letters a touch closer so all three fit with the scrollbar drawn, and an ellipsis only if a name ever outgrows that. The pair keeps its 21px buttons. */ nav.tabs .navgroup.hasorder { flex-wrap:wrap; letter-spacing:0.07em; } nav.tabs .navgroup.hasorder .navfold { flex:1 1 0; min-width:0; gap:0.25rem; } nav.tabs .navgroup.hasorder .navlabel, nav.tabs .navgroup.hasorder .navname { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } nav.tabs .navgroup.hasorder .navname { flex:1 1 0; } nav.tabs .navgroup.hasorder .navfold svg { flex:0 0 auto; } nav.tabs .navgroup.hasorder .navorder { padding-left:0.15rem; } /* A running timer's clock drops under the heading on a line of its own, so it never cuts the name short beside the order buttons. */ nav.tabs .navgroup.hasorder .tnavrun { order:3; flex:0 0 auto; margin:0.25rem 0 0 0.85rem; } nav.tabs .navgroup.hasorder:has(.tnavrun)::after { content:""; order:2; flex:0 0 100%; height:0; } /* Timesheets to send (sent back or due) take the same line under the heading, beside a running clock if there is one. */ nav.tabs .navgroup.hasorder .tapprnav { order:3; flex:0 0 auto; margin:0.25rem 0 0 0.85rem; } nav.tabs .navgroup.hasorder .tnavrun + .tapprnav { margin-left:0.35rem; } nav.tabs .navgroup.hasorder:has(.tapprnav)::after { content:""; order:2; flex:0 0 100%; height:0; } } /* Your Career's Pay: on a phone "Show amounts" and its note take lines of their own, so the four periods sit on one row together instead of Yearly wrapping alone onto the note's line (5 October 2026). */ @media (max-width:599px) { .periodpick > span { flex:1 1 100%; } .periodpick > .btn { flex:1 1 auto; padding-left:0.45rem; padding-right:0.45rem; } } .orderlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.35rem; max-width:26rem; } .orderrow { display:flex; align-items:center; gap:0.5rem; border:1px solid var(--line); border-radius:6px; padding:0.35rem 0.5rem 0.35rem 0.7rem; background:var(--surface); font-weight:600; } .orderrow.prod-hunt { color:var(--accent); } .orderrow.prod-career { color:var(--career); } .orderrow.prod-time { color:var(--time); } .orderrow .ordermove { width:36px; height:36px; border-color:var(--line); color:var(--ink); } .orderrow .ordermove svg { width:0.9rem; height:0.9rem; } .pdot.time { background:var(--time); } @media (pointer:coarse) { .orderrow .ordermove { width:44px; height:44px; } } /* More from jobtracker.co.nz, always open, between the products and Account (22 September 2026). */ .morefrom { margin:0.9rem 0 0; border-top:1px solid var(--chrome-line); padding-top:0.55rem; } .morefrom .sidehead { font-size:0.6rem; font-weight:750; text-transform:uppercase; letter-spacing:0.1em; color:var(--chrome-muted); margin:0.35rem 0 0.25rem; padding:0 0.65rem; } .morefrom .sidelinks { flex-direction:column; gap:0; margin:0; border-top:none; padding:0; } .morefrom .sidelinks a { font-size:0.8rem; padding:0.3rem 0.65rem; border-radius:5px; } .morefrom .sidelinks a:hover { background:#F4F5F6; text-decoration:none; } /* A date box says its date in words underneath (audit 3, N6). */ .datesaid { display:block; margin-top:0.2rem; font-size:0.74rem; } /* The bookmark button, folded to one line once its explanation is dismissed (26 September 2026). */ .capturehint.slim { padding-top:0.35rem; padding-bottom:0.35rem; } /* The folded groups (audit 3, N2): a heading that opens, with a chevron that turns when it does. */ .morefrom > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.35rem; border-radius:5px; } .morefrom > summary::-webkit-details-marker { display:none; } .morefrom > summary::after { content:""; width:0.4rem; height:0.4rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); margin-left:0.15rem; transition:transform 0.15s; } .morefrom[open] > summary::after { transform:rotate(45deg); } .morefrom > summary:hover { color:var(--chrome-ink); } .morefrom > summary:focus-visible, .navfold:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } /* The mark, the name and the arrow stay on one line (James, 1 October 2026: Your Timesheets wrapped under its mark). */ .navgroup.foldable { cursor:auto; opacity:1; white-space:nowrap; } .navfold { appearance:none; border:none; background:none; cursor:pointer; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; padding:0; display:inline-flex; align-items:center; gap:0.3rem; white-space:nowrap; } .navfold svg { width:0.7rem; height:0.7rem; transition:transform 0.15s; transform:rotate(-90deg); } .navfold[aria-expanded="true"] svg { transform:none; } @media (prefers-reduced-motion: reduce) { .navfold svg, .morefrom > summary::after { transition:none; } } /* Account: Subscription and Settings read as the menu items they are, then the two account links. */ .acctnav { appearance:none; border:none; background:none; cursor:pointer; text-align:left; font:inherit; font-size:0.82rem; font-weight:500; color:var(--chrome-muted); padding:0.42rem 0.65rem; border-radius:5px; } .acctnav:hover { color:var(--chrome-ink); background:#F4F5F6; } .acctnav.active { background:var(--chrome-active-bg); color:var(--chrome-active-ink); font-weight:600; } .acctlinks { gap:1px; } .acctlinks .navgroup { margin-top:0.2rem; } .acctlinks > a, .acctlinks > .linkish { padding:0 0.65rem; text-align:left; margin-top:0.35rem; } /* Each stage count opens Jobs filtered to that stage, so a number is a way in, not a fact. */ .stat.statlink { appearance:none; border:none; border-right:1px solid var(--line); background:none; font:inherit; text-align:left; width:100%; cursor:pointer; } .stat.statlink:hover { background:#F4F5F6; } .stat.statlink:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } /* What to do now: one line each, what it is about beside it, and its own buttons on the right. The row itself is not a target; the words are the link, so nothing nests inside anything. */ .nextacts { display:grid; gap:0.2rem; } .na { display:flex; gap:0.55rem; align-items:baseline; flex-wrap:wrap; width:100%; border:1px solid transparent; border-radius:6px; font-size:0.85rem; padding:0.4rem 0.5rem; } .na:hover { background:#F4F5F6; border-color:var(--line); } .na .nawhat { flex:1 1 auto; } .na .nawho { color:var(--muted); font-size:0.78rem; } /* The first five minutes, for a hunt with almost nothing in it yet. */ /* While getting started IS the page, it looks like the page: the accent border and a lead sentence, rather than one more card in a stack of eight (John Parker, 20 September 2026). */ .startcard { border-color:var(--accent); } .startlead { margin:0.5rem 0 0.1rem; font-size:0.88rem; color:var(--muted); max-width:62ch; } /* THE COACH MARKS. One ring darkens everything outside itself with a single enormous shadow, which is why there is no mask, no canvas and no second layer to keep in step with it. Above the modal backdrop (60), below the skip link (100). */ .tourblock { position:fixed; inset:0; z-index:78; cursor:pointer; } .tourring { position:fixed; z-index:79; border-radius:10px; border:2px solid var(--accent); pointer-events:none; box-shadow:0 0 0 9999px rgba(20,26,32,0.55); transition:top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease; } .tourbubble { position:fixed; z-index:80; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0.85rem 0.95rem; box-shadow:0 12px 32px rgba(26,29,33,0.3); } .tourbubble .tb-step { font-size:0.62rem; font-weight:650; text-transform:uppercase; letter-spacing:0.09em; color:var(--muted); } .tourbubble .tb-title { font-weight:700; margin:0.15rem 0 0.3rem; } .tourbubble p { margin:0 0 0.7rem; font-size:0.86rem; } @media print { .tourblock, .tourring, .tourbubble { display:none; } } .startlist { list-style:none; margin:0.45rem 0 0; padding:0; display:grid; gap:0.25rem; } .startlist li { display:flex; gap:0.5rem; align-items:baseline; font-size:0.85rem; } /* A button that reads as a link, for a step in a list of steps. */ .linkish { appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer; text-align:left; } .linkish:hover { color:var(--accent-hover,#103A3E); } .startlist .tick { color:var(--good-ink,#1E5631); font-weight:750; } .startlist .todo { color:var(--muted); } .startlist li.done .what { color:var(--muted); text-decoration:line-through; } /* Start here's steps as buttons (20 October 2026): the button, then what it is for underneath, beside the number. */ .starthere li { align-items:flex-start; } .starthere .todo { margin-top:0.35rem; flex:0 0 auto; } .starthere .startbtn { margin:0 0 0.15rem; } .starthere .startwhy { display:block; font-size:0.8rem; } /* The sync bar is one line: a dot for the state, then the address it is saving to. */ .syncdot { width:9px; height:9px; border-radius:50%; background:var(--good-ink,#1E5631); flex:0 0 auto; } .syncdot.work { background:#B7791F; } .syncdot.err { background:var(--danger,#B3261E); } .syncdot.off { background:var(--muted); } /* The one next step for the stage a job is at. */ .nextstep { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin:0.55rem 0 0.7rem; padding:0.55rem 0.75rem; border:1px solid var(--soft-line,#CDDEE0); border-radius:8px; background:var(--accent-soft,#ECF2F3); } .nextstep .nswhat { flex:1 1 12rem; font-size:0.85rem; } /* Search everything, over the page. */ .qsresults { max-height:50vh; overflow:auto; margin-top:0.5rem; } .qsrow { display:flex; gap:0.55rem; align-items:baseline; width:100%; text-align:left; appearance:none; background:none; border:1px solid transparent; border-radius:6px; font:inherit; font-size:0.88rem; padding:0.4rem 0.5rem; cursor:pointer; } .qsrow:hover, .qsrow.on { background:var(--accent-soft,#ECF2F3); border-color:var(--soft-line,#CDDEE0); } .qsrow .qskind { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); flex:0 0 auto; } .qsrow .qswhat { flex:1 1 auto; } /* A ROW'S NOTE GOES UNDER ITS NAME (James, 4 October 2026, from a phone: "Install the / app" wrapped beside a description floating to the right). The name on its own line at the row's size, the note directly beneath in small muted type, left aligned, in every sheet: More, Your Career, Hours and search. */ .qsrow { flex-wrap:wrap; row-gap:0.08rem; } .qsrow > .nawho { flex:1 0 100%; font-size:0.78rem; color:var(--muted); line-height:1.35; } .qsrow > .qskind + .qswhat + .nawho { padding-left:0; } a.qsrow { color:var(--ink); text-decoration:none; } a.qsrow:hover { text-decoration:none; } @media (max-width:939px) { .mbox .qsrow { min-height:44px; align-content:center; } } .qsempty { color:var(--muted); font-size:0.85rem; padding:0.5rem; } .qshint { color:var(--muted); font-size:0.72rem; margin-top:0.5rem; } /* THE WAYS OF USING IT (James's review, 23 September 2026). Six choices set in 0.78rem, each one three lines stacked in a narrow column, is a list nobody reads. They are cards now, two across where there is room, with the name, what it does and why on their own lines. */ /* The two products on the subscription screen, ticked or greyed. */ .pb-products { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.55rem 0 0.2rem; } .pb-products .chip.off { color:var(--muted); background:var(--paper); border-color:var(--line); } .pb-products .chip.off .pdot { opacity:0.4; } .pb-next { margin:0.8rem 0 0; padding:0.7rem 0.8rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); font-size:0.88rem; line-height:1.55; } .pb-next .btn { margin-top:0.5rem; } .waylist { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0.6rem; } .way { display:flex; gap:0.6rem; align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius); padding:0.7rem 0.8rem; background:var(--surface); } .way input { margin:0.15rem 0 0; width:1.1rem; height:1.1rem; flex:0 0 auto; } .way label { margin:0; cursor:pointer; } .way .waybody { flex:1 1 auto; min-width:0; } .way .wayextra { margin:0.55rem 0 0; } .way .wayname { display:block; font-weight:700; font-size:0.95rem; } .way .waywhat { display:block; font-size:0.88rem; line-height:1.5; margin-top:0.1rem; } .way .waywhy { display:block; font-size:0.82rem; color:var(--muted); line-height:1.5; margin-top:0.25rem; } /* The capture, offered where the typing would otherwise start. */ .capturenudge { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.9rem; border-color:var(--accent-line,var(--line)); background:var(--accent-soft); } .capturenudge strong { font-size:0.95rem; } .capturenudge span { flex:1 1 18rem; font-size:0.88rem; line-height:1.5; } .capturebare { padding:0; } .capture-ad { margin:0 0 0.8rem; } .capture-ad summary { cursor:pointer; font-weight:600; font-size:0.9rem; } .capture-adtext { max-height:14rem; overflow:auto; margin-top:0.5rem; padding:0.6rem 0.7rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); font-size:0.85rem; line-height:1.55; white-space:pre-wrap; } /* ---------------------------------------------------------------- the phone header WHERE YOU ARE, AND THE ONE THING YOU DO FROM ANYWHERE (23 September 2026). Below 940px the tab strip is retired and the bottom bar navigates, so the header's whole job is to name the screen and hold Add job. */ .phhead { display:none; } @media (max-width:939px) { .phhead { display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0 0.15rem; } #searchPicker.onehunt { display:none !important; } .phtitle { font-family:var(--display, inherit); font-size:1.05rem; font-weight:700; color:var(--chrome-ink); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .phtitle.prod-career { color:var(--career); } .phtitle.prod-time { color:var(--time); } .phadd { margin-left:auto; appearance:none; cursor:pointer; font:inherit; font-size:0.82rem; font-weight:650; min-height:36px; padding:0 0.7rem; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:#fff; white-space:nowrap; } .phadd span { font-size:1rem; line-height:1; } .phjo { appearance:none; cursor:pointer; font:inherit; font-size:0.8rem; font-weight:650; min-height:36px; padding:0 0.7rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--accent); white-space:nowrap; margin-left:auto; } .phjo + .phadd { margin-left:0; } @media (max-width:420px) { .phjo .phjo-long { display:none; } } /* The strip and the bar were two ways to navigate, stacked. The bar won: it is in reach of a thumb, it does not scroll sideways, and it never hid half its destinations off the edge. */ header.app nav.tabs { display:none; } } /* The phone bar: the five things people do most, in reach of a thumb, on every screen. */ .bottombar { display:none; } @media (max-width:939px) { .bottombar { position:fixed; left:0; right:0; bottom:0; z-index:25; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--chrome); border-top:1px solid var(--chrome-line); padding:0.25rem 0.3rem calc(0.25rem + env(safe-area-inset-bottom)); } .bb { appearance:none; border:none; background:none; font:inherit; cursor:pointer; color:var(--chrome-muted); font-size:0.62rem; font-weight:600; padding:0.3rem 0.1rem; border-radius:6px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.15rem; } .bb[aria-current="page"] { color:var(--chrome-active-ink); background:var(--chrome-active-bg); } .bb b { font-size:1.05rem; line-height:1; font-weight:650; } /* Your Career is indigo everywhere else, and the bar is where the two products meet. */ .bb.bbcareer[aria-current="page"] { color:var(--career); background:var(--career-soft); } .bb.bbtime[aria-current="page"] { color:var(--time); background:var(--time-soft); } /* The floating button and the bar would be two ways to add a job, one sitting on the other. */ .fab { display:none !important; } main { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); } footer.app { margin-bottom:calc(3.6rem + env(safe-area-inset-bottom)); } /* A job's Save bar stuck to the bottom of the screen, which on a phone is under this bar: Save job was hidden behind Home, Jobs and Career (phone audit, 4 October 2026). It sticks on top of the bar instead, which is 0.5rem of padding, a 44px button and its 1px rule high, and the bar already clears the home indicator. */ .savebar { bottom:calc(0.5rem + 45px + env(safe-area-inset-bottom)); padding-bottom:0.6rem; } } @media print { .bottombar { display:none !important; } } @media print { .paywrap { -webkit-mask-image:none !important; mask-image:none !important; overflow:visible !important; } } @media print { header.app,nav.tabs,.sidelinks,.fab,footer.app,.no-print{display:none!important} body{background:#fff;color:#000} main{margin:0;padding:0;max-width:none} .card{border:none;padding:0} } /* Add this job? What the button on a job ad brought across, as a short list to check. */ dl.capture { display:grid; grid-template-columns:auto 1fr; gap:0.4rem 1.1rem; margin:0.2rem 0 0.9rem; } dl.capture dt { color:var(--muted); font-size:0.9rem; } dl.capture dd { margin:0; font-weight:600; overflow-wrap:anywhere; } /* The button people drag to their bookmarks bar: it has to look like a thing you can pick up. */ a.capturebtn { cursor:grab; border-style:dashed; } a.capturebtn:active { cursor:grabbing; } /* The install steps (installApp, 22 September 2026): numbered, roomy, one action a line. */ .installsteps { margin:0.5rem 0 0.9rem; padding-left:1.3rem; } .installsteps li { margin:0 0 0.6rem; line-height:1.5; } .installsteps b { color:var(--ink); } /* Career mode (22 September 2026): the job held, its dates, its pay and the wins. Built from the same cards, rows and tables as the hunt, so it reads as the same app rather than a second one. */ .careerjob .cj-name { font-family:var(--display); font-size:1.15rem; font-weight:700; margin:0.12rem 0; line-height:1.3; } .careerjob.lead { border-color:var(--accent); } .careerjob.head { margin-bottom:0.2rem; } .careerwhat { margin:0.55rem 0; padding-left:1.1rem; } .careerwhat li { margin:0.25rem 0; } .kdates { display:grid; } .kd { display:grid; grid-template-columns:minmax(7.5rem, 9rem) minmax(0, 1fr); gap:0.75rem; padding:0.5rem 0; border-top:1px solid var(--line); } .kd:first-child { border-top:0; padding-top:0.1rem; } .kd-when { display:flex; flex-direction:column; font-variant-numeric:tabular-nums; font-size:0.84rem; } .kd-what .tiny { margin-top:0.15rem; line-height:1.5; } /* Past dates read quieter by colour, not by fading: opacity took the muted text below 4.5:1 (axe, 24 September 2026). */ .kd.past, .kd.past strong { color:var(--muted); } /* A card's title is its button (Contacts and the board), so a card can hold its own links and buttons. */ .cardopen { all:unset; cursor:pointer; font:inherit; color:inherit; text-align:left; } .cardopen:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } @media (max-width:540px) { .kd { grid-template-columns:minmax(0, 1fr); gap:0.1rem; } } .winquick { flex-wrap:nowrap; } .winquick input { flex:1 1 auto; min-width:0; } .winrow { display:flex; gap:0.6rem; align-items:flex-start; padding:0.5rem 0; border-top:1px solid var(--line); } .winrow:first-child, .winyear + .winrow { border-top:0; } .winrow .grow { min-width:0; overflow-wrap:anywhere; } /* Keep in touch on a phone: the name and employer had 110 to 140px beside the 11rem select and ran to four lines. Below 600px the select goes under them when the two do not fit side by side (phone audit, 4 October 2026). */ @media (max-width:599px) { .winrow:has(> select) { flex-wrap:wrap; row-gap:0.35rem; } .winrow:has(> select) > .grow { flex:1 1 8.5rem; } } .winyear { font-size:0.68rem; font-weight:750; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin:0.7rem 0 0.1rem; } .winyear:first-child { margin-top:0.1rem; } /* Praise notes (111, 5 October 2026): a colleague's words among the wins, with who it is from on its own line, and the links still waiting for a note. The note keeps its line breaks. On a phone the buttons go under the words rather than squeezing them, and every button is 44px tall. */ .praisetext { white-space:pre-line; } .praisefrom { font-weight:650; color:var(--ink); margin-top:0.15rem; } .praisebtns { display:flex; gap:0.4rem; flex-wrap:wrap; flex:0 0 auto; } .praiselinks .winrow:first-of-type { border-top:1px solid var(--line); margin-top:0.35rem; } .praisehidden { margin:0.2rem 0 0.6rem; } @media (max-width:599px) { .praisewin, .praiselink { flex-wrap:wrap; row-gap:0.35rem; } .praisewin > .grow, .praiselink > .grow { flex:1 1 100%; } .praisebtns .btn, #praise_ask { min-height:44px; } .praisehidden .linkish, .praisehiddenlist .linkish { min-height:44px; } } .pill.bad { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); } .draftbox { width:100%; min-height:16rem; font-family:ui-monospace,Consolas,monospace; font-size:0.78rem; line-height:1.5; } .winquick .btn { flex:0 0 auto; white-space:nowrap; } .careerjob + .subtabwrap { margin-top:0.4rem; } /* THE TIMESHEET (083): a week grid, places down the side and days across. It scrolls sideways inside its own box on a phone, the place column staying put, so the page itself never does. */ /* The timer (Your Timesheets, 1 October 2026): a strip over every screen while it runs, and a card on the week. */ /* Solid, and it stays at the top as the page scrolls, so a running timer is never out of sight. */ .ttimer { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.85rem; margin:0 0 0.9rem; border:1px solid var(--time); border-radius:8px; background:var(--time); color:#FFFFFF; font-size:0.95rem; position:sticky; top:0.4rem; z-index:30; box-shadow:0 4px 14px rgba(139,90,11,0.28); } .ttimer .tdot { background:#FFFFFF; width:0.7rem; height:0.7rem; } .ttimer .ttick { color:#FFFFFF; font-size:1.25rem; } .ttimer .btn { background:#FFFFFF; color:var(--time); border-color:#FFFFFF; } .ttimer .btn.tstop { font-weight:700; } /* Past ten hours (answer 13). */ .ttimer .tlongsay { display:none; } .ttimer.long { background:#A3382E; border-color:#A3382E; box-shadow:0 4px 14px rgba(163,56,46,0.3); } .ttimer.long .tlongsay { display:inline; } .ttimer.long .btn { color:#A3382E; } .ttimercard.long { border-color:#A3382E; background:#FBEDEB; } @media (max-width:939px) { .ttimer { top:0.25rem; font-size:0.85rem; } .ttimer .ttick { font-size:1.05rem; } } .tnavrun { display:inline-flex; align-items:center; gap:0.3rem; margin-left:0.45rem; padding:0.05rem 0.45rem; border-radius:999px; background:var(--time); color:#FFFFFF; font-size:0.66rem; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; } .tnavrun .tdot { background:#FFFFFF; width:0.4rem; height:0.4rem; } /* TIMESHEETS TO SEND, ON YOUR TIMESHEETS IN THE MENU (James, 7 October 2026): a team's periods sent back or due. The warning colours the Sent back and Due pills use on Week and timer, so the two read as the same thing. */ .tapprnav { display:inline-flex; align-items:center; gap:0.2rem; margin-left:0.45rem; padding:0.05rem 0.45rem; border-radius:999px; background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); font-size:0.66rem; font-weight:600; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; white-space:nowrap; } .tapprnav b { font-weight:800; } .bb .bbrun { color:var(--time); font-weight:750; font-variant-numeric:tabular-nums; } .tquiet { color:var(--muted); } .thidden { margin-top:1.4rem; } .thidden summary { cursor:pointer; color:var(--muted); font-size:0.85rem; } .ttimer .grow { min-width:0; overflow-wrap:anywhere; } .ttick { font-variant-numeric:tabular-nums; font-weight:700; color:var(--time); } .ttick.big { font-size:1.35rem; } .tdot { display:inline-block; width:0.55rem; height:0.55rem; border-radius:50%; background:var(--time); flex:0 0 auto; animation:tpulse 1.6s ease-in-out infinite; } @keyframes tpulse { 50% { opacity:0.35; } } @media (prefers-reduced-motion:reduce) { .tdot { animation:none; } } .ttimercard { border-color:var(--time-line); } .tsent { background:#E8F4EC; color:#1E6B3A; border-color:#BFDDC9; } .tsentrow { margin-left:auto; } .ttimercard:has(.ttick) { background:var(--time-soft); border:2px solid var(--time); } .ttimercard select, .taddrow select { min-width:11rem; width:auto; } .ttimercard select:disabled, .taddrow select:disabled { opacity:0.55; } .tpickhead { flex:1 0 100%; font-size:0.95rem; } .taddrow { margin-top:0.9rem; border:2px dashed var(--time-line); background:var(--time-soft); } .tcellbtn.trun { border-color:var(--time); } .tcellbtn .tdot { margin-right:0.25rem; width:0.45rem; height:0.45rem; } .tplace select.tkind { width:auto; min-width:10rem; } /* CLIENT, THEN PROJECT, THEN TASK (James, 3 October 2026). Every level is a row of the same four columns: what it is, its actions, hours this month, hours in all. Each nested level is indented on the left only, and the client's row is inset on the right by the project card's own padding, so the two columns of hours line up down the card. */ .tplace { --tinset:calc(0.65rem + 1px); } .tlvl { display:grid; grid-template-columns:minmax(0, 1fr) auto 6.6rem 5.2rem; gap:0.3rem 0.6rem; align-items:center; } @media (min-width:601px) { .tlvlnum span { white-space:nowrap; } } .tlvl-place { padding-right:var(--tinset); align-items:start; } .tlvlname { min-width:0; overflow-wrap:anywhere; } .tplacename { font-size:1.05rem; } .tlvlacts { display:flex; flex-wrap:wrap; gap:0.35rem; justify-content:flex-end; } .tlvlnum { text-align:right; font-variant-numeric:tabular-nums; line-height:1.25; } .tlvlnum b { display:block; font-size:0.95rem; color:var(--ink); } .tlvlnum span { display:block; font-size:0.7rem; color:var(--muted); } .tlvl-place .tlvlnum b { font-size:1.1rem; } .tlvlhead { padding:0 var(--tinset) 0 0; margin-top:0.35rem; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } .tlvlhead span:nth-child(n+3) { text-align:right; } .tplacebar { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; margin-top:0.55rem; } .tplacerates { margin-top:0; } /* Projects, tasks, rates and budgets (Your Timesheets, part B). */ .tprojs { margin-top:0.7rem; padding-top:0.6rem; border-top:1px solid var(--line); display:grid; gap:0.55rem; } .tproj { margin-left:1.1rem; border:1px solid var(--line); border-left:3px solid var(--time); border-radius:0 8px 8px 0; padding:0.55rem 0.65rem 0.55rem 0.8rem; background:var(--paper); } .tproj.archived { opacity:0.75; border-left-color:var(--time-line); } .tnum { font-size:0.95rem; color:var(--ink); font-variant-numeric:tabular-nums; } .ttasks { list-style:none; margin:0.5rem 0 0 0.9rem; padding:0; border-left:1px solid var(--time-line); } .ttask { padding:0.3rem 0 0.3rem 0.75rem; border-top:1px solid var(--line); font-size:0.85rem; } .ttask:first-child { border-top:0; } .ttask .btn.small { padding:0.12rem 0.5rem; } .ttask.archived { opacity:0.6; } /* The boxes that add a project or a task: amber, and nothing else on the card is. */ .tadd { display:flex; flex-wrap:wrap; gap:0.35rem 0.7rem; align-items:center; border:1.5px dashed var(--time); border-radius:8px; background:var(--time-soft); color:var(--time); padding:0.5rem 0.65rem; } .tadd .small, .tadd .tiny { color:var(--time); } .tadd-task { margin:0.35rem 0 0.1rem 0.75rem; padding:0.35rem 0.55rem; border-width:1px; } .taddbtn::before { content:"+"; font-weight:800; margin-right:0.35rem; } .tadd-task .taddbtn { background:#FFFFFF; border-color:var(--time); color:var(--time); font-weight:650; } .tadd-task .taddbtn:hover { background:var(--time); color:#FFFFFF; } .tadd-proj .taddbtn { font-size:0.88rem; padding:0.4rem 0.85rem; } @media (max-width:600px) { /* A phone: what it is and the two figures on the first line, the actions under it. */ .tlvl { grid-template-columns:minmax(0, 1fr) 3.7rem 3.7rem; } .tlvlacts { grid-column:1 / -1; grid-row:2; justify-content:flex-start; } .tlvlhead span:nth-child(2) { display:none; } .tproj { margin-left:0.45rem; } .ttasks { margin-left:0.35rem; } .ttask { padding-left:0.55rem; } .tadd-task { margin-left:0.55rem; } } .tbudget { display:flex; align-items:center; gap:0.5rem; margin-top:0.4rem; } .tbar { flex:0 0 9rem; height:0.45rem; border-radius:999px; background:var(--line); overflow:hidden; } .tbar span { display:block; height:100%; background:var(--chart, #2F6FD6); } .tbudget.warn .tbar span { background:#B7791F; } .tbudget.over .tbar span { background:var(--danger); } .tbudget.over .tiny { color:var(--danger); } .tbudgetnote { border-color:var(--time-line); background:var(--time-soft); } .tdefaults { border-color:var(--time-line); } .tupsell { border-style:dashed; } .tarch summary { cursor:pointer; color:var(--muted); } .tplay { border:1px solid var(--line); background:var(--paper); color:var(--time); border-radius:50%; width:1.5rem; height:1.5rem; font-size:0.6rem; line-height:1; cursor:pointer; margin-right:0.4rem; vertical-align:middle; padding:0; } .tplay:hover, .tplay:focus-visible { border-color:var(--time); } /* Reports (Your Timesheets, parts C and in depth): a standard chart blue and a client palette on neutral tiles. */ .tcontrols select, .tcontrols input { width:auto; min-width:9rem; } .ttiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:0.6rem; } .ttiles > div { border:1px solid var(--line); border-radius:8px; padding:0.65rem 0.8rem; background:var(--paper); } .ttiles span { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } .ttiles b { display:block; font-size:1.4rem; font-variant-numeric:tabular-nums; color:var(--ink); } .tchange { display:block; font-size:0.74rem; color:var(--muted); margin-top:0.1rem; } .tchange.up { color:#1E6B3A; } .tchange.down { color:#A3382E; } .trep { border-collapse:collapse; width:100%; min-width:32rem; font-variant-numeric:tabular-nums; } .trep th, .trep td { padding:0.45rem 0.6rem; border-bottom:1px solid var(--line); text-align:right; font-size:0.85rem; } .trep th:first-child { text-align:left; overflow-wrap:anywhere; } .trep thead th { font-size:0.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; } .trep tfoot th, .trep tfoot td { font-weight:700; border-bottom:0; border-top:2px solid var(--ink); } .trep td.tdates { text-align:left; white-space:nowrap; color:var(--muted); font-weight:400; } .tdates-in { display:none; } .ttree tr.lvl0 th, .ttree tr.lvl0 td { font-weight:700; background:#F6F8FB; } .ttree tr.lvl1 th { padding-left:1.6rem; font-weight:600; } .ttree tr.lvl2 th { padding-left:3rem; font-weight:400; color:var(--muted); } .ttree tr.lvl2 td { color:var(--muted); } /* Every entry, with notes (3 October 2026): text columns read left, subtotal rows as in the tree. */ .tdetail { min-width:62rem; } .tdetail td { text-align:left; vertical-align:top; } .tdetail td.n, .tdetail tr.tsub td, .tdetail tfoot td { text-align:right; white-space:nowrap; } .tdetail tr.tsub th { text-align:left; } .tdetail tr.lvl0 th, .tdetail tr.lvl0 td { font-weight:700; background:#F6F8FB; } .tdetail tr.lvl1 th, .tdetail tr.lvl1 td { font-weight:650; background:#FAFBFC; padding-left:1.2rem; } .tdetail tr.lvl2 th, .tdetail tr.lvl2 td { font-weight:600; color:var(--muted); padding-left:2.2rem; } .tdetail tr.tdline td:first-child { white-space:nowrap; padding-left:2.2rem; } .tdetail thead th, .tdetail tr.tdline td:nth-child(2), .tdetail tr.tdline td:nth-child(3) { white-space:nowrap; } .tdetail td.tdnote { min-width:14rem; max-width:28rem; white-space:pre-line; overflow-wrap:anywhere; } .tkey { display:inline-block; width:0.65rem; height:0.65rem; border-radius:2px; margin-right:0.45rem; vertical-align:-0.02em; } .tshare { display:grid; gap:0.45rem; } .tsharerow { display:grid; grid-template-columns:minmax(6rem, 14rem) 1fr auto; gap:0.6rem; align-items:center; font-size:0.85rem; } .tsharename { overflow-wrap:anywhere; } .tsharebar { height:0.6rem; border-radius:999px; background:var(--line); overflow:hidden; } .tsharebar span { display:block; height:100%; background:var(--chart, #2F6FD6); } .tsharenum { font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; } /* The twelve months fill whatever width they are given. */ .tmonths { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(0.2rem, 1vw, 0.9rem); height:300px; align-items:end; border-bottom:1px solid var(--line); padding-top:0.4rem; } .tmc { display:grid; grid-template-rows:auto 1fr; height:100%; min-width:0; text-align:center; position:relative; } .tmcv { font-size:0.78rem; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; min-height:1.2rem; white-space:nowrap; } .tmcbar { display:flex; flex-direction:column-reverse; justify-content:flex-start; height:100%; border-radius:4px 4px 0 0; overflow:hidden; } .tmcbar span { display:block; width:100%; opacity:0.78; } .tmc.now .tmcbar span { opacity:1; } .tmcl, .tmch { position:absolute; left:0; right:0; font-size:0.74rem; color:var(--muted); } .tmcl { bottom:-1.45rem; } .tmch { bottom:-2.6rem; font-size:0.66rem; } .tmc.now .tmcl { color:var(--ink); font-weight:700; } .tchart { padding-bottom:3rem; } .tlegend { display:flex; flex-wrap:wrap; gap:0.4rem 1rem; margin-top:3rem; font-size:0.8rem; color:var(--muted); } .tpattern .tfacts { display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:0.6rem 1rem; } .tfacts b { display:block; font-size:1.2rem; font-variant-numeric:tabular-nums; } .tfacts span { font-size:0.78rem; color:var(--muted); } .tweekbars { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0.5rem; height:140px; margin-top:1rem; } .twb { display:grid; grid-template-rows:auto 1fr auto; text-align:center; min-width:0; } .twbv { font-size:0.72rem; color:var(--ink); font-variant-numeric:tabular-nums; min-height:1rem; } .twbbar { display:flex; align-items:flex-end; } .twbbar span { display:block; width:100%; background:var(--chart, #2F6FD6); border-radius:3px 3px 0 0; } .twbl { font-size:0.72rem; color:var(--muted); margin-top:0.2rem; } /* The PDF timesheet. */ /* An invoice (Your Timesheets, part F), on screen in its window and on its own print sheet. */ .invwrap { border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; background:#FFFFFF; color:#1A1D21; } .inv { font-size:0.88rem; } .inv.void { opacity:0.55; } .inv-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-bottom:2px solid #164E52; padding-bottom:0.7rem; } .inv-kicker { font-size:0.7rem; font-weight:750; letter-spacing:0.1em; text-transform:uppercase; color:#164E52; } .inv-from { font-size:1.25rem; font-weight:700; margin:0.15rem 0; } .inv-small { color:#5A6169; font-size:0.82rem; overflow-wrap:anywhere; } .inv-meta { display:grid; grid-template-columns:auto auto; gap:0.15rem 0.8rem; margin:0; } .inv-meta div { display:contents; } .inv-meta dt { color:#5A6169; font-size:0.78rem; } .inv-meta dd { margin:0; font-weight:650; text-align:right; } .inv-to { margin:0.9rem 0 0.4rem; } .inv-to span { display:block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#5A6169; } .inv-period { margin-bottom:0.5rem; } .inv-lines { width:100%; border-collapse:collapse; margin-top:0.4rem; font-variant-numeric:tabular-nums; } .inv-lines th, .inv-lines td { padding:0.4rem 0.45rem; border-bottom:1px solid #E3E5E8; text-align:left; vertical-align:top; } .inv-lines thead th { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:#5A6169; border-bottom:1.5px solid #1A1D21; } .inv-lines .n { text-align:right; white-space:nowrap; } .inv-totals { margin:0.6rem 0 0 auto; width:min(100%, 18rem); display:grid; grid-template-columns:1fr auto; gap:0.2rem 1rem; font-variant-numeric:tabular-nums; } .inv-totals div { display:contents; } .inv-totals dt { color:#5A6169; } .inv-totals dd { margin:0; text-align:right; } .inv-totals .total dt, .inv-totals .total dd { font-weight:750; color:#1A1D21; font-size:1rem; border-top:1.5px solid #1A1D21; padding-top:0.3rem; } .inv-pay { margin-top:0.9rem; padding:0.6rem 0.75rem; background:#F3F6F8; border-radius:6px; } .inv-notes { margin-top:0.6rem; } .inv-foot { display:flex; align-items:center; gap:0.6rem; margin-top:1.2rem; padding-top:0.5rem; border-top:1px solid #E3E5E8; font-size:0.72rem; color:#8A8F98; } .inv-foot img { height:14px; width:auto; } .tsetaside .tbig { font-size:1.2rem; font-variant-numeric:tabular-nums; } .tsetaside .trep { min-width:0; } /* THE TAX AND GST PAGE (James, 10 October 2026; its own page in the menu since the same day). The banner stands out at the top, with the one-time tick box under its words (the tax figures legal review, 3.4); each block says its rate year; the sections sit two across on a computer and stack on a phone; eight figures are 4 by 2. */ .ttaxack { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.9rem; margin-top:0.7rem; padding-top:0.6rem; border-top:1px solid var(--line); } .ttaxack label { display:flex; align-items:flex-start; gap:0.5rem; flex:1 1 22rem; margin:0; font-weight:600; cursor:pointer; } .ttaxack input[type=checkbox] { width:auto; margin-top:0.2rem; flex:none; } .ttaxyear { font-size:0.72rem; font-weight:600; color:var(--muted); white-space:nowrap; margin-left:0.3rem; } .inv-estimate { margin-top:0.8rem; font-size:0.72rem; } .ttaxnote { border-left:4px solid var(--time); background:var(--time-soft); line-height:1.5; } .ttaxdue { border-left:4px solid var(--time); } /* EIGHT FIGURES, 4 BY 2 (James, 10 October 2026: "To be billed" beside Earned, and no tile alone on a row). Four across on a computer, two across on a phone and a narrow window: eight divides by both, so every row is full at every width. */ .ttaxtiles { grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:0.4rem; } .ttaxtiles .tchange a, .ttaxtiles .tchange .linkish { font-size:inherit; white-space:nowrap; } /* One press from a figure to the setting behind it: a link inside a sentence takes the sentence's size. */ .ttaxset { font-size:inherit; } .tsetaside td .ttaxset { white-space:nowrap; } .ttaxstrip { margin:0.6rem 0 0; line-height:1.7; } .ttaxzero { margin-top:0.5rem; padding:0.45rem 0.6rem; border-left:3px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; } /* The $60,000 note for somebody not GST registered: the same calm note, with a heavier edge once the threshold is reached. */ .ttaxthresh.ttaxover { border-left-width:5px; } .ttaxsetup { margin-top:0.7rem; border-left:4px solid var(--time); } .ttaxsetupgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap:0.6rem 0.9rem; margin-top:0.6rem; align-items:end; } .ttaxtiles span .help { text-transform:none; letter-spacing:0; } .ttaxgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap:0 1.1rem; align-items:start; } .ttaxgrid > .ttaxblock { min-width:0; } .ttax { min-width:0; } .ttax th { font-weight:600; } .ttaxwhy { display:block; font-weight:400; margin-top:0.1rem; } /* NO INNER SCROLL BARS (James, 10 October 2026). The narrow tables on the page (money to set aside, your tax savings, the GST boxes, the instalments) show in full at every width: no overflow box, so nothing inside them (a "?" and its tip) can make a scroll bar. Wide tables (GST periods, costs, clients) keep their own sideways scroll only. */ .twrap.tfit { overflow:visible; } .twrap.tfit .trep { min-width:0; } .ttaxwhnote { border-left:4px solid var(--time); } .ttaxnow th, .ttaxnow td { background:var(--time-soft); } .ttaxlist { margin:0.5rem 0 0; padding-left:1.1rem; } .ttaxlist li { margin:0.15rem 0; } .ttaxshort { margin-top:0.35rem; } .ttaxsrc { margin-top:1rem; } .ttaxsrc summary { cursor:pointer; font-weight:650; } .ttaxsrc ul { margin:0.5rem 0 0; padding-left:1.1rem; } .ttxhead { margin:0.9rem 0 0.2rem; } @media (max-width:1100px) { .ttaxtiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* THE EIGHT ADDITIONS (James, 14 October 2026). The page is a set of views with a strip of links under "Your settings"; each grows to fill its row, so the strip is full at every width. What is left after tax and costs is one band above the eight figures: the figure on the left, its workings filling the rest. The charts are plain SVG in the amber of Your Timesheets on white; every one has its figures in words or a table beside it. */ .ttaxviews { display:flex; flex-wrap:wrap; gap:0.3rem; margin:0.7rem 0 0; padding:0.3rem; border:1px solid var(--time-line); border-radius:10px; background:var(--time-soft); } .ttaxvw { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:40px; padding:0.3rem 0.8rem; border-radius:7px; font-weight:650; font-size:0.88rem; color:var(--time); text-decoration:none; white-space:nowrap; } .ttaxvw:hover { background:#FFFFFF; } .ttaxvw.on { background:var(--time); color:#FFFFFF; } .ttaxvw:focus-visible { outline:2px solid var(--time); outline-offset:2px; } .ttaxpart + .ttaxpart { margin-top:1.5rem; padding-top:0.3rem; border-top:2px solid var(--time-line); } .ttaxnone { margin-top:0.5rem; padding:0.45rem 0.6rem; border-left:3px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; } .ttaxlead { margin:0 0 0.55rem; } .ttaxleft { display:grid; grid-template-columns:minmax(15rem, auto) minmax(0, 1fr); gap:0.55rem 1.2rem; align-items:center; margin-top:0.5rem; padding:0.8rem 0.95rem; border:1px solid var(--time-line); border-left:5px solid var(--time); border-radius:8px; background:var(--time-soft); } .ttaxleftfig > span { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--time); } .ttaxleftfig > span .help { text-transform:none; letter-spacing:0; } .ttaxleftfig > b { display:block; font-size:2rem; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--ink); } .ttaxleftfig > small { display:block; font-size:0.76rem; color:var(--ink); } .ttaxleftsum { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.5rem; } .ttaxleftsum > div { position:relative; padding:0.5rem 0.7rem 0.5rem 1.7rem; border:1px solid var(--time-line); border-radius:8px; background:#FFFFFF; } .ttaxleftsum > div:first-child { padding-left:0.7rem; } .ttaxleftsum i { position:absolute; left:0.6rem; top:0.42rem; font-style:normal; font-weight:700; font-size:1.15rem; color:var(--time); } .ttaxleftsum b { display:block; font-size:1.15rem; font-variant-numeric:tabular-nums; } .ttaxleftsum small { display:block; font-size:0.74rem; color:var(--muted); } .ttaxleftsum > div:last-child { border-color:var(--time); } .ttaxleftline { grid-column:1 / -1; color:var(--ink); } .ttaxleftwhy { font-size:0.88rem; line-height:1.5; } .ttaxowed { margin-top:0.2rem; } .ttaxowedgst, .ttaxunsent { margin-top:0.45rem; } .ttaxages td a { font-weight:650; } .ttaxonly { border-left:4px solid var(--time); background:var(--time-soft); margin-bottom:0.6rem; } .ttaxmore { margin-top:0.2rem; } .ttaxmore summary { cursor:pointer; color:var(--muted); font-size:0.8rem; } .ttaxchartcard { padding:0.7rem 0.8rem 0.65rem; margin-bottom:0.7rem; } .ttaxchart, .ttaxbracket { display:block; height:auto; } .ttaxchart text, .ttaxbracket text { font-family:inherit; } .ttaxax { font-size:11px; fill:#5A6169; } .ttaxax.now { font-weight:700; fill:#1A1D21; } .ttaxax.fut { fill:#8A8F98; } .ttaxval { font-size:11px; font-weight:650; fill:#1A1D21; } .ttaxgridl { stroke:#E3E5E8; stroke-width:1; } .ttaxsel { fill:#FBF3E4; } .ttaxhit { fill:transparent; cursor:pointer; } .ttaxhit:hover { fill:rgba(139, 90, 11, 0.08); } .ttaxlegend { margin-top:0.5rem; } .ttaxmonths th .linkish, .ttaxperbtn { font-weight:650; } .ttaxfuture th { font-weight:400; color:var(--muted); } .ttaxpicked th, .ttaxpicked td { background:var(--time-soft); } .ttaxpicked th:first-child { box-shadow:inset 3px 0 0 var(--time); } .ttaxmonthnote { margin-top:0.4rem; } .ttaxprofitwrap .trep { min-width:30rem; } .ttaxprofit tr.lvl0 th, .ttaxprofit tr.lvl0 td, .ttaxproj tr.lvl0 th, .ttaxproj tr.lvl0 td { font-weight:700; background:#F6F8FB; } .ttaxprofit tr.ttaxcat th { padding-left:1.5rem; font-weight:400; } .ttaxprofit tr.ttaxsub th, .ttaxprofit tr.ttaxsub td { font-weight:650; } .ttaxprofit tr.ttaxtot th, .ttaxprofit tr.ttaxtot td, .ttaxproj tr.ttaxtot th, .ttaxproj tr.ttaxtot td { font-weight:700; border-top:2px solid var(--ink); } .ttaxprofit td.ttaxnoprev { text-align:left; vertical-align:middle; white-space:normal; color:var(--ink); background:var(--time-soft); border-left:3px solid var(--time); font-size:0.85rem; line-height:1.5; } .ttaxperiod { margin-top:0.7rem; } .ttaxperiod > .card { border-left:4px solid var(--time); } .ttaxlinesgrid { gap:0 1.1rem; } .ttaxlinesgrid h4 { margin:0.8rem 0 0.4rem; } .ttaxlines tbody td:nth-child(2), .ttaxlines tbody td:nth-child(3) { text-align:left; } .ttaxlines tbody td:nth-child(2) { white-space:nowrap; } .ttaxdates { list-style:none; margin:0.7rem 0 0; padding:0; border-top:1px solid var(--line); } .ttaxdate { display:grid; grid-template-columns:10.5rem minmax(0, 1fr) minmax(10rem, auto); gap:0.15rem 1rem; align-items:baseline; padding:0.55rem 0.3rem 0.55rem 0.8rem; border-bottom:1px solid var(--line); border-left:4px solid var(--time-line); font-size:0.88rem; } .ttaxdate.k-gst { border-left-color:#E3B765; } .ttaxdate.k-prov { border-left-color:#8B5A0B; } .ttaxdate.k-terminal { border-left-color:#2E4A57; } .ttaxdate.k-acc { border-left-style:dashed; border-left-color:#8A8F98; } .ttaxdate.next { background:var(--time-soft); } .ttaxdateday { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; } .ttaxdateamt { text-align:right; } .ttaxdateamt b { font-variant-numeric:tabular-nums; } .ttaxdateamt small { font-size:0.76rem; color:var(--muted); } .ttaxcover { padding:0.5rem 0.7rem; border-left:3px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; } .ttaxproj tr.ttaxapart th, .ttaxproj tr.ttaxapart td { font-weight:400; color:var(--muted); } .ttaxwhat { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.55rem; margin-top:0.8rem; padding-top:0.7rem; border-top:1px solid var(--line); } .ttaxwhat > div { display:grid; grid-template-columns:minmax(0, 15rem) minmax(0, 1fr); gap:0.3rem 0.9rem; align-items:center; } .ttaxwhat label { display:block; margin:0; font-size:0.82rem; font-weight:650; } .ttaxwhat > .btn { justify-self:start; } .ttaxslide { display:grid; grid-template-columns:minmax(0, 1fr) 5.4rem; gap:0.5rem; align-items:center; } .ttaxslide input[type=range] { width:100%; min-width:0; min-height:36px; padding:0; border:0; background:none; accent-color:var(--time); } .ttaxslide input[type=number] { width:100%; min-width:0; } .ttaxbracket { margin:0.7rem 0 0.2rem; } .ttaxbrk { font-size:12px; font-weight:700; fill:#1A1D21; } .ttaxbrk.inv { fill:#FFFFFF; } .ttaxmark { font-size:12px; font-weight:700; fill:#1A1D21; } .ttaxeff { margin-top:0.4rem; } .ttaxnext { margin-top:0.6rem; padding:0.6rem 0.75rem; border-left:4px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; font-size:0.95rem; line-height:1.45; } @media (max-width:1100px) { .ttaxleft { grid-template-columns:minmax(0, 1fr); } .ttaxleftsum { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:700px) { .ttaxdate { grid-template-columns:minmax(0, 1fr); } .ttaxdateamt { text-align:left; } .ttaxwhat > div { grid-template-columns:minmax(0, 1fr); } } @media screen and (max-width:599px) { table.trep.ttax.tstack tfoot { display:block; } table.trep.ttax.tstack tfoot tr { border-color:var(--ink); } table.trep.ttax.tstack tr.ttaxfuture td { display:none; } table.trep.ttax.tstack th[colspan] { display:block; } } #tsprint { display:none; } @media print { body.tsprinting > *:not(#tsprint) { display:none !important; } body.tsprinting #tsprint { display:block; color:#1A1D21; font-size:9.5pt; padding:0 14mm; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } #tsprint .tsp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; border-bottom:3px solid #164E52; padding-bottom:4mm; } #tsprint .tsp-kicker { font-size:8pt; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#164E52; } #tsprint .tsp-name { font-size:20pt; font-weight:700; margin-top:1mm; } #tsprint .tsp-sub { color:#5A6169; margin-top:1mm; } #tsprint .tsp-meta { text-align:right; color:#5A6169; font-size:8.5pt; } #tsprint .tsp-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:3mm; margin:5mm 0 2mm; } #tsprint .tsp-tiles div { border:1px solid #D5D8DC; border-radius:2mm; padding:2.5mm 3mm; } #tsprint .tsp-tiles span { display:block; font-size:7pt; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#5A6169; } #tsprint .tsp-tiles b { font-size:14pt; } #tsprint .tsp-h { font-size:9pt; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#164E52; margin:6mm 0 2mm; } #tsprint table { width:100%; border-collapse:collapse; } #tsprint th, #tsprint td { padding:1.6mm 2mm; text-align:left; vertical-align:top; border-bottom:0.3mm solid #E3E5E8; } #tsprint thead th { font-size:7.5pt; text-transform:uppercase; letter-spacing:0.06em; color:#5A6169; border-bottom:0.5mm solid #1A1D21; } #tsprint tfoot th, #tsprint tfoot td { border-top:0.5mm solid #1A1D21; border-bottom:0; font-weight:700; } #tsprint .tsp-tree td, #tsprint .tsp-tree tfoot td { text-align:right; } #tsprint .tsp-tree tr.lvl0 th, #tsprint .tsp-tree tr.lvl0 td { font-weight:700; background:#F3F6F8; } #tsprint .tsp-tree tr.lvl1 th { padding-left:6mm; } #tsprint .tsp-tree tr.lvl2 th, #tsprint .tsp-tree tr.lvl2 td { padding-left:11mm; color:#5A6169; } #tsprint .tsp-tree td.tdates, #tsprint .tsp-tree tr.lvl2 td.tdates { text-align:left; white-space:nowrap; padding-left:2mm; font-weight:400; color:#5A6169; } #tsprint .tsp-rows tbody tr:nth-child(even) td { background:#F8F9FA; } #tsprint tr { break-inside:avoid; } #tsprint .tsp-small { font-size:7.5pt; color:#5A6169; margin-top:2mm; } #tsprint .tsp-sign { display:grid; grid-template-columns:1fr 1fr; gap:10mm; margin-top:10mm; break-inside:avoid; } #tsprint .tsp-sign span { display:block; font-size:8pt; color:#5A6169; } #tsprint .tsp-sign i { display:block; border-bottom:0.3mm solid #1A1D21; height:9mm; margin-bottom:2mm; } #tsprint .tsp-signed { margin:5mm 0 2mm; padding:3mm 4mm; border:0.4mm solid #1E5631; border-radius:2mm; break-inside:avoid; } #tsprint .tsp-signed span { display:block; font-size:8.5pt; } #tsprint .tsp-signed span:first-child { font-weight:700; font-size:10pt; } #tsprint .tsp-sig { display:block; width:60mm; height:20mm; margin:2mm 0; } #tsprint .tsp-warn { color:#8B2020; font-weight:700; margin-top:1mm; } #tsprint .tsp-foot { display:flex; align-items:center; gap:4mm; margin-top:10mm; border-top:0.3mm solid #D5D8DC; padding-top:3mm; font-size:7.5pt; color:#5A6169; break-inside:avoid; } #tsprint .tsp-rows td:first-child { white-space:nowrap; } #tsprint .tsp-foot img { height:5.5mm; width:auto; } #tsprint .tkey { display:none; } #tsprint .inv { font-size:10pt; } #tsprint .tsp-disclaim { font-size:8pt; border:0.4mm solid #8B5A0B; border-radius:2mm; padding:2mm 3mm; margin:4mm 0 0; } /* The accountant pack's last page, "How these figures were worked out", on a sheet of its own. */ #tsprint .tsp-how { break-before:page; page-break-before:always; } #tsprint .tsp-howh { font-size:15pt; font-weight:700; margin:1mm 0 2mm; } #tsprint .tsp-how td { text-align:left; vertical-align:top; font-size:8.5pt; } #tsprint .tsp-how td:first-child { width:34%; font-weight:600; } #tsprint .tsp-list { margin:0; padding-left:5mm; font-size:8.5pt; } #tsprint .tsp-list li { margin:0.8mm 0; break-inside:avoid; } #tsprint .tsp-url { font-size:7pt; color:#5A6169; word-break:break-all; } /* The pack's profit summary, on a sheet of its own before the last page, and a GST period's worksheet (14 October 2026). */ #tsprint .tsp-profit { break-before:page; page-break-before:always; } #tsprint .n { text-align:right; white-space:nowrap; } #tsprint .tsp-profit td, #tsprint .tsp-boxes td { font-size:9.5pt; } #tsprint .tsp-profit tr.k-cat td:first-child { padding-left:7mm; color:#5A6169; } #tsprint .tsp-profit tr.k-income td, #tsprint .tsp-profit tr.k-profit td, #tsprint .tsp-profit tr.k-costs td { font-weight:700; } #tsprint .tsp-profit tr.k-income td, #tsprint .tsp-profit tr.k-profit td { background:#F3F6F8; } #tsprint .tsp-profit tr.k-left td { font-weight:700; border-top:0.5mm solid #1A1D21; border-bottom:0; } #tsprint .tsp-boxes td:first-child { width:14%; font-weight:700; white-space:nowrap; } #tsprint .tsp-boxes tr:last-child td { font-weight:700; border-top:0.5mm solid #1A1D21; border-bottom:0; } } /* Today, on a phone (answer 11). */ .ttoday-head { display:flex; justify-content:space-between; align-items:baseline; margin:0.4rem 0 0.6rem; } .ttoday-row { border:1px solid var(--line); border-radius:10px; padding:0.75rem 0.85rem; margin-bottom:0.6rem; background:var(--paper); display:grid; grid-template-columns:1fr auto; gap:0.5rem 0.8rem; align-items:center; } .ttoday-row.on { border:2px solid var(--time); background:var(--time-soft); } .ttoday-name { min-width:0; overflow-wrap:anywhere; } .ttoday-name span { display:block; } .ttoday-hrs { text-align:right; } .ttoday-hrs b { display:block; font-size:1.4rem; font-variant-numeric:tabular-nums; } .ttoday-acts { grid-column:1 / -1; display:grid; grid-template-columns:2fr 1fr 1fr auto auto; gap:0.4rem; } .ttoday-acts .btn { min-height:44px; justify-content:center; } .ttoday-go [data-tick] { font-variant-numeric:tabular-nums; margin-left:0.3rem; } .twrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--paper); } .tgrid { border-collapse:collapse; width:100%; min-width:40rem; font-variant-numeric:tabular-nums; } .tgrid th, .tgrid td { padding:0.35rem 0.3rem; border-bottom:1px solid var(--line); text-align:center; font-size:0.85rem; } .tgrid thead th:first-child { text-align:left; } .tgrid thead th { font-size:0.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; } .tgrid thead th span { display:block; font-size:0.95rem; color:var(--ink); letter-spacing:0; text-transform:none; } .tgrid tbody th, .tgrid tfoot th { text-align:left; font-weight:650; position:sticky; left:0; background:var(--paper); min-width:8rem; max-width:12rem; overflow-wrap:anywhere; } .tgrid tbody th .tiny { display:block; font-weight:400; } .tgrid tfoot td, .tgrid tfoot th { border-bottom:0; font-weight:700; } .tgrid td { position:relative; white-space:nowrap; } .tgrid .ttoday { background:var(--time-soft); } .tgrid .ttot { font-weight:700; } .tgrid .tcell { width:3.6rem; min-width:0; padding:0.35rem 0.2rem; text-align:center; font:inherit; } .tcellbtn { border:1px solid var(--line); border-radius:6px; background:var(--accent-soft); cursor:pointer; color:var(--ink); } .tmore { border:1px solid transparent; border-radius:6px; background:none; color:var(--muted); cursor:pointer; padding:0.1rem 0.3rem; margin-left:0.15rem; font-size:1.1rem; font-weight:700; line-height:1; vertical-align:middle; } .tmore:hover, .tmore:focus-visible { border-color:var(--line); } .tmore:hover, .tmore:focus-visible { color:var(--ink); } .tentry { border:1px solid var(--line); border-radius:8px; padding:0.5rem 0.7rem 0.7rem; margin:0.7rem 0 0; } .tentry textarea { width:100%; } /* THE DAY'S WINDOW (James, 3 October 2026): grouped fields, compact cards for what is logged, the new entry apart, and the Cancel and Save row stuck to the foot with a rule above it. One column of groups at 390px. */ .mbox:has(.tdaydlg) { max-width:640px; } .mbox:has(.tdaydlg) .mactions { border-top:1px solid var(--line); box-shadow:0 -6px 12px rgba(26,29,33,0.06); } .tentries { margin-top:0.8rem; } .tentries .tentry { margin-top:0.45rem; } .tentry-old { padding:0.5rem 0.65rem; } .tentryhead { display:flex; gap:0.5rem 0.8rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; } .tentrysum { display:flex; flex-direction:column; gap:0.1rem; min-width:0; flex:1 1 14rem; overflow-wrap:anywhere; } .tentryhrs { font-size:1.05rem; font-variant-numeric:tabular-nums; } .tentryhrs span { font-size:0.8rem; font-weight:500; color:var(--muted); } .tentrynote { color:var(--ink); white-space:pre-line; } .tentryacts { display:flex; gap:0.35rem; flex-wrap:wrap; } .tentryform { margin-top:0.5rem; padding-top:0.4rem; border-top:1px solid var(--line); } .tentry-new { margin-top:1rem; border:1.5px solid var(--time-line); background:var(--time-soft); padding:0.6rem 0.75rem 0.75rem; } .tnewhead { margin:0 0 0.2rem; font-size:0.88rem; color:var(--time); } .tgroup { margin-top:0.5rem; } .tgrouphead { font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin:0 0 0.2rem; } .tgroupcols { display:grid; gap:0.5rem; align-items:end; } .tgroupcols > div { min-width:0; } .tgroupcols input, .tgroupcols select { width:100%; min-width:0; } .tcols4 { grid-template-columns:repeat(4, minmax(0, 1fr)); } .tcols2 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .tgroupnote label { margin-top:0; } @media (max-width:600px) { .tcols4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .tcols2 { grid-template-columns:minmax(0, 1fr); } } .thist { padding-left:1.2rem; margin:0.4rem 0 0; } .thist li { margin:0 0 0.5rem; } /* WEEK VIEW AND LIST VIEW, LOG TIME, PROJECT AND TASK SAID PLAINLY, AND NOTES (James, 3 October 2026). */ .tviewbar { display:flex; flex-wrap:wrap; gap:0.5rem 0.8rem; align-items:center; justify-content:space-between; margin:0 0 0.85rem; } .tviewtog { display:inline-flex; border:1.5px solid var(--time); border-radius:999px; overflow:hidden; background:var(--paper); } .tvbtn { appearance:none; border:0; background:none; font:inherit; font-weight:650; font-size:0.9rem; color:var(--time); padding:0.4rem 1.05rem; cursor:pointer; min-height:40px; } .tvbtn + .tvbtn { border-left:1.5px solid var(--time); } .tvbtn.on { background:var(--time); color:#FFFFFF; } .tvbtn:not(.on):hover { background:var(--time-soft); } .tvbtn:focus-visible { outline:2px solid var(--time); outline-offset:-4px; } .tlogbtn { font-weight:700; min-height:40px; padding-left:1.1rem; padding-right:1.1rem; } /* The client, then the project and the task, each its own labelled piece. */ .tclient { font-weight:700; color:var(--ink); } .tclientsub { display:block; font-size:0.78rem; color:var(--muted); font-weight:400; } .twhat { display:flex; flex-direction:column; align-items:flex-start; gap:0.2rem; margin-top:0.25rem; font-weight:400; text-align:left; } .twhat-p, .twhat-t { display:inline-flex; align-items:baseline; gap:0.35rem; min-width:0; max-width:100%; } .twhat-t { padding-left:0.55rem; } .twhat-l { flex:0 0 auto; font-size:0.6rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; line-height:1; padding:0.2rem 0.35rem; border-radius:4px; position:relative; top:-0.1em; } .twhat-p .twhat-l { background:var(--time); color:#FFFFFF; } .twhat-t .twhat-l { background:var(--time-soft); color:var(--time); box-shadow:inset 0 0 0 1px var(--time-line); } .twhat-v { min-width:0; overflow-wrap:anywhere; color:var(--ink); } .twhat-p .twhat-v { font-weight:700; font-size:0.95rem; } .twhat-t .twhat-v { font-weight:600; font-size:0.9rem; } .tlist .twhat-t { padding-left:0; } .tlist .twhat-p, .tlist .twhat-t { flex-direction:column; align-items:flex-start; gap:0.15rem; } .tlist .twhat-l { top:0; } .tlist .twhat-v { overflow-wrap:normal; } .tlist .tl-proj, .tlist .tl-task { min-width:7.5rem; } .ttoday-name .twhat { display:flex; } .ttoday-name .twhat-p, .ttoday-name .twhat-t { display:inline-flex; } .ttoday-name .twhat-l { display:inline-block; } .ttoday-name .twhat-v { display:inline; } .tgridrule { margin:0 0 0.6rem; } .ttimercard .row > .tdot { align-self:flex-start; margin-top:0.45rem; } .ttimernote .tnoterule { margin:0 0 0.35rem; } .tgrid tbody th { min-width:11rem; max-width:16rem; vertical-align:top; } /* Words break only when one is wider than the column. "anywhere" let the table size the column below a word, so a phone showed "Dashboar / d rebuild" beside the PROJECT label (phone audit, 4 October 2026). */ .tgrid tbody th, .tgrid .twhat-v { overflow-wrap:break-word; } .tgrid tbody th .tclient { font-size:0.95rem; } .tgrid tbody tr.tprojrow th { box-shadow:inset 3px 0 0 var(--time-line); } .trowhead { display:flex; align-items:flex-start; gap:0.1rem; } .trowhead .tplay { flex:0 0 auto; margin-top:0.05rem; } .trowname { min-width:0; } .ttimerwho, .tdaywho { display:inline-flex; flex-direction:column; min-width:0; } .ttimerwho .tclient, .tdaywho .tclient { font-size:1.02rem; } .ttoday-name .tclient { display:block; } /* A cell: its hours, then the note mark over the dots. */ .tcellbox { display:inline-flex; align-items:center; gap:0.05rem; } .tcellside { display:inline-flex; flex-direction:column; align-items:center; gap:0.05rem; } .tcellside .tmore { margin-left:0; padding:0 0.25rem; font-size:1rem; } .tnote { appearance:none; border:1px solid transparent; background:none; border-radius:5px; padding:0.1rem 0.15rem; cursor:pointer; color:var(--muted); line-height:0; display:inline-flex; align-items:center; justify-content:center; } .tnote svg .tnote-page { fill:none; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round; } .tnote svg .tnote-lines { fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; } .tnote:not(.has) { opacity:0.6; } .tnote:hover, .tnote:focus-visible { opacity:1; border-color:var(--time-line); color:var(--time); } .tnote.has { color:var(--time); opacity:1; } .tnote.has svg .tnote-page { fill:var(--time); stroke:var(--time); } .tnote.has svg .tnote-lines { stroke:#FFFFFF; } .ttoday-acts .btn.tnote { opacity:1; line-height:1; } .tgridkey .tnote { display:inline-flex; vertical-align:-0.2em; padding:0; border:0; } .tnoteadd { display:block; margin:0.15rem auto 0; font-size:0.72rem; color:var(--time); font-weight:650; white-space:nowrap; } /* A team that asks for a note on every entry, said plainly; a note box it is waiting on. */ .tnoterule { margin:0.4rem 0 0; padding:0.4rem 0.6rem; border-left:3px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; font-size:0.85rem; font-weight:600; color:var(--ink); } .tnoterule[hidden] { display:none; } textarea.tneed { border-color:#A3382E; box-shadow:0 0 0 2px rgba(163,56,46,0.18); } .tneedlink { color:var(--time); font-weight:700; } .tnoteask textarea, .ttimernote textarea { width:100%; display:block; } .tnoteaskwhat { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.2rem 0.6rem; margin:0.6rem 0 0.2rem; } .tnoteaskwhat > b { font-size:1.3rem; color:var(--time); font-variant-numeric:tabular-nums; } .tnoteaskwhat .twhat { flex-basis:100%; } .ttimernote { margin-top:0.55rem; } .ttimernote label { margin-top:0; } /* Log time: client, project and task, then the date and the hours, then the note across the width. */ .tlogcard { border:1.5px solid var(--time-line); background:var(--time-soft); } .tloghead { margin:0; color:var(--time); font-size:1.05rem; } .tlogrow { display:grid; gap:0.5rem 0.6rem; align-items:start; margin-top:0.45rem; } .tlogwhat { grid-template-columns:repeat(3, minmax(0, 1fr)); } .tlogwhat.tlogfree { grid-template-columns:minmax(0, 24rem); } .tlogrow > div { min-width:0; } .tlogrow input, .tlogrow select { width:100%; min-width:0; } .mbox:has(.tlogdlg) { max-width:760px; } /* List view: one row an entry, a subtotal under each day, the week's total at the foot. */ .tlistwrap { border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow-x:auto; margin-top:0.9rem; } .tlist { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:0.86rem; } .tlist th, .tlist td { padding:0.5rem 0.5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .tlist thead th { font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); background:#FAFAF8; white-space:nowrap; } .tlist .tl-date { white-space:nowrap; font-weight:650; } .tlist .tl-start, .tlist .tl-end, .tlist .tl-brk { white-space:nowrap; } .tlist .tl-hrs, .tlist .tlh-hours { text-align:right; white-space:nowrap; } .tlist .tl-hrs b { font-size:0.98rem; } .tlist .tl-note { min-width:10rem; max-width:24rem; } .tl-notetext { white-space:pre-line; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* The buttons wrap onto a second line before the table has to scroll sideways (7 October 2026). */ .tlist .tl-acts { white-space:normal; text-align:right; min-width:8.5rem; } .tlist .tl-acts .btn { margin-bottom:0.2rem; } .tlist .tl-acts .btn + .btn { margin-left:0.25rem; } .tlist tr.tlsub th, .tlist tr.tlsub td { background:var(--time-soft); border-bottom:2px solid var(--time-line); font-weight:650; } .tlist tr.tlsub th { text-align:right; font-size:0.82rem; color:var(--ink); } .tlist tr.tltotal th, .tlist tr.tltotal td { border-bottom:0; font-weight:750; font-size:0.95rem; } .tlist tr.tltotal th { text-align:right; } .tlist tr.tltotal .tl-hrs b { font-size:1.1rem; color:var(--time); } .tlist tr.trun td { background:var(--time-soft); } .tlempty { border-style:dashed; border-color:var(--time-line); margin-top:0.9rem; } /* By project and task, under the list (T4, 7 October 2026): each client, its projects, each project's tasks, indented, in the timesheet's own colours. Three columns at most, so a phone at 390px shows the same table without scrolling. */ .tsumsec { margin-top:1.2rem; break-inside:avoid; } .tsumhead { margin:0 0 0.5rem; } .tsumwrap { border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow-x:auto; } .tsum { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:0.86rem; } .tsum th, .tsum td { padding:0.45rem 0.6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .tsum thead th { font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .tsum .ts-hrs { text-align:right; white-space:nowrap; width:6.5rem; } .tsum tbody th { font-weight:400; overflow-wrap:anywhere; } .tsum tr.ts-c th, .tsum tr.ts-c td { background:var(--time-soft); border-bottom-color:var(--time-line); font-weight:700; color:var(--ink); } .tsum tr.ts-p th { padding-left:1.4rem; font-weight:600; } .tsum tr.ts-t th, .tsum tr.ts-t td { color:var(--muted); } .tsum tr.ts-t th { padding-left:2.6rem; } .tsum tr.ts-total th, .tsum tr.ts-total td { border-bottom:0; border-top:2px solid var(--time); font-weight:750; font-size:0.95rem; } .tsum tr.ts-total td { color:var(--time); } @media (max-width:700px) { .tsum th, .tsum td { padding:0.45rem 0.45rem; } .tsum .ts-hrs { width:4.6rem; } .tsum tr.ts-p th { padding-left:1rem; } .tsum tr.ts-t th { padding-left:1.9rem; } } /* Your sharing with a team (T14, 7 October 2026): the Edit dialog's switches, and the Owner's and Admins' notice. */ .tteamedit select { width:100%; } .tsecheck { gap:0.5rem; align-items:flex-start; margin-top:0.75rem; cursor:pointer; font-weight:600; } .tsecheck input { width:auto; margin-top:0.2rem; flex:0 0 auto; } .tsecheck input:disabled + span { color:var(--muted); } .tteamconfirm p { margin:0 0 0.6rem; } .tteamnote { border-color:var(--time-line); background:var(--time-soft); margin-bottom:0.8rem; overflow-wrap:anywhere; } .tteamnote-in { margin:0.5rem 0 0; padding:0.45rem 0.6rem; border:1px solid var(--time-line); border-radius:6px; } /* THE TEAM PAGE, FOR SOMEBODY WHO RUNS A TEAM (13 October 2026). A link in the Your Timesheets menu that looks like its items and carries an arrow because it leaves the app; the team's name gives way with an ellipsis, never the arrow. The line on Week and timer is quiet: one line, a link and Hide. The team's card in Settings is marked when the Team page sent somebody to it. */ nav.tabs .navout { display:flex; min-width:0; } nav.tabs .navout a { display:flex; align-items:center; gap:0.3rem; min-width:0; max-width:100%; white-space:nowrap; text-decoration:none; font-size:0.82rem; font-weight:500; color:var(--chrome-muted); padding:0.35rem 0.65rem; border-radius:5px; } nav.tabs .navout a:hover { color:var(--time); background:#F4F5F6; } nav.tabs .navout a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .navout-say { min-width:0; overflow:hidden; text-overflow:ellipsis; } .navout-arrow { flex:0 0 auto; width:0.68rem; height:0.68rem; } @media (min-width:940px) { nav.tabs .navout a { padding:0.42rem 0.65rem; } } .navoutrow { text-decoration:none; color:inherit; } .navoutrow .navout-arrow { display:inline-block; vertical-align:-0.02em; } .trunline { display:flex; flex-wrap:wrap; gap:0.3rem 0.9rem; align-items:baseline; justify-content:space-between; margin:0 0 0.5rem; padding:0.4rem 0.65rem; border:1px solid var(--time-line); border-radius:6px; background:var(--time-soft); } .trunline .grow { flex:1 1 16rem; min-width:0; } .tsetrow.tteamfocus { border-color:var(--time); box-shadow:0 0 0 2px var(--time-soft); } /* ONE CARD A TEAM, for somebody who runs it and is in it (13 October 2026): the name and the role, then "Your own hours" and "Running the team", each a labelled part with its words running the width and its buttons at the right. */ .tteamhead { display:flex; flex-wrap:wrap; align-items:center; gap:0.2rem 0.5rem; } .tteampart { margin-top:0.55rem; padding-top:0.5rem; border-top:1px solid var(--line); } .tteampart.tteamonly { margin-top:0.35rem; padding-top:0; border-top:0; } .tteamlabel { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:0.25rem; } .tteamrow { gap:0.5rem; align-items:center; flex-wrap:wrap; } .tteamrow .grow { flex:1 1 16rem; min-width:0; } .tteampart .tsecheck { margin-top:0.6rem; font-weight:500; } @media print { .tsumwrap { border:0; overflow:visible; } .tsum tr { break-inside:avoid; } .tsum tr.ts-c th, .tsum tr.ts-c td { -webkit-print-color-adjust:exact; print-color-adjust:exact; } } @media (max-width:700px) { .tlogwhat { grid-template-columns:minmax(0, 1fr); } .tviewtog { flex:1 1 auto; } .tvbtn { flex:1 1 50%; } .tlogbtn { flex:1 1 100%; justify-content:center; } /* A phone: each entry a card, the date and the hours on its first line. */ .tlistwrap { border:0; background:none; overflow:visible; } .tlist, .tlist tbody, .tlist tfoot { display:block; } .tlist thead { display:none; } .tlist tr.tlrow { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.4rem 0.6rem; border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:0.65rem 0.75rem; margin-top:0.55rem; } .tlist tr.tlrow.trun { border:2px solid var(--time); background:var(--time-soft); } .tlist tr.tlrow td { display:block; border:0; padding:0; min-width:0; max-width:none; background:none; } .tlist td[data-label]::before { content:attr(data-label); display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:0.08rem; } .tlist .tl-date { grid-column:span 4; order:1; } .tlist .tl-hrs { grid-column:span 2; order:2; } .tlist tr.tlrow .tl-hrs b { font-size:1.3rem; } .tlist .tl-client { grid-column:1 / -1; order:3; } .tlist .tl-proj, .tlist .tl-task { grid-column:span 3; order:4; } .tlist .tl-start, .tlist .tl-end, .tlist .tl-brk { grid-column:span 2; order:5; } .tlist .tl-note { grid-column:1 / -1; order:6; } .tlist .tl-bill { grid-column:span 2; order:7; } .tlist .tl-acts { grid-column:-5 / -1; order:8; align-self:end; white-space:normal; display:flex !important; flex-wrap:wrap; gap:0.3rem; justify-content:flex-end; } .tlist .tl-acts .btn + .btn { margin-left:0; } .tlist .tl-acts .btn { min-height:40px; } .tlist tr.tlsub, .tlist tr.tltotal { display:flex; justify-content:space-between; align-items:baseline; gap:0.6rem; border-radius:8px; } .tlist tr.tlsub { padding:0.45rem 0.75rem; margin-top:0.4rem; background:var(--time-soft); } .tlist tr.tltotal { padding:0.6rem 0.75rem; margin-top:0.7rem; border:1.5px solid var(--time); } .tlist tr.tlsub th, .tlist tr.tlsub td, .tlist tr.tltotal th, .tlist tr.tltotal td { display:block; border:0; padding:0; background:none; text-align:left; } .tlist tr.tlsub td.tlsubpad, .tlist tr.tltotal td:empty { display:none; } } /* YOUR TIMESHEETS, 7 OCTOBER 2026 (James): the toggle on the title's line, plainer navigation, a "?" on every key word, Log time in two rows, Add new project and task in place, renaming in place, and hours to two places. */ /* Figures that line up: every digit the same width across Your Timesheets, so 3.50 sits over 18.50. */ .timeview { font-variant-numeric:tabular-nums; } /* The title, with Week view and List view (and Log time) at the right on the same line. */ .ttitlerow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; margin:0 0 0.6rem; } .ttitlerow h2 { margin:0; } .ttitlerow .tviewbar { margin:0; margin-left:auto; } /* The week's (or the period's) navigation: which way in words, the span between, and the jump to a date. */ .tweeknav { display:flex; flex-wrap:wrap; gap:0.5rem 1rem; align-items:center; margin:0 0 0.7rem; } .tnavgrp { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; } .tnavspan { min-width:11rem; text-align:center; font-size:0.98rem; } .tnavnow { background:var(--time-soft); color:var(--time); border-color:var(--time-line); font-weight:650; } .tnavacts { margin-left:auto; } .tnavact { display:inline-flex; align-items:center; } .tgoto { display:inline-flex; align-items:center; gap:0.35rem; } .tgoto label { margin:0; font-size:0.75rem; white-space:nowrap; } .tgoto input[type=date] { width:auto; padding:0.25rem 0.4rem; font-size:0.82rem; } .tperiodlab { font-size:0.75rem; font-weight:650; color:var(--label-ink); } .tperiod .tvbtn { font-size:0.82rem; padding:0.3rem 0.75rem; min-height:36px; white-space:nowrap; } .tlist thead th .help, .tgrid thead th .help { margin-left:0.2rem; text-transform:none; letter-spacing:0; } /* "Client" on a form is the way to Clients and projects. */ .tlablink { color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; } .tlablink:hover { color:var(--time); text-decoration-style:solid; } /* Log time in two rows: client, project and task; then the date, the hours, the note and Save. */ .tlogform label { margin-top:0; } .tlogwhen { grid-template-columns:minmax(0, 10rem) minmax(0, 9rem) minmax(0, 1fr); grid-template-areas:"day hrs note" "times times times"; } .tlogwhen.tlogacted { grid-template-columns:minmax(0, 10rem) minmax(0, 9rem) minmax(0, 1fr) auto; grid-template-areas:"day hrs note acts" "times times times times"; } .tlogday { grid-area:day; } .tloghrs { grid-area:hrs; } .tlognote { grid-area:note; } .tlogacts { grid-area:acts; padding-top:1.3rem; } .tlogacts .btn { min-width:6.5rem; min-height:2.45rem; justify-content:center; } .tlogtimes { grid-area:times; display:grid; grid-template-columns:repeat(3, minmax(0, 9rem)); gap:0.5rem 0.6rem; padding:0.5rem 0.6rem; border:1px dashed var(--time-line); border-radius:8px; background:var(--paper); } .tlogtimes[hidden] { display:none; } .tlogtimes > div { min-width:0; } .tlogtimes input { width:100%; min-width:0; } .tlognote textarea { width:100%; display:block; min-height:2.45rem; max-height:9rem; background:#FFFFFF; resize:vertical; field-sizing:content; } .tlogtimesbtn { display:block; margin-top:0.15rem; color:var(--time); font-weight:650; text-align:left; } /* What the hours box read: "= 1.25 hours", or what to type when it could not be read. */ .thrssay { min-height:0; color:var(--time); font-weight:650; margin-top:0.15rem; } .thrssay:empty { display:none; } .thrssay.bad { color:var(--danger); } .tcellsay { position:fixed; z-index:45; padding:0.2rem 0.45rem; border-radius:5px; background:var(--ink); color:#FFFFFF; font-size:0.75rem; font-weight:600; white-space:nowrap; pointer-events:none; } .tcellsay.bad { background:var(--danger); } .tcellsay[hidden] { display:none; } /* Add new project and Add new task: the name box, under its list. */ .tnewname { margin-top:0.35rem; padding:0.45rem 0.55rem; border:1.5px dashed var(--time); border-radius:8px; background:var(--time-soft); } .tnewname[hidden] { display:none; } .tnewname label { color:var(--time); font-weight:650; } .tnewrow { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; } .tnewrow input { flex:1 1 9rem; min-width:0; width:auto; } .tnewsay:empty { display:none; } .tnewsay { margin-top:0.25rem; } .ttimercard .tnewname, .taddrow .tnewname { max-width:22rem; } /* A note in List view is pressed to change it, in place. */ .tl-noteedit { appearance:none; border:1px solid transparent; background:none; font:inherit; color:inherit; text-align:left; padding:0.1rem 0.2rem; margin:-0.1rem -0.2rem; border-radius:5px; cursor:text; max-width:100%; } .tl-noteedit:hover, .tl-noteedit:focus-visible { border-color:var(--time-line); background:var(--time-soft); } .tl-noteform textarea { width:100%; min-height:3.2rem; } .tl-noteacts { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.3rem; } /* A project's or a task's name, pressed to rename it; a team's name, read only. */ .trenamebtn { appearance:none; border:1px solid transparent; background:none; font:inherit; color:var(--ink); text-align:left; padding:0.05rem 0.25rem; margin:-0.05rem -0.25rem; border-radius:5px; cursor:text; overflow-wrap:anywhere; } .trenamebtn.tprojname { font-weight:700; } .trenamehint { display:inline-block; margin-left:0.4rem; font-size:0.68rem; font-weight:650; color:var(--time); opacity:0; } .trenamebtn:hover, .trenamebtn:focus-visible { border-color:var(--time-line); background:var(--time-soft); } .trenamebtn:hover .trenamehint, .trenamebtn:focus-visible .trenamehint { opacity:1; } .tprojname { font-weight:700; } .trename { display:inline-flex; flex-wrap:wrap; gap:0.3rem; align-items:center; max-width:100%; } .trename input { width:auto; flex:1 1 10rem; min-width:0; padding:0.25rem 0.45rem; } .tteampill { background:var(--time-soft); color:var(--time); border-color:var(--time-line); font-weight:650; } .tteamnote { margin-top:0.3rem; } .tmine { margin-top:0.2rem; color:var(--time); font-weight:600; } @media (max-width:700px) { .ttitlerow .tviewbar { margin-left:0; flex:1 1 100%; } .tnavspan { min-width:0; flex:1 1 auto; } .tnavacts { margin-left:0; } /* The period, the full width, its four choices sharing it. WHY NOT .tlistnav .tnavgrp:first-child ANY MORE (James, 20 October 2026; changes-11oct item 12). Show moved up to the title's line on 7 October, so that rule had come to hold List view's before, span, after, back and Go to a date on one line that could not wrap: on a phone each button broke a word a line and the date box ran off the edge. The rule now names the period group itself, and List view's navigator wraps as Week view's does. */ .tperiodgrp { flex:1 1 100%; flex-wrap:nowrap; } /* A button or label in the navigator keeps its words together; the row wraps between them instead. */ .tweeknav .btn, .tweeknav .pill, .tgoto label { white-space:nowrap; } .tperiod { flex:1 1 auto; min-width:0; } .tperiod .tvbtn { flex:1 1 auto; padding:0.3rem 0.4rem; } /* A phone: the date and the hours side by side, then the times, the note and Save, each the full width. */ .tlogwhen, .tlogwhen.tlogacted { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"day hrs" "times times" "note note" "acts acts"; } .tlogacts { padding-top:0; } .tlogacts .btn { width:100%; } .tlogtimes { grid-template-columns:repeat(3, minmax(0, 1fr)); } } .fieldhint { margin-top:0.2rem; line-height:1.45; } /* WHERE ARE YOU AT (James, 25 September 2026: "life stage, not age"). The dashboard's "For where you are" card: its guides fill the row, up to three across, and stack one to a line on a phone. */ .sitguides { list-style:none; margin:0.55rem 0 0; padding:0; display:grid; gap:0.4rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .sitguides a { display:block; height:100%; box-sizing:border-box; padding:0.5rem 0.65rem; border:1px solid var(--line); border-radius:6px; font-size:0.85rem; font-weight:550; } .sitguides a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .sitoffer, .sithunt { display:flex; flex-wrap:wrap; gap:0.5rem 0.8rem; align-items:center; margin-top:0.65rem; padding-top:0.6rem; border-top:1px solid var(--line); } .sitoffer .grow, .sithunt .grow { flex:1 1 16rem; min-width:0; } .sitrow { flex-wrap:wrap; gap:0.5rem; align-items:center; } .sitrow select { flex:1 1 16rem; min-width:0; width:auto; max-width:100%; } /* Where did you hear about us (29 September 2026): ten one-tap choices that wrap, no select to open. */ .heardchips { display:flex; flex-wrap:wrap; gap:0.4rem; } .heardchips .btn { flex:0 1 auto; } /* The required question (8 October 2026): over everything, the modal included, until one tap answers it. Centred, with the page's 16px gutter on a phone, and its own scroll if a short screen cannot hold the eleven choices. */ .heardgate { position:fixed; inset:0; z-index:90; background:rgba(26,29,33,0.45); display:flex; align-items:center; justify-content:center; padding:16px; } .heardgate .mbox { max-width:520px; padding-bottom:1.05rem; } .sitset { margin-bottom:0.4rem; } .sitset select { max-width:34rem; } /* HOME, ALL THREE AT A GLANCE (James, 2 October 2026, decision 3). A card for each section in its own colour, side by side wherever three fit, so no card's text wraps beside empty space; one to a row on a phone. */ @media (min-width:940px) { .tab-home { max-width:1500px; } } .homehead { align-items:baseline; gap:0.3rem 1rem; } .homehead h2 { margin:0.2rem 0 0; } .homelede { margin:0.25rem 0 0.9rem; } .homegrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap:0.9rem; align-items:stretch; } .homecard { margin:0; display:flex; flex-direction:column; gap:0.55rem; cursor:pointer; padding:0.95rem 1.05rem 1rem; border-top:4px solid var(--hc); } .homecard.prod-hunt { --hc:var(--accent); --hc-soft:var(--accent-soft); } .homecard.prod-career { --hc:var(--career); --hc-soft:var(--career-soft); border-color:var(--career-line); border-top-color:var(--career); } .homecard.prod-time { --hc:var(--time); --hc-soft:var(--time-soft); border-color:var(--time-line); border-top-color:var(--time); } .homecard:hover { box-shadow:0 2px 10px rgba(26,29,33,0.08); } .homecard h3.prodlabel { margin:0; font-size:0.7rem; } .homecard p { margin:0; } .homebig { font-size:0.98rem; font-weight:600; line-height:1.25; } .homebig b { font-family:var(--display); font-size:1.85rem; font-weight:700; letter-spacing:-0.01em; color:var(--hc); font-variant-numeric:tabular-nums; margin-right:0.15rem; } .homejob { font-weight:650; } .homesub { margin-top:-0.25rem !important; } /* Each count at least as wide as its longest word (5 October 2026): at 1280px the four equal columns were 52px inside and INTERVIEWS broke as INTERVIE / WS. Equal while there is room; the longer label takes what it needs when not. */ .homestages { display:grid; grid-template-columns:repeat(5, minmax(min-content, 1fr)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .homestage { appearance:none; background:none; border:0; border-right:1px solid var(--line); border-top:3px solid var(--st, var(--line)); padding:0.4rem 0.35rem; text-align:left; cursor:pointer; font:inherit; color:inherit; min-height:44px; min-width:0; } .homestage:last-child { border-right:0; } .homestage:hover { background:#F4F5F6; } .homestage:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .homestage b { display:block; font-size:1.15rem; font-weight:650; color:var(--st, var(--ink)); font-variant-numeric:tabular-nums; } .homestage span { display:block; font-size:0.56rem; font-weight:550; line-height:1.2; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); overflow-wrap:break-word; } /* Five counts since 20 October 2026 (Screening joined, so they add up to the jobs on the go): a little less padding, type and tracking, so all five fit the card's width at 1000 to 1280px without clipping a column. */ .homenext { display:flex; flex-direction:column; align-items:flex-start; gap:0.1rem; padding:0.55rem 0.7rem; background:var(--hc-soft); border-radius:var(--radius); } .homenext .linkish { text-align:left; font-weight:600; } .homenext .nawho { font-size:0.78rem; color:var(--muted); } .homefoot { margin-top:auto; padding-top:0.2rem; } .btn.primary.time { background:var(--time); border-color:var(--time); color:#FFFFFF; } .btn.primary.time:hover { background:var(--time-hover); border-color:var(--time-hover); } nav.tabs button.prod-home { font-weight:650; } @media print { .homecard { break-inside:avoid; } } /* THE DEMO BAR, SLIM (James, 2 October 2026, decision 4). One line: whose example this is, the way to start your own, the tour, and a close button for this visit. The page moves down by its measured height (--demobar-h), so it covers nothing; closing it sets that to nothing. */ .demobar { gap:0.4rem 0.7rem; flex-wrap:nowrap; padding-top:calc(0.4rem + env(safe-area-inset-top)); padding-bottom:0.4rem; padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(0.6rem, env(safe-area-inset-right)); } .demobar .grow { flex:1 1 auto; min-width:0; } .demobar .dbtext { line-height:1.3; } .demobar .dbcta { flex:0 0 auto; white-space:nowrap; text-decoration:none; } .demobar .dbtour { flex:0 0 auto; white-space:nowrap; color:var(--accent); font-weight:600; } .demobar .dbclose { flex:0 0 auto; appearance:none; background:none; border:1px solid transparent; border-radius:6px; color:var(--muted); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .demobar .dbclose:hover, .demobar .dbclose:focus-visible { border-color:var(--soft-line, #CDDEE0); color:var(--ink); background:#FFFFFF; } @media (max-width:760px) { .demobar .dbmore, .demobar .dbtour { display:none; } } @media (max-width:360px) { .demobar { font-size:0.8rem; } } /* The bar's two buttons as a pair (4 October 2026): the same height and shape, the sign-up one filled, the tour outlined. */ .demobar .btn { min-height:34px; padding:0.3rem 0.75rem; font-size:0.8rem; border-radius:6px; display:inline-flex; align-items:center; } .demobar .btn.dbtour { background:#FFFFFF; color:var(--accent); border:1px solid var(--soft-line, #CDDEE0); } .demobar .btn.dbtour:hover { background:#FFFFFF; color:var(--accent-hover); border-color:var(--accent); } /* The site's own pages, beside them (James, 4 October 2026): six plain links on one line where there is room, and a small Site menu where there is not. The longer sentence steps aside first, so the links never wrap. */ .demobar .dbsite { display:flex; align-items:center; gap:0.15rem; flex:0 0 auto; white-space:nowrap; } .demobar .dbsite a, .demobar .dbsitepanel a { color:var(--ink); font-weight:550; text-decoration:none; border-radius:5px; } .demobar .dbsite a { padding:0.3rem 0.5rem; font-size:0.82rem; } .demobar .dbsite a:hover, .demobar .dbsite a:focus-visible { background:#FFFFFF; color:var(--accent); } .demobar .dbsitemenu { display:none; position:relative; flex:0 0 auto; } .demobar .dbsitemenu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.25rem; min-height:34px; padding:0 0.55rem; border:1px solid var(--soft-line, #CDDEE0); border-radius:6px; background:#FFFFFF; color:var(--ink); font-weight:600; font-size:0.8rem; } .demobar .dbsitemenu > summary::-webkit-details-marker { display:none; } .demobar .dbsitemenu > summary svg { transition:transform 0.15s; } .demobar .dbsitemenu[open] > summary svg { transform:rotate(180deg); } .demobar .dbsitemenu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .demobar .dbsitepanel { position:absolute; right:0; top:calc(100% + 6px); z-index:70; min-width:11rem; display:flex; flex-direction:column; background:#FFFFFF; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(26,29,33,0.14); padding:0.3rem; } .demobar .dbsitepanel a { padding:0.6rem 0.75rem; font-size:0.9rem; min-height:44px; display:flex; align-items:center; } .demobar .dbsitepanel a:hover, .demobar .dbsitepanel a:focus-visible { background:var(--accent-soft); color:var(--accent); } @media (max-width:1439px) { .demobar .dbmore { display:none; } } @media (max-width:899px) { .demobar .dbsite { display:none; } .demobar .dbsitemenu { display:block; } } @media (max-width:760px) { .demobar .btn.dbtour { display:none; } .demobar .dbsitepanel { right:auto; left:0; } } @media (prefers-reduced-motion: reduce) { .demobar .dbsitemenu > summary svg { transition:none; } } /* THE TOUR (2 October 2026): Back, Next and Skip, a card that is a dialog, and no movement for anybody who asked for none. */ .tourblock { cursor:default; } /* The ring is set on every scroll, so it does not glide: a transition only made it trail behind the mark. */ .tourring { transition:none; } .tourring.tourcentre { border:0; } .tourbubble { overflow:auto; } .tourbubble .tb-title { font-family:var(--display); font-size:1.02rem; } .tourbubble .tb-cta { margin:0 0 0.6rem; } .tourbubble .tb-cta .btn { text-decoration:none; } .tourbubble .tb-actions { gap:0.45rem; align-items:center; } .tourbubble .tb-skip { margin-left:auto; color:var(--muted); } @media (max-width:939px) { .tourbubble .btn { min-height:44px; } .tourbubble .tb-skip { min-height:44px; } } @media (prefers-reduced-motion: reduce) { .tourring { transition:none; } } /* EASY TO FOLLOW (James, 20 October 2026): a progress strip along the top of the card, the step count with the product it is in, Next as the big filled button with an arrow, Back plainer beside it, and Skip a quiet line underneath. The page behind is a little darker than before, so the card and its mark are what stand out. */ .tourring { box-shadow:0 0 0 9999px rgba(20,26,32,0.62); border-width:3px; } .tourbubble { padding:0 1rem 0.8rem; border-color:var(--accent); } .tourbubble .tb-prog { height:5px; margin:0 -1rem 0.7rem; background:var(--line); border-radius:10px 10px 0 0; overflow:hidden; } .tourbubble .tb-prog i { display:block; height:100%; background:var(--accent); border-radius:0 3px 3px 0; } .tourbubble .tb-head { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; } .tourbubble .tb-step { font-size:0.7rem; color:var(--ink); } .tourbubble .tb-prod { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.7rem; font-weight:600; color:var(--muted); } .tourbubble .tb-title { font-size:1.12rem; } .tourbubble .tb-actions { gap:0.5rem; flex-wrap:nowrap; } .tourbubble .tb-next { flex:1 1 auto; justify-content:center; display:inline-flex; align-items:center; gap:0.45rem; min-height:46px; font-size:1rem; font-weight:700; } .tourbubble .tb-back { flex:0 0 auto; min-height:46px; } .tourbubble .tb-skipline { text-align:center; margin-top:0.45rem; } .tourbubble .tb-skipline .tb-skip { margin:0; font-size:0.78rem; } @media (prefers-reduced-motion: no-preference) { .tourbubble .tb-prog i { transition:width 0.2s ease; } } /* The quiet offer on a first demo visit (20 October 2026): one line in the page, never over it. */ .demotouroffer { margin-bottom:0.75rem; border-left:3px solid var(--accent); } /* GIVE A MONTH, GET A MONTH (James, 4 October 2026): the invite link with Copy and Share, and four counts. */ .invitecard label { margin-top:0; } .invrow { gap:0.4rem; align-items:center; flex-wrap:wrap; } .invrow input { min-width:12rem; flex:1 1 14rem; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:0.82rem; background:var(--paper); } .invcounts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.4rem; margin:0.75rem 0 0; } .invcounts > div { border:1px solid var(--line); border-radius:6px; padding:0.4rem 0.55rem; background:var(--surface); } .invcounts dt { font-size:0.68rem; color:var(--muted); font-weight:650; text-transform:uppercase; letter-spacing:0.06em; } .invcounts dd { margin:0.1rem 0 0; font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; } @media (max-width:520px) { .invcounts { grid-template-columns:repeat(2,minmax(0,1fr)); } } .homeinvite { margin-top:0.8rem; } .homeinvite-row { gap:0.6rem 1rem; align-items:center; flex-wrap:wrap; } .homeinvite-row > .grow { flex:1 1 18rem; min-width:0; } .homeinvite-btns { gap:0.4rem; align-items:center; flex-wrap:wrap; } .homeinvite-demo { margin:0.7rem 0 0; } /* THE DEMO, A LITTLE MORE GUIDED (James, 4 October 2026): a one-line caption per screen, and Try this on Home. */ .democap { margin:0 0 0.7rem; font-size:0.84rem; color:var(--ink); line-height:1.45; } .democap-k { display:inline-block; margin-right:0.45rem; padding:0.05rem 0.45rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:0.66rem; font-weight:750; text-transform:uppercase; letter-spacing:0.08em; vertical-align:0.1em; } .demotry { margin-top:0.9rem; border-color:var(--soft-line, #CDDEE0); } .demotry-head { align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem; } .demotry-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; } @media (max-width:760px) { .demotry-list { grid-template-columns:1fr; } } .demotry-item { appearance:none; text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:0.2rem; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0.6rem 0.75rem; color:var(--ink); min-height:44px; } .demotry-item b { color:var(--accent); font-weight:700; } .demotry-item span { font-size:0.8rem; color:var(--muted); } .demotry-item:hover { border-color:var(--accent); } .demotry-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @media (max-width:520px) { .invrow input { flex:1 1 100%; } } /* On the narrowest phones "This is" goes, so "Sam's example." is not three lines beside the buttons (4 October 2026). */ @media (max-width:400px) { .demobar .dbthis { display:none; } .demobar { gap:0.4rem 0.5rem; } .demobar .dbsitemenu > summary { padding:0 0.45rem; } } /* THUMB-SIZED ON A TOUCHSCREEN (phone audit, 4 October 2026). The demo bar's buttons and Site menu, its close button, and Jo and Add job in the phone header were 34 to 38px to hit. They keep the size they look, so the two slim bars keep their height, and hit 44px the way .tierchip does. The filters' selects and the footer's links grow to 44px. */ @media (pointer:coarse) { .demobar .btn, .demobar .dbsitemenu > summary, .demobar .dbclose, .phjo, .phadd { position:relative; } .demobar .btn::before, .demobar .dbsitemenu > summary::before, .phjo::before, .phadd::before { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); } .demobar .dbclose::before { content:""; position:absolute; inset:-4px; } .footcols a, .footcols button { display:flex; align-items:center; min-height:44px; padding:0; } .fbopen { min-height:44px; } } @media (pointer:coarse) and (max-width:939px) { select { min-height:44px; } } /* On a phone what a next step is about goes under it, not straight on after the link wherever the line ends (4 October 2026). */ @media (max-width:939px) { .na .nawhat > .nawho { display:block; margin-top:0.1rem; } } /* JOINED THROUGH A TEAM'S INVITE (James, 4 October 2026). The one screen in place of setup, the welcome card at the top of Your Timesheets, and the job hunt picker put away while there is no hunt to pick (huntQuiet in app.js). */ .obteamlead { font-size:1rem; line-height:1.6; margin:0.3rem 0 0.2rem; max-width:60ch; } .obprod { white-space:nowrap; } .obprod .pdot { margin-right:0.3rem; } .obcard input[type=tel] { font-size:1rem; padding:0.6rem 0.7rem; } .obteamerr { color:var(--danger); margin-top:0.5rem; } .obteamerr:empty { display:none; } .obteam .obnav .btn { min-height:44px; padding:0.55rem 1.2rem; font-size:0.95rem; } .tjoincard { border-color:var(--time-line); background:var(--time-soft); margin-bottom:0.9rem; } .tjoincard h3 { margin:0 0 0.3rem; color:var(--time); } .tjoinshare { margin:0 0 0.4rem; } .tjoincols { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem 1.4rem; } .tjoinlist { margin:0.25rem 0 0; padding-left:1.1rem; } .tjoinlist li { margin:0.1rem 0; } .tjoinacts { gap:0.5rem; flex-wrap:wrap; margin-top:0.8rem; } .tjoinacts .btn { min-height:44px; padding:0.5rem 1rem; } #searchPicker.huntquiet { display:none !important; } @media (max-width:599px) { .tjoincols { grid-template-columns:1fr; } .tjoinacts .btn { flex:1 1 100%; } } /* Delete on an entry already logged, in the day's window: plainly red, a thumb's width on a touchscreen. */ .tentryacts .btn.danger { color:var(--danger); border-color:var(--danger); } @media (pointer:coarse) { .tentryacts .btn { min-height:44px; } } /* THE DEMO SWEEP (James, 5 October 2026: "sweep the demo for similar small issues"), every screen at 1280, 1440, 1920 and 390px, measured as well as looked at. What it found, by rule. */ /* A select in a row of small buttons: the buttons take the row's height, so the row is one height instead of a 36px box beside 28px buttons (Work and Income's period, Interview questions' job, a task's select, Wins' filter). */ .row:has(> select) > .btn.small, .tplacebar > .btn.small { align-self:stretch; } /* What to do now, on a phone: the words take the line, and the row's buttons sit together under them, the same on every row. Before, a long line pushed Prep under the words and left Open alone on a third line beside nothing. A row with a date or a time keeps it on the right, and the words wrap beside it. */ @media (max-width:939px) { .na .nawhat { flex:1 1 100%; } .na:has(> .pill) { flex-wrap:nowrap; } .na:has(> .pill) .nawhat { flex:1 1 0; min-width:0; } .na > .pill { flex:0 0 auto; } } /* Getting started's four answers, one under another on a phone, each the full width, instead of one, two and one. */ @media (max-width:599px) { .focusask > .btn { flex:1 1 100%; justify-content:flex-start; } } /* Invoices and expenses on a phone: a card per row with each cell named (data-label), as Companies and the Work and Income record do, instead of a table whose totals and status were off the side of its box. */ @media screen and (max-width:599px) { .twrap.tstackwrap { border:0; background:transparent; overflow:visible; } table.trep.tstack { min-width:0; } table.trep.tstack thead { display:none; } table.trep.tstack, table.trep.tstack tbody, table.trep.tstack tr { display:block; width:auto; } table.trep.tstack tr { border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0.5rem 0.75rem 0.45rem; margin:0 0 0.5rem; } table.trep.tstack th, table.trep.tstack td { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border:0; padding:0.12rem 0; text-align:right; } table.trep.tstack th[scope=row] { padding-bottom:0.2rem; text-align:left; } table.trep.tstack td::before { content:attr(data-label); flex:0 0 auto; text-align:left; font-size:0.7rem; font-weight:650; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); } /* Reports' tree keeps its columns, closer together, so Earned and An hour fit on the screen. With cost and margin too it is seven columns, and scrolls in its box as before. */ table.trep.ttree:not(.tcost) { min-width:0; } table.trep.ttree:not(.tcost) th, table.trep.ttree:not(.tcost) td { padding:0.42rem 0.32rem; font-size:0.8rem; } table.trep.ttree:not(.tcost) thead th { font-size:0.62rem; letter-spacing:0.03em; } /* The dates go under the name on a phone, so the tree keeps its five figures across (8 October 2026). */ .trep.ttree .tdates { display:none; } .trep.ttree .tdates-in { display:block; font-size:0.72rem; font-weight:400; color:var(--muted); } /* Income by client: the bar under the name, the full width, rather than a 20px stub between the name and the sum. */ .tsharerow { grid-template-columns:minmax(0, 1fr) auto; row-gap:0.25rem; } .tsharerow .tsharebar { grid-column:1 / -1; grid-row:2; } /* The last six months on a phone: twelve columns left 23px each, and the sums and hours ran into each other. */ .tmonths { grid-template-columns:repeat(6, minmax(0, 1fr)); } .tmonths > .tmc:nth-child(-n+6) { display:none; } } /* Pay tables on a phone: the label column and the headings wrap, the money never does, so a three-column table (Insights' two offers, the range on a job) fits the screen instead of running 70 to 100px off its side. */ @media (max-width:599px) { table.pay td:first-child, table.pay th { white-space:normal; } table.pay th, table.pay td { padding-left:0.32rem; padding-right:0.32rem; } /* Second job's four columns: the code's box and "WT (schedular) at 20%" give way, so Edit is on the screen. */ table.taxjobs td { white-space:normal; } table.taxjobs select { min-width:0; width:100%; max-width:7.5rem; } } /* A pay table that fits its box is not faded at the right (payFadeAll in app.js marks it). */ .paywrap.fits { -webkit-mask-image:none; mask-image:none; } .tm6 { display:none; } @media screen and (max-width:599px) { .tm12 { display:none; } .tm6 { display:inline; } } /* THUMB-SIZED ON A TOUCHSCREEN, the ones the sweep found under 44px: Take the tour and Put Sam's example back on Home, Week view and List view, Log time, the note and the dots on a phone's Today card, a place's Edit, the summary of the places hidden, and the bookmark button in Settings. Each keeps the size it looks and grows where it is hit. */ @media (pointer:coarse) { .homehead .linkish, .demotry-head .linkish { display:inline-flex; align-items:center; min-height:44px; } .tvbtn, .tlogbtn { min-height:44px; } .ttoday-acts .btn { min-width:44px; } .tsetrow .btn.small, .tplace .btn.small { min-width:44px; } .thidden summary { display:flex; align-items:center; min-height:44px; } a.capturebtn { display:inline-flex; align-items:center; min-height:44px; } table.trep.tstack th[scope=row] .linkish, table.stack td.lead > a { display:inline-flex; align-items:center; min-height:44px; } } /* Text and date boxes on a phone are 44px tall, as its selects have been since 4 October 2026, not 40 to 42. */ @media (pointer:coarse) and (max-width:939px) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]) { min-height:44px; } } /* ========== THE ROUND OF 7 OCTOBER 2026 (James): team approvals for members, editing, sorting, layout, the treemap ========== */ /* SAVED ✓ ON THE TITLE'S LINE (T17). The band it had above every page is gone: the tick sits at the right of the page's title row (syncPillPlace in app.js), in the phone's top bar below 940px, and out of the flow at the top right on a page with no title near the top. The full bar, when something needs reading, keeps its own row as before. */ .pagetitlerow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.35rem 1rem; margin:0.85rem 0 0.45rem; } .pagetitlerow > h2 { margin:0; } #view > .pagetitlerow:first-child, #view > .prodlabel + .pagetitlerow { margin-top:0; } .titlesaved { display:inline-flex; align-items:center; margin-left:auto; } .ttitlerow .titlesaved { margin-left:0; } .syncbar.compact.intitle, .syncbar.compact.inphone { margin:0; } .syncbar.compact.attop { position:absolute; top:0.3rem; right:0.25rem; margin:0; z-index:6; } #main { position:relative; } .phsaved { display:inline-flex; align-items:center; margin-left:auto; } .phsaved + .phjo { margin-left:0; } .syncbar.inphone .syncpill { padding:0.12rem 0.5rem; font-size:0.74rem; min-height:32px; } /* On a phone the word goes to a screen reader only: a dot and a tick are the whole message, and the bar is narrow. */ .syncbar.inphone .syncword { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @media print { .titlesaved, .phsaved { display:none !important; } } /* TIGHTER BETWEEN SECTIONS, ON EVERY PAGE OF THE APP (T17: "tighten gaps between sections"): the base h2, h3 and .card margins near the top of this file are smaller, and a page's first heading starts at the top of the page. */ #view > h2:first-child { margin-top:0; } /* WEEK AND TIMER, WITH THE EMPTY SPACE TAKEN OUT (T17: "cut vertical empty space drastically"). The title row, the line under it, the timer, the dates and the grid sit close; List view's Show sits beside Week view and List view. */ .ttitlerow { margin:0 0 0.3rem; gap:0.35rem 0.8rem; } .tviewbar { margin:0; gap:0.4rem 0.6rem; } .tperiodgrp { gap:0.35rem; } .timeview .tintro { margin:0 0 0.35rem; } .ttimercard { padding:0.55rem 0.75rem; margin:0.35rem 0; } .ttimercard .ttimernote { margin-top:0.35rem; } .tweeknav { margin:0.35rem 0 0.4rem; gap:0.35rem 0.8rem; } .tgridkey { margin-top:0.25rem !important; } .taddrow { margin-top:0.5rem; padding:0.55rem 0.75rem; } .tlogcard { padding:0.55rem 0.75rem; margin:0.35rem 0; } .tlogrow { margin-top:0.3rem; } .tlistwrap { margin-top:0.45rem; } .tlempty { margin-top:0.45rem; } .tsumsec { margin-top:0.8rem; } .tbudgetnote { margin:0.35rem 0; } .ttoday-head { margin:0.25rem 0 0.4rem; } .ttoday-row { margin-bottom:0.45rem; padding:0.6rem 0.75rem; } .tjoincard, .tteamnote.card { margin:0.35rem 0; } .timeview .btn.small.taddplace { margin-top:0.45rem !important; } @media (max-width:939px) { .ttitlerow .tviewbar { margin-left:0; flex:1 1 100%; } .tperiodgrp { flex:1 1 100%; } .tperiodgrp .tperiod { flex:1 1 auto; } .tperiodgrp .tperiod .tvbtn { flex:1 1 25%; padding-left:0.4rem; padding-right:0.4rem; } } /* EVERY COLUMN SORTS (T16): the heading is a button with an arrow; the sorted one is marked, and on a phone, where the headings are hidden, Sort by does the same. */ .tlist thead th .tlsort { appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap; } .tlist thead th .tlsort:hover { color:var(--ink); } .tlist thead th .tlsort:focus-visible { outline:2px solid var(--time); outline-offset:2px; border-radius:3px; } .tlsortind { font-size:0.7rem; opacity:0.45; } .tlist thead th.tlsorted { color:var(--time); } .tlist thead th.tlsorted .tlsortind { opacity:1; } .tlist thead th.tlh-hours .tlsort { flex-direction:row-reverse; } .tlsortpick { display:none; } @media (max-width:700px) { .tlsortpick { display:flex; align-items:center; gap:0.5rem; margin:0.45rem 0 0; } .tlsortpick label { margin:0; white-space:nowrap; } .tlsortpick select { flex:1 1 auto; min-width:0; width:auto; } } /* T13, THE MEMBER'S SIDE OF APPROVALS: each period's state under the dates, what is due or sent back at the top, a warning before an edit to a day already approved, and billable as the team set it. */ .tappr { display:grid; gap:0.35rem; margin:0 0 0.45rem; } .tapprteam { border:1px solid var(--time-line); border-radius:8px; background:var(--paper); padding:0.4rem 0.6rem; display:grid; gap:0.3rem; } .tapprhead { font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); } .tapprhead .tiny { text-transform:none; letter-spacing:0; font-weight:400; } .tapprrow { display:flex; flex-wrap:wrap; align-items:center; gap:0.3rem 0.6rem; font-size:0.85rem; } .tapprwhat { flex:1 1 16rem; min-width:0; overflow-wrap:anywhere; } .tapprline { color:var(--muted); } .tapprpill { font-weight:700; } .tappr-due .tapprpill, .tappr-back .tapprpill { background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); } .tappr-wait .tapprpill { background:var(--st-applied-soft); border-color:var(--st-applied-line); color:var(--st-applied); } .tappr-ok .tapprpill { background:var(--good-bg); border-color:var(--good-line); color:var(--good-ink); } .tappr-pre .tapprpill { background:var(--closed-bg); color:var(--muted); } .tappr-back .tapprline { color:var(--ink); } .tapprnote { border:1.5px solid var(--warn-line); background:var(--warn-soft); display:grid; gap:0.35rem; } .tapprnote .tapprnoteh { margin:0; color:var(--warn); } /* B1 and B2 (9 October 2026): a team's missing-hours nudge, this week's time away on one line, and the two small forms. */ .tteamnudge { border:1.5px solid var(--warn-line); background:var(--warn-soft); } .tawaystrip { display:flex; flex-wrap:wrap; gap:0.3rem 0.9rem; align-items:baseline; margin:0.2rem 0 0.5rem; } .tawaymark { white-space:normal; } .tawayform, .tpinform { display:grid; gap:0.35rem; } .tawayform select, .tawayform input:not([type=checkbox]), .tpinform input { width:100%; } .tawaydates { gap:0.6rem; flex-wrap:wrap; } .tawaydates label { display:grid; gap:0.2rem; flex:1 1 9rem; } .tapprwarn { margin:0.4rem 0; padding:0.45rem 0.65rem; border:1px solid var(--warn-line); border-left:3px solid var(--warn); border-radius:0 6px 6px 0; background:var(--warn-soft); font-size:0.84rem; } .tl-date .tapprpre { font-size:0.62rem; font-weight:650; margin-left:0.3rem; white-space:nowrap; } /* Signed off on a link (129, 8 October 2026): the mark on an entry, the answer under a link, the Reports list. */ .pill.tsigned { background:var(--good-bg); border-color:var(--good-line); color:var(--good-ink); font-weight:650; } .tl-date .tsigned { font-size:0.62rem; margin-left:0.3rem; } .tsignedline { display:block; margin-top:0.2rem; color:var(--good-ink); } .tshsign { display:flex; flex-wrap:wrap; align-items:center; gap:0.3rem 0.5rem; margin-top:0.45rem; } .tshsign .small { flex:1 1 14rem; min-width:0; overflow-wrap:anywhere; } .tshteam p { overflow-wrap:anywhere; } .tsignlist { margin-top:0.9rem; } .tsignlist h3 { margin:0 0 0.4rem; } .tbillteam { color:var(--muted); font-size:0.78rem; } .tbillro { padding:0.35rem 0; } .tbillro .tbilllab { font-weight:650; color:var(--label-ink); } .tbillteamline { margin-top:0.3rem; grid-column:1 / -1; } .teditbill { margin-top:0.45rem; } .teditbill .tbillsel { max-width:16rem; } .teditbill .tbillsel select { width:100%; } .tmovelink { margin:0 0 0.35rem; } /* While its timer runs, an entry's date and hours are not changed in its Edit. */ .trunning .tlogday, .trunning .tloghrs, .trunning .tlogtimes { display:none !important; } .tmergedlg select { width:100%; } /* WHERE THE HOURS WENT (Reports, T17): one block per client, its projects split by light lines, plain boxes placed by percentages in a box of fixed proportions, so it fits 390px and prints. */ .tmaphead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.35rem 0.8rem; margin:1.15rem 0 0.4rem; } .tmaphead h3 { margin:0; } .tmaptog .tvbtn { font-size:0.82rem; padding:0.25rem 0.85rem; min-height:34px; } .tmapcard { padding:0.6rem; } .tmap { position:relative; width:100%; overflow:hidden; border-radius:6px; background:var(--paper); -webkit-print-color-adjust:exact; print-color-adjust:exact; } .tmapc { position:absolute; box-sizing:border-box; border:1.5px solid; border-radius:5px; overflow:hidden; box-shadow:0 0 0 1.5px var(--paper); -webkit-print-color-adjust:exact; print-color-adjust:exact; } .tmapp { position:absolute; box-sizing:border-box; border-right:2px solid rgba(255,255,255,0.9); border-bottom:2px solid rgba(255,255,255,0.9); } .tmappl { position:absolute; left:0.35rem; right:0.3rem; bottom:0.2rem; font-size:0.66rem; line-height:1.2; color:var(--ink); opacity:0.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tmapl { position:absolute; left:0.4rem; top:0.3rem; right:0.3rem; display:flex; flex-direction:column; font-size:0.72rem; line-height:1.25; color:var(--ink); pointer-events:none; font-variant-numeric:tabular-nums; } .tmapl b { font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tmapl span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tmapsay { margin-top:0.4rem; } .tmapdetails { margin-top:0.35rem; } .tmapdetails > summary { cursor:pointer; color:var(--time); font-weight:650; } .tmaptable { margin-top:0.35rem; } @media print { .tmapsec { break-inside:avoid; } .tmapdetails:not([open]) { display:none; } } /* On a computer the timer's heading sits beside its boxes, not on a line of its own (T17). */ @media (min-width:940px) { .ttimercard .tpickhead, .taddrow .tpickhead { flex:0 0 auto; align-self:flex-end; padding-bottom:0.6rem; margin-right:0.3rem; } } /* ---- Team features A2 and A3 (James, 9 October 2026): a public holiday the member's team marks, under the day's date in the week, and the line under the week with their usual hours. Facts, in the time colour, never a warning. ---- */ .tgrid thead th span.thol { display:inline-block; margin-top:0.15rem; font-size:0.62rem; font-weight:700; letter-spacing:0.02em; text-transform:none; color:var(--time); background:var(--time-soft); border:1px solid var(--time-line); border-radius:4px; padding:0 0.3rem; cursor:help; } .tgrid thead th span.thol .visually-hidden { display:inline; } .tusual { margin-top:0.45rem; padding:0.45rem 0.7rem; border-left:3px solid var(--time); background:var(--time-soft); border-radius:0 6px 6px 0; } /* ---- end A2 and A3 ---- */