/* ============================================================
   Documents library view — all-docs surface
   ============================================================ */

/* Root */
.docs-view{
  flex:1;min-width:0;min-height:0;overflow:auto;
  background:var(--background);
  padding:var(--spacing-07) var(--spacing-09) var(--spacing-10);
  display:flex;flex-direction:column;gap:var(--spacing-05);
}

/* Hero */
.docs-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-06);padding-bottom:var(--spacing-03);border-bottom:1px solid var(--border-subtle-01)}
.docs-hero-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.docs-crumb{font:500 var(--font-size-300) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-looser);text-transform:uppercase}
.docs-summary{display:flex;align-items:center;gap:8px;font:400 var(--font-size-325) var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose)}
.docs-summary strong{color:var(--text-primary);font-weight:600}
.docs-summary .sep{color:var(--text-helper)}
.docs-hero-actions{display:flex;align-items:center;gap:var(--spacing-03);flex-shrink:0}

/* Toolbar */
.docs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-04)}
.docs-search{display:flex;align-items:center;gap:var(--spacing-03);background:var(--field-01);border:var(--input-border-width) solid var(--border-strong-01);border-radius:var(--input-radius);padding:0 var(--input-padding-x);height:var(--input-height-md);flex:1;max-width:520px;min-width:0}
.docs-search:focus-within{border-color:var(--focus);box-shadow:var(--input-focus-ring)}
.docs-search svg{color:var(--icon-secondary);flex-shrink:0}
.docs-search input{flex:1;background:transparent;border:none;outline:none;font:var(--input-font);letter-spacing:var(--input-letter-spacing);color:var(--text-primary);min-width:0}
.ds-clear{background:transparent;border:none;color:var(--icon-secondary);font:400 var(--font-size-450) var(--font-family-sans);cursor:pointer;padding:0 4px;line-height:1}
.ds-clear:hover{color:var(--icon-primary)}

.docs-toolbar-right{display:flex;align-items:center;gap:var(--spacing-04)}
.docs-star-filter{display:inline-flex;align-items:center;gap:6px;height:var(--btn-height-md);padding:var(--btn-padding-sm);background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--btn-radius);cursor:pointer;font:var(--btn-font-sm);color:var(--text-secondary);letter-spacing:var(--btn-letter-spacing);user-select:none}
.docs-star-filter input{display:none}
.docs-star-filter svg{color:var(--text-helper)}
.docs-star-filter.on{border-color:var(--yellow-30);color:var(--yellow-40);background:var(--color-bg-surface-caution)}
.docs-star-filter.on svg{color:var(--yellow-30)}
.docs-star-filter:focus-within{outline:2px solid var(--focus);outline-offset:-2px}

.docs-sort{display:flex;align-items:center;gap:6px;height:var(--btn-height-md)}
.ds-lbl{font:500 var(--font-size-300) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-loose);text-transform:uppercase}
.docs-sort select{height:var(--btn-height-md);padding:0 28px 0 10px;background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--input-radius);font:var(--btn-font-sm);color:var(--text-primary);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%23525252' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
.docs-sort select:focus{outline:2px solid var(--focus);outline-offset:-2px}
.docs-sort-btn{display:inline-flex;align-items:center;gap:6px;height:var(--btn-height-md);padding:var(--btn-padding-sm);background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--btn-radius);font:var(--btn-font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap}
.docs-sort-btn:hover{border-color:var(--border-strong-01)}
.docs-sort-btn:focus{outline:2px solid var(--focus);outline-offset:-2px}
.docs-sort-btn svg{color:var(--icon-secondary)}

.docs-view-switch{display:inline-flex;background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--btn-radius);height:var(--btn-height-md);overflow:hidden}
.docs-view-switch button{width:var(--btn-height-md);height:var(--btn-height-md);background:transparent;border:none;display:grid;place-items:center;color:var(--icon-secondary);cursor:pointer;padding:0}
.docs-view-switch button:hover{background:var(--layer-hover-01);color:var(--icon-primary)}
.docs-view-switch button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.docs-view-switch button.on{background:var(--blue-60);color:var(--white)}

