/* ImageBooth skin — the Apple-language design system, for Admin and Client Portal. =========================================================================== Source of truth: design_handoff_imagebooth_apple (Apple Reskin.dc.html, tokens.css, components.css). 11D is the canonical Admin screen, 11C the canonical Client screen; every other page derives from those two. ARCHITECTURE — ONE SKIN, ONE GATE, TOKENS FIRST. --------------------------------------------------------------------------- `admin.css` stays the base: it owns every geometry the JavaScript measures (the schedule slots, the gallery grid, the task board, the drawer's positioning) and every rule the guard tests pin. This sheet loads after it and is gated: every selector carries `[data-skin="apple"]`, which the Admin layout, the Portal layout and the two sign-in pages stamp on their shell. `layouts/public.php` links it only when a controller asks by name; the public `/g/` gallery never does, so nothing here can reach a client's delivered gallery. `tests/unit/skin.php` fails the build if a selector is ungated, if a layout it must not reach links it, or if the two dark blocks drift apart. It replaces BOTH previous reskin sheets (`admin-reskin.css` and `portal-reskin.css`), which stacked warm-charcoal, Archivo/General Sans/ JetBrains layers over the base. Those files are gone, not overridden. HOW IT WORKS. The base sheet reads its colours, faces and radii through custom properties (`--ink`, `--panel`, `--body`, `--card-radius` …), and a custom property declared on the shell wins over one inherited from `:root`. So the first thing this sheet does is REDECLARE THOSE TOKENS on the gate element, in the new palette, for light and for both dark states. Most of the base sheet then renders in the new system without being touched; the rules that follow are the shapes the design changes — flat surfaces, small radii, system type, sentence case, the lime outline — and nothing else. THE SYSTEM RULES (non-negotiable, from the handoff): · Lime #d9f24f is OUTLINE ONLY: 2px on white for primary buttons, the Awaiting-action stat, the golden-hour pill, active tab underline, the active-nav dot, the calendar event edge, input focus. Never a fill. The only lime-tinted fill is --ib-lime-pill, for positive status pills. · No orange, no red fills. --ib-red is text, for overdue lines. · No coloured dots. Bullets are ink; crew is initials, not colour. · One primary CTA per screen, in the rail's lower block. · Section titles end with a period. · Radii: cards 11, tiles/rows 8, controls/pills 7, rail items 6. · System type throughout; Termina only on the wordmark. THEME. Light on the gate; `[data-theme="dark"]` and the guarded `prefers-color-scheme` block restate the dark palette — twice, because CSS has no way to say it once, and a guard proves the two agree. FOCUS. The handoff draws a lime ring on inputs. Lime on white is not an accessible ring for a button or a row, so the base `--accent` focus outline is remapped to ink (visible on every surface) and inputs keep the lime ring the design asks for, on their grey field where it reads. */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ [data-skin="apple"]{ /* Surfaces */ --ib-bg:#ffffff; --ib-s1:#f5f5f7; --ib-s2:#ffffff; --ib-s3:#e8e8ed; --ib-hover:#ebebef; --ib-hover-soft:rgba(0,0,0,.05); /* Ink */ --ib-ink:#1d1d1f; --ib-ink2:#6e6e73; --ib-ink3:#a1a1a6; /* Lines */ --ib-line:#d2d2d7; --ib-line-soft:rgba(0,0,0,.06); /* Accent — outline only */ --ib-accent:#d9f24f; --ib-accent-contrast:#1d1d1f; --ib-accent-border:rgba(0,0,0,.15); --ib-accent-soft:#f7fcdc; --ib-lime-pill:#eefbb3; --ib-lime-pill-ink:#3d4a00; /* Signal — text only */ --ib-red:#c41e1e; --ib-red-soft:rgba(196,30,30,.08); /* The image viewer's stage: dark in both themes, because a photograph is judged against a quiet ground rather than against the chrome. */ --ib-stage:#111111; --ib-on-stage:#f5f5f7; /* On a photograph — the tile scrim and its caption, theme-invariant. */ --ib-tile-scrim:linear-gradient(to bottom,rgba(0,0,0,0) 42%,rgba(0,0,0,.74)); --ib-on-tile:#ffffff; --ib-on-tile-soft:rgba(255,255,255,.85); --ib-tile-pill:rgba(255,255,255,.88); --ib-tile-pill-ink:#1d1d1f; /* Elevation */ --ib-shadow-raised:0 1px 2px rgba(0,0,0,.06); --ib-shadow-hover:0 2px 8px rgba(0,0,0,.08); --ib-shadow-drawer:-24px 0 60px rgba(0,0,0,.18); --ib-scrim:rgba(0,0,0,.28); /* Type */ --ib-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,sans-serif; --ib-font-brand:'termina',var(--ib-font); /* General Sans, for Studio Hill Help's controls ONLY — named here once, as Termina is, so the face lives in exactly one place. The rest of the skin is the system stack by decision; Help's buttons, chips and fields take this because the Help brief asks for General Sans on controls (AGENTS.md §19). Repointing this to var(--ib-font) makes Help match every other button. */ --ib-font-ui:'General Sans',var(--ib-font); /* Motion */ --ib-ease:cubic-bezier(.23,1,.32,1); --ib-press:scale(.97); --ib-press-row:scale(.995); --ib-press-tile:scale(.985); /* --- THE BASE SHEET'S OWN TOKENS, REMAPPED ------------------------------ Everything below is a name `admin.css` already reads. Redeclared here so the base rules render in this palette without being rewritten. */ --bg:var(--ib-bg); --panel:var(--ib-s1); --panel2:var(--ib-s1); --panel-hi:var(--ib-hover); --line:var(--ib-line); --line2:var(--ib-line); --slate:var(--ib-ink3); --slate2:var(--ib-ink2); --linen:var(--ib-ink); --ink:var(--ib-ink); --ok:var(--ib-lime-pill-ink); --warn:var(--ib-ink2); --hot:var(--ib-red); --hot-dim:var(--ib-red-soft); --info:var(--ib-ink); --shadow:var(--ib-shadow-raised); --accent:var(--ib-ink); --accent-dim:var(--ib-hover-soft); --accent-glow:none; --accent-ink:var(--ib-bg); --band:var(--ib-s1); --band-ink:var(--ib-ink2); --band-line:var(--ib-line); --surface-card:var(--ib-s1); --surface-row:var(--ib-s2); --surface-row-hover:var(--ib-hover); --surface-row-sel:var(--ib-s2); --edge-row:transparent; --edge-card:transparent; --edge-hi:transparent; --elev-row:none; --elev-card:none; --ring-hover:var(--ib-line); --ring-sel:var(--ib-ink); --halo-hover:none; --halo-sel:none; --glass:var(--ib-s1); --glass-hover:var(--ib-hover); --glass-line:transparent; --glass-line-hover:transparent; --glass-blur:none; --btn-primary:var(--ib-s2); --btn-primary-ink:var(--ib-ink); --btn-primary-border:var(--ib-accent); --btn-primary-shadow:none; --page-ground:none; --sidebar-bg:var(--ib-s1); --atmos-left:transparent; --atmos-right:transparent; --atmos-floor:transparent; --atmos-strength:0; --crew-violet:var(--ib-ink2); --dash-blob-1:transparent; --dash-blob-2:transparent; --dash-blob-3:transparent; --dash-glass:var(--ib-s1); --dash-glass-border:transparent; --dash-glass-shadow:none; --dash-glass-shadow-hi:var(--ib-shadow-hover); --dash-item:var(--ib-s2); --dash-item-border:var(--ib-line-soft); --dash-item-hover:var(--ib-hover); --dash-ink:var(--ib-ink); --dash-muted:var(--ib-ink2); --dash-faint:var(--ib-ink3); --dash-hi-border:var(--ib-line); --dash-hi-glow:none; --dash-num:var(--ib-ink); --dash-num-glow:none; --dash-num-dim:var(--ib-ink3); --dash-warn-num:var(--ib-ink); --dash-warn-num-glow:none; --dash-warn-border:var(--ib-accent); --dash-warn-glow:none; --dash-info:var(--ib-ink); --dash-status-warn:var(--ib-ink2); --dash-badge:var(--ib-ink); --dash-badge-border:var(--ib-ink); --dash-badge-ink:var(--ib-bg); --dash-chip:var(--ib-s2); --dash-chip-border:var(--ib-accent); --dash-chip-ink:var(--ib-ink); --dash-sun:var(--ib-ink); --dash-sun-glow:none; --dash-dot:var(--ib-ink); --dash-dot-glow:none; --dash-blur:0px; --dash-ctl-h:38px; --dash-gap:20px; --dash-pad-card:18px 20px; --dash-pad-stat:16px 22px; --dash-ease:var(--ib-ease); --dash-fs-display:44px; --dash-fs-display-sm:34px; --dash-fs-stat:34px; --dash-fs-heading:22px; --dash-fs-figure:30px; /* Faces: the system stack everywhere the base asked for a serif, a mono or the operational sans. `--sans` is left alone — it is Termina, and only the wordmark reads it. */ --body:var(--ib-font); --serif:var(--ib-font); --mono:var(--ib-font); /* Geometry */ --sidebar-w:232px; --card-radius:11px; --row-radius:8px; --chip-radius:7px; --pill-radius:7px; --row-gap:2px; --rail-row-pad:12px; background:var(--ib-bg); background-image:none; color:var(--ib-ink); font-family:var(--ib-font); -webkit-font-smoothing:antialiased; color-scheme:light; transition:background-color 200ms ease,color 200ms ease } html[data-theme="dark"] [data-skin="apple"]{ --ib-bg:#000000; --ib-s1:#1c1c1e; --ib-s2:#2c2c2e; --ib-s3:#3a3a3c; --ib-hover:#3a3a3c; --ib-hover-soft:rgba(255,255,255,.08); --ib-ink:#f5f5f7; --ib-ink2:#98989d; --ib-ink3:#6e6e73; --ib-line:#3a3a3c; --ib-line-soft:rgba(255,255,255,.08); --ib-accent-border:rgba(255,255,255,.12); --ib-accent-soft:rgba(217,242,79,.14); --ib-lime-pill:rgba(217,242,79,.20); --ib-lime-pill-ink:#d9f24f; --ib-red:#ff453a; --ib-red-soft:rgba(255,69,58,.12); --ib-shadow-raised:0 1px 2px rgba(0,0,0,.4); --ib-shadow-hover:0 2px 8px rgba(0,0,0,.5); --ib-shadow-drawer:-24px 0 60px rgba(0,0,0,.6); --ib-scrim:rgba(0,0,0,.5); color-scheme:dark } @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) [data-skin="apple"]{ --ib-bg:#000000; --ib-s1:#1c1c1e; --ib-s2:#2c2c2e; --ib-s3:#3a3a3c; --ib-hover:#3a3a3c; --ib-hover-soft:rgba(255,255,255,.08); --ib-ink:#f5f5f7; --ib-ink2:#98989d; --ib-ink3:#6e6e73; --ib-line:#3a3a3c; --ib-line-soft:rgba(255,255,255,.08); --ib-accent-border:rgba(255,255,255,.12); --ib-accent-soft:rgba(217,242,79,.14); --ib-lime-pill:rgba(217,242,79,.20); --ib-lime-pill-ink:#d9f24f; --ib-red:#ff453a; --ib-red-soft:rgba(255,69,58,.12); --ib-shadow-raised:0 1px 2px rgba(0,0,0,.4); --ib-shadow-hover:0 2px 8px rgba(0,0,0,.5); --ib-shadow-drawer:-24px 0 60px rgba(0,0,0,.6); --ib-scrim:rgba(0,0,0,.5); color-scheme:dark } } /* --------------------------------------------------------------------------- 1b. THE ACCENT PALETTE — a per-user preference, stamped as `data-accent` --------------------------------------------------------------------------- Eight colours, and every one of them is three token declarations and nothing else. No rule below section 2 knows an accent exists: they all read `--ib-accent`, `--ib-accent-soft`, `--ib-accent-border` and `--ib-accent-contrast`, which is what those tokens were renamed from `--ib-lime*` to make possible. Changing somebody's accent changes four custom properties and not one selector. WHY LIME HAS NO BLOCK. Lime is the default, so it is the base token block in section 1, declared exactly as it was before this feature existed. A person who never chooses sees pixel-for-pixel what they saw before, and there is no second copy of the default to drift from the first. TWO SELECTORS PER ACCENT, on purpose. The first is the shell itself, which is where the preference lands. The second is any descendant carrying the attribute — which is how the settings swatches paint themselves in their own colour without a single hex being repeated for them, and how they get it right in dark mode for free. WHAT IS NOT HERE. `--ib-lime-pill` and `--ib-lime-pill-ink` are absent from every block below, and stay lime in every accent. They are the positive STATUS tint — Delivered, Live, the crew register's "needs you" — and a status colour is a meaning, not a decoration. Somebody who prefers maroon has not asked for a different definition of done. Red, the shadows, the surfaces and the ink are likewise untouched. DARK IS NOT THE SAME COLOUR. A deep wine that reads beautifully as a 2px outline on white is close to invisible on near-black, so each accent declares a lighter tint for dark and flips its contrast ink with it. Lime is the exception and needs no dark value: it was chosen to work on both. `tests/unit/accent_palette.php` holds the contrast floors. The soft wash follows the two themes' existing habits — an opaque tint on white, a translucent one on black — which is what `--ib-accent-soft` already did for lime before there was anything else to be. */ /* --- Green: emerald, and deliberately nothing like lime -------------------- */ [data-skin="apple"][data-accent="green"], [data-skin="apple"] [data-accent="green"]{ --ib-accent:#1e7a54; --ib-accent-soft:#e6f3ec; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="green"], html[data-theme="dark"] [data-skin="apple"] [data-accent="green"]{ --ib-accent:#43c08a; --ib-accent-soft:rgba(67,192,138,.14); --ib-accent-contrast:#1d1d1f; } /* --- Blue ------------------------------------------------------------------ */ [data-skin="apple"][data-accent="blue"], [data-skin="apple"] [data-accent="blue"]{ --ib-accent:#2563c9; --ib-accent-soft:#e8effb; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="blue"], html[data-theme="dark"] [data-skin="apple"] [data-accent="blue"]{ --ib-accent:#6fa3f5; --ib-accent-soft:rgba(111,163,245,.14); --ib-accent-contrast:#1d1d1f; } /* --- Violet ---------------------------------------------------------------- */ [data-skin="apple"][data-accent="violet"], [data-skin="apple"] [data-accent="violet"]{ --ib-accent:#6c4bd1; --ib-accent-soft:#efeafb; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="violet"], html[data-theme="dark"] [data-skin="apple"] [data-accent="violet"]{ --ib-accent:#a88cf0; --ib-accent-soft:rgba(168,140,240,.14); --ib-accent-contrast:#1d1d1f; } /* --- Teal ------------------------------------------------------------------ */ [data-skin="apple"][data-accent="teal"], [data-skin="apple"] [data-accent="teal"]{ --ib-accent:#17726f; --ib-accent-soft:#e4f1f1; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="teal"], html[data-theme="dark"] [data-skin="apple"] [data-accent="teal"]{ --ib-accent:#4fbdb6; --ib-accent-soft:rgba(79,189,182,.14); --ib-accent-contrast:#1d1d1f; } /* --- Pink: rose rather than fuchsia ---------------------------------------- */ [data-skin="apple"][data-accent="pink"], [data-skin="apple"] [data-accent="pink"]{ --ib-accent:#b83c74; --ib-accent-soft:#faeaf1; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="pink"], html[data-theme="dark"] [data-skin="apple"] [data-accent="pink"]{ --ib-accent:#ec8cb8; --ib-accent-soft:rgba(236,140,184,.14); --ib-accent-contrast:#1d1d1f; } /* --- Maroon: wine, not warning --------------------------------------------- */ [data-skin="apple"][data-accent="maroon"], [data-skin="apple"] [data-accent="maroon"]{ --ib-accent:#8a2540; --ib-accent-soft:#f6eaee; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="maroon"], html[data-theme="dark"] [data-skin="apple"] [data-accent="maroon"]{ --ib-accent:#c9788c; --ib-accent-soft:rgba(201,120,140,.14); --ib-accent-contrast:#1d1d1f; } /* --- Graphite: the near-neutral, and it has to stay visible in both --------- */ [data-skin="apple"][data-accent="graphite"], [data-skin="apple"] [data-accent="graphite"]{ --ib-accent:#4a4a52; --ib-accent-soft:#ededf0; --ib-accent-contrast:#ffffff; } html[data-theme="dark"] [data-skin="apple"][data-accent="graphite"], html[data-theme="dark"] [data-skin="apple"] [data-accent="graphite"]{ --ib-accent:#a9a9b4; --ib-accent-soft:rgba(169,169,180,.14); --ib-accent-contrast:#1d1d1f; } /* The same seven, for a machine set to dark with no explicit choice made. Guarded with `:not([data-theme="light"])` like every other dark block, so choosing Light on a dark machine still wins. A guard test asserts that this block and the explicit one above declare the same colours. */ @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) [data-skin="apple"][data-accent="green"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="green"]{ --ib-accent:#43c08a; --ib-accent-soft:rgba(67,192,138,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="blue"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="blue"]{ --ib-accent:#6fa3f5; --ib-accent-soft:rgba(111,163,245,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="violet"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="violet"]{ --ib-accent:#a88cf0; --ib-accent-soft:rgba(168,140,240,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="teal"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="teal"]{ --ib-accent:#4fbdb6; --ib-accent-soft:rgba(79,189,182,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="pink"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="pink"]{ --ib-accent:#ec8cb8; --ib-accent-soft:rgba(236,140,184,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="maroon"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="maroon"]{ --ib-accent:#c9788c; --ib-accent-soft:rgba(201,120,140,.14); --ib-accent-contrast:#1d1d1f; } html:not([data-theme="light"]) [data-skin="apple"][data-accent="graphite"], html:not([data-theme="light"]) [data-skin="apple"] [data-accent="graphite"]{ --ib-accent:#a9a9b4; --ib-accent-soft:rgba(169,169,180,.14); --ib-accent-contrast:#1d1d1f; } } /* The document behind the shell, so overscroll and the sign-in page match. */ html:has([data-skin="apple"]){background:var(--ib-bg)} html:has([data-skin="apple"]) body{background:inherit} /* --------------------------------------------------------------------------- 2. THE SHELL --------------------------------------------------------------------------- */ [data-skin="apple"]::before{display:none} [data-skin="apple"] .dash__bloom{display:none} [data-skin="apple"] .main{background:var(--ib-bg)} [data-skin="apple"] .ws{padding:32px 40px 36px;gap:20px} [data-skin="apple"] a:hover{color:inherit} [data-skin="apple"] ::-webkit-scrollbar-thumb{background:var(--ib-s3)} [data-skin="apple"] ::selection{background:var(--ib-accent);color:var(--ib-accent-contrast)} /* --- the rail ------------------------------------------------------------- */ [data-skin="apple"] .sb{ background:var(--ib-s1);border-right:1px solid var(--ib-line-soft);box-shadow:none; padding:24px 16px 20px;color:var(--ib-ink);transition:background-color 200ms ease } [data-skin="apple"] .sb__brand{padding:0 12px 22px;border:0} [data-skin="apple"] .sb__brand:hover{opacity:1} /* The rail's wordmark, and both phone bands' — one rule, because it is the same mark at the same size and a second copy is a second thing to drift. The Contractor band had NO rule matching its `.wm` at all: nothing selects a `.wm` that is not inside `.sb__brand` or `.solo__brand`, so it rendered as unstyled inline text at body size, with the period the handoff drops still showing. It has looked like that since the Contractor area shipped. */ [data-skin="apple"] .sb__brand .wm, [data-skin="apple"] .adtop__brand .wm, [data-skin="apple"] .ctrtop__brand .wm{ display:block;font:800 15px/1 var(--ib-font-brand);letter-spacing:.02em; text-transform:uppercase;color:var(--ib-ink) } /* The handoff wordmark carries no period. */ [data-skin="apple"] .sb__brand .wm em, [data-skin="apple"] .adtop__brand .wm em, [data-skin="apple"] .ctrtop__brand .wm em{display:none} [data-skin="apple"] .sb__brand .tag, [data-skin="apple"] .adtop__brand .tag, [data-skin="apple"] .ctrtop__brand .tag{ margin-top:6px;font:500 9px/1.2 var(--ib-font-brand);letter-spacing:.08em; text-transform:lowercase;color:var(--ib-ink2) } [data-skin="apple"] .sb nav{padding:0;gap:2px} [data-skin="apple"] .sb .sec{ padding:0 12px 8px;margin-top:24px;font:500 11px/1.2 var(--ib-font); letter-spacing:0;text-transform:none;color:var(--ib-ink2) } [data-skin="apple"] .sb .sec:first-child{margin-top:0} [data-skin="apple"] .ni{ gap:10px;padding:9px 12px;border-radius:6px;font:400 13px/1.3 var(--ib-font); letter-spacing:-.01em;text-transform:none;color:var(--ib-ink); transition:background 150ms ease,transform 160ms var(--ib-ease) } /* An 8px spacer on every row keeps the labels aligned; on the current row it becomes the lime dot. The base draws the active state as a 3px bar positioned on the row's edge — reset to a static dot here. */ [data-skin="apple"] .ni::before{ content:"";position:static;width:8px;height:8px;flex:none;border-radius:99px; background:transparent;border:1px solid transparent;box-shadow:none;top:auto;bottom:auto;left:auto } [data-skin="apple"] .ni svg{display:none} [data-skin="apple"] .ni:hover, [data-skin="apple"] .ni:not(.on):not(.is-disabled):hover{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .ni:active{transform:var(--ib-press)} [data-skin="apple"] .ni.on{background:var(--ib-s2);box-shadow:var(--ib-shadow-raised);font-weight:600;color:var(--ib-ink)} [data-skin="apple"] .ni.on::before{background:var(--ib-accent);border-color:var(--ib-accent-border)} [data-skin="apple"] .ni.is-disabled{opacity:1;color:var(--ib-ink3)} [data-skin="apple"] .ni .bdg{ margin-left:auto;padding:1px 7px;border-radius:7px;background:var(--ib-s3); color:var(--ib-ink2);font:600 10px/1.5 var(--ib-font);letter-spacing:0 } [data-skin="apple"] .ni .bdg--hot{background:var(--ib-ink);color:var(--ib-bg)} /* The one primary action on the screen. */ [data-skin="apple"] .sb__cta{ display:block;margin:0 4px 14px;padding:10px 16px;border-radius:7px; background:var(--ib-s2);border:2px solid var(--ib-accent);color:var(--ib-ink); font:600 13px/1 var(--ib-font);text-align:center;text-decoration:none; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .sb__cta:hover{background:var(--ib-accent-soft);color:var(--ib-ink)} [data-skin="apple"] .sb__cta:active{transform:var(--ib-press)} [data-skin="apple"] .sb__theme{padding:0 4px} [data-skin="apple"] .tm{display:none} [data-skin="apple"] .tm__seg{ display:flex;background:var(--ib-s3);border:0;border-radius:7px;padding:3px;gap:2px } [data-skin="apple"] .tm__seg button{ flex:1;padding:6px 0;border-radius:7px;font:500 12px/1.2 var(--ib-font); letter-spacing:0;text-transform:none;color:var(--ib-ink2); transition:background 150ms ease,color 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .tm__seg button:hover{background:var(--ib-hover-soft)} [data-skin="apple"] .tm__seg button:active{transform:var(--ib-press)} [data-skin="apple"] .tm__seg button.on{background:var(--ib-s2);color:var(--ib-ink);box-shadow:var(--ib-shadow-raised)} /* --- the accent swatches, directly under Theme ---------------------------- THE APPEARANCE SETTINGS ARE THE RAIL, because that is where Theme already lives and all three audiences already wear one. Admin has no personal account screen at all, and the Client and Contractor Account pages are read-only by design — building a settings screen per audience to hold one preference would be three screens where there is already one place. Each swatch carries its own `data-accent`, so the palette blocks in section 1b paint it: the button's background IS `--ib-accent` as that accent defines it, in whichever theme is on. No colour is named here. The selected swatch is marked by a ring drawn OUTSIDE it — a box-shadow in the surface colour then the ink — rather than by a border, which would shrink the colour and make the chosen one look smaller than the rest. It is ink rather than the accent because a lime ring around a lime swatch is not a selected state. */ [data-skin="apple"] .sb__accent{padding:8px 4px 0} /* The closed state is one line that looks like the Theme label above it, with a dot on the right showing what is currently set. The native marker is dropped in both spellings browsers use for it. */ [data-skin="apple"] .acc__sum{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:5px 0;border-radius:6px;cursor:pointer;list-style:none; font:500 11px/1.2 var(--ib-font);letter-spacing:0;text-transform:none; color:var(--ib-ink2);transition:color 150ms ease } [data-skin="apple"] .acc__sum::-webkit-details-marker{display:none} [data-skin="apple"] .acc__sum::marker{content:""} [data-skin="apple"] .acc__sum:hover{color:var(--ib-ink)} [data-skin="apple"] .acc__sum:focus-visible{ outline:none;box-shadow:0 0 0 2px var(--ib-ink) } /* The current colour, while the list is closed. Hidden once it is open, because the selected swatch says the same thing better. */ [data-skin="apple"] .acc__now{ width:11px;height:11px;border-radius:50%;background:var(--ib-accent); box-shadow:0 0 0 1px var(--ib-accent-border) } [data-skin="apple"] .sb__accent[open] .acc__now{display:none} [data-skin="apple"] .sb__accent[open] .acc__sum{color:var(--ib-ink);margin-bottom:4px} /* Four and four rather than seven and a stray one: the rail is about 200px wide, and eight 20px discs with gaps do not fit a single row in it. */ [data-skin="apple"] .acc__grid{ display:grid;grid-template-columns:repeat(4,20px);gap:9px 12px; border:0;margin:0;padding:4px 0 2px;justify-content:start } [data-skin="apple"] .acc__sw{ width:20px;height:20px;padding:0;border:0;border-radius:50%; background:var(--ib-accent);cursor:pointer; transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } /* THE LIME SWATCH PAINTS ITSELF, and it is the only one that has to. Every other swatch takes its colour from its own `[data-accent]` token block. Lime has none — Lime IS the base `--ib-accent` — so the Lime disc inherited whatever the viewer had already chosen: somebody on teal saw two teal discs and no lime one, and the product's own default looked missing from its own selector. It reads as "Lime is unavailable", which is the worst version of this bug, because the markup was there all along. A TOKEN, NOT A BACKGROUND. Declaring `--ib-accent` keeps this a swatch-level override rather than a second definition of Lime: the shell still has no Lime block to drift from the base, and an accent rule still declares nothing but accent tokens. `tests/unit/accent_palette.php` holds both. */ [data-skin="apple"] .acc__sw[data-accent="lime"]{--ib-accent:#d9f24f} [data-skin="apple"] .acc__sw:hover{transform:scale(1.12)} [data-skin="apple"] .acc__sw:active{transform:var(--ib-press)} [data-skin="apple"] .acc__sw:focus-visible{ outline:none;box-shadow:0 0 0 2px var(--ib-s1),0 0 0 4px var(--ib-ink) } [data-skin="apple"] .acc__sw.on{ box-shadow:0 0 0 2px var(--ib-s1),0 0 0 3.5px var(--ib-ink) } [data-skin="apple"] .sb__user{border-top:1px solid var(--ib-line);margin-top:14px;padding:16px 4px 0;gap:10px} [data-skin="apple"] .av{width:30px;height:30px;background:var(--ib-ink);color:var(--ib-bg);font:600 11px/1 var(--ib-font)} [data-skin="apple"] .sb__user .nm{font:600 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .sb__user .rl{margin-top:1px;font:400 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .sb__out{margin-top:8px} [data-skin="apple"] .sb__outbtn{padding:6px 4px;font:400 13px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink)} [data-skin="apple"] .sb__outbtn svg{display:none} [data-skin="apple"] .sb__outbtn::before{display:none} [data-skin="apple"] .sb__outbtn::after{content:" ›";color:var(--ib-ink2)} [data-skin="apple"] .sb__outbtn:hover{background:var(--ib-hover-soft)} /* --------------------------------------------------------------------------- 3. PAGE HEADER, SEARCH, HEADER ACTIONS --------------------------------------------------------------------------- */ [data-skin="apple"] .hd{align-items:flex-start;gap:20px} [data-skin="apple"] .hd h1, [data-skin="apple"] .gws__hd h1, [data-skin="apple"] h1.dash__t{ font:600 44px/1.07 var(--ib-font);letter-spacing:-.028em;color:var(--ib-ink) } [data-skin="apple"] .hd .sub, [data-skin="apple"] .hd__sub{margin-top:6px;font:400 14px/1.4 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .hd__l{display:flex;flex-direction:column} [data-skin="apple"] .hd__right{gap:10px;padding-top:4px} /* WIDTH IS A PREFERENCE, NOT A DEMAND. A flat `width:260px` in a header that could not wrap was the single most common overflow in the product — the Job Register pushed it 138px off a 390px screen. `flex:0 1 260px` asks for the same size and gives it up when there is not room. */ [data-skin="apple"] .hd__search{ width:auto;flex:0 1 260px;min-width:0;max-width:100%; min-height:38px;padding:0 10px 0 14px;gap:10px; background:var(--ib-s1);border:0;border-radius:7px;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background 150ms ease,box-shadow 150ms ease } [data-skin="apple"] .hd__search svg{width:13px;height:13px;stroke:var(--ib-ink2);stroke-width:2} [data-skin="apple"] .hd__search input{font:400 13px/1.2 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .hd__search input::placeholder{color:var(--ib-ink2)} [data-skin="apple"] .hd__search:hover{background:var(--ib-hover)} [data-skin="apple"] .hd__search:focus-within{background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent)} /* The ⌘K hint the design shows beside the placeholder. Decorative. */ [data-skin="apple"] .hd__search::after{ content:"⌘K";padding:2px 6px;border-radius:3px;background:var(--ib-s2); box-shadow:var(--ib-shadow-raised);font:500 11px/1.2 var(--ib-font);color:var(--ib-ink2) } [data-skin="apple"] .hd__search:focus-within::after{display:none} /* HEADER BUTTONS ARE SECONDARY. The rail carries the one primary action; what remains in a page header is a page-specific verb (Regenerate, Preview, Publish, Import) and reads as a chip. The ones the rail duplicates exactly are marked `rail-cta` in their templates and are not drawn at all. */ [data-skin="apple"] .rail-cta{display:none} [data-skin="apple"] .hd__btn, [data-skin="apple"] .hd__btn.ghost, [data-skin="apple"] .hd__btn:not(.ghost), [data-skin="apple"] .hd__share>summary.hd__btn{ min-height:36px;padding:0 14px;gap:6px;border:0;border-radius:7px; background:var(--ib-s1);color:var(--ib-ink);box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; font:500 12.5px/1 var(--ib-font);letter-spacing:0;text-transform:none; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .hd__btn svg{width:12px;height:12px;stroke-width:2} [data-skin="apple"] .hd__btn:not([disabled]):hover, [data-skin="apple"] .hd__btn.ghost:not([disabled]):hover, [data-skin="apple"] .hd__btn:not(.ghost):not([disabled]):hover{background:var(--ib-hover);color:var(--ib-ink);transform:none;box-shadow:none} [data-skin="apple"] .hd__btn:not([disabled]):active, [data-skin="apple"] .hd__btn:not(.ghost):not([disabled]):active{transform:var(--ib-press)} [data-skin="apple"] .hd__btn[disabled]{opacity:.5} /* THE ONE HEADER BUTTON THAT IS PRIMARY. The rule above says header buttons are secondary because the rail carries the page's primary action — and it still does. `.hd__new` is a second route to that same action, placed beside the search where an operator's eye already is, so it reads as the primary it duplicates: an accent OUTLINE, never an accent fill (the skin's "accent is outline only" rule). It shares the family's radius, so it still squares with the search field beside it. */ [data-skin="apple"] .hd__btn.hd__new{ flex-shrink:0;background:var(--ib-s1);color:var(--ib-ink);font-weight:600; box-shadow:inset 0 0 0 1.5px var(--ib-accent-border) } [data-skin="apple"] .hd__btn.hd__new:not([disabled]):hover{ background:var(--ib-hover);box-shadow:inset 0 0 0 1.5px var(--ib-accent-border) } /* --------------------------------------------------------------------------- 4. STAT TILES (Job Register KPIs and the Dashboard's stats) --------------------------------------------------------------------------- */ [data-skin="apple"] .kpis{gap:14px} [data-skin="apple"] .kpi, [data-skin="apple"] .stat{ display:block;padding:16px 22px;border-radius:11px;background:var(--ib-s1); border:0;box-shadow:none;color:var(--ib-ink);text-decoration:none; -webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible; transition:background-color 200ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .kpi:hover, [data-skin="apple"] .stat:hover{border-color:transparent;box-shadow:none;transform:none;background:var(--ib-hover)} [data-skin="apple"] .kpi:active, [data-skin="apple"] .stat:active{transform:var(--ib-press-tile)} [data-skin="apple"] .kpi__top{display:block} [data-skin="apple"] .kpi__top svg{display:none} [data-skin="apple"] .kpi__n, [data-skin="apple"] .stat__n{ display:block;font:600 34px/1 var(--ib-font);letter-spacing:-.03em;color:var(--ib-ink);text-shadow:none } [data-skin="apple"] .stat__n.is-hi, [data-skin="apple"] .stat__n.is-warn{color:var(--ib-ink);text-shadow:none} [data-skin="apple"] .stat__n.is-zero{color:var(--ib-ink3)} [data-skin="apple"] .kpi__l, [data-skin="apple"] .stat__l{ margin-top:6px;font:400 12px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2) } /* The Awaiting-action tile is the one lime outline in the row, and only when it holds something: the base adds `.kpi--alert` / `.stat--warn` for a count above zero, which is exactly the rule. */ [data-skin="apple"] .kpi.kpi--alert, [data-skin="apple"] .stat--warn{ background:var(--ib-s2);box-shadow:inset 0 0 0 2px var(--ib-accent);padding:16px 22px } [data-skin="apple"] .kpi.kpi--alert:hover, [data-skin="apple"] .stat--warn:hover{background:var(--ib-accent-soft);box-shadow:inset 0 0 0 2px var(--ib-accent)} [data-skin="apple"] .stat--hi{border-color:transparent;box-shadow:none} [data-skin="apple"] .stat--hi:hover{box-shadow:none} /* --------------------------------------------------------------------------- 5. TABS, FILTERS, SEGMENTED CONTROLS, CHIPS, PAGINATION --------------------------------------------------------------------------- */ [data-skin="apple"] .regbar{gap:12px 20px} /* Page-level tabs are a segmented control on the grey track. */ /* THE ONE PLACE HORIZONTAL SCROLLING IS ALLOWED, and it is allowed only inside the control's own box: six tabs at 390px do not fit and must not be what makes the page move. The bar is hidden because a scrollbar under six words reads as a defect rather than as an affordance. */ [data-skin="apple"] .tabs{ display:flex;gap:2px;padding:3px;background:var(--ib-s1);border:0;border-radius:7px; max-width:100%;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch } [data-skin="apple"] .tabs::-webkit-scrollbar{display:none} [data-skin="apple"] .tabs .tab{flex:0 0 auto} /* The Job drawer's own strip is a different component with the same problem: six uppercase tabs are 422px wide and the drawer on a 360px phone is 360. Same treatment, so both scroll the same way. */ [data-skin="apple"] .dtabs{ max-width:100%;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch } [data-skin="apple"] .dtabs::-webkit-scrollbar{display:none} [data-skin="apple"] .dtabs .dtab{flex:0 0 auto;white-space:nowrap} [data-skin="apple"] .tab{ margin:0;padding:7px 14px;border:0;border-radius:7px;gap:0; font:500 12.5px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2); transition:background 150ms ease,color 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .tab:hover{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .tab:active{transform:var(--ib-press)} [data-skin="apple"] .tab.on{background:var(--ib-s2);color:var(--ib-ink);box-shadow:var(--ib-shadow-raised);border-bottom-color:transparent} [data-skin="apple"] .tab .c{font:inherit;color:var(--ib-ink2)} [data-skin="apple"] .tab .c::before{content:" · "} [data-skin="apple"] .tab.on .c{color:var(--ib-ink2)} [data-skin="apple"] .filters{gap:8px} [data-skin="apple"] .filt, [data-skin="apple"] .tfoot .pg a, [data-skin="apple"] .tfoot .pg button{ gap:6px;padding:7px 12px;border:0;border-radius:7px;background:var(--ib-s1); color:var(--ib-ink);font:500 12.5px/1.2 var(--ib-font);letter-spacing:0;text-transform:none; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; transition:background 150ms ease,color 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .filt:hover, [data-skin="apple"] .tfoot .pg a:hover, [data-skin="apple"] .tfoot .pg button:hover{background:var(--ib-hover);color:var(--ib-ink);border-color:transparent} [data-skin="apple"] .filt:active{transform:var(--ib-press)} [data-skin="apple"] .filt.on, [data-skin="apple"] .tfoot .pg a.on, [data-skin="apple"] .tfoot .pg button.on{background:var(--ib-s2);color:var(--ib-ink);box-shadow:var(--ib-shadow-raised);border-color:transparent} [data-skin="apple"] .filt.clear{color:var(--ib-ink2)} [data-skin="apple"] .filt svg{width:9px;height:9px;stroke:var(--ib-ink2);stroke-width:2} [data-skin="apple"] .tfoot .pg button:disabled{opacity:1;color:var(--ib-ink3)} [data-skin="apple"] .tfoot .pg{gap:6px} /* List | Grid — a segmented pair. The words stay for assistive technology; the eye gets the two glyphs the design draws. */ [data-skin="apple"] .vsw{ display:inline-flex;gap:2px;padding:3px;border:0;border-radius:7px;background:var(--ib-s1);overflow:visible } [data-skin="apple"] .vsw__b{ padding:6px 9px;border:0;border-radius:7px;color:var(--ib-ink2); transition:background 150ms ease,color 150ms ease } [data-skin="apple"] .vsw__b+.vsw__b{border-left:0} [data-skin="apple"] .vsw__b svg{width:14px;height:14px;stroke-width:2} [data-skin="apple"] .vsw__b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} [data-skin="apple"] .vsw__b:hover{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .vsw__b.on{background:var(--ib-s2);color:var(--ib-ink);box-shadow:var(--ib-shadow-raised)} /* Chips inside forms (packages, add-ons, crew). */ [data-skin="apple"] .chip, [data-skin="apple"] .crewpill, [data-skin="apple"] .wfs{ padding:7px 12px;border:0;border-radius:7px;background:var(--ib-s1);color:var(--ib-ink); font:500 12.5px/1.2 var(--ib-font);letter-spacing:0;text-transform:none; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background 150ms ease,box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .chip:hover, [data-skin="apple"] .crewpill:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .chip.on, [data-skin="apple"] .chipwrap input:checked+.chip, [data-skin="apple"] .chipwrap input:checked+.crewpill, [data-skin="apple"] .crewpill.on{ background:var(--ib-s2);color:var(--ib-ink);border-color:transparent; box-shadow:inset 0 0 0 2px var(--ib-accent) } [data-skin="apple"] .chipwrap input:checked+.crewpill.amber, [data-skin="apple"] .crewpill.amber{background:var(--ib-s1);color:var(--ib-ink2);border-color:transparent;box-shadow:inset 0 0 0 1px var(--ib-line)} [data-skin="apple"] .chip .pr{font-family:var(--ib-font);opacity:1;color:var(--ib-ink2)} [data-skin="apple"] .chip.on .pr{color:var(--ib-ink2)} [data-skin="apple"] .crewpill i{display:none} [data-skin="apple"] .chipwrap input:focus-visible+.chip, [data-skin="apple"] .chipwrap input:focus-visible+.crewpill{outline-color:var(--ib-ink)} /* --------------------------------------------------------------------------- 6. BUTTONS AND LINKS --------------------------------------------------------------------------- */ /* The primary: white, a 2px lime outline, lime-soft on hover. Never filled. */ [data-skin="apple"] .btn.primary, [data-skin="apple"] .primary:not(.dim), [data-skin="apple"] .gbtn.pri, [data-skin="apple"] .pop .go, [data-skin="apple"] .taskform__acts .hd__btn, [data-skin="apple"] .teamform__acts .hd__btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:36px;padding:0 14px;border:2px solid var(--ib-accent);border-radius:7px; background:var(--ib-s2);color:var(--ib-ink);box-shadow:none; font:600 12.5px/1 var(--ib-font);letter-spacing:0;text-transform:none; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .btn.primary:hover, [data-skin="apple"] .primary:not(.dim):hover, [data-skin="apple"] .gbtn.pri:hover, [data-skin="apple"] .pop .go:hover, [data-skin="apple"] .taskform__acts .hd__btn:hover, [data-skin="apple"] .teamform__acts .hd__btn:hover{background:var(--ib-accent-soft);color:var(--ib-ink);transform:none;box-shadow:none} [data-skin="apple"] .btn.primary:active, [data-skin="apple"] .primary:not(.dim):active, [data-skin="apple"] .gbtn.pri:active{transform:var(--ib-press)} [data-skin="apple"] .gbtn.pri svg, [data-skin="apple"] .btn svg, [data-skin="apple"] .primary svg{width:12px;height:12px;stroke-width:2} [data-skin="apple"] .primary.dim{ background:var(--ib-s1);color:var(--ib-ink3);border:2px solid transparent;border-radius:7px; font:600 12.5px/1 var(--ib-font);padding:11px 14px } /* Secondary: the grey chip. */ [data-skin="apple"] .btn:not(.primary), [data-skin="apple"] .btn-sec{ display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px; border:0;border-radius:7px;background:var(--ib-s1);color:var(--ib-ink); font:500 12.5px/1 var(--ib-font);letter-spacing:0;text-transform:none; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .btn:not(.primary):hover, [data-skin="apple"] .btn-sec:hover{background:var(--ib-hover);color:var(--ib-ink);border-color:transparent} [data-skin="apple"] .btn:not(.primary):active{transform:var(--ib-press)} /* Link-buttons: `View gallery`, `Files`, the drawer's quiet actions. */ [data-skin="apple"] .rowact, [data-skin="apple"] .glink, [data-skin="apple"] .linklike, [data-skin="apple"] .dash__link, [data-skin="apple"] .ptsec__more, [data-skin="apple"] .sub-hd .link{ display:inline-flex;align-items:center;gap:5px;padding:4px 8px;margin-left:0; border:0;border-radius:6px;background:transparent;color:var(--ib-ink); font:500 12px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;text-decoration:none; transition:background 150ms ease,color 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .rowact:hover, [data-skin="apple"] .glink:hover, [data-skin="apple"] .linklike:hover, [data-skin="apple"] .dash__link:hover, [data-skin="apple"] .ptsec__more:hover, [data-skin="apple"] .sub-hd .link:hover, [data-skin="apple"] tr.row:hover .rowact{background:var(--ib-hover);color:var(--ib-ink);border-color:transparent;opacity:1;text-decoration:none} [data-skin="apple"] .rowact:active, [data-skin="apple"] .glink:active{transform:scale(.96)} [data-skin="apple"] .rowact svg{width:13px;height:13px;stroke-width:2} [data-skin="apple"] .glink.warn, [data-skin="apple"] .tsk__menuitem--warn{color:var(--ib-red)} [data-skin="apple"] .glink.warn:hover{background:var(--ib-red-soft);color:var(--ib-red)} [data-skin="apple"] .dash__link{font-size:13px;margin-left:-8px} [data-skin="apple"] .dash__link::after, [data-skin="apple"] .ptsec__more::after{content:" ›";color:var(--ib-ink2)} [data-skin="apple"] .dash__link--foot{margin-top:auto;padding-top:14px;align-self:flex-start;margin-left:-8px} [data-skin="apple"] .subacts button, [data-skin="apple"] .pconfirm{font:500 12.5px/1.2 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .subacts button:hover{color:var(--ib-ink)} [data-skin="apple"] .pconfirm{color:var(--ib-ink2)} /* --------------------------------------------------------------------------- 7. STATUS PILLS --------------------------------------------------------------------------- */ /* Three pills, not six colours: neutral grey, positive lime-tint, and ink for a state that needs a person (Ready for QC, Gallery ready). The dot goes — the shape carries the state. */ [data-skin="apple"] .st{ display:inline-flex;align-items:center;gap:0;padding:4px 9px;border-radius:7px; background:var(--ib-s3);color:var(--ib-ink); font:500 11.5px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;white-space:nowrap } [data-skin="apple"] .st i{display:none} [data-skin="apple"] .st.neu, [data-skin="apple"] .st.warn{background:var(--ib-s3);color:var(--ib-ink)} [data-skin="apple"] .st.info, [data-skin="apple"] .st.ok{background:var(--ib-lime-pill);color:var(--ib-lime-pill-ink)} [data-skin="apple"] .st.hot, [data-skin="apple"] .st.accent{background:var(--ib-ink);color:var(--ib-bg)} /* Delivered is a resting state, not a live one. It shares the positive tone with Booked and Ready, which stay lime; the template marks each pill with its own status value, and that marker is what makes this one grey. */ [data-skin="apple"] .st.st--delivered{background:var(--ib-s3);color:var(--ib-ink)} [data-skin="apple"] .locked, [data-skin="apple"] .tagr, [data-skin="apple"] .ptag, [data-skin="apple"] .sec-hd .tagr, [data-skin="apple"] .res .tagr{font:500 11px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .ptag--pkg{color:var(--ib-ink)} [data-skin="apple"] .overdue, [data-skin="apple"] .tsk__late, [data-skin="apple"] .attn__why.hot, [data-skin="apple"] .dash__marker{color:var(--ib-red)} /* --------------------------------------------------------------------------- 8. CARDS, TABLES, ROWS, FOOTERS, EMPTY STATES, FLASHES --------------------------------------------------------------------------- */ [data-skin="apple"] .card, [data-skin="apple"] .ghost-card{ background:var(--ib-s1);border:0;border-radius:11px;box-shadow:none;padding:8px; -webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color 200ms ease } [data-skin="apple"] .ghost-card{min-height:320px} [data-skin="apple"] thead, [data-skin="apple"] .jobs-table thead, [data-skin="apple"] .clients-table thead, [data-skin="apple"] .ratecards-table thead{ background:var(--ib-s1);box-shadow:inset 0 -1px 0 var(--ib-line) } [data-skin="apple"] th, [data-skin="apple"] .jobs-table thead th, [data-skin="apple"] .clients-table thead th, [data-skin="apple"] .ratecards-table thead th{ padding:8px 16px 10px;font:500 11px/1.2 var(--ib-font);letter-spacing:0; text-transform:none;color:var(--ib-ink2) } [data-skin="apple"] td{padding:9px 16px;font-size:13px;border-bottom-color:var(--ib-line-soft)} [data-skin="apple"] .jobs-table tbody, [data-skin="apple"] .clients-table tbody, [data-skin="apple"] .ratecards-table tbody{padding:6px 0 0} [data-skin="apple"] .jobs-table tbody tr, [data-skin="apple"] .clients-table tbody tr, [data-skin="apple"] .ratecards-table tbody tr{ background:transparent;border:1px solid transparent;border-radius:8px;box-shadow:none;margin-bottom:2px; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .jobs-table tbody tr.row:hover, [data-skin="apple"] .clients-table tbody tr.row:hover, [data-skin="apple"] .ratecards-table tbody tr.row:hover, [data-skin="apple"] tr.row:hover{background:var(--ib-hover);border-color:transparent} [data-skin="apple"] tr.row[data-row-href]:active{background:var(--ib-hover);box-shadow:none} [data-skin="apple"] .jobs-table tbody tr.row.sel, [data-skin="apple"] .clients-table tbody tr.row.sel, [data-skin="apple"] .ratecards-table tbody tr.row.sel, [data-skin="apple"] tr.row.sel{background:var(--ib-s2);border-color:transparent;box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .jobs-table tbody tr.row:focus-visible, [data-skin="apple"] .clients-table tbody tr.row:focus-visible, [data-skin="apple"] .ratecards-table tbody tr.row:focus-visible, [data-skin="apple"] tr.row:focus-visible{background:var(--ib-hover);border-color:transparent;box-shadow:inset 0 0 0 2px var(--ib-ink)} [data-skin="apple"] .jthumb{width:40px;height:40px;border-radius:6px;background:var(--ib-s3);color:var(--ib-ink3)} [data-skin="apple"] .jthumb svg{width:16px;height:16px;stroke-width:1.75} [data-skin="apple"] .jthumb.is-image{background:var(--ib-s3)} [data-skin="apple"] .jcell{gap:12px} [data-skin="apple"] .jt{font:600 14px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .cl{margin-top:1px;font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .mono, [data-skin="apple"] .cl .mono{font-family:var(--ib-font);color:inherit} [data-skin="apple"] .gal{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .gal.dim{color:var(--ib-ink2)} [data-skin="apple"] .gal.ok{color:var(--ib-ink)} [data-skin="apple"] .galcell{gap:2px} [data-skin="apple"] .galcell__acts{gap:2px;margin-left:-8px} [data-skin="apple"] .fee{font:600 14px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .fee small{font:400 11px/1.3 var(--ib-font);color:var(--ib-ink2);letter-spacing:0} [data-skin="apple"] .fee small.ok, [data-skin="apple"] .fee small.info, [data-skin="apple"] .fee small.mut{color:var(--ib-ink2)} /* The client monogram is an ink avatar, like every other initials mark. */ [data-skin="apple"] .mgram, [data-skin="apple"] .jthumb.mgram, [data-skin="apple"] .mgram--lg{ border:0;border-radius:99px;background:var(--ib-ink);color:var(--ib-bg); font:600 12px/1 var(--ib-font);letter-spacing:0 } [data-skin="apple"] .jthumb.mgram{width:40px;height:40px} [data-skin="apple"] tr.row:hover .jthumb.mgram{color:var(--ib-bg);border-color:transparent} [data-skin="apple"] .sched__mgram{font-size:9px} [data-skin="apple"] .tfoot{padding:10px 16px 4px;border-top:1px solid var(--ib-line);margin-top:auto} [data-skin="apple"] .tfoot .cnt{font:400 12px/1.3 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .card>.tfoot{margin:6px 0 0} [data-skin="apple"] .jgrid+.tfoot{border-top:1px solid var(--ib-line)} [data-skin="apple"] .empty{padding:56px 20px;color:var(--ib-ink2)} [data-skin="apple"] .empty .t{font:600 15px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .empty .s{margin-top:6px;font:400 13px/1.55 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] p.empty{padding:30px 2px;text-align:left;font:400 13px/1.55 var(--ib-font);color:var(--ib-ink2);max-width:52ch} [data-skin="apple"] .flash{ padding:10px 14px;border:0;border-radius:8px;background:var(--ib-s1); font:500 13px/1.4 var(--ib-font);color:var(--ib-ink) } [data-skin="apple"] .flash svg{width:13px;height:13px;stroke-width:2} [data-skin="apple"] .flash.ok{color:var(--ib-ink)} [data-skin="apple"] .flash.err{color:var(--ib-red)} [data-skin="apple"] .flash.warn{color:var(--ib-ink)} [data-skin="apple"] .flash ul{margin:6px 0 0;padding-left:16px;font-weight:400;color:var(--ib-ink2)} [data-skin="apple"] .errs{border:0;border-radius:8px;background:var(--ib-s1);padding:12px 14px} [data-skin="apple"] .errs .t{font:600 13px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-red);margin-bottom:6px} [data-skin="apple"] .errs li{font:400 13px/1.6 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .hint{font:400 12.5px/1.45 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .hint svg{stroke:var(--ib-ink2)} [data-skin="apple"] .hint.warn, [data-skin="apple"] .hint.ok{color:var(--ib-ink2)} [data-skin="apple"] .hint.warn svg, [data-skin="apple"] .hint.ok svg{stroke:var(--ib-ink2)} [data-skin="apple"] .hint--fine{font-size:11.5px} [data-skin="apple"] .muted{color:var(--ib-ink3)} /* The Awaiting Action queue rows. */ [data-skin="apple"] .actq__i{padding:12px 16px;border-bottom:0;border-radius:8px;transition:background 150ms ease} [data-skin="apple"] .actq__i:hover{background:var(--ib-hover)} [data-skin="apple"] .actq__k{font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .actq__t{font:600 14px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .actq__m, [data-skin="apple"] .actq__n{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} /* --------------------------------------------------------------------------- 9. THE JOB REGISTER GRID — image-led tiles --------------------------------------------------------------------------- */ [data-skin="apple"] .jgrid{gap:14px;padding:8px} [data-skin="apple"] .jcard{ position:relative;border:0;border-radius:8px;background:var(--ib-s2);box-shadow:none; transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .jcard:hover{border-color:transparent;box-shadow:var(--ib-shadow-hover);transform:none} [data-skin="apple"] .jcard:active{transform:var(--ib-press-tile)} [data-skin="apple"] .jcard__open{position:static;padding:0} [data-skin="apple"] .jcard__open:focus-visible{outline-color:var(--ib-ink)} /* The grid tile's photograph is the card's top: full width at 3:2. Restated here because the shared 40px thumbnail rule above would otherwise win. */ [data-skin="apple"] .jthumb--grid{width:100%;height:auto;border-radius:0;aspect-ratio:3/2;background:var(--ib-s3);color:var(--ib-ink3)} [data-skin="apple"] .jthumb--grid svg{width:22px;height:22px} [data-skin="apple"] .jcard__body{padding:11px 14px 10px;gap:4px} [data-skin="apple"] .jcard__t{ font:600 13.5px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink); -webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block } [data-skin="apple"] .jcard__cl, [data-skin="apple"] .jcard__meta, [data-skin="apple"] .jcard__gal, [data-skin="apple"] .jcard__gal.ok{font:400 11.5px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .jcard__dot{color:var(--ib-ink3)} /* The stage pill rides the photograph, top-left. */ [data-skin="apple"] .jcard__st{margin-top:0} [data-skin="apple"] .jcard__st .st{ position:absolute;left:10px;top:10px;z-index:1;padding:3px 8px;font-size:10.5px; background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) } [data-skin="apple"] .jcard__st .st.info, [data-skin="apple"] .jcard__st .st.ok{background:#eefbb3;color:#3d4a00} [data-skin="apple"] .jcard__st .st.hot, [data-skin="apple"] .jcard__st .st.accent{background:rgba(29,29,31,.85);color:#fff} [data-skin="apple"] .jcard__st .st.st--delivered{background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink)} [data-skin="apple"] .jcard__acts{padding:8px 8px;border-top:1px solid var(--ib-line-soft);gap:2px} /* --------------------------------------------------------------------------- 10. DRAWER, MODAL, FORMS --------------------------------------------------------------------------- */ [data-skin="apple"] .scrim{background:var(--ib-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} [data-skin="apple"] .drawer{ width:560px;background:var(--ib-bg);border-left:0;box-shadow:var(--ib-shadow-drawer);color:var(--ib-ink) } [data-skin="apple"] .dr__hd{padding:28px 32px 0} [data-skin="apple"] .dr__hd .path, [data-skin="apple"] .gws__hd .path{font:500 11px/1.3 var(--ib-font);letter-spacing:.02em;text-transform:uppercase;color:var(--ib-ink2)} [data-skin="apple"] .gws__hd .path a{color:var(--ib-ink2)} [data-skin="apple"] .gws__hd .path span{color:var(--ib-ink3)} [data-skin="apple"] .dr__hd h3, [data-skin="apple"] .mhd h2{font:600 28px/1.1 var(--ib-font);letter-spacing:-.025em;color:var(--ib-ink);margin:8px 0 16px} [data-skin="apple"] .dr__meta{gap:28px;padding-bottom:16px} [data-skin="apple"] .dr__meta .m .k, [data-skin="apple"] .dr__sec>.k, [data-skin="apple"] .rail .k, [data-skin="apple"] .mhd .id, [data-skin="apple"] .sub-hd, [data-skin="apple"] .fld .lbl, [data-skin="apple"] .lbl, [data-skin="apple"] .inline-edit__k, [data-skin="apple"] .fileadd__k, [data-skin="apple"] .fcard__t, [data-skin="apple"] .trail__k, [data-skin="apple"] .gws__grp>.k, [data-skin="apple"] .gws__rk, [data-skin="apple"] .dsec__s, [data-skin="apple"] .sec-name, [data-skin="apple"] .rc-additem__hd, [data-skin="apple"] .ptsum__h, [data-skin="apple"] .fsum__total, [data-skin="apple"] .galhd__c, [data-skin="apple"] .dash__micro, [data-skin="apple"] .upnext__d, [data-skin="apple"] .stk__allk, [data-skin="apple"] .ptmsg__k, [data-skin="apple"] .brq__client, [data-skin="apple"] .pc, [data-skin="apple"] .fileitem__meta, [data-skin="apple"] .gws__actm, [data-skin="apple"] .clientcard .rate .k, [data-skin="apple"] .brieflist__k, [data-skin="apple"] .team__cap, [data-skin="apple"] .cpick__new{ font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2) } [data-skin="apple"] .dr__meta .m .v{margin-top:5px;font:500 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .dr__meta--tight{border-bottom-color:var(--ib-line)} [data-skin="apple"] .dr__meta--tight .m .v.mono{color:var(--ib-ink2)} [data-skin="apple"] .editable{border-bottom:1px dashed var(--ib-line)} [data-skin="apple"] .editable:hover{border-bottom-color:var(--ib-ink2)} [data-skin="apple"] .dr__actions{padding-bottom:12px} [data-skin="apple"] .dr__actions .btn{ background:var(--ib-s2);box-shadow:inset 0 0 0 2px var(--ib-accent);font-weight:600 } [data-skin="apple"] .dr__actions .btn:hover{background:var(--ib-accent-soft)} [data-skin="apple"] .dtabs{gap:20px;margin-top:4px;padding-top:0;border-top:0;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .dtab{ padding:8px 0;margin-bottom:-1px;font:500 13px/1.3 var(--ib-font);letter-spacing:0;text-transform:none; color:var(--ib-ink2);border-bottom:2px solid transparent;transition:color 150ms ease } [data-skin="apple"] .dtab:hover{color:var(--ib-ink)} [data-skin="apple"] .dtab.on{color:var(--ib-ink);font-weight:600;border-bottom-color:var(--ib-accent)} [data-skin="apple"] .dr__bd{padding:20px 32px 30px} [data-skin="apple"] .kv{padding:11px 0;border-bottom:1px solid var(--ib-line-soft);font:400 13.5px/1.35 var(--ib-font)} [data-skin="apple"] .kv .k{color:var(--ib-ink2);letter-spacing:0} [data-skin="apple"] .kv .v{color:var(--ib-ink)} [data-skin="apple"] .kv .v:empty::after{content:"—";color:var(--ib-ink3)} [data-skin="apple"] .dr__sec{margin-top:20px} [data-skin="apple"] .dr__sec>.k{padding-bottom:8px;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .prose{font:400 13.5px/1.6 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .act{border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .act .when{font:400 12px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .act .what{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .act .who{font:400 12px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptot{font:400 13.5px/1.3 var(--ib-font)} [data-skin="apple"] .ptot .v{font-family:var(--ib-font)} [data-skin="apple"] .ptot.grand{border-top:1px solid var(--ib-line)} [data-skin="apple"] .ptot.grand .v{font-weight:600} [data-skin="apple"] .pnote{color:var(--ib-ink2);font:400 12px/1.4 var(--ib-font);letter-spacing:0} [data-skin="apple"] .gsec{gap:12px} [data-skin="apple"] .gdiv{background:var(--ib-line)} [data-skin="apple"] .gstatus .dot{background:var(--ib-ink)} [data-skin="apple"] .gstatus .lbl{font:600 15px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .inline-edit{border:0;border-radius:8px;background:var(--ib-s1);padding:14px 16px} [data-skin="apple"] .readonly-note{border:0;border-radius:8px;background:var(--ib-s1);font:400 12.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .readonly-note b{color:var(--ib-ink)} /* Modal (New Job, Client form). */ [data-skin="apple"] .modal{background:var(--ib-bg);border:0;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.18);color:var(--ib-ink)} [data-skin="apple"] .mhd{padding:24px 28px 18px;background:transparent;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .mhd .id{margin-bottom:6px;text-transform:uppercase;letter-spacing:.02em} [data-skin="apple"] .mhd .id b{font-family:var(--ib-font);letter-spacing:0;color:var(--ib-ink)} [data-skin="apple"] .mhd h2{margin:0} [data-skin="apple"] .mclose{width:30px;height:30px;border-radius:7px;color:var(--ib-ink2)} [data-skin="apple"] .mclose:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .form{padding:22px 28px 28px;gap:20px} [data-skin="apple"] .sect{gap:10px} [data-skin="apple"] .sub-hd{padding-bottom:8px;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .grid2, [data-skin="apple"] .grid3{gap:10px} /* Fields: grey wells, white with a lime ring on focus. */ [data-skin="apple"] .fld{ padding:9px 12px;gap:4px;border:0;border-radius:7px;background:var(--ib-s1); transition:background 150ms ease,box-shadow 150ms ease } [data-skin="apple"] .fld:hover{background:var(--ib-hover)} [data-skin="apple"] .fld:focus-within{background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent);border-color:transparent} [data-skin="apple"] .fld.invalid{box-shadow:0 0 0 2px var(--ib-red)} [data-skin="apple"] .fld .val, [data-skin="apple"] .fld input, [data-skin="apple"] .fld select, [data-skin="apple"] .fld textarea, [data-skin="apple"] textarea.fld{font:400 13px/1.35 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .fld .val.ph, [data-skin="apple"] .fld input::placeholder, [data-skin="apple"] .fld textarea::placeholder, [data-skin="apple"] textarea.fld::placeholder{color:var(--ib-ink3)} [data-skin="apple"] .fld select option{background:var(--ib-s2);color:var(--ib-ink)} [data-skin="apple"] .fld .err{font:500 11.5px/1.3 var(--ib-font);letter-spacing:0;color:var(--ib-red)} [data-skin="apple"] .fld.area .val{color:var(--ib-ink)} [data-skin="apple"] .fld.search{padding:9px 12px} [data-skin="apple"] .fld.search svg{stroke:var(--ib-ink2);stroke-width:2} [data-skin="apple"] textarea.fld{background:var(--ib-s1)} [data-skin="apple"] .lbl__opt{color:var(--ib-ink3)} [data-skin="apple"] .cpick__scope{font:400 12.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .cpick__new{border:1px dashed var(--ib-line);border-radius:7px;color:var(--ib-ink);font-size:12.5px;font-weight:500} [data-skin="apple"] .cpick__new:hover{border-color:var(--ib-ink);color:var(--ib-ink)} [data-skin="apple"] .results{border:0;border-radius:8px;background:var(--ib-s1);box-shadow:none} [data-skin="apple"] .res{border-bottom:1px solid var(--ib-line-soft);border-radius:8px} [data-skin="apple"] .res:hover{background:var(--ib-hover)} [data-skin="apple"] .res .cav, [data-skin="apple"] .clientcard .cav{background:var(--ib-ink);color:var(--ib-bg);font:600 11px/1 var(--ib-font)} [data-skin="apple"] .res .nm, [data-skin="apple"] .clientcard .nm{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .res .em, [data-skin="apple"] .clientcard .em{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .clientcard{border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .clientcard .rate .v{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .clientcard .rate .v.na{font:500 12px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .clientcard .rate .lnk{font:500 11.5px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .norate{border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .norate .t{font:600 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .norate .s{font:400 12px/1.4 var(--ib-font);color:var(--ib-ink2)} /* The summary rail beside a modal form. */ [data-skin="apple"] .rail{border-left:1px solid var(--ib-line-soft);background:var(--ib-s1)} [data-skin="apple"] .rail .k{padding-bottom:8px;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .rail__ft{border-top:1px solid var(--ib-line)} [data-skin="apple"] .srow{padding:8px 0;border-bottom:1px solid var(--ib-line-soft);font:400 12.5px/1.35 var(--ib-font)} [data-skin="apple"] .srow .a{color:var(--ib-ink2)} [data-skin="apple"] .srow .b{color:var(--ib-ink)} [data-skin="apple"] .srow .b.ph{color:var(--ib-ink3)} [data-skin="apple"] .srow .b.amber{color:var(--ib-ink2)} [data-skin="apple"] .srow .b.mono{font-family:var(--ib-font);font-size:12.5px} [data-skin="apple"] .calbox .ico{background:var(--ib-s2);border-radius:7px} [data-skin="apple"] .calbox .ico svg{stroke:var(--ib-ink2)} [data-skin="apple"] .calbox .t{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .calbox .s{color:var(--ib-ink2)} [data-skin="apple"] .calbox .s i{background:var(--ib-ink2)} [data-skin="apple"] .wf{gap:5px} /* --------------------------------------------------------------------------- 11. THE FILES TAB, THE VIDEO CARD, THE FILE LIST --------------------------------------------------------------------------- */ [data-skin="apple"] .fcard, [data-skin="apple"] .fcard--intake{ padding:16px 18px;gap:10px;border:0;border-radius:11px;background:var(--ib-s1);box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none } [data-skin="apple"] .fcard__t{text-transform:uppercase;letter-spacing:.02em} [data-skin="apple"] .fcard--intake .fcard__t{color:var(--ib-ink2)} [data-skin="apple"] .fcard__t svg{stroke-width:2} [data-skin="apple"] .fcard__folder{font:500 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .fcard__meta{font:400 11px/1.3 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .fcard--video{margin-top:12px} [data-skin="apple"] .fgrid{gap:12px} [data-skin="apple"] .fcard--intake .fileadd__actions .gbtn, [data-skin="apple"] .fcard--intake .fileadd__actions .btn{padding:0 12px;min-height:32px;border-radius:7px;font:500 12.5px/1 var(--ib-font);letter-spacing:0} [data-skin="apple"] .fcard--intake .fileadd__actions .gbtn{font-weight:600;border:2px solid var(--ib-accent)} [data-skin="apple"] .fcard .fileadd__actions .btn, [data-skin="apple"] .fcard .fileadd__actions .btn:not(.primary){background:var(--ib-s2);box-shadow:var(--ib-shadow-raised)} [data-skin="apple"] .fcard .fileadd__actions .btn:hover{background:var(--ib-hover)} [data-skin="apple"] .fcard .fld{background:var(--ib-s2)} [data-skin="apple"] .fcard .fld:focus-within{box-shadow:0 0 0 2px var(--ib-accent)} [data-skin="apple"] .fileadd{border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .fileadd__input{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .fileadd__role .fld{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} /* A drop zone reads as a dashed well. */ [data-skin="apple"] .fcard .fileadd__input.fld{ justify-content:center;text-align:center;border:1px dashed var(--ib-line);background:var(--ib-s2); color:var(--ib-ink2);padding:14px 12px } [data-skin="apple"] .fileitem{ padding:10px 12px;border:0;border-radius:8px;background:var(--ib-s2);box-shadow:none; transition:box-shadow 150ms ease } [data-skin="apple"] .fileitem:hover{border-color:transparent;box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .fileitem__thumb{border:0;border-radius:6px;background:var(--ib-s3);-webkit-backdrop-filter:none;backdrop-filter:none} [data-skin="apple"] .fileitem__thumb.is-plain svg{stroke:var(--ib-ink3)} [data-skin="apple"] .fileitem__name{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .fileitem__note{font:400 11.5px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .fsum__total b{font:600 14px/1.2 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .vidlist{gap:8px} [data-skin="apple"] .vidlist__i{padding:12px 14px;border:0;border-radius:8px;background:var(--ib-s2);box-shadow:var(--ib-shadow-raised)} [data-skin="apple"] .vidlist__badge{ padding:3px 8px;border:0;border-radius:7px;background:var(--ib-s3);color:var(--ib-ink); font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none } [data-skin="apple"] .vidlist__badge--live{background:var(--ib-lime-pill);color:var(--ib-lime-pill-ink)} [data-skin="apple"] .vidlist__badge--ok{background:var(--ib-lime-pill);color:var(--ib-lime-pill-ink);border-color:transparent} [data-skin="apple"] .vidlist__badge--warn{background:var(--ib-ink);color:var(--ib-bg);border-color:transparent} [data-skin="apple"] .vidlist__badge--gone{opacity:1;color:var(--ib-ink2)} [data-skin="apple"] .vidlist__meta, [data-skin="apple"] .vidlist__k, [data-skin="apple"] .vidlist__chk{font:400 11.5px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .vidlist__i .fld{background:var(--ib-s1)} [data-skin="apple"] .rnotes__row .fileadd__role .fld{background:var(--ib-s2)} /* --------------------------------------------------------------------------- 12. SCHEDULE --------------------------------------------------------------------------- */ /* Surface only. Every position, height and slot multiplier stays in the base sheet; this recolours the grid and reshapes the block. */ [data-skin="apple"] .sched{background:var(--ib-s2);border-radius:8px} [data-skin="apple"] .sched__axis{background:var(--ib-s2)} [data-skin="apple"] .sched__lane{border-left:1px solid var(--ib-line-soft)} [data-skin="apple"] .sched__lanehd{ background:var(--ib-s2);border-bottom:1px solid var(--ib-line);color:var(--ib-ink2); font:600 11px/1.2 var(--ib-font);letter-spacing:.04em;text-transform:uppercase } [data-skin="apple"] .sched__lanehd--axis{border-right:1px solid var(--ib-line-soft)} [data-skin="apple"] .sched__lanename{font-weight:600} [data-skin="apple"] .sched__lanecount{color:var(--ib-ink2);font-weight:500} [data-skin="apple"] .sched__hour{border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .sched__axis .sched__hour{border-right:1px solid var(--ib-line-soft)} [data-skin="apple"] .sched__axis .sched__hour span{font:500 10.5px/1.2 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .sweek__dow{color:var(--ib-ink2)} [data-skin="apple"] .sweek__dom{font:400 12px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink)} [data-skin="apple"] .sweek__col.is-today .sched__lanehd{color:var(--ib-ink);box-shadow:inset 0 -2px 0 var(--ib-ink)} [data-skin="apple"] .sweek__col.is-today .sweek__dow{color:var(--ib-ink)} /* Monday leads the week, so the sixth and seventh lanes are the weekend. */ [data-skin="apple"] .sweek__col:nth-child(6), [data-skin="apple"] .sweek__col:nth-child(7){background:var(--ib-s1)} [data-skin="apple"] .sweek__col:nth-child(6) .sched__lanehd, [data-skin="apple"] .sweek__col:nth-child(7) .sched__lanehd{background:var(--ib-s1)} [data-skin="apple"] .sblock{ background:var(--ib-s2);border:1px solid var(--ib-line);border-left:3px solid var(--ib-accent); border-radius:6px;box-shadow:var(--ib-shadow-raised);padding:5px 8px; transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .sblock:hover{background:var(--ib-s2);border-color:var(--ib-line);border-left-color:var(--ib-accent);box-shadow:var(--ib-shadow-hover);transform:none} [data-skin="apple"] .sblock__title{font:600 12px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .sblock--clash{border-left-color:var(--ib-red)} [data-skin="apple"] .sblock--unassigned{border-left-color:var(--ib-ink3);border-style:dashed;border-left-style:solid} [data-skin="apple"] .sblock--busy{border-left-color:var(--ib-red)} /* Read-only Google Calendar: quieter than any Job block — no shadow, no edge. */ [data-skin="apple"] .sdiary, [data-skin="apple"] .sallday__chip{border:1px dashed var(--ib-line);border-radius:6px;background:var(--ib-s1);color:var(--ib-ink2)} [data-skin="apple"] .sdiary--person, [data-skin="apple"] .sallday__chip.sdiary--person{background:repeating-linear-gradient(135deg,var(--ib-line-soft) 0 1px,transparent 1px 7px),var(--ib-s1)} [data-skin="apple"] .sdiary__t{font:500 11px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .sallday__chip{font:500 10.5px/1.5 var(--ib-font)} [data-skin="apple"] .sallday__more{border-style:none;background:none} [data-skin="apple"] .sallday{border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .sallday--axis{border-right:1px solid var(--ib-line-soft);font:500 10.5px/1.2 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .snow{border-top:1.5px solid var(--ib-ink)} [data-skin="apple"] .snow::before{background:var(--ib-ink);box-shadow:none} [data-skin="apple"] .schednav{gap:6px} [data-skin="apple"] .schednav__label{font:600 13px/1.3 var(--ib-font);color:var(--ib-ink);padding:0 6px} [data-skin="apple"] .spop{background:var(--ib-s2);border:1px solid var(--ib-line);border-radius:11px;box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .spop__t{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .spop__n{font-family:var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .spop__l{border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .spop__l dt{font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .spop__l dd{color:var(--ib-ink)} [data-skin="apple"] .spop__flag{color:var(--ib-red)} /* --------------------------------------------------------------------------- 13. DASHBOARD CARDS, ROWS AND THE TASK VOCABULARY (shared with My Tasks) --------------------------------------------------------------------------- */ [data-skin="apple"] .dash__card{ padding:0;border:0;border-radius:0;background:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none } /* THE HEADING SITS ON THE PAGE, THE PANEL BELOW IT (11D). The panel grows with the card so the three panels of the operational row share a bottom edge; its padding is the row's own, not a card's. */ [data-skin="apple"] .dash__panel{ flex:1;display:flex;flex-direction:column;min-width:0;padding:14px 16px;border-radius:11px; background:var(--ib-s1);transition:background-color 200ms ease } [data-skin="apple"] .dash__hd{align-items:baseline;gap:12px;margin:0 0 10px} [data-skin="apple"] .dash__hd .dash__link{margin-left:auto} [data-skin="apple"] .dash__hd .dash__hdmeta+.dash__link{margin-left:0} [data-skin="apple"] .dash__panelhd{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px} [data-skin="apple"] .dash__t, [data-skin="apple"] .ig__t{ font:600 22px/1.1 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink);text-transform:none;margin:0 } [data-skin="apple"] .dash__t::after, [data-skin="apple"] .ig__t::after{content:"."} [data-skin="apple"] .dash__t--sm{font-size:18px} [data-skin="apple"] .dash__hdmeta{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .dash__count, [data-skin="apple"] .dash__badge{ min-width:0;height:auto;padding:0;border:0;background:transparent; font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2) } [data-skin="apple"] .dash__none, [data-skin="apple"] .dash__clear{padding:2px 0;font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .dash__clear svg{stroke:var(--ib-ink)} [data-skin="apple"] .dash__aside{font:400 11.5px/1.4 var(--ib-font);color:var(--ib-ink3);border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .dash__empty{padding:12px 8px 8px;color:var(--ib-ink2)} [data-skin="apple"] .dash__empty svg{margin-bottom:6px} [data-skin="apple"] .dash__empty svg{stroke:var(--ib-ink3)} [data-skin="apple"] .dash__empty .t{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .dash__empty .s{font:400 12px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .dash__micro{margin-bottom:2px} /* Today's rows and the shoot rows: white sub-rows on the grey card. */ [data-skin="apple"] .shoots{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:0} [data-skin="apple"] .shot{ padding:7px 10px;gap:12px;border:0;border-radius:8px;background:var(--ib-s2); transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] a.shot:hover{transform:none;border-color:transparent;box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] a.shot:active{transform:var(--ib-press-tile)} [data-skin="apple"] .shot__time{width:64px;font:600 13px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .shot--warn .shot__time{color:var(--ib-ink2)} [data-skin="apple"] .shot__t{font:600 14px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .shot__m, [data-skin="apple"] .shot--warn .shot__m{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .shot--cal .shot__t{font-weight:500;color:var(--ib-ink)} [data-skin="apple"] .shot__dot::before{background:var(--ib-ink);box-shadow:none} [data-skin="apple"] .dash__upnext{border-left:1px solid var(--ib-line-soft);padding-left:20px} [data-skin="apple"] .upnext{gap:10px} [data-skin="apple"] .upnext__d{text-transform:none;letter-spacing:0;color:var(--ib-ink3)} [data-skin="apple"] .upnext__t{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .upnext a:hover .upnext__t{color:var(--ib-ink);text-decoration:underline} [data-skin="apple"] .upnext__c{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} /* Needs attention rows. */ [data-skin="apple"] .attn{gap:6px;margin-top:0} [data-skin="apple"] .attn__i{ padding:8px 10px;border-radius:8px;background:var(--ib-s2); transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .attn__i:hover{background:var(--ib-s2);box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .attn__i:active{transform:var(--ib-press-tile)} [data-skin="apple"] .attn__top{font:600 12.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .attn__when{font:400 11px/1.3 var(--ib-font);color:var(--ib-ink3)} [data-skin="apple"] .attn__why, [data-skin="apple"] .attn__why.info, [data-skin="apple"] .attn__why.warn, [data-skin="apple"] .attn__why.neu, [data-skin="apple"] .attn__why.ok{margin-top:1px;font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .attn__why.hot{color:var(--ib-red)} [data-skin="apple"] .attn__sub{font:400 11px/1.3 var(--ib-font);color:var(--ib-ink2)} /* The morning brief. */ /* The overview paragraph: up to five lines, then "View full brief". */ [data-skin="apple"] .brf__lead{margin-top:0;font:400 14px/1.55 var(--ib-font);color:var(--ib-ink);-webkit-line-clamp:5} /* The flags are a real list: no marker of the browser's, the ink dot is the bullet, hung at the line's cap height with the text indented past it. */ [data-skin="apple"] .brf{gap:8px;margin-top:0;padding:0;list-style:none;font:500 13px/1.4 var(--ib-font)} [data-skin="apple"] .brf__i{gap:10px;align-items:flex-start} [data-skin="apple"] .brf__lead+.brf{border-top:1px solid var(--ib-line-soft);padding-top:12px} [data-skin="apple"] .brf__dot{width:9px;height:9px;margin-top:5px;background:var(--ib-ink);box-shadow:none;animation:none} [data-skin="apple"] .brf__t{color:var(--ib-ink)} [data-skin="apple"] a.brf__t:hover{color:var(--ib-ink);text-decoration:underline} [data-skin="apple"] .brieflist__dot, [data-skin="apple"] .brieflist__dot.hot, [data-skin="apple"] .brieflist__dot.warn, [data-skin="apple"] .brieflist__dot.info{background:var(--ib-ink)} [data-skin="apple"] .brieflist__t{font:500 13.5px/1.35 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] a.brieflist__t:hover{color:var(--ib-ink);text-decoration:underline} [data-skin="apple"] .brieflist__d{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .brieflist--full .brieflist__i{border-left-color:var(--ib-line);border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .brieflist--full .brieflist__i--shoot{border-left-color:var(--ib-accent)} [data-skin="apple"] .brieflist--full .brieflist__i--conflict{border-left-color:var(--ib-red)} [data-skin="apple"] .brieflist--full .brieflist__i--task{border-left-color:var(--ib-ink)} [data-skin="apple"] .briefsec{border:0;border-radius:11px;background:var(--ib-s1);padding:18px 20px} [data-skin="apple"] .briefpage__side{border-left:1px solid var(--ib-line-soft)} [data-skin="apple"] .brf__pp, [data-skin="apple"] .brf__pl li{font:400 13.5px/1.6 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .brf__ph{font:600 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .minilist li{border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .minilist__t{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .minilist__m{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .briefpage__side .minilist li>a[aria-current="page"] .minilist__t{color:var(--ib-ink);font-weight:600} /* Tasks, on the Dashboard and on the board: a white sub-row with a circle. */ [data-skin="apple"] .dash__marker{gap:6px;margin:0 0 6px;font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none} [data-skin="apple"] .dash__markdot{display:none} [data-skin="apple"] .dash__markn{font:500 11px/1.3 var(--ib-font);color:var(--ib-red)} [data-skin="apple"] .tsks{gap:6px;margin-top:0} [data-skin="apple"] .tsk, [data-skin="apple"] .tsk[class*="tsk--t"], [data-skin="apple"] .tsk[class*="tsk--t"]:hover, [data-skin="apple"] .tsk--done[class*="tsk--t"]{ padding:7px 10px;gap:10px;border:0;border-radius:8px;background:var(--ib-s2);border-color:transparent; transition:box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .tsk:hover{border-color:transparent;box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .tsk__box, [data-skin="apple"] button.tsk__box{ width:18px;height:18px;border:1.5px solid var(--ib-ink3);background:transparent; transition:border-color 150ms ease,background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] button.tsk__box:hover{border-color:var(--ib-ink);background:transparent} [data-skin="apple"] button.tsk__box:active{transform:scale(.88)} [data-skin="apple"] button.tsk__box.is-done{background:var(--ib-ink);border-color:var(--ib-ink)} [data-skin="apple"] button.tsk__box.is-done::after{ content:"✓";display:block;color:var(--ib-bg);font:600 10px/15px var(--ib-font);text-align:center } [data-skin="apple"] .tsk__t{font:500 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .tsk--done .tsk__t{text-decoration:line-through;color:var(--ib-ink2)} [data-skin="apple"] .tsk__late{padding:0;border:0;background:transparent;font:500 12px/1.3 var(--ib-font);letter-spacing:0;color:var(--ib-red)} [data-skin="apple"] .tsk__m{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} /* Provenance sits one step quieter than the rest of the metadata: it is worth knowing and never worth reading first. */ [data-skin="apple"] .tsk__src{color:var(--ib-ink3)} [data-skin="apple"] .tsk__job{font:600 12px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .tsk__who{ width:22px;height:22px;border:0;background:var(--ib-ink);color:var(--ib-bg); font:600 8.5px/1 var(--ib-font);text-transform:uppercase } [data-skin="apple"] .tsk__more{width:24px;height:24px;border-radius:6px;color:var(--ib-ink2)} [data-skin="apple"] .tsk__more:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .tsk__menuitems{border:1px solid var(--ib-line);border-radius:8px;background:var(--ib-s2);box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .tsk__menuitem{border-radius:6px;font:500 12.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .tsk__menuitem:hover{background:var(--ib-hover)} [data-skin="apple"] .tsk__menuitem--warn:hover{background:var(--ib-red-soft)} [data-skin="apple"] .tcol .tsk__meta{padding-left:30px} /* --------------------------------------------------------------------------- 14. THE ADMIN DASHBOARD COMPOSITION (11D) --------------------------------------------------------------------------- */ /* The markup keeps its two wrappers — the middle row (Today, the register band, Instagram) and the lower grid (Brief, Tasks, Attention) — because the base sheet and its tests are built on them. Under this skin those wrappers give up their box (`display:contents`) and the modules lay out on ONE grid, in the handoff's arrangement: the brief and the day across the top, the attention queue standing down the right with the tasks beneath it, and the register's 4×2 of tiles under the brief and the day. Row gaps are margins rather than a grid gap so a row that is not rendered (the flash) costs no space. */ [data-skin="apple"] .ws.dash{ display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr); grid-template-areas:"meta meta meta" "hdr hdr hdr" "flash flash flash" "stats stats stats" "brief today side" "register register side"; grid-template-rows:auto auto auto auto auto 1fr; gap:0 20px;align-content:stretch;padding:32px 40px 36px;color:var(--ib-ink) } [data-skin="apple"] .dash>.dash__mid, [data-skin="apple"] .dash>.dash__grid{display:contents} [data-skin="apple"] .dash__meta{grid-area:meta;margin:0;font:600 15px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .dash__sep{margin:0 6px;opacity:1} [data-skin="apple"] .dash__hdr{grid-area:hdr;margin-top:4px;align-items:flex-start} [data-skin="apple"] .dash>.flash{grid-area:flash;margin-top:16px} [data-skin="apple"] .dash__stats{grid-area:stats;margin-top:18px;gap:14px} [data-skin="apple"] .dash__today{grid-area:today} /* The band is its tiles' height; on a tall viewport the tasks list beside it is what grows, exactly as the design says ("tasks flex to fill"). */ [data-skin="apple"] .dash__register{grid-area:register;align-self:start} [data-skin="apple"] .dash__grid>section:first-child{grid-area:brief} /* EVERY MODULE IS ITS OWN HEIGHT. A sparse list does not borrow the height of the day beside it: brief and Today start at the row's top and stop at their content, and the side column stacks Needs attention over My tasks at their own heights too. Today is the one that grows with its events. */ [data-skin="apple"] .dash__today, [data-skin="apple"] .dash__grid>section:first-child{align-self:start} /* EXCEPT THE MORNING BRIEF AND TODAY, which share one height. The row is as tall as whichever holds more — Today's events on a busy day, the brief's overview on a quiet one — and both panels run to that bottom edge, so the pair always reads as one band. Admin Dashboard only: scoped to the page that has the Morning brief card, so the Contractor dashboard's Today is untouched. */ [data-skin="apple"] .ws.dash .dash__grid>section[aria-labelledby="dash-brief"], [data-skin="apple"] .ws.dash:has(section[aria-labelledby="dash-brief"]) .dash__today{align-self:stretch} [data-skin="apple"] .dash__side{ grid-area:side;display:grid;grid-template-rows:auto auto;align-content:start;gap:16px;margin-top:16px;min-width:0 } [data-skin="apple"] .dash__side>section[aria-labelledby="dash-attn"]{grid-row:1} [data-skin="apple"] .dash__side>section[aria-labelledby="dash-tasks"]{grid-row:2} [data-skin="apple"] .dash__side>section{margin-top:0} /* No `min-height:0` here: with it, a viewport shorter than the content lets the auto rows shrink to nothing and the cards overlap. Without it the rows keep their content height and the workspace scrolls, as it always has. */ [data-skin="apple"] .dash__today, [data-skin="apple"] .dash__register, [data-skin="apple"] .dash__grid>section:first-child{margin-top:16px} /* THE REGISTER BAND: four image-led tiles across, two rows (12B's tile, 11D's arrangement). The photograph is the tile; the stage pill sits on it top-left and the number and title bottom-left in white over the scrim. A Job without a visible photograph is the same tile on the neutral ground. */ [data-skin="apple"] .dreg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:0} /* A photographic strip: wider than tall, two rows of it in the reference frame. */ [data-skin="apple"] .dreg__tile{ position:relative;display:block;aspect-ratio:2/1;border-radius:8px;overflow:hidden; background:var(--ib-s3);color:var(--ib-on-tile);text-decoration:none;transition:transform 160ms var(--ib-ease) } [data-skin="apple"] .dreg__tile:hover{transform:scale(1.01);color:var(--ib-on-tile)} [data-skin="apple"] .dreg__tile:active{transform:var(--ib-press-tile)} [data-skin="apple"] .dreg__tile.is-image::after{content:"";position:absolute;inset:0;background:var(--ib-tile-scrim);pointer-events:none} [data-skin="apple"] .jthumb--tile{ position:absolute;inset:0;width:100%;height:100%;border-radius:0; display:flex;align-items:center;justify-content:center;background:var(--ib-s3);color:var(--ib-ink3) } [data-skin="apple"] .jthumb--tile svg{width:22px;height:22px} [data-skin="apple"] .jthumb--tile img{width:100%;height:100%;object-fit:cover;display:block} [data-skin="apple"] .dreg__st{ position:absolute;left:8px;top:8px;z-index:1;padding:2px 7px;font-size:10px; background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) } [data-skin="apple"] .dreg__st.info, [data-skin="apple"] .dreg__st.ok{background:#eefbb3;color:#3d4a00} [data-skin="apple"] .dreg__st.hot, [data-skin="apple"] .dreg__st.accent{background:rgba(29,29,31,.85);color:#fff} [data-skin="apple"] .dreg__st.st--delivered{background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink)} [data-skin="apple"] .dreg__cap{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;display:flex;flex-direction:column;gap:1px;min-width:0} [data-skin="apple"] .dreg__id{font:500 10px/1.3 var(--ib-font);color:var(--ib-on-tile-soft);white-space:nowrap} [data-skin="apple"] .dreg__t{font:600 13px/1.2 var(--ib-font);letter-spacing:-.01em;color:var(--ib-on-tile);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Without a photograph the caption sits on the grey ground, so it reads in ink. */ [data-skin="apple"] .dreg__tile:not(.is-image) .dreg__id{color:var(--ib-ink2)} [data-skin="apple"] .dreg__tile:not(.is-image) .dreg__t{color:var(--ib-ink)} [data-skin="apple"] .dash__greet{ font:600 44px/1.07 var(--ib-font);letter-spacing:-.028em;color:var(--ib-ink);text-transform:none;white-space:nowrap } [data-skin="apple"] .dash__greet em, [data-skin="apple"] .pth__greet .pth__name{font-style:normal} [data-skin="apple"] .dash__hdr-right{gap:10px;padding-top:6px} [data-skin="apple"] .wx{ min-height:38px;padding:0 6px 0 14px;gap:10px;border:0;border-radius:7px;background:var(--ib-s1); -webkit-backdrop-filter:none;backdrop-filter:none;font:500 13px/1.2 var(--ib-font);color:var(--ib-ink) } [data-skin="apple"] .wx__now{gap:6px;font-weight:500} [data-skin="apple"] .wx__sun{display:none} [data-skin="apple"] .wx__cond{font-weight:400;color:var(--ib-ink2)} [data-skin="apple"] .wx__cond::before{content:"· ";color:var(--ib-ink3)} [data-skin="apple"] .wx__times{display:none} [data-skin="apple"] .wx__chip{ padding:4px 10px;border:2px solid var(--ib-accent);border-radius:7px;background:var(--ib-s2); font:600 12.5px/1.2 var(--ib-font);color:var(--ib-ink) } [data-skin="apple"] .dash__search{flex:0 1 260px;min-width:170px} [data-skin="apple"] .dash__today{display:flex;flex-direction:column;grid-template-columns:none;gap:0} [data-skin="apple"] .dash__upnext{margin-top:10px;padding:10px 0 0;border-left:0;border-top:1px solid var(--ib-line-soft);gap:6px} [data-skin="apple"] .upnext{gap:4px} [data-skin="apple"] .upnext a{flex-direction:row;align-items:baseline;gap:8px;min-width:0} [data-skin="apple"] .upnext__d{flex:0 0 76px;font:400 11.5px/1.3 var(--ib-font)} [data-skin="apple"] .upnext__t{flex:1 1 auto;min-width:0;font:600 13px/1.3 var(--ib-font)} [data-skin="apple"] .upnext__c{flex:0 0 auto;white-space:nowrap} [data-skin="apple"] .upnext__c::before{content:"· ";color:var(--ib-ink3)} [data-skin="apple"] .ig__hd{margin-bottom:12px;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px} [data-skin="apple"] .ig__handle, [data-skin="apple"] .ig__handle-inline{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ig__grid{gap:10px} [data-skin="apple"] .ig__tile{border-radius:8px;border:0;box-shadow:none;background:var(--ib-s3)} [data-skin="apple"] .ig__tile:hover{transform:none;box-shadow:none} [data-skin="apple"] .ig__profile{display:inline-block;margin-top:10px;font:500 13px/1.3 var(--ib-font);color:var(--ib-ink);text-decoration:none} [data-skin="apple"] .ig__profile::after{content:" ›";color:var(--ib-ink2)} /* --------------------------------------------------------------------------- 15. MY TASKS (13B) --------------------------------------------------------------------------- */ [data-skin="apple"] .tlayout{grid-template-columns:200px minmax(0,1fr);gap:20px} [data-skin="apple"] .trail{gap:20px} [data-skin="apple"] .trail__grp{gap:2px} [data-skin="apple"] .trail__k{padding:0 12px 8px} [data-skin="apple"] .trail__i{ padding:8px 12px;border-radius:6px;font:400 13px/1.3 var(--ib-font);color:var(--ib-ink); transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .trail__i:hover{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .trail__i.on{background:var(--ib-s2);color:var(--ib-ink);box-shadow:var(--ib-shadow-raised);font-weight:600} [data-skin="apple"] .trail__n{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .trail__i.on .trail__n{color:var(--ib-ink2)} /* Ink dots — the list colours are a palette the design does not use. The current list wears the lime dot, like the current nav row. */ [data-skin="apple"] .trail__dot, [data-skin="apple"] .trail__dot--all, [data-skin="apple"] .trail__dot--1, [data-skin="apple"] .trail__dot--2, [data-skin="apple"] .trail__dot--3, [data-skin="apple"] .trail__dot--4, [data-skin="apple"] .trail__dot--5{width:8px;height:8px;background:var(--ib-ink);border:1px solid transparent} [data-skin="apple"] .trail__i.on .trail__dot{background:var(--ib-accent);border-color:var(--ib-accent-border)} [data-skin="apple"] .trail__av{width:22px;height:22px;border:0;background:var(--ib-ink);color:var(--ib-bg);font:600 8.5px/1 var(--ib-font)} [data-skin="apple"] .trail__k-a{font:500 11px/1.3 var(--ib-font);letter-spacing:0;color:var(--ib-ink)} [data-skin="apple"] .trail__k-a:hover{color:var(--ib-ink);text-decoration:underline} [data-skin="apple"] .trail__ren, [data-skin="apple"] .trail__add{border:1px solid var(--ib-line);border-radius:7px;background:var(--ib-s2)} [data-skin="apple"] .trail__ren:focus-within, [data-skin="apple"] .trail__add:focus-within{border-color:transparent;box-shadow:0 0 0 2px var(--ib-accent)} [data-skin="apple"] .trail__name{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .trail__save:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .trail__kill:hover{background:var(--ib-red-soft);color:var(--ib-red)} [data-skin="apple"] .tweek{padding:14px 16px;border:0;border-radius:11px;background:var(--ib-s1);-webkit-backdrop-filter:none;backdrop-filter:none} [data-skin="apple"] .tweek .trail__k{padding:0 0 6px} [data-skin="apple"] .tweek__none{font:400 12.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .tweek__line{font:400 12.5px/1.4 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .tweek__pc{font:600 30px/1 var(--ib-font);letter-spacing:-.03em;color:var(--ib-ink)} [data-skin="apple"] .tweek__togo{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .tweek__bar{background:var(--ib-s3)} [data-skin="apple"] .tweek__fill{background:var(--ib-ink)} [data-skin="apple"] .tcol .tsks{margin-top:12px} [data-skin="apple"] .tcol__empty{font:400 12.5px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .tcol__drop.is-drop{outline-color:var(--ib-ink)} [data-skin="apple"] .tcol__clear .filt{padding:4px 10px;background:var(--ib-s2);box-shadow:var(--ib-shadow-raised);font-size:12px} [data-skin="apple"] .taskform, [data-skin="apple"] .teamform{margin-top:0} [data-skin="apple"] .taskform__grid, [data-skin="apple"] .teamform__grid{gap:10px} [data-skin="apple"] .taskform .fld, [data-skin="apple"] .teamform .fld{background:var(--ib-s2)} [data-skin="apple"] .taskform__archive{border-top:1px solid var(--ib-line-soft)} /* --------------------------------------------------------------------------- 16. SETTINGS, BOOKING REQUESTS, RATE CARDS, CLIENT DRAWER --------------------------------------------------------------------------- */ [data-skin="apple"] .team{gap:8px;margin-top:12px} [data-skin="apple"] .team__i{padding:10px 14px;border:0;border-radius:8px;background:var(--ib-s2)} [data-skin="apple"] .team__i:hover{background:var(--ib-s2);box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .team__av{border:0;background:var(--ib-ink);color:var(--ib-bg);font:600 11px/1 var(--ib-font)} [data-skin="apple"] .team__n{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .team__e, [data-skin="apple"] .team__when, [data-skin="apple"] .team__foot, [data-skin="apple"] .teamform__note{font:400 12px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .team__role{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .team__you{padding:2px 7px;border:0;border-radius:7px;background:var(--ib-s3);color:var(--ib-ink);font:500 10.5px/1.3 var(--ib-font);letter-spacing:0;text-transform:none} [data-skin="apple"] .teamform__check{font:400 13px/1.3 var(--ib-font)} [data-skin="apple"] .brq{gap:14px} [data-skin="apple"] .brq__c{padding:18px 20px;border:0;border-radius:11px;background:var(--ib-s1);box-shadow:none} [data-skin="apple"] .brq__title{font:600 18px/1.2 var(--ib-font);letter-spacing:-.015em;color:var(--ib-ink)} [data-skin="apple"] .brq__addr, [data-skin="apple"] .brq__alt, [data-skin="apple"] .brq__time, [data-skin="apple"] .brq__items, [data-skin="apple"] .brq__ref, [data-skin="apple"] .brq__notes{font:400 12.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .brq__notes strong{color:var(--ib-ink);font-weight:600} [data-skin="apple"] .brq__date{font:600 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .brq__go{border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .brq__f>span{font:500 11px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .brq__f input, [data-skin="apple"] .brq__f select{ padding:9px 12px;border:0;border-radius:7px;background:var(--ib-s2);color:var(--ib-ink); font:400 13px/1.3 var(--ib-font);transition:box-shadow 150ms ease } [data-skin="apple"] .brq__f input:focus, [data-skin="apple"] .brq__f select:focus{outline:none;box-shadow:0 0 0 2px var(--ib-accent)} [data-skin="apple"] .brq__opt{color:var(--ib-ink3)} [data-skin="apple"] .brq__more>summary{list-style:none;cursor:pointer} [data-skin="apple"] .brq__more>summary::-webkit-details-marker{display:none} [data-skin="apple"] .sec-block{margin-bottom:16px} [data-skin="apple"] .sec-note{font:400 12px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .rcitems-table th{padding:8px 10px 7px} [data-skin="apple"] .rcitems-table td{padding:9px 10px;border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .rcitems-table .col-price.num{font:600 13.5px/1.3 var(--ib-font)} [data-skin="apple"] .rcitems-table .lnk{font:500 12px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .rcitems-table .lnk:hover{color:var(--ib-ink)} [data-skin="apple"] .rc-additem{border-top:1px solid var(--ib-line)} [data-skin="apple"] .rc-additem .fld--modes{border:0;border-radius:7px;background:var(--ib-s1)} [data-skin="apple"] .rc-additem .chk{font:400 12.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .rc-additem .chk input{accent-color:var(--ib-ink)} [data-skin="apple"] code.subtle, [data-skin="apple"] .terms{font-family:var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .preview-card{padding:18px 20px} [data-skin="apple"] .pc b{font:600 15px/1.2 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .pc--warn b{color:var(--ib-ink)} [data-skin="apple"] .acts{list-style:none;margin:0;padding:0} [data-skin="apple"] .acts li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .acts li:last-child{border-bottom:0} [data-skin="apple"] .acts .k{flex-shrink:0;font:500 11px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .acts .v{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink)} /* Client drawer tabs: contacts, groups, rate card, dashboard, stock. */ [data-skin="apple"] .croe__f, [data-skin="apple"] .ccg, [data-skin="apple"] .cdd, [data-skin="apple"] .rcs__sel, [data-skin="apple"] .ccg__f, [data-skin="apple"] .cdd__s, [data-skin="apple"] .stock__i, [data-skin="apple"] .gsets, [data-skin="apple"] .gsets__form{border:0;border-radius:8px;background:var(--ib-s1);box-shadow:none;color:var(--ib-ink)} [data-skin="apple"] .stock__hero, [data-skin="apple"] .stock__thumb, [data-skin="apple"] .gws__gonethumb{background:var(--ib-s3)} [data-skin="apple"] .stock__img{border:0;border-radius:8px;background:var(--ib-s2)} [data-skin="apple"] .stock__img.is-hero{box-shadow:inset 0 0 0 2px var(--ib-accent)} [data-skin="apple"] .gsets__in, [data-skin="apple"] .cstock .gsets__in{border:0;border-radius:7px;background:var(--ib-s2);color:var(--ib-ink);font:400 13px/1.3 var(--ib-font)} [data-skin="apple"] .gsets__in:focus-visible, [data-skin="apple"] .cstock .gsets__in:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ib-accent)} [data-skin="apple"] .gsets__i:hover{background:var(--ib-hover)} [data-skin="apple"] .ptfld input, [data-skin="apple"] .ptfld textarea, [data-skin="apple"] .ptfld select{ padding:10px 12px;border:0;border-radius:7px;background:var(--ib-s1);color:var(--ib-ink); font:400 13px/1.35 var(--ib-font);transition:background 150ms ease,box-shadow 150ms ease } [data-skin="apple"] .ptfld input:hover, [data-skin="apple"] .ptfld textarea:hover{background:var(--ib-hover)} [data-skin="apple"] .ptfld input:focus, [data-skin="apple"] .ptfld textarea:focus, [data-skin="apple"] .ptfld select:focus{outline:none;background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent);border-color:transparent} [data-skin="apple"] .ptfld>span{font:500 12px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .dsec{border-bottom:1px solid var(--ib-line-soft)} /* --------------------------------------------------------------------------- 17. THE GALLERY WORKSPACE AND DELIVERY — surfaces and ink only --------------------------------------------------------------------------- */ [data-skin="apple"] .gws__place{font:400 .5em/1 var(--ib-font);letter-spacing:0;color:var(--ib-ink2)} [data-skin="apple"] .gws__meta{border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .gws__rail{border:0;border-radius:11px;background:var(--ib-s1);padding:16px 18px} [data-skin="apple"] .gws__row{border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .gws__rv{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .gws__rnote, [data-skin="apple"] .gws__note{font:400 12px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .gws__act{border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .gws__actt{font:400 12.5px/1.45 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .gws__counts .chip{padding:4px 9px;font-size:11.5px} [data-skin="apple"] .gws__up{border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .gws__upbar{background:var(--ib-s3)} [data-skin="apple"] .gws__upbar i{background:var(--ib-ink)} [data-skin="apple"] .gws__dropnote{background:rgba(255,255,255,.82);color:var(--ib-ink);border-radius:11px;outline:2px dashed var(--ib-ink);outline-offset:-12px} [data-skin="apple"] .gws__sortmenu, [data-skin="apple"] .hd__sharemenu, [data-skin="apple"] .galgrid__menuitems{border:1px solid var(--ib-line);border-radius:8px;background:var(--ib-s2);box-shadow:var(--ib-shadow-hover)} [data-skin="apple"] .gws__sortopt, [data-skin="apple"] .hd__shareopt, [data-skin="apple"] .galgrid__menuitem{color:var(--ib-ink);font:500 12.5px/1.3 var(--ib-font)} [data-skin="apple"] .gws__sortopt:hover, [data-skin="apple"] .hd__shareopt:hover, [data-skin="apple"] .galgrid__menuitem:hover{background:var(--ib-hover)} [data-skin="apple"] .hd__sharek{font-weight:600} [data-skin="apple"] .hd__shared{font:400 11.5px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .gws__pick{border-radius:7px;font:500 12.5px/1 var(--ib-font)} [data-skin="apple"] .gws__pick:focus-within{outline:2px solid var(--ib-ink);outline-offset:2px;color:var(--ib-ink)} /* Labels read in sentence case at the system's label size; the base tracked them out in capitals. */ [data-skin="apple"] .gsets__w, [data-skin="apple"] .gsets__d, [data-skin="apple"] .gsets__lb, [data-skin="apple"] .gws__selct, [data-skin="apple"] .gws__offert, [data-skin="apple"] .gws__flabel{font:500 11px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .gws__grp>.k{padding-bottom:8px;border-bottom:1px solid var(--ib-line)} [data-skin="apple"] .gsets__d--off, [data-skin="apple"] .gws__warn, [data-skin="apple"] .gwsel__warn{color:var(--ib-red)} [data-skin="apple"] .gsets__opt{letter-spacing:0;color:var(--ib-ink3)} [data-skin="apple"] .gsets__k{font:500 13.5px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .gsets__c{font:600 15px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .gsets__n, [data-skin="apple"] .gsets__desc, [data-skin="apple"] .gsets__no, [data-skin="apple"] .gws__none, [data-skin="apple"] .gws__sortnote, [data-skin="apple"] .gws__hint, [data-skin="apple"] .gws__ups, [data-skin="apple"] .gws__upwhy, [data-skin="apple"] .gws__gonen, [data-skin="apple"] .gws__gonec{font:400 12.5px/1.45 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .gws__selct b{font:600 15px/1.2 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .gws__upt, [data-skin="apple"] .gws__upname, [data-skin="apple"] .gws__gonename, [data-skin="apple"] .gws__deliverstate, [data-skin="apple"] .gws__pinopt{font:500 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .gws__upt b{font-weight:600} [data-skin="apple"] .gws__uplist{border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .gws__uprow{font:400 12.5px/1.4 var(--ib-font)} [data-skin="apple"] .gws__gones{border-top:1px solid var(--ib-line-soft);font:400 13px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .gws__gones:hover{color:var(--ib-ink)} [data-skin="apple"] .gws__ok{color:var(--ib-ink)} [data-skin="apple"] .gws__selrm:hover, [data-skin="apple"] .gsets__rm:hover{color:var(--ib-red);border-color:var(--ib-red)} /* The density control is a segmented control like every other one. */ [data-skin="apple"] .gws__dens{gap:2px;padding:3px;border:0;border-radius:7px;background:var(--ib-s1)} [data-skin="apple"] .gws__dens .chip{padding:5px 10px;border:0;border-radius:7px;background:transparent;font:500 12px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2)} [data-skin="apple"] .gws__dens .chip:hover{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .gws__dens .chip.on{background:var(--ib-s2);color:var(--ib-ink);font-weight:600;box-shadow:var(--ib-shadow-raised)} [data-skin="apple"] .gws__pinfield{ border:0;border-radius:7px;background:var(--ib-s1);color:var(--ib-ink); font:500 14px/1.3 var(--ib-font);letter-spacing:.18em;transition:background 150ms ease,box-shadow 150ms ease } [data-skin="apple"] .gws__pinfield::placeholder{letter-spacing:0;color:var(--ib-ink3)} [data-skin="apple"] .gws__pinfield:focus-visible{outline:none;background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent)} [data-skin="apple"] .gwsel{border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .gwsel__t{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .gwsel__t b{color:var(--ib-ink);font-weight:600} [data-skin="apple"] .gws__dropnote{border:0;font:600 14px/1.3 var(--ib-font);letter-spacing:0;text-transform:none} [data-skin="apple"] .gws__hd .path a:hover{color:var(--ib-ink)} [data-skin="apple"] .galgrid__fr{background:var(--ib-s3);border:0;box-shadow:none} [data-skin="apple"] .galgrid__i:hover .galgrid__fr, [data-skin="apple"] .galgrid__i:focus-within .galgrid__fr{border-color:transparent;box-shadow:0 0 0 2px var(--ib-ink)} [data-skin="apple"] .galgrid__badge{ padding:3px 8px;border-radius:7px;background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink); font:500 10.5px/1.2 var(--ib-font);letter-spacing:0;text-transform:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) } [data-skin="apple"] .galgrid__badge svg{stroke:var(--ib-tile-pill-ink)} [data-skin="apple"] .galgrid__badge--client{background:#eefbb3;color:#3d4a00;border-color:transparent} [data-skin="apple"] .galgrid__act{border:0;border-radius:6px;background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} [data-skin="apple"] .galgrid__act:hover{background:#fff;color:#1d1d1f} [data-skin="apple"] .galgrid__act.on{background:#1d1d1f;color:#fff} [data-skin="apple"] .galgrid__n{font:500 10.5px/1.2 var(--ib-font);letter-spacing:0;color:var(--ib-ink3)} [data-skin="apple"] .galgrid__name{font:400 11px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .galgrid__check input:checked+.galgrid__tick{background:var(--ib-ink);border-color:transparent} [data-skin="apple"] .galgrid__check input:checked+.galgrid__tick svg{stroke:var(--ib-bg)} [data-skin="apple"] .galprev__fr{border:0;background:var(--ib-s3)} [data-skin="apple"] .gwr, [data-skin="apple"] .gwd{border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .gwr__f, [data-skin="apple"] .gwd__sel, [data-skin="apple"] .gwd__area, [data-skin="apple"] .gwd__add{border:0;border-radius:7px;background:var(--ib-s2);color:var(--ib-ink);font:400 13px/1.35 var(--ib-font)} [data-skin="apple"] .gws__selbar{border-radius:8px;background:var(--ib-s2);box-shadow:var(--ib-shadow-hover)} /* The viewer stage stays dark whatever the theme. */ [data-skin="apple"] .lb{background:var(--ib-stage);color:var(--ib-on-stage)} [data-skin="apple"] .lb__name, [data-skin="apple"] .lb__pos{color:var(--ib-on-stage);font-family:var(--ib-font);letter-spacing:0;text-transform:none} [data-skin="apple"] .lb__x{color:var(--ib-on-stage)} [data-skin="apple"] .lb__x:focus-visible, [data-skin="apple"] .lb__nav:focus-visible{outline-color:var(--ib-accent)} /* --------------------------------------------------------------------------- 18. THE CLIENT PORTAL (11C, 14A, 14B) --------------------------------------------------------------------------- */ [data-skin="apple"].app--pt{--pt-measure:none;--pt-gutter:40px;background:var(--ib-bg)} [data-skin="apple"] .pt__ws{max-width:none;padding:0 40px 40px;gap:0} /* The top band becomes a quiet line: whose ImageBooth this is, top right, and the phone's menu button. The rail carries Book a shoot on desktop; the band's copy of it is drawn only when the rail is off-canvas. */ [data-skin="apple"] .pttop{ position:static;height:auto;padding:32px 40px 0;background:transparent;border:0; -webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:-24px;z-index:1 } [data-skin="apple"] .pttop__in{max-width:none;padding:0;height:auto;gap:12px;justify-content:flex-end;align-items:center} [data-skin="apple"] .pttop__c{ font:600 15px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink2) } [data-skin="apple"] .pttop__mark{opacity:.45;height:20px} /* Four classes, because the primary-button rule above carries three. */ [data-skin="apple"] .btn.primary.pttop__cta{display:none} [data-skin="apple"][data-portal-nav="home"] .pttop__c, [data-skin="apple"][data-portal-nav="home"] .pttop__mark{visibility:hidden} [data-skin="apple"] .pt__scrim{background:var(--ib-scrim)} /* The home page. */ [data-skin="apple"] .pthero{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start; margin:0 0 28px;padding:0;border:0 } [data-skin="apple"] .pthero__in{display:block} [data-skin="apple"] .pthero__lead{max-width:none} [data-skin="apple"] .pthero__eyebrow{font:600 15px/1.3 var(--ib-font);color:var(--ib-ink2);margin:0 0 6px} [data-skin="apple"] .pth__greet{font:600 44px/1.07 var(--ib-font);letter-spacing:-.028em;color:var(--ib-ink);margin:0} [data-skin="apple"] .pth__greet .pth__name{display:inline} [data-skin="apple"] .pth__dot{color:inherit} [data-skin="apple"] .pth__sub{margin:10px 0 0;font:400 14px/1.5 var(--ib-font);color:var(--ib-ink2);max-width:60ch} /* The studio's note and the conditions on one line under the greeting. */ [data-skin="apple"] .pthero__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:14px 0 0} [data-skin="apple"]:where([data-portal-nav="home"]) .pthero__line .ptmsg{margin:0;padding:0;border:0;border-radius:0;background:transparent;max-width:60ch} [data-skin="apple"] .pthero__line .ptmsg__k{display:none} [data-skin="apple"] .pthero__line .ptmsg__t{font:600 14px/1.5 var(--ib-font);color:var(--ib-ink);margin:0 0 2px} [data-skin="apple"] .pthero__line .ptmsg__b p{margin:0;font:italic 400 14px/1.5 var(--ib-font);color:var(--ib-ink2)} /* No divider before the conditions: when the line wraps, a leading hairline would sit alone at the start of the second line. The gap separates them. */ [data-skin="apple"]:where([data-portal-nav="home"]) .pthero__wx{gap:6px;padding-left:0;border-left:0;font:400 13.5px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .pthero__t{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .pthero__sep{color:var(--ib-ink3)} [data-skin="apple"] .ptmsg{margin:0 0 24px;padding:14px 16px;border:0;border-radius:11px;background:var(--ib-s1)} [data-skin="apple"] .ptmsg__t{font:600 14px/1.4 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptmsg__b p{font:400 13px/1.55 var(--ib-font);color:var(--ib-ink2)} /* The header rail, top right of the greeting: two counters set as type — figure, label, a hairline between — then Book a shoot in the product's own primary button, outlined in Studio Hill's burgundy by the `data-accent` the markup gives it. No tiles. EVERY RULE THIS DASHBOARD PASS ADDED OR CHANGED is scoped with `:where([data-portal-nav="home"])` — the shell attribute only the Dashboard carries — so Projects and the other client pages cannot pick it up. `:where()` adds no specificity, so each rule still ranks exactly as it did against the breakpoints below. */ [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail{ display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 22px; justify-self:end;padding-top:26px } [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__stats{display:flex;align-items:baseline;margin:0;padding:0} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__i{display:flex;align-items:baseline;gap:7px;margin:0;padding:0 16px;border-left:1px solid var(--ib-line)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__i:first-child{padding-left:0;border-left:0} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__v{order:-1;margin:0;font:600 21px/1 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink);font-variant-numeric:tabular-nums} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__l{margin:0;font:400 13px/1.3 var(--ib-font);color:var(--ib-ink2);white-space:nowrap} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__i.is-zero .ptrail__v{color:var(--ib-ink3)} [data-skin="apple"]:where([data-portal-nav="home"]) .btn.primary.ptrail__cta{min-height:36px;padding:0 15px 0 12px;gap:7px;white-space:nowrap;font-size:13px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__plus{font:400 17px/1 var(--ib-font);margin-top:-2px} [data-skin="apple"] .ptsec{margin:0 0 20px} [data-skin="apple"] .ptsec__hd{margin:0 0 12px} [data-skin="apple"] .ptsec__more{margin-right:-8px} /* Home: galleries left, the rest down the right. */ [data-skin="apple"]:where([data-portal-nav="home"]) .pthome{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:28px 40px;align-items:start} [data-skin="apple"]:where([data-portal-nav="home"]) .pthome__main, [data-skin="apple"]:where([data-portal-nav="home"]) .pthome__side{display:flex;flex-direction:column;gap:32px;min-width:0} [data-skin="apple"] .pthome .ptsec{margin:0} [data-skin="apple"] .pthome:not(:has(.pthome__side)), [data-skin="apple"] .pthome:not(:has(.pthome__main)){grid-template-columns:minmax(0,1fr)} /* Gallery cards are image-led tiles: photograph, scrim, stage pill, caption. */ [data-skin="apple"] .ptgrid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} [data-skin="apple"] .ptcard{ position:relative;aspect-ratio:3/2;border:0;border-radius:8px;background:var(--ib-s3);overflow:hidden; transition:transform 160ms var(--ib-ease) } [data-skin="apple"] a.ptcard:hover{transform:scale(1.01);border-color:transparent;background:var(--ib-s3)} [data-skin="apple"] a.ptcard:active{transform:var(--ib-press-tile)} [data-skin="apple"] .ptcard::after{content:"";position:absolute;inset:0;background:var(--ib-tile-scrim);pointer-events:none} [data-skin="apple"] .ptcard .jthumb--grid{ position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0; display:flex;align-items:center;justify-content:center;color:var(--ib-ink3) } [data-skin="apple"] .ptcard .jthumb--grid img{width:100%;height:100%;object-fit:cover} [data-skin="apple"] .ptcard__b{position:static;padding:0;gap:0} [data-skin="apple"] .ptcard__t{ position:absolute;left:12px;right:12px;bottom:28px;z-index:1; font:600 14px/1.2 var(--ib-font);letter-spacing:-.01em;color:var(--ib-on-tile) } [data-skin="apple"] .ptcard__a{display:none} [data-skin="apple"] .ptcard__f{position:static;margin:0} [data-skin="apple"] .ptcard__m{ position:absolute;left:12px;right:12px;bottom:11px;z-index:1; font:400 11.5px/1.3 var(--ib-font);color:var(--ib-on-tile-soft) } [data-skin="apple"] .ptcard__f .st{ position:absolute;left:10px;top:10px;z-index:1;padding:3px 8px;font-size:10.5px; background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px) } [data-skin="apple"] .ptcard__f .st.ok, [data-skin="apple"] .ptcard__f .st.info{background:#eefbb3;color:#3d4a00} [data-skin="apple"] .ptcard__f .st.hot, [data-skin="apple"] .ptcard__f .st.accent{background:rgba(29,29,31,.85);color:#fff} [data-skin="apple"] .ptcard__f .st.st--delivered{background:var(--ib-tile-pill);color:var(--ib-tile-pill-ink)} /* The Dashboard's galleries: two across, the photograph large and uncovered, the facts beneath it in type — state, project, then date, service and how much is inside. The Projects page keeps its own `.ptcard`. */ [data-skin="apple"]:where([data-portal-nav="home"]) .ptgals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal{display:flex;flex-direction:column;gap:12px;min-width:0;text-decoration:none;color:inherit} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__media{position:relative;display:block;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:var(--ib-s1)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms var(--ib-ease)} [data-skin="apple"]:where([data-portal-nav="home"]) a.ptgal:hover .ptgal__img{transform:scale(1.015)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__b{display:flex;flex-direction:column;gap:3px;min-width:0} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__state{font:500 12.5px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__t{font:600 16px/1.3 var(--ib-font);letter-spacing:-.015em;color:var(--ib-ink);overflow-wrap:anywhere} [data-skin="apple"]:where([data-portal-nav="home"]) a.ptgal:hover .ptgal__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__m{font:400 13px/1.45 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"]:where([data-portal-nav="home"]) a.ptgal:focus-visible{outline:2px solid var(--ib-ink);outline-offset:4px;border-radius:6px} /* A missing or failed photograph: neutral ground and a quiet mark. The image sits above it; `.is-missing` (set by the page script) removes the image so a broken-image icon never shows. */ [data-skin="apple"]:where([data-portal-nav="home"]) .ptmedia__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ib-s1)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmedia__mark{font:700 11px/1 var(--ib-font);letter-spacing:.24em;color:var(--ib-ink3)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmedia__mark em{font-style:normal} [data-skin="apple"]:where([data-portal-nav="home"]) [data-media].is-missing img{display:none} /* Coming up: a compact list, not cards. The day leads large, month and weekday beneath; hairlines above and between; the status pill at the right. */ [data-skin="apple"]:where([data-portal-nav="home"]) .ptup{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ib-line-soft)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__row{ display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"date title st" "date meta st"; align-items:center;column-gap:16px;row-gap:3px;padding:13px 6px;border-bottom:1px solid var(--ib-line-soft); text-decoration:none;color:inherit;min-width:0;transition:background 150ms ease } [data-skin="apple"] .ptup__row:hover{background:var(--ib-s1)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__date{grid-area:date;display:flex;flex-direction:column;color:var(--ib-ink)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__date time{display:flex;flex-direction:column;gap:3px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__day{font:600 22px/1 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink);font-variant-numeric:tabular-nums} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__mon{font:500 11.5px/1.2 var(--ib-font);letter-spacing:.01em;color:var(--ib-ink2);white-space:nowrap} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__tbc{font:500 11.5px/1.25 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__title{grid-area:title;font:600 14.5px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-skin="apple"] .ptup__row:not(:has(.ptup__meta)) .ptup__title{grid-row:1/3} [data-skin="apple"]:where([data-portal-nav="home"]) .ptup__meta{grid-area:meta;min-width:0;font:400 13px/1.35 var(--ib-font);color:var(--ib-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-skin="apple"] .ptup__st{grid-area:st;justify-self:end} [data-skin="apple"] .ptrow__sep{margin:0 5px;opacity:1;color:var(--ib-ink3)} /* Book your next shoot beside the image of the week. */ [data-skin="apple"] .ptnext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} [data-skin="apple"] .ptnext__book{ display:flex;align-items:center;gap:14px;padding:20px;border:1px dashed var(--ib-line);border-radius:8px; text-decoration:none;color:var(--ib-ink);transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .ptnext__book:hover{background:var(--ib-s1);color:var(--ib-ink)} [data-skin="apple"] .ptnext__book:active{transform:var(--ib-press-tile)} [data-skin="apple"] .ptnext__plus{ width:36px;height:36px;flex:none;border-radius:99px;border:1px solid var(--ib-line); display:grid;place-items:center;font:400 20px/1 var(--ib-font);color:var(--ib-ink) } [data-skin="apple"] .ptnext__t{font:600 14px/1.3 var(--ib-font);letter-spacing:-.01em} [data-skin="apple"] .ptnext__s{margin-top:2px;font:400 12px/1.4 var(--ib-font);color:var(--ib-ink2)} /* The image of the week, under Coming up. */ [data-skin="apple"]:where([data-portal-nav="home"]) .pthero__plate{display:block;position:relative;margin:0;border-radius:6px;overflow:hidden;background:var(--ib-s1);transition:transform 160ms var(--ib-ease)} [data-skin="apple"] .pthero__plate:hover{transform:scale(1.01)} [data-skin="apple"]:where([data-portal-nav="home"]) .pthero__art{position:relative;display:block;aspect-ratio:3/2;box-shadow:none;border-radius:0} [data-skin="apple"]:where([data-portal-nav="home"]) .pthero__art .pthero__img{position:relative} [data-skin="apple"] .pthero__art::after{content:"";position:absolute;inset:0;background:var(--ib-tile-scrim);pointer-events:none} [data-skin="apple"] .pthero__img{opacity:1;-webkit-mask-image:none;mask-image:none} [data-skin="apple"] .pthero__cap{ position:absolute;left:12px;right:12px;bottom:11px;z-index:1;align-items:flex-start;text-align:left;gap:2px;color:var(--ib-on-tile) } [data-skin="apple"] .pthero__capk{font:500 10.5px/1.3 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-on-tile-soft)} [data-skin="apple"] .pthero__capv{font:600 14px/1.2 var(--ib-font);letter-spacing:-.01em;color:var(--ib-on-tile)} [data-skin="apple"] .pthero__plate:hover .pthero__capk{color:var(--ib-on-tile-soft)} [data-skin="apple"] .pthero__plate:hover .pthero__capv{color:var(--ib-on-tile)} /* Instagram, demoted to the foot of the Dashboard: a hairline above, no card, smaller tiles, and the invitation as one line beside a quiet button. */ [data-skin="apple"]:where([data-portal-nav="home"]) .ptsocial, [data-skin="apple"]:where([data-portal-nav="home"]) .ptmsg--ig{margin:40px 0 0;padding:22px 0 0;border:0;border-top:1px solid var(--ib-line-soft);border-radius:0;background:transparent} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmsg--ig{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmsg--ig .ptmsg__k{display:block;margin:0;font:600 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmsg--ig .ptmsg__b{flex:1 1 320px;min-width:0} [data-skin="apple"]:where([data-portal-nav="home"]) .ptmsg--ig .ptmsg__b p{margin:0;font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptsocial .ig__t{font-size:15px} [data-skin="apple"] .ptsocial .ig__t::after{content:none} [data-skin="apple"]:where([data-portal-nav="home"]) .ptsocial .ig__grid{max-width:560px} @media (prefers-reduced-motion:reduce){ [data-skin="apple"]:where([data-portal-nav="home"]) .ptgal__img{transition:none} [data-skin="apple"]:where([data-portal-nav="home"]) a.ptgal:hover .ptgal__img{transform:none} } /* Projects and account. */ [data-skin="apple"] .ptfind{gap:10px;margin:0 0 16px} [data-skin="apple"] .ptfind__box{padding:9px 14px;border:0;border-radius:7px;background:var(--ib-s1);transition:background 150ms ease,box-shadow 150ms ease} [data-skin="apple"] .ptfind__box:hover{background:var(--ib-hover)} [data-skin="apple"] .ptfind__box:focus-within{background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent);border-color:transparent} [data-skin="apple"] .ptfind__box svg{color:var(--ib-ink2)} [data-skin="apple"] .ptfind__in{font:400 13px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptfind__in::placeholder{color:var(--ib-ink2)} [data-skin="apple"] .ptfind__tabs{gap:2px;padding:3px;border-radius:7px;background:var(--ib-s1)} [data-skin="apple"] .ptfind__tab span{padding:7px 14px;border:0;border-radius:7px;background:transparent;font:500 12.5px/1.2 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptfind__tab:hover span{background:var(--ib-hover-soft);color:var(--ib-ink)} [data-skin="apple"] .ptfind__tab input:checked+span{background:var(--ib-s2);color:var(--ib-ink);font-weight:600;border-color:transparent;box-shadow:var(--ib-shadow-raised)} [data-skin="apple"] .ptfind__tab input:focus-visible+span{outline-color:var(--ib-ink)} [data-skin="apple"] .ptfind__view{margin:-4px 0 14px;gap:2px} [data-skin="apple"] .ptview{padding:6px 12px;border:0;border-radius:7px;background:var(--ib-s1);font:500 12.5px/1.2 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptview:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .ptview.is-on{background:var(--ib-s2);color:var(--ib-ink);border-color:transparent;box-shadow:var(--ib-shadow-raised);font-weight:600} [data-skin="apple"] .ptlist{gap:6px} [data-skin="apple"] .ptrow{padding:11px 14px;border:0;border-radius:8px;background:var(--ib-s1);transition:background 150ms ease,transform 160ms var(--ib-ease)} [data-skin="apple"] a.ptrow:hover{transform:none;background:var(--ib-hover);border-color:transparent} [data-skin="apple"] a.ptrow:active{transform:var(--ib-press-row)} [data-skin="apple"] .ptrow__img{border-radius:6px;background:var(--ib-s3)} [data-skin="apple"] .ptrow__title{font:600 14px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .ptrow__meta{font:400 12px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptempty, [data-skin="apple"] .ptnext, [data-skin="apple"] .ptnote{font:400 13px/1.6 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptdetail{margin-top:16px} [data-skin="apple"] .ptdetail div{padding:11px 0;border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .ptdetail div:first-child{border-top:0} [data-skin="apple"] .ptdetail dt{font:400 13.5px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptdetail dd{font:400 13.5px/1.4 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptback{margin:0 0 12px} [data-skin="apple"] .ptfoot{ margin:40px 0 0;padding:16px 0 0;border-top:1px solid var(--ib-line-soft); font:400 11.5px/1.4 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink3) } [data-skin="apple"] .ptfoot__c{color:var(--ib-ink2)} /* Book a shoot (14A / 14B). */ [data-skin="apple"] .ptband{margin:0 0 22px;padding:0;border-radius:0;background:transparent;color:var(--ib-ink)} [data-skin="apple"] .ptband h1{font:600 44px/1.07 var(--ib-font);letter-spacing:-.028em;color:var(--ib-ink);margin:0 0 8px} /* The lead and the confirmation note run on as one sentence under the title (14A/14B): both inline, the note in the lighter ink. */ [data-skin="apple"] .ptband p{display:inline;margin:0;font:400 14px/1.5 var(--ib-font);color:var(--ib-ink2);opacity:1;max-width:none} [data-skin="apple"] .ptband h1+p::after{content:" "} [data-skin="apple"] .ptband__note{display:inline;margin:0;padding:0;border:0;font:400 14px/1.5 var(--ib-font);color:var(--ib-ink3);opacity:1} [data-skin="apple"] .ptband p+.ptband__note{margin-left:0} [data-skin="apple"] .ptbook{grid-template-columns:minmax(0,1fr) 320px;gap:24px} [data-skin="apple"] .ptform{gap:24px} [data-skin="apple"] .ptfs{gap:12px} [data-skin="apple"] .ptfs__l{ padding:0 0 10px;margin:0 0 2px;border-bottom:1px solid var(--ib-line); font:600 22px/1.1 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink) } [data-skin="apple"] .ptfs__l .ptfs__opt, [data-skin="apple"] .ptfs__opt, [data-skin="apple"] .ptfld__opt{font:400 12px/1.4 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink3)} [data-skin="apple"] .ptfs__l .ptfs__opt{margin-top:8px} [data-skin="apple"] .ptfs--addons{order:10} [data-skin="apple"] .ptpk{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} [data-skin="apple"] .ptpk__c{ align-items:stretch;text-align:left;gap:6px;min-height:118px;padding:16px 18px 14px; border:0;border-radius:11px;background:var(--ib-s1);transition:background 150ms ease,box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .ptpk__c:hover{background:var(--ib-hover);border-color:transparent} [data-skin="apple"] .ptpk__c:active{transform:var(--ib-press-tile)} [data-skin="apple"] .ptpk__n{font:600 14.5px/1.3 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .ptpk__d{font:400 12.5px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptpk__f{align-items:center;padding-top:8px} [data-skin="apple"] .ptpk__p{font:600 15px/1.2 var(--ib-font);letter-spacing:-.01em;color:var(--ib-ink)} [data-skin="apple"] .ptpk__p--tba{font-weight:500;color:var(--ib-ink2)} [data-skin="apple"] .ptpk__a{ padding:5px 12px;border:2px solid var(--ib-accent);border-radius:7px;background:var(--ib-s2); font:600 12px/1 var(--ib-font);letter-spacing:0;text-transform:none;color:var(--ib-ink) } [data-skin="apple"] .ptpk__c:has(input:checked){background:var(--ib-s2);border-color:transparent;box-shadow:inset 0 0 0 2px var(--ib-accent)} [data-skin="apple"] .ptpk__c:has(input:checked) .ptpk__n, [data-skin="apple"] .ptpk__c:has(input:checked) .ptpk__p{color:var(--ib-ink)} [data-skin="apple"] .ptpk__c:has(input:checked) .ptpk__d{color:var(--ib-ink2);opacity:1} [data-skin="apple"] .ptpk__c:has(input:checked) .ptpk__a{background:var(--ib-ink);border-color:var(--ib-ink);color:var(--ib-bg)} [data-skin="apple"] .ptpk__c input:focus-visible~.ptpk__n{outline-color:var(--ib-ink)} [data-skin="apple"] .ptfs--addons .ptchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} [data-skin="apple"] .ptchip{ justify-content:space-between;gap:8px;padding:9px 14px;border:0;border-radius:7px;background:var(--ib-s1); transition:background 150ms ease,box-shadow 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .ptchip:hover{background:var(--ib-hover);border-color:transparent} [data-skin="apple"] .ptchip__n{font:500 12.5px/1.3 var(--ib-font);color:var(--ib-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-skin="apple"] .ptchip__p{font:400 12.5px/1.3 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptchip:has(input:checked){background:var(--ib-s2);border-color:transparent;box-shadow:inset 0 0 0 2px var(--ib-accent)} [data-skin="apple"] .ptchip:has(input:checked) .ptchip__n{color:var(--ib-ink);font-weight:600} [data-skin="apple"] .ptchip:has(input:checked) .ptchip__p{color:var(--ib-ink2);opacity:1} /* Time of day: the same checkboxes, drawn as a segmented control. */ [data-skin="apple"] .ptfld .ptchips{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:7px;background:var(--ib-s1);align-self:flex-start} [data-skin="apple"] .ptfld .ptchip{padding:6px 14px;background:transparent} [data-skin="apple"] .ptfld .ptchip .ptchip__n{color:var(--ib-ink2);font-weight:500} [data-skin="apple"] .ptfld .ptchip:hover{background:var(--ib-hover-soft)} [data-skin="apple"] .ptfld .ptchip:has(input:checked){background:var(--ib-s2);box-shadow:var(--ib-shadow-raised)} [data-skin="apple"] .ptfld .ptchip:has(input:checked) .ptchip__n{color:var(--ib-ink)} [data-skin="apple"] .ptfld{gap:6px} [data-skin="apple"] .ptfld__row{gap:12px} [data-skin="apple"] .ptsum{ top:32px;padding:18px 20px;gap:14px;border:0;border-radius:11px;background:var(--ib-s1);box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none } [data-skin="apple"] .ptsum__h{text-transform:uppercase;letter-spacing:.02em} [data-skin="apple"] .ptsum__i, [data-skin="apple"] .ptsum__row{font:400 12.5px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptsum__i span:first-child, [data-skin="apple"] .ptsum__row b{font-weight:400;color:var(--ib-ink)} [data-skin="apple"] .ptsum__none{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptsum__d, [data-skin="apple"] .ptsum__t{border-top:1px solid var(--ib-line)} [data-skin="apple"] .ptsum__tl{font:600 15px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptsum__ex{font:400 11px/1.3 var(--ib-font);letter-spacing:.02em;text-transform:uppercase;color:var(--ib-ink2)} [data-skin="apple"] .ptsum__tv{font:600 15px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptsum__fine{font:400 11.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptsum__go{min-height:40px} [data-skin="apple"] .ptok, [data-skin="apple"] .pterr{padding:16px 18px;border:0;border-radius:8px;background:var(--ib-s1)} [data-skin="apple"] .pterr{box-shadow:inset 0 0 0 1px var(--ib-red)} [data-skin="apple"] .ptok strong{font:600 18px/1.2 var(--ib-font);letter-spacing:-.015em;color:var(--ib-ink)} [data-skin="apple"] .ptok p, [data-skin="apple"] .pterr p{font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .pterr p{color:var(--ib-red)} /* The stock library and a collection. */ [data-skin="apple"] .ptstock__lead, [data-skin="apple"] .stk__desc{font:400 13.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptstock__card{aspect-ratio:auto} [data-skin="apple"] .ptstock__art{aspect-ratio:3/2} [data-skin="apple"] .stk__bar{border:0;border-radius:11px;background:var(--ib-s2);box-shadow:var(--ib-shadow-hover);-webkit-backdrop-filter:none;backdrop-filter:none} [data-skin="apple"] .stk__bar.is-live{box-shadow:var(--ib-shadow-hover),inset 0 0 0 2px var(--ib-accent)} [data-skin="apple"] .stk__state{font:400 13px/1.4 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .stk__state b{color:var(--ib-ink)} [data-skin="apple"] .stk__rows .cgfig.is-picked{outline-color:var(--ib-ink)} /* --------------------------------------------------------------------------- 19. SIGN IN — the admin's and the client's, one shell --------------------------------------------------------------------------- */ [data-skin="apple"].solo, [data-skin="apple"] .solo{background:var(--ib-bg);flex-direction:column;color:var(--ib-ink);font-family:var(--ib-font)} [data-skin="apple"] .solo__inner{max-width:380px} [data-skin="apple"] .solo__brand{margin-bottom:28px;text-align:left} [data-skin="apple"] .solo__brand .wm{ display:block;font:800 22px/1 var(--ib-font-brand);letter-spacing:.02em;text-transform:uppercase;color:var(--ib-ink) } [data-skin="apple"] .solo__brand .wm em{display:none} [data-skin="apple"] .solo__brand .tag{ margin-top:8px;font:500 11px/1.2 var(--ib-font-brand);letter-spacing:.08em;text-transform:lowercase;color:var(--ib-ink2) } [data-skin="apple"] .solo h1, [data-skin="apple"] .ptauth__h{font:600 28px/1.1 var(--ib-font);letter-spacing:-.025em;color:var(--ib-ink);margin:0 0 18px} [data-skin="apple"] .ptauth__p{font:400 14px/1.55 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptauth__err{font:400 13px/1.5 var(--ib-font);color:var(--ib-red)} [data-skin="apple"] .ptauth__lbl{font:500 12px/1.3 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptauth__in{ padding:11px 12px;border:0;border-radius:7px;background:var(--ib-s1);color:var(--ib-ink); font:400 13px/1.35 var(--ib-font);transition:background 150ms ease,box-shadow 150ms ease } [data-skin="apple"] .ptauth__in:focus{outline:none;background:var(--ib-s2);box-shadow:0 0 0 2px var(--ib-accent);border-color:transparent} [data-skin="apple"] .solo .primary{min-height:40px;margin-top:6px} [data-skin="apple"] .solo form{gap:10px} /* --------------------------------------------------------------------------- 20. FOCUS, MOTION, RESPONSIVE --------------------------------------------------------------------------- */ [data-skin="apple"] :is(.ni,.sb__cta,.dash__link,.shot,.stat,.kpi,.ig__tile,.tsk__box,.attn__i,.tab,.filt,.row,.dtab,.gbtn,.glink,.btn,.chip,.crewpill,.fld,.link,.rowact,.jcard__open,.dreg__tile,.ptcard,.ptup__row,.ptnext__book,.pthero__plate,.trail__i,.sblock,.actq__i,.editable,.cpick__new,.hd__btn,button):focus-visible{ outline:2px solid var(--ib-ink);outline-offset:2px;box-shadow:none } [data-skin="apple"] .stat:focus-visible, [data-skin="apple"] .dash__cta:focus-visible, [data-skin="apple"] a.shot:focus-visible, [data-skin="apple"] .attn__i:focus-visible, [data-skin="apple"] a.ptcard:focus-visible, [data-skin="apple"] .dreg__tile:focus-visible, [data-skin="apple"] a.ptrow:focus-visible, [data-skin="apple"] .pthero__plate:focus-visible{outline:2px solid var(--ib-ink);outline-offset:3px} [data-skin="apple"] tr.row:focus{outline:none} /* --------------------------------------------------------------------------- R. THE RESPONSIVE SYSTEM — Phase 1, the shared primitives --------------------------------------------------------------------------- THE SCALE. Six steps and no others, so a layout question is answered by choosing a step rather than by inventing a width: 1500 very wide desktop — the widest grids relax 1300 desktop 1150 narrow desktop 1024 small desktop / tablet landscape 860 tablet portrait — THE RAIL GOES OFF-CANVAS HERE, all three audiences 720 large phone / small tablet — tables restack, drawers go full-width 480 phone — the 390px and 360px references live inside this step CSS cannot read a custom property in a media query, so the scale is a convention rather than a token, and `tests/unit/responsive.php` fails the build if this sheet grows a seventh number. That is the enforcement. WHY `overflow:hidden` WAS NOT THE ANSWER, AND IS NOT THE TEST. The shells carry `overflow:hidden`, so `document.scrollWidth` equalled the viewport on every screen at 390px while the Job Register was losing 304px of itself off the right-hand edge. A page that does not scroll sideways because its content has been cut off is not a responsive page. The rules below remove the CAUSES — intrinsic minimum widths, fixed component widths, headers that cannot wrap — so nothing needs hiding. THE CAUSE, almost every time, is `min-width:auto`. A flex or grid child refuses to shrink below its content, so one long client name or one 260px search field pushes a whole row past the edge. `min-width:0` on the containers below is most of this section. --------------------------------------------------------------------------- */ /* --- content containers: allowed to be narrower than their content --------- */ [data-skin="apple"] .main, [data-skin="apple"] .ws, [data-skin="apple"] .hd, [data-skin="apple"] .hd__l, [data-skin="apple"] .hd__right, [data-skin="apple"] .regbar, [data-skin="apple"] .filters, [data-skin="apple"] .card{min-width:0} /* The page header wraps rather than overflowing. `.hd__l` holds the title and may shrink; `.hd__right` keeps its intrinsic size until there is no room, then takes a line of its own. */ [data-skin="apple"] .hd{flex-wrap:wrap} /* Long client names, project titles and addresses break rather than push. `anywhere` rather than `break-all` so ordinary words still break at spaces and only an unbreakable run is split. */ [data-skin="apple"] .hd h1, [data-skin="apple"] .hd__sub, [data-skin="apple"] .hd .sub{overflow-wrap:anywhere} /* Media keeps its ratio and never exceeds its box. */ [data-skin="apple"] img, [data-skin="apple"] video{max-width:100%} @media (max-width:1024px){ /* The register's KPI row stops being four columns before the columns stop being readable — and two is still right at 390px, where 362px of usable width halves comfortably. Four stacked cards would put the table four screens down the page. (The Dashboard's own stats keep the single column they were designed with; that block is Phase 4's, not this one's.) */ [data-skin="apple"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ /* Two across. Declared HERE rather than beside the dashboard band's own breakpoints further up: the base `.ctrgrid` is written later in this sheet /* THE PHONE'S ADMIN BAND. The Contractor's `.ctrtop` in every respect but the name: the menu the rail opens from, and the wordmark. A page's own actions stay in its own header underneath. */ [data-skin="apple"] .adtop{ display:flex;align-items:center;gap:12px; padding:14px 16px;border-bottom:.5px solid var(--ib-line-soft);background:var(--ib-s2) } [data-skin="apple"] .adtop__brand{display:flex;flex-direction:column;text-decoration:none;color:inherit} /* The band is Admin's; the two portals draw their own. */ [data-skin="apple"] .app--pt .adtop{display:none} /* 44px, because this is the only way to the navigation on a phone. */ [data-skin="apple"] .pt__menu{ width:44px;height:44px;border:0;border-radius:8px;background:var(--ib-s1); -webkit-backdrop-filter:none;backdrop-filter:none } [data-skin="apple"] .pt__menu span{background:var(--ib-ink)} /* The header stacks: title, then whatever the page puts beside it, full width. A search that was 260px beside a heading is now a row of its own. */ [data-skin="apple"] .hd__right{width:100%;padding-top:0} [data-skin="apple"] .hd__search{flex:1 1 auto} /* THE DRAWER IS THE PAGE at this width, not a panel over it. It was `calc(100% - 72px)`, which on a 390px phone is a 318px drawer with 72px of a page nobody can use showing beside it. */ [data-skin="apple"] .drawer{width:100%;max-width:100%} /* The modal goes full-bleed too, in `admin.css` — the skin is guarded against setting modal geometry, and that guard is correct: the base sheet owns where the dialog sits. Only its surface is restated here. */ [data-skin="apple"] .modal{border:0;border-radius:0} } /* --------------------------------------------------------------------------- R2. THE CLIENT PORTAL ON A PHONE — Phase 2 --------------------------------------------------------------------------- Everything here is a shape the Client area adds; the shell, the header, the search, the tabs and the card containers are Phase 1's and are not restated. THE ONE STRUCTURAL BUG. `.ptbook` is `minmax(0,1fr) 316px` — the form beside a fixed-width summary panel. At 390px the panel and its gap claim 350 of 358 available pixels and the form is left eight, which is why the booking screen was clipping 194px of itself. The panel is not narrower on a phone; it is underneath. --------------------------------------------------------------------------- */ @media (max-width:860px){ /* The summary goes under the form, and stops being sticky — a sticky panel below the thing it summarises follows you up the page for no reason. */ [data-skin="apple"] .ptbook{grid-template-columns:minmax(0,1fr);gap:26px} [data-skin="apple"] .ptsum{position:static;top:auto} /* The band's own CTA is sized where it is declared, further down this sheet — an override here would have lost to it anyway, and two rules for one height is one rule too many. */ } @media (max-width:720px){ /* The header New Job is a touch target on a phone, so it meets the 44px floor there. Declared after the base `.hd__new` rule so it wins at equal specificity. */ [data-skin="apple"] .hd__btn.hd__new{min-height:44px} /* FORM FIELDS STACK. `.ptfld__row` is a wrapping flex row whose children ask for 150px; two of them fit at 358px and the pair is then too narrow to read a date in. One field, one line. */ [data-skin="apple"] .ptfld__row{flex-direction:column;gap:14px} [data-skin="apple"] .ptfld__row .ptfld{flex:1 1 auto;width:100%} /* Every control a thumb has to hit. A 34px date field is a miss. */ [data-skin="apple"] .ptfld input, [data-skin="apple"] .ptfld select, [data-skin="apple"] .ptfld textarea, [data-skin="apple"] .ptfld__in{min-height:44px} /* Package and add-on choices are full-width rows rather than a pair of narrow columns: the description is the point and it needs the width. */ [data-skin="apple"] .ptpk{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .ptpk__c, [data-skin="apple"] .ptchip{min-height:44px} /* PROJECT CARDS: one per row and the photograph keeps its shape. A 190px minimum gives two columns at 358px, and a 171px-wide project card is a thumbnail with a caption rather than a card. */ [data-skin="apple"] .ptgrid{grid-template-columns:minmax(0,1fr)} /* Long project titles and addresses wrap instead of being cut. */ [data-skin="apple"] .ptcard__t, [data-skin="apple"] .ptcard__s, [data-skin="apple"] .ptrow__t{white-space:normal;overflow-wrap:anywhere} /* THE PAGE'S BUTTONS ARE THUMB TARGETS. Sign out, Submit, Send — a 30px control is one somebody misses twice before they hit it. `.btn` AND NOT `button`. The first draft of this said `button:not(.tab):not(.acc__sw)`, which is a rule about every button on the page and therefore a rule about buttons that are not buttons: the Contractor's task tick is an 18px round `.tsk__box`, and `.pt__ws` is the Contractor's content class as well as the Client's, so a minimum height stretched it into an 18x44 oval. A shape control is not a thumb target with a label, and a selector that cannot tell them apart is the wrong selector. */ [data-skin="apple"] .pt__ws .btn, [data-skin="apple"] .ptout .btn{min-height:44px} /* The client's detail rows stack: a label column of 150px beside a value leaves nothing for the value. */ [data-skin="apple"] .ptdetail>div{flex-direction:column;gap:2px} [data-skin="apple"] .ptdetail dt{min-width:0} } @media (max-width:480px){ /* The bar is the navigation here, so its labels stay legible. */ [data-skin="apple"] .ptbar__l{font-size:11px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__i{padding:0 11px;gap:5px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__v{font-size:18px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__l{font-size:12.5px} } @media (max-width:720px){ /* Action rows wrap instead of colliding, and their buttons keep a thumb's worth of height. */ [data-skin="apple"] .hd__right, [data-skin="apple"] .filters{flex-wrap:wrap} [data-skin="apple"] .hd__btn, [data-skin="apple"] .hd__share>summary.hd__btn{min-height:40px} } @media (max-width:720px){ /* CONTROLS THAT NARROW A LIST ARE CONTROLS. The Open / Completed / All tabs and the sort chips were 29px — small enough to miss on a building site, which is where this screen is read. The shared 44px floor, applied to the two chip components the page is built from. Phone only: `.tab` and `.filt` keep their desktop density above 720, where they are read with a mouse. */ [data-skin="apple"] .tabs .tab, [data-skin="apple"] .filters .filt{ min-height:44px;display:inline-flex;align-items:center } /* The search field's own box is the target, not the bare input inside it. */ [data-skin="apple"] .hd__search, [data-skin="apple"] .ptfind__box{min-height:44px} /* PAGINATION IS A TAP TARGET TOO. `.pg .filt` is the page number, not a sort chip, so the `.filters .filt` rule above never reached it — and a 29px "2" between a 29px Prev and Next is three misses in a row. */ [data-skin="apple"] .pg .filt, [data-skin="apple"] .pg a, [data-skin="apple"] .pg button{min-height:44px;display:inline-flex;align-items:center} /* The Job drawer's own controls. It is a full-screen sheet at this width, so everything in it is being pressed with a thumb. */ [data-skin="apple"] .drawer .btn, [data-skin="apple"] .drawer .fld, [data-skin="apple"] .drawer select{min-height:44px} /* And an Admin page's own buttons, the same way the Client's got it in Phase 2 — `.btn` and not `button`, because a bare element selector also catches the controls that are a shape rather than a label. Desktop is a pointer interface and keeps its density; this is the phone step. */ [data-skin="apple"] .ws .btn{min-height:44px} } @media (max-width:480px){ /* The phone step. 390px and 360px both land here, and the only thing that changes is that the gutters stop being generous. */ [data-skin="apple"] .ws, [data-skin="apple"] .ws.dash, [data-skin="apple"] .ws.dash:has(.dash__mid--solo){padding:16px 14px 28px} [data-skin="apple"] .adtop{padding:12px 14px} [data-skin="apple"] .hd{gap:14px} [data-skin="apple"] .hd h1, [data-skin="apple"] .dash__greet, [data-skin="apple"] .pth__greet, [data-skin="apple"] .ptband h1, [data-skin="apple"] h1.dash__t{font-size:27px} } /* --------------------------------------------------------------------------- R4. THE REGISTER ROW-CARD — Phase 4, and ONE pattern for two registers --------------------------------------------------------------------------- Below 720px neither register is a table any more. Both become a list of cards, and they become the SAME list of cards: the Job Register and the contractor's My Jobs share `.jobs-table`, so the shape below is declared once and each register only says where its own cells go. WHY NOT SCROLL THEM. A horizontally scrolling table inside a vertically scrolling page is a trap on a touch screen — the contractor sheet has said so since it shipped, and the Job Register's own numbers agreed: eight columns at 390px is 40px each. Schedule is the one register that genuinely needs columns, and it stays a contained scroller. WHY `display:grid` ON A `tr`. It is the only way to reorder cells without reordering the markup, and the markup is a table because on a desktop it IS a table — semantically and visually. A screen reader still reads the cells in source order, the desktop table is untouched above 720, and no template changed to get any of this. NO CELL IS RENAMED AND NONE IS INVENTED. The labels below are the `` text the header row carries, restated as `::before` because the header is not drawn when the rows are cards. Guarded: the skin may not set a width on a `.jobs-table` or `.col-` selector, and does not. It sets where things sit, not how wide. --------------------------------------------------------------------------- */ @media (max-width:720px){ [data-skin="apple"] .jobs-table, [data-skin="apple"] .jobs-table tbody, [data-skin="apple"] .jobs-table tr, [data-skin="apple"] .jobs-table td, [data-skin="apple"] .clients-table, [data-skin="apple"] .clients-table tbody, [data-skin="apple"] .clients-table tr, [data-skin="apple"] .clients-table td{display:block} /* The header row's words move into the cells; the row itself goes. */ [data-skin="apple"] .jobs-table thead, [data-skin="apple"] .clients-table thead{display:none} [data-skin="apple"] .jobs-table tbody tr, [data-skin="apple"] .clients-table tbody tr{ display:grid;grid-template-columns:minmax(0,1fr) auto; gap:10px 14px;align-items:start; padding:14px 16px;margin:0 0 10px; background:var(--ib-s2);border:.5px solid var(--ib-line-soft);border-radius:11px } [data-skin="apple"] .jobs-table tbody tr:last-child, [data-skin="apple"] .clients-table tbody tr:last-child{margin-bottom:0} /* A cell is a block with a small label above it, and the label is the column's own heading. The title cell needs none — it says what it is. */ [data-skin="apple"] .jobs-table tbody td, [data-skin="apple"] .clients-table tbody td{ padding:0;border:0;min-width:0; font:400 13.5px/1.4 var(--ib-font);color:var(--ib-ink) } [data-skin="apple"] .jobs-table tbody td::before, [data-skin="apple"] .clients-table tbody td::before{ display:block;margin-bottom:2px; font:500 10.5px/1.2 var(--ib-font);letter-spacing:.06em; text-transform:uppercase;color:var(--ib-ink3) } /* The title block spans, keeps its thumbnail, and stops truncating: a card has the room a 112px column did not. */ [data-skin="apple"] .jobs-table .col-job, [data-skin="apple"] .jobs-table .ctrtbl__job{grid-column:1 / -1} [data-skin="apple"] .jobs-table .jt a, [data-skin="apple"] .jobs-table .ctrtbl__jn{ white-space:normal;overflow:visible;text-overflow:clip; font-size:15px;font-weight:600;line-height:1.3 } [data-skin="apple"] .jobs-table .cl, [data-skin="apple"] .jobs-table .ctrtbl__jid{white-space:normal;font-size:12.5px;color:var(--ib-ink2)} } /* --- the Job Register's own cells ------------------------------------------- */ @media (max-width:720px){ [data-skin="apple"] .jobs-table .col-date::before{content:"Shoot date"} [data-skin="apple"] .jobs-table .col-stage::before{content:"Production"} [data-skin="apple"] .jobs-table .col-crew::before{content:"Photographer"} [data-skin="apple"] .jobs-table .col-fee::before{content:"Fee ex GST"} [data-skin="apple"] .jobs-table .col-type::before{content:"Type / sector"} [data-skin="apple"] .jobs-table .col-gallery::before{content:"Gallery"} /* WHEN AND WHAT STATE FIRST, then who and what it is worth. Auto-placement fills a grid in source order, which is the desktop column order and put the shoot date on the third line; `order` moves the cells without moving the markup, so the table a screen reader reads is still the table. Gallery spans because it holds two actions, and Type/sector is the compact last line — it is the least operational thing in the row. */ [data-skin="apple"] .jobs-table .col-job{order:0} [data-skin="apple"] .jobs-table .col-date{order:1} [data-skin="apple"] .jobs-table .col-stage{order:2} [data-skin="apple"] .jobs-table .col-crew{order:3} [data-skin="apple"] .jobs-table .col-fee{order:4} [data-skin="apple"] .jobs-table .col-gallery{order:5;grid-column:1 / -1} [data-skin="apple"] .jobs-table .col-type{order:6} [data-skin="apple"] .jobs-table .col-type{ grid-column:1 / -1;font-size:12.5px;color:var(--ib-ink2) } [data-skin="apple"] .ctrtbl .ctrtbl__job{order:0} [data-skin="apple"] .ctrtbl td:nth-child(3){order:1} [data-skin="apple"] .ctrtbl td:nth-child(6){order:2} [data-skin="apple"] .ctrtbl .ctrtbl__acts{order:3} [data-skin="apple"] .jobs-table .col-stage, [data-skin="apple"] .jobs-table .col-fee{text-align:right} [data-skin="apple"] .jobs-table .col-stage::before, [data-skin="apple"] .jobs-table .col-fee::before{text-align:right} /* The gallery cell's two links become full-width taps rather than a row of small ones. */ [data-skin="apple"] .jobs-table .col-gallery .gal{ display:flex;flex-wrap:wrap;gap:8px;align-items:center } [data-skin="apple"] .jobs-table .col-gallery a{min-height:44px;display:inline-flex;align-items:center} } /* --- My Tasks, and every card header ---------------------------------------- */ @media (max-width:720px){ /* THE LISTS RAIL IS A FIXED 200px BESIDE THE TASKS. At 390px that plus its gap claims 220 of 358 and leaves the tasks 138 — the same shape of bug the booking form had, and now the one that matters most, because List is what My Tasks opens on at this width. The rail goes above the tasks rather than beside them. */ [data-skin="apple"] .tlayout{grid-template-columns:minmax(0,1fr);gap:18px} /* A CARD HEADER IS A TITLE AND A THING ON THE RIGHT, and at this width they do not both fit on one line. Wrapping is the whole fix: the contractor's Files cards were pushing their status pill 42px past the card edge. */ [data-skin="apple"] .dash__hd{flex-wrap:wrap} [data-skin="apple"] .dash__hd .dash__link{margin-left:auto} } /* --- Settings: the crew list ------------------------------------------------ */ @media (max-width:720px){ /* A STATUS PILL THAT IS 246px WIDE IS NOT A PILL. `.team__i` stacks at this width and `.st` is a stretched child of it, so "Active" became a bar the width of the card. Pre-existing, and phone-only: the desktop row is a different shape and is untouched. */ [data-skin="apple"] .team__i .st{justify-self:start;align-self:start;width:fit-content} /* Edit / Password / Deactivate are `.filt` chips in a row action, not in a `.filters` bar, so the sort-chip rule never reached them. The row wraps because of it: three 44px chips are wider than 360px of card, and making them thumb-sized is what made that true. */ [data-skin="apple"] .team__acts{display:flex;flex-wrap:wrap;gap:8px} [data-skin="apple"] .team__acts .filt{min-height:44px;display:inline-flex;align-items:center} } /* --- the Clients register's own cells --------------------------------------- */ @media (max-width:720px){ /* The same card, a different set of facts: who they are, then who to ring, then what they are worth to the studio. `.col-client` already carries the avatar and the trading name, so it needs no label. */ [data-skin="apple"] .clients-table .col-contact::before{content:"Primary contact"} [data-skin="apple"] .clients-table .col-sector::before{content:"Sector"} [data-skin="apple"] .clients-table .col-jobs::before{content:"Active jobs"} [data-skin="apple"] .clients-table .col-ratecard::before{content:"Rate card"} [data-skin="apple"] .clients-table .col-state::before{content:"Status"} [data-skin="apple"] .clients-table .col-client{grid-column:1 / -1;order:0} [data-skin="apple"] .clients-table .col-contact{order:1} [data-skin="apple"] .clients-table .col-state{order:2;text-align:right} [data-skin="apple"] .clients-table .col-state::before{text-align:right} [data-skin="apple"] .clients-table .col-jobs{order:3} [data-skin="apple"] .clients-table .col-ratecard{order:4;text-align:right} [data-skin="apple"] .clients-table .col-ratecard::before{text-align:right} [data-skin="apple"] .clients-table .col-sector{ grid-column:1 / -1;order:5;font-size:12.5px;color:var(--ib-ink2) } [data-skin="apple"] .clients-table .col-client .cl, [data-skin="apple"] .clients-table .col-client .jt{white-space:normal;overflow:visible;text-overflow:clip} } /* --- My Jobs' own cells ----------------------------------------------------- */ @media (max-width:720px){ /* Client, Location and Your role stay dropped — all three are on the Job page one tap away, which is the rule this register already followed. */ [data-skin="apple"] .ctrtbl td:nth-child(3)::before{content:"Shoot"} [data-skin="apple"] .ctrtbl td:nth-child(6)::before{content:"Status"} [data-skin="apple"] .ctrtbl td:nth-child(6){text-align:right} [data-skin="apple"] .ctrtbl td:nth-child(6)::before{text-align:right} [data-skin="apple"] .ctrtbl .ctr__st{white-space:normal} /* The shoot's date and time stack, as they do in the desktop cell. */ [data-skin="apple"] .ctrtbl__d{display:block} [data-skin="apple"] .ctrtbl__t{display:block;color:var(--ib-ink2)} /* Files spans the card and is a full-width tap: it is what a contractor opens this screen to press. */ [data-skin="apple"] .ctrtbl__acts{grid-column:1 / -1} [data-skin="apple"] .ctrtbl__actsin{width:100%} [data-skin="apple"] .ctrtbl__a{flex:1;justify-content:center} } @media (hover:none){ [data-skin="apple"] a.ptcard:hover, [data-skin="apple"] .dreg__tile:hover, [data-skin="apple"] .pthero__plate:hover{transform:none} } @media (prefers-reduced-motion:reduce){ [data-skin="apple"] *, [data-skin="apple"] *::before, [data-skin="apple"] *::after{transition-duration:0ms !important;animation-duration:0ms !important} [data-skin="apple"] .ni:active, [data-skin="apple"] .sb__cta:active, [data-skin="apple"] .stat:active, [data-skin="apple"] .kpi:active, [data-skin="apple"] a.ptcard:hover, [data-skin="apple"] .dreg__tile:hover, [data-skin="apple"] .pthero__plate:hover{transform:none} } @media (max-width:1500px){ [data-skin="apple"] .dash__greet, [data-skin="apple"] .pth__greet{font-size:36px} [data-skin="apple"] .hd__search, [data-skin="apple"] .dash__search{width:200px;flex-basis:200px} } @media (max-width:1300px){ /* The reading and the golden hour stay; only the condition's word goes. */ [data-skin="apple"] .wx__cond{display:none} [data-skin="apple"]:where([data-portal-nav="home"]) .pthome{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 28px} } @media (max-width:1150px){ [data-skin="apple"] .ws.dash, [data-skin="apple"] .ws.dash:has(.dash__mid--solo){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"meta meta" "hdr hdr" "flash flash" "stats stats" "brief brief" "today side" "register side"; grid-template-rows:auto auto auto auto auto auto 1fr } [data-skin="apple"] .dreg{grid-template-columns:repeat(4,minmax(0,1fr))} [data-skin="apple"] .dash__grid>*:first-child{grid-column:auto} [data-skin="apple"] .ptpk{grid-template-columns:repeat(2,minmax(0,1fr))} [data-skin="apple"] .ptfs--addons .ptchips{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1100px){ /* The base sheet narrows the rail to 180px here; the rail's own insets give that width back to the labels so none of them wraps. */ [data-skin="apple"] .sb{padding:20px 10px 16px} [data-skin="apple"] .ni{padding:8px 8px;white-space:nowrap} [data-skin="apple"] .sb .sec{padding:0 8px 6px} [data-skin="apple"] .sb__brand{padding:0 8px 18px} [data-skin="apple"] .sb__cta{margin:0 0 12px} [data-skin="apple"] .sb__theme{padding:0} [data-skin="apple"] .sb__accent{padding:10px 0 0} [data-skin="apple"] .sb__user{padding:14px 0 0} /* One column from here: the galleries lead, Coming up follows. The header rail moves under the greeting rather than crowding it. */ [data-skin="apple"]:where([data-portal-nav="home"]) .pthome{grid-template-columns:minmax(0,1fr)} [data-skin="apple"]:where([data-portal-nav="home"]) .pthero{grid-template-columns:minmax(0,1fr)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail{justify-self:start;justify-content:flex-start;padding-top:0} } @media (max-width:1024px){ [data-skin="apple"] .ws{padding:26px 28px 32px} [data-skin="apple"] .ws.dash, [data-skin="apple"] .ws.dash:has(.dash__mid--solo){ grid-template-columns:minmax(0,1fr); grid-template-areas:"meta" "hdr" "flash" "stats" "today" "side" "register" "brief"; grid-template-rows:auto;padding:26px 28px 32px } [data-skin="apple"] .dash__hdr{flex-wrap:wrap} [data-skin="apple"] .dash__greet, [data-skin="apple"] .pth__greet{white-space:normal} [data-skin="apple"] .dash__hdr-right{width:100%;padding-top:0} [data-skin="apple"] .dash__search{flex:1;width:auto} [data-skin="apple"] .pthero{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .ptpk{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} } @media (max-width:860px){ [data-skin="apple"] .pt__ws{padding:0 16px 40px} [data-skin="apple"] .pttop{padding:16px 16px 0;margin-bottom:0} [data-skin="apple"] .pttop__in{justify-content:flex-start} [data-skin="apple"] .pttop__c{margin-left:auto} [data-skin="apple"][data-portal-nav="home"] .pttop__c{visibility:visible} /* The rail is off-canvas here, so the band's Book a shoot comes back. */ /* 44, not 36: this is the Client's one primary action on a phone. */ [data-skin="apple"] .btn.primary.pttop__cta{ display:inline-flex;min-height:44px;height:auto;padding:0 12px;font-size:12.5px;letter-spacing:0;margin-left:0 } [data-skin="apple"] .pt__menu{border:0;border-radius:7px;background:var(--ib-s1);-webkit-backdrop-filter:none;backdrop-filter:none} [data-skin="apple"] .pt__menu span{background:var(--ib-ink)} [data-skin="apple"] .pthero{margin:20px 0 22px} [data-skin="apple"] .pth__greet{font-size:32px} /* The top band's Book a shoot is the phone's copy; the header's steps aside so the page never shows two. */ [data-skin="apple"]:where([data-portal-nav="home"]) .btn.primary.ptrail__cta{display:none} [data-skin="apple"] .ptgrid{grid-template-columns:repeat(2,minmax(0,1fr))} [data-skin="apple"] .ptnext{grid-template-columns:minmax(0,1fr)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgals{gap:24px 14px} [data-skin="apple"] .ptband h1{font-size:34px} [data-skin="apple"] .ptfs--addons .ptchips{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .ptup__row{flex-wrap:wrap;gap:6px 12px} [data-skin="apple"] .ptup__meta{flex-basis:100%} } @media (max-width:720px){ [data-skin="apple"] .ws{padding:20px 16px 28px} [data-skin="apple"] .dreg{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .ws.dash, [data-skin="apple"] .ws.dash:has(.dash__mid--solo){padding:20px 16px 28px} [data-skin="apple"] .hd h1, [data-skin="apple"] .dash__greet, [data-skin="apple"] .pth__greet, [data-skin="apple"] .ptband h1, [data-skin="apple"] h1.dash__t{font-size:30px} [data-skin="apple"] .dash__stats{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .dash__register .dash__hd{flex-wrap:wrap} [data-skin="apple"] .dash__card{padding:16px} [data-skin="apple"] .dash__t{font-size:19px} [data-skin="apple"] .drawer{width:100%} [data-skin="apple"] .dr__hd{padding:22px 20px 0} [data-skin="apple"] .dr__bd{padding:18px 20px 26px} [data-skin="apple"] .ptgrid{grid-template-columns:minmax(0,1fr)} [data-skin="apple"]:where([data-portal-nav="home"]) .ptgals{grid-template-columns:minmax(0,1fr);gap:26px} [data-skin="apple"]:where([data-portal-nav="home"]) .ptrail__stats{flex-wrap:wrap;row-gap:8px} } /* THE MY TASKS COUNT WRAPS BETWEEN ITS TWO PARTS. "9 open · 2 due this week" is longer than the header's old wording, and unwrapped it pushed View all up to 64px past the card between 1150 and 1400px. It may break at the middle dot, never inside "2 due this week". */ [data-skin="apple"] section[aria-labelledby="dash-tasks"] .dash__hdmeta{white-space:normal;min-width:0;text-align:right} [data-skin="apple"] section[aria-labelledby="dash-tasks"] .dash__hdpart{white-space:nowrap} /* MY TASKS STAYS COMPACT ON A PHONE. The Dashboard draws up to eight rows for the desktop's right column; below 720px only the first four show, as before, and View all is the way to the rest. */ @media (max-width:720px){ [data-skin="apple"] .ws.dash section[aria-labelledby="dash-tasks"] .tsks>.tsk:nth-child(n+5){display:none} } /* AND SEVEN ON A SHORT DESKTOP. Where the Dashboard must not scroll (1281px+ wide, 900px+ tall — admin.css), eight rows need about 926px of height: measured at 1440×900 and 1366×900 with a full Needs attention card, eight ran 26px past the viewport and seven fitted. Below 940px tall the eighth row waits behind View all rather than pushing the page into a scroll. The width floor is 1150, the nearest step on the agreed scale below 1281, so every one-screen desktop is covered; 1150–1280 scrolls anyway and simply shows seven there too. */ @media (min-width:1150px) and (min-height:900px) and (max-height:939px){ [data-skin="apple"] .ws.dash section[aria-labelledby="dash-tasks"] .tsks>.tsk:nth-child(n+8){display:none} } /* --------------------------------------------------------------------------- N. THE CONTRACTOR AREA — designs 18A–18E --------------------------------------------------------------------------- The third audience wears the same skin as the other two: `.dash__*` cards, `.stat` KPIs, `.shot` rows, `.tsk` tasks, `.dreg` tiles and the shared rail are all reused unchanged. What follows is only the shapes the Contractor designs add — the Studio Hill note, the register table, the Job page, the file cards, and the phone's top band and bottom bar. Every selector is gated, every colour is a token, and nothing here restates a measurement the JavaScript reads. --------------------------------------------------------------------------- */ /* --- The rail's contextual action, with its second line --------------------- */ [data-skin="apple"] .sb__cta--sub{ display:flex;flex-direction:column;align-items:flex-start;gap:2px; height:auto;padding:10px 12px;text-align:left;line-height:1.25 } [data-skin="apple"] .sb__cta--sub .sb__ctat{font-weight:600} [data-skin="apple"] .sb__cta--sub .sb__ctas{ font-size:11.5px;color:var(--ib-ink2);font-weight:450;letter-spacing:0 } /* --- From Studio Hill ------------------------------------------------------- A quiet band rather than a card: it is a note, not a module, and giving it the full card treatment made it compete with Today. One surface, a hairline, the sender at the left and the clear-date at the right. --------------------------------------------------------------------------- */ [data-skin="apple"] .ctr__note{ display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto; gap:8px 24px;align-items:baseline; background:var(--ib-s1);border:.5px solid var(--ib-line-soft);border-radius:11px; padding:16px 20px;margin:0 0 18px } [data-skin="apple"] .ctr__noteh{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em} [data-skin="apple"] .ctr__notemeta{font-size:12px;color:var(--ib-ink2);margin:2px 0 0} [data-skin="apple"] .ctr__notebody{font-size:14.5px;line-height:1.5;margin:0} [data-skin="apple"] .ctr__noteexp{font-size:12px;color:var(--ib-ink3);white-space:nowrap} /* The contractor's own header search. The field's appearance is `hd__search`'s, shared with every other header in the product; this is only the width it takes in the header band — the same two declarations `dash__search` carries. See the template for why it is not `dash__search`. */ [data-skin="apple"] .ctr__search{flex:0 1 260px;min-width:170px} /* --- The dashboard's clock line --------------------------------------------- */ [data-skin="apple"] .ctr__when{ font-size:12.5px;color:var(--ib-ink2);margin:0 0 2px;letter-spacing:.01em } /* --- The dashboard's own arrangement — 18A ---------------------------------- `.ws.dash` is the ADMIN Dashboard's named-areas grid and its template is 11D's exact children. The Contractor Dashboard adds a Studio Hill note and gives its three panels equal widths, so it is a plain vertical stack with one inner grid rather than a fight with somebody else's areas. Every component inside it — the cards, the stats, the shoot rows, the tiles — is the shared one. --------------------------------------------------------------------------- */ [data-skin="apple"] .ctrdash{display:block;padding:32px 40px 36px;color:var(--ib-ink)} /* THE ADMIN'S AREA NAMES ARE NOT THIS PAGE'S. `.dash__today`, `.dash__register` and the first panel of `.dash__grid` carry `grid-area` names belonging to 11D's template; inside this stack they would place nothing and, in the inner grid, would place the wrong thing. Reset once, here, rather than by renaming components the Admin Dashboard also uses. */ [data-skin="apple"] .ctrdash .dash__today, [data-skin="apple"] .ctrdash .dash__register, [data-skin="apple"] .ctrdash .dash__grid>section{grid-area:auto} [data-skin="apple"] .ctrdash .dash__hdr{align-items:flex-start;margin:0} /* THE ROW FITS WHAT IT HAS. A contractor without the Tasks capability gets three KPIs, not four with a hole where the fourth would be — and one without upload capabilities gets two. `auto-fit` is what lets the same markup be honest at every capability shape. The minimum is a real width, not `minmax(0,1fr)`. With a zero minimum the browser is asked for an unbounded track list and produces one — measured at fifty-two tracks for four cards. They collapse, so it renders correctly today; it renders correctly by accident, and the first rule that gives those tracks any size at all turns it into a visible break. */ [data-skin="apple"] .ctrdash .dash__stats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:18px;gap:14px } [data-skin="apple"] .ctrdash .dash__register{margin-top:18px} /* --- Three equal panels, not the admin's 5:4:3 ------------------------------ 18A gives Morning brief, Today and My tasks the same width. The admin's lower grid is weighted because its brief carries prose; this one carries five short lines. --------------------------------------------------------------------------- */ [data-skin="apple"] .ctr__grid{ /* Three when there are three, two when My tasks is not this contractor's. Same reasoning as the stat row above. */ grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;margin-top:18px } [data-skin="apple"] .ctr__grid>section{margin-top:0} /* --- A brief line's label ---------------------------------------------------- */ [data-skin="apple"] .brf__lbl{font-weight:600} /* --- The contractor status pill --------------------------------------------- Six states, and only one treatment decision: whether it is the contractor's move. Everything else is the neutral pill the product already uses, because a register where six things are coloured is a register where nothing is. `--do` is the lime OUTLINE, never a fill. --------------------------------------------------------------------------- */ [data-skin="apple"] .ctr__st{ background:var(--ib-s1);color:var(--ib-ink2);border:.5px solid var(--ib-line-soft) } [data-skin="apple"] .ctr__st--do{ background:var(--ib-lime-pill);color:var(--ib-lime-pill-ink);border-color:var(--ib-accent-border) } /* --- My Jobs, the register table -------------------------------------------- THIS IS 18B'S OWN GEOMETRY, not the Job Register's. The contractor table borrows `jobs-table` for its row and cell treatment — the hairlines, the padding, the truncation rule — and then sets its own seven columns, because it has seven and the operator's register has seven different ones. The admin's `.col-*` percentages are untouched and unreachable from here: this table uses none of those classes. --------------------------------------------------------------------------- */ /* The desktop column split. Below 720 the rows are cards and none of this applies — see section R4. */ [data-skin="apple"] .ctrtbl th:nth-child(1), [data-skin="apple"] .ctrtbl td:nth-child(1){width:26%} [data-skin="apple"] .ctrtbl th:nth-child(2), [data-skin="apple"] .ctrtbl td:nth-child(2){width:11%} [data-skin="apple"] .ctrtbl th:nth-child(3), [data-skin="apple"] .ctrtbl td:nth-child(3){width:11%} [data-skin="apple"] .ctrtbl th:nth-child(4), [data-skin="apple"] .ctrtbl td:nth-child(4){width:15%} [data-skin="apple"] .ctrtbl th:nth-child(5), [data-skin="apple"] .ctrtbl td:nth-child(5){width:11%} [data-skin="apple"] .ctrtbl th:nth-child(6), [data-skin="apple"] .ctrtbl td:nth-child(6){width:12%} [data-skin="apple"] .ctrtbl th:nth-child(7), [data-skin="apple"] .ctrtbl td:nth-child(7){width:14%} [data-skin="apple"] .ctrtbl .ctrtbl__job{padding-left:0} [data-skin="apple"] .ctrtbl__jl{ display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none } [data-skin="apple"] .ctrtbl__jt{display:flex;flex-direction:column;min-width:0;gap:1px} [data-skin="apple"] .ctrtbl__jn{font-weight:600;overflow:hidden;text-overflow:ellipsis} [data-skin="apple"] .ctrtbl__jid{font-size:12px;color:var(--ib-ink2)} [data-skin="apple"] .ctrtbl__d{display:block} [data-skin="apple"] .ctrtbl__t{display:block;font-size:12px;color:var(--ib-ink2)} [data-skin="apple"] .ctrtbl__actsin{display:flex;gap:8px;justify-content:flex-end} [data-skin="apple"] .ctrtbl__a{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px; border:.5px solid var(--ib-line);color:var(--ib-ink2);font-size:12.5px;text-decoration:none } [data-skin="apple"] .ctrtbl__a:hover{background:var(--ib-hover);color:var(--ib-ink)} [data-skin="apple"] .ctrtbl__a svg{width:14px;height:14px} /* --- My Jobs in Grid --------------------------------------------------------- The cards themselves are `.dreg__tile` — the Dashboard's own job card, reused rather than reimplemented, so the two surfaces cannot drift into two card languages. Everything below is the GRID and the meta strip under each tile; no rule here restyles the tile. Three across on a wide screen, two when the rail has taken its share, one on a phone. The counts change at the existing breakpoints — see the media blocks further down — so this introduces no new step to the scale. */ [data-skin="apple"] .ctrgrid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px } /* The card is the positioning context for the stretched link below it. */ [data-skin="apple"] .ctrgrid__c{position:relative;display:flex;flex-direction:column;min-width:0} /* WHOLE-CARD CLICK TARGET. The pseudo-element covers the card, so a press anywhere that is not one of the raised actions opens the Job — without nesting an `` inside an ``, which is invalid and recovers badly. */ [data-skin="apple"] .ctrgrid__l::after{content:"";position:absolute;inset:0;z-index:0} /* GRID OR LIST. Its own flex row so the pair stays a pair: as one more item in `.filters`, the two links wrapped against each other at the right-hand edge and read as two separate controls stacked vertically. */ [data-skin="apple"] .ctrview{display:flex;flex-wrap:nowrap;gap:6px;flex-shrink:0} [data-skin="apple"] .ctrgrid__meta{ display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px; padding:9px 2px 0;min-width:0 } /* The client owns the first line and the shoot owns the second, in every card, so a column of cards reads as a column rather than as five different arrangements of the same four facts. */ [data-skin="apple"] .ctrgrid__client{ flex-basis:100%;font-weight:600;font-size:13px;color:var(--ib-ink);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap } [data-skin="apple"] .ctrgrid__role{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap } [data-skin="apple"] .ctrgrid__role::before{content:"· ";color:var(--ib-ink3)} [data-skin="apple"] .ctrgrid__when, [data-skin="apple"] .ctrgrid__role{font-size:12px;color:var(--ib-ink2)} /* The actions ride above the stretched link, or they would not be clickable. */ [data-skin="apple"] .ctrgrid__acts{ position:relative;z-index:1;display:flex;gap:6px;flex-basis:100%;margin-top:8px } /* --- One Job: breadcrumb, header, facts, tabs -------------------------------- */ [data-skin="apple"] .ctrjob__crumb{ display:flex;gap:8px;align-items:center;font-size:12px; letter-spacing:.06em;text-transform:uppercase;color:var(--ib-ink3);margin:0 0 10px } [data-skin="apple"] .ctrjob__crumb a{color:var(--ib-ink2);text-decoration:none} [data-skin="apple"] .ctrjob__crumb a:hover{color:var(--ib-ink)} [data-skin="apple"] .ctrjob__hd{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap } [data-skin="apple"] .ctrjob__t{font-size:34px;letter-spacing:-.02em;margin:0} [data-skin="apple"] .ctrjob__facts{ display:flex;flex-wrap:wrap;gap:12px 40px;margin:18px 0 0;padding:0 } [data-skin="apple"] .ctrjob__facts dt{ font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ib-ink3);margin:0 0 4px } [data-skin="apple"] .ctrjob__facts dd{margin:0;font-size:14px} [data-skin="apple"] .ctrjob__tabs{ display:flex;gap:20px;border-bottom:.5px solid var(--ib-line);margin:20px 0 20px } /* Overview, Brief and Files are the three most-pressed controls on the phone and they were a 29px-tall row of text. The tab strip is how a contractor moves around a job on site, one-handed. */ [data-skin="apple"] .ctrjob__tabs .tab{display:flex;align-items:center;min-height:44px} [data-skin="apple"] .ctrjob__list{margin:0;padding:0;display:grid;gap:10px} [data-skin="apple"] .ctrjob__list>div{ display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:16px;align-items:baseline } [data-skin="apple"] .ctrjob__list dt{font-size:12.5px;color:var(--ib-ink2);margin:0} [data-skin="apple"] .ctrjob__list dd{margin:0;font-size:14px} [data-skin="apple"] .ctrjob__body{font-size:14.5px;line-height:1.55;margin:0} [data-skin="apple"] .ctrjob__note{ margin:18px 0 0;padding:14px 16px;background:var(--ib-s1);border-radius:8px } [data-skin="apple"] .ctrjob__note h3{font-size:13px;margin:0 0 6px;font-weight:600} [data-skin="apple"] .ctrjob__note p{margin:0;font-size:14px;line-height:1.5} [data-skin="apple"] .ctrjob__aside{ margin:16px 0 0;font-size:12.5px;color:var(--ib-ink2) } /* --- The file cards ---------------------------------------------------------- */ [data-skin="apple"] .ctrfile__lead{font-size:14.5px;margin:0 0 8px} [data-skin="apple"] .ctrfile__how{font-size:13px;color:var(--ib-ink2);line-height:1.5;margin:0 0 16px} [data-skin="apple"] .ctrfile__acts{display:flex;flex-wrap:wrap;gap:10px} /* 44px is the touch target this whole feature exists on a phone for. Written as `.btn.ctrfile__btn` because the skin's own `.btn.primary` sets a 36px height at the same specificity — a bare `.ctrfile__btn` loses to it and the button silently stays small, which is the one thing this rule exists to prevent. */ [data-skin="apple"] .btn.ctrfile__btn{min-height:44px;height:auto;padding:0 18px} /* THE PRIMARY UPLOAD ACTION IS BIGGER THAN THE 44px FLOOR. It is the one thing a contractor comes to this page to press, usually on a phone, often outdoors, sometimes holding a camera — so it gets 48px and real horizontal room rather than the minimum that merely passes. `.ctrfile__go` is also an `` now, which the base `.btn` does not centre on its own, hence the flex. */ [data-skin="apple"] .btn.ctrfile__go{ min-height:48px;padding:0 24px; display:inline-flex;align-items:center;justify-content:center;gap:8px; text-decoration:none } /* The outbound mark, one step quieter than the label it follows. */ [data-skin="apple"] .ctrfile__ext{font-size:15px;line-height:1;opacity:.75} /* UPLOAD COMPLETE sits below the upload actions with its own breathing room: it is a different kind of step — a statement, not a way to send files. */ [data-skin="apple"] .ctrfile__done{margin-top:18px;padding-top:16px;border-top:.5px solid var(--ib-line)} /* RETOUCH NOTES ON THE CONTRACTOR FILES CARD. The admin form's own markup and field rules; these place it inside the contractor card, which is not an `.fcard`, so the drawer's `.fcard .fld` surface does not reach it. */ [data-skin="apple"] .ctrnotes{margin-top:18px;padding:16px;display:flex;flex-direction:column;gap:12px} [data-skin="apple"] .ctrnotes__t{color:var(--ib-ink2)} [data-skin="apple"] .ctrnotes .fld{background:var(--ib-s2);min-width:0;width:100%;box-sizing:border-box} [data-skin="apple"] .ctrnotes .rnotes__text{resize:vertical} /* The calm state after confirmation. Quiet ink, one tick, no action. */ [data-skin="apple"] .ctrfile__received{ display:flex;align-items:flex-start;gap:8px;margin:18px 0 0;padding-top:16px; border-top:.5px solid var(--ib-line);font-size:13.5px;line-height:1.45;color:var(--ib-ink2) } [data-skin="apple"] .ctrfile__list{list-style:none;margin:0;padding:0;display:grid;gap:10px} [data-skin="apple"] .ctrfile__list li{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center; padding:10px 12px;background:var(--ib-s1);border-radius:8px } [data-skin="apple"] .ctrfile__ok svg{width:16px;height:16px;display:block} [data-skin="apple"] .ctrfile__n{font-size:14px;overflow:hidden;text-overflow:ellipsis} [data-skin="apple"] .ctrfile__m{font-size:12px;color:var(--ib-ink2);white-space:nowrap} /* --- Settings: the contractor sub-forms --------------------------------------- */ [data-skin="apple"] .teamform__sub{ border-top:.5px solid var(--ib-line-soft);margin-top:22px;padding-top:20px } [data-skin="apple"] .teamform__subh{font-size:15px;font-weight:600;margin:0 0 6px} [data-skin="apple"] .teamform__note{font-size:12.5px;color:var(--ib-ink2);line-height:1.5;margin:0 0 14px} [data-skin="apple"] .teamform__warn{font-size:12.5px;color:var(--ib-red);margin:12px 0 0} [data-skin="apple"] .teamform__msg{display:block;margin:0 0 12px} [data-skin="apple"] .teamform__msg textarea{width:100%;min-height:76px;resize:vertical} /* Two columns of switches rather than five stacked rows, which is a lot of vertical travel for a form somebody opens to tick one box. */ [data-skin="apple"] .teamform__caps{ border:0;margin:14px 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px } [data-skin="apple"] .teamform__cap{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start } [data-skin="apple"] .teamform__cap input{grid-row:1 / span 2;margin-top:2px} [data-skin="apple"] .teamform__capt{font-size:13.5px;font-weight:500} [data-skin="apple"] .teamform__capn{font-size:12px;color:var(--ib-ink2);line-height:1.45} /* --- The phone's top band and bottom bar — 18D -------------------------------- Both are in the document at every width and both are hidden above the breakpoint. No script decides whether they exist, so the phone layout works with JavaScript off. --------------------------------------------------------------------------- */ [data-skin="apple"] .ctrtop{display:none} /* The phone bar, worn by the Client and the Contractor. One component, two audiences — a second bar for the second audience is exactly the "second mobile system" this work exists to avoid. */ [data-skin="apple"] .ctrbar, [data-skin="apple"] .ptbar{display:none} @media (max-width:860px){ /* Two across. Declared here, AFTER the base rule above: the two sit at equal specificity, so an override written earlier in the sheet never applies however narrow the window gets. */ [data-skin="apple"] .ctrgrid{grid-template-columns:repeat(2,minmax(0,1fr))} [data-skin="apple"] .ctr__note{grid-template-columns:minmax(0,1fr);gap:6px} [data-skin="apple"] .ctr__grid{grid-template-columns:minmax(0,1fr)} /* 18D'S PRIORITY ORDER: From Studio Hill, Today, Morning brief, My tasks, My jobs. The note and the band are already in that position in the markup; the middle two swap here. This is the one place in the Contractor area that uses `order`, and it is a deliberate trade rather than a shortcut: the alternative is two copies of the same two panels, one hidden at each breakpoint, which is worse for a screen reader than a reading order that differs from the visual order on a stacked phone layout. Both panels are plain landmarks with their own headings, so either order is navigable. */ [data-skin="apple"] .ctr__grid>.dash__today{order:1} [data-skin="apple"] .ctr__grid>section{order:2} /* THE PHONE HAS NO HEADER SEARCH. 18D does not draw one: the bottom bar is one tap from My Jobs, which carries the search field the design puts there. A second one over the greeting is furniture at 375px. */ [data-skin="apple"] .ctr__search{display:none} /* Two KPIs across rather than four. At 375px a four-column row clips "Upcoming jobs" into nonsense. */ [data-skin="apple"] .ctrdash .dash__stats{grid-template-columns:repeat(2,minmax(0,1fr))} [data-skin="apple"] .ctrdash{padding:20px 16px 28px} [data-skin="apple"] .ctrjob__t{font-size:28px} [data-skin="apple"] .ctrjob__facts{gap:12px 28px} [data-skin="apple"] .ctrtop{ display:flex;align-items:center;gap:12px; padding:14px 16px;border-bottom:.5px solid var(--ib-line-soft);background:var(--ib-s2) } [data-skin="apple"] .ctrtop__brand{display:flex;flex-direction:column;text-decoration:none;color:inherit} /* 44, like every other control on a phone. It was 38. */ [data-skin="apple"] .ctrtop__cta{margin-left:auto;min-height:44px;padding:0 14px;font-size:12.5px} [data-skin="apple"] .ctrtop__av{margin-left:4px} /* The Contractor area carries its own band, so the Portal's is not drawn. */ [data-skin="apple"] .app--ctr .pttop{display:none} [data-skin="apple"] .app--ctr .ctrtop .pt__menu{position:static;margin:0} [data-skin="apple"] .ctrbar, [data-skin="apple"] .ptbar{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr; position:sticky;bottom:0; border-top:.5px solid var(--ib-line);background:var(--ib-s2); padding:6px 4px calc(6px + env(safe-area-inset-bottom)) } [data-skin="apple"] .ctrbar__i, [data-skin="apple"] .ptbar__i{ display:flex;flex-direction:column;align-items:center;gap:4px; /* 44px is the minimum a thumb can hit on a building site. */ min-height:44px;justify-content:center; font-size:11.5px;color:var(--ib-ink2);text-decoration:none } [data-skin="apple"] .ctrbar__i.on, [data-skin="apple"] .ptbar__i.on{color:var(--ib-ink);font-weight:600} [data-skin="apple"] .ctrbar__dot, [data-skin="apple"] .ptbar__dot{ width:8px;height:8px;border-radius:50%;background:transparent } /* The current row's dot is the same lime disc the rail's current item uses. */ [data-skin="apple"] .ctrbar__i.on .ctrbar__dot, [data-skin="apple"] .ptbar__i.on .ptbar__dot{background:var(--ib-accent)} /* Room for the bar, so the last row of a page is never under it. */ [data-skin="apple"] .app--ctr .pt__ws, [data-skin="apple"] .app--pt .pt__ws{padding-bottom:24px} } @media (max-width:720px){ /* The notes fields are touch targets on a phone: 44px, one per line. Declared after the base `.ctrnotes` rules so they win. */ [data-skin="apple"] .ctrnotes .fld{min-height:44px;font-size:16px} [data-skin="apple"] .ctrnotes .rnotes__row{flex-direction:column;gap:12px} /* Size to content once the row is a column. The base `.fileadd__role` has `flex:1 1 110px` (and `.rnotes__wide` 240px) — a WIDTH basis in a row, which becomes a minimum HEIGHT in a column and left a tall empty gap under every field. */ [data-skin="apple"] .ctrnotes .rnotes__row .fileadd__role{flex:0 0 auto} [data-skin="apple"] .ctrnotes .fileadd__actions .btn{width:100%} /* One column on a phone, like the dashboard band beside it. */ [data-skin="apple"] .ctrgrid{grid-template-columns:minmax(0,1fr)} /* MY JOBS ON A PHONE: FOUR COLUMNS, NOT SEVEN. ----------------------------------------------------------------------- Seven columns at 375px is 40px each, which is not a table, it is a rumour of one. Client, Location and Your role are dropped because all three are on the Job page one tap away, and what is left answers the question a contractor opens this screen to ask: which job, when, and what do I have to do about it. The columns are removed rather than scrolled: a horizontally scrolling table inside a vertically scrolling page is a trap on a touch screen, and the page itself must never scroll sideways. THE THREE DROPPED COLUMNS STILL DROP; the four that remain are no longer columns at all. Below 720 this register is the shared row-card in section R4, so the percentages that used to sit here are gone and the desktop split above is switched off — a cell that is a grid item and also `width:36%` forces a 36% track, which is how a project title came to wrap one character per line. */ [data-skin="apple"] .ctrtbl th:nth-child(2), [data-skin="apple"] .ctrtbl td:nth-child(2), [data-skin="apple"] .ctrtbl th:nth-child(4), [data-skin="apple"] .ctrtbl td:nth-child(4), [data-skin="apple"] .ctrtbl th:nth-child(5), [data-skin="apple"] .ctrtbl td:nth-child(5){display:none} /* `:nth-child(n)` matches every cell and costs exactly what the desktop split costs. A plainer `.ctrtbl td` loses to `.ctrtbl td:nth-child(1)` — `:nth-child` is class-level — and changes nothing at all. The selector deliberately does not name `.jobs-table`: that would drag this rule into the guard that forbids the skin setting column widths, and the guard is right to be strict even about a width that un-sets one. */ [data-skin="apple"] .ctrtbl td:nth-child(n){width:auto} /* ONE ACTION, NOT TWO — IN THE TABLE. The row's title is already a link to the Job, and Brief is a tab on the page it opens; two 60px pills in a 66px cell clipped the second one to nothing. Files stays because it is the one a contractor comes here to press. SCOPED TO `.ctrtbl` because Grid reuses `.ctrtbl__a` for the same two actions and has none of the constraint that made this necessary: a card is the full width of the column, so both pills fit with room to spare. The rule only ever matched inside the table anyway, so narrowing it changes nothing about the list on a phone. Same for the icons below. */ [data-skin="apple"] .ctrtbl .ctrtbl__a[href*="tab=brief"]{display:none} [data-skin="apple"] .ctrtbl .jthumb{display:none} [data-skin="apple"] .ctrtbl__a{padding:8px 8px;min-height:44px} [data-skin="apple"] .ctrtbl .ctrtbl__a svg{display:none} [data-skin="apple"] .ctrtbl__actsin{justify-content:flex-start;gap:4px} [data-skin="apple"] .teamform__caps{grid-template-columns:minmax(0,1fr)} [data-skin="apple"] .ctrjob__list>div{grid-template-columns:minmax(0,1fr);gap:2px} [data-skin="apple"] .ctrfile__list li{grid-template-columns:auto minmax(0,1fr)} [data-skin="apple"] .ctrfile__m{grid-column:2;white-space:normal} [data-skin="apple"] .ctrfile__acts{flex-direction:column;align-items:stretch} [data-skin="apple"] .ctrfile__btn{width:100%} } /* My Jobs' phone column proportions used to live here. They are gone: below 720 the register is not a table any more, it is the shared row-card in section R4, and a width for a column that no longer exists is dead code that reads like live code. */ /* --------------------------------------------------------------------------- NOTIFICATIONS, on the client's Account screen. Type and hairlines, like everything else on that page. No card, no banner and no colour of its own: the control is a plain secondary button, and the category switches are the browser's own checkboxes at the product's sizes. The accent is not used here at all — nothing on this screen is the primary action of the page. --------------------------------------------------------------------------- */ [data-skin="apple"] .ptpush{margin:32px 0 0;padding:24px 0 0;border-top:1px solid var(--ib-line-soft)} [data-skin="apple"] .ptpush__t{margin:0 0 8px} [data-skin="apple"] .ptpush__lead{margin:0 0 14px;font:400 13.5px/1.55 var(--ib-font);color:var(--ib-ink2);max-width:62ch} [data-skin="apple"] .ptpush__status{margin:0 0 12px;font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2);max-width:62ch} [data-skin="apple"] .ptpush__status:empty{display:none} [data-skin="apple"] .ptpush__btn{min-height:36px} /* The iPhone instruction: a quiet block, not a warning. */ [data-skin="apple"] .ptpush__ios{margin:0 0 14px;padding:14px 16px;border-radius:11px;background:var(--ib-s1)} [data-skin="apple"] .ptpush__ios .ptpush__lead{margin:0 0 8px;color:var(--ib-ink)} [data-skin="apple"] .ptpush__steps{margin:0;padding-left:18px;font:400 13px/1.7 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .ptpush__cats{display:flex;flex-direction:column;gap:2px;margin:18px 0 0} [data-skin="apple"] .ptpush__cat{ display:flex;align-items:flex-start;gap:11px;padding:11px 2px; border-top:1px solid var(--ib-line-soft);cursor:pointer } [data-skin="apple"] .ptpush__cat input{margin:2px 0 0;width:16px;height:16px;flex:none;cursor:pointer} [data-skin="apple"] .ptpush__catb{display:flex;flex-direction:column;gap:2px;min-width:0} [data-skin="apple"] .ptpush__catl{font:600 13.5px/1.35 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .ptpush__catd{font:400 12.5px/1.45 var(--ib-font);color:var(--ib-ink2)} @media (max-width:720px){ [data-skin="apple"] .ptpush{margin-top:26px;padding-top:20px} /* A comfortable target on a phone, where this is most likely to be used. */ [data-skin="apple"] .ptpush__btn{width:100%;min-height:44px} [data-skin="apple"] .ptpush__cat{padding:13px 2px} } /* The other devices: a sentence with a quiet action in it, not a second button competing with the one above. Deliberately typographic — switching off hardware you are not holding should take a moment's reading. */ [data-skin="apple"] .ptpush__all{ display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin:16px 0 0; font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2) } [data-skin="apple"] .ptpush__alllink{ padding:0;border:0;background:none;cursor:pointer; font:400 13px/1.5 var(--ib-font);color:var(--ib-ink2); text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px } [data-skin="apple"] .ptpush__alllink:hover{color:var(--ib-ink)} [data-skin="apple"] .ptpush__alllink:focus-visible{outline:2px solid var(--ib-ink);outline-offset:3px;border-radius:4px} [data-skin="apple"] .ptpush__alllink[disabled]{opacity:.5;cursor:default} /* HIDDEN HAS TO MEAN HIDDEN. `[hidden]` is only `display:none` in the browser's own stylesheet, so ANY author rule that sets `display` silently defeats it — and three rules here do: the categories and the all-devices row are flex, and `.btn` is inline-flex. The script sets `el.hidden` to switch these states, so without this the iPhone guidance appeared alongside the button it replaces, and the category switches showed while notifications were off. Scoped to the section, and `!important` because `.btn` is a component rule that has every right to set its own display. */ [data-skin="apple"] .ptpush [hidden]{display:none !important} /* THE BOOKING QUEUE'S NOTIFICATIONS DISCLOSURE — Task: admin phase. Its own classes, deliberately: everything above styles the CLIENT Account screen's section, which is drawn open on a page of its own and must not change. This is the same controls folded into one quiet line above a queue somebody reads every morning, so only the shell is new — the body keeps `.ptpush` and every child rule above it comes with it, including the `[hidden]` guard. */ [data-skin="apple"] .brqpush{margin:0 0 4px;border-bottom:1px solid var(--ib-line-soft)} [data-skin="apple"] .brqpush__sum{ display:flex;align-items:baseline;gap:10px;padding:12px 2px; list-style:none;cursor:pointer;border-radius:8px; transition:background 150ms ease } /* Safari draws its own triangle through `::-webkit-details-marker`; `list-style` alone does not remove it. */ [data-skin="apple"] .brqpush__sum::-webkit-details-marker{display:none} [data-skin="apple"] .brqpush__sum:hover{background:var(--ib-hover-soft)} [data-skin="apple"] .brqpush__sum:focus-visible{outline:2px solid var(--ib-accent);outline-offset:2px} [data-skin="apple"] .brqpush__name{font:600 13px/1.2 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .brqpush__state{font:400 13px/1.2 var(--ib-font);color:var(--ib-ink3)} /* A chevron built from the summary itself, so no icon has to be threaded into a template that has no icon slot. It turns on open. */ [data-skin="apple"] .brqpush__sum::after{ content:"";margin-left:auto;width:7px;height:7px; border-right:1.5px solid var(--ib-ink3);border-bottom:1.5px solid var(--ib-ink3); transform:rotate(45deg);transform-origin:center; transition:transform 160ms var(--ib-ease) } [data-skin="apple"] .brqpush[open] .brqpush__sum::after{transform:rotate(225deg)} /* The body re-uses `.ptpush`, whose own rule opens with a 32px margin and a border meant to separate it from a page of content above it. Inside a disclosure the summary is that separator. */ [data-skin="apple"] .brqpush__body{margin:0;padding:4px 2px 18px;border-top:0} @media (max-width:720px){ /* The same 44px the button above it takes on a phone, and for the same reason — this row is the only way to reach the controls, so it has to be comfortably pressable rather than merely hittable. */ [data-skin="apple"] .brqpush__sum{padding:14px 2px;min-height:44px;align-items:center} } /* =========================================================================== STUDIO HILL HELP — the client's on-demand assistant. --------------------------------------------------------------------------- A drawer over the right edge on a desk, a full-height sheet on a phone, and nothing at all until a client asks for it: the is closed and empty on every portal page, so no screen gains a widget and the Dashboard is unchanged. Built from the drawer this skin already has (`.drawer`: page ground, `--ib-shadow-drawer`, the blurred `--ib-scrim`) so it is recognisably the same product, and every colour is a token — light and dark follow the theme with no rule of their own. GENERAL SANS FOR THE CONTROLS, through `--ib-font-ui` (declared on the gate above). AGENTS.md §19 names it for buttons, toggles and controls; admin.css already declares the family, so nothing new loads. Reading text stays in the skin's `--ib-font`, like every other answer the product gives a client. =========================================================================== */ [data-skin="apple"] .phelp{color:var(--ib-ink)} /* --- The drawer itself ---------------------------------------------------- */ /* The UA gives a centred box, a border and a max size; all three are undone so the drawer can own the right edge. */ [data-skin="apple"] .phelp--drawer{ position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0; width:min(440px,100vw);max-width:100vw;height:100%;max-height:100%; background:var(--ib-bg);color:var(--ib-ink); box-shadow:var(--ib-shadow-drawer);overflow:hidden } [data-skin="apple"] .phelp--drawer:not([open]){display:none} [data-skin="apple"] .phelp--drawer[open]{animation:phelp-in 280ms var(--ib-ease)} /* The backdrop. Literal colours rather than `--ib-scrim`: ::backdrop does not inherit custom properties in every engine yet, and a drawer with no scrim is a drawer that looks like it failed to open. */ [data-skin="apple"] .phelp--drawer::backdrop{ background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px) } html[data-theme="dark"] [data-skin="apple"] .phelp--drawer::backdrop{background:rgba(0,0,0,.55)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) [data-skin="apple"] .phelp--drawer::backdrop{background:rgba(0,0,0,.55)} } /* A hairline where the drawer meets a black page, which has no shadow to separate them. */ html[data-theme="dark"] [data-skin="apple"] .phelp--drawer{border-left:1px solid var(--ib-line)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) [data-skin="apple"] .phelp--drawer{border-left:1px solid var(--ib-line)} } /* `phelp-in` and `phelp-up` are declared in admin.css: every selector in this sheet is gated by [data-skin], and a keyframe's `from`/`to` cannot be. */ [data-skin="apple"] .phelp__sheet{display:flex;flex-direction:column;height:100%;min-height:0} [data-skin="apple"] .phelp__hd{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:20px 20px 14px 24px;border-bottom:1px solid var(--ib-line-soft) } [data-skin="apple"] .phelp__heading{margin:0;font:600 19px/1.2 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink)} [data-skin="apple"] .phelp__close{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:36px;height:36px;padding:0;border:0;border-radius:999px; background:var(--ib-s1);color:var(--ib-ink);cursor:pointer; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .phelp__close:hover{background:var(--ib-hover)} [data-skin="apple"] .phelp__close:active{transform:var(--ib-press)} [data-skin="apple"] .phelp__close .icon{width:16px;height:16px;stroke-width:2} /* Only the body scrolls, and a flick at its end does not scroll the page underneath — which is inert, but still moves on some touch devices. */ [data-skin="apple"] .phelp--drawer .phelp__body{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:18px 24px 32px } [data-skin="apple"] .phelp__body[aria-busy="true"]{opacity:.55;transition:opacity 120ms ease} [data-skin="apple"] .phelp__loading{margin:8px 0 0;font:400 14px/1.5 var(--ib-font);color:var(--ib-ink2)} /* --- Ask ------------------------------------------------------------------ */ [data-skin="apple"] .phelp__ask{margin:0 0 6px} [data-skin="apple"] .phelp__askrow{display:flex;gap:8px;align-items:stretch} [data-skin="apple"] .phelp__input, [data-skin="apple"] .phelp__textarea{ flex:1 1 auto;min-width:0;box-sizing:border-box; padding:0 14px;min-height:44px;border:1px solid transparent;border-radius:12px; background:var(--ib-s1);color:var(--ib-ink); font:400 15px/1.4 var(--ib-font-ui); transition:border-color 150ms ease,background 150ms ease } [data-skin="apple"] .phelp__textarea{width:100%;padding:12px 14px;min-height:150px;resize:vertical} [data-skin="apple"] .phelp__input::placeholder, [data-skin="apple"] .phelp__textarea::placeholder{color:var(--ib-ink3)} [data-skin="apple"] .phelp__input:focus, [data-skin="apple"] .phelp__textarea:focus{outline:none;border-color:var(--ib-ink);background:var(--ib-bg)} /* A search input's own clear button and decoration fight the design; the field is cleared like any other. */ [data-skin="apple"] .phelp__input::-webkit-search-decoration, [data-skin="apple"] .phelp__input::-webkit-search-cancel-button{-webkit-appearance:none} /* --- The controls: General Sans ------------------------------------------ */ [data-skin="apple"] .phelp__go, [data-skin="apple"] .phelp__cta{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:44px;padding:0 18px;border:2px solid var(--ib-accent);border-radius:12px; background:var(--ib-s2);color:var(--ib-ink);text-decoration:none;cursor:pointer; font:600 13.5px/1 var(--ib-font-ui);letter-spacing:0; transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .phelp__go{flex:0 0 auto} [data-skin="apple"] .phelp__go:hover, [data-skin="apple"] .phelp__cta:hover{background:var(--ib-accent-soft)} [data-skin="apple"] .phelp__ghost{ display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:0 16px;border:0;border-radius:12px; background:var(--ib-s1);color:var(--ib-ink);text-decoration:none;cursor:pointer; font:500 13.5px/1 var(--ib-font-ui); transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .phelp__ghost:hover{background:var(--ib-hover)} [data-skin="apple"] .phelp__go:active, [data-skin="apple"] .phelp__cta:active, [data-skin="apple"] .phelp__ghost:active{transform:var(--ib-press)} [data-skin="apple"] .phelp__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} [data-skin="apple"] .phelp__chip{ display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;box-sizing:border-box; border-radius:999px;background:var(--ib-s1);color:var(--ib-ink);text-decoration:none; font:500 13.5px/1.3 var(--ib-font-ui); transition:background 150ms ease,transform 160ms var(--ib-ease) } [data-skin="apple"] .phelp__chip:hover{background:var(--ib-hover)} [data-skin="apple"] .phelp__chip:active{transform:var(--ib-press)} /* --- Topics --------------------------------------------------------------- */ [data-skin="apple"] .phelp__sec{margin:26px 0 0} [data-skin="apple"] .phelp__h{ margin:0 0 10px;font:500 11px/1.3 var(--ib-font);letter-spacing:.06em; text-transform:uppercase;color:var(--ib-ink2) } [data-skin="apple"] .phelp__topics{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none} [data-skin="apple"] .phelp__topic{ display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px; color:var(--ib-ink);text-decoration:none;transition:background 150ms ease } [data-skin="apple"] .phelp__topic:hover{background:var(--ib-s1)} [data-skin="apple"] .phelp__tt{font:600 14.5px/1.3 var(--ib-font);letter-spacing:-.005em} [data-skin="apple"] .phelp__ts{font:400 13px/1.45 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .phelp__topics--compact .phelp__topic{padding:10px 14px} /* --- An answer ------------------------------------------------------------ */ [data-skin="apple"] .phelp__back{margin:16px 0 0;font:500 13px/1.4 var(--ib-font-ui)} [data-skin="apple"] .phelp__back a{color:var(--ib-ink2);text-decoration:none} [data-skin="apple"] .phelp__back a:hover{color:var(--ib-ink)} [data-skin="apple"] .phelp__answer{margin:14px 0 0} [data-skin="apple"] .phelp__title{margin:0 0 12px;font:600 22px/1.2 var(--ib-font);letter-spacing:-.02em;color:var(--ib-ink)} [data-skin="apple"] .phelp__answer p, [data-skin="apple"] .phelp__panel > p{margin:0 0 12px;font:400 15px/1.6 var(--ib-font);color:var(--ib-ink)} [data-skin="apple"] .phelp__lede{margin:0 0 10px;font:400 15px/1.55 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .phelp__links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none} [data-skin="apple"] .phelp__link{ display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;box-sizing:border-box; border:1px solid var(--ib-line);border-radius:12px;color:var(--ib-ink);text-decoration:none; font:500 13.5px/1.3 var(--ib-font-ui);overflow-wrap:anywhere; transition:background 150ms ease,border-color 150ms ease } [data-skin="apple"] .phelp__link:hover{background:var(--ib-s1);border-color:transparent} /* The arrow's own gap: whitespace before it collapses inside the inline-flex link, which set it hard against the last word. */ [data-skin="apple"] .phelp__arr{margin-left:6px} [data-skin="apple"] .phelp__inline{margin:18px 0 0} [data-skin="apple"] .phelp__quote{ margin:0 0 12px;padding:10px 14px;border-left:2px solid var(--ib-line); font:500 15px/1.5 var(--ib-font);color:var(--ib-ink);overflow-wrap:anywhere } /* --- Ask Studio Hill ------------------------------------------------------ */ [data-skin="apple"] .phelp__includes{margin:0 0 18px;padding:12px 16px;list-style:none;border-radius:12px;background:var(--ib-s1)} [data-skin="apple"] .phelp__includes li{font:400 13.5px/1.6 var(--ib-font);color:var(--ib-ink2);overflow-wrap:anywhere} [data-skin="apple"] .phelp__form{margin:0} [data-skin="apple"] .phelp__label{display:block;margin:0 0 8px;font:500 13px/1.3 var(--ib-font-ui);color:var(--ib-ink)} [data-skin="apple"] .phelp__fine{margin:8px 0 0;font:400 12.5px/1.5 var(--ib-font);color:var(--ib-ink2)} [data-skin="apple"] .phelp__acts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0} [data-skin="apple"] .phelp__mail{margin:0 0 12px;display:grid;gap:6px} [data-skin="apple"] .phelp__mail div{display:flex;gap:10px;font:400 13.5px/1.5 var(--ib-font)} [data-skin="apple"] .phelp__mail dt{flex:0 0 64px;color:var(--ib-ink2)} [data-skin="apple"] .phelp__mail dd{margin:0;color:var(--ib-ink);overflow-wrap:anywhere;min-width:0} /* The message exactly as it will be sent — its own line breaks kept, and in the reading face, because it is a letter and not code. */ [data-skin="apple"] .phelp__text{ margin:0;padding:14px 16px;border-radius:12px;background:var(--ib-s1);color:var(--ib-ink); font:400 13.5px/1.6 var(--ib-font);white-space:pre-wrap;overflow-wrap:anywhere; max-height:340px;overflow:auto } [data-skin="apple"] .phelp__err{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--ib-red-soft)} [data-skin="apple"] .phelp__err p{margin:0;font:500 13.5px/1.5 var(--ib-font);color:var(--ib-red)} [data-skin="apple"] .phelp__foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--ib-line-soft) } [data-skin="apple"] .phelp__foot p{margin:0;font:400 13.5px/1.5 var(--ib-font);color:var(--ib-ink2)} /* Keyboard focus, drawn by the skin rather than left to a UA ring that disappears against a dark sheet. */ [data-skin="apple"] .phelp :is(a,button,summary):focus-visible{outline:2px solid var(--ib-ink);outline-offset:2px} /* A heading that receives focus after a panel swap is there so a screen reader announces the new state. It is not a control and is not in the tab order (tabindex -1), so it draws no ring — a box around a title reads as something to press. The next Tab lands on a real control, which does. */ [data-skin="apple"] .phelp [data-help-focus]:focus, [data-skin="apple"] .phelp [data-help-focus]:focus-visible{outline:none} /* --- The page it degrades to ---------------------------------------------- */ [data-skin="apple"] .phelp--page{max-width:720px} [data-skin="apple"] .phelp__intro{margin:4px 0 22px;font:400 15px/1.55 var(--ib-font);color:var(--ib-ink2)} /* --- A phone: the full-height sheet --------------------------------------- */ /* The portal's own breakpoint — the width below which its rail goes behind the menu — so Help changes shape exactly where the rest of the shell does. */ @media (max-width:860px){ [data-skin="apple"] .phelp--drawer{inset:0;width:100%;height:100%;border-left:0} [data-skin="apple"] .phelp--drawer[open]{animation-name:phelp-up} html[data-theme="dark"] [data-skin="apple"] .phelp--drawer{border-left:0} [data-skin="apple"] .phelp__hd{padding:max(14px,env(safe-area-inset-top)) 16px 12px 20px} [data-skin="apple"] .phelp--drawer .phelp__body{padding:16px 20px max(28px,env(safe-area-inset-bottom))} /* 16px and not less: iOS zooms the page into any field set smaller, which inside a sheet looks like the layout breaking. */ [data-skin="apple"] .phelp__input, [data-skin="apple"] .phelp__textarea{font-size:16px} } @media (max-width:860px) and (prefers-color-scheme:dark){ html:not([data-theme="light"]) [data-skin="apple"] .phelp--drawer{border-left:0} } /* --- Reduced motion: no slide, no fade, no press -------------------------- */ @media (prefers-reduced-motion:reduce){ [data-skin="apple"] .phelp--drawer[open]{animation:none} [data-skin="apple"] .phelp :is(.phelp__go,.phelp__cta,.phelp__ghost,.phelp__chip,.phelp__close){transition:none} [data-skin="apple"] .phelp :is(.phelp__go,.phelp__cta,.phelp__ghost,.phelp__chip,.phelp__close):active{transform:none} [data-skin="apple"] .phelp__body[aria-busy="true"]{transition:none} }