/* Version: 1.06 2026-10-14 (.ss-name.quiet button: the name line under results is #555 .95rem, the drawing's rule; the line under an empty sentence stays maroon. imp-takase takase-s1028,
   HANDOFF_2026-10-14_str-takase_to_imp-takase_site_search_b5b_library_box_rulings)
   Version: 1.05 2026-10-14 (.ss-name sits 1.2rem under the results it follows; .search-message .ss-name centers the line inside the empty-state box with the sentences around it; .ss-names, .ss-namecard, .ss-name: the Names card on the All view and the name line on every other search page,
   spec § B4, the rules of the drawing (site_search_results_v5, .ss-name / .ss-namecard / .nc-t / .nc-s). imp-takase takase-s1027,
   HANDOFF_2026-10-14_str-takase_to_imp-takase_site_search_b4_names_card_and_line)
   Version: 1.04 2026-10-14 (.ss-box-library: the library and Philology box (_library_search_box.html), left-aligned like the /site-search form and
   the library pages' own text, where the scroll and design boxes are centered; same size, scope-line style and button as every site-search box.
   imp-takase takase-s1027, HANDOFF_2026-10-14_str-takase_to_imp-takase_site_search_b5_library_box)
   Version: 1.03 2026-10-14 (every site-search box and button 21px high, about 19rem wide: the scroll and design pages' forms (.name-form inside
   .ss-box) take the /site-search form's size; the secondary button, never the Buy red. .ss-box is the box at every width, always on the page,
   and .ss-box .ss-scope is the one scope-line style on both pages (#555, .95rem, 1.4rem below). The two-column grid that kept the line under the
   input is gone: the box is the form's own width, so the line starts at the input's left edge without it. imp-takase takase-s1026,
   HANDOFF_2026-10-14_str-takase_to_imp-takase_site_search_b6_header_and_box_sizes)
   Version: 1.02 2026-10-14 (.ss-box: at desktop widths the scope line starts at the search input's left edge. The input and
   button are centered as a group inside the form, so the group is re-laid as a two-column grid (column 1 is the input's
   200px, fixed, so the wide line never resizes it) and the line sits in column 1 of row 2. Below 769px the form stacks and the
   line already starts at the input. imp-takase takase-s1025, HANDOFF_2026-10-14_str-takase_to_imp-takase_scope_line_aligns_with_box)
   Version: 1.01 2026-10-14 (.ss-scope: the line under the scroll and design search boxes, "Searched: scrolls ·
   Search the whole site for ...", the drawing's rule (v5 state 3). imp-takase takase-s1025,
   HANDOFF_2026-10-14_str-takase_to_imp-takase_site_search_scope_line_and_b3)
   Version: 1.00 2026-10-13 (Initial: the whole-site results page, /site-search. The rules are the drawing's
   (docs/projects/terasu/mockups/site_search_results_v5_2026-10-13.html, .ss-* and .ph-*), minus what the
   drawing built only to look at (state labels, jump line, drawn notes) and the Names card (a later courier).
   The Search button is the site's secondary button (.btn-secondary, components.css); only its size is set
   here, never a colour - the Buy red is not used. imp-takase takase-s1023,
   HANDOFF_2026-10-13_str-takase_to_imp-takase_site_search_results_page) */
/* One size for every site-search box: the /site-search form (.ss-form) and the scroll and design pages' forms (.name-form inside .ss-box;
   those keep their class names, which the beacon and the tests key on). The home page's two boxes are plain .name-form and are not touched. */
.ss-form, .ss-box .name-form { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: .35rem; max-width: 19rem; height: 21px; }
.ss-form { margin: 1rem 0 1rem; }
.ss-box .name-form { margin: 0 0 .5rem; }
.ss-box .name-form:last-child { margin-bottom: 1rem; }  /* a box with no scope line under it */
.ss-form input, .ss-box .name-form input { flex: 1; min-width: 0; max-width: none; height: 21px; box-sizing: border-box; padding: 0 .5rem; margin: 0; border: 1px solid #b9a98a; border-radius: 3px; font: 400 .82rem Oxygen, sans-serif; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.ss-form button.btn-secondary, .ss-box .name-form button.btn-secondary { width: auto; height: 21px; box-sizing: border-box; padding: 0 .7rem; margin: 0; font: 600 .78rem Oxygen, sans-serif; letter-spacing: .02em; line-height: 1; border-bottom-width: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18); transform: none; }
.ss-scope { color: #555; font-size: .95rem; margin: 0 0 1.4rem; }
.ss-scope a { color: #1a1a1a; text-decoration: underline; text-decoration-color: #b9a98a; text-underline-offset: 3px; }
/* The box: the form and the scope line under it, both starting at the input's left edge. .ss-box .ss-scope outranks the design
   page's .hero p (color, 2rem gap, line-height), so the line looks the same on both pages. */
.ss-box { width: 19rem; max-width: 100%; margin: 1rem auto 0; text-align: left; }
.ss-box .ss-scope { color: #555; font-size: .95rem; line-height: 1.6; text-align: left; margin: 0 0 1.4rem; }
@media (min-width: 769px) {
  .ss-box .ss-scope { width: max-content; max-width: min(30rem, 50vw); }
}
.ss-box.ss-box-library { margin: 1rem 0 0; }
.ss-group { margin: 0 0 2.2rem; }
.ss-gh { font-weight: 400; font-size: 1.4rem; margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ss-n { color: #888; font-size: .95rem; }
.ss-all, .ph-item a { color: #1a1a1a; text-decoration: underline; text-decoration-color: #b9a98a; text-underline-offset: 3px; }
.ss-all { margin-left: auto; font-size: .95rem; font-weight: 400; font-family: var(--font-sans); }
.ss-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 1.6rem; }
.ss-tab { padding: .35rem .8rem; border: 1px solid #c9b994; border-radius: 999px; color: #1a1a1a; text-decoration: none; font-size: .95rem; background: #fffdf7; }
.ss-tab.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ss-tab.on .ss-n { color: #ccc; }
.ss-grid .scroll-product-card { text-decoration: none; }
.ss-grid .scroll-product-image img { width: 100%; height: auto; display: block; }
.ph-list { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.ph-item { padding: .7rem 0; border-bottom: 1px solid #e6dcc8; }
.ph-item a { font-size: 1.08rem; }
.ph-sub { font-size: .95rem; color: #444; margin-top: .15rem; }

/* The name lookup offered from a search (spec § B4). The card is a group of one on the All view; the line is everywhere else. */
.ss-name { margin: 1.2rem 0 .4rem; }  /* under a grid or a list of results */
.search-message .ss-name { margin: .2rem 0 .4rem; text-align: center; }  /* under the empty sentence, which the box centers */
.ss-name button { background: none; border: 0; padding: 0; font: inherit; font-size: 1.02rem; color: #8b0000; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ss-name.quiet button { color: #555; font-size: .95rem; }  /* under results: a second way out, not a rival to what was found */
.ss-namecard { margin: 0; }
.ss-namecard button { display: block; text-align: left; background: #fffdf7; border: 1px solid #c9b994; border-radius: 4px; padding: .9rem 1.1rem; cursor: pointer; font: inherit; max-width: 22rem; width: 100%; }
.nc-t { display: block; font-size: 1.15rem; color: #1a1a1a; }
.nc-s { display: block; font-size: .95rem; color: #8b0000; margin-top: .25rem; }