/* Luna 0.28 — Landmark architecture layer.
   Derived from Apple's Landmarks sample structure:
   NavigationSplitView + searchable + toolbar grouping + inspector.
   This file owns app architecture only; native.css owns component styling. */

@media (min-width:761px){
  /* NavigationSplitView analogue: sidebar | content | optional inspector. */
  .app-shell{
    min-height:100dvh;
    display:grid;
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    align-items:start;
  }
  body:has(#inboxDetail[open]) .app-shell{
    grid-template-columns:var(--sidebar-width) minmax(0,1fr) clamp(320px,30vw,420px);
  }
  .rail{grid-column:1;grid-row:1}
  .workspace{
    grid-column:2;grid-row:1;
    width:auto;max-width:none;min-width:0;
    padding:0 32px 64px;
  }

  /* Landmarks-style global searchable surface lives with top-level navigation. */
  .global-search-field{
    margin:2px 0 12px;
    padding:0;
  }
  .global-search-field input{
    width:100%;
    height:30px;
    margin:0;
    padding:5px 9px;
    border:0;
    border-radius:7px;
    background:var(--fill);
    color:var(--text);
    font:400 13px/1.2 var(--ui-font);
    outline:none;
    appearance:none;
  }
  .global-search-field input::placeholder{color:var(--secondary)}
  .global-search-field input:focus{
    background:var(--surface);
    box-shadow:0 0 0 1px var(--separator-strong),0 0 0 3px rgba(0,122,255,.12);
  }
  .utility-menu-items [data-search]{display:none}

  /* Toolbar groups mirror Landmarks' flexible spacer + grouped actions. */
  .view-header{width:100%;max-width:none}
  .view-toolbar{
    margin-left:auto;
    display:flex;
    align-items:center;
    flex:0 0 auto;
  }
  .toolbar-group{display:flex;align-items:center;gap:4px}
  .toolbar-fixed-spacer{display:block;width:12px;height:1px;flex:0 0 12px}
  .toolbar-primary:empty + .toolbar-fixed-spacer{display:none}
  .view-toolbar .toolbar-button,
  .view-toolbar .utility-menu>summary{
    backdrop-filter:blur(20px) saturate(160%);
  }

  /* Inspector analogue: detail is a real third column, not an overlay sheet. */
  #inboxDetail[open]{
    grid-column:3;
    grid-row:1;
    align-self:start;
    position:sticky;
    inset:auto;
    top:0;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    min-width:0;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:0;
    overflow:auto;
    border:0;
    border-left:1px solid var(--separator);
    border-radius:0;
    background:var(--surface);
    box-shadow:none;
  }
  body:has(#inboxDetail[open]) .workspace{padding-right:32px}
  #inboxDetail .detail-wrap{min-height:100%;padding:0 24px 48px}
  #inboxDetail .object-topbar{
    margin:0 -24px;
    padding:0 18px 0 24px;
    min-height:var(--toolbar-height);
  }
  #inboxDetail .object-topbar>span{font-size:12px}
  #inboxDetail .detail-close{
    width:30px;height:30px;min-width:30px;min-height:30px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  #inboxDetail .detail-back{display:none}
  #inboxDetail .object-heading h2{font-size:22px}
  #inboxDetail .object-primary{align-items:center}

  /* Global Search is a content destination, not a dialog. */
  body.is-global-search .view{max-width:980px}
  body.is-global-search .view-header h1{font-size:22px}
  .landmark-search-surface{
    max-width:880px;
    padding:2px 0 40px;
  }
  .landmark-search-mobile-query{display:none}
  .landmark-search-controls{
    display:grid;
    grid-template-columns:minmax(160px,220px) minmax(160px,220px) minmax(0,1fr);
    gap:12px;
    align-items:end;
    padding:0 0 16px;
    border-bottom:1px solid var(--separator);
  }
  .landmark-search-controls>label{
    display:grid;
    gap:5px;
    color:var(--secondary);
    font-size:12px;
    font-weight:600;
  }
  .landmark-search-controls select{
    width:100%;
    min-height:32px;
    padding:6px 28px 6px 8px;
    border:1px solid var(--separator-strong);
    border-radius:7px;
    background:var(--secondary-surface);
    color:var(--text);
    font-size:13px;
  }
  .landmark-search-options{
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    color:var(--secondary);
    font-size:12px;
  }
  .landmark-search-options label{white-space:nowrap}
  .landmark-search-status{
    min-height:32px;
    margin:0;
    padding:12px 0 6px;
    color:var(--secondary);
    font-size:12px;
  }
  .landmark-search-results{border-top:1px solid var(--separator)}
  .landmark-search-row{margin:0;border-bottom:1px solid var(--separator)}
  .landmark-search-open{
    width:100%;
    min-height:72px;
    padding:12px 2px;
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    grid-template-areas:
      "kind title"
      "kind snippet"
      "kind meta";
    column-gap:16px;
    row-gap:3px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text);
    text-align:left;
  }
  .landmark-search-open:hover{background:linear-gradient(90deg,transparent,var(--fill),transparent)}
  .landmark-search-kind{grid-area:kind;color:var(--secondary);font-size:12px;padding-top:2px}
  .landmark-search-open strong{grid-area:title;font-size:14px;font-weight:600}
  .landmark-search-snippet{
    grid-area:snippet;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--secondary);
    font-size:13px;
  }
  .landmark-search-open small{grid-area:meta;color:var(--tertiary);font-size:11px}
  .landmark-search-more{margin:16px 0 0}

  /* Content remains content; glass stays in navigation/tool layers. */
  .view,.today-room,.inbox-group,.space-index,.space-work,.assistant-surface{
    background:transparent;
  }
}

