/* Soroudi base — the layout language every dashboard shares. * * THIS FILE IS THE SOURCE. tools/sync-shared.js copies it into every app as * public/base.css; those copies are OUTPUT, and `npm run check-shared` fails the * build if one has been edited in place. Change it here and run `npm run sync`. * A per-app tweak belongs in that app's own styles.css, which loads after this * and wins. * * WHERE IT COMES FROM. All of this was worked out in soroudi-trips over a long * stretch of tuning, and this file is that work extracted so its siblings stop * being separate products. Trips still owns the PALETTE (the six themes in * each styles.css) and it owns the design decisions here; what it does not own * any more is a private copy of them. * * WHAT IT DELIBERATELY DOES NOT CONTAIN: anything that knows what an app shows. * A trip card, a transaction row and a medication list are different objects and * should look different. This file is the grid they sit on -- type scale, the * four display preferences, focus, motion, and the settings controls that change * them -- not the objects themselves. * * HOW THE PREFERENCES TRAVEL BETWEEN APPS, which is the part that makes the * dashboards feel like one: they are read from `soroudi_display_v1` in * localStorage, and since the dashboards were moved under one origin * (dash.rajuabju.com//) that storage is genuinely shared. Setting the text * size in Trips sets it in Finance, with no server, no syncing and no API. The * theme is the exception and still goes through the SHARED D1 database, because * it predates the move and has to survive a new device. */ /* --------------------------------------------------------------------------- The unit everything is measured in --------------------------------------------------------------------------- */ /* --px is one CSS pixel expressed in rem: 1/16rem, exactly 1px while the root font size is the 16px browsers ship with. Every size below multiplies by it instead of writing px directly. * * The point is what happens when the root ISN'T 16px. A px is a px whatever the * reader has asked for, so a stylesheet written in px ignores the browser's * font-size setting and Android's text-scaling slider -- the two controls a * person with poor eyesight actually reaches for. In rem it follows them. * * --fs is separate and does its own job: it is the app's OWN text-size * preference. The two multiply, so a reader who has set both gets both. */ :root { --px: 0.0625rem; --fs: 1.22; --lh: 1.5; --pad: 1; --main-w: 1600px; --cards-w: 1000px; --detail-w: 1200px; } /* A size in the app's scale. Use it for every font-size: font-size: var(--t-14); not font-size: 14px; The named steps exist so a stylesheet does not fill up with calc() and so the set of sizes in use stays small enough to be a scale rather than a habit. */ :root { --t-11: calc(11 * var(--px) * var(--fs)); --t-12: calc(12 * var(--px) * var(--fs)); --t-12-5: calc(12.5 * var(--px) * var(--fs)); --t-13: calc(13 * var(--px) * var(--fs)); --t-13-5: calc(13.5 * var(--px) * var(--fs)); --t-14: calc(14 * var(--px) * var(--fs)); --t-14-5: calc(14.5 * var(--px) * var(--fs)); --t-15: calc(15 * var(--px) * var(--fs)); --t-16: calc(16 * var(--px) * var(--fs)); --t-17: calc(17 * var(--px) * var(--fs)); --t-20: calc(20 * var(--px) * var(--fs)); --t-25: calc(25 * var(--px) * var(--fs)); } /* --------------------------------------------------------------------------- The four display preferences --------------------------------------------------------------------------- Set as data attributes on by the pre-paint script in each index.html, so they apply before the first frame rather than causing a visible reflow. */ /* WHICH THEME THE BROWSER'S OWN CONTROLS SHOULD BE DRAWN IN. --------------------------------------------------------------------------- `color-scheme` is what a with no font of its own is drawn by the platform, which is why Life Admin's buttons were Times too and trips' were Arial while its body was not. `font: inherit` is the whole fix, and it belongs here rather than in seven stylesheets. */ button, input, select, textarea { font-family: inherit; } /* The page's own column. Every app's main content sits in one of these so that "Compact" and "Full" mean the same thing in every one. */ .wrap { width: 100%; max-width: var(--main-w); margin-inline: auto; } /* --------------------------------------------------------------------------- Settings controls --------------------------------------------------------------------------- The segmented control the display preferences are chosen with. Identical in every app, because a settings screen that differs per dashboard is the first place "one product" stops being true. */ .seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 16px; } /* Two rows belonging to one control sit closer than two separate controls do. */ .seg.seg-row-tight { margin-bottom: 6px; } .seg button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: var(--t-13-5); font-weight: 600; } .seg button.on { background: var(--accent); border-color: transparent; color: var(--accent-contrast); } .seg-label { font-size: var(--t-12-5); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* A live sample of the setting being chosen, so the choice is visible before it is made rather than after. */ .seg-preview { border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 4px; /* Density-aware, so the preview box reacts to the density setting the same way the rows it is previewing do. A fixed padding here would make the preview a poor sample of the thing it is meant to preview. */ line-height: var(--lh); padding: calc(12px * var(--pad)) calc(14px * var(--pad)); } .seg-preview .p1 { font-weight: 650; font-size: var(--t-14-5); } .seg-preview .p2 { color: var(--muted); font-size: var(--t-13); margin-top: calc(3px * var(--pad)); } /* --------------------------------------------------------------------------- The app header --------------------------------------------------------------------------- Measured across the five before this existed: heights of 56, 62, 65, 70 and 80px, three different class names, brand marks between 20 and 34px, wordmarks between 18.3 and 30.5px, and inner columns of 1180px, 1600px and none. Each was reasonable on its own and the set was not, which is exactly what you notice switching apps inside one installed PWA. The geometry is here; the markup stays each app's own. An app opts in by giving its header bar `.top` and wrapping its contents in `.top-in`. THE SAFE-AREA INSET GOES ON THE BAR, NOT THE CONTENT. On an installed iPhone the bar runs under the notch, so the padding that clears it has to sit on the element painting the background -- put it on the inner column and the background stops short of the top of the screen. Finance had it on the bar's BOTTOM padding, which pushed its own content down by the height of a notch it was not clearing. */ .top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); } .top-in { max-width: var(--main-w); margin: 0 auto; padding: calc(12px * var(--pad)) 16px; display: flex; align-items: center; gap: 12px; } /* The wordmark is a name, not a control: nothing in the brand should invite a tap, because the only header action that navigates is Refresh. */ .brand { display: flex; align-items: center; gap: 9px; min-width: 0; } /* Scaled with the text, not pinned: trips did this and the others did not, so raising the text size grew the wordmark and left the mark beside it stranded at its original size. height:auto keeps whatever aspect the file has. */ .brand-mark { width: calc(26 * var(--px) * var(--fs)); height: auto; display: block; flex: 0 0 auto; } .brand-name { /* THE BROWSER'S h1 MARGIN, WHICH SET THE HEIGHT OF TWO HEADERS. Six of the seven dashboards that carry .brand-name mark the wordmark up as

and trips uses a . An h1 carries margin: 0.67em 0 from the user-agent stylesheet, and this rule never cleared it -- so the wordmark added 27.8px of its own margin to a 31.1px line, making .brand 58.9px tall inside a row whose other controls are 43.9px, and the whole bar 83.9px instead of 67.9px. Purchases, Medical and Finance happened to escape it because their own stylesheets reset heading margins globally; Home & Vehicles and Life Admin did not, which is the entire reason those two headers were taller. Measured 2026-09-13. */ margin: 0; font-size: var(--t-17); font-weight: 650; letter-spacing: -.01em; /* One line, and the name is what gives way on a narrow phone -- the actions beside it are the things a person came to press. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* A phone gives back the horizontal padding first, because the wordmark and the actions are competing for a 390px line and the actions must not wrap. Two of the four apps had this and two did not, which left the bar at three different heights on a phone while looking identical on a desktop. */ @media (max-width: 560px) { .top-in { padding: calc(10px * var(--pad)) 12px; } /* MARK ONLY on a phone. The wordmark is redundant there -- you opened the app, and the family nav along the bottom already says which one you are in -- and it was not fitting: three of the four truncated their own name to "Soroudi Purcha…". Dropping it hands the width to the controls, so nothing has to truncate or crowd the mark. Trips worked this out first and had it alone; it belongs to all of them. */ .brand-name { display: none; } .brand { flex: 0 0 auto; gap: 0; } .brand-mark { width: calc(28 * var(--px) * var(--fs)); } } /* ONE HEIGHT FOR HEADER CONTROLS, which is what actually made the bars differ. The brand row is identical in every dashboard; the bar around it was 62, 70, 80 and 60px because the tallest button in each set was 37, 45, 45 and 35px. A header's height is decided by its biggest control, so that is where the consistency has to be enforced -- matching the paddings would only hold until one app's button gained a border. Scaled with the text like everything else, and comfortably above the 44px touch target once the reader has asked for larger type. Vertical padding is zeroed because the height is now explicit; the flex centring each app already uses does the rest. */ .top-in .btn, .top-in .icon-btn, .top-in .mini-btn, /* .text-btn was missed when this rule was written, and `.top-actions > button` did not catch it either because trips calls its row .header-actions. So trips' Sign Out sat at 37px beside four 44px controls -- not tall enough to change the bar's height, which is why it survived the pass that set these, and visibly the odd one out to anyone looking at the row. Measured 2026-09-13. */ .top-in .text-btn, .top-actions > button, .header-actions > button, /* The hub's header is .head inside main, not a sticky .top-in bar, so none of the selectors above reach its theme button. Named here rather than given a height in the hub's own stylesheet, so there is still ONE place that decides how tall a header control is. Added 2026-09-13 with that button. */ .head > .btn, .hdr-btn { height: calc(36 * var(--px) * var(--fs)); min-height: 0; padding-top: 0; padding-bottom: 0; } /* ...AND THE CONTENTS CENTRED INSIDE IT. Giving a control an explicit height says nothing about where its text goes. A