/* cheatsheet.life hub: page layout only (goal 3406). The look (type, buttons by role, pill tabs, #EEE tiles, list rows) is
   /css-lib/cheatsheet-life.css, ONE sheet shared with the product sites; never restyle any of it here. */
.productName { font-weight: 600; }
.fieldName { flex: 0 0 7rem; color: var(--mid-gray); }
.notSet { font-style: italic; color: var(--mid-gray); }
/* Leave a comment, every page's last line: the family sheet draws it (.pageFooter, centred on every product since goal 4386). */

/* The trust barker (goal 3847): a #EEE tile at the top of the signed-in home and /profile, filled by js/www.js loadTrust only for a member
   cheatsheet.life does not trust yet. Hidden, it must not move the page: the family's tile-to-list gap stays off the profile's fields. */
#trustBarker.is-hidden + ul.rows { margin-top: 0; }

/* The home's header (goal 4369, Ian 2026-10-27): no Home pill; the page title at the left of the account pills' row, sharing it ("The Profile
   and Sign Out bar can be on the same level as the cheatsheet life title"). Too narrow for both, the pills wrap under it, at the right. */
.headerNavs > h1.homeTitle { flex: 1 1 auto; min-width: 0; margin-bottom: 0; overflow-wrap: break-word; }

/* The products' icons and the Your order grip (goal 4369, Ian: "a font-based monotone, line-drawing icon for each product, in the style found
   on the schedule product for sessions"): Lucide's (ISC, font/LICENSE-lucide.txt), cut down to the glyphs js/www.js ICONS names and the grip
   (e0eb). An icon is the TEXT of <span class="lc"> (a private-use character), drawn in the text colour at the size its rule gives it.
   Font holds: e0eb e102 e129 e134 e14a e1d0 e1d1 e304 e4d2 e54e e5c0 e76f */
@font-face { font-family: 'Lucide Products'; font-style: normal; font-weight: 400; font-display: block; src: url(/font/lucide-products.woff) format('woff'); }
.lc { display: inline-block; font-family: 'Lucide Products'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; }

/* The Products list (goal 4369): the tab bar over it picks the order (Your order, Recently used, Alphabetical); a row = the grip (Your order
   only), the product's icon (26px, as schedule's session rows), its name (the link, opening it in a new tab, with the family arrow) and its
   line, which goes under the name on a phone. The grip drags the row (a finger too: touch-action none) and takes the arrow keys. */
#productOrder { margin-bottom: 12px; }
#products > li { flex-wrap: wrap; column-gap: 10px; }
#products .productIcon { flex: 0 0 28px; width: 28px; text-align: center; font-size: 26px; }
#products .productName { flex: 0 0 auto; }
#products .where { flex: 1 1 12rem; min-width: 0; }
#products .dragHandle { display: none; flex: 0 0 auto; padding: 4px 2px; font-size: 20px; color: var(--mid-gray); border-radius: 6px; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; }
#products.byYou .dragHandle { display: inline-block; }
#products .dragHandle:hover, #products .dragHandle:focus-visible { color: var(--ink); }
#products > li.isDragging { background: var(--paper); border-radius: 12px; box-shadow: var(--card-shadow); cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* The profile's names (goal 4369, Ian: "make the first and last name sneaky edits, so we don't need an edit button or edit page anymore"): each
   box reads as the row's text (no border, no fill) until pointed at (a line) or typed in (a line, the paper behind it); green for a moment once
   the account has it, red when refused (js/www.js saveName), as the village's villager cards. A row is a .field (so a refusal goes under it):
   no field gap inside the list. */
#profileFields > li.field { margin-bottom: 0; }
#profileFields .sneaky, .commentName .sneaky { flex: 1 1 10em; width: auto; min-width: 0; height: auto; padding: 2px 6px; margin-left: -7px; font: inherit; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 6px; box-shadow: none; transition: background-color 0.4s ease, border-color 0.4s ease; }
#profileFields .sneaky::placeholder, .commentName .sneaky::placeholder { color: var(--mid-gray); font-style: italic; }
#profileFields .sneaky:hover, .commentName .sneaky:hover { border-color: var(--rule); }
#profileFields .sneaky:focus, .commentName .sneaky:focus { border-color: var(--mid-gray); background: var(--paper); }
#profileFields .sneaky.saved, .commentName .sneaky.saved { background-color: #e6f4ea; border-color: #1f8a3b; }
#profileFields .sneaky.refused, .commentName .sneaky.refused { background-color: #fdecea; border-color: var(--ember); }

/* Profile > Comments (goal 4369, as novemberpapa.org's /comments, its goal 4366): each comment its own tile; the product's host at the left of its
   first row, the date and state at the right of it; then the comment (newlines kept, a long word wraps at 390px); Shown as (a sneaky box while it
   waits); its buttons at the right, and a question's buttons in their place. Over them, the products' search box and one line of controls, the
   Show pill at the left and the Product pill (a box narrowing its drop-down) at the right, as the products' lists (links', todo's). */
.field.searchBar { margin-bottom: 16px; }
.searchBar .input { background: var(--paper); border-color: var(--hairline); }
.listControls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-bottom: 12px; }
.listControls .tabs { margin-bottom: 0; }
.controlPill { display: inline-flex; align-items: center; min-height: 36px; padding: 3px 12px 3px 0; background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; }
.controlPill .pillLabel { align-self: stretch; margin: 5px 10px 5px 0; padding: 0 10px 0 14px; line-height: 20px; border-right: 1px solid var(--rule); font-size: 11px; font-weight: 500; }
.sortPill { padding: 0; }
.sortPill .pillLabel { margin-top: 8px; margin-bottom: 8px; }
.sortPill .tabs { min-width: 0; }
.sortPill .tabs.pills ul { padding-left: 0; border-color: transparent; }
.productPill { margin-left: auto; gap: 6px; flex-wrap: wrap; }
.productPill .pillLabel { margin-right: 4px; }
.productPill .input { width: 7rem; height: 30px; padding-top: 0; padding-bottom: 0; background: var(--paper); border-color: var(--rule); }
.productPill .select select { height: 30px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 768px) { .productPill { flex: 1 1 100%; margin-left: 0; } }
/* /comments (goal 4407, Ian 2026-10-27: "Move the “waiting” and “private” down to the next line to make more room"): the Show tabs sit two by two,
   All | Public over Waiting | Private, so the Product pill fits beside the Show pill on one line. */
.sortPill #commentShows { display: inline-grid; grid-template-columns: repeat(2, auto); }
#commentCount { margin-bottom: 12px; }
.commentCards > .commentCard + .commentCard { margin-top: 12px; }
.commentCard.is-hidden { display: none; }
.commentHead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.commentHost { font-weight: 600; overflow-wrap: anywhere; }
.commentMeta { margin-left: auto; text-align: right; }
.commentText { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.commentName { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; }
.commentName > label { flex: 0 0 auto; }
.commentCard > .buttons { justify-content: flex-end; margin: 12px 0 0; }
.commentCard > .buttons .button { margin-bottom: 0; }
.commentConfirm .askText { margin-right: auto; }
.commentCard .refusal { flex: 1 0 100%; text-align: right; }
#noMatch { margin-top: 0; }