/* Source Serif 4 (SIL Open Font License), served from this site: no other origin before the page paints. */
@font-face{font-family:'Source Serif 4';font-style: italic; font-weight: 400; font-display: swap; src:url(/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style: italic; font-weight: 400; font-display: swap; src:url(/fonts/source-serif-4-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style: normal; font-weight: 300 800; font-display: swap; src:url(/fonts/source-serif-4-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style: normal; font-weight: 300 800; font-display: swap; src:url(/fonts/source-serif-4-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/*
 * GiveMeAFuckingJ*b (GMAFJ until 2026-10-21), the social network (the owner, 2026-10-08): LinkedIn's functionality and
 * Instagram's layout. Since 2026-10-20 in the desktop app's look (the owner: "make the theme like the desktop
 * app's modernistic theme"), after src/renderer/styles/globals.css and its shadcn components: Source Serif 4
 * for everything, a warm light-grey ground, white cards with a visible edge and 16px corners, black for the
 * thing to press, and blue as the only hue used for its own sake (links, focus, what is waiting on you).
 * Green, amber and red only where they mean something. Light by default; Dark mode is in the More menu
 * (html.dark), as the app's account menu has it. No em dashes in anything shown.
 *
 * The menu is a rail of icons on the left, the logo alone at its top (the owner, 2026-10-22: "Remove the name
 * of the platform and just keep the logo") and the menus in its middle, as Instagram's (the owner,
 * 2026-10-21); hovered or tabbed into, it opens over the page with every name (the owner, 2026-10-08). On
 * phones, a bar on top and tabs along the bottom.
 */
/*
 * The palette (the owner, 2026-10-21: "the contrast between the background and the foreground is not
 * enough"), measured, not guessed: every text colour is at least 4.5:1 on every surface it sits on (the
 * page's own text 16:1 and more), the edge of anything you type into or press at least 3:1, and the white
 * cards a clear step off the grey ground. The same in the dark. s.css carries the same values, and the
 * standard profile design (design.js) its light ones.
 */
:root{
  --radius:12px;--radius-xl:16px;
  --bg:#efeeea;--card:#fff;--fg:#111;--soft:#333;--muted:#575757;--faint:#6a6a6a;
  --primary:#111;--primary-fg:#fff;--secondary:#e8e7e2;--hover:#ebeae5;--accent:#e2e1dc;
  --border:#d6d4ce;--input:#85837e;--blue:#1d4ed8;--blue-fg:#fff;--ring:rgb(29 78 216/.3);
  --ok:#166534;--wait:#8a5a00;--bad:#b91c1c;--bad-bg:#b91c1c;--heart:#ff3040;
  /* The rings round a photo (the owner, 2026-10-23): green, open to work; blue, hiring. At least 3:1 on the card. */
  --otw:#16a34a;--hire:#1d4ed8;
  --sidebar:var(--card);--sidebar-fg:var(--soft);--strip:#f3f2ee;
  --shadow-card:0 1px 3px rgb(0 0 0/.07);--shadow:0 10px 30px rgb(0 0 0/.14),0 2px 6px rgb(0 0 0/.08);
  /* Older names, still used: */
  --line:var(--border);--line-2:var(--input);--text:var(--fg);--night:var(--sidebar);--frame:1px solid var(--border);
  --rail:64px;--rail-open:248px;--top:0px;--tabs:0px;--fs:1;color-scheme:light
}
html.dark{
  --bg:#0c0c0c;--card:#1c1c1c;--fg:#f4f4f4;--soft:#d4d4d4;--muted:#a8a8a8;--faint:#8c8c8c;
  --primary:#f4f4f4;--primary-fg:#111;--secondary:#2c2c2c;--hover:#292929;--accent:#353535;
  --border:#3a3a3a;--input:#787878;--blue:#6ea8ff;--blue-fg:#0c0c0c;--ring:rgb(110 168 255/.35);
  --ok:#5dd48a;--wait:#f0b43c;--bad:#ff7b72;--bad-bg:#c42b2b;--heart:#ff3040;
  --otw:#22c55e;--hire:#6ea8ff;
  --sidebar:var(--card);--sidebar-fg:var(--soft);--strip:#252525;
  --shadow-card:0 1px 2px rgb(0 0 0/.4);--shadow:0 10px 30px rgb(0 0 0/.6);color-scheme:dark
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html{font-family:"Source Serif 4",Georgia,serif;font-size:calc(16px*var(--fs));line-height:1.55;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--fg)}
body{min-height:100vh;background:var(--bg);color:var(--fg);font-size:calc(15px*var(--fs));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
img,svg,video,iframe{display:block;max-width:100%}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--blue) 25%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:9px;background:color-mix(in srgb,var(--muted) 35%,transparent) padding-box}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted) 55%,transparent)}
[hidden]{display:none!important}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:calc(14px*var(--fs))}
.link,.textbtn{color:var(--blue);font-weight:500}
.link:hover,.textbtn:hover{text-decoration:underline;text-underline-offset:3px}
h1{font-size:calc(28px*var(--fs));font-weight:600;line-height:1.2;letter-spacing:-.01em}
h2{font-size:calc(20px*var(--fs));font-weight:600;line-height:1.25}
h3{font-size:calc(16px*var(--fs));font-weight:600;line-height:1.35}

/* Who sees what: html.in is set once the session is known (boot.js guesses first, app.js decides). */
html:not(.in) [data-in],html.in [data-out]{display:none!important}
/* A member opening the home page is sent on to their Home, so its jobs are not flashed first. */
html.in:not(.shown) body[data-page=landing] .main{visibility:hidden}
[data-me-av]{display:flex}

/* ── The shell */
.shell{display:flex;min-height:100vh}
.main{flex:1;min-width:0;margin-left:var(--rail);padding-bottom:var(--tabs)}
.topbar,.tabbar{display:none}
/*
 * The brand: the owner's logo as it is (the owner, 2026-10-21: "The logo is the same, dont change it"), alone
 * in the menus, with the word beside it where a page names itself (signing in). Its supplied variants,
 * swapped by a class as the desktop app's Logo.tsx swaps them: the black mark (favicon.png) in the light, the
 * white one (logo-dark.png) in the dark.
 */
.brand{display:flex;align-items:center;gap:12px;font-size:calc(20px*var(--fs));font-weight:700;letter-spacing:-.01em}
.logo{flex:none;width:28px;height:28px;object-fit:contain}
.logo.on-dark,html.dark .logo:not(.on-dark){display:none}
html.dark .logo.on-dark{display:block}
.av.logo-av{display:inline-flex;align-items:center;justify-content:center;padding:9px;background:var(--card);box-shadow:inset 0 0 0 1px var(--border)}
.av.logo-av .logo{width:100%;height:100%}
/* The rail: icons, and every name once it is hovered or tabbed into. It opens over the page, which stays where it is. */
.rail{position:fixed;inset:0 auto 0 0;z-index:40;display:flex;flex-direction:column;gap:2px;width:var(--rail);padding:18px 12px 12px;overflow:hidden;background:var(--sidebar);color:var(--sidebar-fg);border-right:1px solid var(--border);transition:width .22s cubic-bezier(.4,0,.2,1),box-shadow .22s}
.rail:hover,.rail:focus-within{width:var(--rail-open);box-shadow:var(--shadow)}
.rail .brand{gap:14px;height:40px;padding:0 6px;white-space:nowrap;color:var(--fg)}
/* The menus in the middle of the rail, the name above and More below, as Instagram's are. */
.rail-mid{display:flex;flex-direction:column;gap:6px;margin-block:auto}
.nav-i{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0 10px;border-radius:var(--radius);color:color-mix(in srgb,var(--sidebar-fg) 85%,transparent);font-size:calc(15px*var(--fs));white-space:nowrap;text-align:left;transition:background .15s,color .15s}
.nav-i svg{flex:none;width:21px;height:21px;stroke-width:1.8}
.nav-i:hover{background:var(--hover);color:var(--fg)}
.rail .nav-i>span:not(.badge):not([data-me-av]){opacity:0;transition:opacity .12s}
.rail:hover .nav-i>span:not(.badge):not([data-me-av]),.rail:focus-within .nav-i>span:not(.badge):not([data-me-av]){opacity:1;transition-delay:.08s}
.nav-i[aria-current=page]{background:var(--accent);color:var(--fg);font-weight:600}
.nav-i[aria-current=page] svg{stroke-width:2.2}
.nav-i [data-me-av]{flex:none;width:20px;justify-content:center}
.nav-i .av{width:22px;height:22px;font-size:calc(9px*var(--fs))!important}
.rail .av.i,.topbar .av.i,.tabbar .av.i{background:var(--primary);color:var(--primary-fg)}
.nav-i[aria-current=page] .av{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--fg)}
/* A count waiting on you: blue, the app's colour for attention. */
.badge{position:absolute;left:24px;top:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--blue);color:var(--blue-fg);font-size:calc(11px*var(--fs));font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.badge:empty{display:none}
.rail-foot{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--border)}
/* Phones: a bar along the top, tabs along the bottom, in the rail's grey. */
@media(max-width:767px){
  :root{--rail:0px;--top:56px;--tabs:calc(56px + env(safe-area-inset-bottom))}
  .rail{display:none}
  .main{padding-top:var(--top)}
  .topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:2px;height:var(--top);padding:0 8px 0 16px;background:var(--sidebar);border-bottom:1px solid var(--border);color:var(--fg)}
  .topbar .brand{margin-right:auto;font-size:calc(19px*var(--fs))}
  .topbar .logo{width:24px;height:24px}
  .tabbar{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;justify-content:space-around;align-items:center;height:var(--tabs);padding-bottom:env(safe-area-inset-bottom);background:var(--sidebar);border-top:1px solid var(--border);color:var(--fg)}
  .topbar .nav-i,.tabbar .nav-i{width:44px;min-height:44px;justify-content:center;padding:0}
  .topbar .badge,.tabbar .badge{left:24px;top:4px}
  .tabbar .nav-i{color:var(--muted)}
  .tabbar .nav-i[aria-current=page],.topbar .nav-i[aria-current=page]{background:none;color:var(--fg)}
  .topbar .btn,.tabbar .btn{min-height:32px}
  .topbar .nav-plus svg{width:26px;height:26px;stroke-width:1.9}
}

/* ── Things to press: black (white in the dark), or outlined; as the app's Button. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 16px;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-size:calc(14px*var(--fs));font-weight:600;white-space:nowrap;box-shadow:0 1px 2px rgb(0 0 0/.05);transition:background .15s,color .15s,opacity .15s,transform .1s}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.98)}
.btn.ghost,.btn.line{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--input),0 1px 2px rgb(0 0 0/.05)}
.btn.ghost:hover,.btn.line:hover{background:var(--hover);opacity:1}
.btn.danger{background:var(--bad-bg);color:#fff}
.btn.small{min-height:32px;padding:0 12px;font-size:calc(13px*var(--fs))}
.btn.wide{width:100%}
.menu-b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;color:var(--muted);font-size:calc(18px*var(--fs))}
.menu-b:hover{background:var(--hover);color:var(--fg)}

/* ── Fields, as the app's Input: a hairline box, and a blue ring when you are in it. */
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:calc(14px*var(--fs));font-weight:600}
.input,.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea,.textarea{width:100%;min-height:40px;padding:.45rem .75rem;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);outline:none;font-size:calc(15px*var(--fs));box-shadow:0 1px 2px rgb(0 0 0/.04);transition:border-color .15s,box-shadow .15s}
html.dark .input,html.dark .field input:not([type=checkbox]):not([type=file]),html.dark .field select,html.dark .field textarea,html.dark .textarea{background:rgb(255 255 255/.045)}
.field textarea,.textarea{min-height:110px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,.textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
::placeholder{color:var(--muted);opacity:1}
.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:calc(13px*var(--fs))}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.check input{width:16px;height:16px;margin-top:4px;accent-color:var(--primary);flex:none}
.err{color:var(--bad);font-size:calc(14px*var(--fs))}
.okay{color:var(--ok);font-size:calc(14px*var(--fs))}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.span2{grid-column:1/-1}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}

