/* the new look: connect area (class-only, .u- prefix).
   The Connect & share page and every dialog it opens (linked accounts, the broker
   picker, investors, share codes, attach a real account, import, runner links).
   Dialogs are .u-sheet: a bottom sheet on a phone, a centred card on a computer. */

/* ── the page ── */
.u-cn-grp, .u-cn-side{ min-width:0; }
.u-cn-grp .u-row .t, .u-cn-sheet .u-row .t{ overflow:hidden; text-overflow:ellipsis; }
/* rows whose grey line is help text: it wraps instead of being cut off */
.u-row.u-cn-wrap .s{ white-space:normal; overflow:visible; line-height:1.45; }

/* ── the sheet frame ── */
.u-cn-sheet{ font-size:15px; overscroll-behavior:contain; }
@media (min-width:700px){ .u-sheet.u-cn-wide{ width:min(780px,92vw); } }
.u-cn-top{ display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:8px; }
.u-cn-ttl{ min-width:0; padding-top:2px; }
.u-cn-sheet .u-cn-top h2{ margin:6px 0 0; overflow-wrap:anywhere; line-height:1.2; }
.u-cn-kick{ margin-top:2px; font-size:14px; color:var(--u-t3); overflow-wrap:anywhere; }
.u-cn-x{ margin-right:-10px; color:var(--u-t2); }
.u-cn-lead{ margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--u-t2); }

/* text inside a sheet */
.u-cn-text{ margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--u-t2); }
.u-cn-text b, .u-cn-lead b, .u-cn-foot b{ color:var(--u-t1); font-weight:600; }
.u-cn-sub{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--u-t3); }
.u-cn-hint{ font-size:13px; font-weight:500; line-height:1.45; color:var(--u-t3); }
.u-cn-hp{ margin:8px 0 0; }
.u-cn-center{ text-align:center; }
.u-cn-foot{ margin:24px 0 0; padding-top:14px; border-top:1px solid var(--u-line); font-size:13px; line-height:1.55; color:var(--u-t3); }
.u-cn-wait{ margin:0; padding:16px 0; font-size:15px; line-height:1.5; color:var(--u-t3); }
.u-cn-h{ margin:26px 0 2px; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3;
         display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.u-cn-h small{ font-size:13.5px; font-weight:500; color:var(--u-t3); display:inline-flex; align-items:center; gap:6px; }
.u-cn-live{ color:var(--u-green); align-self:center; }
.u-cn-goldt{ color:var(--u-gold); }
.u-cn-at{ font-size:13px; font-weight:500; color:var(--u-t3); }
.u-cn-np{ margin-top:4px; }
/* a text link inside a sentence: a 40px tall tap target without moving the line */
.u-app a.u-cn-a{ display:inline-block; padding:10px 0; margin:-10px 0; color:var(--u-green); font-weight:600; }
.u-cn-dim{ opacity:.55; }

/* the class library inside a sheet: the sheet already has its side padding */
.u-cn-sheet .u-rows, .u-cn-sheet .u-stats{ padding-left:0; padding-right:0; }
.u-cn-sheet .u-note, .u-cn-sheet .u-empty, .u-cn-sheet .u-panel{ margin-left:0; margin-right:0; }
.u-cn-sheet .u-tabs{ padding:10px 0 2px; }
.u-cn-sheet .u-btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.25; }
.u-cn-sheet .u-stat .v.u-cn-gold{ color:var(--u-gold); }
.u-cn-sheet .u-chart{ height:180px; margin-top:10px; }
@media (min-width:700px){ .u-cn-sheet .u-chart{ height:220px; } }
.u-cn-ndot{ margin-top:6px; }

/* ── rows with their own buttons ── */
.u-cn-list{ min-width:0; }
.u-cn-arow{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:64px; padding:10px 0;
            border-bottom:1px solid var(--u-line); }
.u-cn-arow:last-child{ border-bottom:0; }
.u-cn-txt{ flex:1 1 160px; min-width:0; }
.u-cn-arow .t{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; font-size:16px; font-weight:600; }
.u-cn-arow .t > .u-ellip{ max-width:100%; }
.u-cn-arow .s{ margin-top:3px; font-size:13.5px; line-height:1.5; color:var(--u-t3); overflow-wrap:anywhere; }
.u-cn-acts{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-left:auto; }
.u-cn-acts .u-btn{ padding:0 16px; }
@media (min-width:1024px){ .u-cn-acts .u-btn{ min-height:38px; padding:0 14px; font-size:14px; border-radius:10px; } }
/* the whole row taps through to the account; the buttons sit above it */
.u-cn-hit{ position:absolute; inset:0; z-index:0; width:100%; padding:0; border:0; border-radius:10px; background:none; cursor:pointer; }
.u-cn-hit:hover{ background:color-mix(in srgb, var(--u-t1) 4%, transparent); }
.u-cn-arow > .chev{ flex:none; width:16px; height:16px; color:var(--u-t3); }

/* small labels: Test, Supported, read-only, active … */
.u-cn-badge{ display:inline-flex; align-items:center; flex:none; height:22px; padding:0 8px; border-radius:6px; vertical-align:middle;
             font-size:13px; font-weight:600; line-height:1; white-space:nowrap; background:var(--u-raise2); color:var(--u-t2); }
