/* ========================================================================== Korat web app — house styling. Layout discipline (not appearance) borrowed from the mainstream web apps: a global app bar, a sticky navigation rail, ONE readable content column capped at 640px, and a right rail that only exists when it has something worth carrying. Everything lives inside a centred 1280px container so the page does not sprawl across a 27" monitor. Breakpoints (SHELL section owns these; see "page grid" for the arithmetic): < 640 one column + bottom tab bar (matches the Android app) 640-1023 icon rail + content 1024-1279 icon rail + content + right rail 1280-1511 labelled rail + content + right rail 1512-1919 the same three, each one step wider >= 1920 the widest step; the shell stops growing here on purpose The density values are the ones in CLAUDE.md, converted 1dp -> 1px: list row padding 10/7 · row gap 6 · list side padding 16 · avatar 40 radius: 16 cards · 12-14 rows/fields · 10 chips · 22 buttons From 640px up those steps up exactly once — the ladder keeps its proportions, no new values are invented. Status colours are literal on purpose: they must never re-skin. THEME (2026-08-14, "v3"): the brand tokens (--a1/--a2/--a3, --brand, --brand-glow) and the frosted-glass surfaces come from demo/social/v3. What was NOT taken from v3, and why, so nobody re-imports it: · v3's --text-muted #9CA3AF / --text-dim #6B7280 measure below WCAG AA on both themes. --dim/--dim2 keep this file's own values. · v3's radius ladder (20/14/8) is a one-page demo's; this file's 8/10/12/16/22 stays, because the hierarchy is what the owner asked for, not the numbers, and 5,800 lines of screens depend on the ladder. · v3's shell (fixed 1280, 210/1fr/340) is a single breakpoint set; this file's five-step grid stays. The glass is now TOKENS (--glass-*), not literals, so the light theme can invert it. Never hardcode an rgba surface here again: a literal cannot flip, and every one that existed made the light theme wrong in a way that only showed up on somebody's screen. ========================================================================== */ :root { color-scheme: dark; /* -------------------------------------------------------------------- Spacing — a 4px grid system -------------------------------------------------------------------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 24px; --sp-8: 32px; /* -------------------------------------------------------------------- Typography hierarchy -------------------------------------------------------------------- */ --fs-micro: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-row: 14px; --fs-body: 15px; --fs-title: 17px; --fs-h: 20px; --fs-hero: 30px; /* -------------------------------------------------------------------- Radius system -------------------------------------------------------------------- */ --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-btn: 24px; --r-pill: 999px; /* -------------------------------------------------------------------- Elevation & Glassmorphism Ladder (Dark Luxury Theme) -------------------------------------------------------------------- */ --field: #040409; --bg: #090A14; --s1: #0F101E; --s2: #151627; --s3: #1E1F36; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); /* -------------------------------------------------------------------- GLASS SURFACES — the frosted ladder, as TOKENS. These ten values were hardcoded as literal dark rgba() at their call sites (.rail .railcard .colhead .tabbar .segs .composer .post .sk-post .toast .menu) and the three input tints as literal white rgba(). A literal cannot flip, so in LIGHT theme the post card was a navy pane, the app bar was black and every field was white-on-white — the app had two themes and the glass had one. Tokenised here so the light block below can invert them once instead of at thirteen call sites. `--glass-*` are SURFACES (they sit under blur); `--s1/--s2/--s3` stay the opaque ladder. Neither replaces the other. -------------------------------------------------------------------- */ --glass-card: rgba(15, 16, 30, 0.70); /* card / rail / composer / post */ --glass-card-2: rgba(15, 16, 30, 0.65); /* the right-rail card, one step lighter */ --glass-float: rgba(15, 16, 30, 0.92); /* toast + menu: must stay legible over anything */ --glass-header: rgba(9, 10, 20, 0.85); /* app bar / column head / tab bar */ --glass-seg: rgba(21, 22, 39, 0.80); /* the segmented control's trough */ --glass-input: rgba(255, 255, 255, 0.04); --glass-input-hover: rgba(255, 255, 255, 0.06); --glass-input-focus: rgba(255, 255, 255, 0.08); /* Text colors */ --ink: #F8F9FC; --dim: #A8B0CC; --dim2: #8088A8; /* Accent & Gradients */ --a1: #FF3B88; --a2: #8B3DFF; --a3: #3B82F6; --brand: linear-gradient(135deg, #FF3B88 0%, #8B3DFF 52%, #3B82F6 100%); --brand-hover: linear-gradient(135deg, #FF5297 0%, #9B52FF 52%, #5293FF 100%); --brand-soft: linear-gradient(135deg, rgba(255,59,136,.14), rgba(139,61,255,.16) 52%, rgba(59,130,246,.14)); --brand-glow: 0 4px 20px rgba(139, 61, 255, 0.35); --on-accent: #FFFFFF; /* Interaction tints */ --hover: rgba(255, 255, 255, 0.06); --sel: linear-gradient(135deg, rgba(255, 59, 136, 0.16), rgba(139, 61, 255, 0.20)); /* Status colors */ --amber: #F59E0B; --blue: #3B82F6; --purple: #8B5CF6; --sky: #0EA5E9; /* #22C55E, not #10B981. CLAUDE.md and the Android app both carry #22C55E as "done / verified"; the emerald was a web-only drift, and two rules in this file (`.roomcell.free`) had already hardcoded the correct value beside the token — i.e. the same meaning was painted in two greens on one page. */ --green: #22C55E; --red: #EF4444; /* Ambient Glass & Drop Shadows */ --shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.9); --card-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.07); --col-shadow: 0 0 48px -12px rgba(0, 0, 0, 0.75); --font: "Noto Sans Thai", "Sora", system-ui, -apple-system, sans-serif; /* Component Dimensions */ --appbar-h: 54px; --colhead-h: 46px; --tabbar-h: 60px; /* Safe Area & Overlay Bounds */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --overlay-max-h: calc(100dvh - var(--safe-t) - var(--safe-b) - 16px); --pricecol-w: 92px; /* Shell Layout Arithmetic */ --col-w: 640px; --rail-w: 56px; --aside-w: 0px; --shell-cols: 2; --shell-gap: 16px; --shell-pad: 12px; --shell-w: calc( var(--rail-w) + var(--col-w) + var(--aside-w) + (var(--shell-cols) - 1) * var(--shell-gap) + 2 * var(--shell-pad)); /* Rail internals. The item is 44px because that is the touch minimum and the icon rail is exactly one item wide plus its own padding. */ --rail-pad: 6px; --rail-item-h: 44px; /* Native chrome — scrollbars, form controls, autofill, the caret. Without this the browser paints all of them in LIGHT while the app is dark: the app had two themes and the scrollbar had one. */ color-scheme: dark; } /* Light theme. `data-theme` on always wins over the OS preference so the in-app toggle works in both directions. Designed, not derived: the page sits on a tinted grey so white cards have something to lift off — that separation is the whole job of the ladder. */ /* In light theme s1 and s2 are BOTH #FFFFFF on purpose: light inverts the luminance of the ladder (raised = whiter) and there is nothing above white, so separation is carried by the hairline instead. Every card that nests a row already makes it transparent (`.railcard .row`, `.docklist .row`), so the two rungs never actually stack. `--dim`/`--dim2` ARE changed: `--dim2` measured 3.1:1 on this background and 3.5:1 on a white card — it carries timestamps, `.state .detail`, `.row .meta` and `.pcard .by`, i.e. real sentences at 11-12px, and it failed WCAG AA on every surface in BOTH themes. Both ladders now read ~16 / ~8 / ~5 and the worst case is 4.6:1. `--dim` moved with it so the three tiers stay three tiers rather than collapsing into two. */ /* `--field` is two steps below `--bg` here rather than one. It used to be #E6E4F0 against a #F2F1F8 column — twelve units apart, which on a bright monitor is no edge at all, so the desktop composition ("three objects on a field") existed in the stylesheet and not on the screen. Dark got the separation for free (#06060D under #0B0B14 reads, because the eye is working near black); light needed it stated. */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { color-scheme: light; --field: #DCD9EC; --bg: #F2F1F8; --s1: #FFFFFF; --s2: #FFFFFF; --s3: #EBE9F5; --line: #E2DFEE; --line-strong: #C9C4DC; --ink: #14101F; --dim: #4A4560; --dim2: #69637F; --glass-card: #FFFFFF; --glass-card-2: #FFFFFF; --glass-float: #FFFFFF; --glass-header: rgba(255, 255, 255, 0.88); --glass-seg: #EBE9F5; --glass-input: rgba(20, 16, 31, 0.04); --glass-input-hover: rgba(20, 16, 31, 0.07); --glass-input-focus: rgba(20, 16, 31, 0.10); --hover: color-mix(in srgb, var(--ink) 7%, transparent); --sel: color-mix(in srgb, var(--a2) 15%, transparent); --brand-soft: linear-gradient(105deg, rgba(255,61,139,.10), rgba(139,61,255,.10) 52%, rgba(61,123,255,.10)); --shadow: 0 14px 34px -22px rgba(20,16,31,.35); --card-shadow: 0 1px 2px rgba(20,16,31,.05), 0 1px 3px rgba(20,16,31,.04); --col-shadow: 0 1px 20px -8px rgba(20,16,31,.16); } } :root[data-theme="light"] { color-scheme: light; --field: #DCD9EC; --bg: #F2F1F8; --s1: #FFFFFF; --s2: #FFFFFF; --s3: #EBE9F5; --line: #E2DFEE; --line-strong: #C9C4DC; --ink: #14101F; --dim: #4A4560; --dim2: #69637F; --glass-card: #FFFFFF; --glass-card-2: #FFFFFF; --glass-float: #FFFFFF; --glass-header: rgba(255, 255, 255, 0.88); --glass-seg: #EBE9F5; --glass-input: rgba(20, 16, 31, 0.04); --glass-input-hover: rgba(20, 16, 31, 0.07); --glass-input-focus: rgba(20, 16, 31, 0.10); --hover: color-mix(in srgb, var(--ink) 7%, transparent); --sel: color-mix(in srgb, var(--a2) 15%, transparent); --brand-soft: linear-gradient(105deg, rgba(255,61,139,.10), rgba(139,61,255,.10) 52%, rgba(61,123,255,.10)); --shadow: 0 14px 34px -22px rgba(20,16,31,.35); --card-shadow: 0 1px 2px rgba(20,16,31,.05), 0 1px 3px rgba(20,16,31,.04); --col-shadow: 0 1px 20px -8px rgba(20,16,31,.16); } /* `data-theme="dark"` is the base :root block, but it must also win over the OS when the OS says light — otherwise the in-app toggle only works one way. (It already did, by specificity; stating color-scheme here is what makes the NATIVE controls follow the override too.) */ :root[data-theme="dark"] { color-scheme: dark; } /* -------------------------------------------------------------------------- TOKEN BRIDGE — v3.css's variable names, pointed at THIS app's themed values. v3.css (a byte-for-byte copy of demo/social/v3/style.css, imported into `layer(v3)` by index.html) writes its colours as --bg-app / --bg-card / --text-main / --border / --brand-gradient …, and it declares those in its own `:root` plus a `[data-theme="light"]` block. That light block is the problem this bridge exists to solve: it only fires on an EXPLICIT `data-theme="light"`. The default here is `data-theme="auto"`, so a reader on a light OS who never touched the toggle would have had app.css go light while every v3 rule stayed on v3's dark values — half a page in each theme, and the owner uses light. Re-declaring the names here fixes all three theme states at once, because the values are `var(…)` references into the ladder that the blocks above already theme (auto+OS-light, explicit light, explicit dark). One block, no copy of v3's palette to drift out of date, and NOTHING invented: --dim/--dim2 are used for v3's muted/dim precisely because v3's own #9CA3AF/#6B7280 fail WCAG AA (see the file header). This is unlayered, so it beats v3's `:root` AND its `[data-theme="light"]` regardless of specificity. --font-display, --brand-hover, --brand-glow, --card-shadow are deliberately NOT listed: the first has no counterpart here (v3's own value stands), the other three are already declared in the :root above and therefore already win. -------------------------------------------------------------------------- */ :root { --bg-app: var(--bg); --bg-card: var(--glass-card); --bg-card-hover: var(--s2); --bg-input: var(--glass-input); --bg-input-focus: var(--glass-input-focus); --bg-rail: var(--glass-card); --bg-header: var(--glass-header); --border: var(--line); --border-strong: var(--line-strong); --border-focus: color-mix(in srgb, var(--a2) 50%, transparent); --text-main: var(--ink); --text-muted: var(--dim); --text-dim: var(--dim2); --accent-pink: var(--a1); --accent-purple: var(--a2); --accent-blue: var(--a3); --accent-green: var(--green); --brand-gradient: var(--brand); --modal-shadow: var(--shadow); /* v3's 8/14/20 ladder mapped onto this file's 8/12/16 one. The hierarchy is what carries over, not the numbers — 5,800 lines of screens are built on the ladder here, so a v3 card must land on the same corner as its neighbour rather than 4px rounder. */ --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill); --font-main: var(--font); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; /* On a phone the app IS the page, so the page is --bg. From 640px up the shell repaints itself onto --field and the content column becomes a real surface; see `.page` / `.main` below. */ background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; overflow-x: hidden; /* the body must never scroll sideways */ -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } @media (min-width: 640px) { body { background: var(--field); } } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } img { max-width: 100%; display: block; } [hidden] { display: none !important; } /* Keyboard users must always be able to see where they are. Nothing in this file removes an outline without putting one back. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; } /* ---------- boot ---------- */ .boot { min-height: 100dvh; display: grid; place-items: center; gap: var(--sp-5); align-content: center; } /* THE BRAND MARK IS `/logo.png`, and it is the only one. It is what the worker's share and download pages render, what the favicon and the app icons are cut from, and what the owner recognises as Korat. It is NOT `korat-mark.svg`. That file was derived from the Android launcher icon and shipped in the same sync as this stylesheet — the first deploy in which the asset had ever existed — so it went live having been reviewed by nobody, and the owner's first sight of it was on their own header, asking where the logo had come from. The file is left in the tree; nothing uses it. The general rule it leaves behind: AN ASSET THAT APPEARS IN A DEPLOY FOR THE FIRST TIME IS A VISUAL CHANGE, and a diff of text files does not show it. Layered so the gradient stays the fallback: if the PNG ever 404s the mark degrades to the brand wash rather than to a hole. `/logo.png` is opaque, so in the normal case nothing shows through. The path is root-absolute on purpose — this app is served from /app/, the mark from the site root. */ .boot-mark { width: 54px; height: 54px; border-radius: var(--r-lg); background: url("/logo.png") center / cover no-repeat, var(--brand); animation: pulse 1.4s ease-in-out infinite; } .boot-text { color: var(--dim); font-size: var(--fs-base); margin: 0; } @keyframes pulse { 0%,100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } } /* ========================================================================== Shell — app bar, three-column page, rails ========================================================================== */ .shell { min-height: 100dvh; display: flex; flex-direction: column; } /* Clipped rather than parked off-screen: `inset-inline-start: -9999px` becomes RIGHT: -9999px under RTL, which widens the page and breaks the one rule this whole file answers to. Clipping is direction-agnostic. */ .skip { position: absolute; inset-inline-start: 8px; top: 8px; z-index: 100; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; font: inherit; cursor: pointer; padding: 0; } .skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; padding: 8px var(--sp-5); border-radius: var(--r-md); background: var(--s3); color: var(--ink); box-shadow: var(--shadow); } /* The skip link focuses `#main` programmatically, and a ring around the whole column on a mouse click reads as a glitch — but a blanket `outline: none` on :focus would also swallow a genuine keyboard focus. Scoped to the non-keyboard case, so the rule that removes it can never hide a real one. */ .main:focus:not(:focus-visible) { outline: none; } /* ---------- global app bar ---------- */ .appbar { position: sticky; top: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } /* Same max-width AND the same side padding as `.page`, so the logo starts on the rail's edge and the avatar ends on the right rail's edge. It did not before: the bar used a 12px gutter against the grid's 16px, so the whole top of the page sat four pixels off everything under it at three of the five breakpoints — small enough that nobody could name it, big enough to read as "nothing lines up". */ .appbar-in { max-width: var(--shell-w); margin: 0 auto; min-height: var(--appbar-h); display: flex; align-items: center; gap: var(--sp-4); padding-inline: var(--shell-pad); } .appbar .logo { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); font-weight: 800; font-size: var(--fs-title); letter-spacing: -.01em; transition: all 0.2s ease; } .appbar .logo:hover { background: var(--hover); transform: translateY(-1px); } .appbar .logo .mark { width: 28px; height: 28px; border-radius: var(--r-xs); flex: 0 0 auto; background: url("/logo.png") center / cover no-repeat, var(--brand); box-shadow: 0 2px 10px rgba(139, 61, 255, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .appbar .logo:hover .mark { transform: scale(1.06); box-shadow: 0 4px 16px rgba(139, 61, 255, 0.5); } .appbar .logo .word { display: none; background: var(--brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (min-width: 420px) { .appbar .logo .word { display: inline; } } .appbar .actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } /* The theme switch is the FOURTH control in this bar (language, theme, bell, avatar). At 360px that leaves the search box about 90px wide, i.e. unusable — so on the narrowest phones it stands down and the account menu keeps being its home, which is where it has always been. It is not removed anywhere: the menu row and this button are the same `cycleTheme()`. */ .appbar [data-themetoggle] { display: none; } @media (min-width: 480px) { .appbar [data-themetoggle] { display: inline-grid; } } /* ---------- global search ---------- */ .searchbox { flex: 1 1 auto; min-width: 0; max-width: 440px; margin-inline: auto; position: relative; } .searchbox input { width: 100%; padding: var(--sp-4) var(--sp-5); padding-inline: 38px 34px; border-radius: var(--r-pill); background: var(--glass-input); border: 1px solid var(--line); color: var(--ink); outline: none; font-size: var(--fs-row); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } .searchbox input:hover { border-color: rgba(139, 61, 255, 0.4); background: var(--glass-input-hover); } .searchbox input:focus-visible { border-color: var(--a2); background: var(--glass-input-focus); outline: none; box-shadow: 0 0 16px rgba(139, 61, 255, 0.3), 0 0 0 2px var(--a2); } .searchbox input::placeholder { color: var(--dim2); } .searchbox .mag { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim2); pointer-events: none; transition: color 0.2s ease; } .searchbox input:focus ~ .mag { color: var(--a2); } .searchbox .clear { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: transparent; color: var(--dim2); display: grid; place-items: center; font-size: var(--fs-base); transition: all 0.18s ease; } .searchbox .clear:hover { background: var(--s3); color: var(--ink); transform: translateY(-50%) scale(1.1); } /* ---------- page grid ---------- */ .page { width: 100%; max-width: var(--shell-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { :root { --rail-w: 56px; --shell-cols: 2; --shell-gap: 16px; --shell-pad: 12px; } .page { grid-template-columns: var(--rail-w) minmax(0, var(--col-w)); gap: var(--shell-gap); padding-inline: var(--shell-pad); justify-content: center; min-height: calc(100dvh - var(--appbar-h)); } } @media (min-width: 1024px) { :root { --rail-w: 56px; --aside-w: 280px; --shell-cols: 3; --shell-gap: 12px; --shell-pad: 12px; } .page { grid-template-columns: var(--rail-w) minmax(0, var(--col-w)) var(--aside-w); } } @media (min-width: 1280px) { :root { --rail-w: 240px; --aside-w: 320px; --shell-gap: 24px; --shell-pad: 16px; --rail-pad: 8px; } } @media (min-width: 1512px) { :root { --col-w: 688px; --rail-w: 256px; --aside-w: 352px; } } @media (min-width: 1920px) { :root { --col-w: 784px; --rail-w: 288px; --aside-w: 416px; --shell-gap: 32px; --shell-pad: 24px; } } .main { min-width: 0; background: var(--bg); } @media (min-width: 640px) { .main { border-inline: 1px solid var(--line); box-shadow: var(--col-shadow); } } /* ---------- left navigation rail ---------- THE SHAPE IS `demo/social/v3/nav-menu.js` + its `.left-rail` block, rebuilt on this file's tokens. Three objects stacked in one column: .nav-menu one glass BOX with hairline row dividers .btn-create-post a full-width gradient pill, in words .user-profile-pill who you are, pinned to the foot The rail itself is now transparent — the BOX is the surface, which is the same answer the 2026-07-28 "bare glyphs on the page background" fix reached by a different route, so nothing regresses by moving the border inward. `--brand-gradient` is the DEMO's name for the gradient. Here it is `--brand`; an undefined custom property invalidates the whole declaration, which is how the console's selected item once ended up with no background at all while its `!important` still beat the rule that would have given it one. A theme lifted between two files carries its variable NAMES with it, and the names are the part that does not survive the move. */ .rail { display: none; } @media (min-width: 640px) { .rail { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: calc(var(--appbar-h) + var(--shell-gap)); align-self: start; margin-block: var(--shell-gap); max-height: calc(100dvh - var(--appbar-h) - var(--shell-gap) * 2); overflow-y: auto; } .rail .nav-menu { display: flex; flex-direction: column; flex: 0 0 auto; background: var(--glass-card); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-2); /* `--card-shadow`, not a literal: the light theme replaces it with a 5% ink shadow, and a 50%-black drop under a white box is a bruise. */ box-shadow: var(--card-shadow); } .rail .nav-item { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--rail-item-h); justify-content: center; padding: 0; flex: 0 0 auto; border-radius: var(--r-md); color: var(--dim); font-size: var(--fs-row); font-weight: 600; position: relative; /* v3's row divider. `border-bottom` on the ITEM, cleared on the last one, so the box reads as a menu rather than as a list of floating pills. */ border-bottom: 1px solid var(--line); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .rail .nav-item:last-of-type { border-bottom: 0; } .rail .nav-item svg { width: 22px; height: 22px; flex: 0 0 auto; transition: transform 0.2s ease, color 0.2s ease; } .rail .nav-item .icon-wrap { position: relative; display: inline-flex; flex: 0 0 auto; } .rail .nav-item .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rail .nav-item:hover { background: var(--hover); color: var(--ink); transform: translateX(2px); } .rail .nav-item:hover svg { transform: scale(1.1); color: var(--ink); } /* `--ink`, not `#FFFFFF`. `--sel` is a 15-20% accent WASH, not a fill: in the light theme it lands as pale lavender, and white text on it made the ONE item that says where you are the only unreadable thing on the rail. --ink is #F8F9FC in dark, so the dark theme is unchanged. */ .rail .nav-item[aria-current="page"] { background: var(--sel); color: var(--ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .rail .nav-item[aria-current="page"] svg { color: var(--a1); transform: scale(1.08); } .rail .dot { position: absolute; top: -2px; inset-inline-end: -2px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--red); border: 2px solid var(--s1); box-shadow: 0 0 8px var(--red); } /* ── the primary action ── */ .rail .btn-create-post { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); width: 100%; height: var(--rail-item-h); flex: 0 0 auto; position: relative; border: 0; cursor: pointer; border-radius: var(--r-pill); background: var(--brand); color: var(--on-accent); font-size: var(--fs-row); font-weight: 700; box-shadow: var(--brand-glow); transition: all 0.2s ease; } .rail .btn-create-post svg { width: 20px; height: 20px; flex: 0 0 auto; } .rail .btn-create-post .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rail .btn-create-post:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(139, 61, 255, 0.5); } /* ── who you are ── */ .rail .user-profile-pill { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; margin-top: auto; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); background: var(--glass-card); backdrop-filter: blur(12px); border: 1px solid var(--line); transition: all 0.2s ease; } .rail .user-profile-pill:hover { background: var(--s3); border-color: var(--line-strong); } .rail .user-profile-pill .user-info { display: none; flex: 1; min-width: 0; } .rail .user-profile-pill .user-name { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail .user-profile-pill .user-handle { display: block; font-size: var(--fs-micro); color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* The label tier. Below this the rail is one item wide, so every label is CLIPPED rather than `display: none` — a screen reader still reads all of them, which is the rule the old icon tier already followed. */ @media (min-width: 1280px) { .rail .nav-item { justify-content: flex-start; padding-inline: var(--sp-5); } .rail .nav-item .lbl { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .rail .btn-create-post .lbl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .rail .user-profile-pill .user-info { display: block; } } /* The business console's own rail (`bizshell.js`) marks its selected row with `.active` rather than `aria-current`. Left as it was. */ .nav-item.active, a.nav-item.active { background: var(--brand) !important; color: #FFFFFF !important; font-weight: 700; box-shadow: 0 4px 18px rgba(139, 61, 255, 0.38); border-color: transparent !important; } .nav-item.active svg { color: #FFFFFF !important; } /* ---------- right rail ---------- */ .aside { display: none; } @media (min-width: 1024px) { .aside { display: flex; flex-direction: column; gap: var(--shell-gap); position: sticky; top: calc(var(--appbar-h) + var(--shell-gap)); align-self: start; margin-block-start: var(--shell-gap); padding-block: 0 64px; max-height: calc(100dvh - var(--appbar-h) - var(--shell-gap) * 2); overflow-y: auto; } } .railcard { background: var(--glass-card-2); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--card-shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .railcard:hover { border-color: var(--line-strong); } .railcard h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); font-weight: 700; color: var(--dim); letter-spacing: .01em; } .railcard p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--dim2); } .railcard .row { background: transparent; padding: 6px 8px; width: 100%; border: 1px solid transparent; text-align: start; border-radius: var(--r-md); transition: all 0.18s ease; } .railcard .row:hover { background: var(--hover); border-color: rgba(255, 255, 255, 0.05); transform: translateX(2px); } .railcard .state { padding: var(--sp-6) 8px; } .railcard .state .icon { font-size: var(--fs-h); width: auto; height: auto; background: none; border: 0; } .railcard .list { padding: 0; gap: 2px; } .railcard .av-wrap .online { border-color: var(--s1); box-shadow: 0 0 6px var(--green); } /* ---------- right-rail widgets (rail.js) ---------- `.widget` / `.widget-header` / `.trending-*` / `.follow-list` / `.quick-chat-row` / `.sidebar-footer` are v3's class names, so the markup in rail.js is v3's markup — the numbers inside it are this app's. Every colour here is a token: v3 was designed for dark only, and the owner reads in light. `.railcard` above is NOT dead — `more.js` still draws one. */ .widget { background: var(--glass-card-2); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--card-shadow); transition: border-color 0.2s ease; } .widget:hover { border-color: var(--line-strong); } .widget-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); } .widget-header h3 { margin: 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); font-weight: 700; color: var(--dim); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-header .wemoji { font-size: var(--fs-row); line-height: 1; flex: 0 0 auto; } .widget-header .see-all-link { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--a1); } .widget-header .see-all-link:hover { text-decoration: underline; } .widget .wnote { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--dim2); } .widget .state { padding: var(--sp-6) var(--sp-4); } .widget .state .icon { font-size: var(--fs-h); width: auto; height: auto; background: none; border: 0; } .widget .list { padding: 0; gap: 2px; } /* เทรนด์ — three stacked lines per row, exactly v3's `.trending-item`. Each one is a real to `#/tag/`, because a trend you cannot open is a headline with no article. */ .trending-list { display: flex; flex-direction: column; gap: var(--sp-1); } .trending-item { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); transition: background 0.18s ease; } .trending-item:hover { background: var(--hover); } .trend-category { font-size: 10px; color: var(--dim2); } .trend-title { font-size: var(--fs-base); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trend-count { font-size: var(--fs-micro); color: var(--dim2); } /* คนที่คุณอาจรู้จัก — the card is `suggestionRow` from friends.js, unchanged. All this does is let its three buttons (เพิ่มเพื่อน · ไม่สนใจ · บล็อก) wrap under the name instead of crushing it, which is what they did at 320px. */ .follow-list { display: flex; flex-direction: column; gap: var(--sp-4); } .follow-list .row { padding: 0; } .follow-list .personrow { flex-wrap: wrap; } .follow-list .personrow .rowacts { flex: 1 0 100%; display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* แชทด่วนล่าสุด — v3's horizontal face strip. */ .quick-chat-row { display: flex; gap: var(--sp-5); overflow-x: auto; padding-block: var(--sp-2); scrollbar-width: none; } .quick-chat-row::-webkit-scrollbar { display: none; } .quick-chat-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 52px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.18s ease; } .quick-chat-item:hover { transform: translateY(-2px); } .quick-chat-item .av-wrap { position: relative; display: inline-flex; } .quick-chat-item .qc-name { max-width: 52px; font-size: 10px; font-weight: 600; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-chat-item .online { position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--green); border: 2px solid var(--glass-card-2); box-shadow: 0 0 6px var(--green); } /* The unread count. Same red and the same "99+" ceiling as the bell, because they are two views of the same kind of fact. */ .quick-chat-item .badge-num { position: absolute; top: -3px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--glass-card-2); } /* ลิงก์ท้าย. Only pages that exist — see rail.js on the missing cookie page. */ .sidebar-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-6); font-size: var(--fs-micro); color: var(--dim2); line-height: 1.6; } .sidebar-footer a:hover { color: var(--ink); text-decoration: underline; } .sidebar-footer .copy { flex: 1 0 100%; } /* ---------- per-screen column header ---------- */ .colhead { position: sticky; top: var(--appbar-h); z-index: 25; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--colhead-h); padding-inline: var(--sp-4); padding-block: 0; background: var(--glass-header); backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid var(--line); } .colhead .title { flex: 1; min-width: 0; margin: 0; padding-inline-start: var(--sp-4); font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .colhead:has([data-back]:not([hidden])) .title { padding-inline-start: 0; } .colhead .sub { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--dim); letter-spacing: 0; } .colhead[data-plain="1"] { display: none; } .colhead [data-colacts] { display: contents; } @media (min-width: 640px) { .colhead [data-settings] { display: none; } } @media (min-width: 640px) { .colhead[data-plain="1"] { display: flex; } } .iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: var(--r-md); background: transparent; color: var(--dim); cursor: pointer; position: relative; transition: all 0.18s ease; } @media (pointer: coarse) { .iconbtn { width: 44px; height: 44px; } } .iconbtn:hover { background: var(--hover); color: var(--ink); transform: scale(1.05); } .iconbtn svg { width: 21px; height: 21px; } .iconbtn .count { position: absolute; top: 1px; inset-inline-end: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: var(--fs-micro); font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--bg); box-shadow: 0 0 8px var(--red); } /* "Failed to load", never the same colour as "zero" — same rule the services menu already applies to its own count. Amber is the one status colour that is allowed to mean something other than its usual meaning here, because this is the one spot CLAUDE.md records the exception for. */ .iconbtn .count.unknown { background: var(--amber); } .avbtn { border: 0; background: transparent; padding: 3px; border-radius: var(--r-pill); cursor: pointer; line-height: 0; } .avbtn:hover { background: var(--hover); } /* ชิดล่าง. The >=1024 rule reserved 72px at the foot of EVERY screen for the chat dock — but the dock is pinned to `inset-inline-end: 20px` and is 232px wide, so at every width where it exists it overlaps the RIGHT RAIL and never the content column (at 1024: dock spans 772-1004, the column ends around 700). Seventy-two pixels of nothing under every page, to clear something that was never over it. The reservation moves to the rail, which is the thing actually underneath it. */ .view { flex: 1; width: 100%; padding-bottom: calc(var(--tabbar-h) + var(--sp-7)); } @media (min-width: 640px) { .view { padding-bottom: var(--sp-7); } } /* ---------- bottom tab bar (mobile floating glass) ---------- */ .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: stretch; background: var(--glass-header); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); /* Upward, and tinted with the theme's own ink: a 50%-black band over a light page reads as a smudge, not as a lifted bar. */ box-shadow: 0 -10px 30px color-mix(in srgb, var(--bg) 55%, transparent); } .tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 6px; color: var(--dim2); font-size: var(--fs-micro); font-weight: 500; position: relative; transition: all 0.18s ease; } .tabbar a svg { width: 22px; height: 22px; transition: transform 0.18s ease, color 0.18s ease; } .tabbar a:hover { color: var(--ink); } /* `--ink`: the bar is glass over the PAGE, not a filled accent, so in the light theme white-on-white erased the label of the tab you are standing on — on the phone, which is where the tab bar is the only navigation there is. */ .tabbar a[aria-current="page"] { color: var(--ink); font-weight: 700; } .tabbar a[aria-current="page"] svg { color: var(--a1); transform: scale(1.12); filter: drop-shadow(0 2px 8px rgba(255, 59, 136, 0.5)); } .tabbar a span:not(.dot) { max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar .dot { position: absolute; top: 6px; inset-inline-start: 50%; margin-inline-start: var(--sp-4); width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--red); border: 2px solid var(--bg); box-shadow: 0 0 8px var(--red); } @media (min-width: 640px) { :root { --tabbar-h: 0px; } .tabbar { display: none; } } /* ---------- floating "เขียนโพสต์" (main.js `.fabcompose`) ---------- The rail's ✏ button is the desktop entry point and the rail does not exist below 640px, so this is the ONLY compose button a phone has. Same `data-compose` hook, same handler. Above the tab bar and the home indicator, and above the install bar when that is up (`body[data-installbar]`, the same token `.view`'s padding already uses). It stands down on the routes whose bottom edge is already taken: the chat room's message bar and the comment composer on a post. */ .fabcompose { position: fixed; z-index: 45; inset-inline-end: 16px; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; padding: 0; border: 0; cursor: pointer; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--brand); color: var(--on-accent); box-shadow: var(--brand-glow); transition: transform 0.18s ease, box-shadow 0.18s ease; } .fabcompose svg { width: 24px; height: 24px; } .fabcompose:hover { transform: translateY(-1px) scale(1.03); } .fabcompose:active { transform: scale(0.97); } body[data-installbar="1"] .fabcompose { bottom: calc(var(--tabbar-h) + 78px + env(safe-area-inset-bottom, 0px)); } .shell[data-route="chat"] .fabcompose, .shell[data-route="mchat"] .fabcompose, .shell[data-route="post"] .fabcompose { display: none; } /* From 640px up the rail is back and it carries the button — two compose buttons on one screen is one too many. */ @media (min-width: 640px) { .fabcompose { display: none; } } /* ========================================================================== Lists — the density table The gaps used to step UP from 640px (6->8 row, 8->10 card, 8->10 list pad) on the theory that a desktop wants more air. That is exactly the thing the owner called เทอะทะ: lists are the content and padding is not, and the ratio of content to padding must not get worse the moment the window gets bigger. The house numbers in CLAUDE.md hold at EVERY width now. Only the row's own inner padding steps up (7/10 -> 8/12), because a row that has to be hit with a fingertip and a row that is hit with a cursor genuinely differ. ========================================================================== */ .list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); } .list.cards { gap: var(--sp-4); } .row { display: flex; align-items: center; gap: var(--sp-4); padding: 7px 10px; /* CLAUDE.md house row density */ border-radius: var(--r-md); background: var(--s2); /* `.row` is an on most screens but a