/* =========================================================================== * The tokens. Face lift of 16 September 2026. * * Every token NAME that ever existed here still exists, because every module * in the tree reads var(--at-*) and a name that disappears takes a screen * with it. What changed is the VALUES: they are the measured surfaces of the * screen the end customer picked, so changing this one file re-dresses the * whole product. * * The names are unchanged from the Ledger pass. What they hold is not: * * --at-paper #ffffff cards, panels, list ground * --at-band #f4f6f4 the page behind the cards * --at-field #eef1ee the second surface: header row, hover, quiet chip * --at-ink #081729 the top bar * --at-ink2 #0f2a4a the area bar under it * --at-rule #dde2dc every 1px border and every row divider * --at-rule2 #e4e8e3 the third surface, and a dash not yet reached * --at-tx #101b28 text * --at-tx2 #485661 second line text, sub lines, body cells * --at-tx3 #5f6c78 labels and column headings * --at-loud #b7412c one mark per screen * * Two of the measured values were moved and both moves are in the report. * The measured muted text is #8996a0, which is 3.03 to 1 on white and 2.66 * on the header row: a column heading nobody with ordinary eyes can read at * ten in the morning is not a design, so --at-tx3 is #5f6c78, which is the * same grey four steps darker and clears AA on all three surfaces it is * drawn on. The measured secondary #485661 is kept exactly. * * The five state colours are NOT decided here. They are decided in * src/schema.js, measured there, and written into the page at boot as * #ll-palette. So is the accent, which is now the teal #0e7c74: it is the * one primary control AND the completed dash in the four dash meter, which * is why it lives with the state colours and is measured against them. * * Type: the system stack. The mockup loads Manrope, IBM Plex Sans and IBM * Plex Mono from a font service; the offline build makes zero network * requests, so it cannot. The sizes below are the mockup's, carried by the * system stack. * * The craft pass of 17 September 2026 changed four things in this file and * added thirteen names. It removed none. * * 1. The weights. --at-weight-medium was 600 and --at-weight-display was * 700, both carried over from a mockup with a display face to hold * them up. On the system stack they read as shouting. They are 500, * which is what the design language has said since the first page. * Every module that asks for a weight by name is corrected by this * one line and does not have to touch its own CSS. * 2. A line height for each size, and one display size, 30px, which is a * KPI number and nothing else. * 3. One focus ring, --at-focus-*, so every control in the product draws * the same ring. The accent on a light surface; white on the two dark * bars, where the accent measures 2.86 to 1 against the navy and a * non text indicator has to clear 3 to 1. * 4. The two shadows, half a step apart at the same angle in the same * ink, so a menu floating over a card reads as one system. * * No colour value moved. The five state colours and the accent are still * decided and measured in src/schema.js and nowhere else. * * The frame pass of 23 September 2026 (owner decisions 15 to 17) moved * three things and added names. It removed none. * * 1. The weights are the customer's: 700 to 800 for tabs, headings, * values, names, table headers and pills, 400 to 500 for body text. * --at-weight-medium is 700 and --at-weight-display is 800, so every * module that asks for emphasis by name gets his weight without * touching its own sheet. --at-weight-body-strong (500) is the quiet * emphasis inside a sentence. * 2. The display size is his tile number, 26px, and the tally number has * a size of its own, 16px. * 3. Two state tokens the tiles need and the palette did not carry: the * hold purple (a job waiting on the client) and the pending indigo (a * job waiting to be sent out). They are state, never category. * 4. ONE primary button, .ll-btn-primary: a solid accent pill with white * text at 12.5px and 700, the way his "+ New Order" is drawn. One quiet * button beside it, .ll-btn-quiet. Both live here so every module can * use them without drawing a button of its own. --at-loud stays a state * colour and is never a button. * ========================================================================= */ :root { /* ---- The surfaces, under their own names ---- */ --at-paper: #ffffff; --at-band: #f4f6f4; --at-field: #eef1ee; --at-ink: #081729; --at-ink2: #0f2a4a; --at-rule: #dde2dc; --at-rule2: #e4e8e3; --at-tx: #101b28; --at-tx2: #485661; --at-tx3: #5f6c78; --at-loud: #b7412c; --at-onink: #ffffff; /* text on the ink bars */ --at-onink-quiet: #aebdcf; /* the quiet half of a dark bar, 9.43 to 1 */ /* The strong border, for a card under the pointer and a rule that has to be seen. Measured off the mockup. */ --at-rule-strong: #c7cec5; /* The dark bars carry controls of their own: the search box in the header, the bucket that is on, a column heading under the pointer. */ --at-ink-raise: #16304f; /* a control sitting on an ink bar */ --at-ink-raise2: #1d3c61; /* that control, under the pointer */ --at-ink-edge: #24405f; /* a hairline drawn on an ink bar */ --at-ink2-hover: #16345a; /* the area bar, hovered */ /* The row whose panel is open. The accent tint, which is what the mockup puts under a selected row. */ --at-row-open: #e3f2f0; /* The accent as the build ships it. src/schema.js writes the measured value over this at boot, and the office's own pick after that; this is only what a page reads before either has run. */ --at-accent: #0e7c74; /* Two states the tiles need that the five do not carry (23 September). Hold is work waiting on the client to decide; pending is work waiting to be sent out. Tint, ink and solid, the same three the five carry. Hold ink on white 5.36 to 1, pending ink on white 7.33 to 1. */ --at-stateHold: #f0ebf7; --at-stateHold-ink: #7a5fa3; --at-stateHold-solid: #7a5fa3; --at-statePending: #e9eafb; --at-statePending-ink: #4550a8; --at-statePending-solid: #4550a8; /* Wave 6 (decision 203): the red license badge on the Contractors word. White on the badge red 5.44 to 1. */ --ll-lic-badge-bg: #c0392b; --ll-lic-badge-ink: #ffffff; /* The mark in the top left corner: the accent running into the navy of the tab bar, the way the customer drew it. */ --at-mark-fill: linear-gradient(155deg, var(--at-accent) 0%, var(--at-ink2) 115%); /* The quiet grey of the line under the office name, on the ink bar. */ --at-onink-tag: #9fb0c4; /* The day on the right of the bar, and the pill the search box sits in. */ --at-onink-soft: #c7d3e0; --at-onink-fill: rgba(255, 255, 255, 0.08); --at-onink-fill2: rgba(255, 255, 255, 0.14); --at-onink-edge: rgba(255, 255, 255, 0.14); /* ---- Type. The mockup's scale, on the system stack. ---- */ --at-font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* There is no display face. The mockup's display face is Manrope and we cannot ship it, so the display name points at the body stack and the difference is carried by weight and tracking. */ --at-font-display: var(--at-font-sans); --at-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --at-font-size-xs: 11px; --at-font-size-sm: 11px; --at-font-size-base: 13px; --at-font-size-title: 17px; /* One display size, and it is a KPI number and nothing else. This is the single extension to the three size law and it is taken so that the five numbers at the top of the working screen carry the screen. Nothing else in the product may read it. */ --at-font-size-display: 26px; /* His tally number, his button and the line under a tile. */ --at-font-size-tally: 16px; --at-font-size-button: 12.5px; --at-font-size-tile-sub: 11.5px; --at-font-size-brand: 14.5px; --at-font-size-brand-tag: 10.5px; /* The letters over his mini month in the rail, and nothing else. */ --at-font-size-mini: 9.5px; /* A line height for each size, so a stack of text sits on a rhythm rather than on whatever the browser worked out. */ --at-line-height-xs: 15px; --at-line-height-base: 18px; --at-line-height-title: 22px; --at-line-height-display: 30px; --at-line-height-control: 18px; --at-line-height-pill: 16px; --at-line-height-button: 20px; /* Two weights. 600 and 700 were carried over from a mockup that had a display face to carry them; on the system stack they read as shouting, and the design language has said 400 and 500 since the first page. The names are unchanged, so every module that asks for medium or display gets the corrected weight without touching a line of its own CSS. */ --at-weight-regular: 400; --at-weight-medium: 700; --at-weight-display: 800; /* The customer's scale by name (decision 17). Bold is a tab, a heading, a name, a table header or a pill; heavy is a value; body strong is the quiet emphasis inside running text. */ --at-weight-body-strong: 500; --at-weight-bold: 700; --at-weight-heavy: 800; --at-tracking-display: 0; /* Small uppercase text needs air between the letters or it reads as a smudge. A big number needs the opposite. */ --at-tracking-caps: 0.06em; --at-tracking-tight: -0.01em; /* ---- Neutrals / text ---- */ --at-text: var(--at-tx); --at-text-muted: var(--at-tx2); --at-text-faint: var(--at-tx3); --at-text-inverse: #ffffff; --at-text-tab-inactive: var(--at-tx2); --at-icon-plus: var(--at-tx2); --at-quiet-opacity: 0.78; /* ---- Surfaces ---- */ --at-surface: var(--at-paper); /* The page behind the cards, which is what the list, the tiles and the rail all sit on. */ --at-surface-grid-backdrop: var(--at-band); --at-surface-header-strip: var(--at-field); /* the column heading row */ --at-surface-hover: #eef1ee; --at-surface-subtle: rgba(16, 27, 40, 0.05); --at-surface-tabstrip: var(--at-band); --at-surface-band: var(--at-band); --at-surface-panel: var(--at-paper); --at-surface-3: var(--at-rule2); /* ---- Brand / accent ---- The accent teal arrives from schema.js as --at-accent. These two are the strong and the tint beside it, measured off the mockup. Green here still only ever means finished. */ --at-accent-strong: #0a5f59; --at-accent-tint: #e3f2f0; --at-green: var(--at-accent-strong); --at-blue: var(--at-ink2); --at-blue-selection-fill: var(--at-accent-tint); /* ---- Borders. One hairline, everywhere. ---- */ --at-border-hairline: var(--at-rule); --at-border-grid: var(--at-rule); --at-border-header: var(--at-rule); --at-border-frozen: var(--at-rule); --at-border-control: var(--at-rule-strong); /* ---- Radii. The mockup rounds: 10px on a card, 5px on a tag, a full lozenge on a pill. ---- */ --at-radius-cell-selection: 0px; --at-radius-xs: 3px; --at-radius-sm: 5px; --at-radius-md: 7px; /* Decision 94 (his 35): softer, rounder surfaces. A card, a panel and a window corner are 12px, his number, so every module that asks for the large radius by name gets it without touching its own sheet. */ --at-radius-lg: 12px; --at-radius-pill: 9999px; /* ---- THE MODERN LOOK (his 35, decision 94) ---- The marine blue pill tabs, system wide. These are his nine names with his light values; the dark values are said again in the shell's dark sheet (app.js DARK_TOKENS), so dark mode follows. The track is the rounded strip a row of tabs sits in, the ink is a tab at rest, hover is under the pointer, on is the tab you are standing on (white ink, which dark does not change), soft is a selected card or row. The seat accent is NOT here: it still colours the one primary button (decision 17), and the tabs are the same blue for every seat. */ --tab-track: #eef3f8; --tab-track-bd: #d6e1ec; --tab-ink: #3c5068; --tab-hover: #dfe9f3; --tab-hover-ink: #123a5e; --tab-on: #1b4d7a; --tab-on-ink: #fff; --tab-on-shadow: 0 2px 6px rgba(27, 77, 122, .35); --tab-soft: #e3edf6; /* The main tab bar is pills on the navy: the one you are on is a white pill with the marine ink, its count plate the marine under white. */ --tab-bar-on: #ffffff; --tab-bar-on-ink: #1b4d7a; --tab-bar-hover: rgba(255, 255, 255, .08); /* A red count on a tab (an unfinished item), and on the tab you are on. */ --tab-badge: #e0473a; --tab-badge-ink: #ffffff; --tab-badge-on: #ffffff; --tab-badge-on-ink: #c0392b; /* The section you are on in Setup, Merchant and Help: the same pill. */ --at-nav-on: var(--tab-on); --at-nav-on-ink: var(--tab-on-ink); --at-nav-on-hover: var(--tab-on); /* ---- Elevation. Two shadows and nothing else. --at-shadow-low is for a thing that sits ON the page: a card, a tile, the rail, the list. --at-shadow-high is for a thing that floats OVER it: a menu, a popover, a toast. Nothing gets both and nothing gets a third. Both are the same ink at the same angle, one step apart, so a menu opened over a card reads as one system. ---- */ --at-shadow-low: 0 1px 2px rgba(15, 30, 45, 0.07); --at-shadow-high: 0 1px 2px rgba(15, 30, 45, 0.07), 0 8px 24px rgba(15, 30, 45, 0.12); --at-shadow-tooltip: 0 0 0 1px rgba(15, 30, 45, 0.14); --at-shadow-frozen: 3px 0 0 0 rgba(15, 30, 45, 0.05); --at-ring-cell: 0 0 0 2px var(--at-accent); --at-ring-cell-editing: 0 0 0 1px var(--at-accent); /* ---- Focus. One ring, drawn from here, on every control in the product. It is the accent on a light surface. On the two dark bars the accent sits 2.86 to 1 against the navy behind it, which is under the 3 to 1 a non text indicator has to clear, so a control on ink takes the white ring instead at 14.48 to 1. ---- */ --at-focus-width: 2px; --at-focus-offset: 2px; --at-focus-color: var(--at-accent); --at-focus-color-onink: #ffffff; --at-focus-ring: 0 0 0 2px var(--at-accent); --at-focus-ring-onink: 0 0 0 2px #ffffff; /* ---- Layout. ---- */ --at-statusbar-width: 0px; /* His bar is 64px, and his tab row under it 38px. The two are the only things that stay put while the page scrolls under them. */ --at-header-height: 64px; --at-navbar-height: 38px; /* The page gutter, his 28px down each side on a wide screen. Sixteen is the least it ever is, never the most: under 1024px of window it comes back to sixteen so a narrow screen keeps its room for the work. */ --at-page-gutter: 28px; --at-areastrip-height: 34px; /* The period strip, the office's own line of figures. It is drawn on two screens and only for the seat that is allowed it, so it is 0 on every other screen and this is what it stands at when it is there. */ --at-tally-height: 44px; --at-bucketbar-height: 52px; --at-detail-height: 236px; --at-tabstrip-height: 28px; --at-toolbar-height: 34px; --at-sidebar-width: 200px; --at-summarybar-height: 28px; /* LLView's own four row heights, under the names other modules read. The working list runs at 'tall', which is the mockup's 88px row with two lines in the Due cell and two in the Matter cell. Short is what a dense table still uses, and the money tables read it by name. */ --at-row-height-short: 28px; --at-row-height-medium: 56px; --at-row-height-tall: 88px; --at-row-height-extra-tall: 128px; --at-column-width-default: 140px; --at-gutter-width: 34px; --at-icon-size: 16px; --at-chip-height: 20px; /* ---- The KPI tile row and the right rail ---- */ /* 12 + 14 + 4 + 32 + 4 + 14 + 12. The tile is the sum of its parts rather than a round number with the type dropped into it. */ --at-kpi-height: 92px; --at-kpi-gap: 12px; --at-rail-width: 300px; --at-rail-gap: 16px; /* Below this the rail folds away, so nothing ever scrolls sideways on a laptop. */ --at-rail-min: 1200px; /* ---- The nine work order columns, at 1366, in pixels. ---- */ --at-col-due: 104px; --at-col-job: 104px; --at-col-level: 92px; --at-col-case: 190px; --at-col-client: 150px; --at-col-branch: 108px; --at-col-server: 112px; --at-col-progress: 84px; --at-col-status: 146px; --at-col-party: 152px; /* ---- Spacing. 4 / 8 / 12 / 16 / 24 / 32 and nothing between. Every gap and every pad on a screen is one of these six. The page gutter is its own token, --at-page-gutter, the same on every floor so the left edge of the bar, the tabs, the tiles, the list and the rail is one line down the screen. ---- */ --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px; --at-space-5: 24px; --at-space-6: 32px; /* ---- Cell renderers ---- */ --at-linked-record-bg: var(--at-field); --at-rating-filled: var(--at-tx); --at-rating-empty: var(--at-rule); /* ---- The select palette. Identity is not state, so the ten "colours" a select option can carry no longer carry ten hues. Every one of them resolves to the quiet identity chip of the measurement: #eef1ee fill, #485661 text, a 1px #dde2dc border and a 5px radius. The names survive because a hundred stored option definitions point at them. ---- */ --at-blueLight2: #eef1ee; --at-cyanLight2: #eef1ee; --at-tealLight2: #eef1ee; --at-greenLight2: #eef1ee; --at-yellowLight2: #eef1ee; --at-orangeLight2: #eef1ee; --at-redLight2: #eef1ee; --at-pinkLight2: #eef1ee; --at-purpleLight2: #eef1ee; --at-grayLight2: #eef1ee; --at-blueLight1: #e4e8e3; --at-cyanLight1: #e4e8e3; --at-tealLight1: #e4e8e3; --at-greenLight1: #e4e8e3; --at-yellowLight1: #e4e8e3; --at-orangeLight1: #e4e8e3; --at-redLight1: #e4e8e3; --at-pinkLight1: #e4e8e3; --at-purpleLight1: #e4e8e3; --at-grayLight1: #e4e8e3; /* Bright and Dark1 are the swatch names LLView's own colour picker asks for by hand. They stay separable there, and nothing in the product's own screens reads them: state colour comes from the five state tokens. */ --at-blueBright: #2f5f92; --at-cyanBright: #2f5f92; --at-tealBright: #0e7c74; --at-greenBright: #2f7d5b; --at-yellowBright: #a66a10; --at-orangeBright: #a66a10; --at-redBright: var(--at-loud); --at-pinkBright: var(--at-loud); --at-purpleBright: #4a4450; --at-grayBright: #5f6c78; --at-blueDark1: #2f5f92; --at-cyanDark1: #2f5f92; --at-tealDark1: #0a5f59; --at-greenDark1: #2f7d5b; --at-yellowDark1: #9e6404; --at-orangeDark1: #9e6404; --at-redDark1: #b7412c; --at-pinkDark1: #b7412c; --at-purpleDark1: #4a4450; --at-grayDark1: #485661; } /* A narrow window gives the gutter back to the work: sixteen, the least. */ @media (max-width:1023px){ :root { --at-page-gutter: 16px; } } /* =========================================================================== * THE ONE PRIMARY BUTTON, and the quiet one beside it (decision 17). * * A solid accent pill with white text, 12.5px at 700, the way the customer * drew "+ New Order". Every module that needs a primary control uses this * class rather than drawing its own, so the product has one. The loud red is * a state of play and is never a button. * ========================================================================= */ .ll-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:30px;padding:0 14px;border:1px solid var(--at-accent); border-radius:var(--at-radius-pill);background:var(--at-accent); color:var(--at-accent-onsolid,#ffffff);font-family:var(--at-font-sans); font-size:var(--at-font-size-button);line-height:1;font-weight:var(--at-weight-bold); white-space:nowrap;cursor:pointer;text-decoration:none; transition:background .12s ease,border-color .12s ease} .ll-btn-primary:hover{background:var(--at-accent-strong);border-color:var(--at-accent-strong)} .ll-btn-primary:focus{outline:none} .ll-btn-primary:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} .ll-btn-primary:disabled,.ll-btn-primary[aria-disabled="true"]{background:var(--at-rule2); border-color:var(--at-rule);color:var(--at-tx3);cursor:not-allowed} .ll-btn-primary svg{flex:0 0 auto} .ll-btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:30px;padding:0 14px;border:1px solid var(--at-rule-strong); border-radius:var(--at-radius-pill);background:var(--at-paper);color:var(--at-tx2); font-family:var(--at-font-sans);font-size:var(--at-font-size-button);line-height:1; font-weight:var(--at-weight-bold);white-space:nowrap;cursor:pointer;text-decoration:none} .ll-btn-quiet:hover{background:var(--at-field);color:var(--at-tx)} .ll-btn-quiet:focus{outline:none} .ll-btn-quiet:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} .ll-btn-quiet:disabled{color:var(--at-tx3);cursor:not-allowed} /* ============ LLView palette bridge ============ Not one value is decided here. Every name below points at a token that is declared somewhere else, so there is exactly one place to change a colour and this file is never it. The five state colours and the five kind colours arrive at boot from schema.js, which is the only place they are decided, and app.js writes them into the page as #ll-palette. */ :root{ --at-bg:var(--at-surface); --at-panel:var(--at-surface); --at-border:var(--at-border-hairline); --at-text-2:var(--at-text-muted); --at-hover:var(--at-surface-subtle); /* One accent in the whole product, and it is the blue that means a thing is being worked right now. A selected cell, a focus ring and a sort arrow are all the same statement: this is the bit you are on. */ /* The accent is decided once, in LLSchema.PALETTE_CSS, which this file * injects at boot. Declaring it here as well meant two definitions and a * winner chosen by document order, so the one loud control on a screen * would have quietly changed colour the day somebody moved a tag. */ --at-accent-bg:var(--at-surface-subtle); /* Row stripe names LLView asks for by hand, for its own colour picker and the swatches in it. Pointed at the swatch tokens so the picker still shows the colour it names. Nothing in the product's own screens reads these: state colour comes from the five state tokens and nowhere else. */ --at-cyan:var(--at-cyanBright); --at-teal:var(--at-tealBright); --at-yellow:var(--at-yellowBright); --at-orange:var(--at-orangeBright); --at-red:var(--at-redBright); --at-purple:var(--at-purpleBright); --at-pink:var(--at-pinkBright); --at-gray:var(--at-grayBright); --at-shadow:var(--at-shadow-high); /* The table tab strip carried a mint green band copied from another product, where it meant which base you were in. Here it meant nothing, so it is paper like everything else. */ --at-surface-tabstrip:var(--at-field); /* Chrome measurements live in tokens.css now, with the rest of the Ledger measurements, so there is one place to change the height of a bar. The six that used to be redeclared here are gone rather than repeated: a second declaration two files later is how a token quietly stops meaning what the file that named it says it means. */ /* the ring on a selected cell is the one accent, same as everything else */ --at-ring-cell:0 0 0 2px var(--at-accent); --at-ring-cell-editing:0 0 0 1px var(--at-accent); /* The one accent, kept under its old name so nothing that reads it breaks. There is no brand colour any more: green here now only ever means finished, and it is not the chrome's to spend. */ --at-brand-blue:var(--at-stateActive-solid); } /* ============ reset ============ */ *{box-sizing:border-box} html,body{height:100%} /* Tabular figures on the body, so every column of money, every count and every case number lines up in every module without any of them asking. */ body{margin:0;font-family:var(--at-font-sans);font-size:13px;line-height:18px; color:var(--at-text);background:var(--at-surface);-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; overflow:hidden} button,input,select,textarea{font:inherit;color:inherit; font-variant-numeric:tabular-nums} button{background:none;border:0;padding:0;cursor:pointer} /* ---- THE CURSOR (decision 21) ---- An arrow over plain text, everywhere, and a pointer over anything a press does something to: a row, a button, a link, a chip, a tab, a tile, a quick link, a header that sorts, anything that says it is a button. It is the last word on the matter, so a module sheet that set a text beam or a grab hand on something pressable does not win over it. A box you type in keeps its text beam; a control that is switched off keeps what its sheet says. */ body{cursor:default} input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea,[contenteditable=""],[contenteditable="true"]{cursor:text} button:not([disabled]),a[href],summary,select:not([disabled]),label[for], input[type=button]:not([disabled]),input[type=submit]:not([disabled]),input[type=checkbox]:not([disabled]),input[type=radio]:not([disabled]), [role=button]:not([aria-disabled=true]),[role=tab],[role=link],[role=menuitem],[role=option],[role=switch],[role=checkbox], [data-row],[data-row] *:not(input):not(textarea):not(select):not([contenteditable]), [data-sort],[aria-sort],th[data-sort] *,.stab,.stab *,.ll-kb-tile,.ll-kb-tile *,.ll-kb-ql,.ll-kb-ql *,.ll-kb-pill,.ll-kb-pill *, [data-kpi],[data-ql],[data-qgo],[data-chip],[onclick]{cursor:pointer!important} .quiet{opacity:var(--at-quiet-opacity)} .hidden{display:none!important} /* ---- the three sizes, for any module that wants them by name ---- */ .t-meta{font-size:11px;line-height:15px;color:var(--at-text-muted)} .t-body{font-size:13px;line-height:18px} .t-title{font-family:var(--at-font-display);font-size:var(--at-font-size-title); line-height:var(--at-line-height-title);font-weight:var(--at-weight-display); letter-spacing:var(--at-tracking-tight)} /* a quiet section heading: small, no box, no rule above it */ .t-sec{font-size:11px;line-height:15px;font-weight:500;color:var(--at-text-muted)} /* a number: tabular and right aligned, both halves of the same rule */ .num{font-variant-numeric:tabular-nums;text-align:right} /* ============ app frame ============ */ #app{display:flex;height:100vh;width:100vw} /* ---- left status rail ---- Removed. app.js takes the element out on the first paint. It held a mark, an add button that added nothing and a help button with nothing behind it, and it cost 56px of width on every screen. The mark moved into the header. The two rules below are kept only so that a stray .rail in an old build does not paint. */ .rail{display:none} /* ---- main column ---- */ .main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%} /* ---- header bar ---- Reads left to right: what this is, where you work, what is happening now, what you can do. Nothing in it is saturated. The loud thing on any screen belongs to the screen, never to the frame around it. */ .bhead{height:var(--at-header-height);flex:0 0 var(--at-header-height); display:flex;align-items:center;padding:0 12px;gap:8px; background:var(--at-ink);color:var(--at-onink);border-bottom:0; /* the switcher hangs its own menu out of the bottom of this bar */ overflow:visible;position:relative;z-index:30} /* ---- the brand slot ---- The first thing on the screen is whoever this copy is for. A build made for one company carries their mark; a build made for nobody in particular carries the product name. Which of the two it is, is decided in mk.py by BRAND_LOGO and nowhere else, and no company is named in any markup here. The mark is a picture with a transparent ground, so it sits straight on the header paper with no plate, no border and no box behind it. It is held to 22px tall inside a 44px bar, which keeps it clear of the tab underline beneath and stops a wide logo from eating the section tabs. */ /* The slot is a control. It goes to Today, the way the mark in the corner goes to the front page of everything else on his desk, so the pointer changes over it and the keyboard reaches it without being told. Being the first thing in the document, it is the first thing the keyboard reaches. It is given no border, no plate, no hover fill and no pressed state: a logo dressed up as a button looks cheap, and there is nothing else in this corner for it to be confused with. The one thing it ever draws is the focus ring, and only when a keyboard asked for it. */ .brand{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto; background:none;border:0;margin:0;padding:0;cursor:pointer; text-align:left;color:inherit} .brand:focus{outline:none} .brand:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color);outline-offset:4px; border-radius:var(--at-radius-sm)} .brand__logo{height:22px;width:auto;max-width:190px;display:block; object-fit:contain;object-position:left center} /* with a mark up, the product name is there for a reader that cannot see pictures and for the moment one fails to draw. It takes no room. */ .brand--logo .bhead__name{position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .bhead__icon{width:22px;height:22px;flex:0 0 22px;border-radius:var(--at-radius-sm); background:var(--at-onink);color:var(--at-ink); display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:500;letter-spacing:.02em} .bhead__name{font-family:var(--at-font-display);font-size:13px;line-height:18px; font-weight:var(--at-weight-medium);letter-spacing:0; color:var(--at-onink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px} /* with a mark up, the two letter plate comes out and only the picture is left, so the corner carries one thing and not two. */ .brand--logo .bhead__icon{display:none} .bhead__tabs{display:flex;align-items:center;gap:4px;margin-left:16px; margin-right:12px;min-width:0;overflow:hidden;flex:0 0 auto} /* ---- the area row ---- Five plain words: Today, Work, People, Money, Filing. They are text, not plates, because the buckets along the bottom already carry the navigation that has weight. The one you are on is medium and carries a bar under it. Nothing here is saturated: the loud thing on a screen belongs to the screen, never to the frame. */ .stab{position:relative;height:var(--at-header-height);display:flex;align-items:center; font-size:13px;line-height:18px;font-weight:400;color:var(--at-onink-quiet); padding:0 10px;white-space:nowrap;background:none;border:0;cursor:pointer} .stab:hover{color:var(--at-onink)} .stab--on{color:var(--at-onink);font-weight:500} .stab--on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px; background:var(--at-onink)} .stab__sep{width:1px;height:14px;background:rgba(255,255,255,.16); display:inline-block;flex:0 0 1px} .bhead__right{display:flex;align-items:center;gap:10px;margin-left:auto; min-width:0;flex:1 1 auto;justify-content:flex-end} /* One box, many targets. It is the widest thing in the header because it is the thing a hand reaches for most. */ .cmdslot{flex:1 1 auto;min-width:0;max-width:520px;display:flex} .cmdslot .ll-cmd-slim{width:100%;height:28px;background:var(--at-ink-raise); border:1px solid var(--at-ink-edge);color:var(--at-onink-quiet)} .cmdslot .ll-cmd-slim:hover{background:var(--at-ink-raise2)} .cmdslot .ll-cmd-slim__txt,.cmdslot .ll-cmd-slim__ico, .cmdslot .ll-cmd-slim__kbd{color:var(--at-onink-quiet)} .savestate{font-size:11px;line-height:15px;color:var(--at-onink-quiet);white-space:nowrap} .personslot,.loginslot{flex:0 0 auto;display:flex;align-items:center} /* the switcher is a light control on a dark bar */ .loginslot .ll-lg-sw__b{background:transparent;border-color:transparent; color:var(--at-onink);height:30px;flex-direction:column;align-items:flex-end;gap:0; line-height:15px} .loginslot .ll-lg-sw__b:hover{background:rgba(255,255,255,.08)} .loginslot .ll-lg-sw__b i{color:var(--at-onink-quiet)} .btn-launch{height:26px;padding:0 8px;display:flex;align-items:center;gap:6px; background:transparent;border-radius:var(--at-radius-sm); border:1px solid rgba(255,255,255,.2);color:var(--at-onink); font-size:13px;line-height:18px;font-weight:400;white-space:nowrap} .btn-launch:hover{background:rgba(255,255,255,.08)} .iconbtn{width:26px;height:26px;border-radius:var(--at-radius-sm);display:flex; align-items:center;justify-content:center;color:var(--at-onink-quiet); background:none;border:0;cursor:pointer} .iconbtn:hover{background:rgba(255,255,255,.08);color:var(--at-onink)} /* One focus ring for every control in the frame, so walking the keyboard across the top of the screen looks like one thing and not four. It is the accent, which is the ink, because a ring is not a state of play and has no business carrying a hue. Only when a keyboard asked for it. */ .stab:focus,.ttab:focus,.iconbtn:focus,.btn-launch:focus,.vt-hamb:focus{outline:none} .stab:focus-visible,.iconbtn:focus-visible,.btn-launch:focus-visible{ outline:var(--at-focus-width) solid var(--at-focus-color-onink);outline-offset:-2px; border-radius:var(--at-radius-sm)} .ttab:focus-visible,.vt-hamb:focus-visible{ outline:var(--at-focus-width) solid var(--at-focus-color);outline-offset:-2px; border-radius:var(--at-radius-sm)} .brand:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color-onink);outline-offset:2px} /* What a narrow screen gives up, in the order it gives it up. A section tab is the last thing to go, and it never goes: the save state goes, then the air between the tabs, then the length of the title, then the title itself, because by then the eight tabs under the mark say what this is. */ @media (max-width:1460px){ .savestate{display:none} } @media (max-width:1440px){ .bhead__tabs{gap:0;margin-left:10px;margin-right:8px} .stab{padding:0 8px} /* The wordmark comes out rather than being cut in half. On a laptop the corner carries one thing: the mark, and the area row under the pointer says what this is. A clipped name ending in three dots is a defect. */ .brand:not(.brand--logo) .bhead__name{display:none} } @media (max-width:1240px){ .brand__logo{max-width:150px} .cmdslot{max-width:300px} } /* ---- the process server's own screen ---- * * LLField is a phone screen and it is the Process server's home. Its type is * the product's scale stepped up one notch, which is right at arm's length on * a phone and wrong stretched across a 1366 laptop, where one job filled half * the window and the rest was bare paper. It is held to a phone's column and * stood in the middle, and the space either side is ruled paper rather than * white, which is the rule everywhere else on this product. */ @media (max-width:899px){ #sectionhost > .ll-fd{ left:50%;right:auto;width:100%;max-width:520px;transform:translateX(-50%); border-left:1px solid var(--at-border-hairline); border-right:1px solid var(--at-border-hairline)} } /* The phone screen fills its host absolutely, so the host has to have a height of its own now that the page scrolls instead of the host. It is the window less the pinned header and tab row. */ #sectionhost:has(> .ll-fd){background:var(--at-band);min-height:calc(100vh - 104px);position:relative} /* ---- table tab strip ---- Five tables, named, and nothing else. The band behind it was mint green in the product this was copied from, where the colour meant something. Here it meant nothing, so it is paper, and the tab you are on is told by weight and by the bar under it. */ .tabstrip{background:var(--at-surface-tabstrip);padding:0 0 0 10px;gap:2px; display:flex;align-items:stretch;height:var(--at-tabstrip-height); flex:0 0 var(--at-tabstrip-height)} .ttab{display:flex;align-items:center;padding:0 10px;position:relative; font-size:13px;line-height:18px;font-weight:400;color:var(--at-text-muted); white-space:nowrap} .ttab:hover{color:var(--at-text);background:var(--at-surface-subtle)} .ttab--on{font-weight:500;color:var(--at-text)} .ttab--on::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px; background:var(--at-text)} /* ---- view toolbar ---- */ .vtoolbar{height:var(--at-toolbar-height);flex:0 0 var(--at-toolbar-height); display:flex;align-items:center;gap:6px; padding:0 10px;background:var(--at-surface); border-bottom:1px solid var(--at-border-hairline)} .vt-left{display:flex;align-items:center;gap:4px} .vt-hamb{width:26px;height:26px;border-radius:var(--at-radius-sm);display:flex; align-items:center;justify-content:center;color:var(--at-text-muted)} .vt-hamb:hover{background:var(--at-surface-subtle);color:var(--at-text)} .vt-hamb--off{color:var(--at-text-faint)} .vt-hamb[aria-pressed="true"]{background:var(--at-surface-subtle);color:var(--at-text)} /* The control that names the view you are on is the control that changes it. The chevron beside it was drawn and wired to nothing; it opens the list of views now, which is where his hand already goes for it. That list used to be a 210px rail down the side of a table 3500px wide. */ .vt-view{height:26px;border-radius:var(--at-radius-sm);padding:0 4px 0 6px;display:flex; align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:500; color:var(--at-text);cursor:pointer} .vt-view:hover{background:var(--at-surface-subtle)} .vt-view[aria-expanded="true"]{background:var(--at-surface-subtle)} .vt-view:focus{outline:none} .vt-view:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color);outline-offset:1px} .vt-view__chev{color:var(--at-text-muted);margin-left:-2px} .vt-tools{margin-left:auto;flex:1;min-width:0;display:flex;justify-content:flex-end} /* ---- the toolbar when the view is a whole screen ---- Hide fields, Group, Sort, Colour and Row height are grid settings, and a board has no fields, no rows and no row height. The screen carries its own filter and its own find box over its own cards, one line below, so a second pair here would be two of each disagreeing in front of him. The row keeps its height so nothing jumps when the view changes, and what is left in it is the control that names where he is. */ .datachrome--screen #vsearch{display:none} .datachrome--screen .vt-tools{display:none} /* LLView toolbar restyled to the Airtable measurements */ .vt-tools .llv-toolbar{background:transparent;border:0;padding:0;gap:8px; justify-content:flex-end;flex-wrap:nowrap} .vt-tools .llv-btn{height:26px;padding:4px 8px;gap:4px;border-radius:var(--at-radius-sm); font-size:13px;line-height:18px;font-weight:400;color:var(--at-text-muted); background:transparent;white-space:nowrap} .vt-tools .llv-btn:hover{background:var(--at-surface-subtle)} .vt-tools .llv-btn--active{background:var(--at-surface-subtle);color:var(--at-text)} .vt-tools .llv-btn__count{font-weight:500;color:var(--at-brand-blue)} .vt-tools .llv-spacer{display:none} .vt-tools .llv-search__input{height:26px;font-size:13px;border-radius:var(--at-radius-sm); border:1px solid var(--at-border-hairline)} .llv-panel{border-radius:var(--at-radius-md);box-shadow:var(--at-shadow-high); font-size:13px;border:0;padding:12px} .llv-panel h3,.llv-panel__title{font-size:13px;line-height:18px;font-weight:500; color:var(--at-text-muted)} /* ---- body split: sidebar + surface ---- */ .body{flex:1;min-height:0;display:flex} .vsidebar{width:var(--at-sidebar-width);flex:0 0 var(--at-sidebar-width); padding:6px 6px 10px;background:var(--at-surface); border-right:1px solid var(--at-border-hairline);overflow:auto} .vsidebar.collapsed{display:none} .vs-find{display:flex;align-items:center;gap:6px;margin:2px 0 4px; color:var(--at-text-faint)} .vs-find input{flex:1;min-width:0;height:26px;border:1px solid var(--at-border-hairline); border-radius:var(--at-radius-sm);padding:0 6px;font-size:13px;outline:none} .vs-find input:focus{border-color:var(--at-accent)} .vs-item{width:100%;height:26px;border-radius:var(--at-radius-sm);padding:0 8px; display:flex;align-items:center;gap:6px;font-size:13px;font-weight:400;text-align:left} .vs-item:hover{background:var(--at-surface-subtle)} .vs-item--on{background:var(--at-surface-subtle);font-weight:500} .vs-item__count{margin-left:auto;font-size:11px;color:var(--at-text-muted)} /* a section heading is small, quiet and carries no box */ .vs-sec{font-size:11px;line-height:15px;color:var(--at-text-muted); padding:8px 8px 3px;font-weight:500} .vs-sec:first-child{padding-top:2px} /* Between the grids and the three whole screens. One list, two kinds, and a hairline says so without a heading or a word of copy. */ .vs-rule{height:1px;background:var(--at-border-hairline);margin:5px 8px} .surface{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--at-surface-grid-backdrop)} /* ============ grid ============ */ .gridwrap{flex:1;min-height:0;overflow:auto;background:var(--at-surface-grid-backdrop); position:relative} .grid{position:relative;width:max-content;min-width:100%} .grow{display:flex;position:relative;background:var(--at-surface)} .grow--head{position:sticky;top:0;z-index:5;background:var(--at-surface-header-strip)} .grow:not(.grow--head):hover .gcell{background:var(--at-surface-hover)} .gfroz{position:sticky;left:0;z-index:2;display:flex;background:var(--at-surface); border-right:1px solid var(--at-border-frozen)} .grow--head .gfroz{z-index:6;background:var(--at-surface-header-strip)} .gridwrap.scrolled .gfroz{box-shadow:var(--at-shadow-frozen)} .grow:not(.grow--head):hover .gfroz{background:var(--at-surface-hover)} .gutter{width:var(--at-gutter-width);flex:0 0 var(--at-gutter-width);display:flex; align-items:center;position:relative; background:inherit;border-bottom:1px solid var(--at-border-grid);padding-left:8px} .grow--head .gutter{border-bottom:1px solid var(--at-border-header)} .gutter__stripe{position:absolute;left:0;top:0;bottom:0;width:4px} .gutter__num{font-size:11px;color:var(--at-text-muted);width:32px;text-align:right; padding-right:4px} .gutter__cb{width:14px;height:14px;border:1px solid var(--at-border-control); border-radius:var(--at-radius-sm);background:var(--at-surface);display:none; align-items:center;justify-content:center;color:var(--at-text-inverse);margin-left:2px} .gutter__cb.on{display:flex;background:var(--at-brand-blue);border-color:var(--at-brand-blue)} .grow:hover .gutter__num{display:none} .grow:hover .gutter__cb{display:flex} .gutter__exp{width:20px;height:20px;border-radius:var(--at-radius-sm);background:var(--at-surface); box-shadow:var(--at-shadow-low);display:none;align-items:center;justify-content:center; color:var(--at-text-muted);margin-left:auto;margin-right:2px} .grow:hover .gutter__exp{display:flex} .grow--head .gutter__cb{margin-left:0;border-color:rgba(255,255,255,.45)} .grow--head .gutter{padding-left:12px;border-bottom:1px solid var(--at-ink2)} .gcell{flex:0 0 auto;position:relative;background:var(--at-surface);overflow:hidden; border-bottom:1px solid var(--at-rule);border-left:1px solid var(--at-rule2); padding:4px 8px;font-size:13px;line-height:20px;white-space:nowrap;text-overflow:ellipsis} /* Bands alternate and hairlines run on every cell, so the eye tracks across a wide row without a ruler and no area of the screen is bare white. The class is put on by the renderer rather than by nth-of-type, because group headers sit in the same list and would take the count out of step. */ .grow--band .gcell,.grow--band .gfroz,.grow--band .gutter{background:var(--at-band)} .gcell--num{text-align:right} .gcell--sel{box-shadow:var(--at-ring-cell);z-index:3;overflow:visible} .gcell--edit{box-shadow:var(--at-ring-cell-editing);z-index:4;padding:0} .gcell input.gedit,.gcell textarea.gedit{width:100%;height:100%;border:0;outline:none; padding:4px 8px;font:inherit;background:var(--at-surface);resize:none} /* a search hit. Weight and a neutral wash: a highlight is not a state, so it does not get to spend one of the five colours. */ .gcell mark{background:var(--at-surface-subtle);color:inherit;padding:0; font-weight:500;border-radius:var(--at-radius-xs)} .ghead{flex:0 0 auto;height:26px;display:flex;align-items:center;gap:5px; padding:0 8px;background:var(--at-ink2);color:var(--at-onink); border-bottom:1px solid var(--at-ink2); border-left:1px solid rgba(255,255,255,.10);position:relative; font-size:11px;line-height:15px;font-weight:500;letter-spacing:.04em; text-transform:uppercase;cursor:pointer} .ghead:hover{background:var(--at-ink2-hover)} /* the field type mark is a software idea. The column name is the column. */ .ghead__ico{display:none} .ghead__lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ghead__sort{margin-left:auto;color:var(--at-onink);display:flex;flex:0 0 auto} .ghead__grip{position:absolute;right:-8px;top:0;width:16px;height:25px;cursor:col-resize; z-index:7;display:flex;align-items:center;justify-content:center} .ghead__grip::after{content:"";width:3px;height:25px;background:transparent} .ghead__grip:hover::after,.ghead__grip.dragging::after{background:var(--at-onink-quiet)} /* The handle hangs 8px past its own heading's right edge so there is something to grab on either side of the seam between two columns. The LAST heading has no seam to its right, so its handle is clamped to the heading's own edge instead of hanging past it. Fixed at the one true place rather than hidden on one table and left wrong on every other. */ .grow--head > .ghead:last-child .ghead__grip{right:0} .gadd{flex:0 0 40px;height:26px;display:flex;align-items:center; justify-content:center;border-left:1px solid rgba(255,255,255,.10); border-bottom:1px solid var(--at-ink2);background:var(--at-ink2);color:var(--at-onink-quiet)} .gaddrow{height:27px;display:flex;align-items:center;background:var(--at-surface); border-bottom:1px solid var(--at-rule);position:sticky;left:0; padding-left:8px;color:var(--at-icon-plus)} .gaddrow:hover{background:var(--at-surface-hover)} .gaddrow__hit{width:32px;height:30px;display:flex;align-items:center;justify-content:center} /* group headers */ .ggroup{position:sticky;left:0;display:flex;align-items:center;gap:8px;height:28px; padding:0 8px;background:var(--at-field);border-bottom:1px solid var(--at-rule); border-top:1px solid var(--at-rule); font-size:13px;font-weight:500;width:max-content;min-width:100%} .ggroup:hover{background:var(--at-surface-hover)} .ggroup__chev{width:16px;height:16px;display:flex;align-items:center; justify-content:center;color:var(--at-text-muted);transition:transform .12s} .ggroup--closed .ggroup__chev{transform:rotate(-90deg)} .ggroup__field{font-size:11px;color:var(--at-text-muted)} .ggroup__count{font-size:11px;color:var(--at-text-muted);margin-left:8px} /* cell renderers */ .pill{display:inline-flex;align-items:center;height:18px;padding:0 7px; border-radius:var(--at-radius-sm);font-size:11px;line-height:16px;font-weight:500; color:var(--at-text);max-width:100%;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .chip{display:inline-flex;align-items:center;height:18px;padding:0 6px; border-radius:var(--at-radius-sm);background:var(--at-linked-record-bg);font-size:11px; line-height:16px;font-weight:400;color:var(--at-text);max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* text-overflow does nothing to a flex item, so a long status word was cut off square at the edge of the pill rather than ending in an ellipsis. The pill is a block inside a grid cell, where the width is not its to choose, and the ellipsis then works. Everywhere else it keeps its flex centring. */ .gcell .pill,.gcell .chip,.gcell .ll-st{display:inline-block;max-width:100%} /* Status is the column the customer scans, so a status that ends in an ellipsis is a defect: "E-Filing Rej..." and "Could Not Ser..." are not words anybody can read at a glance. The longest word in the vocabulary is E-Filing Conformed, which the state tag draws 143px wide at 13px, and a cell gives its tag 13px less than the column. So the status column has a floor of 160px on the Work grid. It is a floor and not a width: the Work grid gives the extra pixels back out of the address column, which is measured and trimmed after every draw and is the one column meant to be read in the panel rather than in the row. Two lines was the other way and it does not fit: two 13px lines is 34px inside a 32px row. Scoped to Work, and this is how. The book's own chrome carries .hidden on every area screen and only there, so #datachrome.hidden picks out exactly the screens that are not Everything. Everything opens its own columns to its own widths, adds up to 1366 on all five tables, and must not be pushed over the edge by a floor set for a different grid. */ #datachrome.hidden ~ .body .ghead[data-field="milestone"], #datachrome.hidden ~ .body .gcell[data-cell="milestone"]{min-width:160px} .gcell--pill{padding:4px 8px} .gcell--chip{padding:4px 8px} .gcell--date{padding:4px 8px;display:flex;gap:8px} .gcell--email span{text-decoration:underline} .stars{display:flex;padding:1px 0} .star{width:16px;height:16px;color:var(--at-rating-empty)} /* A rating is what a server is, not how a job is going, so it is identity * and it carries no state colour. Weight and fill say which stars are on. */ .star.on{color:var(--at-text)} .cbox{width:14px;height:14px;border:1px solid var(--at-border-control);border-radius:var(--at-radius-sm); display:inline-flex;align-items:center;justify-content:center;background:var(--at-surface)} .cbox.on{background:var(--at-brand-blue);border-color:var(--at-brand-blue);color:var(--at-text-inverse)} .att{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 6px; border-radius:var(--at-radius-sm);background:var(--at-grayLight2);font-size:11px} /* summary bar */ .summary{height:var(--at-summarybar-height);flex:0 0 var(--at-summarybar-height);display:flex;align-items:center;background:var(--at-surface); border-top:1px solid var(--at-border-grid);font-size:13px;overflow:hidden} .summary__count{width:var(--at-gutter-width);flex:0 0 var(--at-gutter-width); padding-left:8px;color:var(--at-text);font-size:11px} .summary__cells{display:flex;border-left:1px solid var(--at-border-frozen);flex:1; overflow:hidden} .summary__cell{flex:0 0 auto;height:24px;padding:0 8px;display:flex;align-items:center; justify-content:flex-end;gap:4px;color:var(--at-text-muted);font-size:13px} .summary__cell b{font-size:11px;font-weight:400} .summary__fab{width:30px;height:30px;border-radius:9999px;background:var(--at-surface); border:1px solid var(--at-border-hairline);display:flex;align-items:center; justify-content:center;margin:0 6px;flex:0 0 30px} /* ============ expanded record modal ============ */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100; display:flex;align-items:flex-start;justify-content:center;padding:48px 16px} /* The expanded record used to be a shell in this file, dressed by .recmodal, .recmodal__head, .recmodal__title, .recmodal__body, .recmodal__fields, .recmodal__side, .rf, .rf__lbl, .rf__val, .rsec, .rsec-history, .timeline, .timeline__seq, .timeline__body and .timeline__meta. LLRecord owns the record now and brings its own markup, so all sixteen are gone and so is the shell that used them. Checked against every module first: not one of those names is written anywhere else in the product. .scrim above stays. Ten modules float something on it. */ /* ============ toast ============ */ .toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:200; display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{background:var(--at-text);color:var(--at-text-inverse);border-radius:var(--at-radius-md);padding:8px 16px;font-size:13px; box-shadow:var(--at-shadow-high);max-width:min(560px,90vw)} /* ============ section hosts ============ */ /* Addressed by id, never by class. Screens set className on the element * they are handed rather than on a child of it, which wipes any class * here and with it the rule that makes the page scroll. An id cannot be * wiped that way, so the host keeps its shape whatever a screen does. */ /* Ruled paper behind a screen, not bare white. "We don't want it to be white space behind there, because the eye slows down a little more when it's not just white space behind." A screen that fills its host paints its own ground over this; a screen that does not, like New order with one drop box on it, stands on the band instead of on nothing. */ #sectionhost{flex:1;min-height:0;overflow:auto;background:var(--at-band)} /* ============ misc ============ */ .emptystate{padding:40px 24px;text-align:center;color:var(--at-text-muted);font-size:13px} .menu{position:fixed;z-index:150;background:var(--at-surface);border-radius:var(--at-radius-md); box-shadow:var(--at-shadow-high);padding:6px;min-width:200px} .menu__item{width:100%;display:flex;align-items:center;gap:8px;height:28px;padding:0 8px; border-radius:var(--at-radius-sm);font-size:13px;text-align:left} .menu__item:hover{background:var(--at-surface-subtle)} .menu__sep{height:1px;background:var(--at-border-grid);margin:4px 0} /* No module overrides live here any more, and none should be added. * A rule in this file that reaches into a module's own prefix wins the * cascade silently and the module's owner cannot see why their screen is * wrong. That happened: a cap and a colour written here held the board's * alert strip in a shape its own file had already abandoned, and it cost * a round trip to find. If a screen needs a rule, it belongs in that * screen's file. */ /* The host owns the height of the window and scrolls when a screen is * taller than it. A screen that manages its own scrolling sizes itself to * the host and never overflows, so it never sees a second scrollbar. A * screen that simply grows, like the order screen, gets one, which is what * anybody would expect and the absence of which cost a person a * demonstration. */ #sectionhost{overflow:auto;display:flex;flex-direction:column} #sectionhost > *{min-height:0} #sectionhost.hidden{display:none!important} /* the toolbar search clear only belongs on screen once there is something to clear */ .vt-tools .llv-search:not(.llv-search--open) .llv-search__clear, .vt-tools .llv-search:not(.llv-search--open) .llv-search__input{display:none} /* ============ round two additions ============ */ .btn-launch--on{background:var(--at-surface-subtle)} .subtabs{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:5px 10px; background:var(--at-surface);border-bottom:1px solid var(--at-border-hairline)} .subtab{height:26px;padding:0 10px;border-radius:var(--at-radius-sm);font-size:13px; color:var(--at-text-muted)} .subtab:hover{background:var(--at-surface-subtle)} .subtab--on{background:var(--at-surface-subtle);color:var(--at-text);font-weight:500} .subhost{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} /* The one loud thing on the screen it appears on. It was green, which in this product means finished, and a proof that has not been made yet is the opposite of finished. It is the blue that means somebody is working this now, which is what pressing it does. */ .btn-proof{width:100%;height:30px;border-radius:var(--at-radius-lg); background:var(--at-stateActive-solid);color:var(--at-stateActive-onsolid); font-size:13px;font-weight:500;box-shadow:var(--at-shadow-low); display:flex;align-items:center;justify-content:center} .btn-proof:hover{filter:brightness(1.12)} /* ============ round four: selection, washes and the summary bar ============ */ /* A column that is filtering, sorting or grouping used to be washed green, orange or purple. Three colours that said nothing about the state of any job, in a product where colour says exactly one thing. They are one neutral wash now, and which of the three is on is read off the toolbar button that is lit and the weight on the column heading. */ :root{ --at-wash-filter:var(--at-surface-subtle); --at-wash-sort:var(--at-surface-subtle); --at-wash-group:var(--at-surface-subtle); } /* a block of cells, and the column header above it. The fill says which cells are in, the blue edge says where the block stops. */ .gcell--range{background:var(--at-blue-selection-fill); --rng-t:0 0 0 0 transparent;--rng-b:0 0 0 0 transparent; --rng-l:0 0 0 0 transparent;--rng-r:0 0 0 0 transparent; box-shadow:var(--rng-t),var(--rng-b),var(--rng-l),var(--rng-r);z-index:2} .grow:not(.grow--head):hover .gcell--range{background:var(--at-blue-selection-fill)} .gcell--rt{--rng-t:inset 0 2px 0 0 var(--at-brand-blue)} .gcell--rb{--rng-b:inset 0 -2px 0 0 var(--at-brand-blue)} .gcell--rl{--rng-l:inset 2px 0 0 0 var(--at-brand-blue)} .gcell--rr{--rng-r:inset -2px 0 0 0 var(--at-brand-blue)} .ghead--sel{background:var(--at-blue-selection-fill)} /* the ring is the cell's own shadow, so it is not clipped by this, but the value is, which stops a long one running across its neighbour */ .gcell--sel{box-shadow:var(--at-ring-cell);z-index:3;overflow:hidden} /* the arrow a cell earns once it is the selected one */ .gcell__aff{position:absolute;right:2px;top:50%;transform:translateY(-50%); width:20px;height:20px;border-radius:var(--at-radius-sm);background:var(--at-surface); box-shadow:var(--at-shadow-low);display:flex;align-items:center; justify-content:center;color:var(--at-text-muted);z-index:4;padding:0} .gcell__aff:hover{background:var(--at-surface-subtle);color:var(--at-text)} .gcell--chip.gcell--sel .chip{padding-right:4px} /* which column the filter and the sort are standing on */ .gcol--filtered{background:var(--at-wash-filter)} .gcol--sorted{background:var(--at-wash-sort)} .gcol--grouped{background:var(--at-wash-group)} .grow:not(.grow--head):hover .gcol--filtered, .grow:not(.grow--head):hover .gcol--sorted, .grow:not(.grow--head):hover .gcol--grouped{background:var(--at-surface-hover)} .ghead.gcol--filtered,.ghead.gcol--sorted,.ghead.gcol--grouped{font-weight:500} .llv-btn--active[data-tool="filter"],.llv-toolbtn--on[data-tool="filter"]{ background:var(--at-wash-filter)} .llv-btn--active[data-tool="sort"],.llv-toolbtn--on[data-tool="sort"]{ background:var(--at-wash-sort)} /* the summary cells are controls now, so they look like controls. The word Summary on a cell with nothing set is seven grey words across the foot of every screen saying nothing, so it waits until the pointer is on the bar. */ .summary__cell{border:0;background:transparent;font:inherit;cursor:pointer; border-radius:var(--at-radius-sm)} .summary__cell .quiet{opacity:0} .summary:hover .summary__cell .quiet,.summary__cell:focus-visible .quiet{ opacity:var(--at-quiet-opacity)} .summary__cell:hover{background:var(--at-surface-subtle);color:var(--at-text)} .summary__cell--set{color:var(--at-text)} /* the bar carries the same frozen pane as the grid, and the rest of it travels with the grid, so a summary stays under its own column */ .summary{position:relative} .summary__froz{display:flex;align-items:center;flex:0 0 auto;background:var(--at-surface); border-right:1px solid var(--at-border-frozen);position:relative;z-index:2} /* the undo pair rides at the right hand end, clear of the columns */ .summary .ll-gxb-undo{position:absolute;right:6px;top:3px;background:var(--at-surface); border-radius:var(--at-radius-sm);box-shadow:-10px 0 10px 4px var(--at-surface);z-index:5} .summary__scroll{flex:1;min-width:0;overflow:hidden} .summary__cells{border-left:0;overflow:visible;width:max-content;flex:0 0 auto; will-change:transform} /* the gutter slot is exactly the grid's gutter, so everything to the right of it lines up. The count sits in it and is allowed to run on past it, over the left hand end of the first summary, which is empty because a summary reads from the right. */ .summary__gut{width:84px;flex:0 0 84px;display:flex;align-items:center; position:relative} .summary__count{position:absolute;left:44px;top:50%;transform:translateY(-50%); white-space:nowrap;color:var(--at-text);width:auto;flex:none; /* it runs on past the gutter, so it carries its own paper with it and never sits on top of the first summary */ padding:0 8px 0 0;background:var(--at-surface);z-index:3} /* a taller band for a group header, so it reads as a heading and not a row */ .ggroup{height:44px} /* option search inside a picker */ .menu__find{display:flex;align-items:center;gap:6px;padding:2px 6px 6px; color:var(--at-text-muted)} .menu__findin{flex:1;min-width:0;height:26px;border:1px solid var(--at-border-hairline); border-radius:var(--at-radius-sm);padding:0 6px;font:inherit;font-size:13px;outline:none} .menu__findin:focus{border-color:var(--at-brand-blue)} .menu__list{max-height:260px;overflow:auto} .menu__item--on{background:var(--at-surface-subtle)} .menu--summary{min-width:220px;max-height:min(420px,80vh);overflow:auto} /* the view list, in the toolbar rather than down the side */ .menu--views{min-width:232px} .menu--views .menu__list{max-height:min(420px,60vh)} .menu__lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu__item--on .menu__lbl{font-weight:500} .menu__tick{margin-left:auto;display:flex;color:var(--at-text-muted)} .menu__item:focus{outline:none;background:var(--at-surface-subtle)} .menu__item:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color);outline-offset:-2px} /* the long text popout */ .ltpop{width:420px;padding:10px} .ltpop__lbl{font-size:11px;color:var(--at-text-muted);padding:0 2px 6px} .ltpop__ta{width:100%;height:180px;border:1px solid var(--at-border-hairline); border-radius:var(--at-radius-sm);padding:8px;font:inherit;font-size:13px;line-height:18px; outline:none;resize:vertical} .ltpop__ta:focus{border-color:var(--at-brand-blue)} .ltpop__foot{display:flex;align-items:center;gap:8px;padding-top:8px} .ltpop__foot .quiet{flex:1;font-size:11px} .ltpop__save{height:26px;padding:0 12px;border-radius:var(--at-radius-sm);font-size:13px; font-weight:500;background:var(--at-accent);color:var(--at-stateActive-onsolid)} .ltpop__save:hover{filter:brightness(1.08)} /* One search box, not two. The working one is in the toolbar on the left; this is the empty second control that shipped with the view tools. */ .vt-tools .llv-search{display:none} /* the sidebar rename box */ .vs-rename{width:100%;height:32px;border:1px solid var(--at-brand-blue); border-radius:var(--at-radius-sm);padding:0 10px;font:inherit;font-size:13px;outline:none} .menu__item--off{opacity:.45;cursor:default} .menu__item--off:hover{background:transparent} /* ============ the colour system ============ Not here any more, and deliberately. The five state colours and the five kind colours are decided in exactly one place, schema.js, and app.js writes them into the page as #ll-palette on the first paint. This file used to carry a pasted copy, which meant a rebalanced palette was right in one file and stale in another. Read the tokens, never a value: --at-stateBlocked something is stopping this --at-stateWaiting waiting on somebody outside this office --at-stateActive being worked now --at-stateDone finished, and only ever finished --at-stateParked deliberately set aside each with -ink, -solid and -onsolid, plus --at-stripe-* for the 4px row stripe. The .ll-pal-- pill classes come with them. Identity is not state. A service type, a document name, a county, a client or a form number is what a thing IS, not how it is going, and it carries no colour at all. Type weight and case instead. */ /* ============ the server phone, framed ============ */ .subtab--right{margin-left:auto} .phonescrim{align-items:center} .phoneframe{width:412px;max-width:96vw;height:min(880px,92vh);background:var(--at-surface); border-radius:22px;box-shadow:var(--at-shadow-high);overflow:hidden; display:flex;flex-direction:column;border:8px solid var(--at-text)} .phoneframe__bar{flex:0 0 auto;height:38px;display:flex;align-items:center;gap:8px; padding:0 10px;background:var(--at-text);color:var(--at-text-inverse);font-size:11px} .phoneframe__bar span{font-weight:500} .phoneframe__pick{margin-left:auto;height:24px;border-radius:var(--at-radius-md);border:0;font-size:11px; background:rgba(255,255,255,.16);color:var(--at-text-inverse);padding:0 6px;max-width:150px} .phoneframe__x{color:var(--at-text-inverse);font-size:11px;padding:0 6px;height:24px;border-radius:4px} .phoneframe__x:hover{background:rgba(255,255,255,.16)} .phoneframe__screen{flex:1;min-height:0;overflow:auto;position:relative;background:var(--at-surface)} /* ===================================================================== * The Ledger frame. Five floors, top to bottom, on every screen. * * 0 the header, dark ink: mark, areas, one search box, who you are * 1 the area strip: what am I looking at, and the count * 2 the body: the grid, or the area's own screen * 3 the detail panel strip, collapsed until a row is clicked * 4 the bucket bar, the floor, always five buttons and live counts * * Colour appears in exactly three places on a screen: the status tag, the * bucket counts and the attention strip. A colour here always means state * of play, which is why nothing in this block carries a hue of its own. * ===================================================================== */ /* ---- Floor 1, the area strip ---- What am I looking at, on the left, in the one large size. What is in it, on the right, as a plain count. Between them, the few places this area can go that are not areas of their own. */ .astrip{flex:0 0 auto;min-height:var(--at-areastrip-height); display:flex;align-items:center;gap:12px;padding:5px 12px; background:var(--at-field);border-bottom:1px solid var(--at-rule); color:var(--at-tx)} .astrip__ttl{font-size:17px;line-height:22px;font-weight:500;white-space:nowrap} .astrip__sub{font-size:13px;color:var(--at-tx2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0} .astrip__spacer{margin-left:auto} .astrip__count{font-size:13px;color:var(--at-tx2);white-space:nowrap} .astrip__lnk{font-size:13px;color:var(--at-tx2);background:none;border:0; padding:0 2px;cursor:pointer;white-space:nowrap;text-decoration:underline; text-underline-offset:2px;text-decoration-color:var(--at-rule)} .astrip__lnk:hover{color:var(--at-tx)} /* the one loud mark on a screen, when the strip is where it belongs */ .astrip__loud{font-size:13px;font-weight:500;color:var(--at-loud); background:none;border:0;cursor:pointer;white-space:nowrap;padding:0 2px} .astrip__loud:hover{text-decoration:underline;text-underline-offset:2px} .astrip__pill{height:20px;padding:0 8px;font-size:11px;font-weight:500; border:1px solid var(--at-rule);background:var(--at-paper); border-radius:var(--at-radius-sm);color:var(--at-tx2);cursor:pointer} .astrip__pill:hover{background:var(--at-band);color:var(--at-tx)} .astrip__pill--on{background:var(--at-ink);border-color:var(--at-ink); color:var(--at-onink)} /* ---- Floor 3, the detail panel host ---- No height of its own. LLDetail sets it, 0 closed and up to seven tenths of the window open, which is why the grid above has min-height:0 and shrinks rather than scrolling the page. */ .dethost{flex:0 0 auto;height:0;overflow:hidden} /* ---- Floor 4, the bucket bar ---- Five buttons, always the same five, always live counts, and a zero prints as 0 rather than disappearing. Inside In the field, three pills isolate a service level without touching status. */ .bbar{flex:0 0 var(--at-bucketbar-height);height:var(--at-bucketbar-height); display:flex;align-items:stretch;background:var(--at-ink);color:var(--at-onink); overflow:hidden} .bbar__b{display:flex;align-items:center;gap:8px;padding:0 16px; background:none;border:0;border-right:1px solid rgba(255,255,255,.10); color:var(--at-onink-quiet);cursor:pointer;white-space:nowrap; font-size:13px;line-height:18px} .bbar__b:hover{background:rgba(255,255,255,.07);color:var(--at-onink)} .bbar__b--on{background:var(--at-ink-raise);color:var(--at-onink)} .bbar__b--on .bbar__n{color:var(--at-onink)} .bbar__nm{font-weight:400} .bbar__b--on .bbar__nm{font-weight:500} .bbar__n{font-size:17px;line-height:22px;font-weight:500;color:var(--at-onink); font-variant-numeric:tabular-nums} /* A count that needs somebody, on the one pile that needs somebody most. Drawn as the Blocked column tag and not as the loud solid: the loud solid is one mark per SCREEN and the bucket bar is on every screen, so a loud solid down here spent the screen's one mark before the screen had drawn anything. The tag is the same state in the same family, unmistakable on a dark bar, and it leaves the screen its own mark. */ .bbar__alert{display:inline-flex;align-items:center;height:16px;padding:0 5px; border-radius:var(--at-radius-sm);font-size:11px;font-weight:500; background:var(--at-scan-blocked);color:var(--at-scan-blocked-ink)} .bbar__lv{display:flex;align-items:center;gap:4px;margin-left:2px} .bbar__p{height:20px;padding:0 7px;font-size:11px;line-height:18px; border:1px solid rgba(255,255,255,.22);background:transparent; border-radius:var(--at-radius-sm);color:var(--at-onink-quiet);cursor:pointer; white-space:nowrap} .bbar__p:hover{background:rgba(255,255,255,.12);color:var(--at-onink)} .bbar__p--on{background:var(--at-onink);border-color:var(--at-onink); color:var(--at-ink);font-weight:500} .bbar__say{margin-left:auto;align-self:center;padding:0 16px;font-size:11px; color:var(--at-onink-quiet);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} @media (max-width:1200px){ .bbar__say{display:none} } /* ---- the person menu, under the person's name ---- Change history, Admin and Client view are things a person does now and then, not places they work, so they live behind one control instead of spending three tabs. */ .pmenu{position:relative;display:flex;align-items:center} .pmenu__b{width:26px;height:26px;display:flex;align-items:center; justify-content:center;border:0;background:none;color:var(--at-onink-quiet); cursor:pointer;border-radius:var(--at-radius-sm)} .pmenu__b:hover{background:rgba(255,255,255,.08);color:var(--at-onink)} .pmenu__m{position:absolute;top:34px;right:0;min-width:200px;z-index:60; background:var(--at-paper);border:1px solid var(--at-rule); border-radius:var(--at-radius-lg);box-shadow:var(--at-shadow-high);padding:4px; color:var(--at-tx)} .pmenu__i{display:block;width:100%;text-align:left;border:0;background:none; font:inherit;font-size:13px;color:var(--at-tx);padding:6px 10px;cursor:pointer; border-radius:var(--at-radius-sm)} .pmenu__i:hover{background:var(--at-band)} .pmenu__i--off{color:var(--at-tx3);cursor:default} .pmenu__i--off:hover{background:none} /* ---- the sign in, over the whole page ---- .ll-lg is position:absolute;inset:0 with z-index 40, so its host has to be positioned and full size. */ .loginhost{position:fixed;inset:0;z-index:40;background:var(--at-band)} .loginhost.hidden{display:none!important} /* ---- the work grid ---- Nine columns and nothing else by default. The eye reads a row of it the way it reads a line in a ledger, so nothing in it is rounded and nothing in it is bare. */ #gridarea.hidden{display:none!important} /* Empty space is ruled paper rather than white. The rules keep running under the last row at the same 28px pitch, so the sheet reads as a sheet and the eye does not fall off the bottom of the list. */ .gridwrap{background: repeating-linear-gradient(to bottom, var(--at-band) 0, var(--at-band) 27px, var(--at-rule2) 27px, var(--at-rule2) 28px)} /* Anything the grid cannot fit truncates in the cell and shows in full in the panel below. Nothing is ever pushed off the right edge. */ .gcell,.ghead__lbl{text-overflow:ellipsis} /* ---- an area that has nothing in it yet ---- */ .emptyarea{padding:32px 16px;color:var(--at-tx2);font-size:13px} .emptyarea b{display:block;font-size:17px;font-weight:500;color:var(--at-tx); margin-bottom:6px} .summary.hidden{display:none!important} /* The row the panel is standing on. The one loud mark on this screen: a 3px bar down the left of the row and the row itself lifted off the band, so the eye goes straight back to it after reading the panel. */ .grow--open .gcell,.grow--open .gfroz,.grow--open .gutter{background:var(--at-row-open)} .grow--open .gutter{box-shadow:inset 3px 0 0 0 var(--at-loud)} /* ======================================================================= * THE CRAFT PASS. 17 September 2026. * * Everything above this line is the Ledger pass of the 12th and the face * lift of the 16th, and none of it is deleted, because a dozen screens * still read those classes. What follows re dresses the frame, the five * tiles, the working list, the rail and the two dark bars to ONE scale. * The product was organised before this pass and correct before it. What * it was not was made, and made is a thing a person can see. * * The scale, and there is only one: * * space 4, 8, 12, 16, 24, 32, from --at-space-*, and nothing between. * The page gutter is 16 on every floor, so the left edge of the * title, the tiles, the list and the rail is one line down the * screen, and the air between floors is 12 all the way down. * type 11 on 15, 13 on 18, 17 on 22. Weight 400 and weight 500. One * display size, 30 on 32, and it is a KPI number and nothing * else. Every number in the product is tabular. * radius 3 a mark, 5 a tag or a field, 7 a floating panel, 10 a card, * a full lozenge on a pill. * shadow --at-shadow-low on a thing that sits on the page, and it is * the only shadow above the fold. --at-shadow-high is for a * thing floating over the page. Nothing carries both. * border one hairline, --at-rule, and it never carries hierarchy. A * card has a hairline AND a low shadow because the hairline is * what holds the edge on a light band, not what lifts it. * focus one ring, --at-focus-*, on every control. The accent on a * light surface, white on the two dark bars, where the accent * measures 2.86 to 1 and a ring has to clear 3. * * Colour still means state of play and nothing else. The five tiles are * the five states, which is the one place a colour appears above the * list, and the tile edge is drawn INSIDE the tile so it belongs to it. * ===================================================================== */ /* ---- the page ---- */ body{background:var(--at-band);color:var(--at-tx);font-family:var(--at-font-sans)} .surface{background:var(--at-band)} /* ---- Floor 0a, the top bar. #081729, 56px. ---- Left to right: whose copy this is, the one box a hand reaches for, who is signed in. The mark is a quiet raised plate rather than a coloured one: the accent is the control a person is meant to reach for, and a logo is not a control. That leaves the search box the brightest thing on the bar, which is the truth about which of them gets used. */ .bhead{height:var(--at-header-height);flex:0 0 var(--at-header-height); background:var(--at-ink);padding:0 var(--at-space-4);gap:var(--at-space-4); border-bottom:0} .brand{gap:var(--at-space-2)} /* The mark is a plate of paper with the ink on it, 18.03 to 1, and it is the only thing on this bar made of paper. Everything on the bar that a person can PRESS is raised navy, so the mark cannot be mistaken for a control and does not have to spend the accent to be seen. */ .bhead__icon{width:32px;height:32px;flex:0 0 32px; border-radius:var(--at-radius-md);border:0; background:var(--at-paper);color:var(--at-ink); font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); font-weight:var(--at-weight-medium);letter-spacing:.02em} .bhead__name{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base); font-weight:var(--at-weight-medium);letter-spacing:.01em; color:var(--at-onink);max-width:260px} .bhead__right{gap:var(--at-space-3)} .savestate{font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); color:var(--at-onink-quiet)} /* The search box. The widest thing on the bar because it is the thing a hand reaches for most, and the only thing on the bar with a fill of its own. 32px tall, on the control radius, hairline edged in the ink family so the edge belongs to the bar rather than being drawn on top of it. */ .cmdslot{flex:1 1 auto;min-width:0;max-width:560px;display:flex} .cmdslot .ll-cmd-slim{width:100%;height:32px;gap:var(--at-space-2); padding:0 var(--at-space-3);border-radius:var(--at-radius-md); background:var(--at-ink-raise);border:1px solid var(--at-ink-edge); box-shadow:none;color:var(--at-onink); font-size:var(--at-font-size-base);line-height:var(--at-line-height-base)} .cmdslot .ll-cmd-slim:hover{background:var(--at-ink-raise2); border-color:var(--at-ink-raise2)} .cmdslot .ll-cmd-slim:focus-within{background:var(--at-ink-raise2); border-color:var(--at-ink-raise2); outline:var(--at-focus-width) solid var(--at-focus-color-onink); outline-offset:1px} .cmdslot .ll-cmd-slim__ico{color:var(--at-onink)} .cmdslot .ll-cmd-slim__txt{color:var(--at-onink-quiet)} .cmdslot .ll-cmd-slim__kbd{color:var(--at-onink-quiet); background:rgba(255,255,255,.06);border-color:var(--at-ink-edge); border-radius:var(--at-radius-xs); font-size:var(--at-font-size-xs);line-height:16px} /* every square control on the dark bar is the same square */ .iconbtn,.pmenu__b{width:28px;height:28px;border-radius:var(--at-radius-sm)} /* ---- Floor 0b, the area bar. #0f2a4a, 38px, the five words. ---- The word you are on is white, medium, and carries a white bar under it. No hue: a colour on this bar would mean a state of play, and which area a person is standing in is not a state of play. Decision 94 (his 35) draws the words as pills on this navy, the one you are on a white pill; that is in the frame sheet (app.js FRAME_CSS), which wins over this. */ .bnav{height:var(--at-navbar-height);flex:0 0 var(--at-navbar-height); display:flex;align-items:stretch;background:var(--at-ink2); padding:0 var(--at-space-4);position:relative;z-index:28;overflow:visible} .bnav .bhead__tabs{margin:0;gap:var(--at-space-1);overflow:visible;flex:1 1 auto} .stab{height:var(--at-navbar-height);padding:0 var(--at-space-3); gap:var(--at-space-2);border-radius:0; font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); font-weight:var(--at-weight-regular);color:var(--at-onink-quiet)} .stab:hover{color:var(--at-onink);background:rgba(255,255,255,.06)} .stab--on{color:var(--at-onink);font-weight:var(--at-weight-medium)} .stab--on::after{content:"";position:absolute;left:var(--at-space-3); right:var(--at-space-3);bottom:0;height:2px;background:var(--at-onink)} /* a word that has a count worth showing carries it as a small plate. On the word you are on the plate inverts, which says the same thing twice in two ways and costs no colour. */ .stab__n{display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:16px;padding:0 6px;border-radius:var(--at-radius-pill); background:rgba(255,255,255,.14);color:var(--at-onink); font-size:var(--at-font-size-xs);line-height:16px; font-weight:var(--at-weight-medium);font-variant-numeric:tabular-nums} .stab--on .stab__n{background:var(--at-onink);color:var(--at-ink2)} .stab__sep{display:none} /* ---- Floor 1, the area strip. One line, no chips, ever. ---- What am I looking at, in the one large size, and beside it the few places this area can go. 12px of air above and below, which is the same 12px that runs between every floor below it. */ .astrip{min-height:var(--at-areastrip-height);background:var(--at-band); border-bottom:0;padding:var(--at-space-3) var(--at-space-4); gap:var(--at-space-3)} .astrip__ttl{font-size:var(--at-font-size-title); line-height:var(--at-line-height-title); font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-tight); color:var(--at-tx)} .astrip__sub,.astrip__count{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx2)} .astrip__lnk{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx2); text-decoration:none;border-bottom:1px solid var(--at-rule)} .astrip__lnk:hover{color:var(--at-accent-strong); border-bottom-color:var(--at-accent)} /* the one control on the screen a person is meant to reach for, and the only place the accent appears above the list. A tint and the strong accent on it, 6.52 to 1, rather than a solid: a solid teal button here would out shout five tiles that are telling him what is wrong. */ .astrip__loud{height:24px;padding:0 var(--at-space-3); border-radius:var(--at-radius-sm); background:var(--at-accent-tint);color:var(--at-accent-strong); font-size:var(--at-font-size-base);line-height:22px; font-weight:var(--at-weight-medium)} .astrip__loud:hover{background:var(--at-accent);color:var(--at-accent-onsolid); text-decoration:none} .astrip__pill{height:24px;padding:0 var(--at-space-2); font-size:var(--at-font-size-xs);line-height:22px; font-weight:var(--at-weight-medium);border-radius:var(--at-radius-sm)} /* ---- Floor 1a, the five numbers. ---- * The first thing anybody sees, so the number is the tile: 30px, tabular, * tracked in a hair, in the body ink. The label above it is 11px caps with * air between the letters, and the line under it is the quiet explanation. * Label and explanation are the same grey; what tells them apart is case * and weight, not two more colours. * * The tile is one of the five states, which is why it is allowed a colour * at all. That colour is drawn as a 3px INSET edge rather than a strip * laid over the left side: an inset follows the tile's own 10px corner, so * it is part of the tile and cannot come unstuck from it. * * 12 + 14 + 4 + 32 + 4 + 14 + 12 = 92, which is --at-kpi-height. */ .kpirow{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr); gap:var(--at-kpi-gap);padding:0 var(--at-space-4) var(--at-space-3)} .kpirow.hidden{display:none!important} .kpi{position:relative;display:flex;flex-direction:column; justify-content:center;gap:var(--at-space-1);min-width:0;text-align:left; height:auto;min-height:var(--at-kpi-height); padding:var(--at-space-3) var(--at-space-4); border-radius:var(--at-radius-lg);background:var(--at-paper); border:1px solid var(--at-rule); box-shadow:inset 3px 0 0 0 var(--at-kpi-edge,var(--at-rule-strong)), var(--at-shadow-low); cursor:pointer; transition:box-shadow .12s ease,border-color .12s ease} .kpi::before{content:none} .kpi:hover{border-color:var(--at-rule-strong); box-shadow:inset 3px 0 0 0 var(--at-kpi-edge,var(--at-rule-strong)), var(--at-shadow-high)} .kpi:focus{outline:none} .kpi:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} /* the tile that is filtering the list. The accent says which one you are standing on, the same statement it makes everywhere else. */ .kpi--on{border-color:var(--at-accent); box-shadow:inset 3px 0 0 0 var(--at-kpi-edge,var(--at-rule-strong)), 0 0 0 3px var(--at-accent-tint),var(--at-shadow-low)} .kpi__lbl{font-size:var(--at-font-size-xs);line-height:14px; font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-caps); text-transform:uppercase;color:var(--at-tx3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi__n{font-family:var(--at-font-display); font-size:var(--at-font-size-display); line-height:var(--at-line-height-display); font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-tight); color:var(--at-tx);font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .kpi__sub{font-size:var(--at-font-size-xs);line-height:14px; font-weight:var(--at-weight-regular);color:var(--at-tx3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- the list and the rail beside it ---- The split is the frame for BOTH grids, so its air and its card chrome belong to the working screen alone. Everything, the book, is a full width spreadsheet with its own toolbar above it. */ .worksplit{flex:1;min-height:0;display:flex;gap:0;padding:0;align-items:stretch} .worksplit--work{gap:var(--at-rail-gap); padding:0 var(--at-space-4) var(--at-space-3)} .workmain{flex:1;min-width:0;display:flex;flex-direction:column} /* the list is a card, dressed exactly like every other card on the page */ .worksplit--work .workmain{background:var(--at-paper); border:1px solid var(--at-rule);border-radius:var(--at-radius-lg); overflow:hidden;box-shadow:var(--at-shadow-low)} .workrail{flex:0 0 var(--at-rail-width);width:var(--at-rail-width); min-width:0;overflow:auto;display:flex;flex-direction:column; gap:var(--at-space-3)} .workrail.hidden,.workrail:empty{display:none} /* Nothing ever scrolls sideways on a laptop. Under 1200px of window the rail folds away entirely rather than squeezing the list. */ @media (max-width:1199px){ .workrail{display:none!important} } .railcard{background:var(--at-paper);border:1px solid var(--at-rule); border-radius:var(--at-radius-lg); padding:var(--at-space-3) var(--at-space-4); box-shadow:var(--at-shadow-low)} .railcard__t{display:flex;align-items:center;gap:var(--at-space-2); font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-caps); text-transform:uppercase;color:var(--at-tx3); margin-bottom:var(--at-space-2)} .railcard__live{width:6px;height:6px;border-radius:var(--at-radius-pill); background:var(--at-stateDone-solid); box-shadow:0 0 0 3px var(--at-stateDone)} .railrow{display:flex;align-items:center;gap:var(--at-space-2);width:100%; min-height:32px;padding:var(--at-space-1) 0;background:none;border:0; border-bottom:1px solid var(--at-rule);cursor:pointer; font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); color:var(--at-tx2);text-align:left} .railrow:last-child{border-bottom:0;padding-bottom:0} .railrow:hover{color:var(--at-accent-strong)} .railrow:focus{outline:none} .railrow:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset);border-radius:var(--at-radius-xs)} .railrow__l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .railrow__n{flex:0 0 auto;min-width:24px;height:18px;padding:0 var(--at-space-2); border-radius:var(--at-radius-pill); background:var(--at-field);color:var(--at-tx3); font-size:var(--at-font-size-xs);line-height:18px; font-weight:var(--at-weight-medium);text-align:center; font-variant-numeric:tabular-nums} .railrow__n--hot{background:var(--at-stateWaiting); color:var(--at-stateWaiting-ink)} /* ---- the list itself ---- 56px a row, and it stays 56px. A cell is one or two lines: the line that is read is 13px medium in the body ink, the line under it is 11px in the label grey. Nothing in the list is bold and nothing in it is a box. */ .gridwrap{background:var(--at-paper)} .gridwrap:not(.gridwrap--book){background:var(--at-paper)} .grid--work .grow{background:var(--at-paper)} .grid--work .gcell,.grid--work .gfroz,.grid--work .gutter{background:var(--at-paper)} /* no zebra striping. One hairline under each row and nothing else. */ .grid--work .grow--band .gcell,.grid--work .grow--band .gfroz, .grid--work .grow--band .gutter{background:var(--at-paper)} .grid--work .grow:not(.grow--head):hover .gcell, .grid--work .grow:not(.grow--head):hover .gfroz, .grid--work .grow:not(.grow--head):hover .gutter{background:var(--at-field)} .grid--work .grow--open .gcell,.grid--work .grow--open .gfroz, .grid--work .grow--open .gutter{background:var(--tab-soft)} .grid--work .grow--open .gutter{box-shadow:none} .grid--work .gfroz{border-right:0} .grid--work .gcell{border-left:0;border-bottom:1px solid var(--at-rule); padding:var(--at-space-2) var(--at-space-3); font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); color:var(--at-tx2); white-space:normal;display:flex;flex-direction:column;justify-content:center; gap:2px} .grid--work .gutter{border-bottom:1px solid var(--at-rule); padding-left:var(--at-space-3)} .grid--work .grow--head .gutter{border-bottom:1px solid var(--at-rule)} /* the 1, 2, 3 counter does not print in the working list at all, see app.js; the book keeps it. */ /* the heading row: the label grey in 11px caps on the second surface, at 4.73 to 1, and the column being sorted on in the strong accent */ .grid--work .ghead{height:32px;background:var(--at-field); color:var(--at-tx3);border-left:0; border-bottom:1px solid var(--at-rule); font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-caps); padding:0 var(--at-space-3)} .grid--work .ghead:hover{background:var(--at-rule2);color:var(--at-tx2)} .grid--work .ghead--sorted,.grid--work .ghead[data-sorted]{color:var(--at-accent-strong)} .grid--work .ghead__sort{color:var(--at-accent-strong)} .grid--work .grow--head,.grid--work .grow--head .gfroz{background:var(--at-field)} .grid--work .gaddrow{display:none} /* the Due cell: the date, then how long ago or how late, in words */ .wdue{display:flex;flex-direction:column;gap:2px;min-width:0} .wdue__d{font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); font-weight:var(--at-weight-medium);color:var(--at-tx); font-variant-numeric:tabular-nums} .wdue__r{font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); color:var(--at-tx3)} .wdue__r--late{color:var(--at-stateBlocked-ink);font-weight:var(--at-weight-medium)} .wdue__r--now{color:var(--at-stateWaiting-ink);font-weight:var(--at-weight-medium)} /* the Matter cell: who the job is against, then the case number underneath */ .wmat{display:flex;flex-direction:column;gap:1px;min-width:0} .wmat__a{font-size:var(--at-font-size-base);line-height:var(--at-line-height-base); font-weight:var(--at-weight-medium);color:var(--at-tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wmat__b{font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); color:var(--at-tx3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the work order name, in the machine face, because it is read digit by digit down a column and off a proof */ .wno{font-family:var(--at-font-mono);font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx2); font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* one uniform tag for every kind of work. A service level is what a job IS, never how it is going, so it never takes a state colour. */ .wtag{display:inline-block;max-width:100%;padding:1px var(--at-space-2); border-radius:var(--at-radius-sm);background:var(--at-field); color:var(--at-tx2);border:1px solid var(--at-rule); font-size:var(--at-font-size-xs);line-height:16px; font-weight:var(--at-weight-medium); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wplain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* a cell that is empty for a plain reason says so, quietly, rather than leaving a hole that reads as a bug */ .wplain--empty{color:var(--at-tx3);font-style:normal} /* the four dash meter. A picture of how far along a job is, so a person reads it without reading anything. It never stands alone: the cell carries the status word for a screen reader and for a hover, and the status pill sits in the next column along. */ .wmeter{display:flex;gap:3px;align-items:center} .wdash{width:14px;height:5px;border-radius:var(--at-radius-xs); background:var(--at-rule2);flex:0 0 14px} .wdash--done{background:var(--at-accent)} .wdash--now{background:var(--at-stateWaiting-solid)} /* the status pill: a leading dot in its own ink, the tint behind the word. One pill everywhere, list and panel alike. */ .wpill{display:inline-flex;align-items:center;gap:var(--at-space-1);height:20px; padding:0 var(--at-space-2);border-radius:var(--at-radius-pill); font-size:var(--at-font-size-xs);line-height:20px; font-weight:var(--at-weight-medium); max-width:100%;overflow:hidden;white-space:nowrap; background:var(--at-stateParked);color:var(--at-stateParked-ink)} .wpill__dot{width:6px;height:6px;border-radius:var(--at-radius-pill);flex:0 0 6px; background:currentColor} .wpill__w{overflow:hidden;text-overflow:ellipsis} .wpill--blocked{background:var(--at-stateBlocked);color:var(--at-stateBlocked-ink)} .wpill--waiting{background:var(--at-stateWaiting);color:var(--at-stateWaiting-ink)} .wpill--active{background:var(--at-stateActive);color:var(--at-stateActive-ink)} .wpill--done{background:var(--at-stateDone);color:var(--at-stateDone-ink)} .wpill--parked{background:var(--at-stateParked);color:var(--at-stateParked-ink)} /* the work list's status column has no 160px floor: the pill is 11px and the column is 146, which is the measurement */ #datachrome.hidden ~ .body .grid--work .ghead[data-field="milestone"], #datachrome.hidden ~ .body .grid--work .gcell[data-cell="milestone"]{min-width:0} /* the empty ruled paper under the last row belongs to the Ledger. A card with a white floor does not want it. */ .grid--work ~ *,.gridwrap:has(.grid--work){background:var(--at-paper)} /* ---- Floor 4, the bucket bar. ---- * This is the navigation, not a footer, so it is built like a row of * controls: the pile you are standing in is filled in the area bar's own * navy, carries a white edge along the top and puts its name in medium. * The count is the fact, so it is white and 17px; the name beside it is * the label, so it is quiet and 13px. The service level pills sit INSIDE * a bucket, so they are lozenges at 11px with a hairline and no fill, * which reads as secondary to the thing they sit in without being faint. */ .bbar{flex:0 0 var(--at-bucketbar-height);height:var(--at-bucketbar-height); display:flex;align-items:stretch;background:var(--at-ink); color:var(--at-onink);overflow:hidden} .bbar__b{position:relative;display:flex;align-items:center; gap:var(--at-space-2);padding:0 var(--at-space-4); background:none;border:0;border-right:1px solid rgba(255,255,255,.08); color:var(--at-onink-quiet);cursor:pointer;white-space:nowrap; font-size:var(--at-font-size-base);line-height:var(--at-line-height-base)} .bbar__b:hover{background:rgba(255,255,255,.06);color:var(--at-onink)} /* The pile you are standing in. --at-ink-raise is the token's own answer to a control sitting on an ink bar, and it lifts 1.38 to 1 off the bar where the area bar navy only lifts 1.14, which nobody sees. The white edge along the top and the name in medium say it twice more. */ .bbar__b--on{background:var(--at-ink-raise);color:var(--at-onink)} .bbar__b--on::before{content:"";position:absolute;left:0;right:0;top:0; height:2px;background:var(--at-onink)} .bbar__b:focus{outline:none} .bbar__b:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color-onink); outline-offset:-3px} .bbar__nm{font-weight:var(--at-weight-regular)} .bbar__b--on .bbar__nm{font-weight:var(--at-weight-medium)} .bbar__n{font-size:var(--at-font-size-title); line-height:var(--at-line-height-title); font-weight:var(--at-weight-medium);letter-spacing:var(--at-tracking-tight); color:var(--at-onink);font-variant-numeric:tabular-nums} .bbar__b--on .bbar__n{color:var(--at-onink)} /* A count that needs somebody, on the one pile that needs somebody most. Drawn as the Blocked column tag and not as the loud solid: the loud solid is one mark per SCREEN and the bucket bar is on every screen. */ .bbar__alert{display:inline-flex;align-items:center;height:18px; padding:0 var(--at-space-2);border-radius:var(--at-radius-pill); font-size:var(--at-font-size-xs);line-height:18px; font-weight:var(--at-weight-medium); background:var(--at-stateBlocked);color:var(--at-stateBlocked-ink); font-variant-numeric:tabular-nums} .bbar__lv{display:flex;align-items:center;gap:var(--at-space-1); margin-left:var(--at-space-1)} .bbar__p{height:20px;padding:0 var(--at-space-2); border-radius:var(--at-radius-pill); border:1px solid rgba(255,255,255,.18);background:transparent; color:var(--at-onink-quiet);cursor:pointer;white-space:nowrap; font-size:var(--at-font-size-xs);line-height:18px; font-weight:var(--at-weight-regular);font-variant-numeric:tabular-nums} .bbar__p:hover{background:rgba(255,255,255,.10);color:var(--at-onink)} .bbar__p--on{background:var(--at-onink);border-color:var(--at-onink); color:var(--at-ink);font-weight:var(--at-weight-medium)} .bbar__p:focus{outline:none} .bbar__p:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color-onink); outline-offset:2px} .bbar__say{margin-left:auto;align-self:center;padding:0 var(--at-space-4); font-size:var(--at-font-size-xs);line-height:var(--at-line-height-xs); color:var(--at-onink-quiet);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} @media (max-width:1200px){ .bbar__say{display:none} } /* ---- the summary bar under the list ---- */ .summary{background:var(--at-paper);border-top:1px solid var(--at-rule)} /* ---- one focus ring, on everything that takes the keyboard ---- Handsome, visible, and drawn from the tokens. The accent on a light surface at 5.06 to 1 against paper; white on the two dark bars, where the accent measures 2.86 to 1 against the navy and a ring has to clear 3 to 1. Nothing here draws a ring on a mouse click, only on a keyboard. */ .astrip__lnk:focus,.astrip__loud:focus,.astrip__pill:focus, .vs-item:focus,.subtab:focus,.summary__cell:focus, .pmenu__b:focus,.pmenu__i:focus{outline:none} .astrip__lnk:focus-visible,.astrip__loud:focus-visible, .astrip__pill:focus-visible,.vs-item:focus-visible,.subtab:focus-visible, .summary__cell:focus-visible,.pmenu__i:focus-visible{ outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset);border-radius:var(--at-radius-sm)} .stab:focus-visible,.pmenu__b:focus-visible,.iconbtn:focus-visible, .btn-launch:focus-visible,.brand:focus-visible, .loginslot .ll-lg-sw__b:focus-visible{ outline:var(--at-focus-width) solid var(--at-focus-color-onink); outline-offset:-2px;border-radius:var(--at-radius-sm)} .brand:focus-visible{outline-offset:var(--at-focus-offset)} .vs-find input:focus,.menu__findin:focus,.vs-rename:focus, .ltpop__ta:focus,.vt-tools .llv-search__input:focus{ outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:1px;border-color:var(--at-accent)} /* ---- beating the Ledger's zebra on the working list ---- * LLGridA injects its own banding at run time, after this file, so a rule * here only wins by being more specific than its. The working list has no * bands: a 1px divider is the whole of what separates two rows. */ .gridwrap .grid--work .grow[data-row]:nth-child(even) .gcell, .gridwrap .grid--work .grow[data-row]:nth-child(even) .gutter, .gridwrap .grid--work .grow[data-row]:nth-child(even) .gfroz, .gridwrap .grid--work .grow[data-row]:nth-child(odd) .gcell, .gridwrap .grid--work .grow[data-row]:nth-child(odd) .gutter, .gridwrap .grid--work .grow[data-row]:nth-child(odd) .gfroz{background:var(--at-paper)} .gridwrap .grid--work .grow[data-row]:not(.grow--head):hover .gcell, .gridwrap .grid--work .grow[data-row]:not(.grow--head):hover .gutter, .gridwrap .grid--work .grow[data-row]:not(.grow--head):hover .gfroz{background:var(--at-field)} .gridwrap .grid--work .grow.ll-gxa-pick .gcell, .gridwrap .grid--work .grow.ll-gxa-pick .gutter, .gridwrap .grid--work .grow.ll-gxa-pick .gfroz, .gridwrap .grid--work .grow--open .gcell, .gridwrap .grid--work .grow--open .gutter, /* decision 94: the row in hand is his soft blue, his tr.selected */ .gridwrap .grid--work .grow--open .gfroz{background:var(--tab-soft)} .gridwrap .grid--work .grow.ll-gxa-pick .gutter, .gridwrap .grid--work .grow--open .gutter{box-shadow:none} /* ---- the last of it ---- */ /* a cell is a stack of one or two lines, and what is in it sits at the left rather than being stretched across the column */ .grid--work .gcell{align-items:flex-start} .grid--work .gcell > *{max-width:100%} /* a matter, a client or a county is allowed the second line the mockup gives it rather than ending in three dots on the first. It wraps at a space only, the way a person reading it expects; a single word too long for the column is not cut into two pieces, it runs to the end of the last line and the ellipsis marks where it was cut. Two 18px lines and 16px of padding is 52, which fits the 56px row with room to spare. */ .wplain{white-space:normal;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden; line-height:var(--at-line-height-base); word-break:normal;overflow-wrap:normal} /* The last heading's grip is clamped to its own edge at the one true rule * above (`.grow--head > .ghead:last-child .ghead__grip{right:0}`), which * fixed the 8px of sideways scroll on every table, not just this one. */ /* ===================================================================== * THE CUSTOMER'S FRAME. 18 September 2026. * * His header, his navigation row, his period strip and his six tiles, * drawn on this product's own tokens. Nothing below invents a colour: the * two dark bars, the two greys and the one accent are the ones already in * tokens.css, and the accent is whichever of the six the office picked. * * Measured, on the surfaces each pair is actually drawn on: * * white on the top bar #ffffff on #081729 18.02 to 1 * the quiet line on the top bar #aebdcf on #081729 9.42 to 1 * white on the area bar #ffffff on #0f2a4a 14.49 to 1 * the words not stood on #aebdcf on #0f2a4a 7.58 to 1 * a count plate, not stood on #ffffff on the 14 per cent * white plate over #0f2a4a 9.40 to 1 * a count plate, stood on #0f2a4a on #ffffff 14.49 to 1 * a figure in the strip #101b28 on #ffffff 17.36 to 1 * the word beside a figure #5f6c78 on #ffffff 5.38 to 1 * a period pill not chosen #485661 on #eef1ee 6.64 to 1 * a period pill chosen #101b28 on #ffffff 17.36 to 1 * the right hand sentence #5f6c78 on #ffffff 5.38 to 1 * the help panel #101b28 on #ffffff 17.36 to 1 * its Close #485661 on #eef1ee 6.64 to 1 * * Calendar in that sentence is the accent as text, so it moves with the * office's own choice. All six were measured through the same reading the * shell makes before it draws one, and every one of them clears it: * * accent white on fill as text on paper on band on its own tint * teal 6.30 9.11 8.39 7.86 * navy 9.72 12.52 11.52 10.57 * green 6.39 9.06 8.34 7.83 * purple 7.38 10.18 9.37 8.74 * red 6.54 9.08 8.36 7.69 * gold 6.85 9.65 8.88 8.34 * * The shell measures the pair again at boot and every time the office * changes it. One that cannot be read is not drawn and the accent the * build shipped stays, so no setting can put unreadable text on a screen. * * The one red this product owns measures 3.27 to 1 on the top bar, which * is why the save state does not use it: a state nobody can read is not a * state. It says what it is in words, in the brighter of the bar's two * inks, one weight up. * ===================================================================== */ /* ---- Floor 0, the top bar ---- The mark and the two lines beside it, then the search box, then the day and who is looking. The search box sits beside the mark rather than being pushed to the far end, because that is where his hand goes. */ .bhead__right{margin-left:auto;flex:0 0 auto;gap:var(--at-space-4); justify-content:flex-end} .cmdslot{flex:1 1 auto;min-width:0;max-width:560px} .brand__words{display:flex;flex-direction:column;align-items:flex-start; min-width:0;gap:0} .bhead__name{line-height:var(--at-line-height-base);max-width:230px} /* His second line. Small caps with air between the letters, in the quiet half of the bar, so it sits under the name without competing with it. */ .bhead__tag{font-size:var(--at-font-size-xs);line-height:13px; font-weight:var(--at-weight-regular);letter-spacing:var(--at-tracking-caps); text-transform:uppercase;color:var(--at-onink-quiet); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px} .brand--logo .bhead__tag{display:none} /* The day badge. Two lines, right aligned, and the second one is the only quiet thing this bar still has to carry. */ .daybadge{display:flex;flex-direction:column;align-items:flex-end; min-width:0;gap:0;text-align:right} .daybadge__d{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);font-weight:var(--at-weight-medium); color:var(--at-onink);white-space:nowrap;font-variant-numeric:tabular-nums} .savestate{display:block;font-size:var(--at-font-size-xs); line-height:13px;color:var(--at-onink-quiet);white-space:nowrap} /* Not the ordinary state. The red this product owns cannot be read on this navy, so what says so is the brighter ink and one step of weight. */ .savestate--off{color:var(--at-onink);font-weight:var(--at-weight-medium)} @media (max-width:1460px){ .savestate{display:block} } @media (max-width:1100px){ .daybadge{display:none} } /* ---- Floor 0b, the area row ---- Nine words. The one you are standing on is white, medium, and carries a white bar under it. A word with a number carries a small rounded plate after it, which inverts on the word you are standing on. Nothing here takes a hue: which part of the office you are in is not a state of play. The row WRAPS rather than overflowing, so no window width can put a sideways scrollbar under it. */ .bnav{height:auto;min-height:var(--at-navbar-height);flex:0 0 auto; align-items:center;flex-wrap:wrap} .bnav .bhead__tabs{flex-wrap:wrap;overflow:visible} .stab{min-height:var(--at-navbar-height);height:auto} .stab__w{white-space:nowrap} .stab__i{flex:0 0 14px;opacity:.9} .stab--on .stab__i{opacity:1} @media (max-width:1180px){ .stab{padding:0 var(--at-space-2)} .stab--on::after{left:var(--at-space-2);right:var(--at-space-2)} } @media (max-width:900px){ .stab__i{display:none} } /* The help panel. It hangs off the word that opened it and it is the one thing on the page floating over the rest, so it takes the high shadow and nothing else does. */ .helphost{position:absolute;left:0;right:0;top:100%;height:0;z-index:40} .helppop{position:absolute;top:var(--at-space-1);width:420px;max-width:calc(100vw - 32px); background:var(--at-paper);border:1px solid var(--at-rule); border-radius:var(--at-radius-lg);box-shadow:var(--at-shadow-high); padding:var(--at-space-4);color:var(--at-tx); display:flex;flex-direction:column;gap:var(--at-space-2)} .helppop__t{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);font-weight:var(--at-weight-medium)} .helppop__p{margin:0;font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx2)} .helppop__x{align-self:flex-start;margin-top:var(--at-space-1); height:24px;padding:0 var(--at-space-3);border:1px solid var(--at-rule); background:var(--at-field);color:var(--at-tx2); border-radius:var(--at-radius-sm);cursor:pointer; font-size:var(--at-font-size-base);line-height:22px} .helppop__x:hover{background:var(--at-rule2);color:var(--at-tx)} .helppop__x:focus{outline:none} .helppop__x:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} /* ---- Floor 0c, the period strip ---- One card on the page band. The pills on the left, the figures in the middle in the body ink with their words in the quiet grey, and the one sentence that says when it starts again on the right. Numbers are tabular so the row does not jump when a figure changes. */ .tally{flex:0 0 auto;background:var(--at-band); padding:var(--at-space-2) var(--at-space-4) 0} .tally.hidden{display:none!important} .tally__card{display:flex;align-items:center;flex-wrap:wrap; gap:var(--at-space-3) var(--at-space-4); min-height:var(--at-tally-height); padding:var(--at-space-2) var(--at-space-3); background:var(--at-paper);border:1px solid var(--at-rule); border-radius:var(--at-radius-lg);box-shadow:var(--at-shadow-low)} .tally__pills{display:flex;align-items:center;gap:2px;flex:0 0 auto; padding:2px;background:var(--at-field);border-radius:var(--at-radius-pill)} .tally__p{height:24px;padding:0 var(--at-space-3);border:0;background:none; border-radius:var(--at-radius-pill);cursor:pointer;white-space:nowrap; color:var(--at-tx2);font-size:var(--at-font-size-base);line-height:24px; font-weight:var(--at-weight-regular);font-family:inherit} .tally__p:hover{color:var(--at-tx)} .tally__p--on{background:var(--at-paper);color:var(--at-tx); font-weight:var(--at-weight-medium);box-shadow:var(--at-shadow-low)} .tally__p:focus{outline:none} .tally__p:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} .tally__figs{display:flex;align-items:baseline;flex-wrap:wrap; gap:var(--at-space-1) var(--at-space-4);min-width:0} .tally__f{display:inline-flex;align-items:baseline;gap:var(--at-space-1); white-space:nowrap} .tally__n{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);font-weight:var(--at-weight-medium); color:var(--at-tx);font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .tally__n--money{font-variant-numeric:tabular-nums} .tally__w{font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx3)} .tally__say{margin-left:auto;font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-tx3);min-width:0} .tally__lnk{background:none;border:0;padding:0;cursor:pointer; font-family:inherit;font-size:var(--at-font-size-base); line-height:var(--at-line-height-base);color:var(--at-accent-strong); border-bottom:1px solid var(--at-rule)} .tally__lnk:hover{border-bottom-color:var(--at-accent)} .tally__lnk:focus{outline:none} .tally__lnk:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} @media (max-width:1280px){ .tally__say{margin-left:auto;width:100%} } /* ---- Floor 1a, the tiles ---- Six of them now, and however many the office chooses. The count is written on the row itself so a row of five is five even widths and not six with a hole in it. The rules under it are written later at the same weight, so a narrow window still wins. */ .kpirow{grid-template-columns:repeat(var(--at-kpi-n,6),minmax(0,1fr))} @media (max-width:1100px){ .kpirow{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:760px){ .kpirow{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---- New Order, the customer's stepper ---- 1 Job Type, 2 Documents, 3 Order Details in the window head. A step behind the one in hand carries a check on the accent tint, as he drew it; a Documents step passed with none is the same check, quiet. */ .ll-in-window .ll-md-step.ll-md-done .ll-md-stepn{background:var(--at-accent-tint); border-color:var(--at-accent);color:var(--at-accent-strong)} .ll-in-window .ll-md-step.ll-md-done[data-none] .ll-md-stepn{background:var(--at-surface-subtle); border-color:var(--at-rule-strong);color:var(--at-text-muted)} /* ---- Walk 2 finding 8: a phone never scrolls sideways ---- At 400 wide the page was 885 wide: the tally strip in the band carries a row of figures that does not fold. The band now scrolls inside its own box, and the page itself is held to the width of the screen, so a window or a list can never be pushed off the left edge. */ @media (max-width:600px){ html,body{overflow-x:hidden;max-width:100vw} #app,#surface{max-width:100vw;min-width:0} #bandhost{overflow-x:auto;max-width:100vw;-webkit-overflow-scrolling:touch} } /* ---- Paper ---- Every print view (the proof, the payment summary, a message from Going out) is drawn by its own module under its own print class, and hides the rest of the page there. The shell's part is the paper itself: white, no band colour, no fixed heights holding a page to the screen, and none of the shell's own chrome (the header, the rail, the toast, the help button), whichever module is printing. */ @media print{ html,body{background:none !important;height:auto !important;min-height:0 !important; overflow:visible !important} #toasts,#railhost,#toolbarhost{display:none !important} } /* =========================================================================== * ยง35 THE MODERN LOOK, SYSTEM WIDE (his rev 6.9, decision 94). Style only. * * The same marine blue pill tabs as New Order, on every tab bar, filter * chip, segmented control and side nav, selected cards and tiles on the * soft blue, and softer rounder surfaces (12px, the --at-radius-lg token). * No markup, id, class or script is changed by this block. The colours * are the --tab-* tokens in tokens.css; their dark values are in the * shell's dark sheet (app.js DARK_TOKENS), so dark mode follows by itself. * The seat accent is left alone: it still colours the one primary button * (decision 17), and nothing here touches .ll-btn-primary. * * WHY EVERY SELECTOR STARTS WITH :root. This sheet is read first. Each * screen injects its own sheet after it at run time (ll-dt-, ll-co-, * ll-pe__, ...), so a rule here at the same weight as the screen's own * loses. One :root in front of the screen's own selector is one step more * weight and wins wherever the two are written. Where a screen writes its * own dark mode rule with :root already in it (Setup), the rule here says * :root twice. His class names (.ftab, .tabbtn, .drawer-tabbar, .co-tab, * .chip, .np-seg, .setup-navbtn, .kpi, ...) are not ours; each line below * says which of his it is. The main tab bar (his .tabbar, .tabbtn) is the * shell's own and lives in app.js FRAME_CSS with the rest of the frame. * ========================================================================= */ /* his drawer tab bars, .drawer-tabbar and .dtabbtn: the job window's Job and Close out, the contractor window, the job page, the old panel */ :root .ll-dt-ptabs{background:var(--tab-track);border:1px solid var(--tab-track-bd); border-radius:12px;padding:5px;gap:4px;align-items:center;margin-bottom:2px} :root .ll-dt-ptab{height:auto;border-bottom:0;margin-bottom:0;border-radius:8px; color:var(--tab-ink);padding:7px 12px;transition:background .15s,color .15s} :root .ll-dt-ptab:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-dt-ptab.ll-dt-ptab--on,:root .ll-dt-ptab.ll-dt-ptab--on:hover{background:var(--tab-on); color:var(--tab-on-ink);border-bottom-color:transparent;box-shadow:var(--tab-on-shadow)} :root .ll-dt-ptab--on .ll-dt-chip{background:rgba(255,255,255,.22);color:#fff} :root .ll-dt-ptabs .ll-dt-btn{margin-bottom:0} :root .ll-pe__tabbar,:root .ll-jp-tabs,:root .ll-dt-tabs{background:var(--tab-track); border:1px solid var(--tab-track-bd);border-radius:12px;padding:5px;gap:4px} :root .ll-pe__tb,:root .ll-jp-tab,:root .ll-dt-tab{height:auto;border-bottom:0;border-radius:8px; color:var(--tab-ink);padding:7px 12px;transition:background .15s,color .15s} :root .ll-pe__tb:hover,:root .ll-jp-tab:hover,:root .ll-dt-tab:hover{background:var(--tab-hover); color:var(--tab-hover-ink)} :root .ll-pe__tb.ll-pe__tb--on,:root .ll-jp-tab[aria-selected="true"], :root .ll-dt-tab[aria-selected="true"]{background:var(--tab-on);color:var(--tab-on-ink); border-bottom-color:transparent;box-shadow:var(--tab-on-shadow)} :root .ll-dt-tab[aria-selected="true"] .ll-dt-count{color:var(--tab-on-ink);opacity:.85} /* his close out tabs, .co-tabs and .co-tab: the fourteen quick tabs and the folder tabs over them. A count keeps its own red or amber; on the tab you are on it carries a white ring so it still reads on the blue. */ :root .ll-co-tabs{background:var(--tab-track);border:1px solid var(--tab-track-bd); border-radius:12px;padding:5px;gap:4px} :root .ll-co-tab{border-color:transparent;background:transparent;border-radius:8px; color:var(--tab-ink);transition:background .15s,color .15s} :root .ll-co-tab:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-co-tab.ll-co-tab--on,:root .ll-co-tab.ll-co-tab--on:hover{background:var(--tab-on); border-color:var(--tab-on);color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} :root .ll-co-tab--on .ll-co-n{box-shadow:0 0 0 1.5px var(--tab-on-ink)} :root .ll-co-tab--on .ll-co-dot{background:var(--tab-on-ink)} /* the other tab rows: Messages, Money, the client portal, Imports From The Field, the Clients list */ :root .ll-msg-tabs{background:var(--tab-track);border-bottom-color:var(--tab-track-bd)} :root .ll-msg-tab{border-radius:8px;color:var(--tab-ink)} :root .ll-msg-tab:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-msg-tab.ll-msg-tab--on{background:var(--tab-on);border-color:var(--tab-on); color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} :root .ll-mo-tab{padding:0 12px;margin:3px 0;border-radius:8px;color:var(--tab-ink)} :root .ll-mo-tab:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-mo-tab.ll-mo-on{background:var(--tab-on);color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} :root .ll-mo-tab.ll-mo-on::after{content:none;display:none} :root .ll-mo-tabstrip{gap:4px;background:var(--tab-track);height:auto;min-height:36px} :root .ll-po-tabs{gap:4px;border-bottom:0;background:var(--tab-track);border:1px solid var(--tab-track-bd); border-radius:12px;padding:5px} :root .ll-po-tab{border-bottom:0;margin-bottom:0;border-radius:8px;color:var(--tab-ink)} :root .ll-po-tab:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-po-tab.ll-po-on{background:var(--tab-on);color:var(--tab-on-ink); border-bottom-color:transparent;box-shadow:var(--tab-on-shadow)} :root .ll-im-tab{border-radius:8px} :root .ll-im-tab.ll-im-tab--on{background:var(--tab-on);border-color:var(--tab-on);color:var(--tab-on-ink)} :root .ll-pe__tab{border-radius:8px} :root .ll-pe__tab.ll-pe__tab--on{background:var(--tab-on);border-color:var(--tab-on);color:var(--tab-on-ink)} /* his filter chips and quick pick pills, .chip.on and .mc-pill.on */ :root .ll-pe__chip,:root .ll-po-chip,:root .ll-im-chip,:root .ll-msg-pill,:root .ll-tr__pick{border-radius:8px} :root .ll-pe__chip.ll-pe__chip--on,:root .ll-po-chip.ll-po-on,:root .ll-im-chip.ll-im-chip--on, :root .ll-msg-pill.ll-msg-pill--on,:root .ll-tr__pick.ll-tr__pick--on{background:var(--tab-on); border-color:var(--tab-on);color:var(--tab-on-ink)} /* his segmented controls, .np-seg, .np-vsw and .tally-period: the period strip over Orders, the Dispatch views, the Contractors switch, Money's periods, the panels, New Order's own two way choices, Setup's switch */ :root .ll-kb-per,:root .ll-dp-views,:root .ll-pe__seg,:root .ll-mo-seg,:root .ll-pn-seg,:root .ll-in-seg{ background:var(--tab-track);border:1px solid var(--tab-track-bd);border-radius:10px;padding:3px;gap:3px} :root .ll-kb-pb,:root .ll-dp-view,:root .ll-pe__sg,:root .ll-mo-btn,:root .ll-pn-seg button,:root .ll-in-seg-b{ border-radius:7px;background:transparent;color:var(--tab-ink)} :root .ll-pe__sg + .ll-pe__sg,:root .ll-in-seg-b{border-left:0;border-right:0} :root .ll-kb-pb:hover,:root .ll-dp-view:hover,:root .ll-pe__sg:hover,:root .ll-mo-btn:hover, :root .ll-pn-seg button:hover,:root .ll-in-seg-b:hover{background:var(--tab-hover);color:var(--tab-hover-ink)} :root .ll-kb-pb.ll-kb-pb--on,:root .ll-dp-view.ll-dp-view--on,:root .ll-pe__sg.ll-pe__sg--on, :root .ll-pe__sg.ll-pe__sg--on:hover,:root .ll-mo-btn.ll-mo-on,:root .ll-pn-seg button.on, :root .ll-in-seg-b.ll-in-seg-on{background:var(--tab-on);color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} :root .ll-su__seg{background:var(--tab-track);border-color:var(--tab-track-bd);border-radius:10px;padding:3px;gap:3px} :root .ll-su__seg button{border-radius:7px;background:transparent;color:var(--tab-ink)} :root .ll-su__seg button + button{border-left:0} /* Setup says its own dark rules with :root and a theme in them, so this says :root three times to outweigh both */ :root:root:root .ll-su__seg button[aria-pressed="true"]{background:var(--tab-on); color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} /* his side navs, .setup-nav and .setup-navbtn: Setup, Merchant, Help, and the client portal's. The mark itself is the --at-nav-on tokens. */ :root .ll-su__nav,:root .ll-mc__nav,:root .ll-hp__nav{border-radius:12px;gap:4px} :root .ll-su__navbtn,:root .ll-mc__navbtn,:root .ll-hp__navbtn{border-radius:8px;color:var(--tab-ink)} :root .ll-su__navbtn:hover,:root .ll-mc__navbtn:hover,:root .ll-hp__navbtn:hover{background:var(--tab-hover); color:var(--tab-hover-ink)} :root:root .ll-su__navbtn.ll-su__navbtn--on,:root:root .ll-su__navbtn.ll-su__navbtn--on.ll-su__navbtn--locked, :root:root .ll-mc__navbtn.ll-mc__navbtn--on,:root:root .ll-hp__navbtn.ll-hp__navbtn--on{ background:var(--tab-on);color:var(--tab-on-ink);box-shadow:var(--tab-on-shadow)} :root:root .ll-su__navbtn.ll-su__navbtn--on:hover,:root:root .ll-mc__navbtn.ll-mc__navbtn--on:hover, :root:root .ll-hp__navbtn.ll-hp__navbtn--on:hover{background:var(--tab-on)} :root .ll-su__navbtn.ll-su__navbtn--locked:hover{color:var(--at-text-muted)} :root .ll-po-navbtn{border-radius:8px} :root .ll-po-navbtn.ll-po-on{background:var(--tab-on);color:var(--tab-on-ink)} /* his selected cards and tiles, .kpi.active, .kindcard.selected and the rest: the tile that narrows the list, the Merchant figure, a Dispatch card in hand, a picked card in the Contractors window */ :root .ll-kb-tile.ll-kb-tile--on{border-color:var(--tab-on); box-shadow:0 0 0 2px var(--tab-soft),var(--at-shadow-low)} :root .ll-mc__kpi.ll-mc__kpi--active{border-color:var(--tab-on); box-shadow:0 0 0 2px var(--tab-soft),var(--at-shadow-low)} :root .ll-dp-kcard.ll-dp-kcard--sel{box-shadow:0 0 0 2px var(--tab-on)} :root .ll-pe__kcard.ll-pe__kcard--on{border-color:var(--tab-on);background:var(--tab-soft)}