/* ── People: round faces, ringed green when open to work and blue when hiring, wherever they show (the owner, 2026-10-23). */
.av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--secondary)}
.av.i{display:inline-flex;align-items:center;justify-content:center;color:var(--soft);font-weight:600;text-transform:uppercase;user-select:none}
.av.xs{width:24px;height:24px}
.av.s{width:34px;height:34px}
.av.l{width:60px;height:60px}
.av.xl{width:152px;height:152px}
.av.ring-open{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--otw)}
.av.ring-hiring{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--hire)}
/* Faces stacked over each other keep their ring as their edge. */
:is(.faces,.ig-by) .av.ring-open{box-shadow:0 0 0 2px var(--otw)}
:is(.faces,.ig-by) .av.ring-hiring{box-shadow:0 0 0 2px var(--hire)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who-t{min-width:0}
.who-n{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:calc(15px*var(--fs));font-weight:600;line-height:1.3}
.who-n a:hover{text-decoration:underline;text-underline-offset:3px}
.who-h{color:var(--muted);font-size:calc(13.5px*var(--fs));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Follows you", in a grey chip beside the name, as Instagram marks it; a lock beside a private account's. */
.chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--secondary);color:var(--soft);font-size:calc(11.5px*var(--fs));font-weight:600;white-space:nowrap}
.lock{display:inline-flex;color:var(--muted)}
.lock svg{width:17px;height:17px}
.person{display:flex;align-items:center;gap:12px;padding:12px 0}
.person.pick{width:100%;padding:10px 8px;border-radius:var(--radius);text-align:left}
.person.pick:hover{background:var(--hover)}
/* Picking whom to send a post or a message to: a face, a name and a username, no links, and a ring that fills once picked. */
.pick .who-t{display:flex;flex-direction:column}
.pick .who-h{display:block}
.pick .tick{flex:none;width:22px;height:22px;border:1.5px solid var(--input);border-radius:50%}
.pick[aria-pressed=true] .tick{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 4px var(--card)}
.send-list{max-height:min(46vh,360px);margin:0 -8px;overflow-y:auto}
.picked{display:flex;flex-wrap:wrap;gap:6px}
.pick-chip{height:26px;cursor:pointer}
.pick-chip:hover{background:var(--accent)}
.person .who{flex:1}
/* The faces of people you follow on a post or a job, overlapping, as Instagram shows who liked. */
.faces{display:flex;align-items:center;gap:8px;font-size:calc(14px*var(--fs));color:var(--soft)}
.faces .stack-av{display:flex}
.faces .av{width:24px;height:24px;box-shadow:0 0 0 2px var(--card)}
.faces .av+.av{margin-left:-8px}
.faces b{color:var(--fg);font-weight:600}

/* ── Pages: the heading over a rule, as the app's PageHeader; cards as its Card. */
.page{width:100%;max-width:1000px;margin:0 auto;padding:32px 24px 80px}
.page.narrow{max-width:720px}
/* Someone's posts as a feed: Home's width, so their comments fit beside them. */
.page.posts-page{max-width:648px}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-card)}
.card.pad{padding:20px 24px}
.sec{padding:20px 24px;border-bottom:1px solid var(--border)}
.sec:last-child{border-bottom:0}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.empty h2{margin-bottom:8px;color:var(--fg)}
.empty .btn{margin-top:18px}
.center{display:flex;justify-content:center}
.spin{width:22px;height:22px;margin:36px auto;border:2px solid var(--border);border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
/* Tabs over a list: For you, Following and Jobs (and My items beside them), People and Posts, My items. The open one in the selected grey. */
.feed-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.feed-tabs .tabs-in{display:flex;gap:4px}
.feed-tabs button,.feed-tabs .tab-link{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:var(--radius);color:var(--muted);font-size:calc(14px*var(--fs));font-weight:500}
.feed-tabs button:hover,.feed-tabs .tab-link:hover{background:var(--hover);color:var(--fg)}
.feed-tabs button[aria-selected=true]{background:var(--accent);color:var(--fg);font-weight:600}

/* ── Home, and a column beside it on wide screens */
.feed-wrap{display:flex;justify-content:center;gap:40px;padding:32px 20px 80px}
.feed{width:100%;max-width:600px;display:flex;flex-direction:column;gap:16px}
/* As tall as what is in it, not the feed: below it, a post's comments open on the right (app.js openComments). */
.aside{width:320px;flex:none;align-self:flex-start;display:flex;flex-direction:column;gap:16px}
@media(max-width:1100px){.aside{display:none}}
.aside-h{display:flex;justify-content:space-between;align-items:center;font-size:calc(15px*var(--fs));font-weight:600;color:var(--fg)}
.aside-h .textbtn{font-size:calc(14px*var(--fs))}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:calc(13px*var(--fs));color:var(--muted)}
.foot-links a:hover{color:var(--fg);text-decoration:underline}
.app-state{display:flex;align-items:center;gap:8px;font-size:calc(14px*var(--fs))}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.dot.on{background:var(--ok)}

/* ── A post */
.post{overflow:hidden}
/* Its comments are open beside it (app.js openComments). */
.post.commenting{box-shadow:0 0 0 1.5px var(--fg)}
.via{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:calc(13px*var(--fs));color:var(--muted)}
.via b{color:var(--fg)}
.post-h{display:flex;align-items:center;gap:10px;padding:14px 16px}
.post-h .who{flex:1}
/* Your own update's review (the owner, 2026-10-21): waiting, or turned down with the reason. Only you see it. */
.review{margin:0 16px 12px;padding:9px 12px;border-radius:var(--radius);font-size:calc(13.5px*var(--fs));line-height:1.45}
.review.pending{background:color-mix(in srgb,var(--wait) 12%,transparent);color:color-mix(in srgb,var(--wait) 80%,var(--fg))}
.review.rejected{background:color-mix(in srgb,var(--bad) 10%,transparent);color:color-mix(in srgb,var(--bad) 75%,var(--fg))}
.post-t{padding:0 16px 14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.post-t a{color:var(--blue)}
.post-t a:hover{text-decoration:underline}
/* Its space below as margin: padding would sit inside the clipped box and show the fifth line's top. */
.post-t.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:0;margin-bottom:14px;cursor:pointer}
.post-i{width:100%;max-height:720px;object-fit:cover;background:var(--strip);border-block:1px solid var(--border)}
/*
 * Its actions, Instagram's (the owner, 2026-10-21; app.js `actions`): a heart, a speech bubble, the repost
 * arrows and the paper plane, each with its count beside it, and the bookmark on the right. Black outlines,
 * a red heart once liked; then "Liked by", "View all comments", and a box to add one.
 */
.post-a{display:flex;align-items:center;gap:2px;padding:6px 8px 0}
.ig{display:inline-flex;align-items:center;gap:6px;min-width:40px;min-height:40px;padding:0 8px;border-radius:var(--radius);color:var(--fg)}
.ig svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.ig:hover svg{opacity:.6}
.ig:active svg{transform:scale(.88)}
.ig.on[data-like] svg{fill:var(--heart);stroke:var(--heart);opacity:1;animation:beat .3s ease-out}
.ig.on[data-save] svg{fill:currentColor;opacity:1}
@keyframes beat{40%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.ig.on[data-like] svg{animation:none}}
.ig-n{font-size:calc(14px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}
button.ig-n{min-height:40px;margin-left:-8px;padding:0 8px 0 2px}
button.ig-n:hover{text-decoration:underline;text-underline-offset:3px}
.ig-by{display:flex;align-items:center;gap:8px;padding:2px 16px 0;font-size:calc(14px*var(--fs));text-align:left;color:var(--fg)}
.ig-by .stack-av{display:flex}
.ig-by .av{width:20px;height:20px;box-shadow:0 0 0 2px var(--card)}
.ig-by .av+.av{margin-left:-6px}
.ig-more{display:block;padding:6px 16px 0;font-size:calc(14px*var(--fs));color:var(--muted);text-align:left}
.ig-more:hover{color:var(--fg)}
.ig-mine{padding:6px 16px 0;font-size:calc(14px*var(--fs));overflow-wrap:anywhere}
.ig-mine a:not(:first-child){color:var(--blue)}
.ig-say{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 16px;border-top:1px solid var(--border)}
.ig-say input,.ig-say textarea{flex:1;min-width:0;min-height:36px;padding:7px 0;border:0;background:none;outline:none;font-size:calc(14.5px*var(--fs));resize:none;line-height:1.45}
.ig-say .textbtn{font-weight:600}
.ig-say .textbtn:disabled{opacity:.45;cursor:default;text-decoration:none}
.post>:last-child:is(.post-a,.ig-by,.ig-more,.ig-mine){padding-bottom:12px}
.link-quiet{color:var(--muted)}
.link-quiet:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.embed-wrap{padding:0 16px 14px}
.embed{display:block;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius)}
.embed:hover{background:var(--hover)}
.embed-h{display:flex;align-items:center;gap:10px;padding:12px}
.embed .post-t{padding:0 12px 12px}
/*
 * A recommendation (the owner, 2026-10-22): who recommends it, then the profile, its cover, photo, name,
 * headline and numbers, to follow or open (app.js `recommendationHtml`).
 */
.rec-by{border-bottom:0}
.rec-cover{display:block;height:96px;margin:4px 16px 0;border-radius:var(--radius);background:var(--accent) center/cover}
.rec-body{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 16px 18px;text-align:center}
.rec-photo{margin-top:-46px}
.rec-photo .av{width:92px;height:92px;border:4px solid var(--card)}
.rec-photo .av.i{font-size:calc(32px*var(--fs))!important}
.rec-name{font-size:calc(18px*var(--fs));font-weight:600;line-height:1.3}
.rec-name:hover{text-decoration:underline;text-underline-offset:3px}
.rec-h{max-width:46ch;color:var(--soft);font-size:calc(14.5px*var(--fs))}
.rec-go{justify-content:center;margin-top:10px}
.pad{padding:16px}
/*
 * Comments, Instagram's (comments.js), under a post on its own page, beside it in a list (`.cpanel`), or
 * in a sheet on a narrow screen: a username then the comment, its age, likes and Reply under it, a small
 * heart on its right; replies folded under "View replies"; one box at the bottom.
 */
