interview-card.css

/* "Interview me" card in chat (interview-card.ts): the Get to know you look (interview.css: iv-bar, iv-opts, iv-chips, iv-act,
   iv-back-b, iv-foot, iv-link, slide-in) on the system-card surface (genui-cards.css .gu-sys). Shared by the app and the card page. */
.gu-sys.ivc{gap:12px;padding:16px 18px 14px}
.ivc .gu-sh{align-items:flex-start}.ivc .gu-si{margin-top:1px}
.ivc-ht{display:flex;flex-direction:column;gap:1px;min-width:0}.ivc-ht b{font-weight:650;line-height:1.3;overflow-wrap:anywhere}.ivc-ht span{font-size:13.5px;color:var(--mute);line-height:1.35;overflow-wrap:anywhere}
.ivc-intro{font-size:15px;line-height:1.5}
.ivc-top{padding:2px 0 0;gap:8px}.ivc .iv-meta{font-size:13px}.ivc .iv-meta span{color:var(--faint)}
.ivc-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.ivc-q{margin:0;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:24px;line-height:1.18;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere;outline:none}
.ivc-help,.ivc-hint{margin:-4px 0 0;color:var(--mute);font-size:14px;line-height:1.45}
.ivc .iv-opts .gu-opt{min-height:48px;padding:11px 14px;border-radius:16px}.ivc .iv-opts .gu-ot b{font-weight:550;font-size:15px;overflow-wrap:anywhere}
.ivc-yn{flex-direction:row}.ivc-yn .gu-opt{flex:1}
.ivc .iv-chips .gu-chip{height:auto;min-height:40px;padding:8px 14px;font-size:14.5px;text-align:left;line-height:1.25}
.ivc .iv-field{padding:0;border-bottom:0;gap:6px}.ivc .iv-field>span{font-size:13.5px;font-weight:550;color:var(--ink2)}
.ivc .iv-field input{height:44px}
.ivc-text textarea{min-height:92px;max-height:320px;resize:none;border-radius:14px;border:1px solid var(--line2);padding:11px 14px;background:var(--sheet);color:var(--ink);outline:0;font:inherit;font-size:16px;line-height:1.45}
.ivc-text textarea:focus{border-color:var(--ink2)}
.ivc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ivc-count{align-self:flex-end;min-height:16px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}.ivc-count.on{color:var(--warn)}
.ivc-scale{display:flex;gap:8px}
.ivc-scale button{flex:1;height:48px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line2);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;transition:transform .12s,box-shadow .12s}
.ivc-scale button:hover{box-shadow:inset 0 0 0 1px var(--ink2)}.ivc-scale button:active{transform:scale(.97)}.ivc-scale button.on{background:var(--ink);color:var(--sheet);box-shadow:none}
.ivc-ends{display:flex;justify-content:space-between;gap:12px;margin-top:-4px;font-size:13px;color:var(--mute)}
.ivc .iv-act{margin-top:2px}.ivc .iv-act .gu-b{min-height:44px}.ivc .iv-back-b{width:44px;height:44px}.ivc .iv-back-b[disabled]{opacity:.35}
.ivc-foot{padding:0 2px;font-size:13px}
.ivc .iv-err{font-size:13.5px}
/* review */
.ivc-rh{display:flex;flex-direction:column;gap:8px}
.ivc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ivc-list li+li{border-top:1px solid var(--line)}
.ivc-list li>button,.ivc-list li>div{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:10px 14px}
.ivc-list li>button:hover{background:var(--hover)}
.ivc-lq{font-size:13px;color:var(--mute);line-height:1.35;overflow-wrap:anywhere}
.ivc-la{font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}.ivc-la.skip{color:var(--faint);font-style:italic}
/* sent: the compact summary */
.gu-sys.ivc.sent{padding:0;gap:0}
.ivc-done summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;border-radius:20px}.ivc-done summary::-webkit-details-marker{display:none}
.ivc-done summary:hover{background:var(--hover)}
.ivc-ok{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--live) 16%,transparent);color:var(--live)}
.ivc-dt{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ivc-dt b{font-weight:650}.ivc-dt span{color:var(--mute)}
.ivc-chev{flex:none;color:var(--mute);display:grid;transition:transform .2s}.ivc-done[open] .ivc-chev{transform:rotate(180deg)}
.ivc-done[open] summary{border-radius:20px 20px 0 0}
.ivc-done .ivc-list{margin:0 12px 12px}
.ivc-note{margin:0;padding:0 16px 12px;font-size:13.5px;color:var(--mute)}
@media (max-width:767px){
  .gu-sys.ivc{padding:14px 14px 12px}
  .ivc-q{font-size:22px}
  .ivc-foot{flex-direction:row;align-items:center;flex-wrap:wrap}
}