/* Linked Devices: approved Canvas preview. Page structure maps to catalog
   #complete-settings-pages; groups use the settings group geometry; actions
   use shared data-pe-button controls. The existing console owns navigation. */
#view-devices { color:var(--pe-ink); font-family:var(--pe-font-ui); container-type:inline-size; }
#view-devices .ld-content { max-width:760px; min-width:0; }
#view-devices .ld-heading { margin-bottom:32px; }
#view-devices .ld-heading h1 { margin:0; font-size:24px; line-height:1.3; font-weight:600; letter-spacing:-.02em; }
#view-devices .ld-heading p { margin:8px 0 0; max-width:65ch; font-size:13px; line-height:1.65; color:var(--pe-ink-2); }
#view-devices .ld-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
#view-devices h2 { margin:0; color:var(--pe-ink); font-size:15px; font-weight:600; line-height:1.4; }
#view-devices .ld-group { overflow:hidden; border:1px solid var(--pe-line); border-radius:var(--pe-r-group); background:var(--pe-surface); }
#view-devices .ld-identity { display:flex; align-items:center; gap:16px; padding:24px; }
#view-devices .ld-icon { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; color:var(--pe-ink-2); background:var(--pe-surface-muted); border-radius:var(--pe-r-group); }
#view-devices .ld-copy { flex:1; min-width:0; }
#view-devices .ld-copy h2 { font-size:16px; overflow-wrap:anywhere; }
#view-devices .ld-copy p { margin:6px 0 0; color:var(--pe-ink-3); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#view-devices .ld-status { display:inline-flex; align-items:center; flex-shrink:0; gap:6px; color:var(--pe-ink-3); font-size:12px; }
#view-devices .ld-status::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:currentColor; }
#view-devices .ld-status[data-state="online"] { color:var(--pe-success); }
#view-devices .ld-status[data-state="unknown"] { color:var(--pe-warning); }
#view-devices .ld-access { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-top:1px solid var(--pe-line); background:var(--pe-surface-raised); }
#view-devices .ld-access p { margin:0; color:var(--pe-ink-2); font-size:12px; line-height:1.6; }
#view-devices .ld-access button { flex-shrink:0; }
#view-devices .ld-management { margin-top:24px; padding:16px 0; border-bottom:1px solid var(--pe-line); }
#view-devices .ld-management summary { width:fit-content; cursor:pointer; font-size:13px; font-weight:500; line-height:1.6; padding:8px 0; }
#view-devices .ld-management summary:focus-visible { outline:2px solid var(--pe-accent); outline-offset:2px; }
#view-devices .ld-management p { margin:8px 0 16px; max-width:65ch; color:var(--pe-ink-2); font-size:13px; line-height:1.65; }
#view-devices .ld-empty { padding:32px 24px; }
#view-devices .ld-empty .ld-icon { margin-bottom:20px; }
#view-devices .ld-empty p { margin:8px 0 0; color:var(--pe-ink-2); font-size:13px; line-height:1.65; }
#view-devices .ld-empty ol { margin:20px 0 24px; padding-left:20px; font-size:13px; line-height:1.65; }
#view-devices .ld-empty li + li { margin-top:12px; }
#view-devices .ld-note, #view-devices .ld-loading { margin:20px 0 0; color:var(--pe-ink-3); font-size:12px; line-height:1.6; }
@container (max-width:520px) {
  #view-devices .ld-identity { display:grid; grid-template-columns:44px minmax(0,1fr); padding:20px; }
  #view-devices .ld-status { grid-column:2; }
  #view-devices .ld-access { align-items:flex-start; flex-direction:column; padding:16px 20px; gap:12px; }
  #view-devices .ld-empty { padding:24px 20px; }
}
@media (pointer:coarse) { #view-devices .ld-management summary { min-height:44px; } }