/* Settings — screen styles.
   Owned by ONE porting agent so screens can be built in parallel without
   racing on main.css. Loads AFTER main.css, so a bare class here beats a
   bare class there — but an ID rule in main.css still wins. Check the
   cascade before assuming a rule applies.
   Tokens, the .tip tooltip system and the chart series live in main.css and
   must not be redefined here. */

/* ── Page frame ───────────────────────────────────────────────────────────
   Board: title 27px Fraunces + one subtitle line, content padded 30/40,
   sub-nav 200px beside a flexible pane area. The view shell (.toolbar +
   .scroll) is index.html's; branding.js injects the subtitle and .set-body.
   Every rule is #view-settings-scoped so it outranks main.css's class and
   type rules (.toolbar, .card, input, label.lbl) and leaks nowhere else. */
#view-settings .toolbar{display:block;padding:30px 40px 0;border-bottom:none;background:transparent;}
#view-settings .toolbar-title{display:block;font-family:var(--font-display);font-size:27px;font-weight:400;letter-spacing:-.5px;line-height:1.15;color:#2A323A;margin:0 0 3px;}
#view-settings .set-sub{display:block;font-size:12.5px;color:#6B7480;margin:0;}
#view-settings .scroll{padding:30px 40px 40px;}
#view-settings .set-body{display:flex;gap:26px;align-items:flex-start;max-width:1180px;}
#view-settings .set-panels{flex:1;min-width:0;}
#view-settings .set-pane{display:none;}
#view-settings .set-pane.active{display:block;}

/* ── Sub-nav ── */
#view-settings .set-nav{width:200px;flex-shrink:0;position:sticky;top:0;}
#view-settings .set-nav-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 11px;margin:0 0 4px;border-radius:9px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer;font-family:var(--font);font-size:12.5px;font-weight:500;color:#3D4854;line-height:1.3;box-shadow:none;transition:background .12s;}
#view-settings .set-nav-item svg{flex-shrink:0;}
#view-settings .set-nav-item:hover{background:#F7F7F7;}
#view-settings .set-nav-item.active{background:#FFFFFF;border-color:#D2DAE3;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:8px 11px;}
#view-settings .set-nav-txt{min-width:0;display:block;}
#view-settings .set-nav-lbl{display:block;}
#view-settings .set-nav-item.active .set-nav-lbl{font-weight:600;color:#2A323A;}
#view-settings .set-nav-cap{display:none;font-size:10.5px;font-weight:400;color:#6B7480;line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-settings .set-nav-item.active .set-nav-cap{display:block;}

/* ── Pane heading: "Your practice" + ? ── */
#view-settings .set-pane-hd{display:flex;align-items:center;gap:9px;margin-bottom:20px;}
#view-settings .set-pane-title{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.3px;color:#2A323A;}
#view-settings .set-help{width:15px;height:15px;border-radius:50%;background:#F1EDE6;color:#837D68;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;font-family:var(--font);}

/* ── Cards inside the panes (shell cards + own cards) ── */
#view-settings .set-panels .card{background:#FFFFFF;border:1px solid #E8EDF2;border-radius:14px;padding:20px 22px;margin-bottom:18px;box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);}
/* Width discipline: only the practice pane has two real columns; the other
   panes hold a form or a list, so their cards stop at a comfortable measure. */
#view-settings .set-pane:not([data-sec="practice"]) .card{max-width:760px;}
#view-settings .set-panels .card-kicker{display:none;}
#view-settings .set-panels .card-title{font-family:var(--font-display);font-size:15.5px;font-weight:500;letter-spacing:-.1px;color:#2A323A;margin-bottom:12px;}
#view-settings .set-panels .set-card-bare > .card-title{display:none;}
#view-settings .set-panels .set-card-flat{background:transparent;border:none;box-shadow:none;padding:0;margin:0;}
#view-settings .set-panels .set-lead{display:none;}   /* prose moved into the pane's ? tip */

/* Form controls in the panes — board spec: 9/13 padding, 1px #D2DAE3, 9px radius.
   (1,3,1)+ specificity beats main.css's bare input / input:focus rules. */