.ig-comments{display:flex;flex-direction:column}
.cpanel{position:absolute;z-index:30;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);animation:pop .14s ease-out}
.cpanel .dialog-h,.dialog.sheet .dialog-h{padding:12px 16px}
.cpanel .dialog-h h2,.dialog.sheet .dialog-h h2{font-size:calc(16px*var(--fs))}
.cpanel-b,.sheet-b{flex:1;min-height:0}
.cpanel-b .ig-list,.sheet-b .ig-list{flex:1;min-height:0;overflow-y:auto}
.veil:has(>.dialog.sheet){align-items:flex-end;padding:0}
.dialog.sheet{display:flex;flex-direction:column;max-width:640px;height:min(85vh,720px);border-bottom:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
@media(prefers-reduced-motion:reduce){.cpanel{animation:none}}
.ig-list{display:flex;flex-direction:column;gap:16px;padding:16px}
.ig-c{display:flex;align-items:flex-start;gap:12px}
.ig-c.reply{margin-top:14px}
.ig-t{white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(14.5px*var(--fs));line-height:1.45}
.ig-t a{color:var(--blue)}
.ig-t a.ig-u{margin-right:4px;color:var(--fg);font-weight:600}
.ig-cm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;font-size:calc(12.5px*var(--fs));color:var(--muted)}
.ig-cm button{font-weight:600;color:var(--muted)}
.ig-cm button:hover{color:var(--fg)}
.ig-dots{opacity:0;transition:opacity .12s}
.ig-c:hover .ig-dots,.ig-dots:focus-visible{opacity:1}
@media(hover:none){.ig-dots{opacity:1}}
.ig-view{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:calc(12.5px*var(--fs));font-weight:600;color:var(--muted)}
.ig-view>span{width:24px;border-top:1px solid var(--muted)}
.ig-view:hover{color:var(--fg)}
.ig-earlier .ig-view{margin:14px 16px 0}
.ig-cl{flex:none;display:inline-flex;margin-top:4px;padding:4px;color:var(--muted)}
.ig-cl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ig-cl:hover{color:var(--fg)}
.ig-cl.on{color:var(--heart)}
.ig-cl.on svg{fill:currentColor}
.ig-none{padding:8px 0;color:var(--muted);font-size:calc(14.5px*var(--fs))}
.ig-bottom{flex-wrap:wrap;margin-top:0;padding:10px 16px}
.ig-to{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:calc(13px*var(--fs));color:var(--muted)}
.ig-to .menu-b{width:26px;height:26px;font-size:calc(13px*var(--fs))}
/* The message box of Messages and Communities. */
.say{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;border-top:1px solid var(--border)}
.say textarea{flex:1;min-height:40px;max-height:160px;padding:9px 14px;border:1px solid var(--input);border-radius:20px;background:var(--card);resize:none;outline:none;transition:border-color .15s,box-shadow .15s}
.say textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}

/* ── Menus, dialogs and notes, as the app's popovers and Dialog */
.pop{position:absolute;z-index:85;min-width:210px;padding:5px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.pop button,.pop a{display:block;width:100%;padding:8px 10px;border-radius:8px;text-align:left;font-size:calc(14px*var(--fs))}
.pop button:hover,.pop a:hover{background:var(--hover)}
.pop .bad{color:var(--bad)}
.veil{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:rgb(0 0 0/.5);animation:fade .12s}
@keyframes fade{from{opacity:0}}
.dialog{width:100%;max-width:580px;max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow);animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.dialog.small{max-width:420px}
.dialog-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.dialog-b{padding:20px}
.dialog-f{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.compose textarea{width:100%;min-height:160px;padding:4px 0;font-size:calc(17px*var(--fs));resize:vertical;outline:none;border:0;background:none}
.compose .aud{margin-top:2px;padding:2px 8px;border:1px solid var(--input);border-radius:999px;font-size:calc(12.5px*var(--fs))}
.compose .embed-wrap{padding:12px 0 0}
.preview{position:relative;margin-top:12px}
.preview img{width:100%;max-height:360px;object-fit:contain;border-radius:var(--radius);background:var(--strip)}
.preview button{position:absolute;top:8px;right:8px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 24px);z-index:90;max-width:min(92vw,560px);padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);font-size:calc(14px*var(--fs));box-shadow:var(--shadow);transform:translateX(-50%);animation:rise .18s}
.toast a{color:var(--blue);font-weight:600}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}
/* A post being sent in the background (app.js paintDock): bottom left on every page, over the tab bar on a phone. */
.dock{position:fixed;left:calc(var(--rail) + 16px);bottom:calc(var(--tabs) + 16px);z-index:75;display:flex;flex-direction:column;gap:8px;width:min(320px,calc(100vw - 32px));padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);font-size:calc(14px*var(--fs));box-shadow:var(--shadow)}
.dock-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dock-n{color:var(--muted);font-variant-numeric:tabular-nums}
.dock-bar{height:6px;overflow:hidden;border-radius:3px;background:var(--secondary)}
.dock-bar i{display:block;height:100%;border-radius:3px;background:var(--blue);transition:width .3s}
.dock-bar.busy i{width:40%!important;animation:dock-busy 1.2s ease-in-out infinite}
@keyframes dock-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.dock-s,.dock-e{color:var(--muted);font-size:calc(12.5px*var(--fs))}
.dock-e{color:var(--fg)}
.dock.bad{border-color:var(--bad)}
.dock-acts{display:flex;gap:8px}
@media(prefers-reduced-motion:reduce){.dialog,.toast,.veil{animation:none}.btn:active{transform:none}.dock-bar i{transition:none}.dock-bar.busy i{animation:none;width:100%!important;opacity:.5}}

