/* ══════════════════════════════════════════════════════════════════════
   Digital Hub V147 · Home, People, Apps, Settings, sign-in and shell
   Loaded last. Scoped tokens keep light and dark equal.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --h7-ink:#0f1f33;--h7-ink-2:#33475e;--h7-muted:#5d6e82;--h7-line:#dbe3ec;--h7-line-soft:#e8eef4;
  --h7-panel:#ffffff;--h7-soft:#f4f7fb;--h7-soft-2:#eef3f8;--h7-blue:#00549f;--h7-blue-ink:#00427d;--h7-blue-tint:#e7f0fa;
  --h7-green:#11795a;--h7-green-tint:#e3f4ec;--h7-amber:#8a5a00;--h7-amber-tint:#fdf0d6;--h7-red:#b3261e;--h7-red-tint:#fbe9e7;
  --h7-shadow:0 1px 2px rgba(15,31,51,.05),0 6px 18px rgba(15,31,51,.05);
}
html[data-theme="dark"]{
  --h7-ink:#e7eef6;--h7-ink-2:#c3d0de;--h7-muted:#93a5b9;--h7-line:#2a3d53;--h7-line-soft:#21334a;
  --h7-panel:#122236;--h7-soft:#0f1d2e;--h7-soft-2:#16283d;--h7-blue:#5aa2e6;--h7-blue-ink:#8cc0f0;--h7-blue-tint:rgba(90,162,230,.14);
  --h7-green:#5fd0a3;--h7-green-tint:rgba(95,208,163,.14);--h7-amber:#f6c26b;--h7-amber-tint:rgba(246,166,35,.15);--h7-red:#ff8a80;--h7-red-tint:rgba(255,138,128,.14);
  --h7-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
}

/* ---------- Shell: navigation keeps its natural height ---------- */
#hubSidebar .sidebar-nav{flex:0 0 auto!important;align-content:start!important;grid-auto-rows:min-content!important;grid-template-rows:none!important;gap:4px!important}
#hubSidebar .sidebar-nav .nav-link{height:auto!important;min-height:44px!important;max-height:none!important}
#hubSidebar .sidebar-nav .hub-management-label{margin:14px 0 4px!important}
#hubSidebar .sidebar-spacer{flex:1 1 auto!important}
html[data-theme="dark"] .request-indicator{background:var(--h7-blue-tint)!important;color:var(--h7-ink)!important;border-color:var(--h7-line)!important}
html[data-theme="dark"] .request-indicator span{color:var(--h7-ink)!important}
html[data-theme="dark"] .section-heading-clean h2{color:var(--h7-ink)!important}

