/* village.cheatsheet.life (Create.Websites goal 3847, 2026-10-13; built as friends.cheatsheet.life, moved here 2026-10-15):
   page layout on the cheatsheet.life family look.
   The look itself (tokens, type, buttons by role, inputs, pill tabs, #EEE tiles, list rows) is ONE sheet,
   /css-lib/cheatsheet-life.css, shared with the hub and every product and linked after Bulma, before this file. Edit it in
   TEMPLATE/css-lib only, then cp -p it into every site that links it (testCheatsheetFamilyLook). This file places Village's
   pages; it restates no family rule. It was the generator's placeholder; hand-owned since 3847, so the generator leaves it.
   Goal 4047 (2026-10-19) added the Manage tabs (the hub's tab bar look, nothing of their own) and the waterfall rows.
   No inline styles (CSP). */

/* Main pages 880px from 1024px, as index, inventory and todo. */
@media (min-width: 1024px) { .section > .container:not(.narrow):not(.is-fluid) { max-width: 880px; } }   /* beats Bulma's :not() widths */

/* The home's title row: the logo beside the title, as the hub's (www.css .brand); 36px = the title's line height, so the gap
   under the title stays 12px like every page. */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.brand .logo { width: 36px; height: 36px; border-radius: 9px; }

/* Goal 4193 (Ian 2026-10-23: no panel saying what just happened; "if they're not [successful], then something on the page should be highlighted as to
   what's wrong"). A refusal (js/site.js refuse): what the member used is outlined red, and one red sentence sits beside it: on its own line under a
   list's row or a villager's field, at the foot of a form's field, or after its sentence, its buttons, its tile or the title. #message holds only why a
   page could not be read, in the same red, where the page's body would be. The look (the red line, its row and field places, the red outline) is the
   family sheet's since goal 4201 (css-lib/cheatsheet-life.css); here only Village's own: a villager's field line under its box, a title box gone red. */
.villagerFields .fieldRow > .refusal { padding-left: calc(6.5em + 12px); }
#hoodTitle .titleName.refused, #routeTitle .titleName.refused { background-color: #fdecea; border-color: var(--ember); }

/* Sections of the home: each heading 32px under the block above it, 12px over its own tile. The first block under the title
   (the barker, or the first heading) keeps the title's own gap. */
.pageBody > h2.subtitle { margin: 32px 0 12px; }
.pageBody > h2.subtitle:first-child { margin-top: 0; }

/* A person's row: the name, then grey facts (friends in common, since when); actions at the row's end. */
.personName { font-weight: 500; }

/* A scenic route's stop (goal 4179: a waterfall's step, goal 4047, carrying a cascade stage's offer, goal 4094): its place in the order before the name,
   then its offer, the price when it is for sale and its time, then the buttons at the row's end. On a phone the selects are taller than the small buttons
   (the family's 16px no-zoom font), so they take a line of their own under them rather than sitting beside them off-centre (layout_row_misaligned). */