/* ── Profiles, laid out as LinkedIn's: the main column of boxes, a narrow one beside it. */
.li{display:flex;align-items:flex-start;gap:24px;width:100%;max-width:1160px;margin:0 auto;padding:32px 20px 80px}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.li-aside{width:320px;flex:none;display:flex;flex-direction:column;gap:16px}
@media(max-width:1023px){.li{flex-direction:column;align-items:stretch}.li-aside{width:100%}}
@media(max-width:600px){.li{padding:0 0 48px;gap:10px}.li .card{border-inline:0;border-radius:0}}
.li-top{overflow:hidden}
.li-cover{position:relative;height:200px;background:var(--accent) center/cover}
.li-cover-acts{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.li-head{display:flex;flex-direction:column;gap:6px;padding:0 24px 24px}
.li-photo{position:relative;z-index:1;margin-top:-104px;margin-bottom:8px}
.li-photo .av{border:4px solid var(--card)}
.li-photo .av.i{font-size:calc(52px*var(--fs))!important}
.li-photo .av.ring-open{box-shadow:0 0 0 4px var(--otw)}
.li-photo .av.ring-hiring{box-shadow:0 0 0 4px var(--hire)}
.li-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.li-name h1{font-size:calc(30px*var(--fs));line-height:1.2}
/* The top card's two columns (the owner, 2026-10-23): who they are on the left, their links on the right. */
.li-cols{display:flex;align-items:flex-start;gap:24px}
.li-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.li-bio{font-size:calc(16.5px*var(--fs));white-space:pre-line;overflow-wrap:anywhere}
.li-meta{color:var(--muted);font-size:calc(14px*var(--fs))}
.pf-links{flex:none;display:flex;flex-direction:column;gap:6px;width:min(240px,40%);margin-top:4px}
.pf-link{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:calc(14px*var(--fs));font-weight:600}
.pf-link:hover{border-color:var(--input);background:var(--hover)}
.pf-link svg{flex:none;width:18px;height:18px;color:var(--soft)}
.pf-link span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-links.in-dialog{flex-direction:row;flex-wrap:wrap;width:auto}
@media(max-width:700px){.li-cols{flex-direction:column;gap:12px}.pf-links{flex-direction:row;flex-wrap:wrap;width:auto;margin-top:0}.pf-link{min-height:34px}}
/* Posts, followers and following on a line of their own (the owner, 2026-10-23); followers and following open their lists. */
.pf-counts{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:14px;padding:8px 0;border-block:1px solid var(--border);font-size:calc(15px*var(--fs));color:var(--soft)}
.pf-counts>*{display:inline-flex;align-items:baseline;gap:5px;min-height:30px;padding:4px 0}
.pf-counts>:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.pf-counts b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.li-by{margin-top:10px;font-size:calc(13.5px*var(--fs))}
.li-actions{margin-top:14px;gap:8px}
.li-sec.locked{display:flex;align-items:center;gap:16px}
.li-sec.locked>svg{flex:none;width:44px;height:44px;padding:10px;border:1.5px solid var(--fg);border-radius:50%}
@media(max-width:600px){.li-cover{height:120px}.li-photo{margin-top:-60px}.li-photo .av{width:100px;height:100px}.li-photo .av.i{font-size:calc(34px*var(--fs))!important}.li-head{padding:0 16px 20px}.li-name h1{font-size:calc(26px*var(--fs))}}
.li-sec{padding:20px 24px}
.li-sec .sec-h{margin:-20px -24px 14px;padding:16px 24px;border-bottom:1px solid var(--border)}
.li-sec .sec-h h2{margin-bottom:0}
.li-aside h2{font-size:calc(18px*var(--fs))}
/* Why someone is suggested beside a profile, on up to two lines. */
.li-aside .person .who-h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.sec-h .textbtn{flex:none}
.li-sec .post{margin-top:12px}
/*
 * The profile's top right (the owner, 2026-10-22): its heart and likes, its recommendations, Share; beside
 * the photo on the standard profile, in a bar over a member's own design.
 */
.li-photo-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pf-acts{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.pf-acts .ig{min-width:38px;min-height:38px;padding:0 6px}
.pf-acts .ig.on.pf-like svg{fill:var(--heart);stroke:var(--heart);opacity:1;animation:beat .3s ease-out}
.pf-acts .ig.on.pf-rec svg{stroke:var(--blue);stroke-width:2.4;opacity:1;animation:beat .3s ease-out}
.pf-i{cursor:default}
.pf-i:hover svg{opacity:1}
.pf-n{min-height:38px;margin-left:-4px;padding:0 8px 0 2px;font-size:calc(14px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums}
.pf-n:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.pf-acts .ig.on.pf-like svg,.pf-acts .ig.on.pf-rec svg{animation:none}}
/*
 * A member's own design is the whole window (the owner, 2026-10-22: "the user's custom profile will be there
 * and just an overlay of the app's icons and sidebar"): the site's menu over it, and the bar of the
 * profile's buttons on its top right.
 */
.design{display:block;width:100%;border:0;background:#fff}
/* A member's design fills the window under the menu, and scrolls away: profiles and jobs follow it (2026-10-29). */
.pd-wrap{position:relative;width:calc(100% + var(--rail));height:calc(100vh - var(--top) - var(--tabs));height:calc(100dvh - var(--top) - var(--tabs));margin-left:calc(-1*var(--rail))}
.pd{position:absolute;inset:0;background:#fff}
.design.fill{height:100%}
/* Scrolled past it, the page has the wheel and the swipe: they bring it back up. */
.design.fill.passed{pointer-events:none}
.pd-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start;gap:16px;max-width:1100px;margin:0 auto;padding:24px 16px 48px}
.pd-bar{position:absolute;top:14px;right:16px;z-index:35;display:flex;align-items:center;gap:2px;max-width:calc(100vw - var(--rail) - 32px);padding:4px 6px;border:1px solid var(--border);border-radius:999px;background:var(--card);box-shadow:var(--shadow)}
.pd-bar .pf-acts{margin:0}
/* Whose page it is, to follow or message, at the bottom right: the top right is like, recommend and share alone (the owner, 2026-10-23). */
.pd-me{top:auto;bottom:14px;gap:8px;padding:4px 6px 4px 6px}
.pd-name{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(14px*var(--fs))}
.pd-me [data-rel]{flex-wrap:nowrap}
/* Posts as tiles, LinkedIn's Activity: a row that scrolls sideways, each tile its post's first lines. */
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,260px);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.tile{display:flex;flex-direction:column;gap:8px;min-height:180px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);scroll-snap-align:start}
.tile:hover{border-color:var(--input)}
.tile-h{display:flex;align-items:center;gap:8px;font-size:calc(12.5px*var(--fs));color:var(--muted)}
.tile-h>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-h b{color:var(--fg);font-weight:600}
.tile-t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(14px*var(--fs));line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.tile-i{width:100%;height:110px;border-radius:8px;object-fit:cover;background:var(--strip)}
.tile-i.only{height:170px}
.tile-v{position:relative;display:block}
.tile-v .tile-i{display:block}
.tile-play{position:absolute;inset:0;display:flex;width:44px;height:44px;margin:auto;align-items:center;justify-content:center;border-radius:50%;background:rgb(17 17 17/.72);color:#fff}
.tile-play svg{width:22px;height:22px;margin-left:2px}
.tile-s{margin-top:auto;color:var(--muted);font-size:calc(12.5px*var(--fs))}
.tile-w{align-self:flex-start;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--wait) 12%,transparent);color:color-mix(in srgb,var(--wait) 80%,var(--fg));font-size:calc(12px*var(--fs));font-weight:600}
.tile-w.bad{background:color-mix(in srgb,var(--bad) 10%,transparent);color:color-mix(in srgb,var(--bad) 75%,var(--fg))}
.tiles-all{margin-top:12px}
/* The latest three in a row beside the pinned posts (the owner, 2026-10-23: "the current small 3 latest posts row form"). */
.tiles.three{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
@media(max-width:600px){.tiles.three{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto}}
/* Pinned posts, whole, first among them (the owner, 2026-10-23: "the post will appear in its full form"). */
.pf-pinned{margin-bottom:16px}
.pf-pinned:empty{display:none}
.li-sec .pf-pinned .post{margin-top:0}
.via.pinned{color:var(--soft);font-weight:600}
.via.pinned svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-ph{font-size:calc(20px*var(--fs))}
.pf-views b{font-size:calc(28px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums}
/* People as small cards: who recommends a profile, and whom it recommends. */
.pf-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.pf-person{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:14px 10px;border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.pf-person:hover{background:var(--hover)}
.pf-person b{font-size:calc(14.5px*var(--fs));font-weight:600}
.pf-person .who-h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;white-space:normal}
/* Open to work as LinkedIn shows it (the owner, 2026-10-23): its heading, then what they are looking for. Hiring alike, in blue. */
.pf-otw{margin-top:16px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--otw) 45%,var(--border));border-radius:var(--radius);background:color-mix(in srgb,var(--otw) 7%,var(--card))}
.pf-otw h2{font-size:calc(16px*var(--fs));color:color-mix(in srgb,var(--otw) 55%,var(--fg))}
.pf-otw dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin-top:8px;font-size:calc(14.5px*var(--fs))}
.pf-otw dt{color:var(--muted)}
.pf-otw dd{overflow-wrap:anywhere}
.pf-otw p{margin-top:6px;font-size:calc(14.5px*var(--fs))}
.pf-otw.hiring{border-color:color-mix(in srgb,var(--hire) 45%,var(--border));background:color-mix(in srgb,var(--hire) 6%,var(--card))}
.pf-otw.hiring h2{color:color-mix(in srgb,var(--hire) 80%,var(--fg))}
@media(max-width:480px){.pf-otw dl{grid-template-columns:minmax(0,1fr)}.pf-otw dt{margin-top:4px}}
/* Projects to show (the owner, 2026-10-23: "showcase their projects"): a picture or a video over each, its skills, a way to it. */
/* Each in a row of its own (the owner, 2026-10-26); on a wide screen its picture or video beside its words. */
.pf-projects{display:flex;flex-direction:column;gap:14px}
@media(min-width:700px){.pf-projects .project:has(>.project-image,>.yt){flex-direction:row}.pf-projects .project>.project-image,.pf-projects .project>.yt{flex:none;width:min(320px,42%);align-self:flex-start}.pf-projects .project>.project-image{height:auto}}
.project{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.project-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--strip)}
.project-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.project h3{font-size:calc(16px*var(--fs))}
.project .when{color:var(--muted);font-size:calc(13.5px*var(--fs))}
.project-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.project-skills span{padding:1px 9px;border-radius:999px;background:var(--secondary);color:var(--soft);font-size:calc(12.5px*var(--fs));font-weight:600}
.project .desc{margin-top:6px;font-size:calc(14.5px*var(--fs));overflow-wrap:anywhere}
.project .url{align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;margin-top:8px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius);font-size:calc(13px*var(--fs));font-weight:600}
.project .url:hover{background:var(--hover)}
/* A YouTube video (the owner, 2026-10-23: "youtube video boxes"): its picture and a play button, YouTube's player once pressed. */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .15s}
.yt:hover img{opacity:1}
.yt-play{position:absolute;inset:0;width:68px;height:48px;margin:auto;padding:0}
.yt-play svg{width:68px;height:48px;filter:drop-shadow(0 2px 8px rgb(0 0 0/.35))}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.vid{max-height:80vh;margin-inline:auto}
.vid img{object-fit:contain}
.preview video{display:block;max-width:100%;max-height:320px;border-radius:8px;background:#000}
.post .yt{border-block:1px solid var(--border)}
.post .post-t+.yt{margin-top:-2px}
/* Jobs beside a profile (the owner, 2026-10-23: "profile and jobs recommendations"), with Apply and One click apply. */
.li-aside .jobcard{padding:12px 0;border-top:1px solid var(--border)}
.li-aside .sec-h+.jobcard{border-top:0;padding-top:0}
.pf-job-t{display:block;font-size:calc(15px*var(--fs));line-height:1.3}
.pf-job p{margin-top:2px}
.pf-job .apply-row{margin-top:10px}
.pf-job .apply,.pf-job .oneclick{min-height:32px;padding:0 11px;font-size:calc(13px*var(--fs))}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.entry{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--border)}
.entry .logo{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--secondary);color:var(--soft);font-weight:600}
.entry h3{font-size:calc(16px*var(--fs))}
.entry p{font-size:calc(14.5px*var(--fs))}
.entry .sub{color:var(--soft)}
.entry .when{color:var(--muted);font-size:calc(13.5px*var(--fs))}
.entry .desc{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.entry .url{display:inline-flex;align-items:center;min-height:32px;margin-top:10px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius);font-size:calc(13px*var(--fs));font-weight:600}
.entry .url:hover{background:var(--hover)}
/* Skills as a grid (the owner, 2026-10-22: "3 per row, centered"); a long one takes two places, or the row (profile.js `fitSkills`). */
.skill-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sk{flex:0 0 calc((100% - 20px) / 3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:12px;border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.sk.w2{flex-basis:calc((100% - 20px) / 3 * 2 + 10px)}
.sk.w3{flex-basis:100%}
.sk-n{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.sk-e{color:var(--muted);font-size:calc(12.5px*var(--fs))}
.sk-e:empty{display:none}
.sk-b{min-height:28px;margin-top:2px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--input);font-size:calc(12.5px*var(--fs));font-weight:600}
.sk-b:hover{background:var(--hover)}
.sk-b.on{background:var(--primary);color:var(--primary-fg);box-shadow:none}
.sec-h+.entry{border-top:0;padding-top:4px}
.contact-row{display:flex;flex-direction:column;gap:2px}

/* ── Search: the bar, LinkedIn's filters, and people to connect with under it. */
.input.big{min-height:46px;padding:.5rem 1rem;font-size:calc(16px*var(--fs))}
.filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:600px){.filter-row{grid-template-columns:1fr}}
.pymk{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.pymk-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 14px 16px;text-align:center}
.pymk-av{margin-bottom:8px}
.pymk-av .av{width:84px;height:84px}
.pymk-av .av.i{font-size:calc(28px*var(--fs))!important}
.pymk-n{font-size:calc(16px*var(--fs));font-weight:600}
.pymk-n:hover{text-decoration:underline;text-underline-offset:3px}
.pymk-h{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.9em}
.pymk-r{margin-bottom:12px;color:var(--muted);font-size:calc(13px*var(--fs))}
.pymk-card [data-rel]{margin-top:auto;justify-content:center}

/* ── Notifications, and requests to follow */
.sent-inv summary{cursor:pointer;list-style:none;font-weight:600}
.sent-inv summary::-webkit-details-marker{display:none}
.note-row{display:flex;align-items:center;gap:12px;padding:0 20px 0 0;border-bottom:1px solid var(--border);font-size:calc(14.5px*var(--fs))}
.note-row:last-child{border-bottom:0}
.note-row:hover{background:var(--hover)}
.note-link{display:flex;flex:1;min-width:0;align-items:center;gap:14px;padding:14px 0 14px 20px}
.note-row.unread{background:color-mix(in srgb,var(--blue) 6%,transparent);box-shadow:inset 3px 0 0 var(--blue)}
.note-row b{font-weight:600}
.note-thumb{flex:none;width:48px;height:48px;border-radius:8px;object-fit:cover}

/* ── Messages */
.dm{display:flex;height:calc(100vh - var(--top) - var(--tabs))}
.dm-list{width:360px;flex:none;border-right:1px solid var(--border);overflow-y:auto;background:var(--card)}
.dm-top{display:flex;align-items:center;justify-content:space-between;padding:22px 16px 10px 20px}
.dm-top h1{font-size:calc(24px*var(--fs))}
.dm-top .menu-b svg{width:22px;height:22px}
.dm-tabs{padding:0 16px 10px}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:6px;padding:0 5px;border-radius:10px;background:var(--blue);color:var(--blue-fg);font-size:calc(11.5px*var(--fs));font-weight:700}
.tab-count:empty{display:none}
.dm-note{padding:8px 18px;border-bottom:1px solid var(--border);background:var(--strip)}
.dm-h{margin:14px 20px 6px;color:var(--muted);font-size:calc(12.5px*var(--fs));font-weight:600}
.dm-pad{padding:0 20px}
/* A request: accept, delete or block before it can be answered, as on Instagram. */
.dm-ask{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-top:1px solid var(--border);background:var(--card);font-size:calc(14.5px*var(--fs))}
.dm-hello{display:flex;flex-direction:column;align-items:center;gap:6px;margin:auto;text-align:center}
.dm-hello .av{margin-bottom:6px}
.new-to{gap:10px}
.new-to .input{flex:1}
.conv{display:flex;align-items:center;gap:12px;width:100%;padding:12px 20px;text-align:left}
.conv:hover{background:var(--hover)}
.conv[aria-current=true]{background:var(--accent)}
.conv .who-h.unread{color:var(--fg);font-weight:700}
.conv .badge{position:static}
.dm-thread{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card)}
.dm-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)}
.dm-head [data-back]{display:none}
.dm-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--bg)}
.msg{max-width:min(70%,520px);padding:8px 14px;border:1px solid var(--border);border-radius:18px;background:var(--card);white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(14.5px*var(--fs))}
.msg.mine{align-self:flex-end;border-color:var(--primary);background:var(--primary);color:var(--primary-fg)}
.msg a{text-decoration:underline}
.msg-t{align-self:center;margin:12px 0 4px;color:var(--muted);font-size:calc(12.5px*var(--fs))}
.msg-card{max-width:min(70%,380px)}
.msg-card.mine{align-self:flex-end}
.msg-embed{display:block;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font-size:calc(14.5px*var(--fs))}
.msg-embed:hover{background:var(--hover)}
.msg-embed p{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-embed img{margin-top:8px;width:100%;max-height:200px;border-radius:8px;object-fit:cover}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Ticks (pages/messages.js): one sent, two delivered, two in blue read. The words stay in the bubble's own ink. */
.ticks{display:inline-flex;vertical-align:-3px;margin-left:6px;opacity:.75}
.ticks svg{width:16px;height:16px}
.msg.mine .ticks,.msg-card.mine .ticks{float:right;margin:5px -6px -3px 10px}
.ticks.read{color:#53bdeb;opacity:1}
.who-h .ticks{margin:0 2px 0 0}
.msg.locked{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-style:italic}
.msg.mine.locked{color:color-mix(in srgb,var(--primary-fg) 75%,transparent)}
.msg.locked>svg{width:16px;height:16px;flex:none;margin-top:3px}
.dm-e2ee{align-self:center;display:flex;gap:6px;align-items:center;max-width:440px;margin:4px auto 14px;padding:6px 12px;border-radius:10px;background:var(--strip);text-align:center}
.dm-e2ee svg{width:14px;height:14px;flex:none}
.dm-typing{padding:4px 18px 6px;font-style:italic}
@media(max-width:767px){
  .dm-list{width:100%;border-right:0}
  .dm.open .dm-list,.dm:not(.open) .dm-thread{display:none}
  .dm-head [data-back]{display:inline-flex}
}

/*
 * ── Jobs: the job display as it was before the social network (the owner, 2026-10-08: "keep the jobs
 * display the same as before but with the friends applying thing"), its layout kept and dressed as the
 * app's own job search (JobSearch.tsx): a search box and filters, then tiles that are cards, the title
 * in semibold and clamped to two lines. Laid out by the room beside the menu (container queries). Added:
 * Apply needs an account, the grey strip is One click apply, and the faces of your connections who applied
 * sit beside Apply.
 */
.classic{container-type:inline-size;line-height:1.5;color:var(--fg);background:var(--bg)}
.classic .c{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1.25rem}
.classic .arrow{flex:none;align-self:flex-end;width:1em;height:1em;margin:0 0 .125em .75rem;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.classic .hero{padding:2.75rem 0 2rem;border-bottom:1px solid var(--border);background:var(--bg);color:var(--fg)}
.classic .headline{margin:.25rem auto 0;font-size:min(36px,9vw);font-weight:600;line-height:1.2;letter-spacing:-.015em;text-align:center;text-wrap:balance}
.classic .search{max-width:1100px;margin:2rem auto 0}
.classic .q{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:0 .5rem 0 1rem;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 2px rgb(0 0 0/.04);transition:border-color .15s,box-shadow .15s}
.classic .q:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.classic .q input{flex:1;min-width:0;padding:.45rem 0;border:0;background:none;color:var(--fg);font-size:calc(17px*var(--fs));outline:none}
.classic .q button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--primary);color:var(--primary-fg)}
/* Centred in the send button: the arrow's own rule lowers it to the text's baseline elsewhere (the owner, 2026-10-21). */
.classic .q .arrow{align-self:center;width:18px;height:18px;margin:0}
.classic .q button:hover .arrow{transform:translateX(.15rem)}
.classic .search ::placeholder{color:var(--muted);opacity:1}
.classic .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.classic .filters input,.classic .filters select{width:100%;min-width:0;min-height:40px;padding:.4rem .75rem;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);color:var(--fg);font:inherit;font-size:calc(14.5px*var(--fs));outline:none;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.classic .filters #loc{grid-column:1/-1}
.classic .filters select{padding-right:2rem;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a8a8a' stroke-width='1.4' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right .8rem center/11px 7px;cursor:pointer}
.classic .filters select:has(option[value=""]:checked){color:var(--muted)}
.classic .filters option{background:var(--card);color:var(--fg)}
.classic .filters input:focus,.classic .filters select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.classic .results{min-width:0;padding-block:2rem 4rem}
.classic .count{margin-bottom:1.25rem;color:var(--muted);font-size:calc(15px*var(--fs))}
.classic .more-app{margin-left:.35rem;color:var(--blue);font-weight:500}
.classic .more-app:hover{text-decoration:underline}
.classic .jobs{--row:16rem;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--row);grid-auto-flow:row dense;gap:1rem}
.classic .job{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-card);transition:box-shadow .15s}
.classic .job:hover{box-shadow:0 4px 14px rgb(0 0 0/.07)}
.classic .niche{position:absolute;top:-.65rem;right:.9rem;z-index:5;padding:2px 10px;border-radius:999px;background:var(--primary);color:var(--primary-fg);font-size:calc(12px*var(--fs));font-weight:600;line-height:1.4;cursor:help;outline:none}
.classic .niche .tip{position:absolute;top:calc(100% + .4rem);right:0;display:none;width:min(17rem,80vw);padding:.7rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);font-size:calc(13.5px*var(--fs));font-weight:400;line-height:1.45;box-shadow:var(--shadow)}
.classic .niche:hover .tip,.classic .niche:focus .tip{display:block}
.classic .job.open{grid-row:span 3}
.classic .top{display:flex;flex:none;flex-direction:column;gap:.25rem;height:calc(var(--row) - 2px);padding:1rem 1rem .9rem;cursor:pointer}
.classic .top h3{margin-bottom:.3rem;font-size:calc(18px*var(--fs));font-weight:600;line-height:1.3}
.classic .top h3 button{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font:inherit;text-align:left}
.classic .top h3 button:hover{text-decoration:underline;text-underline-offset:3px}
.classic .top p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(14px*var(--fs));color:var(--muted)}
/* Apply and One click apply side by side, as the desktop app has them: Apply outlined, One click apply filled. */
:is(.classic,.jobcard) .apply,:is(.classic,.jobcard) .oneclick{display:flex;flex:none;align-items:center;gap:.4rem;min-height:36px;padding:0 14px;border-radius:var(--radius);font-size:calc(14px*var(--fs));font-weight:600;white-space:nowrap;transition:opacity .15s,background .15s}
:is(.classic,.jobcard) .apply{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--input)}
:is(.classic,.jobcard) .apply:hover{background:var(--hover)}
:is(.classic,.jobcard) .oneclick{background:var(--primary);color:var(--primary-fg)}
:is(.classic,.jobcard) .oneclick:hover{opacity:.85}
:is(.classic,.jobcard) .oneclick .bolt{flex:none;width:15px;height:15px}
:is(.classic,.jobcard) .apply:disabled,:is(.classic,.jobcard) .oneclick:disabled{background:var(--secondary);color:var(--muted);box-shadow:none;cursor:default;opacity:1}
.classic .apply .arrow,.classic .moreb .arrow{align-self:center;width:.85em;height:.85em;margin:0 0 0 .1rem}
:is(.classic,.jobcard) .apply:hover .arrow{transform:translateX(.25rem)}
/* Buttons on one line where they fit, else two; the faces of people you follow who applied under them. */
:is(.classic,.jobcard) .apply-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;margin-top:auto}
.classic .faces-slot{display:block;min-width:0;min-height:20px;margin-top:.35rem}
.classic .faces-slot:empty{display:none}
/* Save: a bookmark in the top-right corner, as LinkedIn has it, so the two Apply buttons keep their line. */
.classic .save{position:absolute;top:.85rem;right:.75rem;z-index:2;display:flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius);background:var(--card);color:var(--soft)}
.classic .top h3{padding-right:2.4rem}
.classic .save svg{width:17px;height:17px}
.classic .save:hover{background:var(--hover)}
.classic .save[aria-pressed=true] path{fill:currentColor}
.classic .faces-slot .faces{min-width:0;color:var(--soft);font-size:calc(13px*var(--fs))}
.classic .faces-slot .faces>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.classic .faces-slot .faces .av{box-shadow:0 0 0 2px var(--card)}
.classic .faces-slot .faces b{color:var(--fg)}
.classic .more{flex:1;min-height:0;overflow:auto;padding:.85rem 1rem 1rem;border-top:1px solid var(--border);font-size:calc(14px*var(--fs));animation:drop .25s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-.4rem)}}
@media(prefers-reduced-motion:reduce){.classic .more{animation:none}.classic .arrow{transition:none}}
:is(.classic,.jobcard) .facts p+p{margin-top:.15rem}
:is(.classic,.jobcard) .note{margin-top:1rem;color:var(--muted)}
:is(.classic,.jobcard) .more h4{margin:1rem 0 .4rem;font-size:calc(15px*var(--fs));font-weight:600}
:is(.classic,.jobcard) .more ul{display:flex;flex-direction:column;gap:.3rem;padding-left:1.1rem}
:is(.classic,.jobcard) .chips{display:flex;flex-wrap:wrap;gap:.4rem}
:is(.classic,.jobcard) .chips span{padding:1px 8px;border:1px solid var(--border);border-radius:8px;background:none;font-size:calc(12.5px*var(--fs))}
.classic .moreb{display:flex;align-items:center;min-height:40px;margin:2rem auto 0;padding:0 20px;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);font-size:calc(15px*var(--fs));font-weight:600;box-shadow:0 1px 2px rgb(0 0 0/.05)}
.classic .moreb:hover{background:var(--hover)}
.classic .foot{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;padding-block:2rem 3rem;border-top:1px solid var(--border);background:var(--bg);color:var(--muted);font-size:calc(13.5px*var(--fs))}
.classic .foot a:hover{color:var(--fg);text-decoration:underline}
.classic .top h3 button:focus-visible,.classic .apply:focus-visible,.classic .oneclick:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@container(min-width:640px){
  .classic .headline{font-size:calc(40px*var(--fs))}
  .classic .q input{font-size:calc(18px*var(--fs))}
}
@container(min-width:768px){
  .classic .headline{font-size:calc(48px*var(--fs))}
  .classic .jobs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container(min-width:1024px){
  .classic .hero{padding-top:3.5rem}
  .classic .headline{font-size:calc(54px*var(--fs))}
  .classic .filters{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
  .classic .filters #loc{grid-column:auto}
}

/*
 * ── Settings, laid out as Instagram's (the owner, 2026-10-21: "replicate the layout of instagram, fix the
 * screen being too narrow and too long to scroll"): the sections in a list on the left, the one chosen on
 * the right, one at a time; on a phone the list, then the section with Back.
 */
.set{display:grid;grid-template-columns:300px minmax(0,1fr);width:100%;max-width:1260px;min-height:100vh;margin:0 auto}
.set-side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;padding:32px 16px 40px 20px;border-right:1px solid var(--border);scrollbar-width:thin}
.set-side h1{margin:0 0 22px 12px;font-size:calc(24px*var(--fs))}
.set-group{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.set-group h2{margin:0 0 6px 12px;color:var(--muted);font-size:calc(12.5px*var(--fs));font-weight:600}
.set-group a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius);color:var(--fg);font-size:calc(15px*var(--fs))}
.set-group a svg{flex:none;width:20px;height:20px}
.set-group a:hover{background:var(--hover)}
.set-group a[aria-current=true]{background:var(--accent);font-weight:600}
.set-pane{min-width:0;padding:32px 40px 96px;container-type:inline-size}
.set-pane:not(.wide)>*{max-width:760px}
.pane-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px}
.pane-h h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:calc(24px*var(--fs))}
.pane-h p{margin-top:4px}
.set-back{display:none}
@media(max-width:767px){
  .set{display:block}
  .set-side{position:static;height:auto;border-right:0;padding:20px 16px}
  .set.open .set-side{display:none}
  .set:not(.open) .set-pane{display:none}
  .set-pane{padding:16px 16px 96px}
  .pane-h{flex-direction:column;gap:14px}
  .set-back{display:inline-flex;flex:none}
}
.hint{color:var(--muted);font-size:calc(13px*var(--fs));font-weight:400}
.sub-tabs{flex-wrap:wrap;margin-bottom:18px}
.sub-tabs .n{margin-left:6px;color:var(--muted);font-size:calc(12px*var(--fs));font-weight:500}
.sub-tabs .n:empty{display:none}
.list-ed{display:flex;flex-direction:column;gap:12px}
.list-ed .card{position:relative;padding:16px;box-shadow:none}
.list-ed .rm{position:absolute;top:10px;right:10px}
.save-bar{position:sticky;bottom:var(--tabs);z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px;padding:14px 0;border-top:1px solid var(--border);background:var(--bg)}
/* A choice saved as soon as it changes, as Instagram's switches. */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer}
.toggle:last-child{border-bottom:0}
.toggle>span{display:flex;flex-direction:column;gap:3px}
.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:var(--input);cursor:pointer;transition:background .15s}
.toggle input[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.25);transition:transform .15s}
.toggle input[type=checkbox]:checked{background:var(--primary)}
.toggle input[type=checkbox]:checked::after{transform:translateX(18px)}
html.dark .toggle input[type=checkbox]:checked::after{background:var(--primary-fg)}
.toggle input[type=radio]{flex:none;width:18px;height:18px;accent-color:var(--primary)}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
/* Edit Profile's pictures, as the profile shows them: the cover, and the photo over its edge. */
.pic-head{overflow:hidden}
/* No min-height: through the aspect ratio it became a min-width, and on a phone the cover and its button ran off the card. */
.pic-cover{position:relative;aspect-ratio:4/1;background:var(--accent) center/cover}
.pic-actions{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.pic-me{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 16px;padding:0 20px 18px}
/* The name keeps its line; on a phone the buttons go under it rather than squeeze it. */
.pic-me .grow{min-width:min(12rem,100%)}
.pic-av{position:relative;margin-top:-52px}
.pic-av .av{width:112px;height:112px;border:4px solid var(--card)}
.pic-av .av.i{font-size:calc(40px*var(--fs))!important}
@media(max-width:600px){.pic-av{margin-top:-40px}.pic-av .av{width:84px;height:84px}.pic-av .av.i{font-size:calc(30px*var(--fs))!important}}
/* The crop: drag and zoom inside the shape it will have (app.js cropImage). */
.crop{position:relative;width:100%;overflow:hidden;border-radius:var(--radius);background:#111;touch-action:none;cursor:grab;outline-offset:3px}
.crop:active{cursor:grabbing}
.crop canvas{display:block;width:100%;height:100%}
.crop.round::after{content:'';position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 9999px rgb(0 0 0/.55);pointer-events:none}
.crop:not(.round)::after{content:'';position:absolute;inset:0;border:2px solid rgb(255 255 255/.85);border-radius:var(--radius);pointer-events:none}
.zoom{display:flex;align-items:center;gap:12px}
.zoom input{flex:1;accent-color:var(--primary)}
/* Edit Profile's links: the icon as it will show, the name, the address. */
.links-ed{margin-top:20px}
.link-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr) auto;align-items:center;gap:8px}
.link-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;color:var(--soft)}
.link-ic svg{width:18px;height:18px}
@media(max-width:600px){.link-row{grid-template-columns:auto minmax(0,1fr) auto}.link-row [data-link-url]{grid-column:1/-1;grid-row:2}}
.proj-pic{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.proj-pic img{width:120px;height:68px;border-radius:8px;object-fit:cover;background:var(--strip)}
/* Design Your Profile (the owner, 2026-10-23): three steps, the files dropped in above, the preview under them at full width. */
.steps{display:flex;flex-direction:column;gap:12px;list-style:none}
.step{display:flex;gap:16px;padding:18px 20px}
.step-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--primary-fg);font-size:calc(14px*var(--fs));font-weight:700}
.step h3{margin-bottom:2px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:24px;border:2px dashed var(--input);border-radius:var(--radius-xl);background:var(--strip);text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.drop svg{width:34px;height:34px;color:var(--soft)}
.drop:hover,.drop.over{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--card))}
.dfiles{display:flex;flex-direction:column;list-style:none;border:1px solid var(--border);border-radius:var(--radius)}
.dfile{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;border-top:1px solid var(--border)}
.dfile:first-child{border-top:0}
.dfile-n{flex:1;min-width:10rem;display:flex;flex-direction:column}
.dfile.none b{color:var(--muted)}
.dpics-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px}
.pic-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(13.5px*var(--fs))}
.dprev-card{margin-top:16px;padding:16px}
/* On a phone its three buttons would stand over half the screen: they wait at the end instead. */
@media(max-width:600px){.set-pane.wide .save-bar{position:static}}
.dprev-h{flex-wrap:wrap;align-items:flex-start;margin:0 0 12px}
.dprev-h>div{flex:1 1 20rem}
.dprev-h .feed-tabs{flex:none}
.prompt{min-height:300px;font-size:calc(12px*var(--fs))}
/* One click apply, when the desktop app is not open: its picture over the words. */
.app-mark{display:flex;justify-content:center;margin-bottom:4px}
.app-mark svg{width:48px;height:48px;padding:10px;border-radius:16px;background:var(--secondary);color:var(--fg)}
.state{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid currentColor;border-radius:999px;color:var(--soft);font-size:calc(12px*var(--fs));font-weight:600}
.state.pending{color:var(--wait)}
.state.approved{color:var(--ok)}
.state.rejected{color:var(--bad)}
details.code-v summary{cursor:pointer;margin:8px 0;color:var(--blue);font-size:calc(14px*var(--fs));font-weight:500}
details.code-v pre{max-height:280px;overflow:auto;padding:12px;border-radius:var(--radius);background:var(--strip);white-space:pre-wrap;overflow-wrap:anywhere}
.meter{height:8px;border-radius:4px;background:var(--secondary);overflow:hidden}
.meter span{display:block;width:0;height:100%;border-radius:4px;background:var(--primary);transition:width .2s}
.meter.over span{background:var(--bad)}
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.pic{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:var(--radius)}
.pic img{width:100%;height:110px;border-radius:8px;object-fit:cover;background:var(--strip)}
.dprev{border:1px solid var(--border);border-radius:var(--radius);background:var(--strip);overflow:hidden}
/* A window's height, scrolled inside, as the profile shows it. */
.dprev .design{height:80vh}
.dprev.phone{width:390px;max-width:100%;margin:0 auto}