#view-settings .set-panels input:not([type=checkbox]):not([type=file]):not([type=radio]),
#view-settings .set-panels textarea,
#view-settings .set-panels select{width:100%;box-sizing:border-box;padding:9px 13px;border:1px solid #D2DAE3;border-radius:9px;font-size:13px;font-family:var(--font);background:#FFFFFF;color:#2A323A;font-weight:400;}
#view-settings .set-panels textarea{font-size:12.5px;line-height:1.55;resize:none;}
#view-settings .set-panels input:not([type=checkbox]):not([type=file]):not([type=radio]):focus,
#view-settings .set-panels textarea:focus,
#view-settings .set-panels select:focus{outline:none;border-color:#2A323A;box-shadow:0 0 0 3px rgba(42,50,58,.08);background:#FFFFFF;}
#view-settings .set-panels input::placeholder,#view-settings .set-panels textarea::placeholder{color:#A8AEB6;}
#view-settings .set-panels .set-mono{font-family:var(--font-mono);}
#view-settings .set-lbl,
#view-settings .set-panels label.lbl{display:block;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;margin:0 0 6px;}
#view-settings .set-lbl.tip{cursor:help;}
#view-settings .set-panels .chip{border:none;border-radius:9999px;padding:3px 9px;font-size:10.5px;font-weight:600;}
#view-settings .set-panels details summary{font-size:11.5px;color:#6B7480;cursor:pointer;}
#view-settings .set-panels .set-txtbtn{background:transparent;border:none;padding:7px 4px;font-family:var(--font);font-size:12px;font-weight:500;color:#6B7480;cursor:pointer;}
#view-settings .set-panels .set-txtbtn:hover{color:#2A323A;}
#view-settings .set-panels .set-txtbtn.set-danger:hover{color:#8A1C1C;}
#view-settings .set-sp{flex:1;}
#view-settings .set-f1{flex:1;min-width:0;}
#view-settings .set-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-settings .set-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9BA3AC;}
#view-settings .set-eyebrow-quiet{letter-spacing:.06em;}
#view-settings .set-eyebrow.tip{cursor:help;}
/* The account card's own "Clipper token" button: the same action lives in the
   Access tokens pane, where the result stays on screen. */
#view-settings #account-body button[onclick^="generateClipperToken"]{display:none;}
#view-settings .set-panels input[type=checkbox]{width:15px;height:15px;accent-color:#2A323A;margin:0;}
#view-settings .set-panels .set-loading,#view-settings .set-empty-t{font-size:12.5px;color:#6B7480;line-height:1.55;}
#view-settings .set-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}

/* ── Practice pane: 500px form + logo/preview column ── */
#view-settings .set-prac{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;}
#view-settings .set-prac-form{width:500px;max-width:100%;flex-shrink:0;box-sizing:border-box;padding:22px 24px;margin:0;display:flex;flex-direction:column;}
#view-settings .set-prac-side{flex:1;min-width:320px;display:flex;flex-direction:column;gap:26px;}
#view-settings .set-row2{display:flex;gap:16px;margin-bottom:18px;}
#view-settings .set-f-short{width:172px;flex-shrink:0;}
#view-settings .set-prac-form textarea{margin-bottom:18px;}
#view-settings .set-prac-form textarea:last-of-type{margin-bottom:0;}
#view-settings .set-prac-foot{padding-top:18px;margin-top:18px;border-top:1px solid #E8EDF2;}

/* Logo card */
#view-settings .set-logo-card{min-height:190px;box-sizing:border-box;margin:0;}
#view-settings .set-logo-card .set-eyebrow{display:block;margin-bottom:12px;}
#view-settings .set-logo-well{height:76px;box-sizing:border-box;background:#F7F7F7;border:1px solid #EFEFF1;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;padding:8px 14px;}
#view-settings .set-logo-img{max-height:60px;max-width:100%;object-fit:contain;display:block;}
#view-settings .set-logo-none{font-size:11.5px;color:#9BA3AC;}
#view-settings .set-logo-row{display:flex;align-items:center;gap:8px;}
#view-settings .set-logo-meta{font-family:var(--font-mono);font-size:9.5px;color:#9BA3AC;cursor:help;white-space:nowrap;}

