/* Anystore: the few rules this tool adds to the Geexer house style (css/geexer.css, which holds the
   tokens, the type, buttons, fields and the switch). Colours, sizes and timings come from the
   tokens only. One dark world (html data-theme="dark"), like every Geexer monitor-style tool.
   Class names start with as- so they never meet the kit's. */

/* The kit's .btn sets display, which would beat the hidden attribute. */
.as-body [hidden] { display: none !important; }

.as-body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* ---- Header: the lockup (wordmark + tool name in the display voice), a sign-out button ---- */
.as-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
/* The name has the cap height of the wordmark: 1.37 x its height (HOUSE-STYLE.md, tool patterns). */
.as-lockup { display: flex; align-items: baseline; gap: .7rem; color: var(--fg); text-decoration: none; }
.as-lockup img { height: 22px; width: auto; filter: var(--logo-filter); }
.as-lockup-name {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(22px * 1.37);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
@media (max-width: 639.98px) {
  .as-lockup img { height: 18px; }
  .as-lockup-name { font-size: calc(18px * 1.37); }
}
/* The lockup and the button do not fit side by side on a phone, so the header stacks (the same
   call Claude usage makes, a little earlier than the kit's 640). */
@media (max-width: 659.98px) {
  .as-bar { flex-direction: column; align-items: flex-start; justify-content: center; gap: .85rem; padding-top: 1rem; padding-bottom: 1rem; }
}

/* ---- Login ---- */
.as-login { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--section-y) var(--gutter); }
.as-login .lead { margin-top: 1.25rem; }
.as-form { width: 100%; max-width: 28rem; margin-top: var(--head-gap); }
.as-login .as-lockup { margin-bottom: var(--head-gap); }

/* ---- Search page ---- */
.as-main { flex: 1; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) var(--section-y); }
.as-title { max-width: 18em; }
.as-search { margin-top: var(--head-gap); max-width: 46rem; }
.as-search .field { margin-bottom: 0; }
.as-search .field input { font-size: var(--fs-lead); padding-top: 1.5rem; }
.as-search .field label { font-size: var(--fs-lead); top: 1.5rem; }
.as-search .field input:focus ~ label,
.as-search .field input:not(:placeholder-shown) ~ label { transform: translateY(-1.5rem) scale(.55); }
.as-search .field input::-webkit-search-cancel-button { display: none; }
/* The kit's Clear button is centred for a 17px field; this one is the lead size, so centre it again. */
.as-search .field-clear { top: calc(1.5rem + .7 * var(--fs-lead) - 22px); }

.as-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.as-controls .tier-switch-wrap { gap: .75rem 1.25rem; }
.as-controls .tier-switch { flex-wrap: wrap; row-gap: .6rem; }
.as-controls .tier-switch .count { margin-left: .5em; font-variant-numeric: tabular-nums; font-weight: 600; opacity: .72; }
.as-detected { margin-top: .9rem; color: var(--fg-muted); }

.as-status { min-height: 1.4em; margin-top: 2rem; color: var(--fg-muted); }
.as-status strong { color: var(--fg); }
/* The kit's .link is meant for anchors; these are buttons that look the same (no default button face). */
.as-status .link, .as-try .link {
  margin: 0 0 0 .35em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-stretch: 112%;
  color: var(--fg);
  cursor: pointer;
}

.as-results { margin-top: .75rem; border-top: 2px solid var(--fg); }
.as-results:empty { display: none; }
.as-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
/* Two equal halves, so the commands of every row start on one shared line (HOUSE-STYLE.md, Layout) */
@media (min-width: 900px) {
  .as-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
.as-name { overflow-wrap: anywhere; }
.as-meta { margin-top: .35rem; color: var(--fg-muted); }
.as-meta .sep { margin: 0 .5em; }
.as-meta .link { color: var(--fg-muted); }
.as-summary { margin-top: .6rem; max-width: var(--measure-body); }
.as-cmds { display: grid; gap: .35rem; min-width: 0; padding-bottom: .55rem; border-bottom: 1px solid rgba(var(--fg-rgb), .5); }
/* No monospace face: the house style has one typeface, so a command is Archivo bold (rule 5). */
.as-cmd {
  display: block;
  font-weight: 700;
  font-stretch: 100%;
  font-size: var(--fs-body);
  line-height: 1.4;
  font-variant-ligatures: none;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--fg);
}
.as-act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .75rem; }
.as-notes { color: var(--fg-muted); }
.as-more { margin-top: 2rem; }

/* ---- One-line footer in the page's world (tool patterns) ---- */
.as-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding: 1.25rem var(--gutter);
  border-top: 1px solid rgba(var(--fg-rgb), .1);
  color: var(--fg-muted);
}
.as-foot p { color: var(--fg-muted); max-width: 70ch; }

@media (max-width: 639.98px) {
  .as-cmds { padding-bottom: .5rem; }
  .as-act .btn { width: 100%; }
}