/* PHOMI — document bank. Depends on the tokens + .wrap / .crumb in styles.css. */

/* ─── Hero (matches .blog-hero) ─── */
.dok-hero{ padding:56px 0; background:var(--ink); color:#fff }
.dok-hero-title{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.98;
  font-size:clamp(40px,7vw,96px);
  margin:0 0 20px;
  color:#fff;
}
.dok-hero-title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.dok-hero-sub{
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
  color:rgba(255,255,255,.74);
  max-width:64ch;
  margin:0;
}

/* ─── Layout ─── */
.dok-bank{ padding:48px 0 96px; background:var(--paper) }
.dok-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:48px; align-items:start }
.dok-filter-toggle{ display:none }

/* ─── Filter column ─── */
.dok-group{ border-bottom:1px solid var(--line-soft); padding:18px 0 }
.dok-group:first-child{ padding-top:0 }
.dok-group:last-child{ border-bottom:0 }
.dok-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.dok-group-title::-webkit-details-marker{ display:none }
.dok-group-title svg{ width:14px; height:14px; transition:transform .25s var(--easing) }
.dok-group:not([open]) .dok-group-title svg{ transform:rotate(-90deg) }
.dok-options{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px }
.dok-option.is-extra{ display:none }
.dok-group.is-expanded .dok-option.is-extra{ display:block }
.dok-option label{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:15px;
  line-height:1.3;
  color:var(--ink-2);
  cursor:pointer;
}
.dok-option input{ position:absolute; opacity:0; width:18px; height:18px; margin:0; cursor:pointer }
.dok-check{
  flex:none;
  width:18px;
  height:18px;
  border:1px solid var(--sand);
  border-radius:4px;
  background:var(--paper);
  transition:background .2s var(--easing), border-color .2s var(--easing);
}
.dok-option label:hover .dok-check{ border-color:var(--primary-deep) }
.dok-option input:checked + .dok-check{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4.5 9.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:var(--ink);
}
.dok-option input:focus-visible + .dok-check{ outline:2px solid var(--primary-deep); outline-offset:2px }
.dok-option-label{ flex:1 }
.dok-option-count{ font-family:var(--f-mono); font-size:12px; color:var(--muted) }
.dok-option.is-empty label{ opacity:.4; cursor:default }
.dok-more{
  margin-top:8px;
  padding:0;
  background:none;
  border:0;
  font:inherit;
  font-size:14px;
  color:var(--primary-deep);
  cursor:pointer;
}

/* ─── Search + view ─── */
.dok-tools{ display:flex; align-items:center; gap:14px }
.dok-search{
  position:relative;
  flex:1;
  display:block;
}
.dok-search svg{
  position:absolute;
  left:16px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}
.dok-search input{
  width:100%;
  height:50px;
  padding:0 16px 0 44px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--stone);
  border:1px solid transparent;
  border-radius:8px;
  transition:border-color .2s var(--easing), background .2s var(--easing);
}
.dok-search input:focus{ outline:0; background:var(--paper); border-color:var(--primary-deep) }
.dok-view{ display:flex; gap:4px }
.dok-view button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
}
.dok-view button svg{ width:18px; height:18px }
.dok-view button[aria-pressed="true"]{ color:var(--ink); border-color:var(--line) }

/* ─── Count + chips ─── */
.dok-active{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; min-height:36px; margin:22px 0 22px }
.dok-count{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.dok-chips{ display:flex; flex-wrap:wrap; gap:8px }
.dok-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px 7px 14px;
  font:inherit;
  font-size:14px;
  line-height:1;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
}
.dok-chip span{ font-size:16px; line-height:.8; opacity:.75 }
.dok-clear{
  padding:0;
  background:none;
  border:0;
  font:inherit;
  font-size:14px;
  color:var(--primary-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ─── Cards ─── */
.dok-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(345px,100%),1fr)); gap:18px }
.dok-card{
  display:flex;
  min-width:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .4s var(--easing), transform .4s var(--easing);
}
.dok-card[hidden]{ display:none }
.dok-card:hover{ box-shadow:var(--shadow-soft-hover); transform:translateY(-3px) }
.dok-card-media{
  flex:0 0 32%;
  max-width:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:var(--stone);
}
.dok-card-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:contain;
  box-shadow:0 8px 18px -10px rgba(21,24,27,.4);
}
.dok-card-placeholder{
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--muted);
}
.dok-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding:20px 16px 16px }
.dok-card-type{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--muted);
}
.dok-card-title{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:18px;
  letter-spacing:-.015em;
  line-height:1.15;
  color:var(--ink);
  margin:0;
  overflow-wrap:break-word;
}
.dok-card-title a{ color:inherit }
.dok-card-title a:hover{ color:var(--primary-deep) }
.dok-card-desc{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin:0 }
.dok-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.dok-card-meta{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--muted);
  min-width:0;
}
.dok-card-ref,
.dok-card-info{ display:block }
.dok-card-dl{
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--ink);
  background:var(--stone);
  transition:background .2s var(--easing), color .2s var(--easing);
}
.dok-card-dl:hover{ background:var(--ink); color:var(--paper) }
.dok-card-dl svg{ width:18px; height:18px }

.dok-empty{ padding:48px 0; font-size:17px; color:var(--muted); text-align:center }

/* List view */
.dok-grid.is-list{ grid-template-columns:minmax(0,1fr) }
.dok-grid.is-list .dok-card-media{ flex-basis:120px; padding:10px }
.dok-grid.is-list .dok-card-media img{ max-height:130px }

/* ─── Narrow screens: filters fold above the results ─── */
@media (max-width:900px){
  .dok-layout{ grid-template-columns:minmax(0,1fr); gap:16px }
  .dok-filter-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:46px;
    font:inherit;
    font-size:15px;
    color:var(--ink);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:8px;
    cursor:pointer;
  }
  .dok-filter-toggle svg{ width:16px; height:16px }
  .dok-filter-badge{
    min-width:20px;
    padding:3px 6px;
    font-family:var(--f-mono);
    font-size:11px;
    line-height:1.2;
    color:var(--paper);
    background:var(--ink);
    border-radius:999px;
  }
  .dok-filter-badge[hidden]{ display:none }
  .dok-side{ display:none }
  .dok-side.is-open{ display:block }
}

@media (max-width:560px){
  .dok-bank{ padding:28px 0 72px }
  .dok-grid{ grid-template-columns:minmax(0,1fr) }
  .dok-view{ display:none }
  .dok-grid .dok-card-media{ flex-basis:34%; padding:10px }
}

/* ─── Compact phone layout ─── */
@media (max-width:600px){
  .dok-hero{ padding-top:28px; padding-bottom:24px }
  .dok-bank{ padding:18px 0 40px }
  .dok-grid{ gap:10px }
  .dok-grid .dok-card-media{ flex-basis:24%; padding:8px }
  .dok-card-body{ gap:4px; padding:12px }
  .dok-card-title{ font-size:17px; line-height:1.2 }
  .dok-card-desc{ font-size:13.5px; line-height:1.35 }
  .dok-card-foot{ padding-top:8px; margin-top:4px }
  .dok-card-dl{ width:36px; height:36px }
}