.stepPlace { color: var(--mid-gray); font-weight: 500; min-width: 1.25em; }
.stageOffer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stagePrice { display: inline-flex; align-items: center; gap: 4px; }
.stagePrice.is-hidden { display: none !important; }
.stagePrice .input { width: 7.5em; }
.priceSign { color: var(--mid-gray); }
@media (max-width: 768px) { #stepList .stageOffer { order: 1; flex-basis: 100%; } }

/* The barker (Ian 2026-10-13): the days left before cheatsheet.life trusts the member, first on the page. */
.trustBarker strong { font-weight: 600; }

/* Leave a comment: every page's last line, a small underlined link 48px under the page, as index's and the hub's; no line over it. */
.pageFooter { margin-top: 48px; font-size: 14px; }
.pageFooter a { text-decoration: underline; text-underline-offset: 2px; }

/* In my village's Sort and Filter (goal 4179, Ian 2026-10-23: "wrap them around a filter tile, which also has a textbox ... That's called "filter" like on
   other products. Also have a sort panel as well, similar to other products"): todo's and inventory's two pills (todo's css/todo.css .controlPill rules),
   one shape, the pill-tab track (white, a hairline, 18px radius, 36px tall), each labelled inside at its left edge by a caption set off by a thin divider.
   Sort holds the sort tabs; Filter, right-aligned, the name box with goal 4093's two Needs boxes under it. One line from 1024px, Sort never shrinking, the
   two bottoms level (todo goal 4178), so Sort is the last control over the list; narrower, Filter drops under Sort; a phone gives Filter the whole width,
   first. */
.listControls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-bottom: 12px; }
.listControls .tabs { margin-bottom: 0; }
@media (min-width: 1024px) { .listControls { flex-wrap: nowrap; } .listControls .sortPill { flex-shrink: 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; }   /* no pill padding on Sort: the same 8px off each edge */
.sortPill .tabs { min-width: 0; }   /* a narrow Sort wraps its tabs right of the divider, never under the caption */
.sortPill .tabs.pills ul { padding-left: 0; border-color: transparent; }   /* the pill is the track and its edge; the ul keeps its 3px inset round the selected tab */
.filterPill { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.filterPill .pillLabel { grid-row: span 2; }
.filterPill .input, .filterPill .pillTicks { grid-column: 2; }
.filterPill .input { width: 10rem; min-width: 100%; height: 30px; padding-top: 0; padding-bottom: 0; background: var(--paper); border-color: var(--rule); }
.filterPill .pillTicks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 0 5px; }
.filterPill .checkbox { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
@media (max-width: 768px) { .filterPill { flex: 1 1 100%; order: -1; } }
#vouchNote { margin-bottom: 12px; }   /* the vouching line sits over the two pills, the title's 12px gap under it */
/* A neighborhood's title is its name in a box (a scenic route's too: goal 4094's waterfall, goal 4179), as index's /need (#needTitle): it reads as the title until it is pointed at, and flashes green
   when the account has a new name (js/site.js flashSaved puts .saved on it for a second). Its text lines up with the page's left edge (-7px =
   the box's padding and border), so the box shows out to the left only when pointed at. */
#hoodTitle, #routeTitle { display: flex; min-width: 0; }
#hoodTitle .titleName, #routeTitle .titleName { flex: 1 1 auto; min-width: 0; width: 0; height: auto; padding: 0 6px; margin-left: -7px; font: inherit; letter-spacing: 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; }
#hoodTitle .titleName:hover, #routeTitle .titleName:hover { border-color: var(--rule); }
#hoodTitle .titleName:focus, #routeTitle .titleName:focus { border-color: var(--mid-gray); background: var(--paper); }
#hoodTitle .titleName.saved, #routeTitle .titleName.saved { background-color: #e6f4ea; border-color: #1f8a3b; }
/* Delete is white with red letters at the right of its row, as index's and inventory's .deleteButton (Ian 2026-10-20: "set its text to red and background
   to white"); the black Yes, delete that does the deleting stays black. */
.button.deleteButton:not([disabled]), .button.deleteButton:not([disabled]):hover, .button.deleteButton:not([disabled]):focus { color: var(--ember); }
.button.deleteButton { margin-left: auto; }
/* Goal 4097 (Ian 2026-10-20: "per friend, there's a check box To indicate whether or not the friend can see the name of the neighborhood"). The box sits in
   the villager's row (a neighborhood's, a friend's, a villager's page), grey and smaller than the name. A friend's neighborhood's "These are the same" pick
   sits beside its name; on a phone it takes a line of its own (the family's 16px select is taller than the small button: layout_row_misaligned). */
.canSee { color: var(--mid-gray); font-size: 14px; }
.sameField { display: inline-flex; align-items: center; }
@media (max-width: 768px) { #theirGroupList .sameField { order: 1; flex-basis: 100%; } }
/* Goal 4106 (Ian 2026-10-21: "Have them be those sneaky text boxes that don't look like text boxes until you click on them. Compact them, putting the label and
   text box on the same rows."). A villager's card: one row per field, the label at the left, then the box, borderless and transparent as the titles' boxes until
   pointed at (a line) or in use (a line, the paper behind it); green for a second when the account has the value, red when it was refused or a first name was
   blanked (js/site.js flashSaved / flashRefused). A friend's own value sits under the box, grey, only where it differs. On a phone the box keeps its row. */
.villagerFields .fieldRow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 36px; }
.villagerFields .fieldLabel { flex: 0 0 6.5em; color: var(--mid-gray); font-weight: 500; }
.villagerFields .sneaky, .villagerFields .fieldValue { flex: 1 1 10em; min-width: 0; }
.villagerFields .sneaky { width: auto; height: auto; padding: 2px 6px; margin-left: -7px; 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; }
.villagerFields .sneaky::placeholder { color: var(--rule); }
.villagerFields .sneaky:hover { border-color: var(--rule); }
.villagerFields .sneaky:focus { border-color: var(--mid-gray); background: var(--paper); }
.villagerFields .sneaky.saved { background-color: #e6f4ea; border-color: #1f8a3b; }
.villagerFields .sneaky.refused { background-color: #fdecea; border-color: var(--ember); }
.villagerFields .fieldValue { padding: 3px 0; }
.villagerFields .theirs { flex: 1 0 100%; padding-left: calc(6.5em + 12px); color: var(--mid-gray); font-size: 14px; }
.villagerFields .theirs.is-hidden { display: none; }
.villagerFields > .where { margin-top: 8px; }
/* The neighborhoods they are not in: a filter box over a small list, each row with Add (goal 4106: "Have a little filter text box with a small list"). */
.hoodPicker { margin-top: 12px; }
.hoodPicker .hoodFilter { max-width: 20em; margin-bottom: 8px; background: var(--paper); border-color: var(--rule); }   /* a box on the page, as a tile's (family .formCard .input) */
.hoodPicker .hoodFilter:focus { border-color: var(--mid-gray); }
.hoodChoices { max-height: 15em; overflow-y: auto; }


/* Goal 4113 (Ian 2026-10-21: "Instead of up and down buttons, use the "::"-like symbol for how we reorder things in all the other places"). A waterfall's
   step is dragged by its grip, index's and inventory's (two vertical dots, grey); the help line names it bold and black; a dragged row is half-faded
   until it drops. */
.grip { cursor: grab; touch-action: none; user-select: none; color: var(--mid-gray); padding: 0 0.35rem; letter-spacing: -0.3em; }
li.dragging { opacity: 0.5; }
.dragDots { font-weight: 700; color: #000; }
#dragHelp { margin-top: 8px; }
#stopHelp { margin-top: 8px; }
/* A route's Add a stop is one sentence (goal 4113's Add a stage: "Make this item available for <borrow, etc> for <number> <hour, day, week, etc> to <person,
   group, etc>") on four lines (goal 4191): its words and boxes wrap, each box as wide as it needs; the last line's filter box is a quarter of the 20em the
   picker's had, beside the drop-down it narrows. */
.stageSentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stageFor, .sentencePart { display: inline-flex; align-items: center; gap: 8px; }   /* a word and its box wrap together ("to" stays with its pick) */
.stageFor.is-hidden { display: none !important; }
.stageSentence .stageCount { width: 4.5em; }
.stageSentence .stepFilter { width: 5em; }