/* =====================================================================
discriminant.ly — MODERN skin
---------------------------------------------------------------------
Loaded AFTER style.css and scoped entirely under body[data-skin=modern],
so the classic sheet is never edited and its layout, breakpoints and
behaviour all carry over. This file repaints only.
Philosophy (visionOS, not Liquid Glass):
• material over surface — content sits ON translucent glass
• depth is the hierarchy — a raised control is a lighter material,
never a border or a texture
• vibrancy — secondary text is the ink at reduced opacity, so it
takes on the backdrop
• one hue — the gold, kept for links and warrant
• Chaparral throughout — the serif IS the identity
===================================================================== */
/* ---------------------------------------------------------------------
0. Tokens. Dark is the reference; light re-derives the same recipe.
--------------------------------------------------------------------- */
body[data-skin="modern"] {
--m-bg: #0d0f14;
--m-glow-a: rgba(120,140,190,.16);
--m-glow-b: rgba(190,150,110,.10);
--m-glass: rgba(255,255,255,.075);
--m-glass-2: rgba(255,255,255,.11);
--m-glass-3: rgba(255,255,255,.16);
--m-line: rgba(255,255,255,.14); /* the 1px light edge */
--m-line-2: rgba(255,255,255,.24);
--m-rule: rgba(255,255,255,.08);
--m-ink: rgba(255,255,255,.96);
/* The backdrop got considerably brighter when its colour was restored, but
these stayed where they were, so secondary text fell to ~4:1 against the
rail — under the 4.5:1 AA floor. Raised to sit on the lighter fields. */
--m-ink-2: rgba(255,255,255,.82);
--m-ink-3: rgba(255,255,255,.64);
--m-accent: #b9aaf2; /* lavender, tuned to read on dark glass */
--m-knob: #ffffff;
--m-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.25);
--m-shadow-2: 0 10px 30px rgba(0,0,0,.45);
--m-field: rgba(0,0,0,.28);
--m-image-bed: rgba(0,0,0,.25);
--m-sheet: rgba(28,30,38,.94); /* modal material: heavy, so content beneath recedes */
--m-scrim: rgba(0,0,0,.5);
--m-r: 26px; --m-r2: 18px; --m-r3: 12px;
--m-ease: cubic-bezier(.2,.7,.2,1);
color-scheme: dark;
}
body[data-skin="modern"][data-mode="light"],
html.m-light body[data-skin="modern"][data-mode="system"] {
--m-bg: #eceef2;
--m-glow-a: rgba(140,160,210,.28);
--m-glow-b: rgba(230,200,160,.30);
--m-glass: rgba(255,255,255,.55);
--m-glass-2: rgba(255,255,255,.72);
--m-glass-3: rgba(255,255,255,.88);
--m-line: rgba(255,255,255,.85);
--m-line-2: rgba(255,255,255,1);
--m-rule: rgba(0,0,0,.08);
--m-ink: rgba(20,22,28,.94);
--m-ink-2: rgba(20,22,28,.64);
--m-ink-3: rgba(20,22,28,.42);
--m-accent: #6a58d6; /* deeper on light, for contrast */
--m-knob: #ffffff;
--m-shadow: 0 24px 60px -30px rgba(30,40,60,.35), 0 2px 10px rgba(30,40,60,.10);
--m-shadow-2: 0 10px 30px rgba(30,40,60,.18);
--m-field: rgba(255,255,255,.7);
--m-image-bed: rgba(0,0,0,.05);
--m-sheet: rgba(248,248,250,.96);
--m-scrim: rgba(20,22,28,.35);
color-scheme: light;
}
/* ---------------------------------------------------------------------
1. The material. One recipe; everything that is a "sheet" uses it.
--------------------------------------------------------------------- */
body[data-skin="modern"] .card,
body[data-skin="modern"] .nf-box,
body[data-skin="modern"] .curtain-frame,
body[data-skin="modern"] .prail,
body[data-skin="modern"] .tile-slot > *,
body[data-skin="modern"] .timeline li,
body[data-skin="modern"] .settings-table,
body[data-skin="modern"] .sbox,
body[data-skin="modern"] .empty {
background: var(--m-glass);
background-image: none;
-webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
border: 0;
border-radius: var(--m-r);
box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
}
/* ---------------------------------------------------------------------
2. Page. The backdrop is space with two soft glows; no texture.
--------------------------------------------------------------------- */
body[data-skin="modern"] {
color: var(--m-ink);
font-weight: 400;
background-color: var(--m-bg);
background-image:
radial-gradient(1200px 700px at 30% -10%, var(--m-glow-a), transparent 60%),
radial-gradient(900px 600px at 110% 80%, var(--m-glow-b), transparent 60%);
background-size: auto, auto; /* classic tiles its textures at 200px; a gradient must not tile */
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
body[data-skin="modern"] a { color: var(--m-accent); }
body[data-skin="modern"] a:hover { text-decoration: none; opacity: .85; }
/* the fixed masthead + search: a floating ornament */
body[data-skin="modern"] .masthead {
background: var(--m-glass); background-image: none;
-webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
box-shadow: inset 0 -1px 0 var(--m-rule);
}
body[data-skin="modern"] .masthead::after { display: none; }
body[data-skin="modern"] .masthead nav a,
body[data-skin="modern"] .masthead nav button.link { color: var(--m-ink-2); }
body[data-skin="modern"] .masthead nav a:hover,
body[data-skin="modern"] .masthead nav button.link:hover { color: var(--m-ink); }
body[data-skin="modern"] .searchbar input {
background: var(--m-field); background-image: none; border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
border-radius: 999px; letter-spacing: .18em;
}
body[data-skin="modern"] .searchbar input::placeholder { color: var(--m-ink-3); }
body[data-skin="modern"] .searchbar input:focus { background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line-2), 0 0 0 3px rgba(185,170,242,.28); }
/* the icon rail on the far left */
body[data-skin="modern"] .sidebar, body[data-skin="modern"] .iconrail { background: transparent; }
/* ---------------------------------------------------------------------
3. Feed and profile rail.
--------------------------------------------------------------------- */
body[data-skin="modern"] .feed { background: transparent; background-image: none; }
body[data-skin="modern"] .feed-plain { background: transparent; }
body[data-skin="modern"] .strip {
background: transparent; background-image: none; color: var(--m-ink-3);
font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; box-shadow: none;
}
body[data-skin="modern"] .strip::after, body[data-skin="modern"] .strip::before { display: none; }
body[data-skin="modern"] .rail { background: transparent; color: var(--m-ink); }
body[data-skin="modern"] .rail a { color: var(--m-ink-2); }
body[data-skin="modern"] .prail { padding: 1.4rem 1rem 1.2rem; }
body[data-skin="modern"] .prail-handle, body[data-skin="modern"] .rail-title { color: var(--m-ink); font-weight: 400; }
body[data-skin="modern"] .prail .avatar, body[data-skin="modern"] .prail img.avatar {
box-shadow: 0 0 0 1px var(--m-line-2), var(--m-shadow-2);
}
body[data-skin="modern"] .prail-nav li a, body[data-skin="modern"] .rail-nav a {
background: transparent; border: 0; color: var(--m-ink-2); border-radius: 14px;
transition: background .18s var(--m-ease), color .18s var(--m-ease);
}
body[data-skin="modern"] .prail-nav li a:hover { background: var(--m-glass-2); color: var(--m-ink); }
body[data-skin="modern"] .prail-nav li a.on { background: var(--m-glass-2); color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .prail-nav li { border: 0; }
body[data-skin="modern"] .rail h3.lbl { color: var(--m-ink-3); border-bottom: 1px solid var(--m-rule); }
body[data-skin="modern"] .rail .search input {
background: var(--m-field); border: 0; color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-line); border-radius: 999px;
}
/* ---------------------------------------------------------------------
4. Cards — note, mark, byline, date.
--------------------------------------------------------------------- */
body[data-skin="modern"] .card { color: var(--m-ink); padding: 0; }
body[data-skin="modern"] .card .who, body[data-skin="modern"] .card .card-head .who {
color: var(--m-ink-2); font-weight: 700; letter-spacing: .12em; font-size: .68rem;
}
/* The itinerary's byline line is not inside a .card, so it never matched the
rule above and fell back to the classic ink and link colours. Same tokens,
extended to it, rather than a parallel rule that could drift. */
body[data-skin="modern"] .itin-shell .who, body[data-skin="modern"] .itin-head .who { color: var(--m-ink-2); }
body[data-skin="modern"] .itin-shell .who a, body[data-skin="modern"] .itin-head .who a { color: var(--m-ink); }
body[data-skin="modern"] .itin-shell .who a:hover, body[data-skin="modern"] .itin-head .who a:hover { color: var(--m-ink); }
body[data-skin="modern"] .card .who a { color: var(--m-ink); }
body[data-skin="modern"] .card .colls a {
color: var(--m-ink-3); background: var(--m-glass-2); border-radius: 999px; padding: .2rem .7rem; font-size: .7rem; letter-spacing: .06em;
}
body[data-skin="modern"] .card h2, body[data-skin="modern"] .card h2 a { color: var(--m-ink); font-weight: 400; letter-spacing: -.005em; }
body[data-skin="modern"] .card .body, body[data-skin="modern"] .card .text .body { color: var(--m-ink-2); }
/* the markup joins tags with ", " — collapse those to nothing by zeroing the
container's font size, then give each pill its own size and a margin that
holds when the row wraps */
body[data-skin="modern"] .card .tags { font-size: 0; line-height: 0; margin: .55rem 0 0; }
body[data-skin="modern"] .card .tags a {
display: inline-block; color: var(--m-ink-2); background: var(--m-glass-2); border-radius: 999px; padding: .28rem .7rem;
box-shadow: inset 0 1px 0 var(--m-line); font-size: .72rem; line-height: 1.2; letter-spacing: .04em;
margin: 0 .4rem .4rem 0; transition: background .15s var(--m-ease);
}
body[data-skin="modern"] .card .tags a:hover { background: var(--m-glass-3); color: var(--m-ink); }
body[data-skin="modern"] .card .link, body[data-skin="modern"] .card .link .lbl { color: var(--m-ink-3); }
body[data-skin="modern"] .card .figure { border-radius: var(--m-r2); overflow: hidden; background: var(--m-image-bed); box-shadow: inset 0 0 0 1px var(--m-line); }
body[data-skin="modern"] .card .figure img { border: 0; box-shadow: none; }
body[data-skin="modern"] .byline .avatar { box-shadow: 0 0 0 1px var(--m-line-2); }
body[data-skin="modern"] .stackdate { color: var(--m-ink-3); }
body[data-skin="modern"] .stackdate .mon, body[data-skin="modern"] .stackdate .yr { color: var(--m-ink-3); }
body[data-skin="modern"] .stackdate .day { color: var(--m-ink-2); font-weight: 300; }
body[data-skin="modern"] .card-edit { color: var(--m-ink-3); }
body[data-skin="modern"] .card-edit:hover { color: var(--m-ink); }
body[data-skin="modern"] .owned-row, body[data-skin="modern"] .noteit {
background: transparent; border: 0; border-top: 1px solid var(--m-rule); box-shadow: none;
}
body[data-skin="modern"] .owned-label, body[data-skin="modern"] .nf-lbl { color: var(--m-ink-3); }
/* ---------------------------------------------------------------------
5. Controls — buttons, switch, fields. No 3D anywhere.
--------------------------------------------------------------------- */
body[data-skin="modern"] .btn3d, body[data-skin="modern"] .nf-post, body[data-skin="modern"] .btn-note,
body[data-skin="modern"] .tile-cta, body[data-skin="modern"] .tile-cta-go, body[data-skin="modern"] .btn-dark,
body[data-skin="modern"] button.btn3d, body[data-skin="modern"] .dbtn {
background: var(--m-glass-2); background-image: none; border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line); border-radius: 999px; text-shadow: none;
font-weight: 600; letter-spacing: .08em;
transition: background .18s var(--m-ease), transform .18s var(--m-ease);
}
body[data-skin="modern"] .btn3d:hover, body[data-skin="modern"] .nf-post:hover, body[data-skin="modern"] .btn-note:hover,
body[data-skin="modern"] .tile-cta:hover, body[data-skin="modern"] .btn-dark:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .btn3d:active, body[data-skin="modern"] .nf-post:active { transform: scale(.985); }
body[data-skin="modern"] .nf-post { background: var(--m-ink); color: var(--m-bg); box-shadow: none; }
body[data-skin="modern"] .nf-post:hover { background: var(--m-ink); opacity: .9; }
body[data-skin="modern"] .switch span {
background: var(--m-glass-3); background-image: none;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); transition: background .2s var(--m-ease);
}
body[data-skin="modern"] .switch span::after, body[data-skin="modern"] .switch span::before {
background: var(--m-knob); background-image: none; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
body[data-skin="modern"] .switch input:checked + span { background: var(--m-accent); }
body[data-skin="modern"] .nf-box { padding: 20px 22px 24px; }
body[data-skin="modern"] .nf-field {
background: var(--m-field); background-image: none; border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); border-radius: var(--m-r3);
}
body[data-skin="modern"] .nf-field:focus { outline: none; box-shadow: inset 0 1px 0 var(--m-line-2), 0 0 0 3px rgba(185,170,242,.30); }
body[data-skin="modern"] .nf-field::placeholder { color: var(--m-ink-3); }
body[data-skin="modern"] .nf-link-btn { color: var(--m-ink-2); }
body[data-skin="modern"] .nf-link-btn:hover { color: var(--m-ink); }
body[data-skin="modern"] .dlg-title { color: var(--m-ink); }
body[data-skin="modern"] .dlg-copy, body[data-skin="modern"] .nf-range, body[data-skin="modern"] .lookup-note { color: var(--m-ink-2); }
body[data-skin="modern"] .nf-day, body[data-skin="modern"] .nf-days { border-color: var(--m-rule); }
body[data-skin="modern"] .nf-day .tl-date { color: var(--m-ink-2); }
body[data-skin="modern"] .nf-drop-menu { background: var(--m-glass-3); border: 0; box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); border-radius: var(--m-r3); }
/* ---------------------------------------------------------------------
6. Sheets (curtains / dialogs).
--------------------------------------------------------------------- */
body[data-skin="modern"] .curtain { background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-skin="modern"] .curtain-frame { background: var(--m-glass-3); border-radius: var(--m-r); }
body[data-skin="modern"] .curtain-tail, body[data-skin="modern"] .tail-band, body[data-skin="modern"] .curtain-nub { display: none; }
body[data-skin="modern"] .dialog a { color: var(--m-accent); }
/* ---------------------------------------------------------------------
7. Tiles (collection carousel), timeline, tables.
--------------------------------------------------------------------- */
body[data-skin="modern"] .tile-slot > * { border-radius: var(--m-r2); overflow: hidden; }
body[data-skin="modern"] .tile-name { color: var(--m-ink-2); }
body[data-skin="modern"] .tile-count { color: var(--m-ink); background: transparent; border: 0; border-top: 1px solid var(--m-rule); }
body[data-skin="modern"] .tiles-arrow { color: var(--m-ink-3); background: transparent; }
body[data-skin="modern"] .timeline li { padding: 1rem 1.1rem; }
body[data-skin="modern"] .timeline li::before { background: var(--m-ink-3); box-shadow: 0 0 0 3px var(--m-bg); }
body[data-skin="modern"] .timeline::before { background: var(--m-rule); }
body[data-skin="modern"] .tl-date { color: var(--m-ink-2); }
body[data-skin="modern"] .tl-body { color: var(--m-ink); }
body[data-skin="modern"] .tl-days { border-left-color: var(--m-rule); }
body[data-skin="modern"] .settings-table, body[data-skin="modern"] .wtable { color: var(--m-ink); }
body[data-skin="modern"] .settings-table td, body[data-skin="modern"] .wcell, body[data-skin="modern"] .wcell-wide { border-color: var(--m-rule); background: transparent; }
body[data-skin="modern"] .slabel, body[data-skin="modern"] .fine, body[data-skin="modern"] .sbox-sub { color: var(--m-ink-3); }
body[data-skin="modern"] .sbox-title { color: var(--m-ink); }
body[data-skin="modern"] .section-rule, body[data-skin="modern"] .comment-rule { background: var(--m-rule); box-shadow: none; }
body[data-skin="modern"] .empty { color: var(--m-ink-2); padding: 1.6rem; }
body[data-skin="modern"] .err { color: #f0a5a0; }
/* dark-page and welcome variants inherit the same backdrop */
body[data-skin="modern"].is-dark-page, body[data-skin="modern"].is-welcome { background-color: var(--m-bg); }
/* ---------------------------------------------------------------------
8. Corrections found by rendering: classic paints several INTERIOR
pieces independently of their container, and shows a closed sheet's
bottom edge as a deliberate "peek". Neither belongs in this skin.
--------------------------------------------------------------------- */
/* card interiors are painted separately in classic; make them transparent
so the glass card shows through as one sheet */
body[data-skin="modern"] .card .text,
body[data-skin="modern"] .note:not(.travelmark) .card-head,
body[data-skin="modern"] .card .card-head,
body[data-skin="modern"] .card .figure { background: transparent; background-image: none; }
body[data-skin="modern"] .card .text { padding: 1rem 1.2rem 1.1rem; }
body[data-skin="modern"] .note:not(.travelmark) .card-head { padding: 1.1rem 1.2rem 0; }
/* the "Post a new Note" tile */
body[data-skin="modern"] .post-box {
background: var(--m-glass); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
border-radius: var(--m-r); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); color: var(--m-ink-2);
}
body[data-skin="modern"] .post-box:hover { background: var(--m-glass-2); }
body[data-skin="modern"] .post-box span { color: var(--m-ink); }
body[data-skin="modern"] .post-box .plus { opacity: .8; filter: invert(0); }
body[data-skin="modern"][data-mode="dark"] .post-box .plus,
body[data-skin="modern"][data-mode="system"]:not(.m-light) .post-box .plus { filter: invert(1); }
/* the top search strip and the left icon rail: transparent, so the
backdrop reads as one continuous space; the input is the only object */
body[data-skin="modern"] .searchbar, body[data-skin="modern"] #searchbar {
background: transparent; background-image: none; box-shadow: none; border: 0;
}
body[data-skin="modern"] .iconrail { background: transparent; background-image: none; box-shadow: none; border: 0; }
body[data-skin="modern"] .iconrail a, body[data-skin="modern"] .iconrail-btn { color: var(--m-ink-2); }
body[data-skin="modern"] .iconrail a:hover, body[data-skin="modern"] .iconrail a.on { color: var(--m-ink); background: var(--m-glass-2); border-radius: 14px; }
body[data-skin="modern"] .iconrail a::after, body[data-skin="modern"] .iconrail a::before { display: none; }
/* the profile nav: no rules between rows, no 2px accent underline */
body[data-skin="modern"] .prail-nav li::after { display: none; }
body[data-skin="modern"] .prail-nav { border: 0; }
/* the Public / Private segmented control: one glass track, pill selection */
body[data-skin="modern"] .vis-tabs {
background: var(--m-glass); border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 0 var(--m-line);
border: 0; overflow: hidden;
}
body[data-skin="modern"] .vis-tabs::after, body[data-skin="modern"] .vis-tabs a + a::before { display: none; }
body[data-skin="modern"] .vis-tabs a {
background: transparent; background-image: none; color: var(--m-ink-3); border-radius: 999px; box-shadow: none;
font-weight: 600; letter-spacing: .06em; transition: background .18s var(--m-ease), color .18s var(--m-ease);
}
body[data-skin="modern"] .vis-tabs a:hover { color: var(--m-ink); }
body[data-skin="modern"] .vis-tabs a.on { background: var(--m-glass-3); color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-line-2); }
/* tiles: the count strip and arrows */
body[data-skin="modern"] .tile-count { background: transparent; color: var(--m-ink); }
body[data-skin="modern"] .tiles-arrow img { filter: invert(1); }
body[data-skin="modern"][data-mode="light"] .tiles-arrow img,
html.m-light body[data-skin="modern"][data-mode="system"] .tiles-arrow img { filter: none; }
/* a closed sheet is CLOSED: no peek, no nub. It arrives fully when opened. */
body[data-skin="modern"] .curtain { --peek: 0px; transform: translateY(-110%); }
body[data-skin="modern"] .curtain:hover { --peek: 0px; }
body[data-skin="modern"] .curtain.is-open, body[data-skin="modern"] .curtain.is-open:hover { transform: translateY(0); }
body[data-skin="modern"] .curtain-frame { margin-top: 12px; }
/* the "search within" input and rail search inherit the field recipe */
body[data-skin="modern"] .feed input[type="search"], body[data-skin="modern"] .feed .search input,
body[data-skin="modern"] input.search {
background: var(--m-field); background-image: none; border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); border-radius: 999px;
}
/* the profile layout paints a dark column behind the rail (a linear-gradient
on .cols inside a media query); the rail is its own glass sheet now */
body[data-skin="modern"] .cols, body[data-skin="modern"] .cols.profile-cols { background-image: none !important; }
/* the search input: classic layers a chrome gradient over a transparent bg */
body[data-skin="modern"] .searchbar input {
background-color: var(--m-field) !important; background-image: none !important; border: 0 !important;
}
body[data-skin="modern"] .searchbar::after { display: none; }
/* ---------------------------------------------------------------------
9. Corrections from the mobile render.
--------------------------------------------------------------------- */
/* the arched travel-mark title hard-codes a dark fill on its SVG text */
body[data-skin="modern"] .arc-title text, body[data-skin="modern"] .arc-title textPath { fill: var(--m-ink); }
/* the home feed's rail nav (All Discriminantly / From people you follow / …):
a list of rows like the profile nav on desktop; on phones classic lays it
out horizontally, so there it becomes a pill track */
body[data-skin="modern"] .feednav { margin-left: 0; margin-right: 0; padding: 4px; display: grid; gap: 2px; }
body[data-skin="modern"] .feednav li + li::before, body[data-skin="modern"] .feednav li::after { display: none; }
body[data-skin="modern"] .feednav a { color: var(--m-ink-2); border-radius: 14px; padding: .75rem .9rem;
background: transparent; background-image: none; box-shadow: none;
justify-content: center; text-align: center; gap: .4rem; }
body[data-skin="modern"] .feednav a:hover { color: var(--m-ink); background: var(--m-glass-2); }
body[data-skin="modern"] .feednav a.on { background: var(--m-glass-2); color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .feednav a span { color: var(--m-ink-3); }
@media (max-width: 52rem) {
body[data-skin="modern"] .feednav { display: flex; background: var(--m-glass); border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .feednav li { flex: 1; }
body[data-skin="modern"] .feednav a { justify-content: center; text-align: center; padding: .7rem .6rem; color: var(--m-ink-3); border-radius: 999px;
font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
body[data-skin="modern"] .feednav a.on { background: var(--m-glass-3); box-shadow: inset 0 1px 0 var(--m-line-2); }
}
/* the welcome table: ONE sheet, cells divided by hairlines, not nested glass */
body[data-skin="modern"] .wtable { background: var(--m-glass); border-radius: var(--m-r); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
-webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); overflow: hidden; }
body[data-skin="modern"] .wcell { background: transparent; border-color: var(--m-rule); color: var(--m-ink); }
body[data-skin="modern"] .wcell .slabel, body[data-skin="modern"] .wcell small { color: var(--m-ink-3); }
body[data-skin="modern"] .welcome-name { color: var(--m-ink); }
/* the icon rail's active state was a heavy block; a soft pill is enough */
body[data-skin="modern"] .iconrail a.on { background: var(--m-glass-2); border-radius: 16px; margin: 0 8px; width: auto; }
/* ---- phones: the rail becomes a bottom tab bar — the ornament idiom ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .iconrail {
top: auto; bottom: 10px; left: 12px; right: 12px; width: auto; height: 62px;
flex-direction: row; justify-content: space-around; align-items: center;
background: var(--m-glass-3); background-image: none;
-webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
border-radius: 999px; box-shadow: inset 0 1px 0 var(--m-line-2), var(--m-shadow);
padding: 0 6px; z-index: 7;
}
body[data-skin="modern"] .iconrail a, body[data-skin="modern"] .iconrail-btn { height: 48px; width: 48px; flex: 0 0 48px; border-radius: 999px; margin: 0; }
body[data-skin="modern"] .iconrail a + a::before, body[data-skin="modern"] .iconrail a + .iconrail-btn::before,
body[data-skin="modern"] .iconrail a.on::after { display: none; }
body[data-skin="modern"] .iconrail a.on { background: var(--m-glass-3); color: var(--m-ink); margin: 0; width: 48px;
box-shadow: inset 0 1px 0 var(--m-line-2), 0 2px 8px -2px rgba(0,0,0,.25); }
body[data-skin="modern"] .iconrail a:not(.on) { color: var(--m-ink-3); }
body[data-skin="modern"] .iconrail svg { width: 20px; height: 20px; }
/* content gets the full width back, and room above the bar at the bottom */
body[data-skin="modern"].is-in main.wrap, body[data-skin="modern"].is-in footer.wrap {
padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 92px;
}
body[data-skin="modern"] .searchbar::after { display: none; }
/* sheets sit above the bar */
body[data-skin="modern"] .curtain.is-open { z-index: 9; }
}
/* the welcome/settings table draws thick rule borders as its frame; hairlines only */
body[data-skin="modern"] .wtable, body[data-skin="modern"] .ruled-table { border: 0; }
body[data-skin="modern"] .wtable > .wcell { border: 0; border-bottom: 1px solid var(--m-rule); border-right: 1px solid var(--m-rule); }
body[data-skin="modern"] .wtable > .wcell:nth-child(2n), body[data-skin="modern"] .wtable > .wcell-wide { border-right: 0; }
body[data-skin="modern"] .wtable > .wcell:last-child { border-bottom: 0; }
body[data-skin="modern"] a.wcell:hover { background: var(--m-glass-2); }
body[data-skin="modern"] .wcell b { color: var(--m-ink); }
body[data-skin="modern"] .wcell span { color: var(--m-ink-3); }
/* mobile profile tabs: one glass track, no dividers, no shadow band beneath */
@media (max-width: 52rem) {
body[data-skin="modern"] .prail-nav { background: var(--m-glass); border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 0 var(--m-line); gap: 2px; }
body[data-skin="modern"] .prail-nav::after, body[data-skin="modern"] .prail-nav li + li::before { display: none; }
body[data-skin="modern"] .prail-nav li a { border-radius: 999px; }
body[data-skin="modern"] .prail-nav li a.on { background: var(--m-glass-3); box-shadow: inset 0 1px 0 var(--m-line-2); }
}
/* tiles: gaps instead of rules between them */
body[data-skin="modern"] .tile-slot + .tile-slot, body[data-skin="modern"] .tiles > .tile-new { border-left: 0; margin-left: 8px; }
/* =====================================================================
STAGE 2 — the complex surfaces
===================================================================== */
/* ---- the whole-page texture: classic paints every main child with the
mottle (a 140px tile), which reads as a faint grid on the dark backdrop */
body[data-skin="modern"] main > *:not(.cols), body[data-skin="modern"] main > .cols > * {
background-color: transparent; background-image: none;
}
/* ---- desktop icon rail: the active state as a contained pill ---- */
@media (min-width: 52.01rem) {
body[data-skin="modern"] .iconrail a.on { margin: 0; width: 100%; background: transparent; border-radius: 0; }
body[data-skin="modern"] .iconrail a.on::after { display: none; }
body[data-skin="modern"] .iconrail a.on svg, body[data-skin="modern"] .iconrail a.on img { color: var(--m-ink); }
body[data-skin="modern"] .iconrail a { color: var(--m-ink-3); }
body[data-skin="modern"] .iconrail a.on { color: var(--m-ink); }
body[data-skin="modern"] .iconrail a.on::before {
content: ""; position: absolute; inset: 34px 12px; border-radius: 16px; background: var(--m-glass-2);
box-shadow: inset 0 1px 0 var(--m-line); z-index: -1; display: block; left: 12px; right: 12px; top: 34px; bottom: 34px; height: auto;
}
}
/* ---- the check-in sheet: the curtain's own box must not paint ---- */
body[data-skin="modern"] .curtain { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-skin="modern"] .curtain-body { background: transparent; }
/* ---- nested day logs in the timeline are LINES, not cards ---- */
body[data-skin="modern"] .tl-days li {
background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
border-radius: 0; box-shadow: none; padding: 0; margin: .45rem 0 0;
}
body[data-skin="modern"] .tl-days li::before, body[data-skin="modern"] .tl-days li::after { display: none; }
/* ---- forms: the collection picker and the image well ---- */
body[data-skin="modern"] .nf-drop > summary {
background: var(--m-field); background-image: none; border: 0; color: var(--m-ink); border-radius: var(--m-r3);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
}
body[data-skin="modern"] .nf-drop > summary:hover { background: var(--m-glass-2); background-image: none; }
body[data-skin="modern"] .nf-drop > summary::after { border-top-color: var(--m-ink-3); }
body[data-skin="modern"] .nf-drop-label { color: var(--m-ink-2); }
body[data-skin="modern"] .nf-image, body[data-skin="modern"] .img-pick {
background: transparent; background-image: none; color: var(--m-ink-3); border-radius: var(--m-r2);
box-shadow: inset 0 0 0 1px var(--m-rule); outline: 1.5px dashed var(--m-line-2); outline-offset: -8px;
}
body[data-skin="modern"] .nf-image:hover, body[data-skin="modern"] .img-pick:hover { background: var(--m-glass); }
body[data-skin="modern"] .nf-image-preview { border-radius: var(--m-r2); }
body[data-skin="modern"] .img-arrow { color: var(--m-ink-2); background: var(--m-glass-3); border-radius: 999px; }
body[data-skin="modern"] .img-count { color: var(--m-ink-3); }
body[data-skin="modern"] .nf-opt { color: var(--m-ink-2); }
body[data-skin="modern"] .nf-warrant a, body[data-skin="modern"] .nf-warrant { color: var(--m-ink-2); }
body[data-skin="modern"] .seg-tabs, body[data-skin="modern"] .nf-seg {
background: var(--m-glass); border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 0 var(--m-line);
}
body[data-skin="modern"] .seg-tabs a, body[data-skin="modern"] .nf-seg a, body[data-skin="modern"] .nf-seg label {
background: transparent; background-image: none; color: var(--m-ink-3); border-radius: 999px; box-shadow: none; border: 0;
}
body[data-skin="modern"] .seg-tabs a.on, body[data-skin="modern"] .nf-seg .on { background: var(--m-ink); color: var(--m-bg); }
/* ---- the Ensemble worksurface ---- */
body[data-skin="modern"] .ens { background: transparent; }
body[data-skin="modern"] .ens-head { padding-top: 1.8rem; }
body[data-skin="modern"] .ens-title { color: var(--m-ink); }
body[data-skin="modern"] .ens-desc { color: var(--m-ink-2); }
body[data-skin="modern"] .ens-meta, body[data-skin="modern"] .ens-group, body[data-skin="modern"] .ens-saved,
body[data-skin="modern"] .ens-comp-state, body[data-skin="modern"] .ens-tile-n, body[data-skin="modern"] .ens-tile-t i { color: var(--m-ink-3); }
body[data-skin="modern"] .ens-pending { color: var(--m-accent); }
body[data-skin="modern"] .ens-primary { border-radius: var(--m-r); overflow: hidden; margin: 0 1.5rem;
box-shadow: inset 0 0 0 1px var(--m-line), var(--m-shadow); background: var(--m-image-bed); }
body[data-skin="modern"] .ens-primary img { display: block; }
body[data-skin="modern"] .ens-alts { padding: 1rem 1.5rem; }
body[data-skin="modern"] .ens-alt img { border-radius: var(--m-r3); box-shadow: inset 0 0 0 1px var(--m-line); }
body[data-skin="modern"] .ens-parts, body[data-skin="modern"] .ens-comps {
margin: 1.2rem 1.5rem 0; background: var(--m-glass); border-radius: var(--m-r);
box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
-webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); overflow: hidden;
}
body[data-skin="modern"] .ens-comps .ens-comps { margin: 0; background: transparent; box-shadow: none; border-radius: 0; }
body[data-skin="modern"] .ens-comp { border-top: 1px solid var(--m-rule); padding: .9rem 1.2rem; }
body[data-skin="modern"] .ens-comp:first-child { border-top: 0; }
body[data-skin="modern"] .ens-comp img, body[data-skin="modern"] .ens-comp-blank { border-radius: 10px; background: var(--m-image-bed); box-shadow: inset 0 0 0 1px var(--m-line); }
body[data-skin="modern"] .ens-comp-label { color: var(--m-ink); }
body[data-skin="modern"] .ens-comp.unresolved .ens-comp-label { color: var(--m-ink-2); }
body[data-skin="modern"] .ens-comp-link { color: var(--m-accent); }
body[data-skin="modern"] .ens-review {
margin: 1.2rem 1.5rem 0; padding: 1.1rem 1.4rem; background: var(--m-glass-2); border-radius: var(--m-r);
box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); color: var(--m-ink);
}
body[data-skin="modern"] .ens-review-q { color: var(--m-ink); }
body[data-skin="modern"] .ens-edit { padding: 0 1.5rem; }
body[data-skin="modern"] .ens-danger { color: #e2a29c; }
/* ---- the Ensembles list ---- */
body[data-skin="modern"] .ens-tile img, body[data-skin="modern"] .ens-tile-blank {
border-radius: var(--m-r2); background: var(--m-image-bed); box-shadow: inset 0 0 0 1px var(--m-line);
transition: transform .2s var(--m-ease);
}
body[data-skin="modern"] .ens-tile:hover img { transform: translateY(-2px); }
body[data-skin="modern"] .ens-tile-t { color: var(--m-ink); }
body[data-skin="modern"] .ens-tile-blank { color: var(--m-ink-3); }
/* ---- settings: the tables become one sheet each ---- */
body[data-skin="modern"] .settings-table .wcell { border-bottom: 1px solid var(--m-rule); border-right: 0; }
body[data-skin="modern"] .settings-table .wcell:last-child { border-bottom: 0; }
body[data-skin="modern"] .settings-table .nf-field, body[data-skin="modern"] .settings input { color: var(--m-ink); }
body[data-skin="modern"] .settings a { color: var(--m-accent); }
body[data-skin="modern"] code, body[data-skin="modern"] .mono, body[data-skin="modern"] .token {
background: var(--m-field); color: var(--m-ink); border-radius: 8px; padding: .15em .45em; border: 0;
}
/* ---- warrant crest + private tag on cards ---- */
body[data-skin="modern"] .warrant-tag, body[data-skin="modern"] .priv-tag, body[data-skin="modern"] .card .badge {
background: var(--m-glass-2); color: var(--m-ink-2); border-radius: 999px; box-shadow: inset 0 1px 0 var(--m-line); border: 0;
}
body[data-skin="modern"] .crest, body[data-skin="modern"] .warrant-crest { filter: none; }
/* ---- comments ---- */
body[data-skin="modern"] .comment, body[data-skin="modern"] .cmt {
background: var(--m-glass); border-radius: var(--m-r2); box-shadow: inset 0 1px 0 var(--m-line); padding: .9rem 1.1rem; border: 0;
}
body[data-skin="modern"] .comment .who, body[data-skin="modern"] .cmt-who { color: var(--m-ink-2); }
body[data-skin="modern"] .crumb, body[data-skin="modern"] .crumb a { color: var(--m-ink-3); }
body[data-skin="modern"] .crumb b { color: var(--m-ink); }
/* one sheet, not two: the frame is a positioning wrapper, the box is the material */
body[data-skin="modern"] .curtain-frame {
background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0;
}
body[data-skin="modern"] .curtain-frame .nf-box { box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); }
/* ---- modal sheets: heavy material + a full-viewport scrim ---- */
body[data-skin="modern"] .curtain-frame .nf-box {
background: var(--m-sheet);
-webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
}
/* the curtain is transformed, which makes it the containing block for any
fixed descendant — so a scrim inside it can never cover the viewport. Put
it on body instead, keyed off the open sheet. */
body[data-skin="modern"]:has(.curtain.is-open)::after {
content: ""; position: fixed; inset: 0; background: var(--m-scrim); z-index: 8; pointer-events: none;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body[data-skin="modern"] .curtain.is-open { z-index: 9; } /* above the scrim, which is above search and tab bar */
/* ---- Ensemble on phones: reclaim the width ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .ens-primary, body[data-skin="modern"] .ens-parts, body[data-skin="modern"] .ens-comps,
body[data-skin="modern"] .ens-review, body[data-skin="modern"] .ens-edit { margin-left: .6rem; margin-right: .6rem; }
body[data-skin="modern"] .ens-alts { padding: .8rem .6rem; }
/* rows become lines inside the section, not raised cards */
body[data-skin="modern"] .ens-parts .ens-comps {
margin: 0 0 .4rem; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0;
}
body[data-skin="modern"] .ens-comp {
background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0;
padding: .8rem .9rem; gap: .8rem; margin: 0;
}
body[data-skin="modern"] .ens-comp img, body[data-skin="modern"] .ens-comp-blank { width: 2.6rem; height: 2.6rem; }
body[data-skin="modern"] .ens-comp-body { min-width: 0; }
body[data-skin="modern"] .ens-comp-label { font-size: .95rem; line-height: 1.3; }
body[data-skin="modern"] .ens-comp-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-skin="modern"] .ens-group { padding-left: .9rem; }
}
/* =====================================================================
STAGE 3 — polish, motion, and the first-run surfaces
===================================================================== */
/* ---- the welcome page ---- */
/* the welcome page uses the SAME backdrop as every other page; an earlier
two-field version lived here and won on specificity, leaving this one page
flatter than the rest. Inherit from the body rule instead. */
body[data-skin="modern"].is-welcome .masthead { background: transparent; box-shadow: none; }
body[data-skin="modern"].is-welcome .signin input {
background: var(--m-field); border: 0; color: var(--m-ink); border-radius: 999px; padding: .55rem .9rem;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
}
body[data-skin="modern"].is-welcome .signin input::placeholder { color: var(--m-ink-3); }
body[data-skin="modern"].is-welcome .signin button.caps { color: var(--m-ink-2); }
body[data-skin="modern"].is-welcome .signin button.caps:hover { color: var(--m-ink); }
body[data-skin="modern"] .splash-mark { filter: none; opacity: .92; }
body[data-skin="modern"][data-mode="dark"] .splash-mark, body[data-skin="modern"][data-mode="system"]:not(.m-light) .splash-mark { filter: invert(1) brightness(1.4); }
html.m-light body[data-skin="modern"][data-mode="system"] .splash-mark { filter: none; }
body[data-skin="modern"] .splash-word { color: var(--m-ink-2); }
body[data-skin="modern"] .splash-h { color: var(--m-ink); font-weight: 400; letter-spacing: .05em; }
body[data-skin="modern"] .splash-sub { color: var(--m-ink-2); }
body[data-skin="modern"] .splash-enter, body[data-skin="modern"] .splash .btn {
background: var(--m-ink); color: var(--m-bg); border: 0; border-radius: 999px; box-shadow: var(--m-shadow-2);
font-weight: 600; letter-spacing: .12em; padding: .95rem 3rem;
}
body[data-skin="modern"] .splash-enter:hover { background: var(--m-ink); opacity: .92; transform: translateY(-1px); }
/* the demo shot: a floating glass window instead of a lifted-corner slab */
body[data-skin="modern"] .shot-wrap { border-radius: var(--m-r); overflow: hidden;
box-shadow: inset 0 1px 0 var(--m-line), 0 40px 90px -40px rgba(0,0,0,.8), 0 4px 18px rgba(0,0,0,.3); }
body[data-skin="modern"] .shot-shadow { display: none; }
body[data-skin="modern"] .shot-frame, body[data-skin="modern"] .shot-chrome { background: transparent; }
/* ---- sign in / join / settings tables: one sheet, hairline rows ---- */
body[data-skin="modern"].is-dark-page { background-color: var(--m-bg); }
body[data-skin="modern"] .settings-table .wcell { padding: 1.2rem 1.4rem; }
body[data-skin="modern"] .settings-table .slabel { color: var(--m-ink-3); font-size: .62rem; letter-spacing: .16em; }
body[data-skin="modern"] .settings-table input, body[data-skin="modern"] .settings-table select, body[data-skin="modern"] .settings-table textarea {
background: var(--m-field); border: 0; color: var(--m-ink); border-radius: var(--m-r3);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
}
body[data-skin="modern"] .settings-table .btn3d { margin-top: .4rem; }
body[data-skin="modern"] .sbox-title, body[data-skin="modern"] .settings h2 { color: var(--m-ink); font-weight: 400; }
body[data-skin="modern"] .fine, body[data-skin="modern"] .sbox-sub, body[data-skin="modern"] .hint { color: var(--m-ink-3); }
body[data-skin="modern"] .settings-stack { gap: 1rem; }
body[data-skin="modern"] .settings-stack-side { gap: 1rem; } /* Install + Admin: same rhythm as column 2 */
body[data-skin="modern"] .qr, body[data-skin="modern"] .qr img { border-radius: var(--m-r3); background: #fff; }
body[data-skin="modern"] .invite-code, body[data-skin="modern"] .code { background: var(--m-field); color: var(--m-ink); border-radius: 8px; padding: .2em .5em; }
/* ---- motion: the visionOS lift. Content answers the pointer by rising. ---- */
body[data-skin="modern"] .card, body[data-skin="modern"] .tile-slot > *, body[data-skin="modern"] .ens-tile img,
body[data-skin="modern"] .post-box, body[data-skin="modern"] a.wcell {
transition: transform .22s var(--m-ease), box-shadow .22s var(--m-ease), background .18s var(--m-ease);
}
@media (hover: hover) {
body[data-skin="modern"] .card:hover, body[data-skin="modern"] .tile-slot > a:hover, body[data-skin="modern"] .post-box:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 var(--m-line-2), 0 30px 70px -30px rgba(0,0,0,.75), 0 6px 18px rgba(0,0,0,.3);
}
html.m-light body[data-skin="modern"] .card:hover, body[data-skin="modern"][data-mode="light"] .card:hover {
box-shadow: inset 0 1px 0 var(--m-line-2), 0 30px 70px -30px rgba(30,40,60,.4), 0 6px 18px rgba(30,40,60,.14);
}
}
body[data-skin="modern"] .btn3d, body[data-skin="modern"] .nf-post, body[data-skin="modern"] .btn-note,
body[data-skin="modern"] .tile-cta, body[data-skin="modern"] .splash-enter, body[data-skin="modern"] .iconrail a {
transition: background .18s var(--m-ease), transform .16s var(--m-ease), opacity .18s var(--m-ease), color .18s var(--m-ease);
}
body[data-skin="modern"] .btn3d:active, body[data-skin="modern"] .nf-post:active, body[data-skin="modern"] .btn-note:active,
body[data-skin="modern"] .tile-cta:active, body[data-skin="modern"] .splash-enter:active { transform: scale(.97); }
body[data-skin="modern"] .switch span::after, body[data-skin="modern"] .switch span::before { transition: transform .22s var(--m-ease); }
body[data-skin="modern"] .switch input:active + span::after { transform: scaleX(1.12); transform-origin: left; }
/* a sheet arrives by settling, not sliding off a rail */
body[data-skin="modern"] .curtain { transition: transform .38s var(--m-ease), opacity .3s var(--m-ease); opacity: 0; }
body[data-skin="modern"] .curtain.is-open { opacity: 1; }
body[data-skin="modern"]:has(.curtain.is-open)::after { animation: m-scrim-in .3s var(--m-ease) both; }
@keyframes m-scrim-in { from { opacity: 0; } to { opacity: 1; } }
body[data-skin="modern"] .curtain-frame .nf-box { animation: m-sheet-in .38s var(--m-ease) both; }
@keyframes m-sheet-in { from { transform: translateY(-8px) scale(.985); opacity: .6; } to { transform: none; opacity: 1; } }
/* ---- focus: keyboard users get a ring the pointer never sees ---- */
body[data-skin="modern"] :focus { outline: none; }
body[data-skin="modern"] :focus-visible {
outline: 2px solid var(--m-accent); outline-offset: 3px; border-radius: 6px;
}
body[data-skin="modern"] .nf-field:focus-visible, body[data-skin="modern"] input:focus-visible, body[data-skin="modern"] textarea:focus-visible {
outline: none; box-shadow: inset 0 1px 0 var(--m-line-2), 0 0 0 3px rgba(185,170,242,.34);
}
body[data-skin="modern"] .switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(185,170,242,.42); }
body[data-skin="modern"] .card:focus-within { box-shadow: inset 0 1px 0 var(--m-line-2), 0 0 0 3px rgba(185,170,242,.24), var(--m-shadow); }
/* ---- respect the member's motion setting ---- */
@media (prefers-reduced-motion: reduce) {
body[data-skin="modern"] *, body[data-skin="modern"] *::before, body[data-skin="modern"] *::after {
transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;
}
body[data-skin="modern"] .card:hover, body[data-skin="modern"] .post-box:hover { transform: none; }
}
/* ---- selection, scrollbars, small things that say "considered" ---- */
body[data-skin="modern"] ::selection { background: rgba(185,170,242,.36); color: var(--m-ink); }
body[data-skin="modern"] { scrollbar-color: rgba(128,128,128,.35) transparent; }
body[data-skin="modern"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-skin="modern"] ::-webkit-scrollbar-thumb { background: rgba(128,128,128,.32); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
body[data-skin="modern"] ::-webkit-scrollbar-track { background: transparent; }
body[data-skin="modern"] hr { border: 0; height: 1px; background: var(--m-rule); }
body[data-skin="modern"] .flash, body[data-skin="modern"] .notice {
background: var(--m-glass-2); color: var(--m-ink); border: 0; border-radius: var(--m-r3);
box-shadow: inset 0 1px 0 var(--m-line); padding: .8rem 1rem;
}
/* =====================================================================
REFINEMENTS — depth, materials, and the details that make glass read
===================================================================== */
/* ---- 1. The backdrop: what the glass is FOR.
visionOS glass works because it sits over a real, out-of-focus world —
something behind it to refract. A flat colour gives the material nothing
to do. So the backdrop becomes a defocused painting: several large colour
fields, layered, that the glass can pick up and the blur can soften. ---- */
body[data-skin="modern"] {
--m-bg: #0b0d12;
--m-fields:
radial-gradient(1100px 800px at 12% -8%, rgba(96,118,170,.42), transparent 62%),
radial-gradient(900px 700px at 100% 18%, rgba(168,120,84,.34), transparent 60%),
radial-gradient(1000px 900px at 45% 105%, rgba(72,104,110,.40), transparent 62%),
radial-gradient(700px 500px at 82% 78%, rgba(150,96,120,.22), transparent 60%),
radial-gradient(600px 600px at 28% 55%, rgba(120,130,160,.16), transparent 60%),
linear-gradient(180deg, #0f1118 0%, #0b0d12 100%);
background-size: auto; background-repeat: no-repeat; background-attachment: fixed;
}
body[data-skin="modern"][data-mode="light"], html.m-light body[data-skin="modern"][data-mode="system"] {
--m-bg: #e6e7ec;
--m-fields:
radial-gradient(1100px 800px at 12% -8%, rgba(150,170,225,.55), transparent 62%),
radial-gradient(900px 700px at 100% 18%, rgba(240,200,160,.55), transparent 60%),
radial-gradient(1000px 900px at 45% 105%, rgba(160,200,200,.50), transparent 62%),
radial-gradient(700px 500px at 82% 78%, rgba(230,180,200,.35), transparent 60%),
radial-gradient(600px 600px at 28% 55%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(180deg, #edeef3 0%, #e3e5ea 100%);
}
/* the material picks up more of what is behind it, now that there is something there */
body[data-skin="modern"] .card, body[data-skin="modern"] .nf-box, body[data-skin="modern"] .prail,
body[data-skin="modern"] .tile-slot > *, body[data-skin="modern"] .timeline li, body[data-skin="modern"] .wtable,
body[data-skin="modern"] .post-box, body[data-skin="modern"] .ens-parts, body[data-skin="modern"] .ens-comps, body[data-skin="modern"] .empty {
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
/* a faint grain, so the glass has a surface and the gradients never band */
body[data-skin="modern"]::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .045; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* main above the grain layer; the search bar and rail are already fixed and
carry their own z-index, so they must not be repositioned */
body[data-skin="modern"] main { position: relative; z-index: 1; }
/* ---- 2. The search bar: a glass ornament, not a hole ---- */
body[data-skin="modern"] .searchbar {
background: var(--m-glass) !important; background-image: none !important;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 -1px 0 var(--m-rule), 0 8px 30px -18px rgba(0,0,0,.5);
}
body[data-skin="modern"] .searchbar input {
background-color: var(--m-glass-2) !important;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
}
/* ---- 3. Buttons: lifted off the glass by a soft shadow ---- */
body[data-skin="modern"] .btn3d, body[data-skin="modern"] .btn-note, body[data-skin="modern"] .tile-cta,
body[data-skin="modern"] .tile-cta-go, body[data-skin="modern"] .btn-dark, body[data-skin="modern"] .dbtn {
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.2);
}
body[data-skin="modern"] .btn3d:hover, body[data-skin="modern"] .btn-note:hover, body[data-skin="modern"] .tile-cta:hover {
box-shadow: inset 0 1px 0 var(--m-line-2), 0 10px 22px -8px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.22);
}
body[data-skin="modern"] .nf-post, body[data-skin="modern"] .splash-enter {
box-shadow: 0 8px 20px -6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.25);
}
body[data-skin="modern"] .nf-post:hover { box-shadow: 0 12px 26px -8px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.25); }
body[data-skin="modern"] .btn3d:active, body[data-skin="modern"] .nf-post:active, body[data-skin="modern"] .btn-note:active {
box-shadow: inset 0 1px 0 var(--m-line), 0 2px 6px -2px rgba(0,0,0,.4);
}
html.m-light body[data-skin="modern"] .btn3d, body[data-skin="modern"][data-mode="light"] .btn3d,
html.m-light body[data-skin="modern"] .btn-note, body[data-skin="modern"][data-mode="light"] .btn-note,
html.m-light body[data-skin="modern"] .tile-cta, body[data-skin="modern"][data-mode="light"] .tile-cta {
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(30,40,60,.28), 0 1px 3px rgba(30,40,60,.12);
}
body[data-skin="modern"] .switch span::after { box-shadow: 0 4px 12px -3px rgba(0,0,0,.45); }
/* ---- 4. The map: toned to the mode, inside a glass frame ---- */
body[data-skin="modern"] .mark-map {
background: var(--m-image-bed); border-radius: var(--m-r2); overflow: hidden;
box-shadow: inset 0 0 0 1px var(--m-line);
}
body[data-skin="modern"] .mark-map iframe { filter: none; }
body[data-skin="modern"][data-mode="dark"] .mark-map iframe,
body[data-skin="modern"][data-mode="system"]:not(.m-light) .mark-map iframe {
/* invert the tiles, restore hues, pull saturation down, warm it slightly:
the standard dark-map treatment, applied to the composited embed */
filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.82) contrast(1.05) sepia(.12);
}
html.m-light body[data-skin="modern"][data-mode="system"] .mark-map iframe { filter: saturate(.85) contrast(.98); }
body[data-skin="modern"] .mark-map-placeholder {
color: var(--m-ink-2); background: var(--m-glass); font-weight: 600; letter-spacing: .1em;
}
body[data-skin="modern"] .map-credit { color: var(--m-ink-3); }
/* ---- 5. The mobile welcome table: compact, and no shadow band beneath the nav ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .wtable > .wcell { padding: 1rem .6rem; }
body[data-skin="modern"] .wcell b { font-size: 1.35rem; margin-bottom: .3rem; }
body[data-skin="modern"] .wcell span { font-size: .56rem; }
body[data-skin="modern"] .wcell-wide { padding: 1.1rem .6rem .9rem; }
body[data-skin="modern"] .wcell-wide .avatar, body[data-skin="modern"] .wcell-wide img.avatar.big { width: 64px; height: 64px; }
body[data-skin="modern"] .wcell .welcome-name { font-size: 1.05rem; margin: .5rem 0 0; }
body[data-skin="modern"] .wcell-btn, body[data-skin="modern"] .wcell:has(.btn3d) { padding: .7rem .6rem; }
body[data-skin="modern"] .wcell .btn3d { padding: .6rem 1.2rem; }
body[data-skin="modern"] .feednav::after { display: none; }
}
/* ---- 6. Note cards: full-bleed images. The picture reaches the card's edge
and is clipped by its corners, so the glass reads as a frame around a
photograph rather than a panel with a picture in it. ---- */
body[data-skin="modern"] .note .figure { padding: 0; background: transparent; }
body[data-skin="modern"] .note .figure img { object-fit: cover; object-position: 50% 50%; height: 100%; min-height: 100%; }
body[data-skin="modern"] .card { overflow: hidden; } /* the corners do the clipping */
body[data-skin="modern"] .card .figure { border-radius: 0; box-shadow: none; background: var(--m-image-bed); }
/* side-by-side: the picture fills the right column top to bottom */
@media (min-width: 52.01rem) {
body[data-skin="modern"] .note.has-image .card { grid-template-rows: auto 1fr auto; }
body[data-skin="modern"] .note.has-image .figure { grid-row: 1 / 3; }
}
/* stacked on phones: the picture is the card's top edge */
@media (max-width: 52rem) {
body[data-skin="modern"] .note .figure { padding: 0; }
body[data-skin="modern"] .note .figure img { max-height: 18rem; }
}
/* =====================================================================
REFINEMENTS II — light-mode depth, compact welcome, the last pages
===================================================================== */
/* ---- light mode: a real painting behind the glass. More fields, more
chroma, grain you can actually see, and a base that is not white. ---- */
body[data-skin="modern"][data-mode="light"], html.m-light body[data-skin="modern"][data-mode="system"] {
--m-bg: #dfe1e8;
--m-glass: rgba(255,255,255,.50);
--m-glass-2: rgba(255,255,255,.66);
--m-glass-3: rgba(255,255,255,.84);
--m-fields:
radial-gradient(1100px 820px at 6% -8%, rgba(96,132,235,.92), transparent 64%),
radial-gradient(960px 760px at 104% 12%, rgba(255,178,110,.95), transparent 62%),
radial-gradient(1100px 940px at 40% 110%, rgba(80,185,185,.88), transparent 64%),
radial-gradient(800px 620px at 88% 76%, rgba(240,120,170,.72), transparent 62%),
radial-gradient(700px 560px at 20% 60%, rgba(170,150,245,.62), transparent 62%),
radial-gradient(560px 460px at 62% 36%, rgba(255,232,170,.62), transparent 60%),
radial-gradient(500px 500px at 74% 50%, rgba(150,230,200,.40), transparent 60%),
linear-gradient(180deg, #e4e7f0 0%, #d8dbe4 100%);
}
body[data-skin="modern"][data-mode="light"]::before, html.m-light body[data-skin="modern"][data-mode="system"]::before {
opacity: .14; mix-blend-mode: multiply;
}
/* light-mode controls need contrast against a near-white sheet */
body[data-skin="modern"][data-mode="light"] .switch span, html.m-light body[data-skin="modern"][data-mode="system"] .switch span {
background: rgba(20,22,28,.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
body[data-skin="modern"][data-mode="light"] .switch input:checked + span, html.m-light body[data-skin="modern"][data-mode="system"] .switch input:checked + span { background: var(--m-accent); }
body[data-skin="modern"][data-mode="light"] .nf-field, html.m-light body[data-skin="modern"][data-mode="system"] .nf-field,
body[data-skin="modern"][data-mode="light"] .searchbar input, html.m-light body[data-skin="modern"][data-mode="system"] .searchbar input {
background-color: rgba(255,255,255,.62) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,22,28,.08);
}
/* ---- the signed-in welcome table on phones: the person at full size, the
four counters on ONE row beneath. Scoped to the home rail's table only —
Settings uses the same .wtable markup and must not inherit any of this. ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .rail .wtable:not(.settings-table) { grid-template-columns: repeat(4, 1fr); }
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell-wide { grid-column: 1 / -1; padding: 1.3rem .6rem 1rem; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell-wide .avatar,
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell-wide img.avatar.big { width: 88px; height: 88px; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell .welcome-name { font-size: 1.2rem; margin: .7rem 0 0; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide) {
padding: .7rem .2rem .65rem; border-right: 1px solid var(--m-rule); border-bottom: 1px solid var(--m-rule);
}
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell:nth-child(5) { border-right: 0; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell b { font-size: 1.25rem; margin-bottom: .2rem; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell span { font-size: .5rem; letter-spacing: .1em; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell:has(.btn3d) { grid-column: 1 / -1; padding: .6rem .6rem .7rem; border: 0; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell .btn3d { padding: .55rem 1rem; font-size: .72rem; }
}
/* the earlier compaction rules also reached the settings tables; undo that
explicitly so their cells stack as classic lays them out */
@media (max-width: 52rem) {
body[data-skin="modern"] .settings-table { grid-template-columns: 1fr; }
body[data-skin="modern"] .settings-table > .wcell, body[data-skin="modern"] .settings-table > .wcell-wide {
display: block; padding: 1.1rem 1rem; border-right: 0; text-align: center;
}
body[data-skin="modern"] .settings-table .avatar, body[data-skin="modern"] .settings-table img.avatar.big { width: 88px; height: 88px; }
body[data-skin="modern"] .settings-table .nf-field, body[data-skin="modern"] .settings-table input, body[data-skin="modern"] .settings-table textarea,
body[data-skin="modern"] .settings-table select { width: 100%; }
body[data-skin="modern"] .settings-table .btn3d, body[data-skin="modern"] .settings-table .nf-post { width: 100%; }
body[data-skin="modern"] .settings-table .sbox-title { font-size: 1.2rem; }
body[data-skin="modern"] .settings-table .sbox-sub { font-size: .9rem; }
body[data-skin="modern"] .settings-table code, body[data-skin="modern"] .settings-table .conn-url code { font-size: .74rem; word-break: break-all; }
body[data-skin="modern"] .look-row { justify-content: center; gap: 1rem; }
body[data-skin="modern"] .look-form { justify-items: stretch; }
}
/* ---- settings: native selects and code blocks in the field recipe ---- */
body[data-skin="modern"] select.nf-field, body[data-skin="modern"] .settings select, body[data-skin="modern"] .ingest-mode select {
-webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 12px 8px !important;
}
body[data-skin="modern"] code, body[data-skin="modern"] .connector-url, body[data-skin="modern"] .sbox code, body[data-skin="modern"] .invite-link {
display: block; background: var(--m-field); color: var(--m-ink); border-radius: var(--m-r3); padding: .7rem .9rem;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); font-size: .82rem; word-break: break-all; border: 0;
}
body[data-skin="modern"] .sbox p code, body[data-skin="modern"] li code { display: inline; padding: .12em .4em; }
body[data-skin="modern"] .settings-table .btn3d, body[data-skin="modern"] .sbox .btn3d { width: 100%; }
/* ---- empty states: keep classic's watermark scale — it gives an empty feed
a voice — but let the ink recede into the material rather than sit on it ---- */
body[data-skin="modern"] .empty-line {
font-size: 2.9rem; font-weight: 700; font-style: normal; letter-spacing: -.01em; line-height: 1.1;
color: var(--m-ink); opacity: .16; max-width: 34rem; margin: 3.4rem auto; text-align: center;
}
body[data-skin="modern"][data-mode="light"] .empty-line, html.m-light body[data-skin="modern"][data-mode="system"] .empty-line { opacity: .13; }
body[data-skin="modern"] .empty-rule { display: none; }
body[data-skin="modern"] .suggest-title { color: var(--m-ink-3); }
/* ---- the icon rail's active item: clear the inherited stripe texture ---- */
body[data-skin="modern"] .iconrail a.on, body[data-skin="modern"] .iconrail a:hover { background-image: none !important; }
@media (min-width: 52.01rem) {
body[data-skin="modern"] .iconrail a.on { background: transparent !important; box-shadow: none; color: var(--m-ink); }
body[data-skin="modern"] .iconrail a:hover { background: transparent; }
/* the active state is the icon at full ink plus a faint halo — no filled block */
body[data-skin="modern"] .iconrail a.on::before {
background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line); left: 14px; right: 14px; top: 38px; bottom: 38px; border-radius: 14px;
}
body[data-skin="modern"] .iconrail a:not(.on) { color: var(--m-ink-3); }
body[data-skin="modern"] .iconrail a:hover::before {
content: ""; position: absolute; left: 14px; right: 14px; top: 38px; bottom: 38px; border-radius: 14px;
background: var(--m-glass); z-index: -1; display: block; box-shadow: none;
animation: m-breathe 1.8s ease-in-out infinite;
}
body[data-skin="modern"] .iconrail a.on:hover::before { animation: m-breathe 1.8s ease-in-out infinite; }
}
/* ---- edit forms: the preview bed, and the dashed well only when empty ---- */
body[data-skin="modern"] .nf-image-preview { background: var(--m-image-bed); }
body[data-skin="modern"] .img-pick { outline: none; box-shadow: none; background: var(--m-glass); border-radius: 999px; }
body[data-skin="modern"] .nf-image:has(.nf-image-preview) { outline: none; }
body[data-skin="modern"] .nf-image:has(.nf-image-preview) .nf-image-preview { border-radius: var(--m-r2) var(--m-r2) 0 0; }
/* ---- Look and feel section ---- */
body[data-skin="modern"] .look-form { display: grid; gap: .5rem; margin: .6rem 0 0; }
body[data-skin="modern"] .look-row { margin: 0; }
body[data-skin="modern"] .look-modes { margin: .2rem 0 0; }
/* the hover glow breathes: brighter, then dimmer, and again */
@keyframes m-breathe {
0% { box-shadow: 0 0 0 0 rgba(185,170,242,0), inset 0 0 0 0 rgba(255,255,255,0); background: var(--m-glass); }
50% { box-shadow: 0 0 22px 4px rgba(185,170,242,.35), inset 0 0 0 1px rgba(255,255,255,.18); background: var(--m-glass-2); }
100% { box-shadow: 0 0 0 0 rgba(185,170,242,0), inset 0 0 0 0 rgba(255,255,255,0); background: var(--m-glass); }
}
body[data-skin="modern"] .iconrail a { position: relative; }
body[data-skin="modern"] .iconrail a:hover { color: var(--m-ink); }
@media (max-width: 52rem) {
body[data-skin="modern"] .iconrail a:hover { animation: m-breathe-pill 1.8s ease-in-out infinite; }
}
@keyframes m-breathe-pill {
0%, 100% { box-shadow: 0 0 0 0 rgba(185,170,242,0); }
50% { box-shadow: 0 0 18px 3px rgba(185,170,242,.4); }
}
body[data-skin="modern"] .card .colls { font-size: 0; line-height: 0; }
body[data-skin="modern"] .card .colls a { display: inline-block; font-size: .7rem; line-height: 1.2; margin: 0 .35rem .35rem 0; padding: .24rem .7rem; }
@media (max-width: 52rem) {
body[data-skin="modern"] .note.has-image .text { padding-top: 1rem; }
}
/* =====================================================================
REFINEMENTS III
===================================================================== */
/* ---- 1. the search bar on dark: darkens what passes behind it ---- */
body[data-skin="modern"][data-mode="dark"] .searchbar, body[data-skin="modern"][data-mode="system"]:not(.m-light) .searchbar {
background: rgba(8,10,16,.42) !important;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 8px 30px -18px rgba(0,0,0,.7);
}
body[data-skin="modern"][data-mode="dark"] .searchbar input, body[data-skin="modern"][data-mode="system"]:not(.m-light) .searchbar input {
background-color: rgba(0,0,0,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* ---- 2. the welcome counters: quiet cells that invite a tap ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .rail .wtable:not(.settings-table) { padding: .5rem; gap: .35rem; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide) {
border: 0; border-radius: 14px; background: rgba(255,255,255,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: background .18s var(--m-ease);
}
body[data-skin="modern"][data-mode="light"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide),
html.m-light body[data-skin="modern"][data-mode="system"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide) {
background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide):active { background: var(--m-glass-2); }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell:has(.btn3d) { padding-top: .35rem; }
}
/* ---- 3. the feed pill on light: no keyline; the same highlight as the profile tabs ---- */
body[data-skin="modern"] .feednav { border: 0 !important; }
body[data-skin="modern"] .feednav li { border: 0; }
@media (max-width: 52rem) {
body[data-skin="modern"] .feednav { box-shadow: inset 0 1px 0 var(--m-line), 0 8px 24px -14px rgba(0,0,0,.35); }
/* ---- 4. the profile tabs, centred: classic pulls them out with uneven margins ---- */
body[data-skin="modern"] .prail-nav { margin-left: 0 !important; margin-right: 0 !important; width: auto; }
}
/* ---- 5. the warrant seal's ribbon: a translucent tone from the material ---- */
body[data-skin="modern"] .warrant-seal .wsl-ribbon { fill: rgba(255,255,255,.22); }
body[data-skin="modern"][data-mode="light"] .warrant-seal .wsl-ribbon, html.m-light body[data-skin="modern"][data-mode="system"] .warrant-seal .wsl-ribbon { fill: rgba(60,64,80,.16); }
body[data-skin="modern"] .warrant-seal { filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
/* ---- 6. collection names on cards: plain text, no pill ---- */
body[data-skin="modern"] .card .colls a {
background: transparent; box-shadow: none; padding: 0; color: var(--m-ink-3); letter-spacing: .12em; text-transform: uppercase;
font-weight: 700; font-size: .62rem; margin: 0 .6rem .2rem 0;
}
body[data-skin="modern"] .card .colls a:hover { color: var(--m-ink); }
/* ---- 7. the backdrop: mottle against banding, and warmth in the dark.
The graphite fields added earlier for warmth were also desaturating the
chromatic ones — grey over colour reads as grey. So the hues come back up
in both saturation and weight, the graphite stays but thinner and warmer,
and the base gains a slight blue cast so the fields have something to sit
against rather than washing into near-black. ---- */
body[data-skin="modern"] {
--m-fields:
radial-gradient(1150px 840px at 10% -8%, rgba(78,110,205,.60), transparent 63%), /* indigo */
radial-gradient(940px 740px at 102% 16%, rgba(205,124,62,.54), transparent 61%), /* copper */
radial-gradient(1050px 940px at 44% 106%, rgba(46,120,132,.56), transparent 63%), /* teal */
radial-gradient(760px 560px at 84% 76%, rgba(190,80,140,.40), transparent 61%), /* magenta */
radial-gradient(620px 520px at 24% 52%, rgba(124,92,190,.32), transparent 60%), /* violet */
radial-gradient(900px 700px at 32% 62%, rgba(104,90,78,.26), transparent 62%), /* graphite warmth, thinned */
linear-gradient(180deg, #15161f 0%, #101119 55%, #0c0d14 100%);
}
/* two grains: a fine one that dithers the gradient, a coarse one that gives it
the mottle classic had — both blended so the fields stay soft */
body[data-skin="modern"]::before {
opacity: .12; mix-blend-mode: soft-light; background-size: 160px 160px, 420px 420px;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
body[data-skin="modern"][data-mode="light"]::before, html.m-light body[data-skin="modern"][data-mode="system"]::before {
opacity: .20; mix-blend-mode: multiply;
}
/* ---- 8. Ensembles: the listing as cards, the page's notes as cards ---- */
body[data-skin="modern"] .ens-tile {
display: flex; flex-direction: column; gap: 0; overflow: hidden; border-radius: var(--m-r);
background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
transition: transform .22s var(--m-ease), box-shadow .22s var(--m-ease);
}
body[data-skin="modern"] .ens-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--m-line-2), 0 30px 70px -30px rgba(0,0,0,.75), 0 6px 18px rgba(0,0,0,.3); }
body[data-skin="modern"] .ens-tile-media { display: block; }
body[data-skin="modern"] .ens-tile img, body[data-skin="modern"] .ens-tile-blank {
display: block; width: 100%; height: 12rem; object-fit: cover; border-radius: 0; box-shadow: none; transform: none; background: var(--m-image-bed);
}
body[data-skin="modern"] .ens-tile:hover img { transform: none; }
body[data-skin="modern"] .ens-tile-meta { display: grid; gap: .25rem; padding: .9rem 1.1rem 1rem; }
body[data-skin="modern"] .ens-tile-t { color: var(--m-ink); font-size: 1.15rem; font-weight: 600; letter-spacing: -.005em; }
body[data-skin="modern"] .ens-tile-t i {
display: inline-block; margin-left: .5rem; vertical-align: .1em; font-size: .56rem; font-weight: 700; letter-spacing: .1em;
color: var(--m-ink-3); background: var(--m-glass-3); border-radius: 999px; padding: .16em .55em .2em; font-style: normal;
}
body[data-skin="modern"] .ens-tile-n {
display: block; color: var(--m-ink-3); font-size: .64rem; font-weight: 600; letter-spacing: .12em; padding-top: .1rem;
border-top: 1px solid var(--m-rule); margin-top: .35rem;
}
/* ---- chrome and typography for the ensemble listings ---- */
body[data-skin="modern"] .ens-grid { padding: 1.6rem 1.4rem 2rem; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
body[data-skin="modern"] .ens-grid-sub { color: var(--m-ink-2); opacity: 1; padding: 0 1.4rem; font-size: .92rem; margin-top: .1rem; }
body[data-skin="modern"] .ens-tile-media { position: relative; }
body[data-skin="modern"] .ens-tile img, body[data-skin="modern"] .ens-tile-blank { height: 13rem; }
/* a soft gradient at the picture's foot keeps a light image from washing
into the meta panel below it, the way full-bleed note images are treated */
body[data-skin="modern"] .ens-tile-media::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 3.2rem; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
}
body[data-skin="modern"] .ens-tile-meta { padding: 1rem 1.2rem 1.05rem; }
/* the empty state: the same quiet watermark line used elsewhere, not a
loose paragraph sitting on the bare backdrop */
body[data-skin="modern"] .profile-feed .empty-line { margin: 2.4rem auto 3rem; }
body[data-skin="modern"] .ens-note-grid { display: grid; gap: 1.2rem; padding: .4rem 1.2rem 1.2rem; }
body[data-skin="modern"] .ens-note-grid .note { max-width: none; }
@media (min-width: 70rem) { body[data-skin="modern"] .ens-note-grid { grid-template-columns: 1fr 1fr; } }
body[data-skin="modern"] .ens-parts { padding-bottom: .4rem; }
/* ---- the full-bleed clip belongs on the picture, not the card: the card
must stay overflow-visible so the warrant seal can hang above its edge ---- */
body[data-skin="modern"] .card { overflow: visible; }
body[data-skin="modern"] .card .figure { overflow: hidden; }
@media (min-width: 52.01rem) {
body[data-skin="modern"] .note.has-image:not(.travelmark) .figure { border-radius: 0 var(--m-r) var(--m-r) 0; }
}
@media (max-width: 52rem) {
body[data-skin="modern"] .note.has-image:not(.travelmark) .figure { border-radius: var(--m-r) var(--m-r) 0 0; }
}
body[data-skin="modern"] .warrant-seal { z-index: 2; }
/* warranted cards clear the hanging seal, as classic does; my header padding
override had been flattening this */
body[data-skin="modern"] .card:has(.warrant-seal) .card-head,
body[data-skin="modern"] .travelmark .card:has(.warrant-seal) .text { padding-top: 3.4rem; }
/* =====================================================================
REFINEMENTS IV
===================================================================== */
/* ---- desktop welcome counters: the same quiet cells as on phones ---- */
@media (min-width: 52.01rem) {
body[data-skin="modern"] .rail .wtable:not(.settings-table) { padding: .5rem; gap: .4rem; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide) {
border: 0; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
transition: background .18s var(--m-ease);
}
body[data-skin="modern"][data-mode="light"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide),
html.m-light body[data-skin="modern"][data-mode="system"] .rail .wtable:not(.settings-table) > .wcell:not(.wcell-wide) {
background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
body[data-skin="modern"] .rail .wtable:not(.settings-table) > a.wcell:hover { background: var(--m-glass-2); }
body[data-skin="modern"] .rail .wtable:not(.settings-table) > .wcell-wide { border: 0; }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcell:has(.btn3d) { border: 0; }
}
/* ---- profile > notes: one width, one edge, for everything in the stack ---- */
body[data-skin="modern"] .profile-feed .tiles-wrap, body[data-skin="modern"] .profile-feed .tiles,
body[data-skin="modern"] .profile-feed .feed-search, body[data-skin="modern"] .profile-feed .vis-tabs,
body[data-skin="modern"] .profile-feed .post-box, body[data-skin="modern"] .profile-feed .search input,
body[data-skin="modern"] .profile-feed form.search { width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; }
body[data-skin="modern"] .profile-feed .tiles-nav { padding: 0 0 .5rem; }
body[data-skin="modern"] .profile-feed .vis-tabs { margin: .8rem 0 1rem; }
body[data-skin="modern"] .profile-feed .post-box { margin: 0 0 1.4rem; }
body[data-skin="modern"] .profile-feed .search, body[data-skin="modern"] .profile-feed .feed-search { margin: 0 0 .8rem; }
/* ---- the collections carousel as material: full-bleed pictures, one
sheet per tile, no rules between them; placeholders drawn from the
backdrop rather than the seed's pastel squares ---- */
body[data-skin="modern"] .tiles { border: 0; padding: 2px 2px 8px; gap: 10px; }
body[data-skin="modern"] .tile-slot { flex-basis: 9.2rem; }
body[data-skin="modern"] .tile-slot + .tile-slot, body[data-skin="modern"] .tiles > .tile-new { border-left: 0; margin-left: 0; }
body[data-skin="modern"] .tile-slot > * { border-radius: var(--m-r2); overflow: hidden; display: flex; flex-direction: column; width: 100%; }
/* the tile picture is a background-image on a span; the `background`
SHORTHAND resets center/cover to auto 0% 0%, which broke the crop. Set the
colour alone and state the sizing explicitly. */
body[data-skin="modern"] .tile-img { border-radius: 0; height: 5.6rem; width: 100%;
background-color: var(--m-image-bed); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
body[data-skin="modern"] .tile-glyph { background: var(--m-image-bed); color: var(--m-ink-3); height: 5.6rem; display: grid; place-items: center; }
body[data-skin="modern"] .tile-glyph img { opacity: .45; filter: invert(1); width: 30px; }
body[data-skin="modern"][data-mode="light"] .tile-glyph img, html.m-light body[data-skin="modern"][data-mode="system"] .tile-glyph img { filter: none; opacity: .38; }
body[data-skin="modern"] .tile-name { padding: .55rem .5rem .1rem; font-size: .58rem; }
body[data-skin="modern"] .tile-count { border: 0; padding: 0 .5rem .6rem; font-size: 1.05rem; }
/* the "new collection" tile: the same sheet, dashed inside, a plus that reads in both modes */
body[data-skin="modern"] .tile-new, body[data-skin="modern"] .tile-new > * {
background: transparent; color: var(--m-ink-3); box-shadow: none; border: 0;
}
body[data-skin="modern"] .tile-new > * { box-shadow: inset 0 0 0 1px var(--m-rule); outline: 1.5px dashed var(--m-line-2); outline-offset: -8px; justify-content: center; align-items: center; gap: .4rem; border-radius: var(--m-r2); }
body[data-skin="modern"] .tile-new img, body[data-skin="modern"] .tile-new .plus { filter: invert(1); opacity: .6; width: 28px; }
body[data-skin="modern"][data-mode="light"] .tile-new img, html.m-light body[data-skin="modern"][data-mode="system"] .tile-new img { filter: none; }
body[data-skin="modern"] .tile-new:hover > * { background: var(--m-glass); color: var(--m-ink); }
body[data-skin="modern"] .tile-ctas, body[data-skin="modern"] .tile-edit, body[data-skin="modern"] .tile-del, body[data-skin="modern"] .tile-ren { color: var(--m-ink-3); background: transparent; }
/* ---- forms: fields grouped into a sheet within the sheet ---- */
body[data-skin="modern"] .nf-stack {
gap: 1px; background: var(--m-rule); border-radius: var(--m-r3); overflow: hidden; box-shadow: inset 0 0 0 1px var(--m-rule); margin: .35rem 0 .7rem;
}
body[data-skin="modern"] .nf-stack .nf-field, body[data-skin="modern"] .nf-stack > .nf-field:first-child {
border: 0; border-radius: 0; box-shadow: none; background: var(--m-field);
}
body[data-skin="modern"] .nf-stack .nf-field:focus { box-shadow: inset 0 0 0 2px rgba(185,170,242,.5); }
body[data-skin="modern"] .nf-stack .nf-lbl, body[data-skin="modern"] .nf-stack > label { background: transparent; padding: .5rem .8rem 0; }
body[data-skin="modern"] .nf-box > .nf-lbl { margin-top: .6rem; }
body[data-skin="modern"] .nf-lookup { color: var(--m-ink-3); }
body[data-skin="modern"] .nf-box .nf-image { margin: .35rem 0 .7rem; }
/* ---- "show more": a quieter presence ---- */
body[data-skin="modern"] .more-link, body[data-skin="modern"] .more .nf-post {
background: var(--m-glass); background-image: none; color: var(--m-ink-2); font-weight: 600;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35);
border-radius: 999px; transition: background .18s var(--m-ease), box-shadow .18s var(--m-ease);
}
body[data-skin="modern"] .more-link:hover { background: var(--m-glass-2); color: var(--m-ink); opacity: 1; }
html.m-light body[data-skin="modern"] .more-link, body[data-skin="modern"][data-mode="light"] .more-link {
background: var(--m-glass-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 6px 16px -6px rgba(30,40,60,.22);
}
/* ---- settings on phones: one rhythm between the sheets ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .settings-stack { gap: 0; }
body[data-skin="modern"] .settings-stack-side { gap: 0; }
body[data-skin="modern"] .settings-stack > .wtable, body[data-skin="modern"] .settings-col > .wtable,
body[data-skin="modern"] .settings-table, body[data-skin="modern"] .install-box, body[data-skin="modern"] .sbox { margin: 0 0 1rem !important; }
body[data-skin="modern"] .settings-col { display: grid; gap: 0; }
}
/* ---- welcome page, light: the standard light field tokens; the mark darkens ---- */
body[data-skin="modern"][data-mode="light"].is-welcome .signin input, html.m-light body[data-skin="modern"][data-mode="system"].is-welcome .signin input {
background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,22,28,.08); color: var(--m-ink);
}
body[data-skin="modern"][data-mode="light"] .splash-mark, html.m-light body[data-skin="modern"][data-mode="system"] .splash-mark { filter: brightness(.35) saturate(.6); opacity: 1; }
body[data-skin="modern"] .rail .about { color: var(--m-ink-2); }
body[data-skin="modern"] .rail .lbl.ruled { color: var(--m-ink-3); }
body[data-skin="modern"] .rail .lbl.ruled::before { display: none; } /* the 2px rule between "Tags" and the list */
body[data-skin="modern"] .rail h3.lbl { border-bottom: 1px solid var(--m-rule); }
body[data-skin="modern"] .invite-code, body[data-skin="modern"] .code, body[data-skin="modern"] .join code,
body[data-skin="modern"][data-mode="light"] .settings-table code, html.m-light body[data-skin="modern"][data-mode="system"] .settings-table code {
background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,22,28,.08);
}
/* ---- the rule above the tags on cards: lighter in the light ---- */
body[data-skin="modern"][data-mode="light"] .owned-row, html.m-light body[data-skin="modern"][data-mode="system"] .owned-row,
body[data-skin="modern"][data-mode="light"] .noteit, html.m-light body[data-skin="modern"][data-mode="system"] .noteit,
body[data-skin="modern"][data-mode="light"] .section-rule, html.m-light body[data-skin="modern"][data-mode="system"] .section-rule {
border-top-color: rgba(255,255,255,.75); background: rgba(255,255,255,.75);
}
body[data-skin="modern"][data-mode="light"] .owned-row, html.m-light body[data-skin="modern"][data-mode="system"] .owned-row,
body[data-skin="modern"][data-mode="light"] .noteit, html.m-light body[data-skin="modern"][data-mode="system"] .noteit { background: transparent; }
/* ---- rail hover on inactive icons: the icon itself glows, no box ---- */
@media (min-width: 52.01rem) {
body[data-skin="modern"] .iconrail a:not(.on):hover::before { display: none; }
body[data-skin="modern"] .iconrail a:not(.on):hover svg, body[data-skin="modern"] .iconrail a:not(.on):hover img {
animation: m-icon-glow 1.8s ease-in-out infinite;
}
}
@keyframes m-icon-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(185,170,242,0)); opacity: .75; }
50% { filter: drop-shadow(0 0 8px rgba(185,170,242,.85)); opacity: 1; }
}
/* ---- mark page: comments follow the card, never the taller timeline ---- */
body[data-skin="modern"] .mark-layout.has-log { align-items: start; }
body[data-skin="modern"] .mark-layout.has-log > .comments, body[data-skin="modern"] .mark-layout.has-log ~ .comments { grid-column: 1; }
/* ---- ensemble page beside the rail; notes to the right of the picture when there is room ---- */
body[data-skin="modern"] .ens-feed { padding-top: 0; }
body[data-skin="modern"] .ens-feed .ens { max-width: none; }
@media (min-width: 80rem) {
body[data-skin="modern"] .ens-feed .ens { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); gap: 1.4rem; align-items: start; }
body[data-skin="modern"] .ens-feed .ens-head { grid-column: 1 / -1; }
body[data-skin="modern"] .ens-feed .ens-primary, body[data-skin="modern"] .ens-feed .ens-alts, body[data-skin="modern"] .ens-feed .ens-review, body[data-skin="modern"] .ens-feed .ens-edit { grid-column: 1; }
body[data-skin="modern"] .ens-feed .ens-parts { grid-column: 2; grid-row: 2 / span 4; margin-top: 0; }
body[data-skin="modern"] .ens-feed .ens-note-grid { grid-template-columns: 1fr; }
}
/* ---- the folded mark card: a hint, and the tap target reads as one ---- */
body[data-skin="modern"] .mark-hint { color: var(--m-ink-3); }
body[data-skin="modern"] .mark-collapsible .text:hover { background: rgba(255,255,255,.02); }
/* note cards inside the ensemble's side column stack, as they do on phones */
@media (min-width: 80rem) {
body[data-skin="modern"] .ens-note-grid .note.has-image .card { grid-template-areas: "head" "figure" "text" "owned"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
body[data-skin="modern"] .ens-note-grid .note.has-image .figure { grid-row: auto; border-radius: 0; }
body[data-skin="modern"] .ens-note-grid .note.has-image .figure img { max-height: 14rem; width: 100%; }
body[data-skin="modern"] .ens-note-grid .note { grid-template-columns: 52px 1fr; gap: .8rem; }
}
/* the "search within" field joins the aligned stack */
body[data-skin="modern"] .profile-feed form.within { width: 100%; margin: 0 0 .8rem; }
body[data-skin="modern"] .profile-feed form.within input {
width: 100%; box-sizing: border-box; margin: 0; background: var(--m-field); background-image: none; border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); border-radius: 999px;
}
body[data-skin="modern"] .who-private { color: var(--m-accent); }
/* =====================================================================
REFINEMENTS V — tiles committed to full bleed, the new tile rebuilt,
the mobile nav given presence, the welcome masthead unbanded
===================================================================== */
/* ---- the collection tile, as one object: picture to the edges, name and
count on the sheet beneath. Tokens for the tile so nothing is guessed. ---- */
body[data-skin="modern"] { --m-tile-w: 9.2rem; --m-tile-img: 5.6rem; }
body[data-skin="modern"] .tile-slot { flex-basis: var(--m-tile-w); }
body[data-skin="modern"] .tile, body[data-skin="modern"] .tile-new {
grid-template-rows: var(--m-tile-img) auto auto; background: var(--m-glass); color: var(--m-ink);
border-radius: var(--m-r2); overflow: hidden; box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
transition: transform .22s var(--m-ease), background .18s var(--m-ease);
}
body[data-skin="modern"] .tile:hover, body[data-skin="modern"] .tile-new:hover { background: var(--m-glass-2); transform: translateY(-2px); }
body[data-skin="modern"] .tile.on { background: var(--m-glass-3); }
body[data-skin="modern"] .tile-slot:has(.tile.on)::after { display: none; }
/* the picture: no margin, no inset, the tile's own top corners clip it */
body[data-skin="modern"] .tile-img { margin: 0; height: var(--m-tile-img); width: 100%; border-radius: 0;
background-color: var(--m-image-bed); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
body[data-skin="modern"] .tile.on .tile-img { background-color: var(--m-image-bed); }
body[data-skin="modern"] .tile.on .tile-count { background: transparent; }
body[data-skin="modern"] .tile-name { padding: .55rem .4rem .1rem; font-size: .58rem; color: var(--m-ink-2); border: 0; }
body[data-skin="modern"] .tile-count { border: 0; padding: 0 .4rem .6rem; font-size: 1.05rem; color: var(--m-ink); background: transparent; }
/* ---- the "new collection" tile: it IS the card (a form), so it takes the
sheet itself; a dashed inner well marks it as an empty slot ---- */
body[data-skin="modern"] .tile-new { flex-basis: var(--m-tile-w); position: relative; border: 0; margin-left: 10px; }
body[data-skin="modern"] .tile-new::before { content: ""; position: absolute; inset: 7px; border-radius: 12px; border: 1.5px dashed var(--m-line-2); pointer-events: none; }
body[data-skin="modern"] .tile-new > * { background: transparent; box-shadow: none; outline: none; border: 0; }
body[data-skin="modern"] .tile-new .tile-img { background-color: transparent; background-image: none; display: grid; place-items: center; }
body[data-skin="modern"] .tile-new .tile-img img { width: 1.8rem; height: 1.8rem; opacity: .7; filter: invert(1); }
body[data-skin="modern"][data-mode="light"] .tile-new .tile-img img, html.m-light body[data-skin="modern"][data-mode="system"] .tile-new .tile-img img { filter: none; opacity: .5; }
body[data-skin="modern"] .tile-new .tile-name { color: var(--m-ink-3); }
body[data-skin="modern"] .tile-new .tile-count { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; padding: .1rem .5rem .55rem; }
body[data-skin="modern"] .tile-new input { font-size: .66rem; padding: .35rem .5rem; border-radius: 999px; background: var(--m-field); border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); text-align: center; letter-spacing: .06em; }
body[data-skin="modern"] .tile-ctas { display: none; gap: .3rem; justify-content: center; flex-wrap: wrap; }
body[data-skin="modern"] .tile-new.is-open .tile-ctas, body[data-skin="modern"] .tile-edit .tile-ctas { display: flex; }
body[data-skin="modern"] .tile-new.is-open { flex-basis: 15rem; }
body[data-skin="modern"] .tile-new .tile-count { padding: .1rem .5rem .55rem; }
body[data-skin="modern"] .tile-cta { font-size: .56rem; padding: .32rem .6rem; letter-spacing: .06em; white-space: nowrap; line-height: 1; min-height: 0; height: auto; width: auto; }
body[data-skin="modern"] .tile-ctas .tile-cta { flex: 0 0 auto; }
body[data-skin="modern"] .tile-cta-go { background: var(--m-ink); color: var(--m-bg); }
/* ---- the mobile profile tabs: the welcome table's type — a number that
reads at a glance, a label with room to breathe ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .prail-nav a { min-height: 54px; padding: .5rem .3rem; }
body[data-skin="modern"] .prail-nav a::before { font-size: .64rem; letter-spacing: .1em; font-weight: 700; line-height: 1.15; color: var(--m-ink-2); }
body[data-skin="modern"] .prail-nav a.on::before { color: var(--m-ink); }
body[data-skin="modern"] .prail-nav a[data-count]::after { font-size: 1.05rem; font-weight: 400; color: var(--m-ink); margin-top: .1rem; line-height: 1.1; }
}
/* ---- the welcome masthead: no material at all, so it cannot band the backdrop ---- */
body[data-skin="modern"].is-welcome .masthead { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none; }
body[data-skin="modern"] .tile.on .tile-img, body[data-skin="modern"] .tile-img.tile-glyph { background-image: none; }
body[data-skin="modern"] .tile.on .tile-img img, body[data-skin="modern"] .tile-glyph img { opacity: .55; }
/* =====================================================================
REFINEMENTS VI — the collection tile's "…" control
===================================================================== */
/* the blanket ".tile-slot > *" rule above (full-bleed tiles) accidentally
overrode this form's own display:none with display:flex, so hovering an
active tile showed the rename field with no tap at all. Reassert it with
higher specificity — none by default, shown only while actively renaming. */
body[data-skin="modern"] .tile-slot > .tile-edit { display: none; }
body[data-skin="modern"] .tile-slot.is-renaming > .tile-edit { display: flex; flex-direction: column; gap: .5rem; }
body[data-skin="modern"] .tile-edit {
position: absolute; left: 0; right: 0; bottom: 0; background: var(--m-glass-3);
-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
border-top: 0; border-radius: 0 0 var(--m-r2) var(--m-r2); padding: .55rem .55rem .6rem;
box-shadow: inset 0 1px 0 var(--m-line);
}
body[data-skin="modern"] .tile-edit input {
background: var(--m-field); border: 0; color: var(--m-ink); border-radius: 999px; text-align: center;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); font-size: .68rem; letter-spacing: .06em;
text-transform: none; padding: .35rem .6rem;
}
/* the "…" itself: a small round glass badge at the tile's top-right, shown
for the active tile without needing a hover, or on hover of any tile —
never a persistent presence beyond that */
body[data-skin="modern"] .tile-ren {
top: 8px; right: 8px; left: auto; bottom: auto; z-index: 5;
width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
background: var(--m-glass-2); border-radius: 999px; box-shadow: inset 0 1px 0 var(--m-line);
color: var(--m-ink); font-size: .85rem; letter-spacing: 0; line-height: 1;
transition: opacity .18s var(--m-ease), background .15s var(--m-ease);
}
body[data-skin="modern"] .tile-ren:hover { color: var(--m-ink); background: var(--m-glass-3); }
body[data-skin="modern"] .tile-slot:hover .tile-ren,
body[data-skin="modern"] .tile-slot:has(.tile.on) .tile-ren,
body[data-skin="modern"] .tile-ren:focus-visible { opacity: 1; }
/* while the rename form is open, classic already hides both buttons —
modern inherits that via the shared opacity:0 rule; nothing more needed */
/* ---- the mobile nav's first tab reads just "All" in this skin; classic
keeps its two-line "All / Activity" label untouched ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] .prail-nav a[data-short-modern]::before { content: attr(data-short-modern); }
}
/* =====================================================================
REFINEMENTS VII — smoke, and motion that gives the glass something to do
===================================================================== */
/* ---- the signed-out masthead mark: dark on light, light on dark ---- */
body[data-skin="modern"] .masthead .mark { color: var(--m-ink-2); }
body[data-skin="modern"] .masthead .mark:hover { color: var(--m-ink); }
body[data-skin="modern"] .masthead .mark img { filter: invert(1) brightness(1.3); opacity: .9; }
body[data-skin="modern"][data-mode="light"] .masthead .mark img, html.m-light body[data-skin="modern"][data-mode="system"] .masthead .mark img { filter: brightness(.3) saturate(.5); opacity: 1; }
/* ---- light mode: the same smoke as dark. A coarser, lower-frequency
turbulence at higher opacity, blended so it reads as haze in the colour
fields rather than grit on top of them ---- */
body[data-skin="modern"][data-mode="light"]::before, html.m-light body[data-skin="modern"][data-mode="system"]::before {
opacity: .30; mix-blend-mode: multiply; background-size: 160px 160px, 620px 620px;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
/* ---- the smoke layer: a slow, continuous drift behind everything.
Two soft plumes and a wide turbulence, on their own fixed layer, moved
with transform only (no repaint of the gradients themselves). The drift is
60s per cycle — felt, not watched. ---- */
body[data-skin="modern"]::after {
content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
background-image:
radial-gradient(38% 30% at 30% 40%, rgba(255,255,255,.10), transparent 70%),
radial-gradient(30% 26% at 72% 62%, rgba(255,255,255,.07), transparent 70%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 900px 900px; mix-blend-mode: soft-light; opacity: .55;
animation: m-smoke 60s ease-in-out infinite alternate;
will-change: transform; transform: translate3d(var(--m-px, 0px), var(--m-py, 0px), 0) scale(1.04);
}
body[data-skin="modern"][data-mode="light"]::after, html.m-light body[data-skin="modern"][data-mode="system"]::after { mix-blend-mode: overlay; opacity: .5; }
@keyframes m-smoke {
0% { transform: translate3d(calc(var(--m-px, 0px) - 2%), calc(var(--m-py, 0px) - 1%), 0) scale(1.04) rotate(0deg); }
50% { transform: translate3d(calc(var(--m-px, 0px) + 1.5%), calc(var(--m-py, 0px) + 2%), 0) scale(1.08) rotate(.6deg); }
100% { transform: translate3d(calc(var(--m-px, 0px) + 2%), calc(var(--m-py, 0px) - 1.5%), 0) scale(1.05) rotate(-.4deg); }
}
body[data-skin="modern"] main { position: relative; z-index: 1; }
/* ---- arrival: the sheets settle into place on load, the way a visionOS
window appears — rising a few points and clearing, not sliding ---- */
@keyframes m-settle { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }
body[data-skin="modern"].m-arrive .card, body[data-skin="modern"].m-arrive .prail, body[data-skin="modern"].m-arrive .wtable,
body[data-skin="modern"].m-arrive .tile, body[data-skin="modern"].m-arrive .ens-tile, body[data-skin="modern"].m-arrive .post-box,
body[data-skin="modern"].m-arrive .timeline li, body[data-skin="modern"].m-arrive .ens-parts, body[data-skin="modern"].m-arrive .empty {
animation: m-settle .55s var(--m-ease) both; animation-delay: calc(var(--m-i, 0) * 45ms);
}
/* the pointer-following specular highlight was removed — it read as
distracting rather than as glass catching light. The lift and picture
parallax carry the depth cue instead. */
@media (prefers-reduced-motion: reduce) {
body[data-skin="modern"]::after { animation: none; }
body[data-skin="modern"].m-arrive .card, body[data-skin="modern"].m-arrive .prail, body[data-skin="modern"].m-arrive .wtable, body[data-skin="modern"].m-arrive .tile,
body[data-skin="modern"].m-arrive .ens-tile, body[data-skin="modern"].m-arrive .post-box, body[data-skin="modern"].m-arrive .timeline li { animation: none; }
}
/* ---- the masthead sign-in form on ANY signed-out page (not only /welcome):
the same field tokens as everywhere else, in both modes ---- */
body[data-skin="modern"] .masthead .signin input {
background: var(--m-field) !important; background-image: none !important; border: 0 !important; color: var(--m-ink);
border-radius: 999px; padding: .5rem .9rem; box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
}
body[data-skin="modern"] .masthead .signin input::placeholder { color: var(--m-ink-3); }
body[data-skin="modern"] .masthead .signin button, body[data-skin="modern"] .masthead .signin button.caps { color: var(--m-ink-2); background: transparent; }
body[data-skin="modern"] .masthead .signin button:hover { color: var(--m-ink); }
body[data-skin="modern"][data-mode="light"] .masthead .signin input, html.m-light body[data-skin="modern"][data-mode="system"] .masthead .signin input {
background: rgba(255,255,255,.62) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,22,28,.08);
}
/* =====================================================================
REFINEMENTS VIII — tilt, seamless smoke, follow cards, people lists
===================================================================== */
/* ---- 3D tilt: the sheet leans toward the pointer; the picture inside
drifts a little further, so the card has depth of its own ---- */
@media (hover: hover) {
/* the lift, not a tilt — rotation read as too much. Kept as its own rule
(rather than folding back into the plain :hover lift) so the picture
parallax below still has a hook to key off. */
body[data-skin="modern"] .card.m-tilt, body[data-skin="modern"] .card.m-tilt:hover,
body[data-skin="modern"] .ens-tile.m-tilt, body[data-skin="modern"] .ens-tile.m-tilt:hover,
body[data-skin="modern"] .post-box.m-tilt, body[data-skin="modern"] .post-box.m-tilt:hover {
transform: translateY(-2px);
transition: transform .18s var(--m-ease), box-shadow .22s var(--m-ease);
}
body[data-skin="modern"] .card:not(.m-tilt) { transition: transform .5s var(--m-ease), box-shadow .22s var(--m-ease); }
/* image parallax on hover removed — the card lifts, the picture stays still */
body[data-skin="modern"] .card .figure img { transition: transform .5s var(--m-ease); }
body[data-skin="modern"] .card .figure { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { body[data-skin="modern"] .m-tilt { transform: none; } body[data-skin="modern"] .m-tilt .figure img { transform: none; } }
/* ---- seamless smoke. feTurbulence stitches cleanly only when the tile
size × baseFrequency is a whole number; .004 × 900 was 3.6, which left a
hard edge on every repeat. Frequencies are now exact tile multiples, the
plumes are gradients (no tile at all), and a blur softens what remains. ---- */
body[data-skin="modern"]::after {
background-image:
radial-gradient(42% 34% at 28% 38%, rgba(255,255,255,.11), transparent 70%),
radial-gradient(34% 28% at 74% 64%, rgba(255,255,255,.08), transparent 70%),
radial-gradient(50% 40% at 50% 100%, rgba(255,255,255,.05), transparent 70%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, auto, 1000px 1000px;
}
/* the fine and coarse grain: same rule — 160 × .95 = 152 ✓, 420 needs 5/420, 620 needs 4/620 */
body[data-skin="modern"]::before {
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
body[data-skin="modern"][data-mode="light"]::before, html.m-light body[data-skin="modern"][data-mode="system"]::before {
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
/* ---- the follow card as glass ---- */
body[data-skin="modern"] .act-follow .follow-card { background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); }
body[data-skin="modern"] .act-follow .follow-who { color: var(--m-ink); }
body[data-skin="modern"] .act-follow .follow-who .avatar { box-shadow: 0 0 0 2px var(--m-line-2), 0 6px 18px -6px rgba(0,0,0,.5); }
body[data-skin="modern"] .act-follow .follow-verb, body[data-skin="modern"] .act-follow .follow-when { color: var(--m-ink-3); }
body[data-skin="modern"] .act-follow .follow-line { background: var(--m-accent); opacity: .6; }
/* ---- people lists (followers / following): glass rows ---- */
/* grid, not flex — but a grid item's default min-width:auto lets it grow to
its content, so the fixed-width chips were pushing the row past the feed.
The explicit track plus min-width:0 keeps each row at the feed's width. */
body[data-skin="modern"] .people { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
body[data-skin="modern"] .people li { min-width: 0; }
body[data-skin="modern"] .people li {
background: var(--m-glass); border: 0; border-radius: var(--m-r2); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); padding: .8rem 1rem .8rem .9rem;
transition: transform .22s var(--m-ease), background .18s var(--m-ease);
}
body[data-skin="modern"] .people li:hover { background: var(--m-glass-2); transform: translateY(-2px); }
body[data-skin="modern"] .person { color: var(--m-ink); }
body[data-skin="modern"] .person .avatar { width: 48px; height: 48px; box-shadow: 0 0 0 1px var(--m-line-2); }
body[data-skin="modern"] .person-name { font-size: .78rem; }
body[data-skin="modern"] .person-name em { color: var(--m-ink-3); }
body[data-skin="modern"] .people .btn3d, body[data-skin="modern"] .people button { padding: .5rem 1rem; font-size: .68rem; }
body[data-skin="modern"] .act-follow .follow-card {
border-radius: var(--m-r); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
padding: 1.2rem 1.5rem 1.1rem; max-width: 640px;
}
body[data-skin="modern"] .act-follow .follow-when { top: .75rem; right: 1.1rem; }
body[data-skin="modern"] .act-follow .follow-when { position: static; }
/* follow / following buttons in people lists and on profiles */
body[data-skin="modern"] .btn, body[data-skin="modern"] .people .btn {
background: var(--m-glass-2); background-image: none; border: 0; color: var(--m-ink); border-radius: 999px;
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.45); font-weight: 600; letter-spacing: .08em;
padding: .5rem 1.1rem; font-size: .68rem; text-shadow: none; transition: background .18s var(--m-ease);
}
body[data-skin="modern"] .btn:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .btn.btn-on { background: var(--m-ink); color: var(--m-bg); box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
body[data-skin="modern"] .btn.btn-on:hover { opacity: .9; }
/* the follow button on a profile's own rail: classic's .is-following rule is
a 3-class selector and outranks the plain .btn3d rule above on specificity
alone, so it was winning even here. Matched to override it — as real glass,
blurred, rather than the flat solid fill used for other confirmed states. */
body[data-skin="modern"] .prail-follow .btn3d {
background: var(--m-glass-2); background-image: none; border: 0; color: var(--m-ink);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.45); text-shadow: none;
transition: background .18s var(--m-ease);
}
body[data-skin="modern"] .prail-follow .btn3d:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .prail-follow .btn3d.is-following {
background: var(--m-glass-3); color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line-2), 0 6px 16px -6px rgba(0,0,0,.4);
}
body[data-skin="modern"] .prail-follow .btn3d.is-following:hover { background: var(--m-glass-2); }
html.m-light body[data-skin="modern"] .prail-follow .btn3d, body[data-skin="modern"][data-mode="light"] .prail-follow .btn3d {
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(30,40,60,.28);
}
html.m-light body[data-skin="modern"] .prail-follow .btn3d.is-following, body[data-skin="modern"][data-mode="light"] .prail-follow .btn3d.is-following {
background: var(--m-glass-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px -6px rgba(30,40,60,.24);
}
/* =====================================================================
REFINEMENTS X — dropdown legibility, z-order, chips
===================================================================== */
/* ---- dropdown menus were near-transparent: a blurred pane over a busy
backdrop with no opaque floor, so the list ran into the page behind it.
The fix is a heavier *material* — the modal-sheet token — rather than a
flat solid, so it still refracts and still reads as glass. ---- */
body[data-skin="modern"] .nf-drop-menu {
background: var(--m-sheet);
-webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line-2), 0 20px 50px -20px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.3);
border-radius: var(--m-r3); overflow: hidden; padding: .3rem;
}
/* Items are separated by a hairline, not wrapped in individual pills — the
pills read as unresolved buttons stacked inside a panel. Classic already
divides its options with a border-top; this follows the same idea. */
body[data-skin="modern"] .nf-drop-menu { padding: 0; }
body[data-skin="modern"] .nf-drop-menu label, body[data-skin="modern"] .nf-drop-menu a,
body[data-skin="modern"] .nf-drop-menu button, body[data-skin="modern"] .nf-opt {
color: var(--m-ink); border-radius: 0; box-shadow: none;
border-top: 1px solid var(--m-rule); background: transparent;
}
body[data-skin="modern"] .nf-drop-menu .nf-opt:first-child { border-top: 0; }
body[data-skin="modern"] .nf-drop-menu label:hover, body[data-skin="modern"] .nf-drop-menu a:hover,
body[data-skin="modern"] .nf-drop-menu button:hover, body[data-skin="modern"] .nf-opt:hover {
background: var(--m-glass-2);
}
body[data-skin="modern"] .nf-drop-menu input[type="text"] { background: var(--m-field); border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule); border-radius: 999px; }
/* ---- an open dropdown must clear the image picker beneath it. Both were
z-index:3, so the later element in the DOM (the picker) won. ---- */
body[data-skin="modern"] .nf-drop[open] { position: relative; z-index: 40; }
body[data-skin="modern"] .nf-drop-menu { z-index: 41; }
body[data-skin="modern"] .nf-drop[open] ~ * .img-pick,
body[data-skin="modern"] .nf-drop[open] ~ .nf-image .img-pick { z-index: 1; }
body[data-skin="modern"] .img-pick, body[data-skin="modern"] .img-arrow { z-index: 2; }
/* ---- stat chips as glass ---- */
body[data-skin="modern"] .statchip {
background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line); color: var(--m-ink);
}
body[data-skin="modern"] .statchip span { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .ens-tile-d {
display: block; color: var(--m-ink-2); font-size: .88rem; line-height: 1.4; margin-top: .3rem;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* the chips replace the old single-line piece count */
body[data-skin="modern"] .ens-tile .statchips { margin-top: .7rem; }
body[data-skin="modern"] .people .person-name { display: block; font-size: .78rem; margin: 0; color: var(--m-ink); }
/* ---- the standalone note/mark form sat flush against the left edge on a
phone. Classic pins it with `margin: 1rem var(--m-gutter) 2rem 0 !important`
— a right-only gutter, correct for classic because its icon rail occupies
the left. In this skin the rail is a floating bottom bar, so there is no
left rail to clear and the form should simply centre. ---- */
@media (max-width: 52rem) {
body[data-skin="modern"] main > .notecard-page {
margin: 1rem auto 2rem !important; padding: 0 .7rem 5.5rem !important; max-width: 34rem !important;
}
}
@media (min-width: 52.01rem) {
body[data-skin="modern"] main > .notecard-page { margin: 1.4rem auto 3rem !important; }
}
/* =====================================================================
SPECKS — dust in the light
---------------------------------------------------------------------
Two drifting fields of fine specks, sitting BEHIND the glass. That
placement is the point: every sheet already samples what's behind it
through backdrop-filter, so the specks bloom softly under a card and
stay crisp in the open. It reads as motes caught in light rather than
an overlay sprinkled on top.
Both layers live on html::before / html::after — the body's own
pseudo-elements are already the grain and the smoke. Each tile loops
by translating exactly one tile height, so there is no seam, and the
two tile sizes are coprime enough that their repeats never coincide.
Transform only: no repaint, no layout.
===================================================================== */
html:has(body[data-skin="modern"]) { --speck-far: 520px; --speck-near: 370px; }
html:has(body[data-skin="modern"])::before,
html:has(body[data-skin="modern"])::after {
content: ""; position: fixed; left: 0; right: 0; top: 0;
pointer-events: none; z-index: 0; background-repeat: repeat;
will-change: transform;
}
/* far field — small, dim, slow */
html:has(body[data-skin="modern"])::before {
height: calc(100% + var(--speck-far));
background-size: var(--speck-far) var(--speck-far);
background-image:
radial-gradient(1.1px 1.1px at 14% 22%, rgba(255,255,255,.55), transparent 100%),
radial-gradient(1px 1px at 63% 9%, rgba(255,255,255,.40), transparent 100%),
radial-gradient(1.3px 1.3px at 38% 51%, rgba(255,255,255,.50), transparent 100%),
radial-gradient(1px 1px at 86% 43%, rgba(255,255,255,.35), transparent 100%),
radial-gradient(1.1px 1.1px at 24% 77%, rgba(255,255,255,.45), transparent 100%),
radial-gradient(1px 1px at 71% 88%, rgba(255,255,255,.38), transparent 100%),
radial-gradient(1.2px 1.2px at 92% 68%, rgba(255,255,255,.42), transparent 100%);
opacity: .5;
animation: m-speck-far 92s linear infinite;
}
/* near field — a touch larger and brighter, faster, and it leans with the
pointer so the two fields separate in depth as you move */
html:has(body[data-skin="modern"])::after {
height: calc(100% + var(--speck-near));
background-size: var(--speck-near) var(--speck-near);
background-image:
radial-gradient(1.7px 1.7px at 31% 17%, rgba(255,255,255,.62), transparent 100%),
radial-gradient(1.5px 1.5px at 78% 36%, rgba(255,255,255,.50), transparent 100%),
radial-gradient(1.9px 1.9px at 52% 71%, rgba(255,255,255,.58), transparent 100%),
radial-gradient(1.5px 1.5px at 11% 59%, rgba(255,255,255,.45), transparent 100%),
radial-gradient(1.6px 1.6px at 89% 84%, rgba(255,255,255,.48), transparent 100%);
opacity: .55;
animation: m-speck-near 61s linear infinite;
}
@keyframes m-speck-far {
from { transform: translate3d(calc(var(--m-px, 0px) * .35), 0, 0); }
to { transform: translate3d(calc(var(--m-px, 0px) * .35), calc(-1 * var(--speck-far)), 0); }
}
@keyframes m-speck-near {
from { transform: translate3d(calc(var(--m-px, 0px) * .9), 0, 0); }
to { transform: translate3d(calc(var(--m-px, 0px) * .9), calc(-1 * var(--speck-near)), 0); }
}
/* in light mode a white speck is invisible, so the motes darken instead —
the same dust, lit from the other side */
html.m-light:has(body[data-skin="modern"][data-mode="system"])::before,
html:has(body[data-skin="modern"][data-mode="light"])::before { opacity: .30; filter: invert(1); }
html.m-light:has(body[data-skin="modern"][data-mode="system"])::after,
html:has(body[data-skin="modern"][data-mode="light"])::after { opacity: .26; filter: invert(1); }
@media (prefers-reduced-motion: reduce) {
html:has(body[data-skin="modern"])::before,
html:has(body[data-skin="modern"])::after { animation: none; }
}
/* ---- travel-mark cards: the location line and the street address had no
modern rules at all, so they fell through to classic's --gold (#d9b859
darkened by its own opacity) and --ink-soft (#949494) — greys chosen for a
white paper card, and muddy on dark glass. Given this skin's own ink. ---- */
body[data-skin="modern"] .mark-where { color: var(--m-accent); opacity: 1; }
body[data-skin="modern"] .mark-address { color: var(--m-ink-2); }
body[data-skin="modern"] .mark-hint { color: var(--m-ink-3); }
/* ---- Remaining classic-token leaks in this skin. Each of these had no
modern rule, so it inherited a colour picked for classic's white paper:
near-black breadcrumbs, mid-grey chevrons and edit links, and the light
accent on links. All given this skin's own ink. ---- */
body[data-skin="modern"] .crumb-here { color: var(--m-ink); }
body[data-skin="modern"] .card-edit, body[data-skin="modern"] .prail-nav a > span,
body[data-skin="modern"] .feednav a > span { color: var(--m-ink-3); }
body[data-skin="modern"] .settings li, body[data-skin="modern"] .settings-table li { color: var(--m-ink-2); }
body[data-skin="modern"] .seg-btn { color: var(--m-ink-2); }
body[data-skin="modern"] .seg-btn.on { color: var(--m-bg); }
body[data-skin="modern"] .fine a, body[data-skin="modern"] .fine.center a { color: var(--m-accent); }
/* =====================================================================
The backdrop moves onto its own fixed layer.
---------------------------------------------------------------------
It was painted on with background-attachment: fixed, which ties
the gradient geometry to the VIEWPORT height. Safari's viewport (URL bar
plus toolbar) is shorter than a home-screen app's, so the identical page
resolved to visibly different colour in each — measured at 13 RGB levels
apart at the same on-screen point.
Sizing this layer in `lvh` (the viewport with browser chrome retracted)
makes the two agree: standalone has no retractable chrome, and Safari's
lvh equals that same full height. vh is kept as a fallback.
===================================================================== */
body[data-skin="modern"] > .m-backdrop {
position: fixed; left: 0; top: 0; width: 100vw;
height: 100vh; height: 100lvh; /* lvh = chrome-retracted height; standalone matches it */
z-index: -1; pointer-events: none;
background-color: var(--m-bg);
background-image: var(--m-fields); /* the field stack, held as a custom property */
background-size: auto; background-repeat: no-repeat; background-attachment: scroll;
}
/* body now paints only the flat base — the fields belong to the layer, so
nothing is painted twice and nothing depends on document height */
body[data-skin="modern"] { background-image: none; background-attachment: scroll; }
/* =====================================================================
PATINA — dust settling on things you own
---------------------------------------------------------------------
Discrete specks, not a wash. An earlier turbulence-and-mottle version
lifted the card's mean luminance by 35 levels across the range, so a
well-worn note read as a paler panel rather than a dustier one. This
version is a field of individual motes: the space between them is fully
transparent, so the sheet's own tone is untouched and only the specks
accumulate.
Age raises two things together — the specks get more opaque, and the tile
shrinks so they sit denser. The glass fill, blur and edge are untouched.
The tier is emitted server-side and only for the owner, so a card in
someone else's feed carries no attribute at all.
===================================================================== */
body[data-skin="modern"] .note[data-patina] .card { position: relative; }
body[data-skin="modern"] .note[data-patina] .card::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
border-radius: inherit; opacity: var(--patina-o, 0);
background-size: var(--patina-tile, 200px) var(--patina-tile, 200px);
/* One texture, both polarities. Some motes catch the light and some occlude
it, so the field reads as particles sitting ABOVE the sheet rather than as
marks printed on it — and it needs no inversion between modes, because
whichever way the backdrop goes, half the specks still register.
Several light motes carry a dark companion offset a fraction down-right:
a highlight with its own shadow is what gives a speck relief. */
background-image:
radial-gradient(1.49px 1.49px at 79.2% 11.3%, rgba(226,187,200,0.50) 0%, rgba(226,187,200,0.50) 45%, transparent 100%),
radial-gradient(1.94px 1.94px at 0.2% 41.1%, rgba(68,97,86,0.42) 0%, rgba(68,97,86,0.42) 45%, transparent 100%),
radial-gradient(1.11px 1.11px at 31.0% 70.6%, rgba(203,238,225,0.61) 0%, rgba(203,238,225,0.61) 45%, transparent 100%),
radial-gradient(0.66px 0.66px at 92.3% 40.3%, rgba(90,63,42,0.66) 0%, rgba(90,63,42,0.66) 45%, transparent 100%),
radial-gradient(2.88px 2.88px at 81.8% 1.0%, rgba(184,196,150,0.77) 0%, rgba(184,196,150,0.77) 45%, transparent 100%),
radial-gradient(0.45px 0.45px at 96.8% 77.0%, rgba(98,127,207,0.36) 0%, rgba(98,127,207,0.36) 45%, transparent 100%),
radial-gradient(1.55px 1.55px at 40.3% 9.3%, rgba(152,125,89,0.41) 0%, rgba(152,125,89,0.41) 45%, transparent 100%),
radial-gradient(4.90px 4.90px at 78.8% 74.5%, rgba(110,137,191,0.62) 0%, rgba(110,137,191,0.62) 32%, transparent 100%),
radial-gradient(0.45px 0.45px at 53.0% 19.0%, rgba(228,174,180,0.66) 0%, rgba(228,174,180,0.66) 45%, transparent 100%),
radial-gradient(0.44px 0.44px at 32.3% 14.8%, rgba(139,156,190,0.77) 0%, rgba(139,156,190,0.77) 45%, transparent 100%),
radial-gradient(1.39px 1.39px at 16.3% 90.9%, rgba(217,189,228,0.75) 0%, rgba(217,189,228,0.75) 45%, transparent 100%),
radial-gradient(3.85px 3.85px at 15.0% 63.5%, rgba(144,165,130,0.58) 0%, rgba(144,165,130,0.58) 32%, transparent 100%),
radial-gradient(1.00px 1.00px at 19.1% 82.3%, rgba(223,200,151,0.73) 0%, rgba(223,200,151,0.73) 45%, transparent 100%),
radial-gradient(0.53px 0.53px at 78.4% 75.7%, rgba(93,66,46,0.71) 0%, rgba(93,66,46,0.71) 45%, transparent 100%),
radial-gradient(0.47px 0.47px at 39.3% 53.6%, rgba(206,191,163,0.54) 0%, rgba(206,191,163,0.54) 45%, transparent 100%),
radial-gradient(5.06px 5.06px at 18.9% 53.1%, rgba(72,84,64,0.33) 0%, rgba(72,84,64,0.33) 32%, transparent 100%),
radial-gradient(0.59px 0.59px at 25.0% 25.0%, rgba(232,219,192,0.45) 0%, rgba(232,219,192,0.45) 45%, transparent 100%),
radial-gradient(1.12px 1.12px at 52.7% 42.5%, rgba(150,188,218,0.57) 0%, rgba(150,188,218,0.57) 45%, transparent 100%),
radial-gradient(2.26px 2.26px at 46.2% 61.9%, rgba(106,131,203,0.43) 0%, rgba(106,131,203,0.43) 45%, transparent 100%),
radial-gradient(6.47px 6.47px at 0.6% 14.0%, rgba(123,146,108,0.22) 0%, rgba(123,146,108,0.22) 32%, transparent 100%),
radial-gradient(2.22px 2.22px at 59.2% 71.1%, rgba(236,196,209,0.77) 0%, rgba(236,196,209,0.77) 45%, transparent 100%),
radial-gradient(1.28px 1.28px at 98.0% 76.4%, rgba(42,82,89,0.50) 0%, rgba(42,82,89,0.50) 45%, transparent 100%),
radial-gradient(0.64px 0.64px at 99.7% 84.1%, rgba(90,63,90,0.49) 0%, rgba(90,63,90,0.49) 45%, transparent 100%),
radial-gradient(1.20px 1.20px at 57.9% 15.7%, rgba(232,198,209,0.65) 0%, rgba(232,198,209,0.65) 45%, transparent 100%),
radial-gradient(1.37px 1.37px at 63.0% 37.1%, rgba(147,164,135,0.53) 0%, rgba(147,164,135,0.53) 45%, transparent 100%),
radial-gradient(0.82px 0.82px at 49.8% 22.3%, rgba(224,175,191,0.35) 0%, rgba(224,175,191,0.35) 45%, transparent 100%);
}
/* the same two inks in both modes — the texture is not re-polarised */
body[data-skin="modern"] .note[data-patina] .card {
--dust-hi: rgba(255,255,255,.90);
--dust-lo: rgba(26,24,20,.72);
}
/* new · a day · a week · three months · a year · three years and beyond
— opacity climbs and the tile shrinks, so the dust both deepens and thickens */
body[data-skin="modern"] .note[data-patina="1"] .card { --patina-o: 0.07; --patina-tile: 560px; }
body[data-skin="modern"] .note[data-patina="2"] .card { --patina-o: 0.13; --patina-tile: 480px; }
body[data-skin="modern"] .note[data-patina="3"] .card { --patina-o: 0.24; --patina-tile: 410px; }
body[data-skin="modern"] .note[data-patina="4"] .card { --patina-o: 0.42; --patina-tile: 340px; }
body[data-skin="modern"] .note[data-patina="5"] .card { --patina-o: 0.7; --patina-tile: 280px; }
body[data-skin="modern"] .note[data-patina="6"] .card { --patina-o: 1; --patina-tile: 235px; }
/* the picture keeps its own surface; dust settles on the card, not the photo */
/* dust settles on the card surface only: every child of the card — the
picture, the text, the tags, the owned row, the buttons — sits above it */
body[data-skin="modern"] .note[data-patina] .card > *:not(.warrant-seal) { position: relative; z-index: 2; }
body[data-skin="modern"] .note[data-patina] .card > .warrant-seal { z-index: 2; } /* keeps its absolute placement */
/* ---- the warrant seal presses in after the card has settled ---- */
@keyframes m-seal-press {
0% { opacity: 0; transform: translateY(-14px) scale(1.06); filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
60% { opacity: 1; transform: translateY(1px) scale(1); filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
100% { opacity: 1; transform: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
}
body[data-skin="modern"].m-arrive .note .warrant-seal {
animation: m-seal-press .62s var(--m-ease) both;
animation-delay: calc(var(--m-i, 0) * 45ms + 340ms); /* after its own card lands */
}
@media (prefers-reduced-motion: reduce) {
body[data-skin="modern"].m-arrive .note .warrant-seal { animation: none; }
}
/* ---- check-in rows: the edit/delete actions sit on the date's line.
`top: 0` anchors to the li's border box, but the date begins one padding
step lower — so the actions floated 13px above it. Anchoring to the same
padding edge and giving the box the date's own line height centres them. */
body[data-skin="modern"] .timeline li > .tl-date { padding-right: 4.2rem; }
body[data-skin="modern"] .tl-actions {
top: 1rem; bottom: auto; height: 1rem; align-items: center;
}
body[data-skin="modern"] .strip .strip-sub { color: var(--m-ink-3); opacity: 1; }
/* ---- resurfacing in the modern skin: the eyebrow in the accent, and the
card beneath given a hair more lift than its neighbours — chosen, not
merely next. ---- */
body[data-skin="modern"] .resurface-eyebrow { color: var(--m-accent); opacity: 1; }
body[data-skin="modern"] .resurface-eyebrow::before, body[data-skin="modern"] .resurface-eyebrow::after { color: var(--m-ink-3); }
/* The eyebrow is an editorial voice, not post metadata. Organic cards use
tracked small caps for their bylines, so small caps here read as more of
the same. Instead: a fleuron, then the kicker in Chaparral italic at reading
size, then the fact in roman beneath — left-set inside the frame, with a
short hairline under it before the card. Nothing large, nothing new. */
body[data-skin="modern"] .resurface-eyebrow {
text-align: center; text-transform: none; letter-spacing: 0; font-weight: 400;
font-size: 1.02rem; font-style: italic; color: var(--m-ink); margin: .1rem .25rem 1rem;
padding-bottom: .7rem; border-bottom: 1px solid var(--m-rule);
}
body[data-skin="modern"] .resurface-eyebrow::before { content: "\2767\00a0\00a0"; font-style: normal; color: var(--m-accent); }
body[data-skin="modern"] .resurface-eyebrow .fact {
display: block; font-style: normal; font-size: .8rem; letter-spacing: .01em;
color: var(--m-ink-2); opacity: 1; margin: .2rem 0 0;
}
body[data-skin="modern"] .resurface-eyebrow a { color: inherit; }
/* ---- The segmented tab bar read as though two tabs were selected. Nothing
was wrong with the state — only one ever carries .on — but the bar is
translucent, and the backdrop beneath it is much brighter under the left
third than the middle (measured 87 vs 65). That variance alone was within
17 levels of the genuinely selected tab, so the left segment looked lit.
Two corrections: the track gets its own slightly denser, even fill so the
field behind stops showing through as segments, and the selected pill is
made unmistakable rather than merely lighter. ---- */
body[data-skin="modern"] .vis-tabs {
background: var(--m-glass-2);
-webkit-backdrop-filter: blur(34px) saturate(150%); backdrop-filter: blur(34px) saturate(150%);
}
/* The selected pill stays glass — a solid ink fill read as a black slab in
light mode and broke the skin's material logic. The separation problem it
was solving is already handled by the denser track above: with the backdrop
no longer showing through as segments, the glass pill plus its edge
highlight is enough to be unambiguous. */
body[data-skin="modern"] .vis-tabs a.on {
background: var(--m-glass-3); color: var(--m-ink); font-weight: 700;
box-shadow: inset 0 1px 0 var(--m-line-2), 0 2px 10px -4px rgba(0,0,0,.35);
}
body[data-skin="modern"] .vis-tabs a:not(.on) { color: var(--m-ink-2); background: transparent; }
body[data-skin="modern"] .vis-tabs a:not(.on):hover { color: var(--m-ink); background: var(--m-glass); }
/* ---- Profile rail nav: the highlight pills met edge to edge, so an active
item touched its neighbours. Given breathing room and a tighter pill. ---- */
@media (min-width: 52.01rem) {
body[data-skin="modern"] .prail-nav { display: grid; gap: .3rem; }
body[data-skin="modern"] .prail-nav li { margin: 0; }
body[data-skin="modern"] .prail-nav li a { padding-top: .62rem; padding-bottom: .62rem; border-radius: 14px; }
}
/* =====================================================================
PROVENANCE COLOPHON — the whole composition is the watermark
---------------------------------------------------------------------
Not faint text behind a solid logo: heading, device, rules, labels and
values all sit at ONE opacity, directly on the atmospheric field with no
glass, no panel and no elevation beneath them. The backdrop's specks and
smoke remain visible through it, which is the point — the history reads as
impressed into the substrate rather than printed on a surface.
The opacity is a token per mode so the two can be tuned independently;
light sits closer to its legibility floor than dark does.
===================================================================== */
body[data-skin="modern"] { --m-colophon: .30; }
body[data-skin="modern"][data-mode="light"], html.m-light body[data-skin="modern"][data-mode="system"] { --m-colophon: .26; }
body[data-skin="modern"] .colophon {
color: var(--m-ink); opacity: var(--m-colophon);
background: none; box-shadow: none; backdrop-filter: none; border: 0;
}
/* The device is struck at exactly the text's value — pure white in dark,
pure black in light — so the whole colophon is one ink. Any brightness
boost here makes the mark read as a logo sitting on top of the watermark
rather than as part of it. */
body[data-skin="modern"] .colophon { color: #fff; }
body[data-skin="modern"] .colo-mark { filter: invert(1); opacity: 1; width: 26px; }
body[data-skin="modern"][data-mode="light"] .colophon, html.m-light body[data-skin="modern"][data-mode="system"] .colophon { color: #000; }
body[data-skin="modern"][data-mode="light"] .colo-mark, html.m-light body[data-skin="modern"][data-mode="system"] .colo-mark { filter: brightness(0); }
/* Desktop: editorial marginalia in the right-hand margin, outside the note's
glass. Set low rather than aligned to the card's top edge — aligned high it
reads as a sidebar; low it reads as a note in the margin. It scrolls with
the page; it is not pinned. */
/* The feed column runs fluid to the viewport edge, so there is no margin to
put marginalia in — measured at 1400px the column ended 34px from the edge.
On the canonical record page only (identified by the colophon's own
presence, so no new body class is needed) the column yields a strip of
width for it. The note stays dominant; the strip is otherwise empty. */
@media (min-width: 78rem) {
/* The note's side column: Similar notes first, the colophon beneath it.
A real grid column, not an absolutely-placed box -- that is what made the
colophon hug the right edge in Safari and needed JS to place it. */
body[data-skin="modern"] .profile-feed.has-colophon {
/* minmax so the note column can give way on a narrow desktop rather than
forcing the page wider than the viewport */
display: grid; grid-template-columns: minmax(0, 42rem) minmax(20rem, 30rem); column-gap: 2rem;
justify-content: start; align-items: start; padding-right: 0; position: static;
}
body[data-skin="modern"] .profile-feed.has-colophon > * { grid-column: 1; min-width: 0; }
body[data-skin="modern"] .profile-feed.has-colophon > .strip { grid-column: 1 / -1; grid-row: 1; }
body[data-skin="modern"] .profile-feed.has-colophon > .note-side {
grid-column: 2; grid-row: 2 / span 999; align-self: start;
display: flex; flex-direction: column; align-items: stretch; gap: 1.6rem;
}
body[data-skin="modern"] .note-side > .colophon {
position: static; top: auto; right: auto; width: auto;
margin: 0 auto; padding: 0 1.25rem;
}
}
/* Below that, it reflows to the foot of the page under the comments, keeping
the same composition — not a timeline, not an accordion, not a card. */
/* The reveal: opacity only, the whole block as one object, after everything
else has settled. No stagger, no translation, no scale. */
@keyframes m-colophon-in { from { opacity: 0; } to { opacity: var(--m-colophon); } }
body[data-skin="modern"] .colophon { animation: m-colophon-in 1400ms ease-out 900ms both; }
@media (prefers-reduced-motion: reduce) {
body[data-skin="modern"] .colophon { animation: none; opacity: var(--m-colophon); }
}
/* ---- the resurfacing frame: the same translucent container the itinerary
block uses on a travel-mark page, given rounded corners. Enough to offset
the record from the organic column beneath it; not so much that it competes
with the card it holds. ---- */
/* The visit-log material from a travel-mark page: a flat, faintly tinted
box. No blur, no inset highlight, no drop shadow, no 3D — just enough tint
to set the frame apart from the column beneath it. Rounded corners are the
one addition over the reference. */
body[data-skin="modern"] .resurface {
background: rgba(0,0,0,.035); background-image: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: none; border-radius: var(--m-r);
}
body[data-skin="modern"] .resurface-eyebrow { margin: .15rem 0 .85rem; }
/* the card inside keeps its own material; it is held, not restyled */
body[data-skin="modern"] .resurface-body .note { max-width: none; }
@media (max-width: 52rem) {
body[data-skin="modern"] .resurface { padding: .85rem .7rem .9rem; }
}
/* ---- the comment form's button: a solid ink pill read as a black slab in
light and a white one in dark. The follow button's glass pill is the right
weight for a secondary action like this. ---- */
body[data-skin="modern"] .comment-form .nf-post {
background: var(--m-glass-2); background-image: none; color: var(--m-ink);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35);
}
body[data-skin="modern"] .comment-form .nf-post:hover { background: var(--m-glass-3); }
/* ---- light mode: the fixed search bar's scrim was the same glass as the
dark skin's, which sat heavy over a pale backdrop. Lighter and whiter,
nearer the signed-out masthead; dark mode is untouched. ---- */
body[data-skin="modern"][data-mode="light"] .searchbar, html.m-light body[data-skin="modern"][data-mode="system"] .searchbar {
/* the signed-out masthead sits at .5; the signed-in bar was heavier at .78 */
background: rgba(255,255,255,.5) !important;
box-shadow: inset 0 -1px 0 rgba(20,22,28,.06), 0 8px 30px -22px rgba(30,40,60,.25);
}
/* ---- The Warrant CTA needed repeated taps. An invisible seal (opacity 0,
34x52) sits over it with pointer-events: auto, so clicks landing on that
patch hit the seal instead — and the handler ignores the seal until the
control is already warranted, so nothing happened. The seal only becomes a
target once there is a Warrant to withdraw. The CTA also gets a taller hit
area than its 15px text box. ---- */
body[data-skin="modern"] .nf-warrant:not(.is-warranted) .warrant-seal-form,
.nf-warrant:not(.is-warranted) .warrant-seal-form { pointer-events: none; }
body[data-skin="modern"] .nf-warrant-cta {
position: relative; z-index: 3; padding: .5rem .3rem; margin: -.5rem -.3rem; cursor: pointer;
}
body[data-skin="modern"] .nf-warrant.is-warranted .warrant-seal-form { cursor: pointer; z-index: 4; }
/* ---- Patina is a tiled field, so two aged cards stacked in a feed showed
the identical constellation. Each card offsets the tile by an amount
derived from its own record id — deterministic, so it does not reshuffle
on reload, but different from its neighbour. ---- */
body[data-skin="modern"] .note[data-patina] .card::before {
background-position: var(--patina-x, 0) var(--patina-y, 0);
}
/* =====================================================================
Welcome page and signed-out rail
===================================================================== */
/* Enter is `.btn.splash-enter`, not `.nf-post` — the earlier rule was styling
the hidden Install button and never touched this one. The glass pill the
skin uses for a primary action. */
body[data-skin="modern"].is-welcome .splash-enter {
background: var(--m-glass-2); background-image: none; color: var(--m-ink); border: 0;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 8px 22px -10px rgba(0,0,0,.45);
border-radius: 999px; text-shadow: none;
}
body[data-skin="modern"].is-welcome .splash-enter:hover { background: var(--m-glass-3); }
body[data-skin="modern"].is-welcome .splash-install .nf-post {
background: var(--m-glass-2); background-image: none; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line); border-radius: 999px;
}
/* The sign-in form on the welcome page sits without the fixed masthead, so it
was left to fall where it may. Pinned to the same top-right position it
holds on the signed-out home, with the masthead's own field and spacing. */
body[data-skin="modern"].is-welcome .masthead .signin,
body[data-skin="modern"].is-welcome .signin {
display: flex; align-items: center; gap: .45rem;
}
body[data-skin="modern"].is-welcome .signin input {
background: var(--m-field); border: 0; color: var(--m-ink);
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
border-radius: 999px; padding: .5rem .85rem; font-size: .8rem; line-height: 1.2; height: auto;
}
body[data-skin="modern"].is-welcome .signin input::placeholder { color: var(--m-ink-3); }
/* The signed-out home renders this as a bare `.link.caps` — transparent, no
radius, no padding. Matched here; the pill was mine and did not belong. */
body[data-skin="modern"].is-welcome .signin button {
background: none; border: 0; box-shadow: none; border-radius: 0;
padding: 0 .2rem; color: var(--m-ink-2); font-size: .68rem; letter-spacing: .14em;
}
body[data-skin="modern"].is-welcome .signin button:hover { background: none; color: var(--m-ink); }
@media (min-width: 52.01rem) {
body[data-skin="modern"].is-welcome .masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
/* the wordmark is hidden here, so the sign-in is the only child and
space-between left-aligned it; push it to the right edge explicitly */
body[data-skin="modern"].is-welcome .masthead .wrap { display: flex; align-items: center; justify-content: flex-end; }
body[data-skin="modern"].is-welcome .masthead .signin { margin-left: auto; }
}
/* the fields set the row's height; the link is centred against them by the
flex row rather than being stretched to match */
body[data-skin="modern"].is-welcome .signin input {
height: 2.1rem; box-sizing: border-box;
}
body[data-skin="modern"].is-welcome .signin { align-items: center; }
body[data-skin="modern"].is-welcome .signin button { align-self: center; height: auto; }
/* the classic sheet gives these their own margins, which pushed the button off
the inputs' centre line even once the heights matched */
body[data-skin="modern"].is-welcome .signin input,
body[data-skin="modern"].is-welcome .signin button { margin: 0; vertical-align: middle; }
/* The invite-code block in the signed-out rail: the resurfacing frame's flat,
faintly tinted container, and a field that belongs to the current mode
rather than carrying classic's white input. */
body[data-skin="modern"] .signup {
background: rgba(0,0,0,.035); background-image: none; box-shadow: none; border: 0;
border-radius: var(--m-r); padding: 1rem 1rem 1.1rem;
}
body[data-skin="modern"][data-mode="light"] .signup, html.m-light body[data-skin="modern"][data-mode="system"] .signup {
background: rgba(20,22,28,.04);
}
body[data-skin="modern"] .signup .lbl { color: var(--m-ink-2); }
/* The profile rail's identity lockup (avatar, handle, bio, site) sits in the
same flat, faintly tinted container as the invite-code block above. */
body[data-skin="modern"] .prail-id {
background: rgba(0,0,0,.035); border-radius: var(--m-r); padding: 1rem 1rem 1.1rem;
}
body[data-skin="modern"][data-mode="light"] .prail-id, html.m-light body[data-skin="modern"][data-mode="system"] .prail-id {
background: rgba(20,22,28,.04);
}
/* the last line's own bottom margin would otherwise add dead space inside */
body[data-skin="modern"] .prail-id > :last-child { margin-bottom: 0; }
/* On mobile the identity box sits a step inside the note and mark cards
below it (24px each side, where the cards are 12px), so it reads as a
header to the column rather than another card in it. */
@media (max-width: 52rem) {
body[data-skin="modern"] .prail-id { margin: 0 24px; }
}
body[data-skin="modern"] .signup input {
background: var(--m-field); border: 0; color: var(--m-ink); border-radius: 999px;
box-shadow: inset 0 1px 0 var(--m-line), inset 0 0 0 1px var(--m-rule);
padding: .55rem .9rem;
}
body[data-skin="modern"] .signup input::placeholder { color: var(--m-ink-3); }
body[data-skin="modern"] .signup .btn3d {
background: var(--m-glass-2); background-image: none; color: var(--m-ink); border: 0;
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35); text-shadow: none;
}
body[data-skin="modern"] .signup .btn3d:hover { background: var(--m-glass-3); }
/* =====================================================================
Itinerary — Modern Glass paint. Three surfaces by resolution: a resolved
mark is the familiar glass card; an unresolved or experiential stop is the
flat visit-log tint; open time is bare text. The spine and nodes are the
check-in timeline's own.
===================================================================== */
body[data-skin="modern"] .itin-when { color: var(--m-ink-2); }
body[data-skin="modern"] .itin-ctx { color: var(--m-ink-2); }
body[data-skin="modern"] .itin-conflict { color: var(--m-ink-2); border-left-color: var(--m-accent); }
body[data-skin="modern"] .itin-day b { color: var(--m-ink); }
body[data-skin="modern"] .itin-day span:not(.rule) { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itin-day .rule { background: var(--m-rule); opacity: 1; }
body[data-skin="modern"] .itin-day-loose b { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itin-tl .stop::before { background: var(--m-ink-3); box-shadow: 0 0 0 3px var(--m-bg); opacity: 1; }
body[data-skin="modern"] .itin-tl .stop.is-mark.is-seq::before { background: var(--m-accent); }
body[data-skin="modern"] .itin-tl .stop:not(.is-seq)::before { opacity: .35; }
body[data-skin="modern"] .itin-tl .stop.is-seq + .stop.is-seq::after { background: var(--m-rule); opacity: 1; }
body[data-skin="modern"] .stop-when { color: var(--m-ink-2); opacity: 1; }
body[data-skin="modern"] .stop-withheld, body[data-skin="modern"] .stop-from { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .stop-loose { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .stop-loose, html.m-light body[data-skin="modern"][data-mode="system"] .stop-loose { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .stop-loose .stop-label { color: var(--m-ink-2); }
body[data-skin="modern"] .stop-loose.is-unres .stop-label { text-decoration-color: var(--m-ink-3); }
body[data-skin="modern"] .stop-open .stop-label { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .stop-menu > summary { color: var(--m-ink-2); }
body[data-skin="modern"] .stop-sheet { background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .stop-handle { color: var(--m-ink-2); }
body[data-skin="modern"] .stop.drop-before { box-shadow: 0 -2px 0 0 var(--m-accent); }
body[data-skin="modern"] .itin-tl.drop-into { outline-color: var(--m-accent); }
body[data-skin="modern"] .itin-page .btn { background: var(--m-glass-2); color: var(--m-ink); border: 0; border-radius: 999px;
box-shadow: inset 0 1px 0 var(--m-line); padding: .5rem 1.1rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
body[data-skin="modern"] .itin-page .btn:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .itin-actions { border-top: 1px solid var(--m-rule); }
body[data-skin="modern"] .itin-day-hint { color: var(--m-accent); }
/* the day container: the same flat tint as the visit log and the resurfacing
frame -- no blur, no highlight, no shadow */
body[data-skin="modern"] .itin-group { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .itin-group, html.m-light body[data-skin="modern"][data-mode="system"] .itin-group { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .itin-tl .stop::before { box-shadow: none; }
/* the intention card takes the mark card's material exactly; only its
contents differ */
body[data-skin="modern"] .stop-card { color: var(--m-ink); }
body[data-skin="modern"] .stop-eb { color: var(--m-ink-2); opacity: 1; }
body[data-skin="modern"] .stop-card.is-unres .stop-label { text-decoration-color: var(--m-ink-3); }
body[data-skin="modern"] .stop-card .stop-from, body[data-skin="modern"] .stop-card .stop-note { color: var(--m-ink-3); opacity: 1; }
/* the add row: field and button in the same glass, at the same height; the
button is the skin's pill, not an unstyled control */
body[data-skin="modern"] .stop-add-open { background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line); border-radius: var(--m-r2); }
body[data-skin="modern"] .stop-add-open:hover { background: var(--m-glass-2); }
body[data-skin="modern"] .stop-add-form input[name="label"], body[data-skin="modern"] body[data-skin="modern"] /* listing previews: only the header and the count are the listing's own;
everything inside the body is the article page's rendering untouched */
body[data-skin="modern"] .itp { color: var(--m-ink); }
body[data-skin="modern"] .itp-when-top { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itp-ctx { color: var(--m-ink-2); opacity: 1; }
body[data-skin="modern"] .itp-more { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itp-empty { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itp-head, body[data-skin="modern"] .itp-head:hover { color: var(--m-ink); text-decoration: none; }
body[data-skin="modern"] .itp-more:hover { color: var(--m-ink); }
body[data-skin="modern"] .itin-new .itin-start {
background: var(--m-glass-2); background-image: none; color: var(--m-ink); border: 0; border-radius: 999px;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35); }
body[data-skin="modern"] .itin-new .itin-start:hover { background: var(--m-glass-3); }
/* itinerary forms inherit the mark form's field paint. Only the additions are
painted here: the When button as the skin's glass pill, and the primary
buttons as the comment form's glass primary. */
body[data-skin="modern"] .itin-when-btn { background: var(--m-glass-2); color: var(--m-ink); border: 0; border-radius: 999px;
box-shadow: inset 0 1px 0 var(--m-line); padding: .55rem 1.1rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
body[data-skin="modern"] .itin-when-btn:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .itin-new .nf-post, body[data-skin="modern"] .day-form .nf-post,
body[data-skin="modern"] .stop-form .nf-post, body[data-skin="modern"] .stop-add-form .nf-post {
background: var(--m-glass-2); background-image: none; color: var(--m-ink); border: 0; border-radius: 999px;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35); }
body[data-skin="modern"] .itin-new .nf-post:hover, body[data-skin="modern"] .day-form .nf-post:hover,
body[data-skin="modern"] .stop-form .nf-post:hover, body[data-skin="modern"] .stop-add-form .nf-post:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .stop-sheet { background: none; box-shadow: none; padding: 0; }
body[data-skin="modern"] .stop-sheet .stop-links { padding: .4rem .3rem 0; }
/* welcome cells inside .wcells: the same quiet chips, re-declared because the
originals target direct children of .wtable */
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcells > .wcell {
border: 0; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
transition: background .18s var(--m-ease); }
body[data-skin="modern"][data-mode="light"] .rail .wtable:not(.settings-table) .wcells > .wcell,
html.m-light body[data-skin="modern"][data-mode="system"] .rail .wtable:not(.settings-table) .wcells > .wcell {
background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcells > a.wcell:hover,
body[data-skin="modern"] .rail .wtable:not(.settings-table) .wcells > .wcell:active { background: var(--m-glass-2); }
body[data-skin="modern"] .wtable .wcells > .wcell { border-bottom: 0; border-right: 0; }
/* the shell in Modern Glass: the flat tint that held each day now holds the
whole itinerary; days inside carry only their heading rule */
body[data-skin="modern"] .itin-shell { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .itin-shell, html.m-light body[data-skin="modern"][data-mode="system"] .itin-shell { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .itin-shell .itin-head .ens-title { color: var(--m-ink); }
body[data-skin="modern"] .itin-priv { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .itp-head.itin-head:hover .ens-title { color: var(--m-ink); }
body[data-skin="modern"] .itin-map { box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); }
body[data-skin="modern"] .itin-map .pin { fill: var(--m-accent); }
body[data-skin="modern"] .itin-map figcaption { background: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
body[data-skin="modern"] .itin-sugg { padding: 1.1rem 1.25rem 1rem; border-radius: 16px; background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .itin-sugg, html.m-light body[data-skin="modern"][data-mode="system"] .itin-sugg { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .sugg-name { color: var(--m-ink); }
body[data-skin="modern"] .sugg-name:hover { color: var(--m-accent); }
body[data-skin="modern"] .sugg-sub { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .sugg { border-bottom: 1px solid var(--m-rule); }
body[data-skin="modern"] .sugg:last-child { border-bottom: 0; }
body[data-skin="modern"] .itin-sugg-more > summary.more-link { display: inline-block; }
/* the itinerary eyebrow is the card eyebrow: same who / who-private tokens */
body[data-skin="modern"] .itin-shell .who { text-align: center; }
/* the shell provides the top padding; ens-head must not add its own or the
modern skin sits 30px lower than classic for the same content */
body[data-skin="modern"] .itin-shell .ens-head, body[data-skin="modern"] .itp .ens-head { padding-top: 0; }
body[data-skin="modern"] .itin-note > .byline { color: var(--m-ink-3); }
body[data-skin="modern"] .itin-when { color: var(--m-accent); opacity: 1; }
body[data-skin="modern"] .stop-arrow, body[data-skin="modern"] .stop-handle { color: var(--m-ink-2); }
body[data-skin="modern"] .stop-arrow:hover { color: var(--m-accent); }
body[data-skin="modern"] .stop-form .nf-box, body[data-skin="modern"] .itin-edit-form .nf-box {
background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow); border-radius: var(--m-r);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); padding: 1.3rem 1.3rem 1rem; }
body[data-skin="modern"] .itin-edit-form .nf-box { padding-top: 2.6rem; }
body[data-skin="modern"] .sugg-more-btn {
background: var(--m-glass-2); background-image: none; color: var(--m-ink); border: 0; border-radius: 999px;
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35); }
body[data-skin="modern"] .sugg-more-btn:hover { background: var(--m-glass-3); }
body[data-skin="modern"] .stop-when { color: var(--m-ink-2); }
body[data-skin="modern"] .mark-picks { background: var(--m-rule); box-shadow: inset 0 0 0 1px var(--m-rule); }
body[data-skin="modern"] .mark-pick { background: var(--m-field); color: var(--m-ink); }
body[data-skin="modern"] .mark-pick:hover { background: var(--m-glass-2); }
body[data-skin="modern"] .mark-pick-where, body[data-skin="modern"] .mark-chip-where { color: var(--m-ink-3); }
body[data-skin="modern"] .mark-chosen { background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line); color: var(--m-ink); }
body[data-skin="modern"] .mark-chosen-name::before { color: var(--m-accent); }
body[data-skin="modern"] .mark-gallery-h { color: var(--m-ink-3); }
body[data-skin="modern"] .mark-chip { background: var(--m-field); color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-rule); }
body[data-skin="modern"] .mark-chip:hover { background: var(--m-glass-2); }
/* the active tab is the skin's own glass pill, not classic's solid white */
body[data-skin="modern"] .itin-seg .seg-btn { background: none; box-shadow: none; color: var(--m-ink-3); border-radius: 999px; }
body[data-skin="modern"] .itin-seg .seg-btn.on {
background: var(--m-glass-2); color: var(--m-ink);
-webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 1px 0 var(--m-line), 0 6px 16px -6px rgba(0,0,0,.35); }
body[data-skin="modern"] .itin-seg .seg-btn:hover { color: var(--m-ink); }
body[data-skin="modern"] .stop-no { color: var(--m-ink-3); }
body[data-skin="modern"] .search-cards { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .search-cards, html.m-light body[data-skin="modern"][data-mode="system"] .search-cards { background: rgba(20,22,28,.045); }
/* An itinerary or ensemble container answers a pointer the way every other
first-class card does -- but it is a container, not a card, so it deepens
rather than lifts. Same "this is inspectable" cue, no movement. */
body[data-skin="modern"] .itin-shell { transition: background .22s var(--m-ease); }
body[data-skin="modern"] .itin-shell:hover { background-color: rgba(0,0,0,.075); }
body[data-skin="modern"][data-mode="light"] .itin-shell:hover,
html.m-light body[data-skin="modern"][data-mode="system"] .itin-shell:hover { background-color: rgba(20,22,28,.085); }
body[data-skin="modern"] .ens-shell .ens-title { color: var(--m-ink); }
body[data-skin="modern"] .ens-shell .ens-meta { color: var(--m-ink-3); }
body[data-skin="modern"] .ens-parts { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .ens-parts, html.m-light body[data-skin="modern"][data-mode="system"] .ens-parts { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .ens-parts-h { color: var(--m-ink-3); }
/* The share row is centred wherever a mark card appears. It was flex-end,
which only looked centred when the row happened to be the button's width --
in a narrower column it drifted right. */
body[data-skin="modern"] .mark-foot { justify-content: center; }
/* the count under a truncated itinerary */
body[data-skin="modern"] .itp-more { color: var(--m-ink-2); }
/* the gradient rides on top of each container's own flat tint, so the bottom
keeps its current value and only the top gains definition */
body[data-skin="modern"] .resurface, body[data-skin="modern"] .itin-shell,
body[data-skin="modern"] .itin-sugg,
body[data-skin="modern"] .search-cards, body[data-skin="modern"] .ens-parts,
body[data-skin="modern"] .visit-log {
background-image: linear-gradient(to bottom, rgba(0,0,0,.065), rgba(0,0,0,0) 45%);
}
body[data-skin="modern"][data-mode="light"] .resurface, body[data-skin="modern"][data-mode="light"] .itin-shell,
body[data-skin="modern"][data-mode="light"] .itin-sugg,
body[data-skin="modern"][data-mode="light"] .search-cards, body[data-skin="modern"][data-mode="light"] .ens-parts,
body[data-skin="modern"][data-mode="light"] .visit-log,
html.m-light body[data-skin="modern"][data-mode="system"] .resurface,
html.m-light body[data-skin="modern"][data-mode="system"] .itin-shell,
html.m-light body[data-skin="modern"][data-mode="system"] .itin-sugg,
html.m-light body[data-skin="modern"][data-mode="system"] .search-cards,
html.m-light body[data-skin="modern"][data-mode="system"] .ens-parts,
html.m-light body[data-skin="modern"][data-mode="system"] .visit-log {
background-image: none;
}
body[data-skin="modern"] .visit-log { border-radius: 16px; }
/* the container's definition deepens with it rather than vanishing */
body[data-skin="modern"] .itin-shell:hover {
background-image: linear-gradient(to bottom, rgba(0,0,0,.085), rgba(0,0,0,0) 45%);
}
body[data-skin="modern"][data-mode="light"] .itin-shell:hover,
html.m-light body[data-skin="modern"][data-mode="system"] .itin-shell:hover {
background-image: none;
}
body[data-skin="modern"] .itin-shell { transition: background-color .22s var(--m-ease), background-image .22s var(--m-ease); }
/* the phones take the device colour from the skin, not from the screenshot */
body[data-skin="modern"] .phone { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 var(--m-line), 0 1px 3px rgba(0,0,0,.2), 0 10px 26px rgba(0,0,0,.3); }
body[data-skin="modern"][data-mode="light"] .phone, html.m-light body[data-skin="modern"][data-mode="system"] .phone { background: rgba(20,22,28,.22); }
body[data-skin="modern"] .phone-notch { background: rgba(10,12,18,.9); }
body[data-skin="modern"] .splash-pair-lead { color: var(--m-ink-2); }
body[data-skin="modern"] .phone-wrap figcaption { color: var(--m-ink-3); }
/* the welcome page forces direct children of main transparent, which outranks
the container tint; this section is a container and keeps it */
body[data-skin="modern"] main > .splash-pair { background: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] main > .splash-pair,
html.m-light body[data-skin="modern"][data-mode="system"] main > .splash-pair { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .auth-lead { color: var(--m-ink); }
body[data-skin="modern"] .auth-says li { color: var(--m-ink-2); }
body[data-skin="modern"] .auth-fine, body[data-skin="modern"] .conn-row .sugg-sub { color: var(--m-ink-3); }
body[data-skin="modern"] .conn-row + .conn-row { border-top-color: var(--m-rule); }
/* welcome-caption: ink-3 in dark, one step darker in light for legibility */
body[data-skin="modern"] .welcome-caption,
body[data-skin="modern"] .phone-wrap .welcome-caption { color: var(--m-ink-3); }
body[data-skin="modern"][data-mode="light"] .welcome-caption,
body[data-skin="modern"][data-mode="light"] .phone-wrap .welcome-caption,
html.m-light body[data-skin="modern"][data-mode="system"] .welcome-caption,
html.m-light body[data-skin="modern"][data-mode="system"] .phone-wrap .welcome-caption { color: var(--m-ink-2); }
/* ============================================================================
PROFILE RAIL — grouped navigation (modern skin only)
Classic keeps its original .prail-nav list, completely untouched, hidden
here only under the modern skin. This block reuses the real .wtable/.wcell
markup (background, hover, active states, and -- critically -- the count
and label typography) rather than approximating it, so it is guaranteed to
match the welcome table exactly rather than by manual upkeep.
========================================================================= */
.pgrp-nav { display: none; }
body[data-skin="modern"] .prail-nav { display: none; }
body[data-skin="modern"] .pgrp-nav { display: grid; gap: .6rem; margin: 1.2rem 0 0; }
/* The real welcome table forces a 4-column grid on any .wtable at this
ancestry, for its own 4-across layout. Scoping through the extra .pgrp-nav
ancestor gives this rule genuinely higher specificity than that one, so it
wins honestly -- no !important needed, and the real welcome table (which
is never inside .pgrp-nav) is completely unaffected. */
body[data-skin="modern"] .rail .pgrp-nav .wtable.pgrp-group:not(.settings-table) {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
/* Places / Things / People: a quiet caption, not a tappable item -- title
case and italic rather than the small-caps treatment used elsewhere, and
deliberately lighter than the numbers and labels below it. */
.pgrp-label { grid-column: 1 / -1; margin: 0; padding: .4rem .6rem 0; text-align: center;
font-size: .68rem; font-style: italic; font-weight: 400; color: var(--m-ink-3); }
/* All activity / Warrants now wrap a real .wcell.wcell-wide child (typography
fix below), so .pgrp-solo itself only needs to make that one child fill and
center within the card -- it is a 1-column grid (from .wtable) with one item. */
.pgrp-solo { display: flex; }
.pgrp-solo .wcell-wide { flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center; }
body[data-skin="modern"] .rail .pgrp-nav .pgrp-solo .wcell-wide { padding: 0; }
/* ---- active tab --------------------------------------------------------
Two signals, so it reads at a glance without relying on either alone: a
one-step more opaque surface, and a small soft dot under the label.
The welcome table's own chip rule comes in dark, light and system-light
versions, each more specific than the last, and every one of them was
outranking a single active rule -- so group chips showed no active state at
all. The active rule mirrors the same three prefixes, one level deeper
(.pgrp-nav, .on), so it wins in every mode. The chip's existing shadow is
left alone rather than replaced. */
body[data-skin="modern"] .rail .pgrp-nav .wtable:not(.settings-table) > .wcell.on:not(.wcell-wide),
body[data-skin="modern"][data-mode="light"] .rail .pgrp-nav .wtable:not(.settings-table) > .wcell.on:not(.wcell-wide),
html.m-light body[data-skin="modern"][data-mode="system"] .rail .pgrp-nav .wtable:not(.settings-table) > .wcell.on:not(.wcell-wide) {
background: var(--m-glass-2);
}
/* All activity / Warrants: the card is the one visible box, so it is what
brightens; its drop shadow stays exactly as on the welcome table. */
body[data-skin="modern"] .pgrp-nav .pgrp-solo:has(.wcell.on) { background: var(--m-glass-2); }
/* The dot hangs off the label itself, positioned out of flow, so the active
chip is exactly the same size as an inactive one -- nothing shifts when
the tab changes. The accent token is already tuned per mode. */
.pgrp-nav .wcell.on span { position: relative; }
.pgrp-nav .wcell.on span::after {
content: ""; position: absolute; left: 50%; top: calc(100% + .38rem);
width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
background: var(--m-accent); filter: blur(1.1px); opacity: .8;
box-shadow: 0 0 5px 0 color-mix(in srgb, var(--m-accent) 55%, transparent);
}
.pgrp-all-short { display: none; }
body[data-skin="modern"] .pgrp-nav .pgrp-solo { min-height: 5.1rem; }
/* The real welcome table's shadow (reused as-is below) is a soft, wide one --
fine sitting on a static page, but a horizontal scroll container implicitly
clips the cross-axis the moment overflow-x is anything but visible, cutting
the shadow off top and bottom (the same thing the Collections carousel
trades off). This padding gives it room to render in full instead. */
@media (max-width: 52rem) {
body[data-skin="modern"] .pgrp-nav { display: flex; gap: .5rem; overflow-x: auto;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
-ms-overflow-style: none; padding: 10px 12px 36px; margin: .35rem -12px -30px;
scroll-padding-inline: 12px; }
body[data-skin="modern"] .pgrp-nav .pgrp-solo { min-height: 0; }
body[data-skin="modern"] .pgrp-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
body[data-skin="modern"] .pgrp-nav .pgrp-group { flex: 0 0 11rem; scroll-snap-align: start; }
body[data-skin="modern"] .pgrp-nav .pgrp-solo { flex: 0 0 6.75rem; scroll-snap-align: start; }
.pgrp-all-full { display: none; }
.pgrp-all-short { display: inline; }
}
/* =====================================================================
Increment 4: the proposed material. The same glass at about half its
opacity with no light edge: it rests slightly behind the plane. Keep
gives it the edge and the weight. Dark is the reference.
===================================================================== */
body[data-skin="modern"] { --m-prop: rgba(255,255,255,.035); --m-prop-line: rgba(255,255,255,.075); }
body[data-skin="modern"][data-mode="light"], html.m-light body[data-skin="modern"][data-mode="system"] { --m-prop: rgba(255,255,255,.2); --m-prop-line: rgba(255,255,255,.55); }
/* light: a place already theirs, inside a proposal, reads as solid glass */
body[data-skin="modern"][data-mode="light"] .rec-plan .rec-stop.is-kept, html.m-light body[data-skin="modern"][data-mode="system"] .rec-plan .rec-stop.is-kept { background: var(--m-glass-3); box-shadow: inset 0 1px 0 var(--m-line-2), var(--m-shadow-2); }
body[data-skin="modern"] .rec-plan, body[data-skin="modern"] .rec-stop,
body[data-skin="modern"] .is-proposed > .card, body[data-skin="modern"] .itin-note.is-proposed .itin-shell,
body[data-skin="modern"] ul.stop-notes > li.is-proposed {
background: var(--m-prop); box-shadow: inset 0 0 0 1px var(--m-prop-line);
-webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
}
body[data-skin="modern"] .rec-plan.is-kept, body[data-skin="modern"] .rec-stop.is-kept {
background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line), var(--m-shadow);
transition: background .32s var(--m-ease), box-shadow .32s var(--m-ease);
}
body[data-skin="modern"] .rec-plan .rec-stop { background: var(--m-prop); }
body[data-skin="modern"] .rec-plan .rec-stop.is-kept { background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .itin-recs { --rec-dot: var(--m-accent); color: var(--m-ink); }
body[data-skin="modern"] .rec-kind, body[data-skin="modern"] .rec-why { color: var(--m-ink-2); }
body[data-skin="modern"] .rec-kind b { color: var(--m-ink); }
body[data-skin="modern"] .rec-meta, body[data-skin="modern"] .rec-count, body[data-skin="modern"] .rec-stop-loc,
body[data-skin="modern"] .rec-day, body[data-skin="modern"] .rec-kid-st, body[data-skin="modern"] .rec-note { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] .rec-kid-st i, body[data-skin="modern"] .stop-note .ens-comp-state i { color: var(--m-accent); }
body[data-skin="modern"] .rec-stops::before { background: var(--m-rule); opacity: 1; }
body[data-skin="modern"] .rec-kids, body[data-skin="modern"] .rec-kid::before { border-color: var(--m-rule); background-color: var(--m-rule); }
body[data-skin="modern"] .rec-kids { background: none; }
body[data-skin="modern"] .rec-tag { color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); }
body[data-skin="modern"] .rec-explore > summary { background: transparent; box-shadow: inset 0 0 0 1px var(--m-line-2); color: var(--m-ink); }
body[data-skin="modern"] .react-btn { color: var(--m-ink-2); opacity: 1; }
body[data-skin="modern"] .btn-keep.btn, body[data-skin="modern"] .rec-acts .btn-keep { background: var(--m-accent); color: #0d0f14; font-weight: 600; box-shadow: none; border-radius: 999px; padding: .55rem 1.1rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; border: 0; cursor: pointer; font-family: inherit; }
body[data-skin="modern"][data-mode="light"] .rec-acts .btn-keep, html.m-light body[data-skin="modern"][data-mode="system"] .rec-acts .btn-keep { color: #fff; }
body[data-skin="modern"] .rec-acts a.btn { background: var(--m-glass-2); color: var(--m-ink); border-radius: 999px; padding: .55rem 1.1rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .prop-line, body[data-skin="modern"] .stop-note .ens-comp-why { color: var(--m-ink-3); opacity: 1; }
body[data-skin="modern"] ul.stop-notes > li.is-unresolved { background: transparent; box-shadow: inset 0 0 0 1px var(--m-rule); }
body[data-skin="modern"] .itin-map .pin-ring { stroke: var(--m-accent); }
body[data-skin="modern"] .itin-map .pin-rn { fill: var(--m-accent); }
body[data-skin="modern"] .map-legend .lg-dot { background: var(--m-accent); }
body[data-skin="modern"] .map-legend .lg-ring { box-shadow: inset 0 0 0 1.5px var(--m-accent); }
body[data-skin="modern"] .review-row { border-color: var(--m-rule); }
body[data-skin="modern"] .review-kind, body[data-skin="modern"] .review-rel, body[data-skin="modern"] .review-sub, body[data-skin="modern"] .review-note { color: var(--m-ink-3); opacity: 1; }
@media (prefers-reduced-motion: reduce) { body[data-skin="modern"] .rec-plan.is-kept, body[data-skin="modern"] .rec-stop.is-kept { transition: none; } }
body[data-skin="modern"] .rec-title a, body[data-skin="modern"] .rec-stop-name a, body[data-skin="modern"] .rec-kid a { color: var(--m-ink); text-decoration: none; }
body[data-skin="modern"] .rec-title a:hover, body[data-skin="modern"] .rec-stop-name a:hover, body[data-skin="modern"] .rec-kid a:hover { text-decoration: underline; text-decoration-color: var(--m-ink-3); }
/* Welcome card: second-level glass inside the card, the skin's inks and accent */
body[data-skin="modern"] .welcome-card .wl-tab { color: var(--m-ink-2); }
body[data-skin="modern"] .welcome-card .wl-radio:checked + .wl-tab { background: var(--m-glass-3); color: var(--m-ink); box-shadow: inset 0 1px 0 var(--m-line-2); }
body[data-skin="modern"] .welcome-card .wl-kind { background: var(--m-glass-2); border-radius: 18px; box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .welcome-card .wl-kinds { gap: .8rem; background: none; }
body[data-skin="modern"] .welcome-card .wl-ai summary, body[data-skin="modern"] .welcome-card label.wl-ai { background: var(--m-glass-3); box-shadow: inset 0 1px 0 var(--m-line-2), var(--m-shadow); color: var(--m-ink); }
body[data-skin="modern"] .welcome-card .wl-ai.is-on summary, body[data-skin="modern"] .welcome-card label.wl-ai.is-on { background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .welcome-card .wl-ai-state { color: var(--m-accent); }
body[data-skin="modern"] .welcome-card .wl-ai-state.is-on { color: var(--m-ink-2); }
body[data-skin="modern"] .welcome-card .wl-prompt { background: var(--m-glass-2); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .welcome-card .wl-quick .wl-prompt { background: none; box-shadow: inset 0 1px 0 var(--m-rule, rgba(255,255,255,.1)); }
body[data-skin="modern"] .welcome-card .wl-how, body[data-skin="modern"] .welcome-card .wl-say, body[data-skin="modern"] .welcome-card .wl-kind-for { color: var(--m-ink-2); }
body[data-skin="modern"] .welcome-card .wl-url { color: var(--m-ink); }
body[data-skin="modern"] .welcome-card .wl-warrant { background: var(--m-glass); border-radius: 14px; box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .welcome-card .wl-warrant-for { color: var(--m-ink-2); }
/* Welcome tabs: the vis-tabs recipe, for labels */
body[data-skin="modern"] .wl-tabs { padding: 4px; border-radius: 999px; background: var(--m-glass-2); -webkit-backdrop-filter: blur(34px) saturate(150%); backdrop-filter: blur(34px) saturate(150%); box-shadow: inset 0 1px 0 var(--m-line); }
body[data-skin="modern"] .wl-tabs .wl-tab { color: var(--m-ink-2); background: transparent; box-shadow: none; border-radius: 999px; padding: .6rem .8rem; }
body[data-skin="modern"] .wl-tabs .wl-tab:hover { color: var(--m-ink); background: var(--m-glass); }
body[data-skin="modern"] #wl-s1:checked ~ .wl-tabs label[for="wl-s1"], body[data-skin="modern"] #wl-s2:checked ~ .wl-tabs label[for="wl-s2"], body[data-skin="modern"] #wl-s3:checked ~ .wl-tabs label[for="wl-s3"] {
background: var(--m-glass-3); color: var(--m-ink); font-weight: 700; box-shadow: inset 0 1px 0 var(--m-line-2), 0 2px 10px -4px rgba(0,0,0,.35); }
/* A solid variant of the button token: the selected pill's density */
body[data-skin="modern"] .btn3d.btn-solid, body[data-skin="modern"] button.btn3d.btn-solid { background: var(--m-glass-3); font-weight: 700; box-shadow: inset 0 1px 0 var(--m-line-2), 0 2px 10px -4px rgba(0,0,0,.35); }
body[data-skin="modern"] .btn3d.btn-solid:hover { background: var(--m-glass-3); filter: brightness(1.08); }
/* Ensembles: "What's in it" takes the quiet container the itinerary shell and
the resurfacing banner use (tint only: no blur, shadow or light edge), and
room to breathe. */
body[data-skin="modern"] .ens-parts { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 1.2rem 1rem 1.3rem; }
body[data-skin="modern"] .ens-parts .ens-parts-h { margin: 0 0 .9rem; }
body[data-skin="modern"] .ens-parts .ens-comps, body[data-skin="modern"] .ens-parts .ens-comps .ens-comp { padding-left: 0; padding-right: 0; }
/* the Show more token on a button, as on a link */
body[data-skin="modern"] .rec-keep-row button.more-link { cursor: pointer; border: 0; font-family: inherit; }
body[data-skin="modern"] .rec-plan .rec-dot { color: var(--m-ink-3); opacity: 1; }
/* v2.64: Welcome tiles take the quiet container (the itinerary shell / resurfacing tint) */
body[data-skin="modern"] .welcome-card .wl-kind { background: rgba(0,0,0,.035); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 16px; }
body[data-skin="modern"][data-mode="light"] .welcome-card .wl-kind, html.m-light body[data-skin="modern"][data-mode="system"] .welcome-card .wl-kind { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .welcome-card .wl-ico { background: var(--m-glass); box-shadow: inset 0 7px 10px -4px rgba(0,0,0,.55), inset 0 -1px 0 var(--m-line); }
body[data-skin="modern"][data-mode="light"] .welcome-card .wl-ico, html.m-light body[data-skin="modern"][data-mode="system"] .welcome-card .wl-ico { box-shadow: inset 0 7px 10px -4px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.7); }
body[data-skin="modern"] .welcome-card .wl-warrant { background: rgba(0,0,0,.035); box-shadow: none; border-radius: 16px; }
body[data-skin="modern"][data-mode="light"] .welcome-card .wl-warrant, html.m-light body[data-skin="modern"][data-mode="system"] .welcome-card .wl-warrant { background: rgba(20,22,28,.045); }
/* v2.65.2: Welcome terms in the rail's muted ink; empty-state watermark inside the quiet container; admin tables in the resurfacing container */
body[data-skin="modern"] .welcome-card .wl-term { color: var(--m-ink-3); }
body[data-skin="modern"] .welcome-card .wl-starter .wl-acts-wrap { border-left-color: var(--m-line); }
body[data-skin="modern"] .empty-first-act .es-title.empty-line { font-size: 2.1rem; opacity: .3; }
body[data-skin="modern"] .act-table-wrap { background: rgba(0,0,0,.035); border-radius: 16px; padding: .6rem 1rem .8rem; margin-top: .6rem; }
body[data-skin="modern"][data-mode="light"] .act-table-wrap, html.m-light body[data-skin="modern"][data-mode="system"] .act-table-wrap { background: rgba(20,22,28,.045); }
body[data-skin="modern"] .welcome-card .wl-ai-eb { color: var(--m-accent, #8a7bff); }
body[data-skin="modern"] .welcome-card ol.steps.wl-how li > span { background: var(--m-ink); color: var(--m-bg, #111); }
body[data-skin="modern"] .welcome-card .wl-ai-panel { background: rgba(0,0,0,.035); }
body[data-skin="modern"] .welcome-card .wl-ai-panel::before { border-bottom-color: rgba(0,0,0,.035); }
body[data-skin="modern"][data-mode="light"] .welcome-card .wl-ai-panel, html.m-light body[data-skin="modern"][data-mode="system"] .welcome-card .wl-ai-panel { background: rgba(20,22,28,.045); }
body[data-skin="modern"][data-mode="light"] .welcome-card .wl-ai-panel::before, html.m-light body[data-skin="modern"][data-mode="system"] .welcome-card .wl-ai-panel::before { border-bottom-color: rgba(20,22,28,.045); }
body[data-skin="modern"] .welcome-card .wl-ai-toggle[id^="wl-ai-chatgpt-"]:checked ~ .wl-ais label[data-ai="chatgpt"],
body[data-skin="modern"] .welcome-card .wl-ai-toggle[id^="wl-ai-other-"]:checked ~ .wl-ais label[data-ai="other"],
body[data-skin="modern"] .welcome-card .wl-ai-toggle[id^="wl-ai-claude-"]:checked ~ .wl-ais label[data-ai="claude"] {
background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line), 0 0 0 4px var(--m-line-2), var(--m-shadow); color: var(--m-ink); }
/* v2.66.1 phones: the bottom bar scrolls sideways when its icons do not fit (no visible scrollbar);
while they fit, the auto margins keep the even, centred spacing */
@media (max-width: 52rem) {
body[data-skin="modern"] .iconrail { justify-content: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-padding-inline: 12px; }
body[data-skin="modern"] .iconrail::-webkit-scrollbar { display: none; }
body[data-skin="modern"] .iconrail > :first-child { margin-left: auto; }
body[data-skin="modern"] .iconrail > :last-child { margin-right: auto; }
}
@media (max-width: 52rem) {
body[data-skin="modern"] nav.iconrail > a:first-child, body[data-skin="modern"] nav.iconrail > .iconrail-btn:first-child { margin-left: auto; }
body[data-skin="modern"] nav.iconrail > a:last-child, body[data-skin="modern"] nav.iconrail > .iconrail-btn:last-child { margin-right: auto; }
}
/* v2.66.2 phones: the original spacing (each icon a quarter of the bar), with anything past four scrolling */
@media (max-width: 52rem) {
body[data-skin="modern"] .iconrail { gap: 0; justify-content: flex-start; }
body[data-skin="modern"] nav.iconrail > a, body[data-skin="modern"] nav.iconrail > .iconrail-btn,
body[data-skin="modern"] nav.iconrail > a:first-child, body[data-skin="modern"] nav.iconrail > a:last-child,
body[data-skin="modern"] nav.iconrail > .iconrail-btn:first-child, body[data-skin="modern"] nav.iconrail > .iconrail-btn:last-child {
margin: 0 max(4px, calc((100vw - 36px) / 8 - 24px)); }
}
/* v2.66.7 phones: the active icon keeps the same spacing (the skin's .on rule reset its margins) */
@media (max-width: 52rem) {
body[data-skin="modern"] nav.iconrail > a.on, body[data-skin="modern"] nav.iconrail > .iconrail-btn.on {
margin: 0 max(4px, calc((100vw - 36px) / 8 - 24px)); }
}
body[data-skin="modern"] .admin-wide .admin-activity .act-line { background: rgba(0,0,0,.035); border-color: transparent; }
body[data-skin="modern"][data-mode="light"] .admin-wide .admin-activity .act-line, html.m-light body[data-skin="modern"][data-mode="system"] .admin-wide .admin-activity .act-line { background: rgba(20,22,28,.045); }