/* ---------- Home ---------- */
.h147-home .page-intro h1{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.15!important;letter-spacing:-.02em}
.h147-home .page-intro p{font-size:15px!important;color:var(--h7-muted)!important}
#hubOverviewV147{margin:0 0 22px}
.h147-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.h147-sec-head h2{margin:0;font-size:15px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--h7-muted)}
.h147-sec-head a{font-size:14px;font-weight:650;color:var(--h7-blue);text-decoration:none}
.h147-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.h147-tile{appearance:none;display:grid;gap:3px;align-content:start;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--h7-line);background:var(--h7-panel);color:var(--h7-ink);font:inherit;cursor:pointer;text-decoration:none;box-shadow:var(--h7-shadow);transition:border-color .12s,transform .12s}
.h147-tile:hover{border-color:var(--h7-blue)}
.h147-tile:focus-visible{outline:2px solid var(--h7-blue);outline-offset:2px}
.h147-tile span{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--h7-muted)}
.h147-tile b{font-size:28px;font-weight:780;line-height:1.1;font-variant-numeric:tabular-nums}
.h147-tile small{font-size:13px;color:var(--h7-muted);line-height:1.35}
.h147-tile.attention{border-color:color-mix(in srgb,var(--h7-red) 45%,var(--h7-line));background:color-mix(in srgb,var(--h7-red-tint) 70%,var(--h7-panel))}
.h147-tile.attention b{color:var(--h7-red)}
.h147-tile.warn b{color:var(--h7-amber)}
#appCardsV147.h147-apps{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;gap:16px!important}
.h147-app{display:grid;gap:14px;align-content:start;padding:20px;border-radius:18px;border:1px solid var(--h7-line);background:var(--h7-panel);box-shadow:var(--h7-shadow);position:relative;overflow:hidden}
.h147-app::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--h7-blue)}
.h147-app.launcher-key-hiwilog::before{background:linear-gradient(90deg,#5b5bd6,#7c6cf0)}
.h147-app.is-waiting{opacity:.85}
.h147-app-top{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:start}
.h147-app-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--h7-soft-2)}
.h147-app-icon img{width:40px;height:40px}
.h147-app-copy h2{margin:0;font-size:21px;font-weight:750;color:var(--h7-ink)}
.h147-app-copy p{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--h7-muted)}
.h147-app-state{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.h147-app-state.ready{background:var(--h7-green-tint);color:var(--h7-green)}
.h147-app-state.waiting{background:var(--h7-amber-tint);color:var(--h7-amber)}
.h147-app-role{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--h7-soft)}
.h147-app-role span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--h7-muted)}
.h147-app-role b{font-size:14.5px;color:var(--h7-ink)}
.h147-app-links{display:flex;flex-wrap:wrap;gap:8px}
.h147-app-links a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--h7-line);color:var(--h7-ink-2);font-size:13.5px;font-weight:650;text-decoration:none;background:var(--h7-panel)}
.h147-app-links a:hover{border-color:var(--h7-blue);color:var(--h7-blue)}
.h147-app-foot{display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--h7-line-soft)}
.h147-open{display:inline-flex!important;align-items:center;gap:8px;height:42px!important;padding:0 18px!important;border-radius:12px!important;font-size:14.5px!important;text-decoration:none}
.h147-wait{font-size:13.5px;color:var(--h7-amber);font-weight:650}
#noApps.h147-empty{display:flex;gap:16px;align-items:flex-start;text-align:left;padding:22px 24px;border-radius:16px;border:1px dashed var(--h7-line);background:var(--h7-panel)}
#noApps.h147-empty[hidden]{display:none}
.h147-empty-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--h7-blue-tint);color:var(--h7-blue);font-size:22px}
#noApps.h147-empty strong{font-size:17px;color:var(--h7-ink)}
#noApps.h147-empty p{margin:4px 0 12px;color:var(--h7-muted);font-size:14.5px;line-height:1.5;max-width:62ch}
#noApps.h147-empty ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
#noApps.h147-empty li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--h7-ink-2)}
#noApps.h147-empty li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--h7-soft-2);color:var(--h7-muted)}
#noApps.h147-empty li:first-child b{background:var(--h7-green-tint);color:var(--h7-green)}
@media (max-width:1100px){.h147-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .h147-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.h147-tile{padding:12px}.h147-tile b{font-size:23px}
  #appCardsV147.h147-apps{grid-template-columns:minmax(0,1fr)!important}
  .h147-app{padding:16px}.h147-app-top{grid-template-columns:44px minmax(0,1fr)}.h147-app-state{grid-column:2;justify-self:start}
  .h147-app-icon{width:44px;height:44px}.h147-app-icon img{width:34px;height:34px}
  .h147-open{width:100%;justify-content:center}
  #noApps.h147-empty{flex-direction:column}
}