/* Compact desktop: preserve the split-view principle while keeping content usable. */
@media (min-width:761px) and (max-width:1120px){
  body:has(#inboxDetail[open]) .app-shell{
    grid-template-columns:190px minmax(0,1fr) 320px;
  }
  :root{--sidebar-width:190px}
  .workspace{padding-left:24px;padding-right:24px}
  body:has(#inboxDetail[open]) .workspace{padding-right:24px}
  .landmark-search-controls{grid-template-columns:1fr 1fr}
  .landmark-search-options{grid-column:1/-1;justify-content:flex-start}
}

/* iPhone keeps the existing Tab Bar; global search becomes the content destination. */
@media (max-width:760px){
  .global-search-field{display:none}
  .landmark-search-surface{padding:0 0 24px}
  .landmark-search-mobile-query{display:block;margin:0 0 14px}
  .landmark-search-mobile-query input{
    width:100%;height:44px;padding:0 11px;
    border:1px solid var(--separator-strong);
    border-radius:10px;
    background:var(--secondary-surface);
    color:var(--text);
    font-size:16px;
  }
  .landmark-search-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding-bottom:14px;
    border-bottom:1px solid var(--separator);
  }
  .landmark-search-controls>label{display:grid;gap:5px;color:var(--secondary);font-size:12px}
  .landmark-search-controls select{
    width:100%;min-height:44px;padding:8px;
    border:1px solid var(--separator-strong);border-radius:9px;
    background:var(--secondary-surface);font-size:14px
  }
  .landmark-search-options{
    grid-column:1/-1;
    display:flex;flex-wrap:wrap;gap:10px 14px;
    color:var(--secondary);font-size:12px
  }
  .landmark-search-status{margin:0;padding:12px 0;color:var(--secondary);font-size:13px}
  .landmark-search-results{border-top:1px solid var(--separator)}
  .landmark-search-row{border-bottom:1px solid var(--separator)}
  .landmark-search-open{
    width:100%;min-height:76px;padding:13px 0;
    display:flex;flex-direction:column;gap:4px;
    border:0;background:transparent;text-align:left
  }
  .landmark-search-kind{color:var(--secondary);font-size:11px}
  .landmark-search-open strong{font-size:15px}
  .landmark-search-snippet{color:var(--secondary);font-size:13px;line-height:1.45}
  .landmark-search-open small{color:var(--tertiary);font-size:11px}
}