/* =========================================================================
   Top bar (app-shell.js topNav), 761 px and wider: the left sidebar is gone; the five destinations sit in a navy bar
   with their sections in dropdowns, then search, alerts, settings and you. Phones (760 px and below) keep the bottom
   tab bar from ux.css. Loaded last.
   ========================================================================= */
.tnav{display:none}
@media (min-width:761px){
  .shell,.shell.mini{grid-template-columns:minmax(0,1fr)}
  .shell>.side{display:none}
  .tnav{display:block;position:sticky;top:0;z-index:40;background:var(--navy);color:var(--on-navy);box-shadow:0 1px 0 rgba(2,30,87,.5),0 8px 24px rgba(2,30,87,.10)}
  .phead,.wrap{margin-inline:auto}
}
.tn-in{max-width:1520px;margin:0 auto;height:56px;display:flex;align-items:center;gap:4px;padding:0 32px}
.tn-brand{display:flex;align-items:center;gap:10px;color:var(--on-navy);margin-right:20px;flex:none}
.tn-brand:hover{text-decoration:none}
.tn-brand svg{height:17px;width:auto;transform:translateY(-4px)}   /* the wordmark sits on its baseline: lift it onto the text baseline of the bar */
.tn-brand span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);font-weight:600;padding-left:10px;border-left:1px solid rgba(194,211,255,.22);line-height:18px;transform:translateY(1px)}

