:root {
  --ink: #073147;
  --ink-soft: #12506F;
  --brass: #C8873C;
  --brass-dark: #a96f2c;
  --brass-text: #8a5a1a;   /* brass as 13px text: 5.9:1 on white, where --brass itself is 3.0 */
  --canvas: #FAF8F4;
  --line: #e7e2d8;
  --muted: #6b7280;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--canvas);
  color: #17211f;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 460px; }
/* The bar that used to live here is public/assets/bar.css, because a
   restaurant's workspace wears the same one and has none of the rest of this
   file. Every page with a bar loads both. */

.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 0 0 10px; color: var(--ink); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=url], .picker input[type=search], textarea, select {
  width: 100%; border: 1px solid #d6d1c6; border-radius: 11px;
  padding: 11px 13px; font: inherit; font-size: 15px; background: #fff;
  min-height: 44px;   /* thumb, not cursor */
}
/* The picker's To box looks like every other field, not the browser's own
   search pill. Scoped: the bar's search box is styled in bar.css. */
.picker input[type=search] { -webkit-appearance: none; appearance: none; }
input:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
select:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
/* Keyboard focus on links and buttons: the same ink ring as the fields, and
   white where the control sits on the ink bar. */
:is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bar :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
textarea { min-height: 96px; resize: vertical; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 11px; padding: 12px 18px; min-height: 44px;
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-soft); }
.btn-brass { background: var(--brass); color: var(--ink); }   /* white on brass is 3.0:1; ink is 4.8 */
.btn-brass:hover { background: var(--brass-dark); }
.btn-ghost { background: #fff; border: 1px solid #d6d1c6; color: var(--ink); }
.btn-ghost:hover { background: #f6f3ec; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.field { margin-bottom: 14px; }
.err { color: #b3261e; font-size: 14px; margin: 10px 0 0; }
/* The "I'm 16 or older and agree" line on sign-up and join: the whole
   sentence is the thing to tap, at least 44px tall, with a box big enough to
   see, and the word about it sits right under it rather than under the button. */
.terms-box { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 6px 0;
             font-weight: 400; margin: 0; cursor: pointer; }
.terms-box input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--ink); }
.terms-box .small { line-height: 1.45; }
.terms-box__msg { margin: 4px 0 0 36px; }
.ok { color: #146c43; font-size: 14px; margin: 10px 0 0; }
.hidden { display: none !important; }
.linkbtn { background: none; border: 0; font: inherit; font-size: 13px;
           color: var(--muted); text-decoration: underline; cursor: pointer;
           display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
.linkbtn:hover { color: var(--ink); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { flex: 1; padding: 10px; border-radius: 11px; border: 1px solid transparent;
       background: #efece4; color: #55625e; font-weight: 600; cursor: pointer; font: inherit; font-weight: 600;
       display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.tab.on { background: #fff; border-color: var(--ink); color: var(--ink); }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e7e2d8; flex: none; }
.avatar-lg { width: 88px; height: 88px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px;
         border-radius: 999px; background: #edf1f7; color: var(--ink); }
.badge-pending { background: #fdf1e0; color: #8a5a1a; }
.cert { border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; background: #fff; }
.cert h3 { margin: 0 0 3px; font-size: 15px; color: var(--ink); }
.grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.stack > * + * { margin-top: 18px; }
footer { padding: 40px 0; text-align: center; font-size: 13px; color: var(--muted); }
/* Small inline links (footer, "See all", "Verify") keep their place in the
   line but answer to a thumb: the padding is taken back by the margin. */
footer a, a.small, .cert a { display: inline-block; padding: 15px 8px; margin: -15px -8px; }

/* Scoreboard: hairline dividers from a 1px grid gap over the line colour. */
.scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
              background: var(--line); border: 1px solid var(--line);
              border-radius: 13px; overflow: hidden; }
@media (min-width: 640px) { .scoreboard { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: 15px 17px; }
.stat .n { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; }
.stat .n small { font-size: 15px; font-weight: 600; }
.stat .n.empty { color: #c9c2b4; }
.stat .k { margin-top: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase;
           letter-spacing: .06em; color: var(--muted); }

/* Timeline: one rail, one dot per event. */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px;
                    width: 2px; background: var(--line); }
.tl { position: relative; padding: 9px 0; }
.tl::before { content: ""; position: absolute; left: -26px; top: 14px; width: 10px; height: 10px;
              border-radius: 50%; background: #fff; border: 2px solid #d6d1c6; }
.tl-mark::before { background: var(--brass); border-color: var(--brass); }
.tl-line { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.tl-what { font-size: 15px; color: #17211f; }
.tl-what b { color: var(--ink); }
.tl-when { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Adding a restaurant: an outlined row, not a button hiding in a corner. */
.add-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px;
           border: 1px dashed #cfc8ba; border-radius: 13px; background: #fff;
           text-decoration: none; color: inherit; text-align: left; cursor: pointer; }
.add-row:hover { border-color: var(--brass); background: #fdfaf5; }
.add-row .plus { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #f4efe5;
                 color: var(--brass); font-size: 21px; font-weight: 700; line-height: 1;
                 display: flex; align-items: center; justify-content: center; }

/* Something the person typed in about their own record. It has to be legible
   as a different kind of claim from a test result without being made to look
   like a lesser one: a ServSafe card is real, we just did not watch it happen.
   So: the same shape as .cert, a warmer ground and no white -- and never the
   dashed border, which already means "lapsed" two rules down. */
.self { border: 1px solid #e9e3d6; border-radius: 13px; padding: 14px 16px; background: #faf8f3; }
.self h3 { margin: 0 0 3px; font-size: 15px; color: var(--ink); }
.badge-self { background: #efece4; color: #6b6459; }

/* A lapsed credential stays on the page: it is history, not a failure. */
.cert-lapsed { background: #fcfbf9; border-style: dashed; }
.cert-lapsed h3 { color: var(--muted); }

/* ------------------------------------------------- connections and messages */
/* A person in a list: face, name, one line about them, and the controls that
   act on them. The controls sit on their own row under 420px rather than
   shrinking, because "Accept" and "Ignore" being hard to tell apart under a
   thumb is the one mistake here that cannot be undone by the person making it. */
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
          padding: 14px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.person__who { flex: 1 1 140px; min-width: 0; }
.person__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.person__name:hover { text-decoration: underline; }
.person__sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__do { display: flex; gap: 8px; flex: none; margin-left: auto; }
.person__do .btn { padding: 9px 14px; font-size: 14px; }
@media (max-width: 420px) {
  .person__do { width: 100%; }
  .person__do .btn { flex: 1; }
}
/* The note somebody sent with an invitation: quoted, so it reads as their words
   rather than as the page's. flex-basis, so inside a .person row it takes a row
   of its own rather than squeezing the name and the buttons into a third of the
   width each. */
.note { flex-basis: 100%; margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line);
        color: #3d4a47; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The inbox, and one conversation, side by side where there is room for both. */
.talk { display: grid; gap: 16px; align-items: start; }
/* A grid item's automatic minimum is its content, and the last line of a
   conversation is one long unbroken string. Without this the inbox pushes the
   whole page wider than the phone it is being read on. */
.talk > * { min-width: 0; }
@media (min-width: 780px) { .talk { grid-template-columns: 300px 1fr; } }
.inbox { max-height: 70vh; overflow-y: auto; }
.inbox__row { display: flex; gap: 12px; width: 100%; min-width: 0; text-align: left; padding: 12px;
              border: 0; border-radius: 12px; background: none; font: inherit; cursor: pointer; }
.inbox__row:hover { background: #f6f3ec; }
.inbox__row.on { background: #edf1f7; }
.inbox__row.unread .inbox__name { font-weight: 700; }
.inbox__name { color: var(--ink); font-weight: 600; font-size: 15px; }
.inbox__last { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); margin-top: 7px; }

.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; padding: 4px; }
/* Their words on the left in white, yours on the right in ink. The asymmetry
   is the whole navigation of a conversation read quickly on a phone. */
/* align-self, because the column would otherwise stretch every bubble to the
   full width of the pane and the shape of the conversation would be gone. */
.msg { align-self: flex-start; max-width: 78%; padding: 10px 14px; border-radius: 16px;
       font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
       border: 1px solid var(--line); background: #fff; }
.msg--mine { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); }
.msg__when { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.msg--mine .msg__when { color: rgba(255,255,255,.7); }
/* The read receipt under your own latest message: small, grey, words. */
.msg__seen { align-self: flex-end; margin: -6px 4px 0; font-size: 12px; color: var(--muted); text-align: right; }
.msg__seen-btn { font-size: 12px; padding: 0; color: var(--muted); }
.msg__seen-who { display: block; }
.msg__seen-who.hidden { display: none; }
.msg__day { align-self: center; font-size: 12px; color: var(--muted); padding: 2px 10px;
            background: #efece4; border-radius: 999px; }
.compose { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.compose textarea { min-height: 48px; max-height: 160px; }

/* New message, and group chats (src/chats.js). */
.inbox__new { width: 100%; margin-bottom: 8px; }
.inbox__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An ask to join says what it is in full: two lines rather than an ellipsis. */
.inbox__name.inbox__name--ask { white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.convo__head { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line);
               padding-bottom: 14px; margin-bottom: 14px; }
.convo__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
               overflow-wrap: anywhere; }
.convo__chat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.convo__chat .convo__people { padding: 0; font-size: 14px; color: var(--ink); }
.convo__chat .convo__add { min-height: 36px; padding: 6px 12px; font-size: 14px; }
/* Two faces, one over the other, where a group chat has a face. */
.faces { position: relative; display: block; width: 44px; height: 44px; flex: none; }
.faces > span { position: absolute; }
.faces > span:first-child { top: 0; left: 0; }
.faces > span:nth-child(2) { right: 0; bottom: 0; }
.faces .avatar { width: 30px; height: 30px; border: 2px solid #fff; font-size: 11px !important; }
.faces--one > span:first-child { top: 0; left: 0; }
.faces--one .avatar { width: 44px; height: 44px; border: 0; font-size: 15px !important; }
.msg__from { align-self: flex-start; display: flex; align-items: center; gap: 6px; max-width: 78%; margin: 6px 0 -6px;
             font-size: 12px; color: var(--muted); min-width: 0; }
.msg__from > :first-child { flex: none; }   /* the face never shrinks */
.msg__from > .msg__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.msg__from .avatar { width: 24px; height: 24px; font-size: 10px !important; }
.chat-pill { align-self: center; margin: 0; max-width: 92%; padding: 6px 14px; border-radius: 999px;
             background: #efece4; color: #3d4a47; font-size: 13px; text-align: center; }
.chat-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdf1e0; color: #5c3d12;
             font-size: 13px; line-height: 1.45; }
/* The picker: search, ticks, and the people picked as chips. */
.picker__title { margin: 0 0 12px; font-size: 18px; }
.picker__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips:empty { display: none; }
.chip-pick { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0;
             padding: 2px 2px 2px 12px; border-radius: 999px; background: #edf1f7; color: var(--ink); font-size: 14px; }
.chip-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-pick > button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none;
                      font-size: 18px; line-height: 1; color: inherit; cursor: pointer; }
.chip-pick > button:hover { background: #dfe6f0; }
.picker__list { margin-top: 10px; }
@media (min-width: 780px) { .picker__list { max-height: 50vh; overflow-y: auto; } }
/* A row is a <label>: not the bold, spaced label of a form field. */
.pick { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: 12px; cursor: pointer;
        font-weight: 400; margin-bottom: 0; }
.pick:hover { background: #f6f3ec; }
.pick__who { flex: 1; min-width: 0; }
.pick__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__sub { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.pick.is-off { opacity: .45; cursor: default; }
.pick.is-off input[type="checkbox"] { cursor: default; }
.picker__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px;
                border-top: 1px solid var(--line); background: #fff; }
/* Somebody with a hidden profile, asked to join. */
.asked__head { display: flex; gap: 12px; align-items: center; }
.asked__text { margin: 0; font-weight: 600; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.asked__do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* The people in a group chat. */
.people-sheet .member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0;
                        border-bottom: 1px solid var(--line); min-height: 48px; }
.member__who { flex: 1 1 160px; min-width: 0; }
.member__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.member__top .person__name { overflow-wrap: anywhere; }
.member__added { font-size: 13px; color: var(--muted); margin-top: 2px; }
.member__do { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.member__do .btn { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #edf1f7; color: var(--ink);
       font-size: 11px; font-weight: 600; }
.tag--blocked { background: #fdecea; color: #8c1d18; }
.people-sheet__do { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.btn-danger-ghost { border-color: #e3b4ad; color: #a3352a; }
.btn-danger-ghost:hover { background: #fdecea; }
.confirm__title { margin: 0 0 8px; font-size: 18px; }
.confirm__text { margin: 0; line-height: 1.5; }
/* The people list scrolls under its own head, so Close stays in reach. */
.sheet.people-sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
.people-sheet .sheet__head { flex: none; }
.people-sheet .sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 779px) {
  /* The picker's main button stays in reach while the list scrolls. */
  .picker__foot { position: sticky; bottom: 0; padding-bottom: 12px; z-index: 1; }
  .pick { min-height: 56px; }
  /* The people list is the whole screen on a phone, with its Close. */
  .sheet.people-sheet { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  .member__do { width: 100%; margin-left: 0; }
  .member__do .btn { flex: 1; }
}

/* ----------------------------------------------------- editing a profile */
/* The owner's view of /u/<handle>: the same page everyone reads, with an Edit
   or Add button on each part. Buttons are 44px tall with a word on them, not
   an icon alone -- the people editing this are on a phone between shifts, and
   a pencil nobody recognises is a feature nobody finds. */
/* The page itself: a header card, then two columns -- the record on the left,
   people, numbers and links on the right -- and one column on a phone. Every
   card has the same edge, radius and padding, and every gap between two cards
   is the same 16px, so the page reads as one thing.

   Its edges are the bar's: the same max-width and side padding as `.bar .wrap`
   in bar.css, at every width, so the header card starts under the mark and
   ends under the face. test/profile-layout.test.js holds the two files to it. */
.pf-page { max-width: 1040px; padding: 24px 24px 56px; display: flex; flex-direction: column; gap: 16px; }
.pf-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; min-width: 0; }
.pf-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pf-btn { min-height: 44px; }

.pf-hero { padding: 0; overflow: hidden; }
/* Navy, with a fine dot grain and a brass rule: the bar's colour, so the
   header reads as the person's own space under it rather than a new page. */
.pf-cover { height: 88px; background-color: var(--ink);
            background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
            background-size: 14px 14px; border-bottom: 3px solid var(--brass); }
/* The face, who they are beside it, and on the right the proof and what can
   be done here. Under 860px the right-hand part goes under the words; on a
   phone all three stack. The note box and the editor take the full width. */
.pf-hero__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px;
                 align-items: start; padding: 0 24px 24px; }
.pf-hero__body > .pf-shared, .pf-hero__body > .pf-note-box, .pf-hero__body > .pf-form { grid-column: 1 / -1; }
.pf-avatar { display: inline-block; margin-top: -56px; position: relative; grid-column: 1; grid-row: 1; }
.pf-avatar .avatar { width: 120px; height: 120px; border: 5px solid #fff; background: #f1e6d4;
                     box-shadow: 0 1px 3px rgba(7,49,71,.18); font-size: 42px !important; }
.pf-hero__who { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 16px; }
.pf-hero__side { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end;
                 gap: 12px; padding-top: 18px; max-width: 360px; }
/* Nothing to prove and nothing to press (a stranger's copy before the relation
   call answers): no empty column eating the name's room. */
.pf-hero__side:has(> .pf-proof.hidden):not(:has(.pf-hero__actions > :not(.hidden):not(:empty))) { display: none; }
.pf-name { margin: 0; font-size: 32px; line-height: 1.15; overflow-wrap: anywhere; }
.pf-headline { margin: 6px 0 0; font-size: 17px; line-height: 1.45; color: #2b3836; overflow-wrap: anywhere; }
.pf-meta { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.pf-meta__job { color: #2b3836; }
.pf-meta a { color: var(--brass-text); font-weight: 600; text-decoration: none;
             display: inline-block; padding: 12px 0; margin: -12px 0; }
.pf-meta a:hover { text-decoration: underline; }
.pf-count { font-weight: 600; }
.pf-proof { display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
            padding: 4px 14px 4px 4px; border-radius: 999px; background: #f6efe3; color: var(--ink);
            font-size: 14px; font-weight: 600; text-decoration: none; }
.pf-proof svg { width: 28px; height: 28px; color: var(--ink); flex: none; }
.pf-proof:hover { background: #f0e4d0; }
.pf-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; }
.pf-hero__actions:not(:has(> :not(.hidden):not(:empty))) { display: none; }
.pf-relation { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; }
.pf-shared { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.pf-note-box { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.pf-hero .pf-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Two flex columns rather than a grid of areas: a grid row is as tall as the
   tallest thing in it, which is what left a gap under whichever column ran
   short. Each column stacks its own cards, 16px apart. */
.pf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pf-main, .pf-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-main > .hidden, .pf-side > .hidden { display: none; }
/* A visitor to a page with nothing in its record yet: the side column alone,
   not beside an empty one. The owner always has a main column. */
.pf-cols--alone { grid-template-columns: minmax(0, 360px); }
.pf-cols--alone .pf-main { display: none; }

.pf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pf-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.pf-head > div { min-width: 0; }
.pf-section > h2 { font-size: 20px; letter-spacing: -0.01em; }
.pf-bio { margin: 0; font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-owner-note { margin-top: 14px; }
/* The owner's grey line in a section with nothing in it yet. */
.pf-empty { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pf-head + .pf-empty { margin-top: -4px; }
/* Which kind a section holds, beside its heading, in the same marks as its
   cards: the navy seal for a pass Credplate saw, the plain sheet for a
   certificate somebody added. */
.pf-kind-h { display: flex; align-items: center; gap: 10px; }
.pf-kind { flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; }
.pf-kind--pass { background: var(--ink); border: 3px solid var(--brass); box-shadow: inset 0 0 0 2px var(--ink); }
.pf-kind--self { border-radius: 4px; width: 18px; background: #faf8f3; border: 2px solid #8b8274; }
/* Where you work, drawn from the first paint for its owner: room for one row
   while /api/me answers, so the sections under it do not jump. */
#yoursBlock #teams:empty { min-height: 56px; }

/* Credentials: a badge each, in a grid that drops to one column by itself. */
.pf-creds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.pf-creds__wide { grid-column: 1 / -1; }
.pf-cred { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line);
           border-radius: 12px; background: #fff; min-width: 0; }
.pf-cred__seal { flex: none; width: 40px; height: 40px; color: var(--ink); }
.pf-cred__seal svg { display: block; }
.pf-cred__body { flex: 1; min-width: 0; }
.pf-cred h3 { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.pf-cred__where { margin: 3px 0 0; font-size: 14px; color: #2b3836; overflow-wrap: anywhere; }
.pf-cred__facts { margin: 3px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pf-cred__score { color: var(--ink); font-size: 14px; }
.pf-cred__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 14px; }
.pf-cred__links a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
                    color: var(--brass-text); font-weight: 600; text-decoration: none; }
.pf-cred__links a:hover { text-decoration: underline; }
.pf-cred__links .linkbtn { min-height: 44px; padding: 0; color: var(--brass-text); font-size: 14px;
                           font-weight: 600; text-decoration: none; }
.pf-cred__links .linkbtn:hover { text-decoration: underline; }
.pf-verify { color: var(--ink) !important; }
.pf-cred--lapsed { border-style: dashed; background: #fcfbf9; }
.pf-cred--lapsed .pf-cred__seal { color: #9aa3ad; }
.pf-cred--lapsed h3 { color: var(--muted); }
.pf-cred--self { background: #faf8f3; border-color: #e9e3d6; }
.pf-cred--self .pf-cred__seal { color: #8b8274; }
.pf-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pf-mark { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px;
           background: #edf1f7; color: var(--ink); font-size: 12px; font-weight: 600; }
.pf-mark--ok { background: #e6f1ec; color: #1f5c43; }
.pf-mark--warn { background: #fdf1e0; color: #8a5a1a; }
.pf-mark--self { background: #efece4; color: #5f584d; }
.pf-seen { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--brass-text); }
.pf-attest { padding: 16px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pf-attest h3 { margin: 0; font-size: 16px; color: var(--ink); }
.pf-attest .muted { margin-top: 3px; }

/* Experience and education: a vertical timeline, a tile for each place. */
.pf-tl__item { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.pf-tl__item:last-child { padding-bottom: 0; }
.pf-tl__item:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px;
                                         width: 2px; background: var(--line); }
.pf-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
           border-radius: 12px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 700; }
.pf-tile--self { background: #efece4; color: #5f584d; }
.pf-tile--school { background: #f6efe3; color: var(--brass-text); }
.pf-tl__body { flex: 1; min-width: 0; padding-top: 2px; }
.pf-tl__body h3 { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.pf-tl__what { margin: 3px 0 0; font-size: 14px; color: #2b3836; overflow-wrap: anywhere; }
.pf-tl__when { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.pf-tl__why { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pf-tl .pf-inline-form { padding: 0 0 22px; border: 0; }
.pf-label { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 10px 2px 8px;
            min-height: 24px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pf-label--ok { background: #e6f1ec; color: #1f5c43; }
.pf-label--self { background: #efece4; color: #5f584d; padding-left: 10px; }
.pf-tl__body .pf-edit--row { display: flex; }

/* The side column. */
.pf-links { display: flex; flex-direction: column; }
.pf-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; color: var(--ink);
           text-decoration: none; border-bottom: 1px solid var(--line); }
.pf-link:last-child { border-bottom: 0; }
.pf-link:hover .pf-link__label { text-decoration: underline; }
.pf-link__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                 border-radius: 8px; background: #edf1f7; }
.pf-link__words { display: flex; flex-direction: column; min-width: 0; }
.pf-link__label { font-weight: 600; overflow-wrap: anywhere; }
.pf-link__host { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
/* People in the side column: your network, or the people you both know. */
.pf-people { display: flex; flex-direction: column; }
.pf-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; color: var(--ink);
             text-decoration: none; border-bottom: 1px solid var(--line); min-width: 0; }
.pf-person:last-child { border-bottom: 0; }
.pf-person:hover .pf-person__name { text-decoration: underline; }
.pf-person__face { flex: none; display: flex; }
.pf-person__face .avatar { width: 40px; height: 40px; }
.pf-person__words { display: flex; flex-direction: column; min-width: 0; }
.pf-person__name { font-weight: 600; overflow-wrap: anywhere; }
.pf-person__headline { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
                       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pf-people__all { margin-top: 12px; width: 100%; justify-content: center; }
#mutualNote, #networkNote { margin-top: 4px; }
/* "2 invitations waiting ›" on the owner's network card: the one thing on it
   somebody else is waiting on, so it reads as something to press. */
.pf-invites { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
              margin: -4px 0 8px; padding: 0 14px; border-radius: 11px; background: #fdf1e0; color: #8a5a1a;
              font-size: 15px; font-weight: 700; text-decoration: none; }
.pf-invites::after { content: "\203A"; font-size: 20px; line-height: 1; }
.pf-invites:hover { background: #f9e6c8; }
.pf-share-img { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; }
#shareBlock .pf-sub { margin: 12px 0; }
#shareBlock .btn { width: 100%; }

.pf-todo h2 { margin: 0; font-size: 18px; }
.pf-progress { height: 8px; margin-top: 14px; border-radius: 999px; background: #efece4; overflow: hidden; }
.pf-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brass); }
/* In the main column, so the buttons sit two or three to a row rather than
   making one long list beside a short record. */
.pf-todo__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px;
                 grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.pf-todo__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px;
                 border: 1px dashed #d6d1c6; border-radius: 11px; background: #fff; color: var(--ink);
                 font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.pf-todo__item:hover { border-style: solid; border-color: var(--brass); background: #fdfaf5; }
.pf-todo__item svg { flex: none; color: var(--brass-text); }
.pf-todo__note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.pf-edit.pf-edit--main { background: var(--ink); border-color: var(--ink); color: #fff; }
.pf-edit.pf-edit--main:hover { background: var(--ink-soft); }

/* Yours: the owner's card at the top of the main column (where you work,
   invitations to a team, a test waiting, a group) and their numbers in the
   side column. Owner-only, drawn after /api/me; see public/profile/index.html. */
.pf-yours { display: flex; flex-direction: column; gap: 16px; }
.pf-yours.hidden, .pf-yours .hidden { display: none; }
.pf-yours__head { margin-bottom: 0; }
.pf-yours__h { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.pf-alert { margin: 0; padding: 11px 13px; background: #fdf1e0; border-radius: 11px; color: #8a5a1a;
            font-size: 14px; line-height: 1.5; }
.pf-alert__btn { color: inherit; padding: 0; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: underline; }
.pf-places { display: flex; flex-direction: column; }
.pf-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0;
            border-bottom: 1px solid var(--line); }
.pf-place:last-child { border-bottom: 0; }
.pf-place__who { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.pf-place__name { font-weight: 600; color: var(--ink); }
.pf-place__job { margin-top: 2px; }
.pf-place__nums { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 2 1 220px; min-width: 0; font-size: 14px; }
.pf-place__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-place__open { flex: none; }
.pf-place__many { margin-left: 8px; font-size: 11px; }
.pf-fig { white-space: nowrap; }
.pf-fig--warn { color: #8a5a1a; }
.pf-add { padding: 12px 15px; }
.pf-add__title { display: block; font-weight: 600; color: var(--ink); }
.pf-add__note { display: block; margin: 0; }
.pf-group__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.pf-group__top .pf-yours__h { margin: 0; }
.pf-group__pick { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.pf-group__pick select { min-height: 44px; border-radius: 11px; padding: 6px 10px; max-width: 220px; }
.pf-group__more { margin-top: 10px; }
.pf-group__more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer;
                          font-weight: 600; color: var(--brass-text); }
.pf-views { margin: 0 0 12px; font-size: 14px; color: #2b3836; }
.pf-side .scoreboard { grid-template-columns: repeat(2, 1fr); }
.pf-side .stat { padding: 12px 14px; }
.pf-side .stat .n { font-size: 22px; }
.pf-score + .pf-sub { margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .pf-progress span { transition: width .3s ease; }
  .pf-todo__item, .pf-proof, .pf-edit { transition: background-color .15s ease, border-color .15s ease; }
}

@media (max-width: 860px) {
  /* One column: the two columns' cards become one list, in the order they are
     written -- the record, then the side -- except that the owner's network
     card comes up under the checklist while somebody waits for an answer. */
  .pf-cols { display: flex; flex-direction: column; align-items: stretch; }
  .pf-main, .pf-side { display: contents; }
  .pf-main > *, .pf-side > * { order: 2; }
  #yoursBlock, #completeCard { order: 0; }
  #networkBlock.pf-network--waiting { order: 1; }
  /* The proof and the buttons go under the words, lined up with them. */
  .pf-hero__body { grid-template-columns: auto minmax(0, 1fr); }
  .pf-hero__side { grid-column: 2; grid-row: 2; align-items: flex-start; padding-top: 16px; max-width: none; }
  .pf-hero__actions, .pf-relation { justify-content: flex-start; }
}
/* The bar's own phone width (bar.css): its side padding drops to 16px here,
   and the page's with it, so the two edges stay one line. */
@media (max-width: 640px) {
  .pf-page { padding: 16px 16px 48px; }
  .pf-card { padding: 20px 16px; }
  .pf-hero { padding: 0; }
  .pf-hero__body { padding: 0 16px 20px; column-gap: 16px; }
}
@media (max-width: 560px) {
  /* All of the header in one column: the face, the words, then the rest. */
  .pf-cover { height: 72px; }
  .pf-hero__body { grid-template-columns: minmax(0, 1fr); }
  .pf-avatar { margin-top: -48px; justify-self: start; }
  .pf-avatar .avatar { width: 96px; height: 96px; border-width: 4px; font-size: 34px !important; }
  .pf-hero__who { grid-column: 1; grid-row: 2; padding-top: 12px; }
  .pf-hero__side { grid-column: 1; grid-row: 3; align-items: stretch; }
  .pf-proof { align-self: flex-start; }
  .pf-name { font-size: 26px; }
  .pf-headline { font-size: 16px; }
  .pf-hero__actions > * { flex: 1 1 auto; justify-content: center; }
  .pf-tl__item { gap: 12px; }
  .pf-tile { width: 40px; height: 40px; font-size: 17px; border-radius: 10px; }
  .pf-tl__item:not(:last-child)::before { left: 19px; top: 44px; }
}
.pf-tools { display: flex; gap: 8px; flex: none; }
.pf-tools:empty { display: none; }
.pf-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
           border: 1px solid #d6d1c6; border-radius: 11px; background: #fff; color: var(--ink);
           font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex: none; }
.pf-edit:hover { background: #f6f3ec; }
.pf-edit[disabled] { opacity: .55; cursor: default; }
.pf-edit svg { flex: none; }
/* On a row it sits under the row's words on a narrow screen rather than
   squeezing them into a column one word wide. */
.pf-edit--row { margin-top: 10px; }
.pf-form { margin-top: 12px; }
.pf-form h2, .pf-claim-form h3 { margin: 0 0 14px; font-size: 17px; color: var(--ink); }
.pf-inline-form { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-inline-form:last-child { border-bottom: 0; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pf-remove { color: #b3261e; }
.btn.pf-remove { border-color: #e6c7c3; margin-left: auto; }
.pf-photo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* The holder's own photo of a certificate, in its editor only. Contained, not
   cropped: the number along the card's edge is the part somebody reads. */
.pf-card-thumb { max-width: 220px; max-height: 150px; object-fit: contain; border: 1px solid var(--line);
                 border-radius: 8px; background: #fff; }
.pf-entry { display: flex; gap: 8px; }
.pf-entry input { flex: 1; min-width: 0; }
.pf-link-edit { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.pf-link { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; min-height: 44px;
           display: inline-flex; align-items: center; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-filters > div { flex: 1 1 170px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px;
        background: #edf1f7; color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.chip__x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
           margin: -6px -10px -6px 0; border: 0; border-radius: 50%; background: none; color: var(--ink);
           font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.chip__x:hover { background: #dbe3ee; }
.self .pf-edit--row, .card .pf-edit--row { display: inline-flex; }
input[type=month], input[type=number] {
  width: 100%; border: 1px solid #d6d1c6; border-radius: 11px;
  padding: 11px 13px; font: inherit; font-size: 15px; background: #fff; min-height: 44px;
}

/* ------------------------------------------------------------------- Home */
/* Three columns the way the people using this already know from LinkedIn:
   who you are on the left, the composer and the feed in the middle, people
   and restaurants on the right. The edges line up with the bar's (1040px).
   Two columns from 860px, with the right rail under the card; one column on
   a phone, in reading order. */
.home { max-width: 1088px; margin: 0 auto; padding: 24px 24px 56px; display: grid; gap: 20px; align-items: start;
        grid-template-columns: 210px minmax(0, 1fr) 280px; grid-template-areas: "left main right"; }
.home-left { grid-area: left; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 16px; }
.home-main { grid-area: main; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home-right { grid-area: right; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 16px; }
@media (max-width: 1099px) {
  .home { grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "left main" "right main";
          grid-template-rows: auto 1fr; }
  .home-left, .home-right { position: static; }
}
@media (max-width: 859px) {
  .home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "main" "right"; grid-template-rows: none; }
}
@media (max-width: 560px) { .home { padding: 12px 16px 40px; gap: 12px; } }
.hcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.hcard-pad { padding: 16px; }
.hcard h2 { font-size: 16px; margin: 0 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The card on the left: the profile header in miniature. */
.me-card { overflow: hidden; text-align: center; }
.me-cover { height: 56px; background-color: var(--ink); border-bottom: 3px solid var(--brass);
            background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size: 14px 14px; }
.me-face { display: inline-block; margin-top: -36px; text-decoration: none; }
.me-face .avatar { width: 72px; height: 72px; border: 3px solid #fff; background: #f1e6d4; font-size: 24px !important; }
.me-body { padding: 4px 16px 14px; min-width: 0; }
.me-name { display: block; font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.me-name:hover { text-decoration: underline; }
.me-headline { margin: 4px 0 0; font-size: 13px; color: #2b3836; line-height: 1.4; overflow-wrap: anywhere; }
.me-job { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.me-stats { border-top: 1px solid var(--line); padding: 6px 0; text-align: left; }
.me-stat { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: 13px;
           color: var(--muted); text-decoration: none; }
.me-stat b { color: var(--ink); }
a.me-stat:hover { background: #f6f3ec; }
.me-view { display: flex; align-items: center; justify-content: center; min-height: 44px; border-top: 1px solid var(--line);
           font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.me-view:hover { background: #f6f3ec; }
@media (max-width: 859px) {
  /* On a phone the card is a line, not a column: the feed is what you came for. */
  .me-card { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; align-items: center; }
  .me-cover { display: none; }
  .me-face { margin: 12px 0 12px 14px; }
  .me-face .avatar { width: 52px; height: 52px; border: 0; font-size: 18px !important; }
  .me-body { padding: 10px 14px; }
  .me-stats { grid-column: 1 / -1; display: flex; padding: 0; }
  .me-stat { flex: 1; flex-direction: column; gap: 2px; padding: 10px 14px; }
  .me-stat + .me-stat { border-left: 1px solid var(--line); }
  .me-view { grid-column: 1 / -1; }
}

/* The composer. */
.composer { padding: 14px 16px; }
.composer-top { display: flex; gap: 10px; align-items: center; }
.composer-top .avatar { width: 48px; height: 48px; font-size: 16px !important; }
.composer-start { flex: 1; min-width: 0; min-height: 48px; border: 1px solid #c9c2b4; border-radius: 999px; background: #fff;
                  text-align: left; padding: 0 18px; font: inherit; font-size: 15px; font-weight: 600; color: #4b5563; cursor: pointer; }
.composer-start:hover { background: #f6f3ec; }
.composer-quick { display: flex; gap: 4px; margin-top: 8px; }
.composer-form { margin-top: 12px; }
.composer-form textarea { min-height: 88px; }
.composer-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.composer-count.low { color: #b3261e; }
.composer-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.composer-thumbs:empty { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f1ede5; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0;
                background: rgba(23,33,31,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.composer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.composer-row .field { flex: 1 1 100%; margin: 0; }
.composer-row .btn { flex: 0 0 auto; }
.composer-row #postGo { margin-left: auto; min-width: 96px; }
.ghostbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0;
            border-radius: 8px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #4b5563;
            cursor: pointer; text-decoration: none; }
.ghostbtn:hover { background: #f3efe7; color: var(--ink); }
.ghostbtn svg { width: 20px; height: 20px; flex: none; }
.ghostbtn[aria-pressed="true"] { color: var(--brass-text); }
.ghostbtn[disabled] { opacity: .5; cursor: default; }

/* One item in the feed. */
.post { padding: 14px 0 4px; }
.post-head { display: flex; gap: 10px; align-items: flex-start; padding: 0 16px; }
.post-face { flex: none; text-decoration: none; }
.post-face .avatar { width: 48px; height: 48px; font-size: 16px !important; }
.post-who { flex: 1; min-width: 0; line-height: 1.3; }
.post-name { font-weight: 700; color: #17211f; text-decoration: none; font-size: 15px; overflow-wrap: anywhere;
             /* A 44px target without a taller line: padding above and below. */
             display: inline-block; padding: 12px 0; margin: -12px 0; }
a.post-name:hover { text-decoration: underline; color: var(--ink); }
.post-line { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.post-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.post-meta svg { width: 13px; height: 13px; }
.post-menu { position: relative; flex: none; }
.post-more { width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: none;
             font-size: 20px; line-height: 1; color: #4b5563; cursor: pointer; }
.post-more:hover { background: #f3efe7; }
.post-menu__list { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 180px; background: #fff;
                   border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(7,49,71,.14); padding: 4px; }
.post-menu__list button { display: block; width: 100%; text-align: left; min-height: 44px; padding: 0 12px; border: 0;
                          background: none; font: inherit; font-size: 14px; border-radius: 8px; cursor: pointer; }
.post-menu__list button:hover { background: #f6f3ec; }
.post-body { margin: 10px 0 0; padding: 0 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-moment { margin: 10px 16px 0; padding: 12px 14px; border-radius: 10px; background: #faf6ee; font-size: 15px;
               line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.post-moment__mark { flex: none; font-size: 20px; line-height: 1.2; }
.post-moment b { color: var(--ink); }
.post-moment .badge { margin-left: 6px; vertical-align: 1px; }

/* Photos: one fills the width; two side by side; three as one big and two
   small; four or more as a two-by-two with how many more on the last. */
.post-grid { display: grid; gap: 3px; margin-top: 10px; grid-template-columns: 1fr 1fr; }
.post-grid button { display: block; padding: 0; border: 0; background: #f1ede5; cursor: zoom-in; position: relative;
                    aspect-ratio: 1; overflow: hidden; width: 100%; }
.post-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-grid.n1 { grid-template-columns: 1fr; }
.post-grid.n1 button { aspect-ratio: auto; }
.post-grid.n1 img { height: auto; max-height: 520px; object-fit: contain; }
.post-grid.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.post-grid.n3 button:first-child { grid-row: 1 / 3; aspect-ratio: auto; }
.post-grid .more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                   background: rgba(7,49,71,.55); color: #fff; font-size: 26px; font-weight: 700; }

/* A repost quotes its original as a card inside the card. */
.post-quote { margin: 10px 16px 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 0 10px; overflow: hidden; }
.post-quote .post-head { padding: 0 12px; }
.post-quote .post-body { padding: 0 12px; font-size: 14px; }
.post-quote .post-face .avatar { width: 36px; height: 36px; font-size: 13px !important; }
.post-quote .post-grid { margin-bottom: -10px; }
.sheet .post-quote .post-grid { max-height: 220px; overflow: hidden; }
.post-gone { margin: 10px 16px 0; padding: 12px 14px; border: 1px dashed #cfc8ba; border-radius: 10px;
             font-size: 14px; color: var(--muted); }
.post-counts { display: flex; justify-content: space-between; gap: 10px; margin: 8px 16px 0; font-size: 13px; color: var(--muted); }
.post-counts:empty { display: none; }
.post-counts button { background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; cursor: pointer; }
.post-counts button:hover { color: var(--ink); text-decoration: underline; }
.post-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 4px 8px 0;
                padding-top: 4px; border-top: 1px solid var(--line); }
.post-actions.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-actions.one { grid-template-columns: minmax(0, 1fr); }
.post-actions .ghostbtn { justify-content: center; padding: 0 4px; }
@media (max-width: 420px) { .post-actions .ghostbtn { flex-direction: column; gap: 2px; font-size: 12px; min-height: 52px; } }
.post-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 16px 0; align-items: center; font-size: 13px; color: var(--muted); }
.post-pick button { min-width: 44px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
                    font-size: 18px; cursor: pointer; }
.post-pick button[aria-pressed="true"] { border-color: var(--ink); background: var(--canvas); }
.post-comments { margin: 4px 16px 8px; }
.post-say { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.post-say input { flex: 1; min-width: 0; border-radius: 999px; }
.comment { display: flex; gap: 8px; margin-top: 10px; }
.comment .avatar { width: 32px; height: 32px; font-size: 12px !important; }
.comment__bubble { flex: 1; min-width: 0; background: #f4f2ee; border-radius: 0 10px 10px 10px; padding: 8px 12px; }
.comment__who { font-size: 13px; font-weight: 700; color: #17211f; text-decoration: none; }
.comment__body { margin: 2px 0 0; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment__x { background: none; border: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
              min-height: 32px; padding: 0 4px; text-decoration: underline; }
/* One small ⋯ per comment (Report, or Delete / Remove), and the red line in a
   menu (rule 8: red text only in menus, a red fill only on a confirm). */
.comment__bubble { position: relative; }
.comment__more { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; border: 0; border-radius: 50%;
                 background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.comment__more:hover { background: #e9e5dc; }
.comment__bubble:has(.comment__more) .comment__who { padding-right: 30px; }
.post-menu__list .post-menu__red, .menu-sheet__red { color: #b3261e !important; }
.menu-sheet .sheet__body > .btn + .btn { margin-top: 8px; }
.btn-red { background: #b3261e; color: #fff; }
.btn-red:hover { background: #8c1d18; }
.post-counts__n { font-size: 13px; color: var(--muted); }
.feed-note { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }
.feed-note a { color: var(--ink); font-weight: 600; }
.feed-more { display: flex; justify-content: center; padding: 8px 0; }
.home-invite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.home-invite p { margin: 0; font-size: 15px; flex: 1 1 220px; }
.home-invite .btns { display: flex; gap: 8px; }

/* The right rail. */
.pymk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.pymk:first-of-type { border-top: 0; }
.pymk .avatar { width: 44px; height: 44px; font-size: 15px !important; }
.pymk__who { flex: 1; min-width: 0; }
.pymk__name { font-weight: 700; font-size: 14px; color: #17211f; text-decoration: none; overflow-wrap: anywhere; }
.pymk__line { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.pymk .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; margin-top: 8px; border-radius: 999px; }
.place-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px;
              border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.place-link:first-of-type { border-top: 0; }
.place-link:hover { text-decoration: underline; }
.rail-foot { display: flex; align-items: center; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted);
             text-decoration: none; min-height: 44px; line-height: 1.3; }
.rail-foot:hover { color: var(--ink); }

/* Dialogs: repost, send, and the photo viewer. */
.sheet { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
         box-shadow: 0 20px 60px rgba(7,49,71,.3); }
.sheet::backdrop { background: rgba(7,49,71,.45); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 20px;
               border-bottom: 1px solid var(--line); }
.sheet__head h2 { margin: 0; font-size: 18px; }
.sheet__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 24px; cursor: pointer; color: inherit; }
.sheet__x:hover { background: #f3efe7; }
.sheet__body { padding: 16px 20px 20px; overflow-y: auto; }
.sheet__body .post-quote { margin: 0 0 14px; }
.sheet .hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.sheet .people { max-height: 320px; overflow-y: auto; margin-top: 10px; }
.sheet .person-pick { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 6px 8px; border: 0;
                      border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.sheet .person-pick:hover { background: #f6f3ec; }
.sheet .person-pick .avatar { width: 36px; height: 36px; font-size: 13px !important; }
.sheet .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.viewer { width: min(1100px, calc(100vw - 16px)); background: #0b1418; color: #fff; }
.viewer .sheet__head { border-color: rgba(255,255,255,.15); }
.viewer .sheet__head h2 { color: #fff; }
.viewer .sheet__x:hover { background: rgba(255,255,255,.12); }
.viewer .sheet__body { padding: 8px; }
.viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.viewer__stage img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; }
.viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
               border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 26px; cursor: pointer; }
.viewer__nav:hover { background: rgba(255,255,255,.3); }
.viewer__prev { left: 10px; }
.viewer__next { right: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #17211f; color: #fff;
         padding: 12px 18px; border-radius: 10px; font-size: 14px; z-index: 50; max-width: calc(100vw - 32px); }

/* Reporting (public/assets/report.js): five reasons as big, plain choices. */
.report-reasons { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.report-reasons legend { font-size: 15px; font-weight: 600; color: #17211f; margin: 0 0 8px; padding: 0; }
.report-reasons label { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 0 14px;
                        border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 400; cursor: pointer; }
.report-reasons label + label { margin-top: 8px; }
.report-reasons input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.report-reasons label:has(input:checked) { border-color: var(--ink); background: #f6f3ec; }
.report-done { font-size: 17px; margin: 4px 0 0; color: #17211f; }
.report-link { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 12px; color: var(--muted);
               text-decoration: underline; cursor: pointer; }
/* What the writer of something a moderator removed sees on their own copy. */
.removed-note { margin: 10px 16px 0; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #8c1d18;
                font-size: 14px; line-height: 1.4; }
.removed-note a { color: inherit; font-weight: 600; }
.comment .removed-note, .msg .removed-note { margin: 6px 0 0; padding: 6px 10px; font-size: 12px; }

/* Jobs (public/assets/jobs.js): one card per job, on the Jobs page and a
   restaurant's page. */
.job { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-width: 0; }
.job + .job { margin-top: 12px; }
.job__words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.job__title { font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.job__title:hover { text-decoration: underline; }
.job__place { font-size: 15px; color: #17211f; text-decoration: none; font-weight: 600; }
.job__place:hover { text-decoration: underline; }
.job__facts { margin: 2px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.job__desc { margin: 12px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.job__desc--open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.job__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.job__acts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.job__go { padding: 9px 16px; min-height: 44px; font-size: 14px; }
.job__acts .report-link { min-height: 44px; padding: 0 8px; }
.job__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.job__tag { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 8px;
  background: #efece4; color: #3d4a46; font-size: 14px; font-weight: 600; }
.job__tag--pay { background: #e6f1ec; color: #1f5c43; }
.jobs-find { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.jobs-find .field { margin: 0; }
.jobs-find .btn { min-height: 48px; padding-inline: 22px; }
.jobs-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.jobs-listhead h2 { margin: 0; }
.jobs-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; }
.jobs-sort label { margin: 0; }
.jobs-sort select { width: auto; min-height: 44px; }
@media (max-width: 640px) { .jobs-find { grid-template-columns: 1fr; } .jobs-find .btn { width: 100%; } }

/* ------------------------------------------------------------- Jobs home */
/* LinkedIn's Jobs: you on the left, the search and the lists in the middle.
   Opening a job on a laptop puts it on the right of the list (split); on a
   phone a job is its own page, on top of the list. 860px is Home's edge. */
.jobs-home { max-width: 1088px; margin: 0 auto; padding: 24px 24px 56px; display: grid; gap: 16px 20px; align-items: start;
             grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.jobs-home__left { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; min-width: 0;
                   position: sticky; top: 16px; }
.jobs-home__head { grid-column: 2; grid-row: 1; min-width: 0; }
.jobs-home__head h1 { font-size: 28px; margin: 0 0 6px; }
.jobs-sub { margin: 0; }
.jobs-home__main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jobs-home__main > p { margin: 0; }
.jobs-home__detail { min-width: 0; }
.jobs-home--split, .jobs-home--guest.jobs-home--split { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.jobs-home--split .jobs-home__left { display: none; }
.jobs-home--split .jobs-home__head, .jobs-home--split .jobs-home__main { grid-column: 1; }
.jobs-home--split .jobs-home__detail { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 16px;
                                       max-height: calc(100vh - 32px); overflow-y: auto; }
.jobs-home--split .jobs-find { grid-template-columns: 1fr 1fr; }
.jobs-home--split .jobs-find .btn { grid-column: 1 / -1; }
.jobs-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; }
.jobs-back:hover { text-decoration: underline; }
.jobs-me__note { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.jobs-links { padding: 6px 0; }
.jobs-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; color: var(--ink);
             text-decoration: none; font-size: 15px; font-weight: 600; }
.jobs-link:hover, .jobs-link[aria-current] { background: #f6f3ec; }
.jobs-link__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jobs-link__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jobs-link__count { color: var(--brass-text); }
/* Signed out: no column of you on the left, and Sign in is one line under
   the search. Before .jobs-home--split, which wins when a job is open. */
.jobs-home--guest { grid-template-columns: minmax(0, 1fr); }
.jobs-home--guest .jobs-home__left { display: none; }
.jobs-home--guest .jobs-home__head, .jobs-home--guest .jobs-home__main { grid-column: 1; }
.jobs-guest { margin: 0; color: var(--muted); font-size: 15px; }
.jobs-guest a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 700; color: var(--ink); }
.jobs-guest__hire { display: flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 600;
                    color: var(--brass-text); text-decoration: none; }
.jobs-guest__hire:hover { text-decoration: underline; }
.jobs-sec { padding: 16px 16px 8px; }
.jobs-sec--plain { padding: 0; }
.jobs-sec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.jobs-sec__head h2 { margin: 0; font-size: 18px; }
.jobs-sec__head p { margin: 2px 0 0; }
.jobs-sec__head .linkbtn { flex: none; margin-top: -10px; padding-right: 0; }
.jobs-sec__note { margin: 8px 0; font-size: 15px; }
.jobs-sec__foot { justify-content: center; border-top: 1px solid var(--line); margin: 8px -16px 0; }
.jobs-town { margin: 10px 0 12px; }
.jobs-town__row { display: flex; gap: 8px; }
.jobs-town__row input { flex: 1; min-width: 0; }
.jobs-town__row .btn { flex: none; }
.is-bad { border-color: #b3261e !important; outline-color: #b3261e !important; }
/* A job in a list: the whole row is the link. */
.jrows { display: flex; flex-direction: column; gap: 8px; }
#forYouList .jrow { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0 -16px; }
.jrow { display: flex; gap: 12px; align-items: flex-start; min-height: 64px; padding: 14px 16px; background: #fff;
        border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
a.jrow:hover { background: #fbf9f5; }
a.jrow:hover .jrow__title { text-decoration: underline; }
.jrow[aria-current="true"] { background: #f6f3ec; box-shadow: inset 3px 0 0 var(--brass); }
.jrow__mark { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: inline-flex;
              align-items: center; justify-content: center; background: #f1e6d4; color: var(--ink); font-weight: 700; font-size: 18px; }
.jrow__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jrow__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jrow__title { font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.jrow__place { font-size: 14px; font-weight: 600; color: #17211f; }
.jrow__facts { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.jrow__why { font-size: 12px; font-weight: 600; color: var(--brass-text); }
.jrow__foot { font-size: 12px; color: var(--muted); margin-top: 2px; }
.jrow--closed { align-items: center; flex-wrap: wrap; }
.jrow--closed .jrow__words { opacity: .7; }
.jrow__placelink { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600;
                   color: #17211f; }
.jrow__withdraw { opacity: 1; margin-left: auto; color: var(--ink); font-size: 14px; }
/* Apply, or "✓ Applied · Oct 9" with Withdraw beside it. */
.job__apply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.job__applied { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #146c43; font-size: 15px; }
.job__withdraw { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.btn-danger { background: #b3261e; color: #fff; }
.btn-danger:hover { background: #8c1d18; }
/* One job, opened. */
.jdet { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; min-width: 0; }
.jdet__back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; }
.jdet__back:hover { text-decoration: underline; }
.jdet__head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.jdet__mark { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.jdet__place { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: #17211f; text-decoration: none; }
.jdet__place:hover { text-decoration: underline; }
.jdet__title { font-size: 24px; margin: 4px 0 4px; overflow-wrap: anywhere; }
.jdet__title:focus { outline: none; }
.jdet__facts { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.jdet__acts { margin-top: 16px; }
.jdet__acts .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.jdet__hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.jdet__said { margin: 8px 0 0; }
.jdet__sub { margin: 22px 0 6px; font-size: 16px; color: var(--ink); }
.jdet__desc { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.jdet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
              margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.jdet__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brass-text); text-decoration: none; }
.jdet__more:hover { text-decoration: underline; }
.jdet__report { min-height: 44px; }
/* The Apply and Withdraw sheets. */
.jobs-sheet__me { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px; border: 1px solid var(--line);
                  border-radius: 12px; background: var(--canvas); }
.jobs-sheet__face .avatar { width: 48px; height: 48px; }
.jobs-sheet__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.jobs-sheet__note { margin-top: 10px; }
@media (max-width: 859px) {
  .jobs-home, .jobs-home--split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .jobs-home__left { display: contents; }
  .jobs-home--split .jobs-home__left { display: contents; }
  .jobs-home .jobs-me { display: none !important; }
  .jobs-home__head, .jobs-home__main, .jobs-home__detail, .jobs-links, .jobs-guest,
  .jobs-home--split .jobs-home__head, .jobs-home--split .jobs-home__main, .jobs-home--split .jobs-home__detail {
    grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; }
  .jobs-home__detail { order: 0; }
  .jobs-home__head { order: 1; }
  .jobs-links { order: 2; }
  .jobs-home__main { order: 3; }
  /* A job on a phone is the job and "More jobs" under it, signed in or
     out: not the Jobs title, the search, the sort or Sign in again. */
  .jobs-home--split .jobs-home__head,
  .jobs-home--split .jobs-find,
  .jobs-home--split .jobs-links,
  .jobs-home--split .jobs-sort,
  .jobs-home--guest.jobs-home--split .jobs-guest,
  .jobs-home--guest.jobs-home--split .jobs-guest__hire { display: none; }
  .jobs-home--split .jobs-find { grid-template-columns: 1fr 1fr auto; }
  .jobs-home--split .jobs-find .btn { grid-column: auto; }
}
@media (max-width: 640px) { .jobs-home--split .jobs-find { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .jobs-home { padding: 12px 16px 40px; gap: 12px; }
  .jdet { padding: 16px; }
  /* A sheet comes up from the bottom on a phone. */
  .sheet.jobs-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0;
                      padding-bottom: env(safe-area-inset-bottom); }
  .sheet.jobs-sheet .actions .btn { flex: 1; }
}

/* ---------------------------------------------------------------- Network */
/* LinkedIn's My Network, cut down: your counts on the left, then invitations,
   a search, people you have worked with as cards, and your own lists. One
   column on a phone, with two cards a row however narrow. */
.net { max-width: 1088px; margin: 0 auto; padding: 24px 24px 56px; display: grid; gap: 20px; align-items: start;
       grid-template-columns: 260px minmax(0, 1fr); }
.net-left { position: sticky; top: 16px; min-width: 0; }
.net-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.net-me { overflow: hidden; }
.net-me h1 { font-size: 20px; margin: 0; padding: 16px 16px 10px; }
.net-me .me-stat { min-height: 44px; align-items: center; font-size: 14px; }
.net-me .me-stat[aria-disabled="true"] { cursor: default; }
.net-me .me-stat[aria-disabled="true"]:hover { background: none; }
.net-me .me-stat--hot b { color: var(--brass-text); }
.net-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.net-head h2 { font-size: 18px; margin: 0; }
.net-head h3 { font-size: 16px; margin: 0; }
.net-head .linkbtn { padding: 0 4px; font-size: 14px; }
.net-sub { margin: 4px 0 12px; }
.net-help { margin: 8px 0 0; }
.net-find { display: flex; gap: 10px; align-items: flex-start; }
.net-find input { flex: 1; min-width: 0; }
.net-invite-open { padding: 0; margin-top: 4px; font-size: 14px; }
.net-invite { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.net-err { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.net-err .err { margin: 0; }
.net-banner { background: #fdf1e0; border-color: #f0dcb9; }
.net-banner p { margin: 0 0 10px; font-size: 15px; }
.net-banner .ok, .net-banner .err { margin: 10px 0 0; }
.net-example { margin-left: 8px; font-size: 13px; vertical-align: middle; }
.net-state { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.net-rowerr { flex-basis: 100%; margin: 0; }
.net-empty p { margin: 0 0 12px; }
.net-places { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.chip--btn { min-height: 44px; border: 1.5px solid #cfc6b6; background: #fff; font: inherit; font-size: 14px;
             font-weight: 600; cursor: pointer; }
.chip--btn:hover { background: #f6f3ec; }
.chip--btn[aria-pressed="true"], .chip--btn[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.net-roster { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
         border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; padding-bottom: 12px; min-width: 0; }
.pcard__cover { align-self: stretch; height: 44px; background-color: var(--ink); border-bottom: 3px solid var(--brass);
                background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size: 14px 14px; }
.pcard__face { margin-top: -36px; text-decoration: none; }
.pcard__face .avatar { width: 72px; height: 72px; border: 3px solid #fff; background: #f1e6d4; font-size: 24px !important; }
.pcard__name { margin: 6px 10px 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pcard__name:hover { text-decoration: underline; }
.pcard__headline, .pcard__why { margin: 4px 10px 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere;
                                display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__headline { color: #2b3836; -webkit-line-clamp: 2; }
.pcard__why { color: var(--muted); -webkit-line-clamp: 3; }
.pcard__do { margin-top: auto; padding: 10px 10px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-self: stretch; }
.pcard__do .btn { min-height: 44px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.pcard__btn { width: 100%; border: 1.5px solid var(--ink) !important; }
.pcard__do .net-state { color: var(--ok, #146c43); font-weight: 600; }
.pcard__err { margin: 6px 10px 0; font-size: 13px; color: #b3261e; }
.pcard__err:empty { display: none; }
.pcard--ghost { min-height: 220px; background: #f3f0e9; border-color: #ece7dc; }
.inv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.inv:last-child { border-bottom: 0; }
.inv__face { flex: none; text-decoration: none; }
.inv__face .avatar { width: 56px; height: 56px; }
.inv__who { flex: 1 1 160px; min-width: 0; }
.inv__meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.inv__do { display: flex; gap: 8px; flex: none; margin-left: auto; align-items: center; flex-wrap: wrap; }
.inv__do .btn { padding: 9px 16px; font-size: 14px; }
.inv__err { flex-basis: 100%; margin: 0; }
.inv .note { flex-basis: 100%; }
#connections .linkbtn { font-size: 14px; }
@media (max-width: 859px) {
  .net { grid-template-columns: minmax(0, 1fr); }
  .net-left { position: static; }
  .net-me .me-stats { display: flex; padding: 0; }
  .net-me .me-stat { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
  .net-me .me-stat + .me-stat { border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .net { padding: 12px 16px 40px; gap: 12px; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inv__do { width: 100%; }
  .inv__do .btn { flex: 1; }
  .net-find { flex-wrap: wrap; }
  .net-find .btn { width: 100%; }
}

/* Where a phone's tab bar is fixed along the bottom, the picker's button bar
   sticks just above it rather than under it. Last in the file, after the
   phone rule that makes it sticky. */
@media (max-width: 640px) {
  body:has(.bar .nav--tabs:not(.hidden):not([hidden])) .picker__foot { bottom: calc(57px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------- Google reviews
   A restaurant's page and Home's "What guests said"
   (public/assets/google-reviews.js). The author's name and photo sit beside
   each review, and "Google Maps" is named as the source, as Google asks. */
.gr-loc + .gr-loc { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.gr-loc-name { font-size: 18px; margin: 0 0 4px; }
.gr-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
.gr-big { font-size: 28px; line-height: 1; }
.gr-count { color: var(--muted); font-size: 15px; }
.gr-stars { font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
.gr-on { color: #e7a500; }
.gr-off { color: #d6d1c6; }
.gr-list { list-style: none; margin: 0; padding: 0; }
.gr-rev { padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.gr-rev:first-child { border-top: 0; }
.gr-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.gr-face .avatar { width: 36px; height: 36px; }
.gr-who { min-width: 0; }
.gr-author { font-weight: 600; overflow-wrap: anywhere; }
.gr-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: 14px; color: var(--muted); }
.gr-text { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.gr-details { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.gr-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gr-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted); }
.gr-name { background: #fff1c2; color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.gr-reply { margin: 8px 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--line); font-size: 15px; }
.gr-reply p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.gr-links { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; }
.gr-links a { display: inline-flex; align-items: center; min-height: 44px; }
.gr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.gr-all { display: inline-flex; align-items: center; min-height: 44px; }
.gr-err { color: #b42318; font-size: 14px; }
.gr-attr { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.gr-gm { font-family: Roboto, Arial, sans-serif; font-weight: 500; color: #5e5e5e; }
.gr-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.gr-thumb { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.gr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-shade { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.gr-big-photo { max-width: 100%; max-height: calc(100% - 72px); object-fit: contain; border-radius: 8px; }
.gr-close { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: #fff; color: #111; font-weight: 600; }