/* ══════════════════════════════════════════════════════════════════════
   ddn.laeh.ai — the portal to every DDN app.
   Tokens lifted from ddn-web (apps/main/src/styles/themes.css) so this
   page and the corporate site speak the same language.
   Theme follows the device: light by default, DDN deep-blue in the dark.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg-primary:#F8F7F7; --bg-secondary:#EEEDEB;
  --bg-card:rgba(255,255,255,.85); --bg-card-hover:#fff;
  --text-primary:#201E1E; --text-secondary:#4A4545;
  --text-tertiary:#6B6565; --text-muted:#8A8484;
  --border-subtle:rgba(0,0,0,.06); --border-default:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.16);
  --accent:#E0242F; --accent-hover:#C41A24; --accent-subtle:rgba(224,36,47,.06);
  --on-accent:#fff;
  --shadow-sm:0 2px 6px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.05), 0 16px 32px rgba(0,0,0,.07);
  --shadow-lg:0 8px 20px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.09);
  --mesh:
    radial-gradient(circle at 10% 20%, rgba(237,39,56,.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(255,118,0,.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(55,73,103,.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(254,198,0,.08) 0%, transparent 35%);
  --logo:url("assets/ddn-logo-light.png");
  --glass:rgba(248,247,247,.72);
  color-scheme:light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:#374967; --bg-secondary:#32415A;
    --bg-card:rgba(255,255,255,.07); --bg-card-hover:rgba(255,255,255,.11);
    --text-primary:#FFFFFF; --text-secondary:#D1D9E6;
    --text-tertiary:#A8B9D1; --text-muted:#93ADC8;
    --border-subtle:rgba(255,255,255,.12); --border-default:rgba(255,255,255,.20);
    --border-strong:rgba(255,255,255,.30);
    --accent:#FF7600; --accent-hover:#E56800; --accent-subtle:rgba(255,118,0,.10);
    --on-accent:#fff;
    --shadow-sm:0 2px 10px rgba(0,0,0,.20), inset 0 1px 1px rgba(255,255,255,.10);
    --shadow-md:0 8px 24px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.10);
    --shadow-lg:0 16px 48px rgba(0,0,0,.30), inset 0 1px 1px rgba(255,255,255,.10);
    --mesh:
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(237,39,56,.10) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 20% 20%, rgba(55,73,103,.20) 0%, transparent 45%),
      radial-gradient(ellipse 40% 30% at 80% 25%, rgba(255,118,0,.08) 0%, transparent 35%);
    --logo:url("assets/ddn-logo-dark.png");
    --glass:rgba(55,73,103,.72);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;background:var(--bg-primary)}
body{
  margin:0; min-height:100dvh; background:var(--bg-primary);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text-primary); line-height:1.5; overflow-x:hidden;
}
body::before{ /* the DDN corona — fixed, never scrolls, never intercepts a click */
  content:""; position:fixed; inset:0; background:var(--mesh);
  pointer-events:none; z-index:0;
}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 96px}

/* ── header ───────────────────────────────────────────────────────── */
header{padding:44px 0 0}
.brandline{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{width:104px; height:36px; background:var(--logo) left center/contain no-repeat; flex:0 0 auto}
.crumb{margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600}

/* ── filter bar ───────────────────────────────────────────────────── */
.filters{
  /* deliberately NOT sticky: as a translucent floating panel it half-hid the
     first rows and let text ghost through it. It scrolls with the page. */
  margin:18px 0 0; padding:0 0 14px;
  border-bottom:1px solid var(--border-subtle);
}
.frow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.frow + .frow{margin-top:8px}
.flabel{flex:0 0 auto; width:66px; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-muted); font-weight:700}
.pills{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto; min-width:0}