/* Categories */
.docs-cats{display:flex;flex-wrap:wrap;gap:6px}
.docs-cat{height:var(--btn-height-sm);padding:var(--btn-padding-sm);background:transparent;border:1px solid var(--border-subtle-02);border-radius:var(--btn-radius);color:var(--text-secondary);font:var(--btn-font-sm);letter-spacing:var(--btn-letter-spacing);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.docs-cat:hover{border-color:var(--border-subtle-01);color:var(--text-primary)}
.docs-cat:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.docs-cat.on{background:var(--black);border-color:var(--black);color:var(--white)}
.docs-cat .ct{font:600 var(--font-size-275) var(--font-family-mono);opacity:0.7}
.docs-cat.on .ct{opacity:1}

/* Bulk bar */
.docs-bulk{position:sticky;top:-32px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--blue-60);color:var(--white);padding:8px 14px;box-shadow:var(--shadow-md);animation:bulkIn 160ms ease-out}
@keyframes bulkIn{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
.docs-bulk-info{display:flex;align-items:center;gap:16px;font:400 var(--font-size-325) var(--font-family-sans)}
.docs-bulk-info strong{font-weight:600}
.docs-bulk-info .lnk{background:transparent;border:none;color:var(--white);text-decoration:underline;font:500 var(--font-size-300) var(--font-family-sans);cursor:pointer;padding:2px 4px}
.docs-bulk-info .lnk:hover{background:rgba(255,255,255,0.1)}
.docs-bulk-actions{display:flex;gap:6px}
.docs-bulk-actions .btn{background:transparent;border-color:rgba(255,255,255,0.3);color:var(--white)}
.docs-bulk-actions .btn:hover{background:rgba(255,255,255,0.12)}
.docs-bulk-actions .btn--danger-ghost{color:var(--red-20);border-color:rgba(255,215,217,0.3)}
.docs-bulk-actions .btn--danger-ghost:hover{background:rgba(255,135,138,0.2)}

/* Grid */
.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--spacing-05)}

/* New-doc tile */
.doc-new-tile{background:transparent;border:2px dashed var(--border-subtle-01);border-radius:var(--card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-03);padding:var(--spacing-06);min-height:320px;cursor:pointer;color:var(--text-secondary);transition:border-color var(--duration-fast-02) var(--ease-standard-productive), color var(--duration-fast-02) var(--ease-standard-productive)}
.doc-new-tile:hover{border-color:var(--interactive);color:var(--interactive);background:var(--color-bg-fill-transparent-hover)}
.dnt-circle{width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center}
.dnt-label{font:600 var(--font-size-350) var(--font-family-sans);letter-spacing:var(--font-letter-spacing-loose)}
.dnt-sub{font:400 var(--font-size-300) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-loose)}
.doc-new-tile:hover .dnt-sub{color:inherit;opacity:0.75}

/* Doc card */
.doc-card{background:var(--layer-01);border:var(--card-border);border-radius:var(--card-radius);display:flex;flex-direction:column;overflow:hidden;transition:var(--card-transition);position:relative}
.doc-card:hover{border-color:var(--card-hover-border);box-shadow:var(--card-hover-shadow)}
.doc-card.selected{border-color:var(--blue-60);box-shadow:0 0 0 1px var(--blue-60)}
.dc-top{position:relative;aspect-ratio:210/297;background:var(--layer-02);border-bottom:1px solid var(--border-subtle-01);cursor:pointer;overflow:hidden;display:grid;place-items:center;padding:var(--card-padding)}
.dc-star{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);border:1px solid var(--border-subtle-01);color:var(--text-helper);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity 120ms, color 120ms}
.doc-card:hover .dc-star, .dc-star.on{opacity:1}
.dc-star.on{color:var(--yellow-30)}
.dc-star:hover{color:var(--yellow-30)}
.dc-star:disabled,
.dc-star.on:disabled,
.doc-card:hover .dc-star:disabled,
.cm-card:hover .dc-star:disabled{cursor:not-allowed;opacity:0.6}
.dc-check{position:absolute;top:8px;left:8px;cursor:pointer;opacity:0;transition:opacity 120ms}
.doc-card:hover .dc-check, .doc-card.selected .dc-check{opacity:1}
.dc-check input{position:absolute;opacity:0;pointer-events:none}
.dc-check span{display:block;width:20px;height:20px;background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);border:1.5px solid var(--border-subtle-01);position:relative}
.dc-check input:checked + span{background:var(--blue-60);border-color:var(--blue-60)}
.dc-check input:checked + span::after{content:'';position:absolute;left:5px;top:2px;width:6px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Card meta */
.dc-meta{padding:var(--card-gap) var(--card-padding) var(--card-padding);display:flex;flex-direction:column;gap:var(--spacing-03)}
.dc-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative}
.dc-name{font:600 var(--font-size-350)/1.3 var(--font-family-sans);color:var(--text-primary);letter-spacing:var(--font-letter-spacing-loose);cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dc-name:hover{color:var(--interactive)}
.dc-menu-btn{width:24px;height:24px;background:transparent;border:none;display:grid;place-items:center;color:var(--icon-secondary);cursor:pointer;padding:0;flex-shrink:0}
.dc-menu-btn:hover{background:var(--layer-hover-01);color:var(--icon-primary)}
.dc-sub{font:400 var(--font-size-300) var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose)}
.dc-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.dc-stat{display:inline-flex;align-items:center;gap:4px;font:500 var(--font-size-275) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-loose)}
.dc-stat svg{color:inherit}
.dc-updated{margin-left:auto}

