/* Dimau Premium Shell v1 — canonical: dimau-platform-standard/premium-shell/.
   Copy byte-for-byte into an app's web root. App adapters live in the app's own CSS.
   Light sky-blue brand theme (Ops standing rule). No dark theme is shipped. */
@layer dimau-premium-shell {
  :root {
    --dps-sky:#87CEEB; --dps-sky-soft:#CFEEFB; --dps-sky-deep:#5FB3D9;
    --dps-accent:#1E90FF; --dps-ring:#3ee0c8;
    --dps-ink:#0b2a4a; --dps-ink-soft:#3C6B86; --dps-ink-faint:#7d8ea3;
    --dps-panel:#fff; --dps-glass:rgba(255,255,255,.78); --dps-glass-strong:rgba(255,255,255,.92);
    --dps-line:rgba(11,42,74,.12); --dps-line-strong:rgba(11,42,74,.22);
    --dps-shadow:0 10px 30px rgba(11,42,74,.14); --dps-shadow-soft:0 2px 10px rgba(11,42,74,.10);
    --dps-radius:14px; --dps-radius-lg:22px; --dps-tap:44px;
    --dps-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
    --dps-ease:180ms cubic-bezier(.2,.8,.2,1);
    --dps-header-height:64px; --dps-nav-height:64px; --dps-nav-gap:12px;
    --dps-safe-bottom:env(safe-area-inset-bottom,0px);
    --dps-z-nav:100; --dps-z-search:1200;
  }
  @media (min-width:768px){ :root{ --dps-header-height:72px } }

  /* ---- Zero layout shift floors ---------------------------------------- */
  html { scrollbar-gutter:stable; -webkit-text-size-adjust:100% }
  body.dps-shell { margin:0; background:var(--dps-sky); color:var(--dps-ink); font-family:var(--dps-font);
    min-height:100dvh; overflow-x:clip }
  /* Space for the fixed navigation is reserved in CSS, so it never pushes content when it mounts. */
  body.dps-has-nav { padding-bottom:calc(var(--dps-nav-height) + var(--dps-safe-bottom) + var(--dps-nav-gap) + 12px) }
  .dps-shell img, .dps-shell video, .dps-shell canvas, .dps-shell iframe { max-width:100%; height:auto }
  .dps-shell img[width][height] { height:auto }
  .dps-reserve { position:relative; aspect-ratio:var(--dps-ar,16/9); overflow:hidden; background:var(--dps-sky-soft) }
  .dps-reserve > img, .dps-reserve > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
  .dps-skeleton { background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.9),rgba(255,255,255,.55));
    background-size:200% 100%; animation:dps-shimmer 1.4s linear infinite; border-radius:var(--dps-radius) }
  @keyframes dps-shimmer { to { background-position:-200% 0 } }
  .dps-defer { content-visibility:auto; contain-intrinsic-size:auto var(--dps-intrinsic,480px) }
  [data-dps-audit] img:not([width]), [data-dps-audit] img:not([height]), [data-dps-audit] video:not([width]) { outline:3px dashed #e85d4c; outline-offset:-3px }
  .dps-visually-hidden { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

  /* ---- Focus and touch floors ------------------------------------------ */
  .dps-shell :focus-visible { outline:2px solid var(--dps-ring); outline-offset:2px }
  .dps-nav :is(a,button), .dps-search :is(button,a,input), .dps-fab { min-height:var(--dps-tap); min-width:var(--dps-tap) }

  /* ---- Bottom navigation ------------------------------------------------ */
  .dps-nav { position:fixed; left:0; right:0; bottom:0; z-index:var(--dps-z-nav); box-sizing:border-box;
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px;
    height:calc(var(--dps-nav-height) + var(--dps-safe-bottom)); padding:6px 6px calc(6px + var(--dps-safe-bottom));
    margin:0; background:var(--dps-glass); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid rgba(255,255,255,.75); box-shadow:0 -4px 24px rgba(11,42,74,.10); font-family:var(--dps-font) }
  .dps-nav :is(a,button) { position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    height:100%; padding:4px 2px; margin:0; border:0; border-radius:var(--dps-radius); background:transparent; color:var(--dps-ink-soft);
    font:700 11px/1.2 var(--dps-font); letter-spacing:.01em; text-decoration:none; text-align:center; cursor:pointer;
    -webkit-tap-highlight-color:transparent; transition:background var(--dps-ease), color var(--dps-ease), transform var(--dps-ease) }
  .dps-nav :is(a,button) svg { width:22px; height:22px; display:block; flex:none }
  .dps-nav :is(a,button) span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .dps-nav :is(a,button):hover { background:rgba(255,255,255,.6); color:var(--dps-ink) }
  .dps-nav :is(a,button):active { transform:translateY(1px) }
  .dps-nav [aria-current="page"], .dps-nav [aria-pressed="true"] { background:var(--dps-panel); color:var(--dps-accent); box-shadow:var(--dps-shadow-soft) }
  .dps-badge { position:absolute; top:4px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px; border-radius:999px;
    background:#e85d4c; color:#fff; font:700 10px/16px var(--dps-font); text-align:center; pointer-events:none }
  .dps-badge:empty, .dps-badge[hidden] { display:none }
  @media (min-width:761px) {
    .dps-nav { left:50%; right:auto; bottom:var(--dps-nav-gap); transform:translateX(-50%); width:min(560px,calc(100vw - 32px));
      height:var(--dps-nav-height); padding:6px; border:1px solid rgba(255,255,255,.8); border-radius:var(--dps-radius-lg); box-shadow:var(--dps-shadow) }
    body.dps-has-nav { padding-bottom:calc(var(--dps-nav-height) + var(--dps-nav-gap) * 2 + 8px) }
  }
  @media (max-width:360px) { .dps-nav :is(a,button) { font-size:10px } }

  /* ---- Floating search overlay ------------------------------------------ */
  .dps-fab { position:fixed; right:16px; bottom:calc(var(--dps-nav-height) + var(--dps-safe-bottom) + var(--dps-nav-gap) + 8px); z-index:var(--dps-z-nav);
    display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.85);
    background:var(--dps-glass-strong); color:var(--dps-ink); box-shadow:var(--dps-shadow); cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
  .dps-fab svg { width:22px; height:22px }
  @media (min-width:761px) { .dps-fab { bottom:calc(var(--dps-nav-height) + var(--dps-nav-gap) * 2 + 4px); right:24px } }
  .dps-search { position:fixed; inset:0; z-index:var(--dps-z-search); display:block }
  .dps-search[hidden] { display:none }
  .dps-search-scrim { position:absolute; inset:0; background:rgba(11,42,74,.38); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
  .dps-search-panel { position:absolute; left:50%; top:max(12px,env(safe-area-inset-top,0px)); transform:translateX(-50%); box-sizing:border-box;
    width:min(640px,calc(100vw - 24px)); max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); display:flex; flex-direction:column;
    padding:10px; border:1px solid rgba(255,255,255,.85); border-radius:var(--dps-radius-lg); background:var(--dps-glass-strong);
    -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); box-shadow:0 24px 60px rgba(11,42,74,.30); font-family:var(--dps-font) }
  .dps-search-form { display:flex; align-items:center; gap:8px; margin:0 }
  .dps-search-form input[type="search"] { flex:1; min-width:0; box-sizing:border-box; height:48px; padding:0 14px 0 42px; border:1.5px solid var(--dps-line);
    border-radius:var(--dps-radius); background:var(--dps-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C6B86' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") 12px 50%/20px no-repeat;
    color:var(--dps-ink); font:500 16px/1.2 var(--dps-font); -webkit-appearance:none; appearance:none; outline:none }
  .dps-search-form input[type="search"]:focus { border-color:var(--dps-accent); box-shadow:0 0 0 3px rgba(30,144,255,.18) }
  .dps-search-form input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none }
  .dps-search-cancel { flex:none; height:48px; padding:0 14px; border:0; border-radius:var(--dps-radius); background:transparent; color:var(--dps-accent); font:700 14px/1 var(--dps-font); cursor:pointer }
  .dps-search-cancel:hover { background:rgba(255,255,255,.7) }
  .dps-search-results { overflow:auto; overscroll-behavior:contain; margin:8px 0 0; padding:0; list-style:none; display:grid; gap:2px }
  .dps-search-results:empty { display:none }
  .dps-search-results > li { margin:0 }
  .dps-search-results :is(a,button) { box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 12px;
    border:0; border-radius:var(--dps-radius); background:transparent; color:var(--dps-ink); font:600 15px/1.3 var(--dps-font); text-align:left; text-decoration:none; cursor:pointer }
  .dps-search-results :is(a,button):hover, .dps-search-results :is(a,button):focus-visible, .dps-search-results [aria-selected="true"] { background:var(--dps-panel); box-shadow:var(--dps-shadow-soft) }
  .dps-search-results .dps-result-icon { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--dps-sky-soft); font-size:18px }
  .dps-search-results .dps-result-icon img, .dps-search-results .dps-result-icon svg { width:20px; height:20px; display:block }
  .dps-search-results .dps-result-text { flex:1; min-width:0 }
  .dps-search-results .dps-result-text small { display:block; color:var(--dps-ink-soft); font:500 12px/1.3 var(--dps-font); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .dps-search-results .dps-result-text b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .dps-search-status { margin:10px 4px 4px; color:var(--dps-ink-soft); font:500 14px/1.4 var(--dps-font) }
  .dps-search-status:empty { display:none }
  body.dps-search-open { overflow:hidden }

  /* ---- Motion ------------------------------------------------------------ */
  .dps-search:not([hidden]) .dps-search-panel { animation:dps-rise 180ms cubic-bezier(.2,.8,.2,1) }
  @keyframes dps-rise { from { opacity:0; transform:translate(-50%,-6px) } }
  @media (prefers-reduced-motion:reduce) {
    .dps-nav :is(a,button), .dps-search-panel, .dps-skeleton { animation:none!important; transition:none!important }
  }
  @media (forced-colors:active) {
    .dps-nav, .dps-search-panel, .dps-fab { border:1px solid CanvasText; background:Canvas }
    .dps-nav [aria-current="page"] { outline:2px solid Highlight }
  }
}