and matches main's width, so it reads as part of the page rather than as a floating toast that could be missed. */ .expiry-banner { max-width: 920px; margin: 1rem auto -.5rem; padding: .6rem .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; border: 1px solid var(--warn); border-radius: 10px; background: rgba(255,180,84,.09); color: var(--warn); font-size: .9rem; } .expiry-banner.danger { border-color: var(--urgent); background: rgba(255,92,92,.1); color: var(--urgent); } .expiry-banner strong { font-weight: 700; } .expiry-icon { font-size: 1rem; line-height: 1; } .expiry-link { margin-left: auto; color: inherit; font-weight: 600; white-space: nowrap; } /* ---- #71 usage guide ---- */ .guide-lede { margin-top: -.4rem; } .guide-toc { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1rem 0 .4rem; } .guide-toc a { color: var(--muted); text-decoration: none; font-size: .82rem; border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; } .guide-toc a:hover { color: var(--accent); border-color: var(--accent); } /* scroll-margin so a #anchor doesn't land under the top bar */ .guide-sec { scroll-margin-top: 1rem; } .guide-sec h2 { margin-top: 0; } .guide-dl { margin: .6rem 0 0; } .guide-dl dt { font-weight: 600; margin-top: .9rem; } .guide-dl dt:first-child { margin-top: 0; } .guide-dl dd { margin: .2rem 0 0; padding-left: 1rem; color: var(--muted); border-left: 2px solid var(--line); } .guide-dl dd strong, .guide-dl dd em { color: var(--text); font-style: normal; } /* the padlocks are drawn inline in the guide, at text size */ .guide-ico { display: inline-flex; vertical-align: -.15em; } .guide-ico svg { width: 1.05em; height: 1.05em; } kbd { font: inherit; font-size: .82em; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 .3em; } .guide-foot { margin: 1.5rem 0 0; } /* Tables can be wide — let them scroll horizontally instead of breaking layout. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- #102 arranging the positions table ---------------------------------- */ /* The picker sits above the table as a plain disclosure, so it costs one line when you are not using it. It is inside the refreshed fragment, and the morph keeps `open` — so it does not shut itself every ten seconds. */ .col-pick { margin: .5rem 0; } .col-pick > summary { cursor: pointer; color: var(--muted); font-size: .9rem; width: max-content; } .col-pick > summary:hover { color: var(--text); } .col-hint { font-size: .82rem; margin: .4rem 0 .3rem; } .col-list { list-style: none; padding: 0; margin: 0; max-width: 360px; } /* #104 — each entry is a grip beside a two-line block: the tick, and under it what the value is. Aligned to the top so the grip sits on the title line and not halfway down the sentence. */ .col-list li { display: flex; align-items: flex-start; gap: .4rem; padding: .22rem 0; } .col-item { display: flex; flex-direction: column; min-width: 0; } .col-desc { font-size: .8rem; color: var(--muted); line-height: 1.3; padding-left: 1.35rem; } /* line up under the label, past the box */ .col-list label { display: flex; align-items: center; gap: .4rem; margin: 0; } /* touch-action:none so a touch-drag reorders instead of scrolling the page */ .col-handle { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--muted); line-height: 1; padding: .15rem .2rem; border-radius: 4px; } .col-handle:hover, .col-handle:focus { color: var(--text); outline: 1px solid var(--accent); } .col-handle.fixed { cursor: default; opacity: .35; } .col-list li.col-fixed label { color: var(--muted); } /* A header is its own handle — there is no room for a grip inside a column title, and the whole cell is a bigger target on a phone than a glyph is. #103 — but that big target sits across the top of the table, so `none` here meant a finger that started on a heading could not scroll the page at all. `pan-y` gives the vertical gesture back to the browser and keeps only the sideways one, which is the only direction a column can go. */ .pos-table thead th[data-col]:not(.col-fixed) { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .pos-table thead th[data-col]:not(.col-fixed):hover { color: var(--text); } .pos-table thead th[data-col]:focus { outline: 1px solid var(--accent); } .col-dragging { opacity: .85; cursor: grabbing; background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,.35); } /* ---- #105 the ticker stays on screen -------------------------------------- The table is wider than a phone, so it scrolls sideways (.table-wrap, and the same after a rotation) — and the first thing to leave was the one column that says *which row you are reading*. Swipe left and every number is anonymous. So the ticker is pinned to the leading edge and the rest of the table slides underneath it. `border-collapse: separate` is not cosmetic here: with collapsed borders a cell's borders belong to the table rather than to the cell, so a sticky cell scrolls away from its own rules and the pinned column loses its lines. The spacing stays 0 and every line on this table is still a single `border-bottom` on the cell, so it looks exactly as it did. The background is the page's, not the cell's own — a transparent sticky cell is a window onto whatever is scrolling past behind it. */ .pos-table { border-collapse: separate; border-spacing: 0; } .pos-table th[data-col="asset"], .pos-table td[data-col="asset"] { position: sticky; left: 0; z-index: 2; background: var(--bg); /* the pinned column's own edge: the only vertical rule on the table, which is what says the numbers are sliding under it rather than with it */ box-shadow: 1px 0 0 var(--line); } /* A heading dragged across the table rides over the pinned column instead of disappearing behind it. */ .pos-table .col-dragging { z-index: 3; } /* ---- #96 nothing spills over: the standing policy -------------------------- Three causes account for practically every overflow on this page, so all three are ruled out globally rather than patched per widget: 1. a word (a ticker, an account id, a URL) longer than its box; 2. a flex or grid child, which defaults to min-width:auto and so refuses to shrink below its own content — the commonest one by far; 3. something intrinsically sized (an image, a table) wider than the column. fit.js is the other half: it measures what still overflows after all this at the size the window actually is, and marks it (.is-spill / .is-scrollable). */ /* #98 — `break-word`, never `anywhere`. Both break a word that is too long for its line, but `anywhere` also drops the box's *min-content* width to a single character: a squeezed column then stops overflowing by stacking its letters one per line, which is what a portrait screen was showing. The owner's rule is the opposite — keep the letters horizontal and let the box scroll instead. With `break-word` the intrinsic minimum stays at the widest word, so fit.js measures the real overflow and can reach for the scroll below. */ body { overflow-wrap: break-word; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; } table { max-width: 100%; } /* Every flex/grid row on the page, named rather than starred so the rule stays readable — and so a future row is a deliberate addition to the list. */ :where(.topbar, nav, .crumbs, .topbar-right, .lang-switch, .row-between, .page-head, .pf-head, .pf-acts, .pf-top, .pf-stats, .pf-grid, .tiles, .grid, .times, .budget-row, .budget-edit, .budget-form, .recs-box > summary, .rec-row, .rec-done-form, .addline, .pos-edit-form, .sell-row, .sellall-actions, .perf-list li, .modal-actions, .admin-head, .user-head, .worker-grid, .worker-top, .worker-card, .expiry-banner, .chart-tabs, .guide-toc, .page-status, .note-view, .note-edit, .default-days, .tz-pick, .edit-grid .edit-actions, .histo, .histo-col) > * { min-width: 0; } /* Rows that had no reason to wrap while everything fit. */ .times, .pf-top, .pf-stats, .perf-list li, .sell-row, .worker-top { flex-wrap: wrap; } .pf-top strong { overflow-wrap: break-word; } /* The account name is a label, not a control: it gives up width first (#70), at every size and not only on a phone. */ .profile-link .pfn { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A popover anchored at the left edge of its trigger can hang off the right edge of the window on a narrow one. */ .help-pop { max-width: min(260px, 78vw); } /* ---- #96 the window's real shape ------------------------------------------ The owner dragged a desktop window tall-and-narrow and the view stayed side-by-side: it was 700px wide, so no phone breakpoint fired, even though the window was plainly portrait. Orientation is the shape, independent of the width — a portrait window lays out as a column. The media query is the no-JS path; the class fit.js sets is the one that tracks a live drag. */ @media (orientation: portrait) { .pf-grid { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, 1fr); } .worker-card { flex-basis: 100%; } } html.orient-portrait .pf-grid { grid-template-columns: 1fr; } html.orient-portrait .tiles { grid-template-columns: repeat(2, 1fr); } html.orient-portrait .worker-card { flex-basis: 100%; } /* ---- #96 what fit.js measured -------------------------------------------- */ /* Marked only while it genuinely overflows at the current size, and cleared at the start of every pass — so nothing here is sticky and nothing oscillates. */ .is-spill { min-width: 0; overflow-wrap: break-word; } /* A cell kept on one line for the sake of tidy columns loses that when the alternative is pushing the page sideways. Boxes that clip or scroll on purpose never get here — fit.js asks the stylesheet before marking. */ .is-spill { white-space: normal; } /* Last resort, for what cannot wrap narrow enough: scroll it. A needs display:block before it will scroll at all. */ .is-scrollable { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } table.is-scrollable { display: block; width: max-content; max-width: 100%; } /* ---- mobile ---- */ @media (max-width: 640px) { main { margin: 1rem auto; padding: 0 .8rem; } .topbar { flex-wrap: wrap; gap: .6rem 1rem; padding: .7rem .9rem; } nav { gap: .8rem; flex-wrap: wrap; } .tiles { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: 1fr; } /* stakes form: single column */ .card.narrow { margin: 1.5rem auto; } table { font-size: .9rem; } th, td { padding: .4rem .35rem; } .code { font-size: 1.6rem; letter-spacing: .3rem; } .expiry-banner { margin: .8rem .8rem -.2rem; font-size: .85rem; } .topbar-right { gap: .6rem; } /* the account name is the first thing to give up when the bar gets tight — the flags and the guide are controls, the name is only a label (#70) */ .profile-link .pfn { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input, .btn { font-size: 16px; } /* >=16px stops iOS zoom-on-focus */ } @media (max-width: 380px) { .tiles { grid-template-columns: 1fr; } }