.pill{
  /* same type scale and padding as .tag on the list rows, so the filter row
     and the row tags read as one system rather than two */
  appearance:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:.02em;
  color:var(--text-secondary); background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:9999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px;
  transition:background .18s ease, border-color .18s ease, color .18s ease,
             box-shadow .18s ease;
}
.pill:hover{border-color:var(--accent); color:var(--accent)}
.pill:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pill .n{font-size:10px; font-variant-numeric:tabular-nums; color:var(--text-muted);
  transition:color .18s ease}
.pill[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.pill[aria-pressed="true"] .n{color:rgba(255,255,255,.72)}
.pill[data-empty="1"]{opacity:.34; pointer-events:none}

.fmeta{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}
.count{font-size:13.5px; color:var(--text-tertiary); font-variant-numeric:tabular-nums}
.count b{color:var(--text-primary); font-weight:650}
.clear{
  appearance:none; background:none; border:0; font:inherit; font-size:13.5px;
  color:var(--accent); cursor:pointer; padding:2px 0; font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .18s ease;
}
.clear:hover{border-bottom-color:var(--accent)}
.clear[hidden]{display:none}

/* ── grid ─────────────────────────────────────────────────────────── */
.grid{
  display:grid; gap:16px; margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.card{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:22px 22px 18px; border-radius:16px; text-decoration:none; color:inherit;
  background:var(--bg-card); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-sm); overflow:hidden; isolation:isolate;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease,
             background .22s ease, border-color .22s ease;
  animation:rise .42s cubic-bezier(.2,.7,.3,1) both;
}
.card::before{ /* accent hairline that draws in on hover */
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);
  background:var(--bg-card-hover); border-color:var(--border-default)}
