/* EasyPath design system - warm, human, trustworthy. Lora headings + Lexend body, a green family with a honey accent. (Direction approved 2026-07-23.) */ :root { /* Design system v4 - from Josh's approved dashboard redesign. */ --bg: #F4F1EA; /* warm paper */ --surface: #FFFFFF; --ink: #1C2621; --ink-soft: #4A6158; /* muted text - darkened from #516A61 to clear WCAG 4.5:1 on tinted chips */ --line: #E6E9E3; --accent: #1F6B54; /* brand green */ --accent-deep: #164C3C; --forest: #164C3C; /* heading ink / sidebar */ --accent-ink: #F5FBF8; --accent-soft: #EFF4F0; /* sage tint */ --honey: #B07A1E; /* attention amber */ --honey-ink: #7A5411; --honey-soft: #FBF3E2; --honey-line: #e6cf9f; --danger: #A6462F; --danger-ink: #8f3122; --danger-soft: #F7ECE8; --radius: 16px; --shadow: 0 1px 2px rgba(28,38,33,.04), 0 10px 26px -14px rgba(28,38,33,.12); --shadow-sm: 0 1px 2px rgba(28,38,33,.04), 0 4px 12px -6px rgba(28,38,33,.10); --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-head: "Newsreader", Georgia, "Times New Roman", serif; /* forest sidebar shell */ --sidebar: #164C3C; --sidebar-2: #123E31; --ivory: #F3EFE6; --active-pill: #EAF0EB; --row-tint: #F5F7F4; --hairline-hover: #d5d9d2; /* Raised panel + a faint tint behind a hovered row. Both were in USE (var(--card,#fff), var(--wash,#f6f3ee)) and defined nowhere, so the fallbacks always won and the house bar stayed white while its text went light in dark mode. */ --card: #FFFFFF; --wash: #F6F3EE; --ease: cubic-bezier(.2,.7,.2,1); } /* Dark mode (opt-in, per device). Remaps the SAME tokens to a warm-dark palette so every component that reads the vars cascades automatically. Warm-neutral ("coffee") backgrounds, light warm text, and brightened forest / honey / clay accents that stay legible on dark. Applied by the pre-paint THEME_SCRIPT which sets [data-theme="dark"] on . This is a user preference, NOT a motion toggle - nothing here touches motion or prefers-reduced-motion. */ :root[data-theme="dark"] { --bg: #17140F; /* deep warm coffee-black */ --surface: #201C16; /* raised card */ --card: #201C16; /* same as surface - a raised panel */ --wash: #26211A; /* row tint, one step up from the surface */ --ink: #ECE6DA; /* warm off-white text */ --ink-soft: #ABA192; /* muted warm grey - ~5:1 on surface */ --line: #34302A; /* hairline on dark */ --accent: #4FB58C; /* brightened forest green */ --accent-deep: #6ECBA2; /* lighter still for links/on-tint text */ --forest: #8FD9B8; /* headings: light mint (was dark forest) */ --accent-ink: #0E1A14; /* dark text on the light-green button */ --accent-soft: #1D3128; /* sage tint → dark green wash */ --honey: #D8A441; /* brightened amber */ --honey-ink: #E7C88A; /* light amber text on dark */ --honey-soft: #2E2413; /* amber wash */ --honey-line: #5B4A27; --danger: #E0745B; /* brightened clay */ --danger-ink: #EC8E78; /* light clay text on dark */ --danger-soft: #331F1A; /* clay wash */ --shadow: 0 1px 2px rgba(0,0,0,.34), 0 10px 26px -14px rgba(0,0,0,.6); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px -6px rgba(0,0,0,.5); /* forest sidebar shell - keep it deep, lift the active pill + row tints for dark */ --sidebar: #123E31; --sidebar-2: #0E3227; --ivory: #EFEAE0; --active-pill: #26473B; --row-tint: #262019; --hairline-hover: #443f37; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-family: var(--font-head); font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.5rem; font-weight: 600; color: var(--forest); } h2 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 0.35rem; font-weight: 600; color: var(--forest); } h3 { font-family: var(--font-body); font-size: 1.02rem; margin: 0 0 0.3rem; font-weight: 600; color: var(--forest); } p { margin: 0.25rem 0 0.75rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .sub { color: var(--ink-soft); } .hint { color: var(--ink-soft); font-weight: 400; font-size: 0.85em; } /* Brand */ .brand { display: flex; align-items: center; gap: 0.55rem; } .brand-mark { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; position: relative; } .brand-mark::after { content: none; } .brand-name { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.005em; font-size: 1.1rem; color: var(--forest); } /* Auth screens */ .auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; gap: 1rem; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1.75rem 1.5rem; } .auth-card .brand { margin-bottom: 1.25rem; } .auth-foot { color: var(--ink-soft); font-size: 0.9rem; text-align: center; } /* Forms */ .stack { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.75rem; } label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; } input { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); min-height: 48px; } input { border-radius: 11px; background: #fcfdfc; } input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .btn { font: inherit; font-weight: 550; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.1rem; border-radius: 11px; min-height: 46px; box-shadow: 0 1px 2px rgba(20,55,43,0.12); letter-spacing: -0.003em; transition: filter 140ms ease, transform 120ms ease; } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; } .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); min-height: 40px; padding: 0.45rem 0.9rem; box-shadow: none; } .btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent-soft); filter: none; color: var(--accent-deep); } .err { background: var(--danger-soft); color: var(--danger); border: 1px solid #efcdc5; border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.92rem; } .alt { margin-top: 1rem; font-size: 0.92rem; color: var(--ink-soft); } .alt a { color: var(--accent-deep); font-weight: 600; } /* Sign-up consent: checkbox sits inline with the "I agree…" text (overrides the column label + 48px input defaults, which would stack it and balloon the box). */ .consent { flex-direction: row; align-items: flex-start; gap: 0.55rem; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; } .consent input { min-height: 0; width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--accent); } .consent a { color: var(--accent-deep); font-weight: 600; } /* Local-dev one-click demo entry on the login screen */ .ordiv { display: flex; align-items: center; gap: 0.7rem; margin: 1.15rem 0 0.9rem; color: var(--ink-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; } .ordiv::before, .ordiv::after { content: ""; flex: 1; height: 1px; background: var(--line); } .btn.demo { display: block; width: 100%; background: var(--surface); color: var(--accent-deep); border: 1px solid var(--accent); box-shadow: none; font-weight: 600; } .btn.demo:hover { background: var(--accent-soft); filter: none; } /* App shell */ .app { display: grid; grid-template-columns: 236px 1fr; min-height: 100dvh; } .rail { position: sticky; top: 0; z-index: 70; align-self: start; height: 100dvh; background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2)); color: var(--ivory); display: flex; flex-direction: column; padding: 22px 14px; gap: 6px; } .brandmark { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; text-decoration: none; } .brandmark .mark { width: 34px; height: 34px; flex: none; border-radius: 9px; background: rgba(243,239,230,.1); display: grid; place-items: center; color: var(--ivory); } .wordmark { font-family: var(--font-head); font-weight: 500; font-size: 16.5px; line-height: 1.15; color: var(--ivory); min-width: 0; } .wordmark small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(243,239,230,.72); margin-top: 3px; } .rail__spacer { flex: 1; } .railchip { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; background: rgba(243,239,230,.06); } .railchip .av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #2E7D5B; color: var(--ivory); display: grid; place-items: center; font-weight: 600; font-size: 13px; } .railchip .who { font-size: 13px; font-weight: 600; color: var(--ivory); line-height: 1.2; min-width: 0; } .railchip .who small { display: block; font-weight: 400; font-size: 11px; color: rgba(243,239,230,.72); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .railsignout { display: flex; align-items: center; gap: 11px; min-height: 44px; margin-top: 4px; padding: 0 12px; border-radius: 11px; color: rgba(243,239,230,.7); font-weight: 500; font-size: 13.5px; cursor: pointer; border: 0; background: none; font-family: inherit; text-align: left; transition: background .16s var(--ease), color .16s var(--ease); } .railsignout:hover { background: rgba(243,239,230,.07); color: var(--ivory); text-decoration: none; } /* Shortcuts: user-pinned links, a nav section under Setup (divider + inline Edit) */ .railshort { margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(243,239,230,.1); } .railquick-list { display: flex; flex-direction: column; gap: 1px; } .railshort-hd { display: flex; align-items: center; justify-content: space-between; padding: 2px 12px 3px; } .railshort-t { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(243,239,230,.5); } .railshort-edit { background: none; border: 0; color: rgba(243,239,230,.62); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 7px; border-radius: 7px; } .railshort-edit:hover { background: rgba(243,239,230,.1); color: var(--ivory); } .railshort-item { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 11px; color: rgba(243,239,230,.78); font-weight: 500; font-size: 14px; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease); } .railshort-item:hover { background: rgba(243,239,230,.07); color: var(--ivory); text-decoration: none; } .railshort-dot { width: 5px; height: 5px; margin: 0 8px 0 5px; border-radius: 50%; background: currentColor; opacity: .6; flex: none; } .railshort-empty { color: rgba(243,239,230,.5); font-size: 11.5px; line-height: 1.45; padding: 1px 12px 3px; margin: 0; } .railshort-empty b { color: rgba(243,239,230,.72); font-weight: 600; } .main { min-width: 0; width: 100%; max-width: 1120px; margin: 0 auto; padding: 26px clamp(18px,3vw,40px) 64px; } .grid { display: grid; gap: 0.9rem; margin-top: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem 0.9rem; box-shadow: var(--shadow); position: relative; } .card p { color: var(--ink-soft); font-size: 0.92rem; } .badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.15rem 0.55rem; } .badge.soft { color: var(--ink-soft); background: #eef0ee; } /* Sidebar nav */ .nav { display: flex; flex-direction: column; gap: 3px; } .nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 11px; color: rgba(243,239,230,.74); font-weight: 500; font-size: 14.5px; transition: background .16s var(--ease), color .16s var(--ease); } .nav a .icon svg { width: 19px; height: 19px; } .nav a:hover { background: rgba(243,239,230,.07); color: var(--ivory); text-decoration: none; } .nav a.on { background: var(--active-pill); color: var(--accent-deep); font-weight: 600; } .nav .railitem { position: relative; } .nav .railitem > a { position: relative; } .nav .caret { margin-left: auto; font-size: 16px; line-height: 1; color: rgba(243,239,230,.5); } .nav .railitem.on .caret, .nav .railitem > a:hover .caret { color: inherit; } /* Pop-out submenu - restores the old grouped nav on the redesigned rail */ .flyout { position: absolute; left: calc(100% + 10px); top: -6px; z-index: 60; min-width: 208px; padding: 8px; display: none; flex-direction: column; gap: 2px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 44px -20px rgba(20,30,25,.55); } /* invisible bridge so the 10px gap doesn't drop the hover */ .flyout::before { content: ""; position: absolute; left: -12px; top: 0; width: 14px; height: 100%; } .nav .railitem:hover > .flyout, .nav .railitem:focus-within > .flyout, .nav .railitem.is-open > .flyout { display: flex; } .flyout__hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 4px 10px 6px; } .flyout a { display: block; min-height: 0; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 500; } .flyout a:hover { background: var(--row-tint); text-decoration: none; } .flyout a.on { background: var(--active-pill); color: var(--accent-deep); font-weight: 600; } /* the flyout sits inside the dark rail nav - force dark text so the rail's ivory link colors (meant for the green sidebar) can't wash it out on hover */ .nav .flyout a { color: var(--ink); } .nav .flyout a:hover { color: var(--ink); background: var(--row-tint); } .nav .flyout a.on, .nav .flyout a.on:hover { color: var(--accent-deep); } .railsignout .icon svg { width: 18px; height: 18px; } .icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .icon svg { display: block; } .avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; letter-spacing: -0.01em; } .btn.sm { min-height: 36px; padding: 0.35rem 0.75rem; font-size: 0.9rem; } /* Mobile: the forest sidebar collapses to a bottom tab bar */ .tabbar { display: none; } @media (max-width: 1080px) { .app { grid-template-columns: 76px 1fr; } .wordmark, .nav a .lbl, .railchip .who, .railsignout .lbl { display: none; } .brandmark { justify-content: center; padding: 6px 0 18px; } .nav a { justify-content: center; padding: 0; } .railchip { justify-content: center; padding: 8px; } .railsignout { justify-content: center; padding: 0; } .railshort { display: none; } } @media (max-width: 760px) { .app { grid-template-columns: 1fr; } .rail { display: none; } .main { padding: 20px 16px calc(80px + env(safe-area-inset-bottom)); max-width: none; } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -6px 20px -12px rgba(28,38,33,.2); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; min-height: 48px; justify-content: center; color: var(--ink-soft); font-size: 10px; font-weight: 600; text-decoration: none; } .tabbar a .icon svg { width: 21px; height: 21px; } .tabbar a.on { color: var(--accent-deep); } } /* Page furniture */ .crumb { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.25rem; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; margin-top: 1rem; } .empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 1.75rem 1.25rem; text-align: center; margin-top: 0.5rem; background: rgba(255, 255, 255, 0.55); } .empty h2 { margin-bottom: 0.25rem; } .empty p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; } /* Houses list */ .house-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .house-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.85rem 1rem; color: var(--ink); transition: border-color 160ms ease, transform 160ms ease; } .house-row:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); } .house-row-main { display: flex; flex-direction: column; min-width: 0; } .house-name { font-weight: 700; } .house-addr { color: var(--ink-soft); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .house-row-side { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .occ-num { font-weight: 650; font-size: 0.92rem; white-space: nowrap; } .occbar { width: 74px; height: 8px; border-radius: 999px; background: #e8ebe8; overflow: hidden; display: inline-block; } .occbar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } /* Pills */ .pill { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); background: #eef0ee; border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; } .pill.full { color: var(--danger); background: var(--danger-soft); } /* Rooms + beds */ .room-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; } .room-head h2 { margin: 0; } .room-head .delroom { margin-left: auto; } .danger-ghost { color: var(--danger); border-color: #efcdc5; } .danger-ghost:hover { background: var(--danger-soft); } .bed-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .bedpill { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px dashed var(--line); border-radius: 10px; padding: 0.45rem 0.7rem; background: #fbfcfb; min-height: 44px; } .bedpill.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); } .bedpill-label { font-weight: 700; font-size: 0.9rem; } .bedpill-who { color: var(--ink-soft); font-size: 0.88rem; } .bedpill.filled .bedpill-who { color: var(--accent); font-weight: 650; } .bedx { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0.35rem; border-radius: 6px; min-width: 32px; min-height: 32px; } .bedx:hover { background: var(--danger-soft); color: var(--danger); } /* Rename is not a destructive action, so it must not borrow the delete colour. */ .bedx.renbed:hover { background: var(--accent-soft); color: var(--accent); } .addbed { display: inline-flex; gap: 0.4rem; align-items: center; } /* Renaming a room / changing who it is for / moving a bed to another room. These sit quietly next to what they change - the selects show the CURRENT value, so they read as labels until you use them. */ .room-head .renroom { margin-left: auto; } .room-head .renroom + .roomtype-edit + .delroom, .room-head .roomtype-edit + .delroom { margin-left: 0; } .roomtype-edit select, .bedmove select { font: inherit; font-size: 0.82rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); padding: 0.25rem 0.4rem; min-height: 32px; max-width: 11rem; } .bedmove select { font-size: 0.78rem; max-width: 8.5rem; } .roomtype-edit select:focus-visible, .bedmove select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* "Made for you" - a room the app generated, so it is obvious which one to rename or split rather than leaving a mystery room called after the house. */ .pill.soft { color: var(--ink-soft); background: var(--accent-soft); font-weight: 650; } /* The signing evidence under a "Signed" pill: the typed name, the agreement stamp and where it came from. Quiet by default - it is a receipt, not a headline. */ .sign-proof { display: block; margin-top: 0.2rem; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.35; } /* "Showing N of M - see all". Every capped list says how much it is holding back. */ .list-more { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--ink-soft); } .list-more a { font-weight: 650; } /* Optional fields folded away so a create form shows what it actually needs. */ .more-fields { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.1rem; } .more-fields > summary { cursor: pointer; font-size: 0.86rem; font-weight: 650; color: var(--ink-soft); padding: 0.4rem 0; min-height: 32px; list-style: revert; } .more-fields > summary:hover { color: var(--accent); } .more-fields > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .more-fields[open] > summary { margin-bottom: 0.4rem; } .more-fields label { display: block; margin-bottom: 0.55rem; } /* Visually hidden, still read aloud. Every one of these selects needs a name that says WHICH room or bed it changes; the visible text alone is ambiguous. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Audit log */ .auditq { width: 100%; font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); margin-bottom: 0.9rem; } .auditq:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .auditlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .auditrow { display: flex; gap: 0.9rem; padding: 0.7rem 0.2rem; border-top: 1px solid var(--line); } .auditrow:first-child { border-top: 0; } .auditrow[hidden] { display: none; } .audit-when { flex: none; width: 92px; font-size: 0.82rem; color: var(--ink-soft); padding-top: 1px; } .audit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .audit-summary { font-size: 0.95rem; color: var(--ink); } .audit-meta { font-size: 0.8rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .audit-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-deep); background: var(--accent-soft); padding: 1px 7px; border-radius: 20px; } /* Shift handover */ .handover-latest { background: var(--accent-soft); border-color: var(--accent-soft); } .ho-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 0.5rem; } .ho-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--accent-soft); padding: 2px 8px; border-radius: 20px; } .ho-meta { font-size: 0.85rem; color: var(--ink-soft); } .ho-note { font-size: 1rem; color: var(--ink); white-space: pre-wrap; line-height: 1.5; } .ho-open { margin-top: 0.75rem; padding: 0.6rem 0.8rem; background: var(--amber-wash, #fbf3e2); border-radius: 10px; } .ho-open-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #7a5b12; } .ho-open p { margin: 2px 0 0; white-space: pre-wrap; } .ho-open-ul { margin: 4px 0 0; padding-left: 1.1rem; } .ho-open-ul li { margin: 1px 0; } /* Carry-forward checklist: last shift's still-open items, ticked = resolved (drops), unticked stays and carries into this handover */ .ho-carry { padding: 0.6rem 0.8rem; background: var(--amber-wash, #fbf3e2); border-radius: 10px; } .ho-carry .hint { margin: 2px 0 0.4rem; } .ho-carry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .ho-carry-row { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-weight: 400; } .ho-carry-cb { width: auto; margin: 0.2rem 0 0; flex: none; } /* Unticked = resolved: strike it through so it reads as done and about to drop. */ .ho-carry-cb:not(:checked) + span { text-decoration: line-through; color: var(--ink-soft); } .ho-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .ho-item { border-top: 1px solid var(--line); padding-top: 0.7rem; } .ho-item:first-child { border-top: 0; padding-top: 0; } .ho-item-meta { font-size: 0.8rem; color: var(--ink-soft); } .ho-item-note { margin: 2px 0 0; white-space: pre-wrap; } .ho-item-open { margin: 3px 0 0; font-size: 0.9rem; color: var(--ink-soft); } /* Dashboard latest-handover strip */ .ho-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--accent-soft); border: 1px solid var(--accent-soft); border-radius: 12px; margin-bottom: 18px; text-decoration: none; color: var(--ink); } .ho-strip:hover { text-decoration: none; border-color: var(--accent); } .ho-strip .hs-body { min-width: 0; flex: 1; } .ho-strip .hs-k { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); } .ho-strip .hs-note { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-size: 0.92rem; } /* Rail search trigger + command palette */ .railsearch { display: flex; align-items: center; gap: 11px; min-height: 40px; margin: 2px 0 8px; padding: 0 12px; width: 100%; border-radius: 11px; border: 1px solid rgba(243,239,230,.16); background: rgba(243,239,230,.05); color: rgba(243,239,230,.8); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .16s var(--ease); } .railsearch:hover { background: rgba(243,239,230,.1); color: var(--ivory); } .railsearch-k { margin-left: auto; font-size: 11px; background: rgba(243,239,230,.14); border-radius: 5px; padding: 1px 6px; font-family: inherit; } .cmdk { position: fixed; inset: 0; z-index: 90; background: rgba(20,30,25,.4); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .cmdk[hidden] { display: none; } .cmdk-box { width: min(600px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px -24px rgba(20,30,25,.6); } .cmdk-input { font: inherit; font-size: 1.05rem; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); outline: none; } .cmdk-results { overflow: auto; padding: 6px; } .cmdk-empty { padding: 18px; color: var(--ink-soft); font-size: 0.92rem; text-align: center; } .cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--ink); } .cmdk-item.on, .cmdk-item:hover { background: var(--accent-soft); } .cmdk-i-label { font-size: 0.95rem; font-weight: 500; } .cmdk-i-sub { font-size: 0.82rem; color: var(--ink-soft); } .cmdk-i-kind { margin-left: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--row-tint, #f2f4f1); padding: 2px 7px; border-radius: 20px; } .cmdk-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-soft); } .cmdk-foot kbd { background: var(--row-tint, #f2f4f1); border-radius: 4px; padding: 0 5px; font-family: inherit; } /* Offline banner + install button */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--attention, #B07A1E); color: #fff; text-align: center; font-size: 0.85rem; font-weight: 600; padding: 6px 12px; } .offline-banner[hidden] { display: none; } .pwa-install { position: fixed; left: 16px; bottom: 16px; z-index: 80; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-deep); font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.5rem 0.9rem; border-radius: 11px; box-shadow: 0 8px 24px -10px rgba(20,55,43,.4); cursor: pointer; } .pwa-install[hidden] { display: none; } /* iOS-only Add-to-Home-Screen hint (see ui.tsx PWA_SCRIPT). Bottom sheet, dismissible. */ .ios-install { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: flex; align-items: center; gap: 0.5rem; max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid #e6e4da; border-radius: 14px; padding: 0.6rem 0.6rem 0.6rem 0.9rem; box-shadow: 0 12px 32px -12px rgba(20,55,43,.45); font-size: 0.85rem; color: var(--ink); } .ios-install[hidden] { display: none; } .ios-install-txt { flex: 1; line-height: 1.35; } .ios-share { vertical-align: -3px; margin: 0 1px; color: var(--accent-deep); } .ios-install-x { flex: none; border: none; background: transparent; color: var(--ink-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.05rem 0.35rem; border-radius: 8px; } .ios-install-x:hover { background: rgba(0,0,0,.06); } :root[data-theme="dark"] .ios-install { border-color: #33352f; } /* Settings sections + workspace links */ .setgroup { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin: 0.6rem 0 -0.2rem; padding-top: 0.7rem; border-top: 1px solid var(--line); } .setgroup:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-deep); font-weight: 600; cursor: pointer; text-decoration: underline; } .testemail-msg { font-size: 0.85rem; color: var(--ink-soft); } .settings-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; } .settings-links a { display: flex; flex-direction: column; gap: 2px; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .16s ease, transform .16s ease; } .settings-links a:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; } .settings-links a b { font-weight: 600; } .settings-links a span { font-size: 0.83rem; color: var(--ink-soft); } /* Compact density - tightens spacing on data surfaces (opt-in, per device) */ [data-density="compact"] .main { font-size: 0.95rem; } [data-density="compact"] .panel { padding: 0.7rem 0.85rem 0.85rem; margin-top: 0.7rem; } [data-density="compact"] .page-head { margin-bottom: 0.6rem; } [data-density="compact"] .field-grid { gap: 0.55rem; } [data-density="compact"] .ledger th, [data-density="compact"] .ledger td { padding-top: 0.35rem; padding-bottom: 0.35rem; } [data-density="compact"] .house-row, [data-density="compact"] .res-row { padding: 0.5rem 0.75rem; } [data-density="compact"] .auditrow { padding: 0.45rem 0.2rem; } [data-density="compact"] .ho-item, [data-density="compact"] .auditlist { gap: 0.4rem; } /* Team notes (comments on records) */ .cmt-list { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .cmt-row { background: var(--row-tint, #f5f7f4); border-radius: 10px; padding: 0.6rem 0.8rem; } .cmt-meta { font-size: 0.8rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; } .cmt-meta b { color: var(--ink); font-weight: 600; } .cmt-del { margin-left: auto; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 5px; border-radius: 5px; } .cmt-del:hover { background: var(--danger-soft); color: var(--danger); } .cmt-body { margin-top: 3px; font-size: 0.95rem; color: var(--ink); line-height: 1.45; } .mention { color: var(--accent-deep); font-weight: 600; background: var(--accent-soft); padding: 0 4px; border-radius: 5px; } .cmt-form { display: flex; flex-direction: column; gap: 0.5rem; } .cmt-form textarea { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); resize: vertical; } .cmt-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .cmt-form .btn.sm { align-self: flex-start; } /* Active sessions */ .sess-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sess-row { display: flex; align-items: center; gap: 12px; padding: 0.8rem 0.2rem; border-top: 1px solid var(--line); } .sess-row:first-child { border-top: 0; } .sess-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sess-dev { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } .sess-here { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--accent-soft); padding: 1px 7px; border-radius: 20px; } .sess-meta { font-size: 0.83rem; color: var(--ink-soft); } .sess-current { font-size: 0.83rem; color: var(--ink-soft); flex: none; } /* Draft recovery banner */ .draftbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.9rem; } .draftbar[hidden] { display: none; } .draftbar-msg { color: var(--ink); } .draftbar-acts { display: flex; align-items: center; gap: 10px; } /* "This week" summary card */ .weekcard .week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 0.9rem; } .week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem; } .week-metric { display: flex; flex-direction: column; gap: 2px; padding: 0.7rem 0.85rem; background: var(--row-tint, #f5f7f4); border-radius: 11px; } .week-metric.neg { background: var(--danger-soft); } .wm-n { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .wm-sub { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); } .wm-l { font-size: 0.8rem; color: var(--ink-soft); } .week-metric.neg .wm-n { color: var(--danger); } /* Offline check-in sync indicator (resident portal) */ .syncline { background: #fbf3e2; color: #7a5b12; border: 1px solid #efdca8; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 0.88rem; font-weight: 600; text-align: center; } .syncline[hidden] { display: none; } /* Ledger: bounced/reversed payment + the tucked-away per-row menu */ .rowacts { display: flex; align-items: center; gap: 2px; justify-content: flex-end; } .rowmenu { position: relative; display: inline-flex; } .rowmenu-btn { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0.35rem; border-radius: 6px; min-width: 30px; min-height: 32px; letter-spacing: 1px; } .rowmenu-btn:hover { background: var(--accent-soft); color: var(--accent-deep); } .rowmenu-pop { position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px -16px rgba(20,30,25,.5); padding: 5px; min-width: 210px; } .rowmenu-pop[hidden] { display: none; } .rowmenu-item { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: 0.9rem; color: var(--ink); padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; } .rowmenu-item:hover { background: var(--row-tint); } .rowmenu-item.bounce { color: var(--clay, #a6462f); } tr.reversed td { color: var(--ink-soft); } .struck { text-decoration: line-through; } .bouncetag { display: inline-block; margin-left: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger); background: var(--danger-soft); padding: 1px 7px; border-radius: 20px; vertical-align: middle; } .addbed input { min-height: 44px; width: 8.5rem; padding: 0.45rem 0.6rem; font-size: 0.92rem; } /* Forms */ .row-form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 460px; margin-top: 0.5rem; } select { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); min-height: 48px; } select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Switch */ .switch-wrap { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; } .switch-label { font-weight: 650; font-size: 0.92rem; } .switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .slider { position: absolute; inset: 0; border-radius: 999px; background: #d5dad5; transition: background 180ms ease; pointer-events: none; } .slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 180ms ease; } .switch input:checked + .slider { background: var(--danger); } .switch input:checked + .slider::before { transform: translateX(20px); } .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; } /* Reveal-on-load motion (the dashboard's signature, shared app-wide via REVEAL_SCRIPT) */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition: opacity .12s linear; transform: none; } } /* Condensed "who's behind" collect lists (billing) - tight rows, not a wall of cards */ .collect-list { list-style: none; margin: 0.5rem 0 0; padding: 0; } .collect-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.65rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .collect-row:first-child { border-top: 0; } .collect-main { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex-wrap: wrap; } .collect-name { font-weight: 600; color: var(--forest); } .collect-sub { font-size: 0.85rem; color: var(--ink-soft); } .collect-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .panel h2 .count, .card h2 .count, .dash-card h2 .count { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); background: var(--accent-soft); padding: 0.05rem 0.5rem; border-radius: 999px; margin-left: 0.45rem; vertical-align: middle; } /* Dashboard stats */ .stat-strip { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.9rem 0 0.4rem; } .stat { display: flex; align-items: baseline; gap: 0.45rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.9rem; color: var(--ink); transition: border-color 160ms ease; } a.stat:hover { border-color: var(--accent); text-decoration: none; } .stat-n { font-weight: 750; font-size: 1.25rem; } .stat-l { color: var(--ink-soft); font-size: 0.92rem; font-weight: 550; } .card.link { color: var(--ink); transition: border-color 160ms ease, transform 160ms ease; } .card.link:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); } /* Small screens */ @media (max-width: 560px) { .house-row { flex-direction: column; align-items: stretch; gap: 0.5rem; } .house-row-side { justify-content: space-between; } .tabs { gap: 0; } .main { padding: 1rem 0.8rem 2.5rem; } } /* Residents */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); } .seg-btn { padding: 0.4rem 0.85rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); transition: background 160ms ease, color 160ms ease; } .seg-btn:not(.on) { background: var(--row-tint); } .seg-btn:hover { background: var(--accent-soft); color: var(--ink); text-decoration: none; } .seg-btn.on { background: var(--accent); color: var(--accent-ink); } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .sort-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; } .sort-wrap select { min-height: 40px; padding: 0.4rem 0.6rem; } .search-wrap input { min-height: 40px; padding: 0.4rem 0.7rem; width: 15rem; max-width: 100%; } @media (max-width: 560px) { .search-wrap { flex: 1 1 100%; } .search-wrap input { width: 100%; } } .nomatch { margin: 0.4rem 0 0.2rem; } .res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .res-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.75rem 1rem; color: var(--ink); transition: border-color 160ms ease, transform 160ms ease; } .res-row:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); } .res-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .res-name { font-weight: 600; color: var(--forest); } .res-where { color: var(--ink-soft); font-size: 0.9rem; } .res-side { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; } .pill.status-active { color: var(--accent); background: var(--accent-soft); } .pill.status-hold { color: #7a5b12; background: #f6ecd4; } .pill.status-discharged { color: var(--ink-soft); background: #eef0ee; } /* "No bed" = an active resident with no bed assigned (e.g. back from a freed-bed hold, or a new admit not yet placed). Amber attention flag, distinct from the red money "owes" pill. */ .pill.nobed { color: #7a5b12; background: #f6ecd4; } .pill.sober { color: var(--accent); background: var(--accent-soft); } .pill.sober b { font-weight: 800; } .pill.big { font-size: 0.9rem; padding: 0.3rem 0.8rem; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.5rem; max-width: 640px; } .field-grid .span2, .field-grid button.span2 { grid-column: 1 / -1; } .inline-field { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.95rem; color: var(--ink); } .inline-field input { width: 5rem; } .inline-field select { width: auto; min-width: 6rem; } textarea { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); resize: vertical; } textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } @media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } } .action-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .hint-block { color: var(--ink-soft); font-size: 0.88rem; max-width: 60ch; overflow-wrap: break-word; } .bed-move { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; } .bed-move label { flex: 1 1 240px; max-width: 340px; } .doc-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .doc-row { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.75rem; background: #fbfcfb; } .doc-row a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-row .bedx { margin-left: auto; } .doc-row .pill { margin-left: auto; } .mini-h { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin: 0.9rem 0 0.4rem; } .doc-upload { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } input[type="file"] { border: 1.5px dashed var(--line); border-radius: 10px; padding: 0.55rem; background: #fbfcfb; font-size: 0.9rem; max-width: 100%; } /* Documents + sign */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } } .signed-body { white-space: pre-wrap; background: #fbfcfb; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin: 0.8rem 0; line-height: 1.6; max-height: 46vh; overflow-y: auto; font-size: 0.95rem; } .check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; } .check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); } .prefill { margin: 0 0.25rem 0.25rem 0; } /* Dashboard command center */ .dash-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 0.5rem 0 1rem; } .metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 0.9rem 1rem; color: var(--ink); display: flex; flex-direction: column; gap: 0.15rem; transition: border-color 160ms ease, transform 160ms ease; } .metric:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); } .metric.warn { border-color: #e8d9b0; background: #fdf9ef; } .metric-n { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; } .metric-sub { font-size: 1rem; font-weight: 500; color: var(--ink-soft); } .metric-l { color: var(--ink-soft); font-size: 0.88rem; font-weight: 400; } .metric-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .metric-ic.warn { background: var(--honey-soft); color: var(--honey-ink); } .metric.warn { background: var(--honey-soft); border-color: var(--honey-line); } .metric.warn .metric-n { color: var(--honey-ink); } .metric.warn .metric-l { color: var(--honey-ink); } .dash-person { display: inline-flex; align-items: center; gap: 0.5rem; } .quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; } .qa { background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 0.9rem; padding: 0.5rem 0.85rem; border-radius: 999px; transition: filter 140ms ease; } .qa:hover { text-decoration: none; filter: brightness(0.97); } .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; } .dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; } .dash-card h2 { font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .dash-card h2 .count { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); background: #eef0ee; border-radius: 999px; padding: 0.1rem 0.55rem; } .dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .dash-list li.more { color: var(--ink-soft); font-size: 0.88rem; justify-content: flex-start; } .dash-list a { font-weight: 600; } .empty-line { color: var(--accent); font-size: 0.92rem; margin: 0; } .dash-cta { color: var(--ink-soft); font-size: 0.93rem; margin: 0; } /* Billing */ .pill.owes { color: var(--danger); background: var(--danger-soft); } .notice { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0.6rem 0; } .notice.warn { border-color: #e8d9b0; background: #fdf9ef; } .notice.ok { border-color: #bfe0cf; background: var(--accent-soft); color: var(--accent-deep); } /* Simple check-marked feature list (subscription "what's included", etc.) */ .check-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.45rem; } .check-list li { position: relative; padding-left: 1.55rem; color: var(--ink-soft); line-height: 1.55; } .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .notice-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .notice-main span { color: var(--ink-soft); font-size: 0.92rem; } .notice-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .ledger-wrap { overflow-x: auto; } .ledger { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .ledger th { text-align: left; font-size: 0.8rem; letter-spacing: 0.01em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem; } .ledger td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; } .ledger tr:last-child td { border-bottom: none; } .ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ledger .pay { color: var(--accent); font-weight: 650; } .ledger .nowrap { white-space: nowrap; } /* UA tests */ .switch input:checked + .slider.ok { background: var(--accent); } .res-row.static { cursor: default; } .res-row.static:hover { border-color: var(--line); transform: none; } .test-row-wrap .detailform { margin-top: 0.35rem; } .labwrap { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .labwrap .btn.sm { min-height: 28px; padding: 0.1rem 0.5rem; } .photolabel { color: var(--accent); font-weight: 600; cursor: pointer; font-size: 0.92rem; } .photolabel:hover { text-decoration: underline; } /* Applications */ .flagchip { color: var(--danger); background: var(--danger-soft); font-size: 0.78rem; font-weight: 750; border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.45rem; } .mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; } /* A URL, a token or a key is one unbreakable word, so on a phone it pushes the whole page sideways rather than wrapping. `anywhere` lets it break mid-string, and min-width:0 lets it shrink inside a flex row (a flex item refuses to go below its content width without it). This was 2px of sideways scroll on Forms from the /apply/{slug} link, and it would have grown with a longer slug. */ .mono { overflow-wrap: anywhere; min-width: 0; } .statussel { min-height: 40px; padding: 0.35rem 0.55rem; font-size: 0.9rem; } .answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem 1.2rem; margin: 0.5rem 0 0; } .answer dt { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; } .answer dd { margin: 0.1rem 0 0; font-weight: 550; overflow-wrap: anywhere; } .subdetail { margin-top: 0.35rem; } .field-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .field-item { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.7rem; background: #fbfcfb; } .field-item.is-section { background: var(--accent-soft); border-color: transparent; font-weight: 700; } /* break-word (not anywhere): wrap at spaces, keep words whole - `anywhere` was snapping long question labels mid-word ("violent" -> "viole/nt") on a squeezed mobile row. */ .field-label { flex: 1; min-width: 0; overflow-wrap: break-word; } .field-meta { color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; } .field-btns { display: inline-flex; gap: 0.1rem; } /* On a phone the drag-handle + label take the full first line and the type badge + the reorder/required/delete controls drop to a second line, so the label has room to read as whole words instead of a squeezed mid-word column. */ @media (max-width: 560px) { .field-item { flex-wrap: wrap; row-gap: 0.35rem; } .field-label { flex: 1 1 auto; } .field-meta { order: 3; } .field-btns { order: 4; margin-left: auto; } } /* Form builder editor - drag to reorder, add-into-section, packs, flash (2026-09-01 overhaul) */ .field-item { cursor: default; } .drag-h { color: var(--ink-soft); opacity: 0.55; cursor: grab; font-size: 1.05rem; line-height: 1; padding: 0 0.15rem; user-select: none; flex: 0 0 auto; } .drag-h:active { cursor: grabbing; } .field-item.dragging { opacity: 0.4; } .field-item.drop-into { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); } .field-item.just-added { animation: fieldFlash 1.5s var(--ease); } @keyframes fieldFlash { 0%, 55% { box-shadow: 0 0 0 3px var(--honey-soft), 0 0 0 1px var(--honey-line); } 100% { box-shadow: 0 0 0 0 transparent; } } .field-item .bedx:hover { background: var(--accent-soft); color: var(--accent); } .field-item .bedx.del:hover { background: var(--danger-soft); color: var(--danger); } .newsec { max-width: 200px; } .addpack { transition: opacity .15s var(--ease); } .addpack.added, .addpack:disabled { opacity: 0.55; cursor: default; } /* In-app prompt modal (replaces the native browser prompt) */ .ep-modal-ov { position: fixed; inset: 0; background: rgba(28,38,33,.42); display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 200; animation: epModalIn .16s var(--ease); } .ep-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.15rem; width: 100%; max-width: 420px; animation: epModalPop .18s var(--ease); } .ep-modal-t { font-family: var(--font-head); font-size: 1.25rem; margin: 0 0 0.8rem; color: var(--forest); } .ep-modal-in { width: 100%; font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfc; color: var(--ink); } .ep-modal-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .ep-modal-acts { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } @keyframes epModalIn { from { opacity: 0; } to { opacity: 1; } } @keyframes epModalPop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } } /* AI "just did this" highlight: a persistent honey ring (always shown while the class is on, so it survives paused/throttled animations and reduced-motion) with an attention pulse layered on top. STAYS until they leave the page (set by HIGHLIGHT_SCRIPT on ?hl=). */ .ai-just-did { border-radius: 14px; box-shadow: 0 0 0 2.5px var(--honey); scroll-margin: 100px; animation: aiJustDid 2s var(--ease); } .ai-just-did .res-row { background: rgba(176,122,30,.13); } @keyframes aiJustDid { 0% { box-shadow: 0 0 0 2.5px var(--honey); } 14% { box-shadow: 0 0 0 8px rgba(176,122,30,.34); } 32% { box-shadow: 0 0 0 2.5px var(--honey); } 52% { box-shadow: 0 0 0 8px rgba(176,122,30,.34); } 100% { box-shadow: 0 0 0 2.5px var(--honey); } } /* Quick tab picker (reuses the .ep-modal shell) */ .qt-modal { max-width: 440px; } .qt-sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 .8rem; } .qt-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -0.3rem; padding: 0 0.3rem; } .qt-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 9px; cursor: pointer; font-weight: 550; color: var(--ink); } .qt-row:hover { background: var(--accent-soft); } .qt-row input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; } /* Demo AI nudge: on entering the demo the AI button bounces a few times, nothing more. */ .ai-fab.ai-nudge { animation: aiNudge 1s var(--ease) 3; } @keyframes aiNudge { 0%,58%,100% { transform: translateY(0); } 16% { transform: translateY(-10px); } 30% { transform: translateY(0); } 42% { transform: translateY(-5px); } } /* Floating setup coach: always-on top-right panel guiding a new owner through setup */ .ep-coach { position: fixed; top: 74px; right: 18px; z-index: 60; width: 330px; max-width: calc(100vw - 32px); animation: epCoachIn .3s var(--ease); } .ep-coach-body { position: relative; background: var(--surface, #fff); border: 1px solid var(--line, #E6E9E3); border-radius: 16px; box-shadow: 0 12px 40px -14px rgba(20,40,30,.35); padding: 1.1rem 1.15rem 1rem; } .ep-coach-min { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: 0; background: none; color: var(--ink-soft, #4A6158); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 7px; } .ep-coach-min:hover { background: var(--row-tint, #F5F7F4); color: var(--ink, #1C2621); } .ep-coach-welcome { font-family: var(--font-head, Georgia, serif); font-size: 1.2rem; color: var(--forest, #164C3C); line-height: 1.15; padding-right: 22px; } .ep-coach-sub { color: var(--ink-soft, #4A6158); font-size: .86rem; line-height: 1.4; margin: .3rem 0 .8rem; } .ep-coach-bar { height: 6px; background: var(--accent-soft, #EFF4F0); border-radius: 999px; overflow: hidden; } .ep-coach-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent, #1F6B54), var(--accent-deep, #164C3C)); border-radius: 999px; transition: width .4s var(--ease); } .ep-coach-prog { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft, #4A6158); margin: .45rem 0 .7rem; } .ep-coach-steps { display: flex; flex-direction: column; gap: .25rem; } .ep-coach-step { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 11px; text-decoration: none; color: var(--ink, #1C2621); transition: background .15s var(--ease); } .ep-coach-step:hover { background: var(--accent-soft, #EFF4F0); text-decoration: none; } .ep-coach-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; background: var(--accent-soft, #EFF4F0); color: var(--accent, #1F6B54); } .ep-coach-step.done .ep-coach-num { background: var(--accent, #1F6B54); color: #fff; } .ep-coach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .ep-coach-txt b { font-weight: 650; font-size: .92rem; } .ep-coach-txt span { color: var(--ink-soft, #4A6158); font-size: .78rem; } .ep-coach-step.done .ep-coach-txt b { color: var(--ink-soft, #4A6158); text-decoration: line-through; } .ep-coach-go { color: var(--accent, #1F6B54); font-weight: 700; opacity: 0; transition: opacity .15s; } .ep-coach-step:hover .ep-coach-go { opacity: 1; } .ep-coach-step.done .ep-coach-go { display: none; } .ep-coach-pill { display: none; align-items: center; gap: .5rem; background: var(--accent, #1F6B54); color: #fff; border: 0; cursor: pointer; font: inherit; font-weight: 650; font-size: .9rem; padding: .6rem 1rem; border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(20,40,30,.5); } .ep-coach-pilln { background: rgba(255,255,255,.22); border-radius: 999px; padding: .05rem .5rem; font-size: .8rem; } .ep-coach.min { width: auto; } .ep-coach.min .ep-coach-body { display: none; } .ep-coach.min .ep-coach-pill { display: inline-flex; } @keyframes epCoachIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 620px) { .ep-coach { top: auto; bottom: 84px; right: 12px; left: 12px; width: auto; max-width: none; } .ep-coach.min { left: auto; } } /* Public apply page */ .apply-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 1.25rem; gap: 1rem; } .apply-card { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1.75rem 1.5rem; margin-top: 1rem; } .apply-card .brand { margin-bottom: 1rem; } .apply-section { margin: 1.1rem 0 0.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--accent); } .yesno { border: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .yesno legend { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; padding: 0; } .radio { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 500; cursor: pointer; } .radio input { min-height: 0; width: 20px; height: 20px; accent-color: var(--accent); } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; } .apply-done h2 { color: var(--accent); } /* Multi-step apply wizard (2026-09-01): section-per-step + progress bar */ .apply-prog { margin: 0.4rem 0 1.1rem; } .apply-prog-bar { height: 7px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; } .apply-prog-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: 999px; transition: width .2s var(--ease); } .apply-prog-label { display: block; margin-top: 0.45rem; font-size: 0.82rem; color: var(--ink-soft); font-weight: 650; } .apply-step { animation: stepIn .28s var(--ease); } .apply-step .apply-section { border-top: none; padding-top: 0; margin-top: 0.2rem; font-size: 1.15rem; } @keyframes stepIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .apply-nav { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.3rem; } .apply-nav-sp { flex: 1; } .apply-nav .btn { min-width: 116px; } @media (max-width: 420px) { .apply-nav .btn { min-width: 96px; } } /* Resident portal - featherweight, huge targets, old-Android friendly */ .portal { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 2.5rem; } .portal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; } .portal h1 { font-size: 1.7rem; } .portal-sober { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 1rem; } .sober-num { font-size: 2.6rem; font-weight: 800; color: var(--accent); line-height: 1; } .sober-label { color: var(--ink-soft); font-weight: 600; } .portal-cards { display: flex; flex-direction: column; gap: 0.9rem; } .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; } .pcard h2 { font-size: 0.95rem; color: var(--ink-soft); text-transform: none; margin-bottom: 0.4rem; } .pbig { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.25rem; } .pbig.owe { color: var(--danger); } .pbig.good { color: var(--accent); } .psub { color: var(--ink-soft); font-size: 0.95rem; } .pstatus { font-weight: 650; color: var(--accent); min-height: 1.2em; margin: 0.4rem 0 0; } /* Optimistic-action feedback: gentle green confirm, red inline error. No reflow - .pstatus already reserves its line height. Motion always on (house rule). */ .pstatus.saved-flash { color: var(--accent); animation: savedFlash 0.28s ease-out; } .pstatus.err-flash { color: var(--danger); animation: savedFlash 0.28s ease-out; } @keyframes savedFlash { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } .btn.big { width: 100%; min-height: 56px; font-size: 1.05rem; margin-top: 0.5rem; } .btn.big.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn.big.ghost:hover { background: var(--accent-soft); } .biginput { width: 100%; min-height: 52px; font-size: 1rem; } .plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; color: var(--ink-soft); font-size: 0.95rem; } .chore-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .inline-btns { display: inline-flex; gap: 0.4rem; } .goal-done { text-decoration: line-through; color: var(--ink-soft); } /* Messaging */ .msg-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0.9rem; } @media (max-width: 640px) { .msg-layout { grid-template-columns: 1fr; } } .msg-people { display: flex; flex-direction: column; gap: 0.25rem; max-height: 60vh; overflow-y: auto; } .msg-person { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 0.93rem; } .msg-person:hover { background: var(--accent-soft); text-decoration: none; } .msg-person.on { background: var(--accent-soft); color: var(--accent); } .msg-person .count { background: var(--danger); color: #fff; font-size: 0.72rem; border-radius: 999px; padding: 0.05rem 0.45rem; } .msg-section { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 0.7rem 0.2rem; } .msg-chattitle { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 0.95rem; background: var(--surface); } /* Rooms & beds section (Add / Delete) */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .section-head h2 { margin: 0; } .section-btns { display: flex; gap: 0.45rem; } .addroom-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; padding: 0.95rem; background: var(--accent-soft); border-radius: 12px; } .addroom-form .span2 { grid-column: 1 / -1; } @media (max-width: 560px) { .addroom-form { grid-template-columns: 1fr; } } .rooms-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .room-block { border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.95rem; background: #fff; } .room-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.65rem; } .room-head h3 { margin: 0; font-size: 1.02rem; } .room-count { color: var(--ink-soft); font-size: 0.85rem; } .room-head .delroom { display: none; margin-left: auto; } .delmode .room-head .delroom { display: inline-flex; } /* ---- Redesign: soft depth + warm cards across every surface ---- */ .main { animation: fadeup 240ms ease-out; } @keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .panel, .card, .metric, .dash-card, .house-row, .res-row, .stat, .notice, .room-block, .pcard, .auth-card, .apply-card, .empty { border-radius: var(--radius); } .panel, .card, .dash-card, .metric, .pcard { box-shadow: var(--shadow-sm); } .panel { border-color: var(--line); } .topbar { box-shadow: 0 1px 0 rgba(20,55,43,0.06); border-bottom: none; } .org-chip { font-family: var(--font-head); } .stat-n, .metric-n, .sober-num { color: var(--forest); } /* honey accent on sober-day + milestone chips */ .pill.sober { background: var(--honey-soft); color: var(--honey-ink); } .pill.sober b { color: var(--honey-ink); } .badge { background: var(--honey-soft); color: var(--honey-ink); } .empty { background: rgba(255,255,255,0.6); border: 1.5px dashed var(--line); } @media (prefers-reduced-motion: reduce) { .main { animation: none; } } .msg-thread-wrap { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 320px; } .msg-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 55vh; } .portal-thread { max-height: 34vh; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.5rem; } .msg { max-width: 78%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.95rem; } .msg .msg-body { display: block; } .msg .msg-meta { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.2rem; } .msg.in { background: #eef0ee; align-self: flex-start; border-bottom-left-radius: 4px; } .msg.out { background: var(--accent-soft); align-self: flex-end; border-bottom-right-radius: 4px; } .msg.out .msg-meta { text-align: right; } .msg-compose { display: flex; gap: 0.5rem; padding: 0.6rem; border-top: 1px solid var(--line); } .msg-compose input { flex: 1; min-height: 44px; } .portal-thread + .msg-compose { border-top: none; padding: 0; } /* Mood picker */ .mood-row { display: flex; gap: 0.4rem; justify-content: space-between; margin-bottom: 0.5rem; } .mood-btn { flex: 1; font-size: 1.6rem; background: #fbfcfb; border: 1.5px solid var(--line); border-radius: 12px; padding: 0.5rem 0; cursor: pointer; min-height: 56px; } .mood-btn.on { border-color: var(--accent); background: var(--accent-soft); } /* EasyPath AI assistant widget */ .ai-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; border: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #2ea27b 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 6px 20px rgba(31,122,92,0.4); transition: transform 140ms ease, filter 140ms ease; } .ai-fab:hover { transform: translateY(-2px) scale(1.04); } .ai-fab.hidden { display: none; } .ai-spark { line-height: 1; } .ai-panel { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 51; width: min(380px, calc(100vw - 1.5rem)); height: min(560px, calc(100vh - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(28,37,33,0.25); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); } .ai-panel[hidden] { display: none; } .ai-x { transition: opacity 140ms ease; } .ai-x:hover { opacity: 0.75; } .ai-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; background: linear-gradient(135deg, var(--accent) 0%, #2ea27b 100%); color: #fff; } .ai-title { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; } .ai-x { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 0.2rem; } .ai-thread { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; background: #fbfcfb; } .ai-compose { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--line); align-items: center; } .ai-compose input { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; font: inherit; color: var(--ink); -webkit-text-fill-color: var(--ink); background: #fcfdfc; } .ai-mic { background: var(--accent-soft); border: none; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; } .ai-mic.on { background: var(--danger); animation: pulse 1s infinite; } .ai-doneline { font-size: 0.82rem; color: var(--ink-soft); background: transparent !important; } .ai-doneline .ai-refresh { color: var(--accent); font-weight: 500; } .ai-send { min-height: 44px; padding: 0 0.9rem; flex-shrink: 0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} } @media print { .ai-fab, .ai-panel { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ai-mic.on { animation: none; } } .support-chat { height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; background: #fbfcfb; } .support-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; } .chip-btn { background: var(--accent-soft); color: var(--accent); border: none; font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.7rem; border-radius: 999px; cursor: pointer; } .chip-btn:hover { filter: brightness(0.97); } @media print { .help-fab { display: none; } } .portal-url { overflow-wrap: anywhere; } /* PO report */ .report-wrap { max-width: 820px; margin: 0 auto; padding: 1rem 1rem 3rem; } .report-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; } .report { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2rem 2.2rem; box-shadow: var(--shadow); } .report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.8rem; margin-bottom: 1.2rem; } .report-head h1 { font-size: 1.35rem; margin: 0; } .report-head p { color: var(--ink-soft); margin: 0.15rem 0 0; } .report-date { white-space: nowrap; font-weight: 600; } .report h2 { margin: 1.4rem 0 0.4rem; font-size: 1rem; } .report p { line-height: 1.6; } .report-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0.4rem 0 0.6rem; } .report-table th { text-align: left; border-bottom: 1.5px solid var(--ink); padding: 0.35rem 0.5rem; font-size: 0.8rem; } .report-table td { border-bottom: 1px solid var(--line); padding: 0.4rem 0.5rem; } .report-sign { display: flex; gap: 3rem; margin-top: 2.2rem; } .report-sign > div { flex: 1; max-width: 260px; } .sign-line { border-bottom: 1.5px solid var(--ink); height: 2.2rem; } .report-sign p { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--ink-soft); } .report-foot { margin-top: 1.6rem; font-size: 0.8rem; color: var(--ink-soft); } @media print { .no-print, .topbar { display: none !important; } body { background: #fff; } .report-wrap { padding: 0; max-width: none; } .report { border: none; box-shadow: none; border-radius: 0; padding: 0; } } /* Compliance & outcomes report: a print-only header, an active period tab, and a clean print sheet (drop the app chrome so "Print / save PDF" is presentable). */ .print-head { display: none; } .period-tabs .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); } @media print { .rail, .tabbar, .housebar, .house-bar, .ai-fab, .help-fab { display: none !important; } .main { padding: 0 !important; } .print-head { display: block; font-weight: 700; margin: 0 0 0.9rem; font-size: 1rem; } .panel { break-inside: avoid; box-shadow: none; } } /* Motion stays ON for everyone - Josh's standing rule is to never honor prefers-reduced-motion (no toggle, always animate). The global transition killer that used to live here was removed so buttons, hovers, reveals, and the marketing motion glide instead of snapping on machines whose OS has animations turned off. */ /* EasyPath AI quick replies: tappable confirm buttons + suggestion chips */ .ai-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.15rem 0.2rem 0.35rem; } .ai-qbtn, .ai-qchip { font: inherit; cursor: pointer; border-radius: 999px; min-height: 34px; padding: 0.3rem 0.85rem; font-size: 0.88rem; font-weight: 600; transition: filter 140ms ease, background 140ms ease; } .ai-qbtn { border: none; background: var(--accent); color: #fff; } .ai-qbtn:hover { filter: brightness(1.06); } .ai-quick-btns .ai-qbtn:last-child { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .ai-quick-btns .ai-qbtn:last-child:hover { background: var(--accent-soft); filter: none; } .ai-qchip { border: 1px solid var(--line); background: var(--surface); color: var(--accent-deep); font-weight: 550; } .ai-qchip:hover { background: var(--accent-soft); border-color: var(--accent-soft); } /* ============ DARK MODE - literal-color patches ============ */ /* The token remap above handles every component that reads a var. These rules fix the handful of surfaces that hardcode light hex values (form insets, tinted chips, the switch track) so they don't flash bright on dark. Filled accent buttons intentionally keep white text; print stays white-on-white. */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .auditq, :root[data-theme="dark"] .cmt-form textarea { background: #1B1710; } :root[data-theme="dark"] .badge.soft, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .pill.status-discharged, :root[data-theme="dark"] .dash-card h2 .count, :root[data-theme="dark"] .msg.in { background: #2A241C; } :root[data-theme="dark"] .bedpill, :root[data-theme="dark"] .doc-row, :root[data-theme="dark"] .field-item, :root[data-theme="dark"] .ep-modal-in, :root[data-theme="dark"] input[type="file"], :root[data-theme="dark"] .signed-body, :root[data-theme="dark"] .mood-btn, :root[data-theme="dark"] .support-chat, :root[data-theme="dark"] .ai-thread, :root[data-theme="dark"] .room-block { background: #211D16; } :root[data-theme="dark"] .occbar { background: #34302A; } :root[data-theme="dark"] .slider { background: #443f37; } :root[data-theme="dark"] .switch input:checked + .slider::before, :root[data-theme="dark"] .slider::before { background: #ECE6DA; } :root[data-theme="dark"] .pill.status-hold { color: var(--honey-ink); background: var(--honey-soft); } :root[data-theme="dark"] .metric.warn, :root[data-theme="dark"] .notice.warn { border-color: var(--honey-line); background: var(--honey-soft); } :root[data-theme="dark"] .err { border-color: #5a352c; } :root[data-theme="dark"] .syncline { background: var(--honey-soft); color: var(--honey-ink); border-color: var(--honey-line); } /* ─ House workspace: picker + "Viewing X" bar (per-house view) ─ */ .housebar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;padding:.45rem .6rem;border:1px solid var(--line,#e6e1d8);border-radius:12px;background:var(--card,#fff)} .housebar.is-on{border-color:var(--accent,#2f7d5b);background:#eef6f1;background:color-mix(in srgb,var(--accent,#2f7d5b) 9%,#fff)} .housebar.is-org{background:var(--wash,#f6f3ee)} .housebar-note{font-size:.85rem;color:var(--ink,#26221c);font-weight:550} .housebar-note b{font-weight:750} .housebar.is-on .housebar-note{color:var(--accent,#2f7d5b)} .housebar-exit{margin-left:auto} .housebar-exit>button{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--line,#ddd);background:var(--card,#fff);color:var(--ink,#26221c);border-radius:99px;padding:.3rem .75rem} .housebar-exit>button:hover{border-color:var(--accent,#2f7d5b);color:var(--accent,#2f7d5b)} .hpick{position:relative} .hpick-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font-weight:650;font-size:.88rem;color:var(--ink,#26221c);border:1px solid var(--line,#ddd);background:var(--card,#fff);border-radius:99px;padding:.34rem .75rem;user-select:none} .hpick-btn::-webkit-details-marker{display:none} .hpick-btn::marker{content:""} .hpick[open]>.hpick-btn,.hpick-btn:hover{border-color:var(--accent,#2f7d5b)} .hpick-car{font-size:.65rem;opacity:.65} .hpick-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:210px;display:flex;flex-direction:column;padding:.35rem;background:var(--card,#fff);border:1px solid var(--line,#e0dccf);border-radius:12px;box-shadow:0 14px 36px rgba(20,16,10,.17)} .hpick-opt{text-align:left;font:inherit;font-size:.88rem;font-weight:550;cursor:pointer;border:0;background:none;color:var(--ink,#26221c);border-radius:8px;padding:.48rem .55rem} .hpick-opt:hover{background:var(--wash,#f3efe7)} .hpick-opt.on{font-weight:750;color:var(--accent,#2f7d5b)} @media (max-width:640px){.hpick-menu{min-width:min(80vw,260px)}} /* --- Import drop zone (residents CSV) --- */ .import-drop{border:2px dashed var(--honey-line,#e6cf9f);border-radius:14px;padding:1.4rem 1rem 1.2rem;text-align:center;background:var(--honey-soft,#FBF3E2);transition:border-color .18s ease, box-shadow .18s ease;} .import-drop.drag{border-color:var(--honey,#B07A1E);box-shadow:0 0 0 3px var(--honey-soft,#FBF3E2),0 0 0 4px var(--honey,#B07A1E);} .import-drop .import-drop-h{margin:0 0 .25rem;font-size:1.02rem;} .import-drop .sub{margin:.15rem auto;max-width:52ch;} .import-fname{margin:.55rem 0 0;font-weight:700;color:var(--honey-ink,#7A5411);min-height:1.1em;} .import-or{text-align:center;color:var(--ink-soft,#6b6459);margin:.75rem 0 .4rem;font-size:.88rem;letter-spacing:.02em;} .ep-coach-import{display:block;margin-top:.5rem;padding-top:.55rem;border-top:1px solid var(--line,#E6E9E3);font-size:.82rem;font-weight:600;color:var(--honey-ink,#7A5411);text-decoration:none;} .ep-coach-import:hover{text-decoration:underline;} .empty-cta{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;} /* --- Import: "coming from another system" disclosure --- */ .src-list{margin:.75rem 0 0;border:1px solid var(--line,#e7ede9);border-radius:12px;background:var(--surface,#fff);overflow:hidden} /* The summary now wraps an h2 so the four source groups below can be h3 instead of skipping two levels down from the page h1. Neither heading changes size. */ .src-sum-h{font:inherit;color:inherit;margin:0} .src-sum{cursor:pointer;list-style:none;padding:.7rem .9rem;min-height:46px;display:flex;align-items:center;gap:.5rem;font-weight:650;font-size:.92rem;color:var(--accent-deep,#175d47);transition:background .18s ease} .src-sum::-webkit-details-marker{display:none} .src-sum::marker{content:""} .src-sum::after{content:"";margin-left:auto;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease} .src-list[open] .src-sum::after{transform:rotate(225deg) translateY(1px)} .src-body{padding:0 .9rem .9rem;border-top:1px solid var(--line,#e7ede9)} .src-body .hint-block{margin:.7rem 0} .src-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem 1.1rem;margin:.2rem 0} .src-group h3{margin:0 0 .2rem;font-family:var(--font-body,inherit);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft,#5c665f)} .src-group p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink,#1e2a25)} .src-sum:active{background:var(--accent-soft,#e7f1ec)} @media (hover:hover) and (pointer:fine){.src-sum:hover{background:var(--accent-soft,#e7f1ec)}} /* --- Bulk placement (/app/residents/place) + its nudge on the roster --- */ .place-nudge{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.9rem 0 0;padding:.8rem .95rem;border:1px solid var(--honey-line,#e6cf9f);background:var(--honey-soft,#fbf3e2);border-radius:12px} .place-nudge-t{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 240px} .place-nudge-t b{color:var(--honey-ink,#6e4e12);font-size:.98rem} .place-nudge-t .sub{margin:0;font-size:.86rem} .place-newhouse{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1.1fr);gap:.7rem;margin-top:.9rem} .place-pick{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem} .place-pick label{max-width:420px} .place-pick .hint-block{margin:0;min-height:1.3em} .place-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.4rem 0;border-bottom:1px solid var(--line,#e7ede9)} .place-all{display:flex;flex-direction:row;align-items:center;gap:.55rem;font-weight:650;font-size:.92rem;cursor:pointer;min-height:46px} .place-head .hint{margin-left:auto} .place-list{list-style:none;margin:0;padding:0} .place-row{border-bottom:1px solid var(--line,#e7ede9)} .place-row:last-child{border-bottom:0} .place-row label{display:flex;flex-direction:row;align-items:center;gap:.7rem;padding:.55rem .35rem;min-height:48px;cursor:pointer;border-radius:8px;transition:background .16s ease} .place-row input[type=checkbox],.place-all input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent,#1e7a5c)} .place-name{font-weight:600;color:var(--ink,#1e2a25)} .place-row .hint{margin-left:auto;text-align:right} .place-row label:active{background:var(--accent-soft,#e7f1ec)} @media (hover:hover) and (pointer:fine){.place-row label:hover{background:var(--accent-soft,#e7f1ec)}} .place-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;padding:.85rem 0 1rem;background:linear-gradient(to top,var(--bg,#f5f4ef) 74%,rgba(245,244,239,0))} .place-bar .err{flex:1 1 100%;margin:0} @media (max-width:640px){ .place-newhouse{grid-template-columns:1fr} .place-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom));background:var(--bg,#f5f4ef);border-top:1px solid var(--line,#e7ede9)} .place-bar .btn,.place-bar .btn.ghost{flex:1 1 auto} .place-row label{flex-wrap:wrap} .place-row .hint{margin-left:0;flex:1 1 100%;text-align:left;padding-left:calc(20px + .7rem)} } /* --- "Show me how" escape hatch (import: spreadsheet -> CSV) --- */ .howto-btn{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 .35rem;padding:.5rem .85rem;min-height:44px;box-sizing:border-box;border-radius:999px;border:1px solid var(--honey,#c88a2e);background:var(--honey-soft,#fbf3e2);color:var(--honey-ink,#6e4e12);font-size:.86rem;font-weight:650;line-height:1.2;text-decoration:none;transition:background .16s ease,border-color .16s ease} .howto-btn::after{content:"\2197";font-size:.95em;opacity:.7} .howto-btn:active{background:#f6e7c8} @media (hover:hover) and (pointer:fine){.howto-btn:hover{background:#f6e7c8;border-color:var(--honey-ink,#6e4e12)}} /* Inside a red error block the honey chip would clash, so it borrows the danger palette and reads as the way out of the problem it sits in. */ .err .howto-btn{margin:.55rem 0 0;background:var(--surface,#fff);border-color:#e0b3a8;color:var(--danger,#b3402e)} .err .howto-btn:active{background:#fdf2ef} @media (hover:hover) and (pointer:fine){.err .howto-btn:hover{background:#fdf2ef;border-color:var(--danger,#b3402e)}} /* --- History import: the record-type picker --- */ .kind-list{list-style:none;margin:.7rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.6rem} .kind-card{display:flex;flex-direction:column;gap:.15rem;height:100%;padding:.75rem .85rem;border:1px solid var(--line,#e7ede9);border-radius:12px;background:var(--surface,#fff);text-decoration:none;color:inherit;min-height:72px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} .kind-card .sub{margin:0;font-size:.84rem} .kind-name{font-weight:700;color:var(--forest,#14372b)} .kind-card:active{border-color:var(--accent,#1e7a5c);transform:translateY(1px)} @media (hover:hover) and (pointer:fine){.kind-card:hover{border-color:var(--accent,#1e7a5c);box-shadow:var(--shadow-sm,0 2px 10px rgba(20,55,43,.08));transform:translateY(-1px)}} /* A link sitting inside a sentence needs more than colour to be findable (WCAG 1.4.1 - colour is not the only visual means). Buttons and chips that happen to be keep their own look; this is only for links inside body copy. */ .hint-block a:not(.btn):not(.howto-btn), .sub a:not(.btn):not(.howto-btn), .empty p a:not(.btn):not(.howto-btn){text-decoration:underline;text-underline-offset:2px} /* Same rule for the two remaining spots axe flagged: a breadcrumb link sits beside plain text ("Residents / Chris Nolan"), and the med-pass heading links a resident's name next to their house name. Both were colour-only. */ .crumb a:not(.btn){text-decoration:underline;text-underline-offset:2px} .panel h2 > a:not(.btn),.panel h3 > a:not(.btn){text-decoration:underline;text-underline-offset:2px} /* --- Auth forms: the error lands ON the field that's wrong --- NOTE: .fld-err and .caps-note set display:flex, which BEATS the browser's built-in [hidden]{display:none}. They stay hidden only because of the global [hidden]{display:none!important} at the end of this file. Remove that rule and every login error and the Caps Lock note become permanently visible. */ .fld{display:flex;flex-direction:column;gap:.35rem} .fld>label{display:block;font-weight:600;font-size:.92rem} .fld input{width:100%} .fld.bad input,.fld.bad input:focus{border-color:var(--danger,#b3402e);box-shadow:0 0 0 3px var(--danger-soft,#f7e4e0)} .fld-err{display:flex;align-items:flex-start;gap:.4rem;margin:0;font-size:.86rem;font-weight:600;line-height:1.4;color:var(--danger,#b3402e)} .fld-err::before{content:"!";flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:50%;background:var(--danger,#b3402e);color:#fff;font-size:11px;font-weight:800;line-height:15px;text-align:center} .caps-note{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.84rem;font-weight:600;color:var(--honey-ink,#6e4e12)} .caps-note::before{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--honey,#c88a2e)} .err-link{display:inline-block;margin-top:.4rem;font-weight:700;color:var(--danger,#b3402e);text-decoration:underline;text-underline-offset:2px} /* Show / hide password */ .pw-wrap{position:relative;display:block} .pw-wrap input{width:100%;padding-right:48px} .pw-eye{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink-soft,#5c665f);cursor:pointer;transition:color .16s ease,background .16s ease} .pw-eye svg{width:20px;height:20px} .pw-eye .pw-slash{opacity:0;transition:opacity .16s ease} .pw-eye.on .pw-slash{opacity:1} .pw-eye:focus-visible{outline:2px solid var(--accent,#1e7a5c);outline-offset:2px} .pw-eye:active{background:var(--accent-soft,#e7f1ec);color:var(--accent-deep,#175d47)} @media (hover:hover) and (pointer:fine){.pw-eye:hover{background:var(--accent-soft,#e7f1ec);color:var(--accent-deep,#175d47)}} /* Chrome paints autofilled inputs with its own grey slab - that's why the email box read as "disabled". Repaint it in our own colours. Themed, NOT hardcoded: an earlier version pinned the slab to #fdfdfc while the text stayed var(--ink), so in dark mode a saved email rendered as #ECE6DA on near-white - about 1.07:1, an apparently empty box, on the first screen a dark-mode user sees. The error ring is stacked BEFORE the inset fill so autofilling a bad field still shows red. */ :root{--autofill-bg:#fdfdfc;--autofill-bg-bad:#fdf6f4} :root[data-theme="dark"]{--autofill-bg:#1B1710;--autofill-bg-bad:#2A1C18} input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--ink,#1e2a25);-webkit-box-shadow:0 0 0 100px var(--autofill-bg) inset;box-shadow:0 0 0 100px var(--autofill-bg) inset;caret-color:var(--ink,#1e2a25)} .fld.bad input:-webkit-autofill,.fld.bad input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 3px var(--danger-soft,#f7e4e0),0 0 0 100px var(--autofill-bg-bad) inset;box-shadow:0 0 0 3px var(--danger-soft,#f7e4e0),0 0 0 100px var(--autofill-bg-bad) inset} .fld-err:empty{display:none} /* `hidden` must always win. Any author `display:` rule beats the browser's built-in [hidden]{display:none}, which silently un-hides elements - the .auditrow[hidden], .cmdk[hidden] and .offline-banner[hidden] rules earlier in this file are all one-off patches for this same bug. This is the general fix; new components get it for free. */ [hidden]{display:none!important} /* The phone "More" sheet: everything that does not fit the five tab slots. The sidebar is display:none at this width, so without this the sections below the fifth are not reachable on a phone at all. Hidden with the whole .tabbar on desktop. */ .tabmore{position:static} .tabmore>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;min-height:48px;color:var(--ink-soft);font-size:10px;font-weight:600;cursor:pointer;list-style:none} .tabmore>summary::-webkit-details-marker{display:none} .tabmore>summary::marker{content:""} .tabmore>summary .icon svg,.tabmore>summary .ico{width:21px;height:21px} .tabmore[open]>summary,.tabmore>summary.on,.tabmore>summary.active{color:var(--accent-deep)} .tabsheet{position:absolute;left:8px;right:8px;bottom:100%;margin-bottom:8px;max-height:min(62vh,420px);overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -18px rgba(28,38,33,.45);padding:8px;display:flex;flex-direction:column;gap:2px;text-align:left} .tabsheet-hd{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none} .tabsheet-hd .icon svg,.tabsheet-hd .ico{width:19px;height:19px} .tabsheet-sub{display:flex;flex-direction:column;padding:0 0 6px 42px} .tabsheet-sub a{display:flex;align-items:center;min-height:42px;padding:2px 10px;border-radius:9px;color:var(--ink-soft);font-size:13.5px;text-decoration:none} @media (hover:hover) and (pointer:fine){.tabsheet-hd:hover,.tabsheet-sub a:hover{background:var(--wash,rgba(0,0,0,.05))}} .tabsheet-hd:active,.tabsheet-sub a:active{background:var(--wash,rgba(0,0,0,.08))} /* The tab bar is the ONLY navigation on a phone, so nothing may sit on top of it. z-index 70 puts it above the assistant FAB (50) and the setup coach (60). The FAB covered the right-most tab, which is "More" - so tapping the centre of the one control that reaches Settings opened the AI assistant instead. Raising the bar also lifts the open sheet, which is trapped in the bar's stacking context and was being covered by the coach. The FAB moves clear too, so it is not merely hidden behind the bar. */ .tabbar{z-index:70} @media (max-width:720px){ .ai-fab{bottom:calc(76px + env(safe-area-inset-bottom))} .ai-panel{bottom:calc(76px + env(safe-area-inset-bottom));max-height:min(560px,calc(100vh - 150px))} .help-fab{bottom:calc(76px + env(safe-area-inset-bottom))} }