/* Adaptations of look B (b.css) for the working app: real inputs, radio chips, sheets as
   <dialog>, page widths, menus, settings tables. Same tokens, same sizes; nothing redesigned. */

/* ---------- page frame ---------- */
.page{max-width:560px;margin:0 auto;background:#fff;min-height:100vh}
@media (min-width:700px){
  body{background:var(--well)}
  .page{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  header.ab.dk-only{display:flex;background:#fff;position:sticky;top:0;z-index:5}
  .page .top .phone-only{display:none}
}
/* the wide shell (round 6, spec §13): from 1100 px every page is the column the four wide pages had, up to
   1180 px, under the top bar; each page lays itself out inside it. Below 1100 px nothing changes. */
@media (min-width:1100px){
  .page{max-width:1180px}
  /* both columns stretch to the taller one, so the line on the left one's right runs the card's whole
     height, also where 附件 makes the right column the taller (fix 5 C3) */
  .page.wide .rec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .page.wide .rec-grid > .col-a{border-right:1px solid var(--line)}
  .page.wide .rec-grid .sec:last-child{border-bottom:0}
}
/* 今日跟进 at computer width (round 5b, spec §11). today.html renders the four buckets twice from the same
   context: the phone list (.bk) and one table (.tt) with a group row per bucket. Below 1100 px the table is
   not shown, so the phone page is as it was. From 1100 px the page is a grid: in the left column the header,
   the season strip, the filters and the table (four rows; the fifth takes what is left, so a short list
   never stretches them), 记一笔 in a sticky 360 px column on the right, a line between the two. Fixed
   column widths: every row of the one table keeps the same columns. In its column 记一笔 is 344 px wide
   (8 px from either side), its search box shows the whole placeholder (the clear button takes no room
   while the box is empty), and its rule line breaks only after its comma (fix 5b X1). */
.tt{display:none}
@media (min-width:1100px){
  .page.inbox{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:repeat(4,auto) 1fr}
  .page.inbox::before{content:"";grid-column:2;grid-row:1 / -1;border-left:1px solid var(--line)}
  .page.inbox > *{grid-column:1;min-width:0}
  .page.inbox > .qa{grid-column:2;grid-row:1 / -1;align-self:start;position:sticky;top:63px;margin:14px 8px 16px}
  .page.inbox > .qa input[type=search]:placeholder-shown::-webkit-search-cancel-button{display:none}
  .page.inbox > .qa .rule{word-break:keep-all}
  .page.inbox .bk{display:none}
  .page.inbox .tt{display:table}
  .tt{width:100%;table-layout:fixed;border-collapse:collapse}
  .tt col.c-fam{width:184px}
  .tt col.c-stage{width:120px}
  .tt col.c-next{width:124px}
  .tt col.c-owner{width:96px}
  .tt thead th{height:32px;padding:0 10px;font-size:12px;font-weight:500;color:var(--mute);text-align:left;white-space:nowrap}
  .tt .tg th{padding:0;text-align:left}
  .tt td{padding:0;border-bottom:1px solid var(--line-2);vertical-align:middle}
  .tt tbody > tr:last-child > td{border-bottom:0}
  .tt td.bk-empty{padding:10px 16px 12px}
  .tt td.bk-more{padding:8px 16px 10px}
  .tt td > a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:58px;
    padding:8px 10px;font-size:13px;color:var(--ink-2)}
  .tt thead th:first-child,.tt td:first-child > a{padding-left:16px}
  .tt thead th:last-child,.tt td:last-child > a{padding-right:16px}
  .tt td > a > *{max-width:100%}
  .tt .nm,.tt .tt-m,.tt .tt-l,.tt .tt-o{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tt .nm{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
  .tt .tt-m{font-size:12px;line-height:17px;color:var(--mute)}
  .tt .tt-l{font-size:12.5px;line-height:18px;color:var(--mute)}
  .tt .tt-l b{color:var(--ink-2);font-weight:500}
  .tt .tt-d{line-height:18px;white-space:nowrap}
  .tt tr[data-family]:hover td,.tt tr[data-family]:focus-within td{background:var(--sunk)}
}
.ab .nav a{cursor:pointer}
.ab .nav a.on{background:var(--chip);color:var(--ink);font-weight:600}
.ab-r form{margin:0}
.ab .search{padding:0 10px}
.ab .search input{border:0;outline:0;font:inherit;font-size:13px;width:100%;background:transparent;color:var(--ink)}
.linkbtn{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--mute);cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* ---------- header extras ---------- */
.top .sub select{border:0;background:transparent;font:inherit;font-size:12px;color:var(--ink-2);padding:0;margin:0;cursor:pointer;
  field-sizing:content;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.top .sub .fixed{color:var(--ink-2)}
.icon-btn{background:#fff;cursor:pointer;padding:0}
.icon-btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.menu{position:relative}
.menu > summary{list-style:none}
.menu > summary::-webkit-details-marker{display:none}
.menu-p{position:absolute;right:0;top:38px;z-index:20;min-width:168px;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(16,24,40,.12);padding:4px}
.menu-p a,.menu-p button{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;border:0;background:none;border-radius:6px;
  font:inherit;font-size:13.5px;color:var(--ink-2);text-align:left;cursor:pointer}
.menu-p a:hover,.menu-p button:hover{background:var(--chip)}
.menu-p hr{border:0;border-top:1px solid var(--line-2);margin:4px 0}
.menu-p form{margin:0}

/* ---------- form controls inside look-B boxes ---------- */
.inp input,.inp select,.inp textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);padding:0;height:100%}
.inp select{appearance:none;-webkit-appearance:none;cursor:pointer;font-weight:600}
.inp input::placeholder,.inp textarea::placeholder{color:var(--faint)}
.inp:focus-within{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(52,64,84,.08)}
.inp.ta{height:auto;padding:8px 10px;align-items:stretch}
.inp.ta textarea{min-height:58px;resize:vertical;line-height:20px}
input.inp,select.inp,textarea.inp{width:100%;font:inherit;font-size:13.5px;color:var(--ink);outline:0}
textarea.inp{height:auto;min-height:64px;padding:8px 10px;line-height:20px;white-space:normal}
select.inp{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 8px center/14px;padding-right:28px}
input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(52,64,84,.08)}

/* radio chips: <label class="opt"><input type="radio"><span>方案</span></label> */
.opts .opt{position:relative;padding:0;background:none;height:auto}
.opts .opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opts .opt span{display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:6px;background:var(--chip);font-size:12.5px;color:var(--ink-2);cursor:pointer}
.opts .opt input:checked + span{background:var(--ink);color:#fff;font-weight:500}
.opts .opt input:focus-visible + span{outline:2px solid var(--ink-2);outline-offset:1px}
.opts.intent-pick .opt span{min-width:34px;justify-content:center}

/* the date field: the look-B box shows "11-16 周一", the native picker sits on top */
.inp.date{position:relative;cursor:pointer}
.inp.date input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}
.inp.date .dv{white-space:nowrap}
.inp.date .dv.empty{color:var(--faint)}
.inp.date .clear{position:relative;z-index:2;margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border:0;background:none;color:var(--faint);cursor:pointer;padding:0}
.inp.date .sug + .clear{margin-left:6px}
.inp.date .sug[hidden]{display:none}

/* buttons are real buttons */
button.btn{cursor:pointer}
a.btn{cursor:pointer}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.sm{height:28px;padding:0 9px;font-size:12.5px}

/* messages */
.err{margin-top:10px;padding:8px 10px;border:1px solid var(--red-line);background:var(--red-tint);color:var(--red);border-radius:6px;font-size:13px;line-height:19px}
.err:focus{outline:2px solid var(--red-line);outline-offset:2px}
/* a jump to a block (#add, #qa, ...) stops below the desktop top bar */
@media (min-width:700px){.page [id]{scroll-margin-top:64px}}
.okbar{display:flex;align-items:center;gap:6px;margin:10px 16px 0;padding:8px 10px;border:1px solid var(--green-line);background:var(--green-bg);color:var(--green);border-radius:6px;font-size:13px;font-weight:500}
.okbar .i{stroke-width:2.4}
.okbar.err{border-color:var(--red-line);background:var(--red-tint);color:var(--red);line-height:19px}
.note-line{font-size:12px;color:var(--mute);line-height:17px;margin-top:6px}

/* ---------- 今日跟进 extras ---------- */
.filters select.dd{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;color:var(--ink-2);padding-right:26px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 7px center/14px}
/* a select is as wide as its longest option: a long 平台 or 介绍人 (32 and 100 characters at most) is cut with an
   ellipsis at 160 px, and the selects give way when the phone's row is short, so the page never widens (fix 5 C4b);
   the demo's are 107 and 146 px */
.filters select.dd{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.filters form{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin:0}
.bk-empty{padding:10px 16px 12px 46px;font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--line-2)}
.bk-more{padding:8px 16px 10px 46px;font-size:12.5px;color:var(--mute)}
.row:hover{background:var(--sunk)}
.qa .picker{display:flex;flex-direction:column;gap:6px;min-width:0}
.qa .picker .search-in{height:32px}
.qa .inp.sel{gap:8px}
.qa .inp.sel select{flex:0 1 auto;max-width:60%}
.qa .inp.sel .end{margin-left:auto}
.qa .fr.top-al{align-items:start}
.qa .fr.top-al > label{padding-top:9px}

/* ---------- 家庭卡片 extras ---------- */
.back{gap:2px}
.who .v a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.tkc{cursor:pointer;width:100%;background:#fff;font:inherit;text-align:left;color:inherit}
.tkc:hover{border-color:var(--line-3)}
.tks form{margin:0;display:flex}
.ev .h .by{color:var(--mute)}
.ev .del{border:0;background:none;padding:0 0 0 6px;color:var(--faint);font:inherit;font-size:12px;cursor:pointer}
.ev .del:hover{color:var(--red)}
.ev .t.empty{color:var(--faint)}
.ev form{display:inline}
.edit-grid{display:grid;gap:8px}
.mrow{border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:6px}
.mrow .mh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.mrow .mh select{width:auto;height:30px}
.mrow .mh .sp{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:400;color:var(--mute)}
.mrow .mh label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.mrow .g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lbl{font-size:12px;color:var(--mute);margin:8px 0 4px}
.facts-edit .pr{align-items:center}
.facts-edit .pr .v input,.facts-edit .pr .v textarea{width:100%}
.lostbox{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lostbox .lh{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--sunk);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lostbox .lb{padding:10px 12px;display:grid;gap:8px;font-size:13px}
.lostbox .kv{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px}
.lostbox .kv .k{color:var(--mute)}
.lostbox form{margin:0}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pending{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--green-line);font-size:13px;color:var(--ink-2)}
.pending .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.sgn-l .open{cursor:pointer}

/* ---------- sheets as <dialog> ---------- */
dialog.sheet-dlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:480px;max-height:92vh;background:transparent;overflow:visible}
dialog.sheet-dlg::backdrop{background:rgba(16,24,40,.46)}
dialog.sheet-dlg .sheet{margin-top:0;max-height:92vh;overflow:auto}
dialog.sheet-dlg[open]:not(:modal){position:static;display:block;margin:12px auto 0;max-width:none;border:1px solid var(--line);border-radius:14px;overflow:hidden}
dialog.sheet-dlg[open]:not(:modal) .sheet{box-shadow:none}
@media (min-width:700px){ dialog.sheet-dlg{margin:auto} dialog.sheet-dlg .sheet{border-radius:14px} }
.sheet form{margin:0}
.rads .rad{cursor:pointer;position:relative}
.rads .rad input{position:absolute;opacity:0;width:1px;height:1px}
.rads .rad:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font-weight:600}
.rads .rad:has(input:checked) .o{border:5px solid var(--ink)}
.fld .inp{width:100%}
.kvs .v .faint{color:var(--faint)}
.acc-r .em{color:var(--mute)}
.acc-r.skip{color:var(--faint)}
.sheet .fld select.inp{height:36px}

/* ---------- 新建家庭 ---------- */
.nf .sec{padding:14px 16px}
.nf .fld:first-child{margin-top:0}
.nf .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;align-items:start}
.nf .row2:first-child{margin-top:0}
.nf .row2 > .fld{margin-top:0}
.nf .mrow .mh{font-size:13px}
.nf .dup{border:1px solid var(--amber-line);background:#fffcf5;border-radius:8px;padding:10px 12px;margin:12px 16px 0}
.nf .dup .q{font-weight:600;color:var(--amber);font-size:14px;display:flex;align-items:center;gap:6px}
.nf .dup .it{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;flex-wrap:wrap}
.nf .dup .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nf details.more > summary{cursor:pointer;font-size:13px;color:var(--ink-2);font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.nf details.more > summary::-webkit-details-marker{display:none}
.nf .stick{padding:14px 16px 20px}
/* 新建家庭 at computer width (round 6, W3): the form's three blocks in two columns, in the order a person fills
   them in (the phone's order, so Tab follows what is read): down the left, 这一家 (names, 平台, 介绍人, 负责人,
   阶段); then down the right, 家庭成员 and 意向 with the two optional groups; a line between; 保存 under the
   right column. A refusal sits at the top of the block it is about (data-at, app/web.py new_family_block), R8's
   duplicate warning at the top of 家庭成员; the other column still starts right under the header. Each column
   is one block spanning a flexible row, so a notice in one column never pushes the other one down. A member's
   姓名, 微信名 and 微信号 share one row (电话 under them), so the form fits a laptop's screen. The phone's form
   is untouched. */
@media (min-width:1100px){
  .nf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:"head head" "who b" "who members" "who c" "who more" ". foot"}
  .nf:has(> .err[data-at=who]){grid-template-rows:auto auto 1fr auto auto;
    grid-template-areas:"head head" "a members" "who members" "who more" ". foot"}
  .nf::before{content:"";grid-column:2;grid-row:2 / -2;border-left:1px solid var(--line)}
  .nf > .rh{grid-area:head}
  .nf > .err{grid-area:a}
  .nf > .dup,.nf > .err[data-at=members]{grid-area:b}
  .nf > .err[data-at=more]{grid-area:c}
  .nf > .sec:nth-of-type(1){grid-area:who}
  .nf > .sec:nth-of-type(2){grid-area:members}
  .nf > .sec:nth-of-type(3){grid-area:more}
  .nf > .stick{grid-area:foot}
  .nf .mrow .g2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nf .mrow .g2 .full{grid-column:auto}
}

/* ---------- 登录 ---------- */
.login{max-width:360px;margin:0 auto;padding:56px 20px}
.login .brand{margin-bottom:22px}
.login h1{font-size:20px;font-weight:600;line-height:28px}
.login .s{font-size:13px;color:var(--mute);margin-top:4px}
.login form{margin-top:20px}
.login .fld>label{margin-bottom:6px}
/* the login at computer width (round 6, W2), after the student tracker's: a brand line at the top, then two
   panels in the middle of the page, the form on the left (380 px) and one of Fox's paintings on the right
   (460 px, at its own ratio: never cropped, dimmed or tinted), the whole 936 px across and one screen high.
   Below 1100 px neither the line nor the painting shows, and the phone does not download the painting
   (loading=lazy on a box that is not displayed). The brand line is every signed-out page's (base.html). */
header.ab.lg-bar,.lg-art{display:none}
@media (min-width:1100px){
  header.ab.lg-bar{display:flex;background:#fff}
  header.lg-bar + .page{min-height:calc(100vh - 48px)}
  .login{max-width:none;min-height:calc(100vh - 48px);display:grid;grid-template-columns:380px 460px;column-gap:96px;
    justify-content:center;align-content:center;align-items:center;padding:40px 32px}
  .login h1{font-size:24px;line-height:32px}
  .lg-art{display:block;margin:0}
  .lg-art img{display:block;width:100%;height:auto;border-radius:8px}
}

/* ---------- 设置 ---------- */
.adm-tabs{display:flex;gap:14px;padding:0 16px;border-bottom:1px solid var(--line)}
.adm-tabs a{display:inline-flex;align-items:center;height:40px;font-size:13px;color:var(--mute);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.adm-tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.adm{padding:12px 16px 20px}
.adm .card{margin-top:8px}
.adm .card .t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.adm .card .s{font-size:12px;color:var(--mute);margin-top:2px}
.adm .card details{margin-top:8px}
.adm .card details > summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);list-style:none}
.adm .card details > summary::-webkit-details-marker{display:none}
.adm form.grid{display:grid;gap:6px;margin-top:8px}
.adm .chip.off{background:#fff;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--faint)}
.adm h3{font-size:13px;font-weight:600;margin:16px 0 6px}
.search-list .row{grid-template-columns:minmax(0,1fr) 14px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sheet .acc-r{white-space:normal;line-height:20px;padding:1px 0}
/* a family member's 备注, under the WeChat name */
.tbl .mnote{font-size:12px;line-height:17px;margin-top:2px}
/* 家庭成员's 微信号 (fix round 4): at phone width a grey line under the 微信名 (.ph-only), so the
   table keeps three columns; from 700 px its own column between 微信名 and 电话 (.dk-only) */
@media (min-width:700px){
  .tbl.mem .tr{grid-template-columns:100px minmax(0,1fr) minmax(0,1fr) 112px}
}
/* a 微信号 is never cut off (fix round 4b, M1): at phone width its grey line wraps, while the cell and the
   row's other lines keep look B's one line; the label stays with the id (&nbsp; and .wx: no break
   between the label's characters), so WeChat's longest id, 20 characters, fills two lines and a longer
   one breaks inside the id rather than run past the cell */
.tbl .mnote.ph-only{white-space:normal;overflow-wrap:anywhere}
/* 「微信号 + id」 as one unit: the card's grey line (M1) and the 已签约 sheet's parent lines (m5) */
.wx{word-break:keep-all}
/* the members editors: 姓名 takes the whole row, so 微信名 and 微信号 sit side by side */
.mrow .g2 .full{grid-column:1 / -1}

/* ---------- attachments (round 5a, spec 10): the rows and the upload form, in look B's terms ---------- */
.fj-list{display:grid}
.fj{display:grid;align-items:start;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:10px 0;border-top:1px solid var(--line-2)}
.fj:first-child{border-top:0;padding-top:2px}
.fj .ic{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--mute)}
.fj .fj-h{display:flex;align-items:baseline;gap:10px;min-height:22px}
.fj .fj-n{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:20px;color:var(--ink);overflow-wrap:anywhere;
  text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.fj .fj-a{flex:none;display:flex;align-items:center;gap:10px;font-size:12px;line-height:20px}
.fj .fj-a a{color:var(--ink-2)}
.fj .fj-a form{margin:0;display:inline}
.fj .del{border:0;background:none;padding:0;color:var(--faint);font:inherit;font-size:12px;cursor:pointer}
.fj .del:hover{color:var(--red)}
.fj .fj-m{font-size:12px;line-height:17px;color:var(--mute);margin-top:2px;overflow-wrap:anywhere}
.fj .fj-q{font-size:13px;line-height:19px;color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}
.fj audio{display:block;width:100%;height:36px;margin-top:8px}
.fj-list .note-line{margin-top:0}
.fj-form .fj-pick{border:1px dashed var(--line-3);border-radius:6px;padding:7px 10px;background:var(--sunk)}
.fj-form .fj-pick input[type=file]{display:block;width:100%;min-width:0;font:inherit;font-size:13px;color:var(--ink-2)}
.fj-form .fj-pick input[type=file]::file-selector-button{font:inherit;font-size:13px;height:30px;padding:0 12px;margin-right:10px;
  border:1px solid var(--line-3);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.fj-form .rule{padding-left:0;margin-top:8px}

/* package 3: the hand-off error and 重试 on a signed card */
.sgn .ho-err{margin:0 12px 12px}  /* fix (nits) N1: the green box's inner padding, like its other lines */
.sgn .ho-retry{margin:0 12px 12px}
/* ---------- 看板 (package 2, spec §5 screen 3, §9 H2-H3) ----------
   board.html draws both layouts from one context: below 1100 px the season box, the filters, the stage
   tabs and the open tab's cards (look B board_390); from 1100 px the season line with the attention pills,
   the filters, four columns in Fox's order and the 流失 column, collapsed until tapped (board_1280). A card
   is a box with one stretched link (its name) to the family card; the tracker link sits above it. */
.page.board .bd-dk,.page.board .cols{display:none}
.page.board .filters .ref{width:160px;max-width:160px;min-width:0;height:32px;font:inherit;font-size:13px;color:var(--ink-2);
  padding:0 10px;background:#fff;outline:0}
.page.board .filters .ref::placeholder{color:var(--ink-2)}
.page.board .top .btn{height:32px}
.page.board .tabs{overflow-x:auto;scrollbar-width:none}
.page.board .well .bk-empty{padding:10px 4px;border:0}
.page.board .filters .cnt{display:none} /* the phone's header already says how many */
.page.board .filters .ref{flex:0 1 auto}
.page.board .card{position:relative;display:block;min-width:0;overflow:hidden}
.page.board .card .c-fu{overflow:hidden;text-overflow:ellipsis}
.page.board .card .c-ft > .c-na{flex:1 1 auto}
.page.board .card .c-go{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis}
.page.board .card .c-go::after{content:"";position:absolute;inset:0;border-radius:8px}
.page.board .card:hover{border-color:var(--line-3)}
.page.board .card.od:hover{border-color:var(--red)}
.page.board .card .c-ext{position:relative;z-index:1;display:inline-flex}
.page.board .card .c-in b{white-space:normal}
.page.board .card .c-fu b{color:var(--ink-2);font-weight:500}
.col-empty{padding:6px 4px;font-size:12.5px;color:var(--faint)}
a.lostcol{text-decoration:none;cursor:pointer}
a.lostcol:hover{border-color:var(--ink-3, var(--mute))}
.col-x{margin-left:auto;display:inline-flex;color:var(--mute)}
@media (min-width:1100px){
  .page.wide.board{max-width:none}
  .page.board .bd-ph,.page.board .tabs,.page.board .well{display:none}
  .page.board .fl.bd-dk{display:flex;margin:12px 16px}
  .page.board .filters .cnt{display:inline}
  .page.board .srt.bd-dk{display:inline-flex;align-items:center;gap:4px;margin-left:12px}
  .page.board .cols{display:flex;padding:0 16px 20px}
  .page.board .col.lost-open{margin-left:6px}
}

/* ---------- 数据 /reports (package 2, spec §5 screen 6, §9 H5) ----------
   Inline SVG drawn from app/reports.py's numbers: bars in ink, 已签约 in green, this week's bar darker;
   the number beside each bar. From 1100 px the sections sit in two columns. */
.rp .rp-note{font-size:12px;line-height:17px;color:var(--mute);margin:-2px 0 10px}
.rp-svg{display:block;max-width:100%;height:auto;overflow:visible}
.rp-svg text{font-size:12px;fill:var(--ink-2)}
.rp-svg .rp-l{fill:var(--mute)}
.rp-svg .rp-v{font-weight:600;fill:var(--ink)}
.rp-svg .rp-v.zero{fill:var(--faint);font-weight:400}
.rp-svg .rp-s{font-weight:400;fill:var(--mute)}
.rp-svg .rp-w{font-size:10.5px;fill:var(--faint)}
.rp-svg .rp-b{fill:var(--ink-2)}
.rp-svg .rp-b.win{fill:var(--green)}
.rp-svg .rp-b.now{fill:var(--ink)}
.rp-svg .rp-axis{stroke:var(--line);stroke-width:1}
.rp-empty{font-size:12.5px;color:var(--faint)}
.rp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-t{border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.rp-tl{font-size:12px;line-height:16px;color:var(--mute)}
.rp-k{font-size:20px;line-height:28px;font-weight:600;margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rp-k .rp-c{font-size:12px;font-weight:400;color:var(--mute)}
@media (min-width:1100px){
  .page.reports .rp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .page.reports .rp-grid > .sec:nth-child(odd){border-right:1px solid var(--line)}
}

/* 设置 · 导出 (package 2) */
.adm .exp{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:12px}
.adm .exp .btn{margin-top:8px}
/* 设置 at computer width (round 6, W4). 用户, 平台 and 流失原因 are tables (.adm-t, drawn from the same context
   as the phone's cards, which hide): one row a person or an option. 用户's two actions open a small box under
   their words, the same forms as the phone's (details.menu: a tap elsewhere closes it, app.js); a refused
   change comes back open with what was typed. An option's 名称, 排序 and 状态 are edited in its row (the inputs
   belong to the row's own form, form=). The 加一位 / 加一个 form is one row under the table; 导出's buttons sit
   beside what they export. Below 1100 px none of this applies. */
.adm-t{display:none}
@media (min-width:1100px){
  .adm > .card:not(.adm-add){display:none}
  .adm-t{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin-top:8px;
    border:1px solid var(--line);border-radius:8px;font-size:13.5px}
  .adm-t th{height:32px;padding:0 12px;background:var(--sunk);border-bottom:1px solid var(--line);font-size:12px;
    font-weight:500;color:var(--mute);text-align:left;white-space:nowrap}
  .adm-t th:first-child{border-top-left-radius:7px}
  .adm-t th:last-child{border-top-right-radius:7px}
  .adm-t td{height:52px;padding:8px 12px;border-top:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2)}
  .adm-t tbody tr:first-child td{border-top:0}
  .adm-t tbody tr:hover td{background:var(--sunk)}
  .adm-t col.c-name{width:260px}
  .adm-t col.c-role{width:120px}
  .adm-t col.c-state{width:150px}
  .adm-t col.c-acts{width:290px}
  .adm-t col.c-sort{width:120px}
  .adm-t col.c-save{width:96px}
  .adm-t .u-n{display:flex;align-items:center;gap:8px;min-width:0}
  .adm-t .u-n b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .adm-t .u-n .chip{flex:none}
  .adm-t .u-e{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .adm-t .u-acts{white-space:nowrap}
  .adm-t details.menu{display:inline-block}
  .adm-t details.menu + details.menu{margin-left:14px}
  .adm-t details.menu[open] > summary{color:var(--ink)}
  .adm-t .adm-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:300px;display:grid;gap:8px;padding:12px;
    background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.12);white-space:normal}
  .adm-t td .inp{width:100%}
  .adm-t td form{margin:0}
  .adm-t td > form .btn{width:100%}
  .adm-t.opts-t td:first-child .inp,.adm form.o-add [name=label]{max-width:420px}  /* a name of 32 characters at most */
  .adm-t tr.off td .inp{color:var(--mute)}
  .adm form.adm-add{align-items:center;column-gap:8px}
  .adm form.u-add{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 150px minmax(0,1fr) 96px}
  .adm form.u-add .note-line{grid-column:1 / -1;grid-row:2;margin-top:0}
  .adm form.u-add > .btn{grid-column:5;grid-row:1}
  .adm form.o-add{grid-template-columns:minmax(0,1fr) 160px 96px}
  .adm .exp{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:16px;row-gap:12px;align-items:center}
  .adm .exp .btn{margin-top:0}
  .adm .exp .note-line{margin-top:0}
}
/* 搜索 and the error page at computer width (round 6, W4 / W1). 搜索: the results are 今日跟进's computer table,
   the same rows (_macros.html tt_row) under one group row 「找到 N」, and the phone's list hides; the box stops at
   560 px. The error page: its message and its one button in the middle of the shell. Below 1100 px nothing
   changes. */
@media (min-width:1100px){
  .page.search-page .search-list{display:none}
  .page.search-page .tt{display:table}
  .page.search-page .filters form{max-width:560px}
  .page.err-page{display:flex;flex-direction:column;justify-content:center;text-align:center;padding-bottom:10vh}
  .page.err-page > .top{justify-content:center;border-bottom:0}
  .page.err-page > .sec{border-bottom:0}
  .page.err-page .btns{justify-content:center}
  .page.err-page .btns .btn{flex:none;min-width:240px}
}
/* fix P2 F1: the card's first line keeps 平台 · 介绍人 · 负责人 in sight; 平台 and 介绍人 are each capped and cut
   with an ellipsis (full text in title), the 负责人, the shortest, is never cut */
.page.board .card .meta .m-pf,.page.board .card .meta .m-rf{flex:0 1 auto;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page.board .card .meta .sep,.page.board .card .meta .av,.page.board .card .meta .m-ow{flex:none}
.page.board .card .c-ft > .c-na.red{color:var(--red)}  /* fix (nits) N2: 学生系统：建档失败 on the board card */