.card:hover::before{transform:scaleX(1)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.ctop{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.ctitle{font-size:17.5px; font-weight:650; letter-spacing:-.012em; line-height:1.25}
.go{flex:0 0 auto; font-size:15px; color:var(--text-muted);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), color .22s ease}
.card:hover .go{transform:translate(3px,-3px); color:var(--accent)}
.cdesc{margin:0; font-size:14px; line-height:1.5; color:var(--text-secondary); flex:1 1 auto}
.cslug{font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
  font-size:11.5px; color:var(--text-muted)}
.ctags{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.tag{
  font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:3px 9px;
  border-radius:9999px; border:1px solid var(--border-subtle);
  background:var(--accent-subtle); color:var(--text-tertiary); cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.tag:hover{color:var(--accent); border-color:var(--accent)}
.tag.on{color:var(--accent); border-color:var(--accent)}
.card.repo{background:transparent; border-style:dashed}
.card.repo .ctitle{color:var(--text-secondary)}

/* ── empty state ──────────────────────────────────────────────────── */
.empty{
  grid-column:1/-1; text-align:center; padding:64px 20px; color:var(--text-tertiary);
  animation:rise .32s cubic-bezier(.2,.7,.3,1) both;
}
.empty p{margin:0 0 14px; font-size:16px}

footer{margin-top:56px; padding-top:22px; border-top:1px solid var(--border-subtle);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-muted)}
footer a{color:var(--text-tertiary); text-decoration:none; border-bottom:1px solid transparent}
footer a:hover{color:var(--accent); border-bottom-color:var(--accent)}

@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media (max-width:620px){
  .wrap{padding:0 16px 72px}
  header{padding:26px 0 0}
  .filters{margin:18px -16px 0; padding:14px 16px 13px}
  .flabel{width:100%; margin-bottom:2px}
  .frow{gap:8px}
  .grid{grid-template-columns:1fr; gap:12px}
  .card{padding:18px 18px 16px}
}

/* ── respect reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-delay:0ms!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .card:hover{transform:none}
}

/* A live app that also has source worth reading — small, secondary, never
   competing with the card's own link. */
.srclink{
  align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted); cursor:pointer;
  border-bottom:1px solid var(--border-default); padding-bottom:1px; margin-top:-2px;
  transition:color .16s ease, border-color .16s ease;
}
.srclink:hover{color:var(--accent); border-bottom-color:var(--accent)}
.srclink:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── view toggle ──────────────────────────────────────────────────── */
.views{margin-left:auto; display:inline-flex; gap:2px; padding:2px;
  background:var(--bg-card); border:1px solid var(--border-default); border-radius:9999px}
.vbtn{
  appearance:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border:0; border-radius:9999px; background:transparent; color:var(--text-tertiary);
  transition:background .16s ease, color .16s ease;
}
.vbtn svg{fill:currentColor; opacity:.85}
.vbtn:hover{color:var(--text-primary)}
.vbtn[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.vbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── LIST VIEW ────────────────────────────────────────────────────────
   Same cards, re-laid-out as aligned rows. Columns line up across every
   row — that alignment is what makes a list scannable rather than just
   narrow cards. */
.grid.list{grid-template-columns:1fr; gap:0; margin-top:0; border-top:0}
.grid.list .card{
  display:grid; align-items:center; gap:4px 18px;
  grid-template-columns:minmax(150px,224px) minmax(0,1fr) auto auto;
  grid-template-areas:"title desc tags go";
  padding:14px 12px; border:0; border-radius:10px;
  border-bottom:1px solid var(--border-subtle);
  background:transparent; box-shadow:none;
}
.grid.list .card::before{display:none}
.grid.list .card:hover{transform:none; box-shadow:none; background:var(--bg-card)}
.grid.list .ctop{grid-area:title; display:block; min-width:0}
.grid.list .ctitle{font-size:15px; display:block; overflow-wrap:anywhere}
.grid.list .ctop .go{opacity:0; transition:opacity .16s ease, transform .16s ease}
.grid.list .card:hover .ctop .go{opacity:1}
.grid.list .cdesc{grid-area:desc; font-size:13.5px; color:var(--text-tertiary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grid.list .cslug{display:none}
.grid.list .srclink{grid-area:go; margin:0 6px 0 0; border:0; font-size:10px}
.grid.list .ctags{grid-area:tags; margin:0; flex-wrap:nowrap; justify-content:flex-end}
.grid.list .tag{font-size:10.5px; padding:2px 8px; white-space:nowrap}
.grid.list .card.repo{border-style:none none solid none; opacity:.82}
.grid.list .empty{border-bottom:1px solid var(--border-subtle)}

/* list rows on narrow screens: stack, and let the description breathe */
@media (max-width:760px){
  .grid.list .card{
    grid-template-columns:1fr;
    grid-template-areas:"title" "desc" "tags";
    gap:5px 0; padding:14px 8px;
  }
  /* the arrow is a child of .ctop, so pair them here rather than trying to
     place it in its own grid area */
  .grid.list .ctop{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .grid.list .ctop .go{opacity:1}
  .grid.list .cdesc{white-space:normal}
  .grid.list .ctags{justify-content:flex-start; flex-wrap:wrap}
  .grid.list .srclink{grid-area:tags; justify-self:start; margin-top:2px}
}
@media (max-width:620px){
  .views{margin-left:0}
  /* visually matched to the row tags, but still thumb-sized on touch */
  .pill{font-size:12px; padding:7px 12px}
  .pill .n{font-size:10.5px}
}

/* ── repo name as the primary identifier ──────────────────────────────
   These are referred to by repo name in conversation, so that is what
   leads. The title underneath is the app's own <title>. */
.crepo{font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
  font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary)}
.card.repo .crepo{color:var(--text-secondary)}
.grid:not(.list) .ctitle{display:block; font-size:14px; font-weight:500;
  color:var(--text-secondary); line-height:1.3; margin-top:-3px}

/* list rows: repo name | app's own title | tags */
.grid.list .crepo{font-size:12.5px; display:block; overflow-wrap:anywhere}
.grid.list .ctitle{grid-area:desc; font-size:13.5px; font-weight:500;
  color:var(--text-secondary); margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grid.list .cdesc{display:none}
.grid.list .card.repo .crepo::after{content:""}
@media (max-width:760px){
  .grid.list .ctitle{white-space:normal}
}