/* ── My items */
.job-row{display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--border)}
.job-row:first-child{border-top:0}
h3+.job-row{border-top:0}
.job-row b{font-weight:600}

/* ── Sign in: a card on the ground, as the app's sign-in */
.auth{display:flex;min-height:calc(100vh - var(--top) - var(--tabs));align-items:center;justify-content:center;padding:32px 16px;background:var(--bg)}
.auth .card{width:100%;max-width:400px;padding:32px 28px}
.auth .brand{justify-content:center;margin:0 0 8px;font-size:calc(28px*var(--fs))}
.auth .sub{margin-bottom:24px;color:var(--muted);text-align:center}
.auth form{display:flex;flex-direction:column;gap:10px}
.auth .alt{margin-top:18px;text-align:center;font-size:calc(14px*var(--fs))}
.auth .or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:calc(13px*var(--fs))}
.auth .or::before,.auth .or::after{content:"";flex:1;border-top:1px solid var(--border)}
.legal{margin-top:16px;color:var(--muted);font-size:calc(12.5px*var(--fs));text-align:center}
.legal a{color:var(--blue)}

/* ── The Jobs tab of Home (pages/home.js): a job as a card, saying why it is there, with the jobs page's buttons. */
.jobcard{padding:14px 16px}
.jc-why{display:flex;align-items:center;gap:8px;min-height:20px;margin-bottom:10px;font-size:calc(13px*var(--fs))}
.jc-why .faces{font-size:calc(13px*var(--fs))}
.jc-h{display:flex;align-items:flex-start;gap:12px}
.jc-logo{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--secondary);color:var(--soft);font-weight:600;text-transform:uppercase}
.jc-h h3{font-size:calc(17px*var(--fs));line-height:1.3}
.jc-h h3 button{font:inherit;text-align:left}
.jc-h h3 button:hover{text-decoration:underline;text-underline-offset:3px}
.jc-h p{margin-top:2px}
.jobcard .more{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:calc(14px*var(--fs))}
.jobcard .apply-row{margin-top:14px}
.jobcard .apply .arrow{flex:none;align-self:center;width:.85em;height:.85em;margin:0 0 0 .1rem;transition:transform .15s}
.jobcard .save{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius);color:var(--soft)}
.jobcard .save svg{width:18px;height:18px}
.jobcard .save:hover{background:var(--hover)}
.jobcard .save[aria-pressed=true] path{fill:currentColor}

