/* =========================================================================
   Polish layer (loaded last). Refines the shell for the five-destination navigation without changing the
   Tieto identity: places look like tabs, filters look like pills, AI actions look like AI, and the main action
   is the only solid one. Uses the tokens of styles.css and ux.css, so light and dark themes both follow.
   ========================================================================= */

/* ---------- Sidebar: five calm, generous destinations (desktop; below 900px it is the top or bottom bar) ---------- */
@media (min-width:901px){
  .side nav{padding-top:10px;display:grid;align-content:start;gap:2px}
  .side nav .nav-i{padding:10px 12px;font-size:14.5px;gap:12px}
  .side nav .nav-i svg{width:20px;height:20px}
}
.side nav .nav-i:not([aria-current=page]):hover{background:rgba(255,255,255,.07)}
.side .foot-s .tiny a[aria-current=page]{color:#fff}
.side .foot-s .tiny a[aria-current=page] svg{color:var(--signal)}

/* ---------- Section tabs: the places inside a destination (same language as the record tabs) ---------- */
.subbar{margin:-2px 0 18px;gap:10px}
.subbar .ws-tabs{display:flex;flex-wrap:nowrap;width:100%;gap:4px;padding:0;background:none;border-radius:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subbar .ws-tabs::-webkit-scrollbar{display:none}
.subbar .ws-tabs a{position:relative;padding:9px 12px 11px;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:var(--fs-14,14px);font-weight:500;white-space:nowrap}
.subbar .ws-tabs a:hover{color:var(--fg);background:none}
.subbar .ws-tabs a[aria-current=page]{background:none;box-shadow:none;color:var(--fg)}
.subbar .ws-tabs a[aria-current=page]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--indigo,var(--accent))}
.subbar .ws-tabs .ct{display:inline-block;min-width:18px;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill,99px);background:var(--accent-soft);color:var(--accent-text,var(--accent));font-size:11px;font-weight:600;line-height:18px;text-align:center}
/* Second row (a page's own views, e.g. the forecast): a quiet pill switch under the tabs */
.subbar .seg:not(.ws-tabs){font-size:var(--fs-13,13px)}

/* ---------- Scope bar: whose deals first ---------- */
.gbar .seg[aria-label="Whose deals"] [aria-pressed=true]{color:var(--accent-text,var(--accent));font-weight:600}

/* ---------- Actions: one solid main action; AI actions tinted ---------- */
.rec-head .btn[href*="#/dossier/"],.rec-head [data-action="enrichAccount"],.btn[data-action="fpFind"],.btn[data-action="agBrief"],.ds-top .btn[data-action="dsPlan"]:not(.primary){background:var(--accent-soft);border-color:transparent;color:var(--accent-text,var(--accent))}
.rec-head .btn[href*="#/dossier/"]:hover,.rec-head [data-action="enrichAccount"]:hover,.btn[data-action="fpFind"]:hover,.btn[data-action="agBrief"]:hover{border-color:var(--accent);background:var(--accent-soft)}
.rec-head .row{gap:6px}
.rec-head .btn.ghost[data-action="deleteAccount"]{margin-left:4px}

/* ---------- Cards and lists: one rhythm ---------- */
.card>.ch{min-height:52px;align-items:center}
.card>.ch .sub{font-size:var(--fs-12,12px)}
.card>.ch a.sub:hover{color:var(--accent-text,var(--accent));text-decoration:none}
.g-main>.grid>.ag-home{margin-top:0!important}
.ao .empty{padding:18px 14px}
.ao .empty .illo{transform:scale(.8);margin:-6px auto -4px}
.ao .list li{padding-top:10px;padding-bottom:10px}
.ao .ap-chips{display:flex;flex-wrap:wrap;gap:6px}
.ds-ov p{font-size:var(--fs-14,14px);line-height:1.5}

/* ---------- Timeline alerts: same row as news, with an alert mark ---------- */
.tl-alerts .tl-n b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--warn);vertical-align:1px}

/* ---------- Find people sheet ---------- */
.fp .fp-list{margin:0}
.fp .fp-list li{gap:12px}
.fp .fp-list .t1{font-weight:600}

/* ---------- Small screens ---------- */
@media (max-width:760px){
  /* Bottom bar: the count sits on the icon's top-right corner instead of over it */
  .side nav .nav-i .ct{left:calc(50% + 6px);right:auto;top:0;margin:0;padding:0 5px;font-size:10px;line-height:15px}
  .subbar{margin:0 0 14px}
  .subbar .ws-tabs a{padding:8px 10px 10px;font-size:13.5px}
}

/* ---------- Deal page: summary first (next move, gate, weakest MEDDPICC leg); rarely used fields fold away ---------- */
.dl-sum{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin-bottom:14px}
.dl-sum>div,.dl-sum>a{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;color:inherit}
.dl-sum>a:hover{text-decoration:none;border-color:var(--accent)}
.dl-nm{border-left:3px solid var(--accent)!important}.dl-nm b{font-weight:600;font-size:14px}
.dl-k b{font-size:18px;color:var(--navy);line-height:1.2}
.dl-more>summary{cursor:pointer;font-size:12.5px;color:var(--accent);margin:10px 0 4px;list-style:none}.dl-more>summary::-webkit-details-marker{display:none}
.dl-more>summary::before{content:'+ '}.dl-more[open]>summary::before{content:'– '}
@media (max-width:760px){.dl-sum{grid-template-columns:1fr 1fr}.dl-nm{grid-column:1/-1}}
/* New account: what is already in the CRM */
.na-dup{margin:-2px 0 12px}.na-dup a{font-weight:600}.callout.na-dup .f.check{margin:8px 0 0}
/* Record pages: the page title already names the account or deal, so the card does not repeat it (phones already did this) */
.split.rec .rec-head .rec-title{display:none}