/* Category pill */
.dc-cat{display:inline-flex;align-items:center;height:var(--badge-height);padding:var(--badge-padding);font:var(--badge-font);letter-spacing:var(--badge-letter-spacing);border-radius:var(--badge-radius);text-transform:uppercase;border:1px solid transparent}
.dc-cat-checklists{background:var(--blue-10);color:var(--blue-70);border-color:var(--blue-20)}
.dc-cat-emergency{background:var(--red-10);color:var(--red-70);border-color:var(--red-20)}
.dc-cat-performance{background:var(--color-bg-surface-caution);color:var(--yellow-40);border-color:var(--yellow-20)}
.dc-cat-reference{background:var(--gray-10);color:var(--purple-70);border-color:var(--purple-40)}
.dc-cat-flight-log{background:var(--cool-gray-10);color:var(--gray-80);border-color:var(--cool-gray-20)}

/* Menu popover (cards & rows) */
.dc-menu-scrim{position:fixed;inset:0;z-index:100}
.dc-menu{position:absolute;right:0;top:28px;min-width:180px;background:var(--layer-01);border:1px solid var(--border-subtle-01);border-radius:var(--menu-radius);box-shadow:var(--menu-shadow);z-index:var(--z-dropdown);padding:var(--menu-padding-y) 0;display:flex;flex-direction:column;animation:menuIn 140ms ease-out}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dc-menu button,.dc-menu a{background:transparent;border:none;display:flex;align-items:center;gap:var(--btn-gap);width:100%;height:var(--menu-item-height);padding:var(--menu-item-padding);font:var(--menu-item-font);color:var(--text-primary);cursor:pointer;text-align:left;text-decoration:none}
.dc-menu button:hover,.dc-menu a:hover{background:var(--layer-hover-01)}
.dc-menu button.danger,.dc-menu a.danger{color:var(--button-danger-primary)}
.dc-menu button.danger:hover,.dc-menu a.danger:hover{background:var(--color-bg-surface-critical)}
.dc-menu-sep{height:1px;background:var(--border-subtle-01);margin:var(--menu-padding-y) 0}
.dr-menu{top:32px}