/* ── Communities (communities.js), in Messages: a community's face, its initials on a rounded square. */
.av.gav{border-radius:14px;background:var(--accent);color:var(--fg)}
.av.s.gav{border-radius:10px;font-size:calc(12px*var(--fs))!important}
.dm-head .who{min-width:0}
.dm-head .who-n{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.av.xl.gav{border-radius:36px}
.g-find{padding:0 16px 10px}
.g-by{display:flex;align-items:center;gap:8px;margin:8px 0 -2px;font-size:calc(12.5px*var(--fs));color:var(--muted)}
.g-by a{display:inline-flex;align-items:center;gap:6px;color:var(--soft)}
.g-by .av{width:20px;height:20px;font-size:calc(8px*var(--fs))!important}
.g-msg{cursor:pointer}
fieldset{margin:0;padding:0;border:0}

/* A page shared in a post, as a card (app.js pageCard). */
.pg-card{display:flex;gap:12px;align-items:stretch;overflow:hidden}
.pg-card img{width:120px;min-height:90px;object-fit:cover;flex:none;border-radius:8px}
.pg-card-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.pg-card-t .chip{align-self:flex-start}
/* Sensitive media behind a warning, until the viewer chooses to see it (X's setting). */
.sensitive{position:relative;overflow:hidden;border-radius:var(--radius)}
.sensitive:not(.shown)>:not(.sensitive-veil){filter:blur(28px);pointer-events:none}
.sensitive-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:rgb(0 0 0/.35);color:#fff;text-align:center}
.ig.views[disabled]{cursor:default;opacity:1}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.stat b{font-size:calc(20px*var(--fs))}
.ig-held{margin-top:4px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--wait) 10%,transparent);color:var(--wait);font-size:calc(12.5px*var(--fs))}
.ig-held.rejected{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}

/*
 * The member's Display and Accessibility settings (app.js applyDisplay, boot.js): text size scales every font size
 * (--fs) and nothing else, so the layout holds; more contrast darkens the quieter text and the edges; less motion
 * stills the animations (a spinner only slows); the theme is html.dark above.
 */
