/* Qwertious Accounts -- login modal and dashboard.
   Scoped under .qip- prefixes so it can drop onto any page of the site without
   colliding with main.css, which styles bare <div> and <p> elements globally. */

.qip-btn,
.qip-modal,
.qip-modal * {
  box-sizing: border-box;
}

/* main.css styles bare <div> globally (margin 1%, padding 3%, min-height 12vh,
   a background and a shadow). Every div this file introduces must opt out of that
   or the modal loses its positioning and the layout fills with amber boxes.
   The specificity here has to land between two bounds: high enough to beat
   main.css's bare `div` (0,0,1), low enough to lose to the single-class rules
   further down this file. Single-class selectors (0,1,0) placed first do that.
   The descendant part uses `:where(div)` so it stays at (0,1,0) -- written as
   `.qip-modal div` it would be (0,1,1) and would strip .qip-card's own styling. */
.qip-modal,
.qip-card,
.qip-panel,
.qip-nav,
.qip-dash,
.qip-page,
.qip-field,
.qip-actions,
.qip-tabs,
.qip-msg,
.qip-recovery,
.qip-danger,
.qip-table-wrap,
.qip-check,
.qip-modal :where(div),
.qip-card :where(div),
.qip-panel :where(div),
.qip-page :where(div),
.qip-dash :where(div) {
  margin: 0;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ---- the header button ---- */

.qip-login-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.1em;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 2em;
  background: #ffe0a0e0;
  color: #800040;
  font: bold 1rem Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.qip-login-btn:hover {
  background: #fff0c8;
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}

.qip-login-btn .qip-avatar {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #800040;
  color: #ffe0a0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  flex: none;
}

/* ---- modal ---- */

.qip-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 20, 40, .55);
  backdrop-filter: blur(3px);
  font: 15px/1.5 Arial, sans-serif;
}

.qip-modal.qip-open {
  display: flex;
}

.qip-card {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  padding: 1.6rem;
  border-radius: 1.2rem;
  background: linear-gradient(#fffdf7, #fff4de);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  color: #201810;
  min-height: 0;
}

.qip-card h2 {
  margin: 0 0 .2em;
  font-size: 1.5rem;
  color: #800040;
}

.qip-sub {
  margin: 0 0 1.2em;
  font-size: .85rem;
  color: #6b5a45;
}

.qip-tabs {
  display: flex;
  gap: .3rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid #e8d7b8;
}

.qip-tab {
  padding: .5em .9em;
  border: 0;
  background: none;
  font: inherit;
  color: #6b5a45;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.qip-tab.qip-active {
  color: #800040;
  font-weight: bold;
  border-bottom-color: #ffc040;
}

.qip-field {
  margin-bottom: .9rem;
}

.qip-field label {
  display: block;
  margin-bottom: .3em;
  font-size: .82rem;
  font-weight: bold;
  color: #4a3c2c;
}

.qip-field input,
.qip-field select,
.qip-field textarea {
  width: 100%;
  padding: .6em .8em;
  border: 1px solid #d8c4a0;
  border-radius: .6em;
  background: #fffefb;
  font: inherit;
  color: #201810;
}

.qip-field input:focus,
.qip-field textarea:focus {
  outline: 2px solid #ffc040;
  border-color: #ffc040;
}

.qip-hint {
  margin: .3em 0 0;
  font-size: .76rem;
  color: #6b5a45;
}

.qip-actions {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
}

.qip-btn {
  flex: 1;
  padding: .7em 1em;
  border: 0;
  border-radius: .7em;
  font: bold 1rem Arial, sans-serif;
  cursor: pointer;
  transition: filter .15s;
}

.qip-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.qip-btn:disabled {
  opacity: .55;
  cursor: progress;
}

.qip-btn-primary {
  background: #ffc040;
  color: #4a2000;
}

.qip-btn-ghost {
  background: #ece0cb;
  color: #4a3c2c;
  flex: 0 0 auto;
}

.qip-msg {
  margin-top: 1rem;
  padding: .7em .9em;
  border-radius: .6em;
  font-size: .85rem;
  display: none;
}

.qip-msg.qip-show {
  display: block;
}

.qip-msg.qip-error {
  background: #ffe0e0;
  color: #8a1c1c;
  border-left: 4px solid #c62828;
}

.qip-msg.qip-ok {
  background: #e2f6e2;
  color: #1c5c22;
  border-left: 4px solid #2e7d32;
}

.qip-msg.qip-warn {
  background: #fff4d6;
  color: #7a5600;
  border-left: 4px solid #f0a000;
}

/* ---- recovery code hand-off ---- */

.qip-recovery {
  margin: 1rem 0;
  padding: 1rem;
  border: 2px dashed #c9a227;
  border-radius: .8em;
  background: #fffbec;
  font: bold .95rem/1.7 "Consolas", "Courier New", monospace;
  word-break: break-all;
  user-select: all;
  color: #4a3400;
}

.qip-danger {
  margin: .6rem 0 0;
  padding: .7em .9em;
  border-left: 4px solid #c62828;
  background: #fff0f0;
  border-radius: .4em;
  font-size: .82rem;
  color: #7a1c1c;
}

.qip-check {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin-top: .9rem;
  font-size: .85rem;
}

.qip-check input {
  width: auto;
  margin-top: .25em;
  flex: none;
}

/* ---- dashboard ---- */

.qip-dash {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}

.qip-panel {
  margin: 0 0 1.2rem;
  padding: 1.3rem 1.5rem;
  border-radius: 1rem;
  background: #fffdf7e8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  min-height: 0;
}

.qip-panel h3 {
  margin: 0 0 .2em;
  font-size: 1.15rem;
  color: #800040;
}

.qip-panel > p.qip-sub {
  margin-bottom: 1rem;
}

.qip-kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: .5em 1.2em;
  font-size: .9rem;
}