/* Export header card + the sheet */
#view-settings .set-prev-card{margin:0;display:flex;flex-direction:column;}
#view-settings .set-prev-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
#view-settings .set-live{font-size:10.5px;font-weight:600;color:#40542F;background:#E4EADF;border-radius:20px;padding:1px 8px;cursor:help;line-height:1.5;}
#view-settings .set-sheet{background:#FCFCFB;border:1px solid #D2DAE3;border-radius:6px;padding:16px 17px;display:flex;flex-direction:column;overflow:hidden;min-height:228px;}
#view-settings .set-sh-top{display:flex;align-items:flex-start;gap:12px;}
#view-settings .set-sh-logo{height:21px;max-width:96px;width:auto;object-fit:contain;flex-shrink:0;margin-top:1px;}
#view-settings .set-sh-name{flex:1;min-width:0;}
#view-settings .set-sh-co{display:block;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#2A323A;word-break:break-word;}
#view-settings .set-sh-hdr{display:block;font-family:var(--font-mono);font-size:6.5px;font-weight:600;letter-spacing:.3em;color:#837D68;margin-top:2px;}
#view-settings .set-sh-addr{text-align:right;font-size:8px;color:#6B7480;line-height:1.6;max-width:52%;}
#view-settings .set-sh-extra{color:#9BA3AC;font-size:7px;}
#view-settings .set-sh-rule{height:1px;background:#D2DAE3;margin:12px 0 9px;}
#view-settings .set-sh-rule-dark{background:#2A323A;margin:13px 0 11px;}
#view-settings .set-sh-title{display:flex;align-items:flex-end;gap:12px;}
#view-settings .set-sh-doc{display:block;font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:-.3px;color:#2A323A;}
#view-settings .set-sh-proj{display:block;font-size:9px;color:#6B7480;margin-top:2px;}
#view-settings .set-sh-issue{text-align:right;flex-shrink:0;}
#view-settings .set-sh-eye{display:block;font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#9BA3AC;}
#view-settings .set-sh-rev{display:block;font-family:var(--font-mono);font-size:9px;color:#2A323A;margin-top:2px;}
#view-settings .set-sh-th{display:flex;gap:8px;font-family:var(--font-mono);font-size:7px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;padding-bottom:6px;border-bottom:1px solid #E8EDF2;}
#view-settings .set-sh-tr{display:flex;gap:8px;font-size:7.5px;color:#4A5560;padding:6px 0;}
#view-settings .set-sh-c-id{width:36px;flex-shrink:0;}
#view-settings .set-sh-c-sec{width:52px;flex-shrink:0;}
#view-settings .set-sh-c-br{width:46px;flex-shrink:0;}
#view-settings .set-sh-c-st{width:46px;flex-shrink:0;}
#view-settings .set-sh-empty{font-size:7.5px;color:#9BA3AC;padding:10px 0;}
#view-settings .set-sh-foot{font-size:6.5px;color:#9BA3AC;line-height:1.6;padding-top:10px;margin-top:auto;border-top:1px solid #E8EDF2;}
#view-settings .set-sh-ph{color:#B9BFC6;font-weight:400;letter-spacing:0;text-transform:none;}

/* ── Access tokens pane ── */
#view-settings .set-tok-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
#view-settings .set-tok-row{display:flex;align-items:center;gap:12px;border:1px solid #E8EDF2;border-radius:9px;padding:8px 12px;font-size:12.5px;}
#view-settings .set-tok-lbl{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-settings .set-tok-pre{font-size:11px;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;border-radius:6px;padding:1px 8px;}
#view-settings .set-tok-meta{font-size:11px;color:#6B7480;white-space:nowrap;}
#view-settings .set-tok-foot{display:flex;gap:8px;align-items:center;margin-top:14px;}
#view-settings .set-tok-foot input{max-width:300px;}
#view-settings .set-tok-once{border:1px solid #D9A0A2;background:#F5DEDE;border-radius:10px;padding:12px 14px;margin-bottom:4px;}
#view-settings .set-tok-once-t{font-weight:600;font-size:12px;color:#7A4245;margin-bottom:6px;}
#view-settings .set-tok-once-row{display:flex;gap:8px;align-items:center;}
#view-settings .set-tok-code{font-family:var(--font-mono);font-size:11px;word-break:break-all;flex:1;color:#2A323A;}
#view-settings .set-tok-once-h{font-size:11px;color:#7A4245;margin-top:6px;}
#view-settings .set-tok-once-h code{font-family:var(--font-mono);font-size:10.5px;}

/* ── Team pane ── */
#view-settings .set-team-invite{display:flex;gap:8px;align-items:center;margin-top:4px;}
#view-settings .set-team-invite input{max-width:340px;}
#view-settings .set-team-note{font-size:11.5px;color:#6B7480;}
#view-settings .set-team-foot{margin-top:14px;padding-top:14px;border-top:1px solid #E8EDF2;}
#view-settings .set-you{font-size:10px;font-weight:500;color:#6B7480;margin-left:4px;}
#view-settings .set-panels .shr-row{border-color:#E8EDF2;}

/* ── Narrow screens: nav becomes a wrapped row; practice columns stack ── */
@media(max-width:980px){
  #view-settings .set-body{flex-direction:column;gap:18px;}
  #view-settings .set-nav{width:100%;display:flex;flex-wrap:wrap;gap:4px;position:static;}
  #view-settings .set-nav-item{width:auto;margin:0;}
  #view-settings .set-nav-cap{display:none!important;}
  #view-settings .toolbar{padding:22px 22px 0;}
  #view-settings .scroll{padding:20px 22px 30px;}
  #view-settings .set-prac-form{width:100%;}
}