/* ─── Cover thumbnail ──────────────────────────────── */
.dc-cover{background:var(--white);border:1px solid var(--gray-20);width:92%;max-width:180px;aspect-ratio:210/297;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-200)}
.dc-cover.dc-landscape{aspect-ratio:297/210;max-width:210px}
.dc-preview-img{width:100%;height:100%;display:block;object-fit:cover}
.dc-mid{flex:1;display:flex;min-height:0}
.dc-rail{display:flex;background:var(--gray-20);gap:1px;flex-shrink:0}
.dc-rail-top,.dc-rail-bottom{flex-direction:row;height:14px;width:100%}
.dc-rail-left,.dc-rail-right{flex-direction:column;width:14px}
.dc-chip{flex:1;display:grid;place-items:center;font:700 6px var(--font-family-sans);letter-spacing:0.5px;color:var(--white);padding:0 2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-rail-left .dc-chip, .dc-rail-right .dc-chip{writing-mode:vertical-rl}
.dc-rail-left .dc-chip{transform:rotate(180deg)}
/* Chip colors — mirror the document chip palette */
.dc-c-blue{background:var(--blue-60)}
.dc-c-red{background:var(--red-60)}
.dc-c-yellow{background:var(--yellow-30);color:var(--black)}
.dc-c-green{background:var(--green-50)}
.dc-c-teal{background:var(--teal-60)}
.dc-c-purple{background:var(--purple-60)}
.dc-c-magenta{background:var(--magenta-60)}
.dc-c-gray{background:var(--gray-70)}

.dc-content{flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.dc-title-line{font:700 7px var(--font-family-sans);color:var(--black);letter-spacing:var(--font-letter-spacing-looser);text-transform:uppercase;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-line{height:2px;background:var(--gray-30);width:100%}
.dc-line.short{width:60%}
.dc-line.mid{width:80%}

/* ─── List view ─────────────────────────────────────── */
.docs-list{display:flex;flex-direction:column;background:var(--layer-01);border:1px solid var(--border-subtle-01)}
.doc-row{display:grid;grid-template-columns:36px 36px 44px 1fr 120px 64px 64px 130px 128px;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border-subtle-01);transition:background 120ms}
.doc-row:last-child{border-bottom:none}
.doc-row:hover:not(.doc-row-head){background:var(--layer-hover-01)}
.doc-row.selected{background:var(--blue-10)}
.doc-row-head{background:var(--layer-02);border-bottom:1px solid var(--border-subtle-01);cursor:default;padding:8px 14px;position:sticky;top:-32px;z-index:4}
.doc-row-head:hover{background:var(--layer-02)}
.dr-h{font:600 var(--font-size-275) var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-looser);text-transform:uppercase}
.dr-check{display:inline-flex;align-items:center;cursor:pointer;position:relative;width:18px;height:18px}
.dr-check input{position:absolute;opacity:0;pointer-events:none}
.dr-check span{width:18px;height:18px;border:1.5px solid var(--border-subtle-01);background:var(--layer-01);display:block}
.dr-check input:checked + span{background:var(--blue-60);border-color:var(--blue-60)}
.dr-check input:checked + span::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dr-check input:indeterminate + span{background:var(--blue-60);border-color:var(--blue-60)}
.dr-check input:indeterminate + span::after{content:'';position:absolute;left:3px;top:8px;width:10px;height:2px;background:var(--white)}

.dr-star{background:transparent;border:none;width:24px;height:24px;display:grid;place-items:center;color:var(--text-helper);cursor:pointer;padding:0}
.dr-star.on{color:var(--yellow-30)}
.dr-star:hover{color:var(--yellow-30)}

.dr-mini{width:44px;height:62px;overflow:hidden;display:grid;place-items:center;transform:scale(0.8);transform-origin:center}
.dr-mini .dc-cover{width:44px;height:62px;max-width:44px;box-shadow:none}
.dr-mini .dc-chip{font-size:0}
.dr-mini .dc-title-line,.dr-mini .dc-line{opacity:0.6}

.dr-title-cell{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.dr-name{font:600 var(--font-size-325) var(--font-family-sans);color:var(--text-primary);letter-spacing:var(--font-letter-spacing-loose);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-title-cell:hover .dr-name{color:var(--interactive)}
.dr-sub{font:400 var(--font-size-300) var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-cat{font:var(--badge-font);letter-spacing:var(--badge-letter-spacing);text-transform:uppercase;padding:var(--badge-padding);border-radius:var(--badge-radius);display:inline-block;justify-self:start}
.dr-stat{font:500 var(--font-size-325) var(--font-family-mono);color:var(--text-secondary);text-align:center}
.dr-updated{font:400 var(--font-size-300) var(--font-family-sans);color:var(--text-helper);letter-spacing:var(--font-letter-spacing-loose)}
.dr-actions{display:flex;gap:2px;justify-content:flex-end;position:relative}
.dr-act{background:transparent;border:none;width:28px;height:28px;display:grid;place-items:center;color:var(--icon-secondary);cursor:pointer;padding:0}
.dr-act:hover{background:var(--layer-hover-01);color:var(--icon-primary)}

/* Empty state */
.docs-empty{padding:var(--spacing-10) var(--spacing-06);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-04);text-align:center;background:var(--layer-01);border:1px dashed var(--border-subtle-01);border-radius:var(--card-radius)}
.docs-empty-art{color:var(--text-helper);margin-bottom:4px}
.docs-empty-title{font:500 var(--font-size-500)/var(--font-line-height-700) var(--font-family-sans);color:var(--text-primary);letter-spacing:var(--font-letter-spacing-normal)}
.docs-empty-sub{font:400 var(--font-size-350) var(--font-family-sans);color:var(--text-secondary);letter-spacing:var(--font-letter-spacing-loose);max-width:420px}
.docs-empty-actions{display:flex;gap:var(--spacing-03);margin-top:var(--spacing-04)}

/* Responsive */
@media (max-width: 1100px){
  .doc-row{grid-template-columns:36px 36px 44px 1fr 110px 60px 60px 110px 100px;gap:8px}
}
@media (max-width: 900px){
  .docs-view{padding:var(--spacing-06) var(--spacing-05)}
  .docs-toolbar{flex-direction:column;align-items:stretch}
  .docs-toolbar-right{justify-content:flex-end;flex-wrap:wrap}
  .doc-row{grid-template-columns:1fr;gap:4px;padding:12px}
  .doc-row .dr-h{display:none}
  .doc-row.doc-row-head{display:none}
}