.qip-kv dt {
  font-weight: bold;
  color: #4a3c2c;
}

.qip-kv dd {
  margin: 0;
  word-break: break-all;
  font-family: "Consolas", "Courier New", monospace;
  font-size: .85rem;
}

.qip-table-wrap {
  overflow-x: auto;
}

.qip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  table-layout: auto;
}

.qip-table th,
.qip-table td {
  padding: .5em .7em;
  text-align: left;
  border-bottom: 1px solid #ecdfc8;
  white-space: nowrap;
}

.qip-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b5a45;
}

.qip-dot {
  display: inline-block;
  width: .6em;
  height: .6em;
  border-radius: 50%;
  margin-right: .45em;
  vertical-align: baseline;
}

.qip-dot-on {
  background: #2e9c3a;
  box-shadow: 0 0 6px #2e9c3a80;
}

.qip-dot-off {
  background: #c62828;
}

.qip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.2rem;
  padding: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}

.qip-nav button {
  padding: .5em 1em;
  border: 0;
  border-radius: 2em;
  background: #ffffff99;
  color: #4a3c2c;
  font: inherit;
  cursor: pointer;
}

.qip-nav button.qip-active {
  background: #ffc040;
  color: #4a2000;
  font-weight: bold;
}

.qip-records {
  font-family: "Consolas", "Courier New", monospace;
  font-size: .78rem;
}

.qip-records li {
  margin-bottom: .4em;
  word-break: break-all;
}

.qip-pill {
  display: inline-block;
  padding: .12em .6em;
  border-radius: 1em;
  background: #ffe0a0;
  color: #6a4a00;
  font-size: .72rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.qip-pill-crit {
  background: #ffd0d0;
  color: #8a1c1c;
}

pre.qip-json {
  overflow-x: auto;
  padding: .9em;
  border-radius: .6em;
  background: #2b2418;
  color: #f3e6c8;
  font-size: .78rem;
  line-height: 1.45;
}

@media (max-width: 30rem) {
  .qip-kv {
    grid-template-columns: 1fr;
    gap: .1em;
  }

  .qip-kv dd {
    margin-bottom: .6em;
  }
}