/* layout.css — Task 2 header shell + Task 6 grid + Task 7 sidebar */
header{
  position:sticky;top:0;z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:1080px;margin:0 auto;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-family:var(--font-serif);
  font-weight:800;font-size:22px;letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);display:inline-block;flex-shrink:0;
}
.controls{
  display:flex;align-items:center;gap:12px;
  flex:1;justify-content:flex-end;max-width:640px;
}
.controls #q{
  flex:1;min-width:180px;max-width:360px;height:40px;
  border:1px solid var(--line);border-radius:12px;
  padding:0 14px;background:var(--bg);
  font-family:var(--font-sans);font-size:14px;color:var(--text);
  outline:none;
}
.controls #q::placeholder{color:var(--muted)}
.controls #q:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,176,138,.2)}
.controls #stats{font-size:13px;color:var(--muted);white-space:nowrap}
.controls .primary{white-space:nowrap}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
main{max-width:1080px;margin:0 auto;padding:16px}
.hint{max-width:1080px;margin:0 auto;padding:8px 16px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.hint .badge{background:var(--pill-bg);border:1px solid #e8ddd6;padding:2px 8px;border-radius:999px;font-weight:700}
.dev-auth{font-family:var(--font-sans)}
.dev-auth summary{list-style:none}

/* Library grid — 4-col desktop */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}

/* Library layout — Task 7 sidebar */
.lib-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}
.lib-sidebar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;align-self:start;position:sticky;top:72px}
.lib-sidebar h4{margin:12px 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lib-sidebar h4:first-child{margin-top:0}
.checklist{display:flex;flex-direction:column;gap:6px}
.checklist label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.checklist input{accent-color:var(--accent)}
@media(max-width:768px){.lib-layout{grid-template-columns:1fr}.lib-sidebar{display:none}.lib-sidebar.open{display:block}}

/* Cellar placeholders */
.cellar-table-wrap{margin-top:10px}
/* Tabs — My Cellar / Library (pill ghost) */
.tabs{display:flex;gap:8px;margin:16px 0 12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.tab{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);font-family:var(--font-sans);transition:background .15s,color .15s,border-color .15s}
.tab:hover{border-color:var(--gold);color:var(--text)}
.tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.tab.active:hover{background:#222;border-color:#222;color:#fff}
.cellar-cards{display:none}

/* Bottom pill tabs — Task 9: visible <768px only */
.bottom-tabs{display:none;position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow);gap:6px;z-index:10}
.bt{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:700;color:var(--muted);cursor:pointer;font-family:var(--font-sans);font-size:14px}
.bt.active{background:#111;color:#fff}

@media(max-width:768px){
  .bar{flex-wrap:wrap; gap:8px}
  .controls{width:auto;max-width:none;justify-content:flex-end;flex-wrap:nowrap;gap:8px}
  .search-row{padding:0 16px 12px}
  .search-row #q{max-width:none}
  .controls .ghost,.controls .primary{white-space:nowrap;flex-shrink:0;padding:7px 10px;font-size:12px}
  .controls #stats{display:none}
  #loggedAs{display:none}
  .hint{display:none !important}
  .dev-auth{display:none !important}
  .brand{font-size:18px}
  .brand .dot{width:8px;height:8px}
  /* de-busy: single scrollable row for chips, not 2-line wrap */
  .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;padding:5px 12px;font-size:12px}
  .pills{gap:6px}
  /* reduce vintage dominance on large-font iOS */
  .cellar-card .vintage{font-size:20px !important}
  .cellar-card .producer{font-size:13px !important}
  main{padding-bottom:80px}
  .cellar-cards{display:flex;flex-direction:column;gap:10px}.cellar-table-wrap{display:none}
  .bottom-tabs{display:flex}
}