.u-cn-badge.ok{ background:var(--u-green-t); color:var(--u-green); }
.u-cn-badge.warn{ background:var(--u-gold-t); color:var(--u-gold); }
.u-cn-badge.bad{ background:var(--u-red-t); color:var(--u-red); }
.u-cn-arow .s .u-cn-badge, .u-cn-broker .s .u-cn-badge{ margin-right:8px; }

/* ── forms ── */
.u-cn-grid2{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 12px; }
@media (min-width:700px){ .u-cn-grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.u-cn-inline{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:14px; }
.u-cn-inline .u-field{ flex:1 1 200px; min-width:0; margin-top:0; }
.u-cn-inline > .u-btn{ flex:none; min-height:48px; }
.u-cn-search{ margin-top:12px; -webkit-appearance:none; appearance:none; }
.u-cn-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
/* side by side when both labels fit, one under the other when they don't */
.u-cn-btns > .u-btn{ flex:1 0 auto; }
.u-cn-file{ position:relative; margin-top:20px; cursor:pointer; }
.u-cn-hidden{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.u-cn-back{ margin:4px 0 0 -8px; }

/* choose one of three (what investors see of backtests) */
.u-cn-radios{ margin-top:4px; }
.u-cn-radio{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; width:100%; min-height:56px; padding:12px 0;
             border:0; border-bottom:1px solid var(--u-line); background:none; text-align:left; color:var(--u-t1); }
.u-cn-radio:last-child{ border-bottom:0; }
.u-cn-rdot{ position:relative; width:20px; height:20px; margin-top:1px; border-radius:50%; border:2px solid var(--u-t3); }
.u-cn-radio.on .u-cn-rdot{ border-color:var(--u-green); }
.u-cn-radio.on .u-cn-rdot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--u-green); }
.u-cn-rtxt{ min-width:0; }
.u-cn-radio .t{ display:block; font-size:16px; font-weight:600; }
.u-cn-radio.on .t{ color:var(--u-green); }
.u-cn-radio .s{ display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--u-t3); }

/* who looked, when */
.u-cn-log{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,auto); gap:12px; align-items:center; min-height:44px; padding:8px 0;
           border-bottom:1px solid var(--u-line); font-size:14px; }
.u-cn-log:last-child, .u-cn-more:last-child > .u-cn-log:last-child{ border-bottom:0; }
.u-cn-more > summary{ display:flex; align-items:center; min-height:44px; font-size:15px; font-weight:600; color:var(--u-green); cursor:pointer; list-style:none; }
.u-cn-more > summary::-webkit-details-marker{ display:none; }

/* ── share code ── */
.u-cn-code{ margin:16px 0 2px; font-size:44px; font-weight:700; letter-spacing:.06em; line-height:1.05; overflow-wrap:anywhere; }
@media (min-width:1024px){ .u-cn-code{ font-size:52px; } }
.u-cn-codeoff{ margin-top:16px; font-size:20px; font-weight:700; }

/* ── runner: the token shown once, the commands to run ── */
.u-cn-tok{ margin-top:14px; }
.u-cn-tokh{ font-size:16px; font-weight:700; }
.u-cn-token{ margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--u-bg); font-size:14px; line-height:1.5;
             overflow-wrap:anywhere; word-break:break-all; -webkit-user-select:all; user-select:all; }
.u-cn-cmd{ margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--u-raise); font-size:14px; line-height:1.75;
           color:var(--u-t2); overflow-wrap:anywhere; }

/* ── the broker picker ── */
.u-row.hold.u-cn-broker{ grid-template-columns:40px minmax(0,1fr) 16px; }
.u-cn-broker .s{ white-space:normal; line-height:1.6; }
.u-cn-sheet .u-tabs.u-cn-regions{ margin:0 -20px; padding:12px 20px 2px; }
@media (min-width:700px){ .u-cn-sheet .u-tabs.u-cn-regions{ margin:0; padding:12px 0 2px; flex-wrap:wrap; overflow:visible; } }
.u-cn-steps{ margin-top:10px; }
.u-cn-step{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid var(--u-line); }
.u-cn-step:last-child{ border-bottom:0; }
.u-cn-step .n{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
               background:var(--u-raise2); font-size:14px; font-weight:700; }
.u-cn-sbody{ min-width:0; }
.u-cn-step .t{ margin-top:4px; font-size:16px; font-weight:600; }
.u-cn-step .d{ margin-top:4px; font-size:14.5px; line-height:1.65; color:var(--u-t2); overflow-wrap:anywhere; }
.u-cn-step .d b{ color:var(--u-t1); font-weight:600; }
.u-cn-step .u-cn-hint{ display:block; margin-top:6px; }
.u-cn-kbd{ padding:1px 6px; border-radius:6px; background:var(--u-raise2); font-size:13.5px; font-weight:600; white-space:nowrap; }
.u-cn-opt{ padding:16px 0; border-bottom:1px solid var(--u-line); }
.u-cn-opt:last-child{ border-bottom:0; }
.u-cn-opt > .t{ font-size:17px; font-weight:700; }
.u-cn-opt .u-cn-text{ margin-top:6px; }
.u-cn-opt > .u-btn{ margin-top:12px; }
.u-cn-done{ margin-top:12px; }
.u-cn-doneh{ margin:12px 0 0; font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1; overflow-wrap:anywhere; }

/* ── a linked account: the big number first ── */
.u-cn-hero{ margin-top:14px; }
.u-cn-hero .u-big{ margin-top:12px; }