/* The six tools in the sidebar's top group (Figma frames 49:3389 Fact check,
   49:3654 Find sources, 49:3878 Cite, 49:4105 Works cited, 49:4329 Better
   claim, 49:4535 Evidence). They share a header (the tool's name, the plans
   it is on, one line under it), white panels on the design's warm line, the
   query box, the small buttons and the cream note. Each page's own layout is
   in its own file; everything here is scoped to .tool-page so it cannot leak. */

/* header */
.tool-page .ph-title { gap: 8px; }
.tool-page .ph-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tool-page .chip {
  flex: none; padding: 3px 9px; border-radius: 999px; background: var(--sand);
  color: var(--body); font-size: 11px; font-weight: 600; line-height: 13px; white-space: nowrap;
}
.tool-page .chip.paid { background: rgba(255, 87, 34, .12); color: #c2410c; }

/* the soft orange button (Apply fix, Delete one) */
.tool-page .btn-soft { background: rgba(255, 87, 34, .1); color: #c2410c; }
.tool-page .btn-soft:hover { background: rgba(255, 87, 34, .16); }

/* panels: white, the design's line, 16 px corners */
.tool-page .panel { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.tool-page .panel-head { padding: 16px 24px 12px; border-bottom: 1px solid var(--line); }
.tool-page .panel-head h2 { font-size: 14px; font-weight: 700; line-height: 17px; }
.tool-page .panel-head p { color: var(--body); font-size: 13px; line-height: 16px; }
/* the bigger head: a title and a line under it (Find sources, Evidence) */
.tool-page .panel-head.big { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px 16px; }
.tool-page .panel-head.big h2 { font-size: 16px; line-height: 19px; }

/* a coloured dot or bar: a finding's kind (colour only ever means a finding) */
.tool-page .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tool-page .bar { flex: none; width: 3px; border-radius: 2px; background: var(--c); }
.tool-page .kind { display: flex; align-items: center; gap: 7px; color: var(--red); font-size: 12px; font-weight: 700; line-height: 15px; white-space: nowrap; }
.tool-page .kind img { flex: none; width: 8px; height: 8px; }

/* "Checking" and "Searching…": the grey status pill */
.tool-page .status {
  display: inline-flex; flex: none; align-items: center; gap: 6px; border-radius: 999px; background: var(--sand);
  color: var(--body); font-weight: 600; white-space: nowrap;
}
.tool-page .status img { flex: none; width: 7px; height: 7px; animation: pulse 1.4s ease-in-out infinite; }

/* the query box (Find sources, Cite) */
.tool-page .query { display: flex; align-items: center; gap: 12px; }
.tool-page .qbox {
  display: flex; flex: 1 0 0; align-items: center; gap: 10px; min-width: 0;
  height: 52px; padding: 0 16px; border: 1px solid #ded5c9; border-radius: 12px; background: #fff;
}
.tool-page .qbox:focus-within { border-color: #c9bba9; }
.tool-page .qbox img { flex: none; width: 18px; height: 18px; }
.tool-page .qbox input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 400 15px/1.21 Inter, system-ui, sans-serif; letter-spacing: inherit;
}
.tool-page .qbox input::placeholder { color: var(--faint); opacity: 1; }

/* the cream note under a tool, and the honest "not here yet" note */
.tool-page .note { padding: 14px 18px; border-radius: 14px; background: #fff0e3; color: var(--body); font-size: 13px; line-height: 20px; }
.tool-page .note a { color: var(--orange-ink); font-weight: 600; text-decoration: underline; }
.tool-page .note.show { animation: rise .22s var(--ease); }

/* whatever a tool hides stays hidden, whatever its display */
.tool-page [hidden] { display: none !important; }

@media (max-width: 960px) {
  .tool-page .ph-name { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 640px) {
  .tool-page .ph { gap: 14px; }
  .tool-page .ph-title { flex-basis: 100%; }
  .tool-page .query { flex-wrap: wrap; }
  .tool-page .qbox { flex-basis: 100%; }
  .tool-page .panel-head, .tool-page .panel-head.big { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-page .status img { animation: none; }
  .tool-page .note.show { animation: none; }
}