/* The Profile in the folio (the Profile, ProfileTabs and OtherProfile boards, group 8A, 2026-10-05). One's own page
   and anyone else's: the bar, SEEN BY on one's own, the head, what one traveller may do about another, three tabs,
   and under them the log (the world plate and the trips), the wall and the shelf. Its old dress went with the deck
   log's sheets on 1 Oct. */
.pf-page.active { min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); }
.pf-page .pf-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.pf-page .pf-back { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.pf-page .pf-title { margin: 0; font-family: var(--fo-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-page .pf-word { position: relative; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.pf-page .pf-word::after { content: ''; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
.pf-page .pf-edit { justify-self: end; }

/* the head */
.pf-page .pf-head { display: flex; flex-direction: column; gap: 14px; padding: 20px var(--fo-gutter); }
.pf-page .pf-who { display: flex; align-items: flex-start; gap: 16px; }
.pf-page .pf-avatar { flex-shrink: 0; width: 72px; height: 72px; box-sizing: border-box; padding: 0; overflow: hidden; border: 1px solid var(--fo-rule); background: #EFEEE9; display: flex; align-items: center; justify-content: center; font-family: var(--fo-serif); font-size: 24px; color: var(--fo-graphite); }
.pf-page .pf-avatar.is-open { cursor: zoom-in; }
.pf-page .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-page .pf-names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-page .pf-name { margin: 2px 0 0; font-family: var(--fo-serif); font-weight: 400; font-size: 16px; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }   /* 16, not 24 (owner, 2026-10-05) */
.pf-page .pf-where { margin: 0; font-size: 12px; line-height: 1.4; color: var(--fo-graphite); overflow-wrap: anywhere; }
.pf-page .pf-bio { margin: 4px 0 0; font-family: var(--fo-serif); font-style: italic; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }   /* with the name, beside the portrait */
.pf-page .pf-bio.is-quiet { color: var(--fo-graphite); }
.pf-page .pf-account { margin: 10px var(--fo-gutter) 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5; color: var(--fo-graphite); }

/* one traveller about another */
.pf-page .pf-rel { display: flex; align-items: center; gap: 12px; }
.pf-page .pf-rel__line { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.pf-page .pf-btn { position: relative; flex-shrink: 0; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--fo-ink); background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.pf-page .pf-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.pf-page .pf-btn.is-ink { background: var(--fo-ink); color: #FDFCFA; }
.pf-page .pf-btn.is-asked { border-style: dashed; border-color: rgba(26,22,20,0.4); color: var(--fo-graphite); font-weight: 400; cursor: default; }
.pf-page .pf-rel.is-asked-you { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px; background: #EFEEE9; }
.pf-page .pf-rel__say { margin: 0; font-size: 14px; }
.pf-page .pf-rel__acts { display: flex; gap: 8px; margin-top: 6px; }
.pf-page .pf-rel.is-friend { gap: 8px; }
.pf-page .pf-tag { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; background: var(--fo-rule); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-page .pf-rel__since { font-size: 12px; color: var(--fo-graphite); }
.pf-page .pf-rel__end { margin-left: auto; font-size: 12px; color: var(--fo-graphite); }

/* the tabs */
.pf-page .pf-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 var(--fo-gutter); border-bottom: 1px dashed var(--fo-hair); }
.pf-page .pf-tab { height: 44px; padding: 0; border: none; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--fo-graphite); cursor: pointer; }
.pf-page .pf-tab.is-on { border-bottom-color: var(--fo-ink); color: var(--fo-ink); }

/* the log: the plate, the trips */
.pf-page .pf-plate { margin: 18px 0 0; background: #EFEEE9; }   /* to both edges (owner, 2026-10-05: 全出血) */
.pf-page .pf-plate svg { display: block; width: 100%; height: auto; }
.pf-page .pf-plate path { fill: #FDFCFA; stroke: #D9D7D0; stroke-width: 0.4; }
.pf-page .pf-plate path.is-visited { fill: var(--fo-ink); stroke: #FDFCFA; stroke-width: 0.6; }   /* its colour is pfColourMap's; the paper is the border */
.pf-page .pf-plate path.is-speck { stroke-width: 6; stroke-linejoin: round; }
.pf-page .pf-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-page .pf-trips { margin: 14px var(--fo-gutter) 0; border-top: 1px dashed var(--fo-hair); }
.pf-page .pf-trip { display: flex; align-items: center; gap: 12px; border-bottom: 1px dashed var(--fo-hair); }
.pf-page .pf-trip-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border: none; background: none; font: inherit; color: inherit; text-align: left; }
.pf-page button.pf-trip-open { cursor: pointer; }
.pf-page .pf-cover { width: 56px; height: 56px; overflow: hidden; background: #E3E1DA; }
.pf-page .pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-page .pf-trip-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-page .pf-trip-name { font-family: var(--fo-serif); font-size: 16px; letter-spacing: -0.01em; line-height: 1.1; }
.pf-page .pf-trip-meta { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
.pf-page .pf-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pf-page .pf-mark { height: 18px; padding: 0 6px; display: inline-flex; align-items: center; box-sizing: border-box; background: var(--fo-rule); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pf-page .pf-mark.is-now { background: none; border: 1px solid var(--fo-red); color: var(--fo-red); }
.pf-page .pf-chev { font-size: 16px; color: var(--fo-pale); }
.pf-page .pf-vis { position: relative; flex-shrink: 0; height: 26px; padding: 0 8px; border: 1px solid var(--fo-rule); background: transparent; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); white-space: nowrap; cursor: pointer; }
.pf-page .pf-vis::after { content: ''; position: absolute; left: -4px; right: -4px; top: -9px; bottom: -9px; }
.pf-page .pf-vis.is-us { border-color: var(--fo-ink); }
.pf-page .pf-note { margin: 12px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }

/* the wall */
.pf-page .pf-wallvis { width: calc(100% - 2 * var(--fo-gutter)); margin: 14px var(--fo-gutter) 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: inherit; color: var(--fo-ink); text-align: left; cursor: pointer; }   /* Card 1: .fo-card gives the dashes, the ticks and the padding */
.pf-page .pf-wallvis__text { display: flex; flex-direction: column; gap: 2px; }
.pf-page .pf-wallvis__name { font-size: 14px; }
.pf-page .pf-wallvis__sub { font-size: 12px; color: var(--fo-graphite); }
.pf-page .pf-wallvis__value { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pf-page .pf-wallhead { display: flex; justify-content: space-between; align-items: center; margin: 14px var(--fo-gutter) 10px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pf-page .pf-wallhead .pf-word { font-family: var(--fo-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.pf-page .pf-wallhead .pf-word[aria-pressed="true"] { color: var(--fo-ink); }
.pf-page .wall-strip + .wall-strip { margin-top: 2px; }
.pf-page .wall-strip-head { display: none; }
.pf-page .is-named .wall-strip-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px var(--fo-gutter) 6px; }
.pf-page .wall-strip-name { font-family: var(--fo-serif); font-size: 14px; }
.pf-page .wall-strip-meta { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pf-page .wall-reel { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.pf-page .wall-reel::-webkit-scrollbar { display: none; }
.pf-page .wall-reel.is-drifting { scroll-snap-type: none; }
.pf-page .wall-frame { position: relative; flex-shrink: 0; height: 96px; aspect-ratio: var(--ar, 1.5); padding: 0; border: none; background: #E3E1DA; overflow: hidden; scroll-snap-align: start; cursor: pointer; }
.pf-page .wall-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.pf-page .wall-frame img.is-in { opacity: 1; }
.pf-page .wall-vmark { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(26,22,20,0.6); fill: #FDFCFA; }
.pf-page .wall-vbare { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; fill: var(--fo-graphite); }
.pf-page .pf-shut { margin: 18px var(--fo-gutter) 0; padding: 26px 20px; border: 1px dashed rgba(26,22,20,0.28); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pf-page .pf-shut__lock { width: 12px; height: 9px; margin-top: 5px; box-sizing: border-box; border: 1.3px solid var(--fo-ink); position: relative; }
.pf-page .pf-shut__lock::before { content: ''; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 5px; box-sizing: border-box; border: 1.3px solid var(--fo-ink); border-bottom: none; border-radius: 4px 4px 0 0; }
.pf-page .pf-shut__say { font-family: var(--fo-serif); font-style: italic; font-size: 16px; }
.pf-page .pf-shut__line { font-size: 12px; color: var(--fo-graphite); }
.pf-page .pf-shut .pf-btn { margin-top: 6px; }

/* the shelf */
.pf-page .shelf-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin: 18px var(--fo-gutter) 0; }
.pf-page .shelf-book { display: flex; flex-direction: column; gap: 6px; }
.pf-page .shelf-open { padding: 0; border: 1px solid var(--fo-rule); background: #F2EEE6; cursor: pointer; }
.pf-page .shelf-cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pf-page .shelf-vis, .pf-page .shelf-stale { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-page .shelf-stale { color: var(--fo-red); }

/* empty, waiting */
.pf-page .pf-empty { margin: 22px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; }
.pf-page .pf-empty > span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.pf-page .pf-empty .pf-word { font-size: 12px; }
.pf-page .pf-waiting { display: flex; flex-direction: column; gap: 10px; padding: 20px var(--fo-gutter); }
.pf-page .pf-waiting i { display: block; background: #EFEEE9; }
.pf-page .pf-waiting .is-avatar { width: 72px; height: 72px; }
.pf-page .pf-waiting .is-line { height: 14px; width: 60%; }
.pf-page .pf-waiting .is-short { width: 35%; }

.pf-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.pf-page .pf-back:focus-visible, .pf-page .pf-tab:focus-visible, .pf-page .pf-trip-open:focus-visible { outline-offset: -2px; }

/* The portrait alone, on the night plate (it is put on <body>). */
.pf-portrait { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; background: #1A1614; }
.pf-portrait.is-open { display: flex; }
.pf-portrait img { max-width: 92%; max-height: 80%; object-fit: contain; }
.pf-portrait-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: var(--fo-gutter, 24px); min-height: 44px; padding: 0; border: none; background: none; font-family: var(--fo-sans, sans-serif); font-size: 14px; color: #FDFCFA; cursor: pointer; }

/* Edit profile (the Edit profile board, group 8A, 2026-10-05): Cancel · EDIT PROFILE · Save, the portrait and its two
   words, the ruled fields, a line about you counted to 120. */
.pe-page.active { min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.pe-page .pe-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.pe-page .pe-back, .pe-page .pe-save { min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.pe-page .pe-back { justify-self: start; }
.pe-page .pe-save { justify-self: end; color: var(--fo-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pe-page .pe-title { margin: 0; font-family: var(--fo-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pe-page .pe-portrait { display: flex; align-items: center; gap: 16px; padding: 22px var(--fo-gutter) 0; }
.pe-page .pe-avatar { flex-shrink: 0; width: 96px; height: 96px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--fo-rule); background: #EFEEE9; display: flex; align-items: center; justify-content: center; font-family: var(--fo-serif); font-size: 24px; color: var(--fo-graphite); }
.pe-page .pe-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-page .pe-portrait__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pe-page .pe-change { position: relative; height: 36px; padding: 0 12px; border: 1px solid var(--fo-ink); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.pe-page .pe-change::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.pe-page .pe-remove { min-height: 32px; padding: 0; border: none; background: none; font: inherit; font-size: 12px; color: var(--fo-graphite); cursor: pointer; }
.pe-page .pe-fields { padding: 10px var(--fo-gutter) 0; }
.pe-page .pe-field { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 10px; border-bottom: 1px dashed var(--fo-hair); cursor: text; }
.pe-page .pe-field:focus-within { box-shadow: inset 0 -1px 0 var(--fo-ink); }
.pe-page .pe-field[data-fault] { box-shadow: inset 0 -1px 0 var(--fo-red); }
.pe-page .pe-field[data-fault] .pe-label { color: var(--fo-red); }
.pe-page .pe-label { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.pe-page .pe-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pe-page .pe-count { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fo-pale); }
.pe-page .pe-count.is-over { color: var(--fo-red); }
.pe-page .pe-input { width: 100%; min-width: 0; padding: 0; border: none; border-radius: 0; background: transparent; outline: none; font-family: var(--fo-sans); font-size: 16px; color: var(--fo-ink); -webkit-appearance: none; appearance: none; }
.pe-page .pe-input::placeholder { color: var(--fo-pale); opacity: 1; }
.pe-page .pe-handle, .pe-page .pe-place { display: flex; align-items: baseline; gap: 1px; }
.pe-page .pe-place { gap: 12px; }
.pe-page .pe-at { font-size: 16px; color: var(--fo-pale); }
.pe-page .pe-handle:focus-within .pe-at { color: var(--fo-ink); }
.pe-page .pe-pinned { flex-shrink: 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pe-page .pe-help { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
.pe-page .pe-bio { font-family: var(--fo-serif); font-style: italic; line-height: 1.4; resize: none; }
.pe-page .pe-note { margin: 18px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.pe-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.pe-page .pe-input:focus-visible { outline: none; }
.pe-page .pe-back:focus-visible, .pe-page .pe-save:focus-visible { outline-offset: -4px; }

/* Move and scale the portrait, on the night plate (the AvatarCrop board). Put on <body>. */
.pe-crop { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; background: #1A1614; color: #FDFCFA; font-family: var(--fo-sans); overflow: hidden; touch-action: none; }
.pe-crop__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px solid rgba(253,252,250,0.12); }
.pe-crop__word { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: #FDFCFA; cursor: pointer; }
.pe-crop__word.is-use { justify-self: end; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pe-crop__title { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.pe-crop__stage { position: relative; height: calc(var(--crop) + 92px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pe-crop__frame { position: relative; width: var(--crop); height: var(--crop); cursor: grab; }
.pe-crop.is-moving .pe-crop__frame { cursor: grabbing; }
.pe-crop__img { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.pe-crop__frame::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 600px rgba(26,22,20,0.62); outline: 1px solid rgba(253,252,250,0.9); pointer-events: none; }
.pe-crop__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; background-image: linear-gradient(rgba(253,252,250,0.25), rgba(253,252,250,0.25)), linear-gradient(rgba(253,252,250,0.25), rgba(253,252,250,0.25)), linear-gradient(90deg, rgba(253,252,250,0.25), rgba(253,252,250,0.25)), linear-gradient(90deg, rgba(253,252,250,0.25), rgba(253,252,250,0.25)); background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; background-position: 0 33.3%, 0 66.6%, 33.3% 0, 66.6% 0; background-repeat: no-repeat; }
.pe-crop.is-moving .pe-crop__grid { opacity: 1; }
.pe-crop__scale { display: flex; align-items: center; gap: 14px; margin: 0 auto; width: var(--crop); }
.pe-crop__step { width: 44px; height: 44px; flex-shrink: 0; border: none; background: transparent; font-size: 16px; color: #FDFCFA; cursor: pointer; }
.pe-crop__range { flex: 1; min-width: 0; accent-color: #FDFCFA; }
.pe-crop__sizes { display: flex; align-items: flex-end; gap: 18px; margin: 18px var(--fo-gutter) 0; padding-top: 18px; border-top: 1px solid rgba(253,252,250,0.12); }
.pe-crop__size { display: flex; flex-direction: column; gap: 6px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,252,250,0.55); }
.pe-crop__prev { position: relative; overflow: hidden; display: block; background: #2A2522; }
.pe-crop__prev.is-56 { width: 56px; height: 56px; }
.pe-crop__prev.is-22 { width: 22px; height: 22px; }
.pe-crop__prev img { position: absolute; max-width: none; }
.pe-crop__middle { margin-left: auto; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 12px; color: #FDFCFA; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pe-crop__say { margin: 14px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: rgba(253,252,250,0.62); }
.pe-crop :focus-visible { outline: 2px solid #FDFCFA; outline-offset: 2px; }
.pe-crop .pe-crop__word:focus-visible { outline-offset: -4px; }

/* My friends (the Friends board, group 8A, 2026-10-05): Back · MY FRIENDS · Add, the search, Friends / Requests with
   the count, a row per person, and the Add sheet from the foot. */
.fr-page.active { min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.fr-page .fr-bar, .fr-modal .fr-sheet-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.fr-page .fr-bar { position: sticky; top: 0; z-index: 3; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.fr-page .fr-back, .fr-modal .fr-back { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.fr-page .fr-add { justify-self: end; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.fr-page .fr-title, .fr-modal .fr-title { margin: 0; font-family: var(--fo-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.fr-page .fr-tools { padding: 14px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 10px; }
.fr-page .fr-segs { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fr-page .fr-seg-pair { display: flex; gap: 4px; }
.fr-page .fr-seg { position: relative; height: 26px; padding: 0 10px; border: 1px solid var(--fo-rule); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.fr-page .fr-seg::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.fr-page .fr-seg.is-on { border-color: var(--fo-ink); background: var(--fo-ink); color: #FDFCFA; }
.fr-page .fr-count { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.fr-page .fr-body { padding: 4px var(--fo-gutter) 0; }
.fr-page .fr-row, .fr-modal .fr-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; box-sizing: border-box; border: none; border-bottom: 1px dashed var(--fo-hair); background: none; font: inherit; color: var(--fo-ink); text-align: left; }
.fr-page button.fr-row { cursor: pointer; }
.fr-page .fr-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fr-page .fr-face, .fr-modal .fr-face { flex-shrink: 0; width: 36px; height: 36px; overflow: hidden; background: #EFEEE9; display: flex; align-items: center; justify-content: center; font-family: var(--fo-serif); font-size: 16px; color: var(--fo-graphite); }
.fr-page .fr-face img, .fr-modal .fr-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-page .fr-who, .fr-modal .fr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-page .fr-name, .fr-modal .fr-name { font-family: var(--fo-serif); font-size: 16px; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }
.fr-page .fr-sub, .fr-modal .fr-sub { font-size: 12px; line-height: 1.35; color: var(--fo-graphite); }
.fr-page .fr-since { flex-shrink: 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.fr-page .fr-acts, .fr-modal .fr-acts { flex-shrink: 0; display: flex; gap: 6px; }
.fr-page .fr-btn, .fr-modal .fr-btn { position: relative; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--fo-ink); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.fr-page .fr-btn::after, .fr-modal .fr-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.fr-page .fr-btn.is-ink, .fr-modal .fr-btn.is-ink { background: var(--fo-ink); color: #FDFCFA; }
.fr-modal .fr-btn.is-asked { border-style: dashed; border-color: rgba(26,22,20,0.4); color: var(--fo-graphite); font-weight: 400; cursor: default; }
.fr-modal .fr-state { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.fr-page .fr-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.fr-page .fr-quiet, .fr-modal .fr-quiet { margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; }
.fr-page .fr-quiet span, .fr-modal .fr-quiet span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.fr-page .fr-word { padding: 0; border: none; background: none; font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fr-page :focus-visible, .fr-modal :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.fr-page .fr-back:focus-visible, .fr-page .fr-add:focus-visible, .fr-page .fr-row:focus-visible, .fr-modal .fr-back:focus-visible { outline-offset: -2px; }

/* the Add sheet */
.fr-modal { position: fixed; inset: 0; z-index: 800; display: none; background: rgba(26,22,20,0); transition: background .2s; color: var(--fo-ink); font-family: var(--fo-sans); }
.fr-modal[role="dialog"] { display: block; }
.fr-modal.is-open { background: rgba(26,22,20,0.42); }
.fr-modal .fr-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto; box-sizing: border-box; padding: 10px var(--fo-gutter) calc(env(safe-area-inset-bottom, 0px) + 34px); border-radius: 20px 20px 0 0; background: var(--fo-paper); transform: translateY(100%); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.fr-modal.is-open .fr-sheet { transform: none; }
.fr-modal .fr-sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 9999px; background: var(--fo-rule); }
.fr-modal .fr-sheet-bar { padding-bottom: 4px; border-bottom: 1px dashed var(--fo-hair); }
.fr-modal .fr-entry { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px 12px 10px; background: #FDFCFA; box-shadow: inset 0 -1.5px 0 var(--fo-ink); cursor: text; }
.fr-modal .fr-entry-label { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.fr-modal .fr-entry-value { width: 100%; padding: 0; border: none; background: transparent; outline: none; font-family: var(--fo-sans); font-size: 16px; color: var(--fo-ink); -webkit-appearance: none; appearance: none; }
.fr-modal .fr-entry-value::placeholder { color: var(--fo-pale); }
.fr-modal .fr-entry-value:focus-visible { outline: none; }
.fr-modal .fr-results { min-height: 8px; }
.fr-modal .fr-invite { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fo-ink); }
.fr-modal .fr-invite__say { font-size: 14px; }
.fr-modal .fr-invite__line { font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.fr-modal .fr-invite .fr-btn { margin-top: 6px; height: 36px; }
.fr-modal .fr-invite__link { font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.fr-modal .fr-link { display: block; margin-top: 4px; font-family: var(--fo-mono); font-size: 10px; color: var(--fo-ink); overflow-wrap: anywhere; user-select: all; }