html[data-size=small]{--fs:.93}
html[data-size=large]{--fs:1.1}
html[data-size=xlarge]{--fs:1.2}
html.contrast{--soft:#222;--muted:#2e2e2e;--faint:#3d3d3d;--border:#9c9a94;--input:#4a4844}
html.dark.contrast{--soft:#fafafa;--muted:#e4e4e4;--faint:#d0d0d0;--border:#6e6e6e;--input:#b4b4b4}
html.still *,html.still ::before,html.still ::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.still .spin{animation-duration:3s!important;animation-iteration-count:infinite!important}

/* Two-step verification: its steps, the QR code (always on white, as a camera reads it best) and the recovery codes. */
.steps-2fa{display:flex;flex-direction:column;gap:18px;margin-top:6px;padding-left:20px;font-size:calc(14.5px*var(--fs))}
.steps-2fa code{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:8px;background:var(--secondary);font-size:calc(14px*var(--fs));letter-spacing:.06em;word-break:break-all}
.qr{width:184px;margin-top:10px;padding:10px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.qr svg{width:100%;height:auto}
.codes{padding:12px 16px;border-radius:var(--radius);background:var(--secondary);font:calc(15px*var(--fs))/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;columns:2;column-gap:32px;white-space:pre}

/*
 * Pages (the owner, 2026-10-25: "we'll call them pages"): the list of yours and the editor (pages/write.js), a page
 * as a document is read (pages/userpage.js, pagedoc.js; the admin page too), and the cards of them on a profile.
 */
.wr{width:100%;max-width:880px;margin:0 auto;padding:28px 20px 80px}
.wr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.wr-head>div:first-child{flex:1 1 22rem}
.wr-head h1{font-size:calc(28px*var(--fs))}
.wr-head .btn svg{width:18px;height:18px}
.wr-row{display:flex;align-items:center;gap:14px;padding:12px 14px}
.wr-thumb{display:flex;align-items:center;justify-content:center;width:88px;height:60px;flex:none;overflow:hidden;border-radius:10px;background:var(--strip);color:var(--muted)}
.wr-thumb img{width:100%;height:100%;object-fit:cover}
.wr-thumb svg{width:26px;height:26px}
.wr-row-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.wr-row-t b{font-size:calc(16px*var(--fs))}
.wr-ed{max-width:820px}
.wr-bar{position:sticky;top:var(--top);z-index:20;display:flex;align-items:center;gap:10px;margin:-28px -20px 18px;padding:12px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.wr-bar [data-status]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wr-ed .review{margin:0 0 16px}
.wr-cover{margin-bottom:10px}
.wr-cover-add{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.wr-cover-add svg{width:20px;height:20px}
.wr-cover-img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--radius-xl)}
.wr-cover-a{display:flex;gap:8px;margin-top:8px}
.wr-title,.wr-sum{display:block;width:100%;resize:none;overflow:hidden;border:0;outline:none;background:none;color:var(--fg)}
.wr-title{font-size:calc(38px*var(--fs));font-weight:700;line-height:1.15}
.wr-sum{margin:8px 0 18px;color:var(--soft);font-size:calc(19px*var(--fs));line-height:1.45}
.wr-title::placeholder,.wr-sum::placeholder{color:var(--faint)}
.ed-tools{position:sticky;top:calc(var(--top) + 61px);z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:14px;padding:5px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-card)}
.ed-tools button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;padding:0 8px;border-radius:8px;color:var(--soft);font-size:calc(14px*var(--fs))}
.ed-tools button:hover{background:var(--hover);color:var(--fg)}
.ed-tools button[aria-pressed=true]{background:var(--accent);color:var(--fg)}
.ed-tools svg{width:18px;height:18px}
.ed-tools b,.ed-tools i,.ed-tools u,.ed-tools s{font-size:calc(16px*var(--fs))}
.ed-style{height:34px;padding:0 8px;border:1px solid var(--input);border-radius:8px;background:var(--card);font-size:calc(14px*var(--fs))}
.ed-sep{width:1px;height:22px;margin:0 4px;background:var(--border)}
.ed-doc{position:relative;min-height:360px;padding:4px 0 40px;outline:none;caret-color:var(--fg)}
.ed-doc.blank::before{content:attr(data-ph);position:absolute;top:4px;left:0;right:0;color:var(--faint);pointer-events:none}
.ed-doc a{color:var(--blue);text-decoration:underline}
.ed-tip{margin-top:-24px}
.ed-file{display:flex;flex-direction:column;gap:8px;margin:6px 0;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);user-select:none}
.ed-file:hover{border-color:var(--input)}
.ed-file-v{position:relative}
.ed-file-v>img{display:block;max-height:420px;margin:0 auto;border-radius:8px}
.ed-file[data-w=wide] .ed-file-v>img{width:100%;max-height:none;object-fit:cover}
.ed-badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:rgb(0 0 0/.7);color:#fff;font-size:calc(13px*var(--fs))}
.ed-badge svg{width:16px;height:16px}
.ed-pdf{display:flex;align-items:center;gap:10px}
.ed-pdf>svg{width:30px;height:30px;flex:none;color:var(--soft)}
.ed-pdf>span{display:flex;flex-direction:column}
.ed-file-f{display:flex;flex-direction:column;gap:6px;user-select:text}
.ed-file-f .input{min-height:34px;font-size:calc(14px*var(--fs))}
.ed-file-a{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

.pg{width:100%;max-width:760px;margin:0 auto;padding:32px 20px 80px}
.pg>.review{margin:0 0 20px}
.pg-cover{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;margin-bottom:24px;border-radius:var(--radius-xl)}
.pg-h h1{font-size:calc(40px*var(--fs));line-height:1.12;letter-spacing:-.01em}
.pg-sum{margin-top:10px;color:var(--soft);font-size:calc(20px*var(--fs));line-height:1.45}
.pg-by{display:flex;align-items:center;gap:10px;margin:22px 0 28px;padding:12px 0;border-block:1px solid var(--border)}
.pg-by .ig{min-width:36px;min-height:36px}
.pg-by .ig svg{width:20px;height:20px}
.pg-doc{display:flex;flex-direction:column;gap:18px;font-size:calc(18px*var(--fs));line-height:1.7}
.pg-doc p,.pg-doc li,.pg-doc blockquote,.pg-doc h2,.pg-doc h3{white-space:pre-wrap;overflow-wrap:anywhere}
.pg-doc h2{margin-top:14px;font-size:calc(27px*var(--fs));line-height:1.25}
.pg-doc h3{margin-top:8px;font-size:calc(21px*var(--fs));line-height:1.3}
.pg-doc blockquote{padding-left:18px;border-left:3px solid var(--fg);color:var(--soft);font-style:italic}
.pg-doc ul,.pg-doc ol{display:flex;flex-direction:column;gap:6px;padding-left:26px}
.pg-doc hr{width:100%;border-top:1px solid var(--border)}
.pg-doc a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.pg-doc code{padding:1px 6px;border-radius:5px;background:var(--secondary);font:.86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pg-doc pre,.pg-code{padding:14px 16px;border-radius:var(--radius);background:var(--strip);overflow:auto;font:calc(14px*var(--fs))/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.pg-doc pre code,.pg-code code{padding:0;background:none;font:inherit}
.pg-fig{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.pg-fig img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--radius)}
.pg-fig.wide img{width:100%}
.pg-fig figcaption{color:var(--muted);font-size:calc(14px*var(--fs));text-align:center}
.pg-pdf{padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.pg-pdf-h{display:flex;align-items:center;gap:12px}
.pg-pdf-h svg{width:30px;height:30px;flex:none;color:var(--soft)}
.pg-pdf-t{flex:1;display:flex;flex-direction:column;min-width:0;font-size:calc(15px*var(--fs));line-height:1.4}
.pg-pdf-t b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pg-pdf-t span{color:var(--muted);font-size:calc(13px*var(--fs))}
.pg-pdf-v{display:block;width:100%;height:80vh;margin-top:12px;border:1px solid var(--border);border-radius:8px;background:#fff}
.pg-pdf figcaption{margin-top:8px;color:var(--muted);font-size:calc(14px*var(--fs))}
.pg-wait{padding:28px;border-radius:var(--radius);background:var(--strip);color:var(--muted);text-align:center;font-size:calc(14px*var(--fs))}
.pg-foot{margin-top:40px}
.pg-foot .pg-by{margin:0;border-bottom:0}
.pg-own-float{position:fixed;left:calc(var(--rail) + 16px);right:240px;top:calc(var(--top) + 14px);z-index:34;display:flex;align-items:flex-start;gap:4px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.pg-own-float .review{flex:1;margin:0}
.pf-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pf-page{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg)}
.pf-page:hover{border-color:var(--input)}
.pf-page img,.pf-page-ph{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;background:var(--strip)}
.pf-page-t{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:767px){
  .wr{padding:20px 14px 80px}
  .wr-bar{margin:-20px -14px 14px;padding:10px 14px;flex-wrap:wrap}
  .wr-title{font-size:calc(30px*var(--fs))}
  .ed-tools{top:calc(var(--top) + 100px)}
  .ed-tools button span{display:none}
  .pg-h h1{font-size:calc(30px*var(--fs))}
  .pg-doc{font-size:calc(17px*var(--fs))}
  .pg-own-float{left:12px;right:12px;top:calc(var(--top) + 70px)}
}

/*
 * Charts (charts.js: the admin page's insights and a member's own analytics), one method: thin marks (2px lines, bars
 * at most 14px with a 4px rounded end), recessive hairline grids, values in the text inks and never in a series
 * colour, a legend whenever there are two series or more, a table behind every chart. The series colours are a
 * validated categorical set (blue, orange, aqua: checked for colour-blind separation on the card surfaces, light #fff
 * and dark #1c1c1c); a chart never carries more than three.
 */
:root{
  --chart-surface:var(--card);--chart-grid:#e9e8e3;--chart-axis:#c3c2b7;--chart-ink:#111;--chart-ink-2:#52514e;--chart-muted:#898781;
  --series-1:#2a78d6;--series-2:#eb6834;--series-3:#1baf7a;--de:#b8b6ae;
  --good:#0ca30c;--warning:#fab219;--serious:#ec835a;--critical:#d03b3b;
  /* An ordered ramp (the funnel's steps): one hue, the first step lightest; never lighter than 2:1 on the surface. */
  --ord-1:#86b6ef;--ord-2:#6da7ec;--ord-3:#5598e7;--ord-4:#3987e5;--ord-5:#2a78d6;--ord-6:#1c5cab;
}
html.dark{
  --chart-grid:#2c2c2a;--chart-axis:#3a3a38;--chart-ink:#f0efec;--chart-ink-2:#c3c2b7;--chart-muted:#898781;
  --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--de:#5a5955;
  /* On the dark surface the ramp runs the other way: the first step darkest, never darker than step 600. */
  --ord-1:#184f95;--ord-2:#1c5cab;--ord-3:#256abf;--ord-4:#2a78d6;--ord-5:#3987e5;--ord-6:#6da7ec;
}
.tiles-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.tile-k{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.tile-k .label{color:var(--chart-ink-2);font-size:13px}
.tile-k .value{color:var(--chart-ink);font-size:26px;font-weight:650;line-height:1.15}
.tile-k .delta{font-size:12.5px;color:var(--chart-ink-2)}
.tile-k .spark{margin-top:4px}
.fig{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--chart-surface)}
.fig-h{display:flex;align-items:baseline;gap:10px}
.fig-h h3{flex:1;font-size:14px;font-weight:650;color:var(--chart-ink)}
.fig-h .sub{color:var(--chart-ink-2);font-size:12.5px}
.fig-tbl{font-size:12px;color:var(--chart-ink-2);text-decoration:underline;text-underline-offset:3px}
.fig .plot{position:relative;resize:vertical;overflow:hidden;min-height:110px;max-height:85vh}
.fig.wide{grid-column:1/-1}
.fig svg{display:block;width:100%;overflow:visible}
.fig svg:focus{outline:none}
.fig svg:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.fig .grid line{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges}
.fig .base{stroke:var(--chart-axis);stroke-width:1;shape-rendering:crispEdges}
.fig .tick{fill:var(--chart-muted);font-size:11px;font-variant-numeric:tabular-nums}
.fig .end{fill:var(--chart-ink-2);font-size:11.5px}
.fig .end b{fill:var(--chart-ink)}
.fig .cross{stroke:var(--chart-axis);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--chart-ink-2);font-size:12.5px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:14px;height:2px;border-radius:1px}
.ch-tip{position:fixed;z-index:90;min-width:120px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);box-shadow:var(--shadow);font-size:12.5px;pointer-events:none}
.ch-tip .t{margin-bottom:4px;color:var(--chart-ink-2)}
.ch-tip .r{display:flex;align-items:center;gap:8px}
.ch-tip .r i{display:inline-block;width:12px;height:2px;border-radius:1px}
.ch-tip .r b{color:var(--chart-ink);font-variant-numeric:tabular-nums}
.ch-tip .r span{color:var(--chart-ink-2)}
.ch-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.ch-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ch-table th,.ch-table td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.ch-table th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:600;white-space:nowrap}
.ch-table td.num,.ch-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-table tr:last-child td{border-bottom:0}
.ch-table tr[data-href]{cursor:pointer}
.ch-table tr[data-href]:hover td{background:var(--hover)}
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(110px,42%) 1fr;gap:10px;align-items:center;font-size:13px}
.bar-row .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chart-ink)}
.bar-row .track{display:flex;align-items:center;gap:8px;min-width:0}
.bar-row .fill{height:14px;min-width:2px;border-radius:0 4px 4px 0}
.bar-row .val{color:var(--chart-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Your analytics (pages/analytics.js) */
.an{width:100%;max-width:1120px;margin:0 auto;padding:28px 20px 80px}
.an-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.an-head h1{font-size:calc(28px*var(--fs))}
.an-note{margin-bottom:14px}
.an .tiles-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.an-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-bottom:14px}
.an-link{cursor:pointer;border-radius:6px}
.an-link:hover .lab{text-decoration:underline}
@media(max-width:767px){.an{padding:20px 14px 80px}.an-grid{grid-template-columns:1fr}}

/* ── 2026-10-29 */
/* Log in and Create account: the other one on a line of its own; why they were sent to make an account. */
.auth .alt.then{margin-top:4px}
.auth .said{padding:10px 12px;border-radius:var(--radius);background:var(--hover);color:var(--fg);font-size:calc(14px*var(--fs));text-align:center}
/* Your own profile: a pencil beside what you can change, a plus to start a post or a page. */
.pf-tool{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;color:var(--fg)}
.pf-tool:hover{background:var(--hover)}
.pf-tool svg{width:19px;height:19px}
.li-name .pf-tool{width:30px;height:30px}
.pf-otw .sec-h{margin-bottom:6px}
.pf-v{cursor:default}
.pf-v:hover{text-decoration:none}
/* @mentions as they are typed. */
.mention-list{display:flex;flex-direction:column;max-height:264px;overflow-y:auto;margin-top:6px;padding:4px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.mention-list.up{position:absolute;left:12px;right:12px;bottom:100%;z-index:6;margin:0 0 6px}
.ig-say.ig-bottom{position:relative}
.mention-o{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:none;color:var(--fg);text-align:left;cursor:pointer}
.mention-o[aria-selected=true],.mention-o:hover{background:var(--hover)}
.mention-o .who-t{display:flex;flex-direction:column;min-width:0}
.mention-o b{font-size:calc(14px*var(--fs))}
/* A bug report's screenshot. */
.shot{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.shot img{max-width:100%;max-height:220px;border:1px solid var(--border);border-radius:var(--radius)}
/* An admin's pop-up. */
.dialog.popup .popup-media{display:block;width:100%;max-height:60vh;border-radius:var(--radius);object-fit:contain}
.dialog.popup video.popup-media{background:#000}
.dialog.popup .dialog-f{justify-content:flex-end}
.dialog-f.share-f{flex-wrap:wrap}
/* A person's box in the look its member chose (box.js): words in black or white, whichever reads on it; white over a shade on a picture. */
.pymk-card.coloured{background:var(--box-bg)}
.pymk-card.pictured{background:linear-gradient(rgb(0 0 0/.6),rgb(0 0 0/.6)),var(--box-img) center/cover no-repeat,var(--box-bg,#222)}
.pymk-card.lined{border:2px solid var(--box-line)}
.pymk-card.coloured,.pymk-card.pictured,.pymk-card.coloured .who-h,.pymk-card.pictured .who-h,.pymk-card.coloured .pymk-r,.pymk-card.pictured .pymk-r{color:var(--box-ink)}
.pymk-card.coloured .btn.ghost,.pymk-card.pictured .btn.ghost{background:var(--card);color:var(--fg)}
/* Your box in search, in Edit Profile: as others will see it, beside its colours and picture. */
.look-ed{margin-top:20px}
.look-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.look-prev{flex:none;width:220px}
.look-cs{flex:1;min-width:220px}
.look-c{display:flex;align-items:center;gap:10px;min-height:36px}
.look-c>span:first-child{min-width:84px;font-size:calc(14px*var(--fs));font-weight:600}
.look-c input[type=color]{width:46px;height:32px;padding:2px;border:1px solid var(--input);border-radius:8px;background:var(--card);cursor:pointer}
/* We Design Your Profile (Settings, and the admin page's Inspirations): what is left to fill in, and the portfolios the
   admins chose, two a row, each its picture until Preview shows the page itself, small, as a 1280-wide window scaled. */
.offer-needs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.offer-needs li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;border-bottom:1px solid var(--border)}
.offer-needs li:last-child{border-bottom:0}
.insp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:600px){.insp-grid{grid-template-columns:1fr}}
.insp{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.insp-shot{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:var(--strip)}
.insp-shot img{width:100%;height:100%;object-fit:cover}
.insp-shot>span{color:var(--muted);font-weight:600}
.insp-shot iframe{position:absolute;top:0;left:0;width:1300px;max-width:none;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.insp-b{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px}
.insp-b b{overflow-wrap:anywhere}
.insp-b p{display:-webkit-box;overflow:hidden;color:var(--soft);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.insp-acts{gap:8px;margin-top:6px}
/* We Design Your Profile: the three ways to tell people, one chosen; its few words; the screenshot. The design that
   came, in a wide dialog, and the post to put on LinkedIn under it. */
.offer-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:600px){.offer-ways{grid-template-columns:1fr}}
.offer-way{min-height:44px;padding:8px 12px;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);font-weight:600}
.offer-way:hover{background:var(--hover)}
.offer-way[aria-checked=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.offer-how{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--radius);background:var(--strip)}
.offer-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.offer-proof img{max-width:160px;max-height:160px;border:1px solid var(--border);border-radius:10px;object-fit:contain;background:var(--strip)}
.dialog.ready{display:flex;flex-direction:column;max-width:min(1100px,100%);height:calc(100vh - 40px)}
.ready-prev{flex:1;min-height:0;margin:0 16px;border-radius:var(--radius)}
.ready-prev .design{height:100%}
.ready-share textarea{min-height:76px}
/* A profile a post shares (2026-10-29): its first screen, one link. A design of the member's own is a 1280 by 800 window (drawn 20px wider, its scrollbar left outside)
   scaled to the card (app.js drawShot); else the profile's top, as a recommendation shows it. */
.prof-shot{color:inherit}
.prof-shot .rec-cover{margin:0;border-radius:0;height:110px}
.prof-screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--strip)}
.prof-frame{position:absolute;top:0;left:0;display:block;width:1300px;height:800px;transform-origin:0 0;pointer-events:none}
.prof-frame .design{height:100%}
.prof-shot>.embed-h{border-top:1px solid var(--border)}
/* The name beside the logo (the owner, 2026-11-02: "Make the logo oporch (in small letters) and half the vertical height
   of the logo icon. Keep the font of it that was before you did any changes to it"): "oporch" in Nunito ExtraBold, as
   it first was, its outlines in oporch.svg in the colour of the text. The box is 0.928 of the mark's height, so the
   letters' body (o, p, o, r, c) is half the mark, centred on it, with h above and p below. In the rail it comes as the
   rail opens, as the menus' names do. */
.wordmark{flex:none;display:inline-block;height:26px;aspect-ratio:3134/928;background:currentColor;-webkit-mask:url(/oporch.svg?v=nunito) center/contain no-repeat;mask:url(/oporch.svg?v=nunito) center/contain no-repeat}
.rail .brand .wordmark{opacity:0;transition:opacity .12s}
.rail:hover .brand .wordmark,.rail:focus-within .brand .wordmark{opacity:1;transition-delay:.08s}
.topbar .wordmark{height:22.3px}
.join-card .brand{gap:10px;margin:0 0 4px;font-size:inherit}
.join-card p{margin:0}

/* A post inside another, whole (2026-11-01): its header, then all of it. */
.embed.quote{cursor:pointer}
.embed.quote:hover{background:none;border-color:var(--input)}
.embed.quote>.embed-h{color:inherit}
.embed.quote>.embed-h>span{display:flex;flex-direction:column;min-width:0}
.embed.quote .post-t{padding:0 12px 10px}
.embed.quote .post-i{border-bottom:0}
.embed.quote .embed-wrap{padding:0 12px 12px}
.embed.quote .yt,.embed.quote [data-vid]{border-radius:0}

/* A page of a member's site in a post: its first screen, live and small. */
.pg-shot{color:inherit}
.pg-shot>.embed-h{border-top:1px solid var(--border)}
.pg-shot .pg-card-t{gap:2px}
.pf-page .prof-screen{aspect-ratio:2/1;border-bottom:1px solid var(--border)}

/* A page's corner (2026-11-01: "a floating like, shake, reshare and comment button on a bottom right floater"): whose it
   is, then its like, comments, repost and share, over the page. */
.pg-float{position:fixed;right:16px;bottom:calc(var(--tabs) + 16px);z-index:36;display:flex;align-items:center;gap:2px;max-width:calc(100vw - var(--rail) - 32px);padding:4px 6px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-float .ig{min-width:38px;min-height:38px;padding:0 7px;gap:4px}
.pg-float .ig svg{width:22px;height:22px}
.pg-float .ig.on[data-f-like] svg{fill:var(--heart);stroke:var(--heart);animation:beat .3s ease-out}
.pg-float .ig.on[data-f-repost]{color:var(--blue)}
.pg-n{font-size:calc(13.5px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums}
.pg-who{display:flex;align-items:center;gap:6px;max-width:150px;padding:0 8px 0 2px;margin-right:2px;border-right:1px solid var(--border);color:var(--fg)}
.pg-who-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(13.5px*var(--fs));font-weight:600}
.pg-views{padding:0 8px 0 4px;color:var(--muted);font-size:calc(12.5px*var(--fs));white-space:nowrap}
.ig.on[data-repost]{color:var(--blue)}
@media(max-width:560px){.pg-who-n,.pg-views{display:none}.pg-who{padding-right:4px}}
@media(prefers-reduced-motion:reduce){.pg-float .ig.on[data-f-like] svg{animation:none}}

/* Your Site, in Settings (2026-11-01): the drop, how far it has gone, how much it takes, its pages and files. */
.site-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px;border:2px dashed var(--input);border-radius:var(--radius-xl);background:var(--strip);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.site-drop svg{width:34px;height:34px;color:var(--muted)}
.site-drop:hover,.site-drop.over,.site-drop:focus-visible{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--strip))}
.site-progress{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.site-bar{height:8px;overflow:hidden;border-radius:99px;background:var(--accent)}
.site-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--blue);transition:width .2s}
.site-use{display:flex;flex-direction:column;gap:6px}
.site-how{margin-top:16px}
.site-how p{margin:0}
.site-page{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--border)}
.site-page:first-of-type{border-top:0}
.site-page>a{display:flex;flex-direction:column;min-width:200px;color:inherit}
.site-files summary{cursor:pointer}
.site-file-list{max-height:360px;margin-top:10px;overflow:auto}
.site-file{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:calc(13.5px*var(--fs));word-break:break-all}
.design.site{background:#fff}
/* A member's own site starts beside the menu, never under it: it was not made knowing the menu is there. */
.pd-wrap.site{width:100%;margin-left:0}
/* A project building in the browser (buildkit.js; the owner, 2026-11-02: "a pop up (not closeable) ... saying we're
   building your site, do not close this tab"): over everything, with nothing to close it by. */
.build-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55)}
.build-card{width:min(440px,100%);padding:24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.build-card h2{margin:0 0 6px;font-size:20px}
.build-card p{margin:0 0 14px}
.build-card .site-bar{margin:4px 0 12px}
/* Other Details under Edit Profile, with its tabs. */
.od-in{margin-top:22px}
.od-in>h3{margin:0 0 10px}