/* Share Local — after Low-tech Magazine's solar website.
   Paper and ink, system fonts only, small images, nothing that isn't needed. */

:root {
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  --paper: #f3ebd3;
  --paper-2: #e9dfc0;
  --card: #f8f2e0;
  --ink: #1b1914;
  --muted: #5e5747;
  --rule: #1b1914;
  --hair: #c9bd98;
  --link: #8a2c0d;
  --tint: #dcc27a;            /* accent fill: avatars without a photo, photo picker */
  --ok: #3d5f1c;
  --lent: #8a5a00;
  --borrow: #1d4f6b;
  --danger: #9b2c12;
  --alert: #c4261d; /* notification counts in the nav */
  color-scheme: light;
}

/* Dark theme: chosen explicitly, or following the system when set to "System". */
:root[data-theme="dark"] {
  --paper: #15130e;
  --paper-2: #211e16;
  --card: #1b1812;
  --ink: #ece3c8;
  --muted: #a99e80;
  --rule: #ece3c8;
  --hair: #3b3526;
  --link: #f0a073;
  --tint: #4a3d17;
  --ok: #a8cf74;
  --lent: #e9b84f;
  --borrow: #86c3e3;
  --danger: #f08a6b;
  --alert: #d4352d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --paper: #15130e;
    --paper-2: #211e16;
    --card: #1b1812;
    --ink: #ece3c8;
    --muted: #a99e80;
    --rule: #ece3c8;
    --hair: #3b3526;
    --link: #f0a073;
    --tint: #4a3d17;
    --ok: #a8cf74;
    --lent: #e9b84f;
    --borrow: #86c3e3;
    --danger: #f08a6b;
    --alert: #d4352d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.55 var(--serif);
  min-height: 100vh;
  min-height: 100dvh; /* phones: the visible height, not the height behind the browser's toolbars */
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
img { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap;
  max-width: 1100px; width: calc(100% - 32px); margin: 0 auto;
  padding: 1.1rem 0 .8rem;
  padding-top: max(1.1rem, env(safe-area-inset-top));
  border-bottom: 2px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em;
}
.brand img { image-rendering: pixelated; }
.brand b { font-weight: 400; }
.nav { display: flex; align-items: baseline; gap: .25rem 1.1rem; flex-wrap: wrap; font-family: var(--mono); font-size: .9rem; }
.nav a, .nav button {
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px;
}
.nav a:hover, .nav button:hover { text-decoration-color: var(--ink); }
.nav .active { font-weight: 700; text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.nav a.btn { text-decoration: none; padding: .2rem .5rem; }
.nav a.btn:hover { color: var(--paper); }
/* inline-block: a link's underline is drawn through inline children, but not into an inline block. */
.badge-dot { display: inline-block; margin-left: .25rem; padding: 0 .3rem; background: var(--ink); color: var(--paper); font-size: .75rem; line-height: 1.4; }
/* Counts in the nav (friend requests, activity, messages) are red so they stand out. */
.nav .badge-dot { background: var(--alert); color: #fff; font-weight: 700; }
/* Tooltips on .has-tip items open below on hover or keyboard focus (placed by app.js so they stay on screen). */
.nav .has-tip + .tooltip { position: fixed; left: 0; top: 0; width: 14rem; max-width: calc(100vw - 16px); }
.nav .has-tip + .tooltip::before { left: var(--arrow-x, 1rem); }
.nav .has-tip:hover + .tooltip, .nav .has-tip:focus-visible + .tooltip { opacity: 1; visibility: visible; }
.menu-panel .menu-icon-item { display: flex; align-items: center; gap: .55rem; }
.menu-panel .menu-icon-item svg { width: 18px; height: 18px; flex: none; }
/* Your picture in place of an icon on "My profile". */
.menu-panel .avatar.menu { width: 20px; height: 20px; min-width: 20px; font-size: .5rem; border-width: 1px; flex: none; }
#menu-btn .badge-dot { margin-left: .35rem; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.75rem 16px 3rem; outline: none; flex: 1; }
/* Each render draws into its own .page inside #app (see render() in app.js); it adds no box of its own. */
.page { display: contents; }

.footer {
  max-width: 1100px; width: calc(100% - 32px); margin: 0 auto;
  padding: 1rem 0 2rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1.1rem; margin-left: auto; } /* right-aligned, even when wrapped */
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.info-page { max-width: 680px; }
.info-body p { margin: 0 0 1rem; }
.info-body h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.info-body ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.info-body li { margin-bottom: .45rem; }

/* Buttons & form controls: square, bordered, plain. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .8rem; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--mono); font-size: .85rem; font-weight: 400;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--link); border-color: var(--link); color: var(--paper); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: var(--paper); }
.btn.ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn.ghost:hover { background: transparent; color: var(--ink); text-decoration-thickness: 2px; }
.btn.ghost.danger:hover { color: var(--danger); }
.btn.sm { padding: .2rem .5rem; font-size: .78rem; }
.btn.block { width: 100%; }

label, .label { display: block; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
label .muted { text-transform: none; letter-spacing: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink); font: 1rem/1.4 var(--serif);
}
select { width: auto; font-family: var(--mono); font-size: .8rem; padding: .25rem .4rem; }
/* iPhone and iPad zoom the page into any form field smaller than 16px when it's tapped. */
@media (pointer: coarse) {
  select, .linkbox input, .reply-form textarea, .chat-form textarea { font-size: 16px; }
}
textarea { min-height: 80px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.btn:focus-visible, .chip:focus-visible, .choice:focus-visible, .photo-pick:focus-visible,
th button:focus-visible, .segmented button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.hint { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-top: .3rem; text-transform: none; letter-spacing: 0; }
.error-text { color: var(--danger); font-family: var(--mono); font-size: .82rem; min-height: 1.2rem; margin-bottom: .5rem; }

/* On/off switches (a checkbox styled as a toggle) */
.toggle { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; cursor: pointer; text-transform: none; font-size: .9rem; letter-spacing: 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { flex: none; width: 1.1rem; height: 1.1rem; border: 1px solid var(--ink); background: var(--card); display: grid; place-items: center; }
.toggle-thumb { width: .55rem; height: .55rem; background: var(--ink); opacity: 0; }
.toggle input:checked + .toggle-track .toggle-thumb { opacity: 1; }
.toggle input:focus-visible + .toggle-track { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* Photo picker */
.photo-field { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.photo-pick {
  flex: none; width: 96px; height: 96px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px dashed var(--ink); border-radius: 0; background: var(--tint); color: var(--ink); font: inherit;
}
.photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-empty { display: flex; flex-direction: column; align-items: center; font-size: 1.4rem; filter: grayscale(1); }
.photo-empty small { font-family: var(--mono); font-size: .7rem; }
.photo-help b { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.photo-buttons { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.loc-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }

/* Photos (tool photos, profile pictures): plain colour WebP in a square frame. */
.pic { display: block; overflow: hidden; background: var(--paper-2); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-pick .pic { width: 100%; height: 100%; }

/* Boxes */
.card { background: var(--card); border: 1px solid var(--rule); padding: 1.2rem; }
.auth-card { max-width: 440px; margin: 1.5rem 0; }
.auth-card h1 { margin-bottom: .25rem; }

/* Landing */
.hero { max-width: 680px; padding: 1rem 0 1.5rem; }
.hero .kicker { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .75rem; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.1; margin-bottom: 1rem; }
.hero .how-title { font-family: var(--mono); font-size: .8rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.5rem 0 .5rem; }
.hero p { font-size: 1.15rem; max-width: 600px; }
.how { list-style: none; counter-reset: how; padding: 0; margin: 0 0 1.5rem; max-width: 600px; }
.how li { counter-increment: how; display: flex; gap: .75rem; align-items: baseline; font-size: 1.15rem; padding: .45rem 0; border-top: 1px solid var(--rule); }
.how li:last-child { border-bottom: 1px solid var(--rule); }
.how li::before { content: counter(how, decimal-leading-zero); font-family: var(--mono); font-size: .85rem; color: var(--muted); flex: none; }
.faq { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.25rem; max-width: 760px; }
.faq h2 { font-size: 1.7rem; margin: 0 0 .75rem; }
.faq ol { list-style: none; counter-reset: faq; padding: 0; margin: 0; }
.faq li { counter-increment: faq; padding: .75rem 0; border-bottom: 1px solid var(--hair); }
/* Collapsed by default: click a question to open its answer. */
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-family: var(--mono); font-size: 1.2rem; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover h3 { text-decoration: underline; }
.faq summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.faq h3 { font-size: 1.3rem; display: flex; gap: .6rem; align-items: baseline; margin: 0; }
.faq h3::before { content: counter(faq, decimal-leading-zero); font-family: var(--mono); font-size: .9rem; font-weight: 400; color: var(--muted); }
.faq p { margin: .6rem 0 .2rem; }

/* Home */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0 0 .2rem; }
.page-head .btn { white-space: normal; max-width: 100%; }
.ledger { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin: 0; }
.profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.toolbar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; padding: .9rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--hair); }
.search { display: flex; align-items: center; gap: .6rem; margin: 0; }
.search input { flex: 1; text-transform: none; letter-spacing: 0; }
.toolbar-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip {
  padding: .15rem .5rem; border: 1px solid var(--hair); border-radius: 0; background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: .78rem; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip.sm { font-size: .74rem; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { opacity: .65; margin-left: .35rem; }
.view-controls { display: flex; align-items: center; gap: .75rem; }
.sort-select { display: flex; align-items: center; gap: .35rem; margin: 0; }
.segmented { display: inline-flex; border: 1px solid var(--ink); }
.segmented button {
  padding: .2rem .6rem; border: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: .78rem; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Tool table (default view) */
.table-wrap { overflow-x: auto; }
.tool-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tool-table th {
  text-align: left; font-family: var(--mono); font-size: .74rem; font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--rule); padding: .35rem .5rem; white-space: nowrap;
}
.tool-table th button {
  padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.tool-table th button:hover, .tool-table th[aria-sort="ascending"] button, .tool-table th[aria-sort="descending"] button { color: var(--ink); }
.tool-table th .arrow { display: inline-block; width: 1em; margin-left: .2rem; }
.tool-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tool-table tbody tr:hover td { background: var(--paper-2); }
.tool-table .c-img { width: 56px; padding-right: 0; }
.thumb { display: block; width: 48px; height: 48px; }
.empty-thumb { border: 1px dashed var(--hair); }
.tool-table tbody tr[data-tool] { cursor: pointer; }
/* The item's name opens its details (the whole row does too, for a mouse or finger). */
.tool-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.tool-open:hover, .tool-open:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* The item details window */
.tool-details h2 { margin: .4rem 0 .3rem; }
.tool-details-photo { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 auto .5rem; border: 1px solid var(--rule); }
.tool-details-desc { white-space: pre-line; word-break: break-word; }
.tool-details-list { margin: .75rem 0 0; border-top: 1px solid var(--hair); }
.tool-details-list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--hair); }
.tool-details-list dt { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: .15rem; }
.tool-details-list dd { margin: 0; word-break: break-word; }
.tool-details-actions { flex-wrap: wrap; }
.tool-table .note { color: var(--muted); font-size: .85rem; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-table .sub { display: none; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.tool-table .c-type, .tool-table .c-who { white-space: nowrap; }
/* The brand sits under the item's name, small. */
.tool-table .brand-line { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-top: .1rem; }
/* Column headers do the sorting in list view on wide screens. */
/* The sort picker is for phones; wider screens sort with the table headers. */
@media (min-width: 861px) { .toolbar .sort-select, .toolbar #sort-slot { display: none; } }
.tool-table .c-act { text-align: right; }
.tool-table .c-act .actions { justify-content: flex-end; flex-wrap: nowrap; }

@media (max-width: 860px) {
  .tool-table thead { display: none; }
  .tool-table, .tool-table tbody { display: block; }
  .tool-table tr {
    display: grid; grid-template-columns: 56px 1fr auto; column-gap: .6rem; row-gap: .35rem;
    grid-template-areas: "img name status" "img act act";
    padding: .7rem 0; border-bottom: 1px solid var(--hair);
  }
  .tool-table td { padding: 0; border: 0; }
  .tool-table tbody tr:hover td { background: none; }
  .tool-table .c-img { grid-area: img; width: auto; }
  .tool-table .c-name { grid-area: name; min-width: 0; }
  .tool-table .c-status { grid-area: status; text-align: right; }
  .tool-table .c-act { grid-area: act; text-align: left; }
  .tool-table .c-act .actions { justify-content: flex-start; flex-wrap: wrap; }
  .tool-table .c-type, .tool-table .c-who { display: none; }
  .tool-table .sub { display: block; }
  .tool-table .note { max-width: none; }
}

/* Sections */
.section { margin-bottom: 2rem; }
.section-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; border-bottom: 2px solid var(--rule); padding-bottom: .3rem; margin-bottom: 1rem; }
.section-title h2 { margin: 0; }
.section-title .muted { font-family: var(--mono); font-size: .76rem; }
.actions { display: flex; gap: .35rem; flex-wrap: wrap; }

.tag { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.tag::before { content: "#"; }
.status { font-family: var(--mono); font-size: .74rem; white-space: nowrap; }
.status::before { content: "■ "; }
.status.available { color: var(--ok); }
.status.lent { color: var(--lent); }
.status.borrowing { color: var(--borrow); }
.status.unavailable { color: var(--muted); }

.empty { padding: 2rem 0; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.empty h2 { color: var(--ink); }
.empty .btn { margin-top: .75rem; }

/* Profile */
.profile-card { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.avatar {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px;
  border: 1px solid var(--rule); background: var(--tint);
  color: var(--ink); font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
}
.avatar.sm { width: 38px; height: 38px; font-size: .85rem; }
.profile-info { flex: 1; min-width: 200px; }
.profile-info h1 { margin-bottom: .1rem; }
.profile-info .muted { font-family: var(--mono); font-size: .8rem; }
.profile-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; text-align: right; }
.profile-side:empty, .profile-side:not(:has(.based-in, .profile-actions > *)) { display: none; }
.based-in { margin: 0; font-family: var(--mono); font-size: .85rem; display: flex; flex-direction: column; gap: .1rem; max-width: 16rem; word-break: break-word; }
.based-in .label { margin: 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) {
  .profile-side { margin-left: 0; width: 100%; align-items: flex-start; text-align: left; }
}
.linkbox { display: flex; gap: .5rem; margin-top: .75rem; }
.linkbox input { font-family: var(--mono); font-size: .85rem; }

/* Friends */
.list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.row { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.row .grow { flex: 1; min-width: 160px; }
.row .name { font-weight: 700; color: var(--ink); }
.row .muted.small { font-family: var(--mono); font-size: .74rem; }
.row .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Modal */
.modal {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0;
  border: 2px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.modal::backdrop { background: rgb(27 25 20 / 45%); }
.modal-body { padding: 1.4rem; }
.modal-body h2 { font-size: 1.35rem; border-bottom: 2px solid var(--rule); padding-bottom: .4rem; margin-bottom: 1rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.25rem; }
.choice-list { display: flex; flex-direction: column; margin-top: 1rem; border-top: 1px solid var(--rule); }
.choice {
  display: flex; gap: .85rem; align-items: center; text-align: left; width: 100%;
  padding: .8rem .4rem; border: 0; border-bottom: 1px solid var(--hair); background: none;
  color: var(--ink); font: inherit; cursor: pointer;
}
.choice:hover { background: var(--paper-2); }
.choice .icon { font-size: 1.3rem; filter: grayscale(1); }
.choice b { display: block; }
.choice span { color: var(--muted); font-size: .88rem; }
.checklist { max-height: 45vh; overflow: auto; border: 1px solid var(--rule); margin-top: .75rem; }
.checklist label {
  display: flex; gap: .7rem; align-items: center; padding: .55rem .8rem; margin: 0; cursor: pointer;
  font-family: var(--serif); font-size: 1rem; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--hair);
}
.checklist label:last-child { border-bottom: 0; }
.checklist label:hover { background: var(--paper-2); }
.checklist input { width: 1rem; height: 1rem; accent-color: var(--ink); }

/* Toasts */
.toasts { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: .5rem; align-items: center; width: calc(100vw - 32px); pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: .5rem .85rem; font-family: var(--mono); font-size: .82rem; max-width: 480px; }
.toast.error { background: var(--danger); }

.offline-banner { background: var(--ink); color: var(--paper); text-align: center; padding: .35rem; font-family: var(--mono); font-size: .8rem; }
.loading { padding: 3rem 0; font-family: var(--mono); font-size: .85rem; color: var(--muted); }

/* Profile menu */
.menu { position: relative; }
.menu > button[aria-expanded="true"] { text-decoration-color: var(--ink); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 20; min-width: 230px;
  background: var(--paper); border: 2px solid var(--rule); box-shadow: 4px 4px 0 var(--ink);
  padding: .4rem 0; font-family: var(--mono); font-size: .85rem;
}
.menu-panel a, .menu-panel > button {
  display: block; width: 100%; text-align: left; padding: .45rem .9rem; text-decoration: none;
}
.nav .menu-panel a, .nav .menu-panel > button { text-decoration: none; }
.menu-panel a:hover, .menu-panel > button:hover { background: var(--paper-2); }
.menu-panel hr { border: 0; border-top: 1px solid var(--hair); margin: .3rem 0; }

.settings-card { margin-top: 1.25rem; max-width: 520px; }

/* Borrow requests & lending log */
.row.request { align-items: flex-start; }
.note-quote {
  margin: .45rem 0 0; padding: .35rem .7rem; border-left: 3px solid var(--rule);
  background: var(--card); font-size: .92rem; white-space: pre-line; word-break: break-word;
}
.note-quote span {
  display: block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.log-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.log-table th {
  text-align: left; font-family: var(--mono); font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-bottom: 2px solid var(--rule); padding: .35rem .5rem; white-space: nowrap;
}
.log-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.log-table td:first-child, .log-table td[data-label="Answered"], .log-table td[data-label="Returned"] {
  font-family: var(--mono); font-size: .76rem; white-space: nowrap;
}
.log-table tr.unseen td { background: var(--paper-2); }
.log-table td[data-label="Who"], .log-table td[data-label="Item"] { white-space: nowrap; }
.log-notes { min-width: 12rem; }
.log-notes .note-quote { margin: 0 0 .35rem; font-size: .85rem; }
.log-table .badge-dot { font-family: var(--mono); }
@media (max-width: 960px) {
  .log-table thead { display: none; }
  .log-table, .log-table tbody, .log-table tr, .log-table td { display: block; }
  .log-table tr { padding: .7rem 0; border-bottom: 1px solid var(--hair); }
  .log-table td { border: 0; padding: .1rem 0; display: flex; gap: .6rem; white-space: normal !important; }
  .log-table td::before {
    content: attr(data-label); flex: none; width: 6.5rem;
    font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: .15rem;
  }
  .log-table td.log-notes { display: block; min-width: 0; }
  .log-table td.log-notes::before { display: block; width: auto; margin-bottom: .2rem; }
}

/* A friend's tool someone else has borrowed or asked for: greyed out until it's free. */
/* Lent out / not available: grey the photo only, so the text stays readable (the Status column says why). */
.is-unavailable .c-img .thumb { opacity: .45; filter: grayscale(1); }

/* Accent button (the compose form's Send) */
.btn.accent { background: var(--link); border-color: var(--link); color: var(--paper); }
.btn.accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.recipients { border: 0; padding: 0; margin: 0 0 1rem; }
.recipients legend { padding: 0; margin-bottom: .35rem; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.recipients .radio {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem;
  font-family: var(--serif); font-size: 1rem; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.recipients .radio input, .recipients .checklist input { accent-color: var(--ink); }
.recipients .checklist { max-height: 30vh; }

/* Landing page plan cards: equal widths, button pinned to the bottom of each card. */
.plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .5rem 0 .9rem; max-width: 56rem; }
.plan-card { display: flex; flex-direction: column; gap: .35rem; background: var(--card); border: 1px solid var(--rule); padding: 1.2rem; color: var(--ink); text-decoration: none; }
.plan-card:hover { border-color: var(--link); }
.plan-card.featured { border-width: 2px; padding: calc(1.2rem - 1px); }
.plan-card .plan-title { font-size: 1.1rem; line-height: 1.25; }
.plan-card .plan-price { font-family: var(--mono); font-size: .9rem; color: var(--muted); }
.plan-card ul { margin: .5rem 0 1rem; padding-left: 1.1rem; flex: 1; }
.plan-card li { margin: .2rem 0; }
.plan-card .btn { align-self: flex-start; }
@media (max-width: 760px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-note { border-left: 3px solid var(--link); padding: .4rem .75rem; background: var(--paper-2); font-size: .92rem; }

/* Sign-up: terms on the left, form on the right (stacked, terms first, on small screens) */
.signup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
/* One column on phones: the form first, the Terms (also linked from the checkbox) after it. */
@media (max-width: 860px) { .signup-layout { grid-template-columns: 1fr; } .signup-layout > .terms { order: 1; } }
.terms { border: 1px solid var(--rule); background: var(--card); padding: 1.1rem 1.2rem; }
@media (min-width: 861px) { .terms { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; } }
@media (max-width: 860px) { .terms .terms-body { max-height: 40vh; overflow: auto; } }
.terms h2 { border-bottom: 2px solid var(--rule); padding-bottom: .35rem; }
.terms-updated { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.terms-body { font-size: .95rem; }
.terms-page { max-width: 720px; }
.signup-card h1 { margin-bottom: .9rem; }


/* Services (help.js) */
.typeahead { position: relative; margin-bottom: 1.25rem; }
.typeahead input { font-size: 1.1rem; padding: .7rem .8rem; }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 15; margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: 2px solid var(--rule); border-top: 0; box-shadow: 4px 4px 0 var(--ink);
}
.suggest li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .55rem .8rem; cursor: pointer; border-bottom: 1px solid var(--hair); }
.suggest li:last-child { border-bottom: 0; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--ink); color: var(--paper); }
.suggest li[aria-selected="true"] .muted, .suggest li:hover .muted { color: var(--paper); opacity: .75; }
.provider-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.provider-card { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 0; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
/* Services page: no rule under the list (or under the empty / loading message). */
#help-results .provider-card:last-child { border-bottom: 0; }
#help-results .empty { border-bottom: 0; }
/* Friends page: just the heading's dark rule, no thin line under it. */
#friends-page .list, #friends-page .empty { border-top: 0; }
.friends-empty { border-bottom: 0; }
.provider-card:hover b { text-decoration: underline; }
.provider-head { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; }
.provider-meta { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.provider-keywords { display: flex; flex-wrap: wrap; gap: .5rem; }
.insured-tag {
  display: inline-block; padding: .05rem .4rem; border: 1px solid currentColor; color: var(--ok);
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
}

/* Provider page */
.services-card { margin: 1rem 0; }
.about-card { margin: 1rem 0; }
/* Profile header image: 3:1, full width above the profile card. */
.profile-banner { position: relative; aspect-ratio: 3 / 1; margin-bottom: 1rem; border: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.profile-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-banner.placeholder { border-style: dashed; display: grid; place-items: center; }
.banner-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1rem; max-width: 32rem; }
.banner-empty svg { width: 40px; height: 40px; color: var(--muted); }
@media (max-width: 520px) { .profile-banner.placeholder { aspect-ratio: auto; min-height: 9rem; } }
.about-card h2 { margin: 0 0 .5rem; }
.about-text { white-space: pre-line; margin: 0; }
.about-count { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.services-card .section-title { align-items: center; gap: .6rem; }
.services-card .section-title h2 { margin: 0; }
.services-card .provider-description { margin: .75rem 0 0; }
.provider-description { white-space: pre-line; margin: 1rem 0 1.25rem; font-size: 1.05rem; }
.suggest li[aria-selected="true"] .insured-tag, .suggest li:hover .insured-tag { color: var(--paper); }

.reply-form { padding-left: .9rem; margin-top: .4rem; }
.reply-form textarea { min-height: 3.2rem; font-size: .95rem; }

.link-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn.danger { color: var(--danger); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Direct messages: the envelope next to each friend, and the chat at /friends/<username> */
.dm-link { position: relative; }
.dm-link .badge-dot { position: absolute; top: -.5rem; right: -.55rem; margin: 0; background: var(--alert); color: #fff; font-weight: 700; font-size: .66rem; line-height: 1.3; }
.dm-subject { margin: .15rem 0 0; font-weight: 700; word-break: break-word; }
.chat-body.deleted { font-style: italic; }
.dm-page { max-width: 760px; margin: 0 auto; }
.dm-back { margin: 0 0 .75rem; font-family: var(--mono); font-size: .8rem; }
.dm-head { display: flex; align-items: center; gap: .8rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 2px solid var(--rule); }
.dm-head h1 { margin: 0; font-size: 1.4rem; }
.dm-head p { margin: .1rem 0 0; font-size: .85rem; }

/* Activity tabs */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin: 1.5rem 0 0; }
.tabs [role=tab] {
  padding: .5rem .9rem; margin-bottom: -2px; border: 2px solid transparent; border-bottom: 0; background: none;
  color: var(--muted); font-family: var(--serif); font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.tabs [role=tab]:hover { color: var(--ink); }
.tabs [role=tab][aria-selected="true"] { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.tabs [role=tab]:focus-visible { outline: 2px dashed var(--ink); outline-offset: -4px; }
.tabs .tab-count { font-family: var(--mono); font-size: .8rem; font-weight: 400; }
.tabs .badge-dot { vertical-align: middle; }
.tab-intro { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin: .75rem 0 .75rem; }
@media (max-width: 480px) { .tabs [role=tab] { font-size: 1rem; padding: .45rem .6rem; } }


/* Profile pictures */
.avatar.pic { padding: 0; overflow: hidden; }
.avatar.pic img { width: 100%; height: 100%; object-fit: cover; }

/* Delete account */
.danger-zone { border-color: var(--danger); margin-top: 1.25rem; }
.danger-zone h2 { color: var(--danger); }
.delete-warning { border-left: 3px solid var(--danger); padding: .4rem .7rem; background: var(--paper-2); }
.delete-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .delete-lists { grid-template-columns: 1fr; } }
.delete-lists h3 { font-family: var(--mono); font-size: .76rem; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .3rem; }
.delete-lists ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.delete-lists li { margin-bottom: .25rem; }
.deleted-user { color: var(--muted); font-style: italic; }
.tooltip {
  position: absolute; left: 0; top: calc(100% + .5rem); z-index: 20; width: 16rem;
  padding: .45rem .6rem; background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--hair);
  font-family: var(--mono); font-size: .72rem; line-height: 1.4; text-align: left; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.tooltip::before { content: ""; position: absolute; left: 1.4rem; top: -.4rem; border: .4rem solid transparent; border-top: 0; border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } }
/* Friends log (Activity) */
.event-log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.event-log .event { display: flex; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.event-log .event-when { flex: none; width: 9.5rem; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.event-log .event.accepted span:last-child { font-weight: 700; }
@media (max-width: 560px) { .event-log .event { flex-direction: column; gap: .1rem; } }

/* Dialog close (X) and share modal. (The open dialog is position: fixed, so the × positions against it.) */
.modal-x {
  position: absolute; top: .55rem; right: .6rem; z-index: 1; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid transparent; background: none; color: var(--ink); font: 1.4rem/1 var(--mono); cursor: pointer;
}
.modal-x:hover { border-color: var(--ink); }
.modal-x:focus-visible { outline: 2px dashed var(--ink); outline-offset: 1px; }
.modal-body h2 { padding-right: 2rem; }
.qr-box { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.qr-box img { width: 220px; height: 220px; border: 1px solid var(--rule); background: #fff; image-rendering: pixelated; }
.share-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .75rem; }
.share-extra .hint { margin: 0; width: 100%; }

/* Settings cards, two to a row (stacked on small screens). */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.settings-grid > .settings-card { max-width: none; margin: 0; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } }
/* "Friends ✓" sits right after the name on a friend's profile. */
.profile-info h1 .name-badge { font-size: .74rem; font-weight: 400; vertical-align: middle; margin-left: .4rem; }
/* Section heading with a button pushed to the right (e.g. "Your friends" + Message All). */
.section-title.with-action { align-items: center; }
.section-title.with-action .btn { margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; gap: .4rem; padding-inline: .45rem; }
.icon-btn svg { width: 18px; height: 18px; }

/* Permanent-choice warning (e.g. username on sign-up). */
.warn-text { color: var(--danger); font-weight: 700; font-size: .72rem; text-transform: none; letter-spacing: 0; margin-left: .35rem; }
.form-note { margin: -.5rem 0 1rem; font-family: var(--mono); font-size: .74rem; color: var(--muted); }

/* ---- Services sections of a profile (enhanced.js) ---- */
.profile-extras { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.pay-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.profile-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-family: var(--mono); font-size: .82rem; }
.profile-skills { margin: 1rem 0; }
.skill-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink); font-family: var(--mono); font-size: .8rem; text-decoration: none; }
a.pill:hover { border-color: var(--link); color: var(--link); }
.pill-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.pill-x:hover { color: var(--danger); }
.pills-title { font-size: 1.05rem; margin: 0 0 .45rem; }
.profile-skills .skill-pills + .pills-title { margin-top: 1rem; }
#barter-box { display: flex; flex-direction: column; gap: .4rem; }
#barter-box[hidden] { display: none; }
#barter-box .hint { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1.25rem 0; }
@media (max-width: 480px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
.photo-cell { display: flex; flex-direction: column; gap: .25rem; padding: 0; border: 0; background: none; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; text-decoration: none; min-width: 0; }
.photo-square { display: block; aspect-ratio: 1; border: 1px solid var(--rule); overflow: hidden; }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-cell:hover .photo-square, .photo-cell:focus-visible .photo-square { border-color: var(--link); }
.photo-title { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.photo-more { font-family: var(--mono); font-size: .7rem; color: var(--link); }
.photo-view { margin: 0; }
.photo-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; }
.photo-nav .btn { font-size: 1.2rem; line-height: 1; padding: .3rem .9rem; }
.photo-view img { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); }
.photo-view h2 { margin: .8rem 0 .3rem; }
.photo-description { white-space: pre-line; margin: 0; }
.photo-details { display: flex; flex-direction: column; gap: .4rem; }
.photo-details > img { width: 128px; height: 128px; object-fit: cover; border: 1px solid var(--rule); }
.photo-edit { display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; aspect-ratio: 1; }
.photo-edit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-tile .photo-title { display: block; font-size: .78rem; margin-top: .2rem; }
.upgrade-section { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.upgrade-section h3 { margin: 0; font-size: 1.05rem; }
.upgrade-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.upgrade-section fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.upgrade-section textarea, .upgrade-section input[type=text], .upgrade-section input[type=tel], .upgrade-section input[type=email] { width: 100%; }
/* "Saving…" / "Saved ✓" under forms that save as you go (ui.js autosave). */
.save-status { min-height: 1.2em; text-align: right; font-family: var(--mono); font-size: .75rem; color: var(--muted, inherit); }
.upgrade-section form { display: flex; flex-direction: column; gap: .6rem; }

/* Your own profile: two form panels ("wells"). */
.own-profile .page-head h1 { margin: 0; }
.edit-well { margin: 0 0 1.25rem; }
.edit-well > h2 { margin: 0 0 .9rem; }
.edit-well .field input[type=text], .edit-well .field input[type=tel], .edit-well .field input[type=email], .edit-well .field textarea { width: 100%; }
.edit-well input[readonly] { background: var(--paper-2); color: var(--muted); cursor: default; }
.picture-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.edit-well .about-count { margin-top: .3rem; }
.preview-note { margin-bottom: 1rem; }
.skill-pills.editing:empty { display: none; }
.photo-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }
.photo-editor:empty { display: none; }
.photo-tile { position: relative; border: 1px solid var(--rule); }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-tile .pill-x { position: absolute; top: .15rem; right: .15rem; background: var(--paper); border: 1px solid var(--rule); width: 1.4rem; height: 1.4rem; }
.settings-rule { border: 0; border-top: 1px solid var(--ink); opacity: .2; margin: 1.25rem 0 1rem; }
#password-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
#password-form .field { width: 100%; }

/* /admin */
.admin-page { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.admin-stat { border: 1px solid var(--ink); background: var(--card); padding: .75rem .9rem; }
.admin-stats-small .admin-stat { background: transparent; }
.admin-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.admin-stat-label { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.admin-stat-note { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.admin-card h2 { margin-top: 0; }
.admin-table { width: 100%; border-collapse: collapse; margin: .75rem 0 .25rem; font-variant-numeric: tabular-nums; }
.admin-table caption { text-align: left; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding-bottom: .35rem; }
.admin-table th, .admin-table td { padding: .4rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.admin-table thead th { font-family: var(--mono); font-size: .75rem; font-weight: 400; color: var(--muted); }
.admin-table td, .admin-table thead th:not(:first-child) { text-align: right; }
.admin-table tbody th, .admin-table thead th:first-child { text-align: left; font-weight: 400; }
.admin-flag { font-family: var(--mono); font-size: .7rem; color: var(--danger, #a3361f); white-space: nowrap; }
.admin-meter { height: 10px; border: 1px solid var(--ink); background: var(--card); margin-top: 1rem; }
.admin-meter-fill { height: 100%; background: var(--ink); min-width: 2px; }
@media (max-width: 640px) {
  .admin-card { overflow-x: auto; }
  .admin-table th, .admin-table td { padding: .35rem .4rem; font-size: .85rem; }
}

/* Email verification (verify.js) */
.verify-page { max-width: 520px; margin: 2rem auto; }
.verify-page h1 { margin-top: 0; }
.verify-change { margin: 1.25rem 0 .5rem; }
.verify-change summary { cursor: pointer; font-family: var(--mono); font-size: .85rem; }
.verify-change form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin-top: .75rem; }
.verify-change .field, #email-form .field { width: 100%; }
#email-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.email-row { display: flex; gap: .5rem; align-items: stretch; }
.email-row input { flex: 1; min-width: 0; }
#g-email-field label .status { margin-left: .4rem; text-transform: none; letter-spacing: 0; }

/* "Who can see your phone and email?" (provider.js contactVisibilityField) */
.contact-visibility { border: 0; padding: 0; margin: .25rem 0 0; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.contact-visibility legend { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; padding: 0; }
/* A plain sentence, not the uppercase label style used above form fields. */
.radio-row { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; margin: 0; font-family: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; }
.radio-row input { margin: 0; accent-color: var(--ink); }
.members-contact { margin: .4rem 0 0; }

/* "A new version is ready" (app.js showUpdateBanner): bottom of the screen, above the toasts. */
.update-banner {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100% - 32px); padding: .6rem .9rem; background: var(--ink); color: var(--paper);
  border-radius: 4px; font-family: var(--mono); font-size: .8rem; box-shadow: 0 2px 10px rgb(0 0 0 / .25);
}
.update-banner .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.update-banner .link-btn { color: var(--paper); }

/* "Put Share Local on your Home Screen" (install.js): phones only, same spot as the update banner. */
.install-banner {
  position: fixed; left: 16px; right: 16px; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: flex-end; gap: .75rem; padding: .75rem .9rem; background: var(--ink); color: var(--paper);
  border-radius: 4px; font-size: .9rem; line-height: 1.4; box-shadow: 0 2px 10px rgb(0 0 0 / .25);
}
.install-text { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.install-text ol { margin: .25rem 0 0; padding-left: 1.2rem; }
.install-actions { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.install-banner .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.install-banner .link-btn { color: var(--paper); white-space: nowrap; }

/* ---- Vote on Features (views/features.js) ---- */
.votes-left { margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.votes-left b { font-family: var(--mono); }
.features-toolbar { margin-bottom: .5rem; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-row { display: flex; gap: .9rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--hair); }
.feature-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.feature-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); text-decoration: none; word-break: break-word; }
.feature-title:hover { text-decoration: underline; }
.vote-box { display: flex; flex-direction: column; gap: .25rem; flex-shrink: 0; }
.vote {
  min-width: 3.4rem; padding: .2rem .45rem; border: 1px solid var(--hair); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: .8rem; cursor: pointer; text-align: left;
}
.vote:hover:not(:disabled) { border-color: var(--ink); }
.vote:disabled { opacity: .45; cursor: not-allowed; }
.vote.up[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--paper); opacity: 1; }
.vote.down[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: var(--paper); opacity: 1; }
.feature-status { font-family: var(--mono); font-size: .74rem; }
.feature-status::before { content: "■ "; }
.feature-status.open { color: var(--borrow); }
.feature-status.built { color: var(--ok); }
.feature-status.closed { color: var(--muted); }
.feature-head { display: flex; gap: 1rem; align-items: flex-start; }
.feature-head h1 { margin: 0 0 .2rem; word-break: break-word; }
.feature-body { white-space: pre-line; word-break: break-word; margin: 1rem 0; }
.moderate-form { margin: 1rem 0; }
.moderate-form h2 { font-size: 1rem; margin-top: 0; }
.thread { list-style: none; margin: 0 0 1rem; padding: 0; }
.thread-entry { padding: .65rem 0; border-bottom: 1px solid var(--hair); }
.thread-body { margin: .3rem 0 0; white-space: pre-line; word-break: break-word; }
.status-entry { background: var(--paper-2); padding: .65rem .75rem; border-bottom: 0; margin: .4rem 0; }
.admin-tag { font-family: var(--mono); font-size: .68rem; font-weight: 400; border: 1px solid var(--ink); padding: 0 .3rem; margin-left: .2rem; }
.comment-form { max-width: 40rem; }

.offers-toggle { margin: .25rem 0 1rem; align-items: flex-start; }
.offers-toggle .muted { display: block; margin-top: .2rem; }

/* Location type-ahead (ui.js bindPlaceSuggest) */
.place-suggest { position: relative; }
.place-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--ink); box-shadow: 0 4px 14px rgb(0 0 0 / .15); max-height: 18rem; overflow-y: auto;
}
.place-list [role="option"] { padding: .55rem .7rem; cursor: pointer; border-bottom: 1px solid var(--hair); font-size: .92rem; line-height: 1.35; }
.place-list [role="option"]:hover, .place-list [aria-selected="true"] { background: var(--ink); color: var(--paper); }
.place-note, .place-credit { padding: .4rem .7rem; font-family: var(--mono); font-size: .7rem; color: var(--muted); }

/* Your profile → General Info: picture on the left, name, handle and email beside it. */
.header-field .profile-banner { margin-bottom: .6rem; }
.identity-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.identity-picture { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; max-width: 13rem; }
.identity-picture .avatar { width: 128px; height: 128px; font-size: 2.2rem; }
.identity-picture .picture-actions { gap: .45rem .7rem; }
.identity-picture .hint { margin: 0; }
@media (max-width: 600px) {
  .identity-row { grid-template-columns: 1fr; gap: .5rem; }
  .identity-picture { max-width: none; }
}

/* ---- Communities (views/communities.js) ---- */
.community-icon {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--rule); background: var(--tint); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 1.2rem;
}
.community-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.community-icon.md { width: 88px; height: 88px; font-size: 1.6rem; }
.community-icon.lg { width: 112px; height: 112px; font-size: 2rem; }
.icon-pick { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.community-head { display: flex; align-items: center; gap: 1.1rem; margin: .5rem 0 1.5rem; flex-wrap: wrap; }
.community-head h1 { margin: 0 0 .2rem; word-break: break-word; }
.community-head .muted { margin: 0; font-family: var(--mono); font-size: .8rem; }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); }
.member-name { flex: 1; min-width: 0; }
.member-name .member-tools { display: block; font-size: .72rem; margin-top: .1rem; }
.member-tools .link-btn { font-size: inherit; }
.community-members .add-people { margin: 0 0 .6rem; }
.add-list { max-height: 50vh; overflow-y: auto; margin-bottom: .5rem; }
.leave-hint { margin: .2rem 0 0; }
.role-tag { font-family: var(--mono); font-size: .7rem; border: 1px solid var(--ink); padding: 0 .35rem; }
/* Community page: chat on the left; on the right, the community (icon, name, buttons) above its members.
   On phones: the community first, then the chat, then the members. */
.community-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "chat head" "chat members";
  grid-template-rows: auto 1fr; gap: 0 1.75rem; align-items: start; margin-top: .5rem;
}
.community-chat { grid-area: chat; }
.community-side-head { grid-area: head; margin-bottom: 1.25rem; }
.community-members { grid-area: members; }
.community-side-head .community-head { flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0 0 .9rem; }
.community-side-head .community-head h1 { font-size: 1.5rem; }
.community-side-head .community-actions { flex-direction: column; align-items: stretch; }
.community-layout h2 { font-size: 1.1rem; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--rule); }
.community-layout h2 .muted { font-family: var(--mono); font-size: .76rem; font-weight: 400; }
.chat-list { list-style: none; margin: 0; padding: .25rem .25rem .25rem 0; max-height: min(60vh, 34rem); min-height: 12rem; overflow-y: auto; }
.chat-message { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; }
.chat-bubble { flex: 1; min-width: 0; }
.chat-meta { font-size: .85rem; }
.chat-meta .muted { font-family: var(--mono); font-size: .72rem; }
.chat-body { margin: .15rem 0 0; white-space: pre-line; word-break: break-word; }
.chat-message.mine .chat-bubble { border-left: 3px solid var(--tint); padding-left: .55rem; }
.chat-empty { padding: 2rem 0; text-align: center; }
.chat-event { padding: .35rem 0; text-align: center; font-size: .82rem; color: var(--muted); }
.chat-event b { font-weight: 600; }
.chat-event .muted { font-family: var(--mono); font-size: .72rem; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; border-top: 1px solid var(--hair); padding-top: .6rem; }
.chat-form textarea { flex: 1; min-height: 2.6rem; resize: vertical; }
.join-card { max-width: 30rem; margin: 2rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.join-card h1 { margin: .5rem 0 0; word-break: break-word; }
.join-card .modal-actions { justify-content: center; }
@media (max-width: 760px) {
  .community-layout { grid-template-columns: 1fr; grid-template-areas: "head" "chat" "members"; grid-template-rows: auto; gap: 0; }
  .community-side-head .community-head { flex-direction: row; align-items: center; }
  .community-side-head .community-actions { flex-direction: row; flex-wrap: wrap; }
  .community-chat { margin-bottom: 1.5rem; }
}
.community-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.community-note { margin-bottom: 1rem; }
/* "via Elm Street" under an item's owner, when you see it only because of a community. */
.via-line { font-family: var(--mono); font-size: .7rem; color: var(--muted); white-space: normal; margin-top: .1rem; max-width: 12rem; }
.via a { color: var(--link); }
/* Library: the source picker sits at the right of the filter row. */
.toolbar-row .view-controls { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.source-select { margin: 0; text-transform: none; letter-spacing: 0; }
.source-select select { font-family: var(--mono); font-size: .8rem; padding: .25rem .4rem; max-width: 16rem; }

/* The community strip under the top bar (app.js): "+ Create Community", then your circles. */
.community-strip { max-width: 1100px; width: calc(100% - 32px); margin: 0 auto; padding-top: .5rem; }
.community-strip-inner { display: flex; align-items: center; gap: .75rem; overflow-x: auto; padding: 8px 8px 3px 3px; scrollbar-width: thin; }
.strip-create {
  flex: none; height: 36px; padding: 0 .8rem; border: 1px dashed var(--rule); border-radius: 18px; background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: .75rem; cursor: pointer; white-space: nowrap;
}
.strip-create span { font-size: 1rem; margin-right: .2rem; }
.strip-create:hover { border-style: solid; background: var(--paper-2); }
.strip-circle { flex: none; position: relative; border-radius: 50%; text-decoration: none; }
.strip-badge {
  position: absolute; top: -4px; right: -6px; margin: 0; min-width: 1.1rem; text-align: center;
  background: var(--alert); color: #fff; font-weight: 700; font-size: .65rem; line-height: 1.35; border-radius: 3px;
}
.strip-circle .community-icon { width: 36px; height: 36px; font-size: .8rem; }
.strip-circle:hover .community-icon, .strip-circle:focus-visible .community-icon { box-shadow: 0 0 0 2px var(--link); }
.strip-circle.active .community-icon { box-shadow: 0 0 0 2px var(--ink); }
.community-strip:not([hidden]) + .container { padding-top: 1.25rem; }

/* Next steps in an empty library: what to do, and a button for it. */
.next-steps { list-style: none; counter-reset: step; margin: 1.1rem 0 0; padding: 0; max-width: 34rem; text-align: left; }
.next-steps li { counter-increment: step; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--hair); }
.next-steps li span::before { content: counter(step) ". "; font-family: var(--mono); color: var(--muted); }
.next-steps .btn { flex: none; }
@media (max-width: 480px) { .next-steps li { flex-direction: column; align-items: flex-start; } }