:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #191d1b;
  background: #f3f5f4;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button,
input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

.app-header {
  min-height: 64px;
  display: grid;
  grid-template-columns: 120px minmax(260px, 620px) minmax(450px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid #cdd4d0;
  background: #fff;
}

.brand { color: #123f34; font-size: 20px; font-weight: 750; }

.search-form { display: grid; grid-template-columns: minmax(0, 1fr) 84px; height: 38px; }
.search-form input {
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #9da9a3;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  outline: 0;
  background: #fff;
}
.search-form input:focus { border-color: #16745b; box-shadow: inset 0 0 0 1px #16745b; }
.search-form button {
  border: 1px solid #145f4d;
  border-radius: 0 4px 4px 0;
  color: #fff;
  background: #145f4d;
  font-weight: 700;
}
.search-form :disabled { cursor: not-allowed; opacity: .5; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.highlight-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5550;
  white-space: nowrap;
  cursor: pointer;
}
.mode-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 34px;
  overflow: hidden;
  border: 1px solid #aeb8b3;
  border-radius: 4px;
}
.mode-button {
  min-width: 76px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid #aeb8b3;
  color: #4b5550;
  background: #fff;
  font-size: 12px;
}
.mode-button:last-child { border-right: 0; }
.mode-button.active { color: #fff; background: #304c44; }

.action-button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #9eaaa4;
  border-radius: 4px;
  color: #27322d;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.action-button.primary { border-color: #145f4d; color: #fff; background: #145f4d; }

.pack-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #dce2df;
  color: #5e6963;
  background: #f8faf9;
  font-size: 12px;
}
.pack-bar #pack-name { color: #26312c; font-weight: 700; }
.pack-bar #remove-pack { margin-left: auto; border: 0; color: #8a332d; background: transparent; font-size: 12px; }

.workspace { height: calc(100vh - 98px); display: grid; grid-template-columns: minmax(320px, 36%) minmax(0, 1fr); }
.results-pane { min-width: 0; overflow: hidden; border-right: 1px solid #cdd4d0; background: #fff; }
.pane-heading { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e0e5e2; }
.pane-heading h1 { margin: 0; font-size: 14px; font-weight: 750; }
.result-count { color: #6b756f; font-size: 12px; }
.results-list { height: calc(100% - 46px); overflow-y: auto; }
.result-item { width: 100%; min-height: 102px; display: block; padding: 13px 16px; border: 0; border-bottom: 1px solid #e5e9e7; text-align: left; color: inherit; background: #fff; }
.result-item:hover { background: #f5f8f6; }
.result-item.selected { box-shadow: inset 3px 0 0 #168466; background: #edf5f1; }
.result-tag { margin-bottom: 6px; font-size: 14px; line-height: 1.25; font-weight: 750; }
.result-cite { display: -webkit-box; margin-bottom: 8px; overflow: hidden; color: #535e58; font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.result-meta { display: flex; gap: 10px; color: #758079; font-size: 11px; }

.detail-pane { min-width: 0; overflow: hidden; background: #e9edeb; }
.detail-empty,
.empty-state,
.loading-state,
.error-state { height: 100%; display: grid; place-items: center; padding: 24px; color: #707a75; font-size: 14px; text-align: center; }
.detail-content { height: 100%; overflow-y: auto; }
.detail-toolbar { height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #cdd4d0; background: #fff; }
.card-meta { min-width: 0; overflow: hidden; color: #65706a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.copy-button,
.back-button { height: 30px; padding: 0 12px; border: 1px solid #9eaaa4; border-radius: 4px; color: #27322d; background: #fff; font-size: 12px; font-weight: 700; }
.copy-button { width: 88px; }
.back-button { display: none; }
.card-document { width: min(900px, calc(100% - 56px)); min-height: calc(100% - 64px); margin: 18px auto 0; padding: 46px 54px 80px; overflow-wrap: anywhere; background: #fff; box-shadow: 0 1px 4px rgba(25, 40, 33, .16); }
.card-paragraph { max-width: 100%; margin: 0 0 4pt; white-space: pre-wrap; color: #000; font-family: Calibri, Arial, sans-serif; letter-spacing: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .app-header { grid-template-columns: 90px minmax(220px, 1fr); }
  .header-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .workspace { height: calc(100vh - 142px); }
}

@media (max-width: 700px) {
  .app-header { grid-template-columns: 1fr; gap: 8px; }
  .brand { display: none; }
  .header-actions { grid-column: 1; overflow-x: auto; justify-content: flex-start; }
  .pack-bar { padding: 0 12px; }
  .pack-bar #pack-details { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace { height: calc(100vh - 160px); display: block; }
  .results-pane,
  .detail-pane { width: 100%; height: 100%; border-right: 0; }
  .detail-pane { display: none; }
  body.detail-open .results-pane { display: none; }
  body.detail-open .detail-pane { display: block; }
  .back-button { display: inline-block; }
  .detail-toolbar { padding: 0 10px; }
  .card-document { width: 100%; min-height: calc(100% - 46px); margin: 0; padding: 28px 22px 64px; box-shadow: none; }
}