/* Destinations */
.tn-nav{display:flex;align-items:stretch;align-self:stretch;gap:2px}
.tn-i{position:relative;display:flex;align-items:center}
.tn-nav>.tn-i{align-self:stretch}
.tn-l{display:flex;align-items:center;gap:7px;padding:0 2px 0 12px;color:var(--on-navy-muted);font-weight:500;font-size:14px;white-space:nowrap;transition:color .15s}
.tn-nav .tn-l{align-self:stretch}
.tn-l:hover,.tn-i:hover>.tn-l,.tn-l[aria-current=page]{color:#fff;text-decoration:none}
.tn-i.cur::after{content:"";position:absolute;left:10px;right:6px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--signal)}
.tn-l .ct{font-size:11px;line-height:17px;padding:0 6px;border-radius:99px;background:rgba(245,255,86,.16);color:var(--signal);font-weight:600}
.tn-c{border:0;background:none;color:var(--on-navy-muted);padding:5px;margin-right:4px;border-radius:6px;display:grid;place-items:center;cursor:pointer}
.tn-c svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--mo-ease,ease)}
.tn-c:hover{color:#fff;background:rgba(255,255,255,.08)}
.tn-i:hover>.tn-c svg,.tn-i.open>.tn-c svg{transform:rotate(180deg)}
.tn-i:not(.hush):hover>.tn-c{color:#fff}

/* Menus: open on hover after a short pause, on the caret (touch) and from the keyboard */
.tn-m{position:absolute;top:calc(100% - 6px);left:2px;min-width:228px;background:var(--surface);color:var(--fg);border-radius:12px;padding:6px;display:grid;gap:1px;z-index:41;
  box-shadow:0 20px 50px rgba(2,30,87,.22),0 2px 8px rgba(2,30,87,.08),0 0 0 .5px rgba(2,30,87,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;
  transition:opacity .12s ease,transform .16s var(--mo-ease,ease),visibility 0s linear .16s}
.tn-i:not(.hush):hover>.tn-m,.tn-i.open>.tn-m,.tn-i:has(:focus-visible)>.tn-m{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s ease .1s,transform .22s var(--mo-ease,ease) .1s,visibility 0s linear .1s}
.tn-i.open>.tn-m,.tn-i:has(:focus-visible)>.tn-m{transition-delay:0s}
.tn-m::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.tn-m a,.tn-m button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--fg);font:inherit;font-size:13.5px;text-align:left;white-space:nowrap;cursor:pointer}
.tn-m a:hover,.tn-m button:hover,.tn-m a:focus-visible,.tn-m button:focus-visible{background:var(--accent-soft,#EEF1FF);text-decoration:none;outline:none}
.tn-m a[aria-current=page]{color:var(--accent);font-weight:600}
.tn-m a[aria-current=page]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:auto}
.tn-m .ct{margin-left:auto;font-size:11px;line-height:17px;padding:0 7px;border-radius:99px;background:var(--warn-bg);color:var(--warn);font-weight:600}
.tn-m a[aria-current=page] .ct+span{display:none}
.tn-m svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.tn-sep{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 10px 4px;margin-top:4px;border-top:1px solid var(--line)}
.tn-mr{left:auto;right:0;transform-origin:top right}
.tn-who{display:grid;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:13.5px}
.tn-who span{font-size:12px;color:var(--muted)}
.tn-i.hush>.tn-m{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Search, alerts, settings, you */
.tn-find{margin-left:auto;display:flex;align-items:center;gap:9px;width:min(340px,28vw);min-width:180px;padding:7px 8px 7px 14px;border-radius:999px;border:1px solid rgba(194,211,255,.2);background:rgba(255,255,255,.07);color:var(--on-navy-muted);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tn-find:hover{background:rgba(255,255,255,.12);border-color:rgba(194,211,255,.38);color:#fff}
.tn-find svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tn-find kbd{margin-left:auto;font:inherit;font-size:11px;border:1px solid rgba(194,211,255,.28);border-radius:999px;padding:1px 8px}
.tn-r{display:flex;align-items:center;gap:2px;margin-left:10px}
.tn-b{position:relative;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--on-navy-muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.tn-b:hover,.tn-b.on{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.tn-b svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tn-b .ct{position:absolute;top:3px;right:2px;min-width:15px;padding:0 4px;border-radius:99px;background:var(--signal);color:var(--navy);font-size:10px;font-weight:700;line-height:15px;text-align:center}
.tn-av{width:32px;height:32px;margin-left:6px;border:0;border-radius:50%;background:var(--peri);color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.12);transition:box-shadow .15s}
.tn-av:hover,.tn-i.open>.tn-av{box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.tnav :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:1180px){.tn-find span,.tn-find kbd{display:none}.tn-find{width:auto;min-width:0;padding:9px}.tn-brand span{display:none}.tn-in{padding:0 20px}}
@media (max-width:900px){.tn-l{font-size:13.5px;padding-left:9px}.tn-brand{margin-right:8px}}

/* The star next to a record's title: pinned records open from Ctrl K */
.h1row{display:flex;align-items:center;gap:6px;min-width:0}
.pin-b{flex:none;width:34px;height:34px;margin-top:4px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,transform .2s var(--mo-spring,ease)}
.pin-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.pin-b:hover{background:var(--stone,#F3F0EF);color:var(--accent)}
.pin-b[aria-pressed=true]{color:var(--accent)}
.pin-b[aria-pressed=true] svg{fill:currentColor}
.pin-b:active{transform:scale(.88)}

/* People avatars (people.js): under a real photo the initials hide (a photo with see-through edges showed them); LinkedIn's
   generic "no photo" silhouette (static.licdn.com) is never drawn, so the initials stay (r21b also stops saving it) */
.pe-av:has(> img.pe-ph:not([src*="static.licdn.com"])){color:transparent}
.pe-av>img.pe-ph[src*="static.licdn.com"]{display:none}

/* The section tabs row: the dropdowns replace it from 761 px up (phones keep it, their bottom bar has no menus).
   A second row of its own (the forecast views) stays; an emptied row takes no space. */
@media (min-width:761px){
  .subbar>.ws-tabs{display:none}
  .subbar:not(:has(>:not(.ws-tabs))){display:none}
}

/* The scope bar's segments (whose deals, Tieto line, country) scroll sideways on a phone instead of widening the page */
@media (max-width:760px){.gbar{min-width:0;max-width:100%}.gbar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}.gbar .seg::-webkit-scrollbar{display:none}.gbar .fx{flex:1 1 140px;min-width:0;max-width:100%}.gbar .fx-in{min-width:0;width:100%}}