/* CPeople light theme; darker header grey keeps white text accessible on the web. */
:root { color-scheme:light; --ink:#181818; --body:#454545; --muted:#666; --line:#d4d4d4; --brand:#c72520; --bordeaux:#a83243; --background:#f5f5f5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-text-size-adjust:100%; }
a,button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid var(--bordeaux); outline-offset:4px; }
.shell { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.app-header { background:#737373; padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left)); box-shadow:0 2px 5px #0002; }
.header-inner { display:flex; align-items:center; gap:16px; min-height:64px; max-width:1200px; margin:auto; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:20px; font-weight:700; }
.brand small { margin-left:8px; font-size:12px; font-weight:400; }
.header-logout { margin-left:auto; }
.header-logout .link-button { color:#fff; padding:12px; }
main { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:64px; align-items:center; width:100%; max-width:1248px; margin:auto; padding:64px 24px; }
main.authenticated { display:block; flex:1; margin:0 auto; padding-top:32px; }
.intro { padding:24px 0; }
.eyebrow { color:var(--bordeaux); font-size:14px; font-weight:700; }
h1 { margin:18px 0 0; font-size:clamp(36px,4vw,56px); line-height:1.08; letter-spacing:-.035em; }
.intro p { max-width:460px; color:var(--body); font-size:18px; line-height:1.6; }
.card { min-width:0; padding:32px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.authenticated .card { padding:0; border:0; border-radius:0; background:transparent; }
h2,.page-title { margin:0; font-size:24px; line-height:1.25; letter-spacing:0; }
.card > p { margin:10px 0 28px; color:var(--muted); line-height:1.55; }
.envs,.relationships,.process-list { display:grid; gap:14px; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.catalog-item { display:flex; align-items:center; gap:20px; min-width:0; padding:20px; border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none; background:#fff; }
.module-icon { display:flex; align-items:center; justify-content:center; flex:0 0 60px; height:60px; border:1px solid #999; border-radius:20px; background:#f8f8f8; }
.module-icon img { width:46px; height:46px; }
.module-copy { display:grid; gap:7px; min-width:0; }
.module-copy strong { color:var(--ink); font-size:18px; }
.module-copy > span { color:var(--body); font-size:14px; line-height:1.5; }
.chevron { margin-left:auto; color:var(--muted); font-size:28px; }
.button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:60px; padding:16px 20px; border:0; border-radius:14px; background:var(--bordeaux); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; }
.button.test { background:#b95a68; }
.pill { font-size:12px; font-weight:400; }
.relationship,.process { display:grid; width:100%; min-width:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.relationship { gap:8px; min-height:76px; }
.relationship strong { font-size:16px; }
.relationship span { color:var(--muted); font-size:13px; }
.process { grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:24px; }
.process-copy { display:grid; min-width:0; gap:9px; }
.process-title { font-size:18px; font-weight:700; }
.process-description { color:var(--body); font-size:14px; line-height:1.5; }
.process-meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:12px; }
.process-progress { display:grid; gap:10px; color:var(--bordeaux); font-size:18px; font-weight:700; text-align:right; }
progress { width:100%; height:6px; border:0; border-radius:9px; overflow:hidden; background:#e8e8e8; accent-color:var(--bordeaux); }
progress::-webkit-progress-bar { background:#e8e8e8; border-radius:9px; }
progress::-webkit-progress-value { background:var(--bordeaux); border-radius:9px; }
progress::-moz-progress-bar { background:var(--bordeaux); border-radius:9px; }
.notice { margin-bottom:20px; padding:16px; border:1px solid #e1b3b3; border-radius:12px; background:#ffe1e1; color:#8d2420; line-height:1.5; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.context { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.environment { padding:7px 10px; border-radius:6px; background:#e8e8e8; color:var(--body); font-size:12px; line-height:1.4; }
.environment:first-child { background:#f0e0e3; color:#862838; font-weight:700; }
.link-button,.page-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 4px; border:0; background:none; color:var(--bordeaux); font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:12px; border-top:1px solid var(--line); }
.pagination > span { color:var(--muted); font-size:12px; text-align:center; }
.empty { padding:40px 20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; background:#fff; }
.app-footer { display:grid; justify-items:center; gap:10px; margin-top:auto; padding:24px 20px max(24px,env(safe-area-inset-bottom)); color:var(--muted); font-size:11px; text-align:center; }
.app-footer img { width:190px; height:50px; object-fit:contain; }
.process-title,.process-description,.module-copy,.environment,.relationship,.notice { overflow-wrap:anywhere; }
.skip-link { position:absolute; left:16px; top:-100px; z-index:5; padding:12px; background:#fff; color:var(--bordeaux); }
.skip-link:focus { top:8px; }
@media (hover:hover) { .catalog-item:hover,.relationship:hover,.process:hover { border-color:#999; background:#fafafa; }.button:hover { filter:brightness(.94); }.link-button:hover,.page-link:hover { text-decoration:underline; } }
@media (max-width:760px) {
    .app-header { padding-right:max(16px,env(safe-area-inset-right)); padding-left:max(16px,env(safe-area-inset-left)); }
    .header-inner { min-height:54px; }.brand { font-size:18px; }
    main { grid-template-columns:minmax(0,1fr); gap:24px; padding:32px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left)); }
    main.authenticated { padding-top:20px; }.intro { padding:0; }.intro p { font-size:16px; margin-bottom:0; }.card { padding:24px; }
    .catalog-grid { grid-template-columns:minmax(0,1fr); gap:16px; }.catalog-item { padding:12px 0; border:0; border-radius:0; background:transparent; gap:20px; }
    .toolbar { margin-bottom:20px; }.page-title { font-size:22px; }.card > p { margin-bottom:22px; }
    .process { padding:16px; grid-template-columns:minmax(0,1fr); gap:16px; }.process-progress { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; text-align:left; font-size:16px; }
    .process-title { font-size:17px; }.pagination { gap:8px; }.page-link { font-size:13px; }
}