/* ---------- People ---------- */
.p147-toolbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px}
.p147-chips{display:flex;flex-wrap:wrap;gap:6px}
.p147-fchip{appearance:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--h7-line);background:var(--h7-panel);color:var(--h7-ink-2);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.p147-fchip b{font-size:12px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--h7-soft-2);color:var(--h7-muted)}
.p147-fchip[aria-pressed="true"]{background:var(--h7-blue-tint);border-color:var(--h7-blue);color:var(--h7-blue-ink)}
.p147-fchip[aria-pressed="true"] b{background:var(--h7-blue);color:#fff}
html[data-theme="dark"] .p147-fchip[aria-pressed="true"] b{color:#0b1726}
.p147-fchip:focus-visible{outline:2px solid var(--h7-blue);outline-offset:2px}
.p147-appfilter{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;font-weight:650;color:var(--h7-muted)}
.p147-appfilter select{height:34px;border-radius:10px;border:1px solid var(--h7-line);background:var(--h7-panel);color:var(--h7-ink);font:inherit;font-size:13.5px;padding:0 10px}
.p147-count{font-size:13px;color:var(--h7-muted);font-variant-numeric:tabular-nums}
.p147-head,.p147-row{display:grid;grid-template-columns:40px minmax(200px,1.2fr) minmax(220px,1.6fr) 120px 110px 132px;align-items:center;gap:14px}
.p147-head{padding:0 16px 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--h7-muted)}
.p147-list{display:grid;gap:6px}
.p147-row{padding:11px 16px;border-radius:14px;border:1px solid var(--h7-line);background:var(--h7-panel);color:var(--h7-ink)}
.p147-row.review{border-color:color-mix(in srgb,var(--h7-blue) 45%,var(--h7-line));background:color-mix(in srgb,var(--h7-blue-tint) 55%,var(--h7-panel))}
.p147-row.st-suspended{background:var(--h7-soft)}
.p147-row.st-suspended .p147-who strong{color:var(--h7-muted)}
.p147-av{width:40px!important;height:40px!important;font-size:13px!important}
.p147-who{display:grid;gap:1px;min-width:0}
.p147-who strong{font-size:14.5px;font-weight:700;color:var(--h7-ink)}
.p147-who span{font-size:13px;color:var(--h7-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p147-access{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.p147-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 6px;border-radius:8px;background:var(--h7-soft-2);font-size:12.5px;color:var(--h7-ink-2)}
.p147-chip img{width:16px;height:16px}
.p147-chip b{font-weight:700;color:var(--h7-ink)}
.p147-chip.hub{padding:0 9px;background:var(--h7-blue-tint);color:var(--h7-blue-ink);font-weight:700}
.p147-none{font-size:13px;color:var(--h7-muted);font-style:italic}
.p147-proj{flex-basis:100%;font-size:12px;color:var(--h7-muted)}
.p147-seen{font-size:13px;color:var(--h7-ink-2)}
.p147-seen span{display:none}
.p147-status .account-status{white-space:nowrap}
.p147-manage{justify-self:end;height:36px!important;padding:0 14px!important}
.p147-emptylist{display:grid;gap:2px;padding:18px;text-align:center}
#reviewSection .p147-list{margin-top:2px}
html[data-theme="dark"] #reviewCards .review-row,html[data-theme="dark"] .person-row.review-row{background:var(--h7-panel)!important;color:var(--h7-ink)!important}
@media (max-width:1100px){
  .p147-head{display:none}
  .p147-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av who st" "av acc acc" "av seen btn";row-gap:6px}
  .p147-av{grid-area:av;align-self:start}.p147-who{grid-area:who}.p147-access{grid-area:acc}.p147-seen{grid-area:seen}.p147-status{grid-area:st;justify-self:end}.p147-manage{grid-area:btn}
  .p147-seen span{display:inline;margin-right:5px;color:var(--h7-muted)}
}
@media (max-width:640px){
  .p147-appfilter{margin-left:0}
  .p147-row{padding:11px 12px;column-gap:10px}
  .p147-av{width:34px!important;height:34px!important}
  .p147-row{grid-template-columns:34px minmax(0,1fr) auto}
}

/* ---------- Apps ---------- */
.r147-total{margin:-4px 0 0;font-size:13.5px;color:var(--h7-muted)}
.r147-total b{color:var(--h7-ink);font-size:15px}
.role-catalog-row{position:relative}
.r147-n{position:absolute;right:0;top:8px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--h7-blue-ink);background:var(--h7-blue-tint);padding:2px 8px;border-radius:999px}
.role-catalog-row>span,.role-catalog-row>small{padding-right:96px}

/* ---------- Windows: readable in dark, actions always reachable ---------- */
.modal-backdrop .modal.access-modal{max-height:calc(100vh - 48px);display:flex!important;flex-direction:column;overflow:hidden}
.modal-backdrop .modal.access-modal>*:not(.modal-head):not(.modal-actions){flex:none}
.modal-backdrop .modal.access-modal{overflow-y:auto}
.modal-backdrop .modal.access-modal .modal-actions{position:sticky;bottom:0;z-index:3;background:var(--h7-panel);border-top:1px solid var(--h7-line);margin-top:auto}

/* ---------- Sign-in ---------- */
.login-story .login-flow{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:10px 12px!important;align-items:start}
.login-story .login-flow>div{padding:0!important;border:0!important;background:none!important;min-height:0!important}
.login-story .login-flow>div strong{display:block;font-size:15px}
.login-story .login-flow>div small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45}
#loginPanelTitle{font-size:clamp(26px,2.4vw,32px)!important;line-height:1.15!important}
@media (max-width:640px){
  .hub-auth-steps em{display:inline!important;font-size:12px!important}
  .login-shell{margin-top:12px!important}
}

/* ---------- Pending ---------- */
.pd147-steps{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:10px;text-align:left}
.pd147-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.pd147-steps b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--h7-soft-2);color:var(--h7-muted)}
.pd147-steps li.done b{background:var(--h7-green-tint);color:var(--h7-green)}
.pd147-steps li.now b{background:var(--h7-blue);color:#fff}
html[data-theme="dark"] .pd147-steps li.now b{color:#0b1726}
.pd147-steps strong{display:block;font-size:14.5px;color:var(--h7-ink)}
.pd147-steps small{display:block;font-size:13px;color:var(--h7-muted);line-height:1.4}
.pd147-check{margin:14px 8px 0 0}
#pendingView .status-symbol{width:52px;height:52px;margin:6px auto 0;border-radius:50%;display:grid;place-items:center;background:var(--h7-green-tint);color:var(--h7-green);font-size:24px}

/* ---------- Dark mode: the institute logo stays legible ---------- */
html[data-theme="dark"] .brand-logo-full,html[data-theme="dark"] .hub-member-topbar-logo,html[data-theme="dark"] #pendingView .pending-card>img,html[data-theme="dark"] #bootView img{content:url("/shared/imb-rwth-logo-dark.svg")}
.h147-home #pendingCallout{display:none!important}
@media (max-width:640px){
  .people-section .section-heading-clean{grid-template-columns:minmax(0,1fr) auto!important}
  .people-section .section-heading-clean .count-badge{width:auto!important;min-width:28px;justify-self:end;grid-column:2;grid-row:1}
  .p147-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;max-width:100vw}
  .p147-chips::-webkit-scrollbar{display:none}
  .p147-fchip{flex:none}
}
html body .login-story .login-flow>div{background:transparent!important;box-shadow:none!important;padding:2px 0 0!important}
html body #pendingView .status-symbol{width:52px!important;height:52px!important;margin:6px auto 0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--h7-green-tint)!important;color:var(--h7-green)!important;font-size:24px!important}
.r147-total{margin:6px 0 0!important}
#hubSidebar .sidebar-nav>.nav-link,#hubSidebar .sidebar-nav>*{flex:0 0 auto!important}
#appView #hubSidebar .sidebar-nav{display:grid!important;height:auto!important;max-height:none!important}
@media (max-width:640px){html body .login-story .login-flow{display:none!important}}
html[data-theme="dark"] .login-story>img{content:url("/shared/imb-rwth-logo-dark.svg")}
html body #appView #hubSidebar nav.sidebar-nav{grid-template-rows:none!important;grid-auto-rows:min-content!important;height:auto!important;flex:0 0 auto!important;align-content:start!important}
html body #appView #hubSidebar nav.sidebar-nav>.nav-link{height:auto!important;min-height:44px!important}
/* V147 renders beside the accepted controller's containers */
body.hub-v147 #appCards{display:none!important}
body.hub-v147-people #reviewCards,body.hub-v147-people #peopleCards{display:none!important}
#appCardsV147[hidden]{display:none!important}

/* V148: secondary text meets WCAG AA (4.5:1) on white and on the page tint */
html:not([data-theme="dark"]){--hub121-muted:#56687a!important;--hub122-muted:#56687a!important;--ia-muted:#56687a!important}
/* V148: Hub Settings never grows wider than the window */
#settings .settings-stack{grid-template-columns:minmax(0,1fr)!important}
#settings .settings-stack>*{min-width:0!important;max-width:100%!important}
@media (max-width:1180px){
  #settings .workflow-row{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:10px 12px!important}
  #settings .workflow-row .workflow-arrow{display:none!important}
  #settings .governance-head>div,#settings .governance-action{min-width:0!important}
}
#settings .ai-connection-panel,#settings .governance-panel{grid-template-columns:minmax(0,1fr)!important}
#settings .ai-connection-panel>*,#settings .governance-panel>*,#settings .governance-head>*,#settings .governance-action>*{min-width:0!important}
@media (max-width:900px){#settings .ai-connection-form{grid-template-columns:minmax(0,1fr)!important}#settings .ai-connection-foot{flex-direction:column;align-items:stretch!important}}
/* V148: every interactive element shows where keyboard focus is */
#appView a:focus-visible,#appView button:focus-visible,#appView select:focus-visible,#appView input:focus-visible,#hubMobileNav a:focus-visible,.modal-backdrop :focus-visible,#loginView :focus-visible,#pendingView :focus-visible{outline:2px solid var(--h7-blue)!important;outline-offset:2px!important}
/* V148: sign-in error messages stay readable in dark mode */
html[data-theme="dark"] .verification-error{color:#ffb4ab!important;background:rgba(255,138,128,.12)!important;border-color:rgba(255,138,128,.35)!important}
html body #appView #hubSidebar nav.sidebar-nav>.nav-link:focus-visible{outline:2px solid var(--h7-blue)!important;outline-offset:2px!important;box-shadow:none!important}
.h148-notice{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--h7-amber) 40%,var(--h7-line));background:var(--h7-amber-tint);color:var(--h7-ink)}
.h148-notice>span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--h7-amber);color:#fff;font-weight:800}
html[data-theme="dark"] .h148-notice>span{color:#1a1200}
.h148-notice strong{font-size:15px}.h148-notice p{margin:2px 0 0;font-size:14px;color:var(--h7-ink-2)}
.h148-notice>div{flex:1}
.h148-notice button{appearance:none;border:0;background:none;font-size:20px;line-height:1;color:var(--h7-muted);cursor:pointer;padding:2px 6px}