/* ui-friends.css · 来处 / Pardine（dineloc）· 饭友的样式（W-FRIENDS；docs/b4/design/contract.md §0.1、§7.5）
   规矩照 styles.css：颜色只来自令牌（新的两个：--fr-new-ink、--fr-ask-line）、没有 backdrop-filter、收起的一律 hidden（不停在 opacity: 0）、
   进出都是过渡（长出来 / 收起走 DLUI.growIn / growOut，换一个月走 DLUI.swapBox：时长读 styles.css 的时间表）、布局只用逻辑属性、
   触区 44（.btn / .iconbtn 已在 styles.css 的清单里；这里只补自己的小控件）。
   二维码由 ui-friends.js 用 vendor/qrcode 的编码自己画成 SVG（深色格 var(--text)、底 var(--bg-elev)）。 */

/* ---- 段落 ---- */
.fr-p { margin: 0 0 var(--gap-para, .75rem); font-size: .875rem; line-height: var(--lh-body); color: var(--text); text-wrap: pretty; }
.fr-p--quiet { color: var(--text-dim); font-size: .8125rem; }
.fr-p--note { color: var(--text-dim); font-weight: 600; }
.fr-p--err { color: var(--danger); font-size: .8125rem; }
.fr-p--center { text-align: center; }
.fr-hint { margin: 0; padding: 0 var(--gutter) .5rem; font-size: .75rem; line-height: 1.45; color: var(--text-faint); }
.fr-link { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.fr-empty { color: var(--text-faint); font-size: .8125rem; }
.fr-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fr-row .fr-ico, .fr-row .ava { margin-inline-end: .625rem; }
.fr-row--act { color: var(--accent); }
.fr-row--act .ico { margin-inline-end: .5rem; }
.fr-blockrow .ava { margin-inline-end: .625rem; }
.fr-blockrow .row__label { flex: 1 1 auto; min-width: 0; }

/* ---- 打开饭友、邀请卡、关掉 ---- */
.fr-on, .fr-card { padding: .25rem var(--gutter) 1rem; }
.fr-on .btn--primary, .fr-card .fr-acts { margin-block-start: .5rem; }
.fr-card__who { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding-block: .5rem 1rem; }
.fr-card__title { margin: 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; text-align: center; text-wrap: balance; }
.fr-off { display: block; margin: 1.25rem auto .5rem; color: var(--text-dim); }
.fr-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-block: .75rem; }
.fr-acts .btn { display: inline-flex; align-items: center; gap: .375rem; }

/* ---- 邀请：二维码 ---- */
.fr-invite { padding: .5rem var(--gutter) 1rem; }
.fr-qr { margin: .5rem auto 1rem; display: flex; flex-direction: column; align-items: center; gap: .625rem; }
.fr-qr__svg { display: block; inline-size: min(13.5rem, 62vw); block-size: auto; aspect-ratio: 1; border-radius: var(--radius-sm); }
.fr-qr__bg { fill: var(--bg-elev); }
.fr-qr__dot { fill: var(--text); }
.fr-qr__cap { font-size: .875rem; color: var(--text); text-align: center; }
.fr-cancel { display: block; margin: .5rem auto 0; color: var(--text-dim); }

/* ---- 饭友页 ---- */
.frpage__hero { align-items: center; }
.frpage__hero .ava { flex: none; }
.frpage__more { margin-inline-start: auto; align-self: flex-start; }
.frpage__tally { margin-block: .25rem .75rem; }
.frseals { display: flex; flex-wrap: wrap; gap: .375rem; padding-block: .25rem .5rem; }
.frseal { position: relative; display: inline-flex; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
html[data-touch="on"] .frseal::after {
  content: "";
  position: absolute;
  inset-block: min(0px, calc(50% - 22px));
  inset-inline: min(0px, calc(50% - 22px));
}
.frmonth__nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin-block: .75rem .25rem; }
.frmonth__label { margin: 0; text-align: center; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; }
.frmonth__list .ticket { margin-block-end: .5rem; }

/* ---- 饭票小浮层、举报、和谁一起 ---- */
.fr-tmenu, .fr-report, .fr-pick, .fr-from { padding-block: .25rem .75rem; }
.fr-trow .row__label { display: inline-flex; align-items: center; gap: .375rem; flex: 1 1 auto; min-width: 0; }
.fr-want { flex: none; }
.fr-report { display: flex; flex-direction: column; gap: .5rem; }
.fr-report__why { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.fr-radio, .fr-check { gap: .625rem; }
.fr-radio input, .fr-check input, .fr-pick__cb { accent-color: var(--accent); inline-size: 1.125rem; block-size: 1.125rem; flex: none; margin: 0; }
/* 和谁一起的名单（fx-144b）：行高 52、圆印同饭友列表（28）、名字衬线；勾是墨色（印章红只给数据与落印，不当控件的选中色）；卡下面一行提示 */
.fr-pick__row { min-height: 3.25rem; }
.fr-pick__row .ava { margin-inline-end: .75rem; }
.fr-pick__row .row__label { flex: 1 1 auto; min-width: 0; font-family: var(--font-serif); font-size: 1.0625rem; }
.fr-pick .fr-pick__cb { accent-color: var(--text); }
.fr-pick__hint { padding: .5rem .25rem 0; }
.fr-pick__full { padding-block-start: .5rem; }
.fr-from .btn { margin-block-end: .5rem; }
.fr-from .btn.is-on { border-color: var(--accent); color: var(--accent); }

/* ---- 记录页票根里「和谁一起」那一行（entry-redesign §8.1：宿主的 .etk__row，样子全在 styles.css「记录页的饭票」） ----
   〔只给自己看〕开关与它的说明在选人那一层（名单下面）：开关一排，说明紧跟在下面，两句之间不留段距 */
.fr-pick__vis { display: flex; margin-block-start: .75rem; }
.fr-pick__hints .fr-pick__hint + .fr-pick__hint { padding-block-start: 0; }

/* ---- 饭票上的「和{names}一起」 ---- */
.ticket__with { margin: 0; padding: 0 0 .25rem; font-size: .75rem; line-height: 1.4; color: var(--text-faint); unicode-bidi: plaintext; }

/* ---- 同桌的虚线饭票（E27.32：墨色浅一档的虚线框；没有角标、红点） ---- */
.frask { margin-block: .5rem; }
.frask__who { display: flex; align-items: center; gap: .375rem; margin: 0 0 .25rem; font-size: .75rem; color: var(--text-dim); }
.frask__who .ava { flex: none; }
.frask__box { border: 1px dashed var(--fr-ask-line); border-radius: var(--radius-card); padding: .25rem; }
.frask__box .ticket { background: transparent; box-shadow: none; border-color: transparent; }
.frask__acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; padding: .25rem .375rem .375rem; }
.fr-tables { padding: .25rem var(--gutter) 1rem; }