/* Comms module styles — on the GUI tokens (kernel/assets/gui.css). */

/* one idea per band, paper voice, senior-friendly sizes */

.field-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--ink);
}

textarea,
.select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
textarea:focus,
.select:focus {
  outline: 3px solid rgb(14 116 144 / .4);
  outline-offset: 1px;
  border-color: var(--accent);
}
.select { width: auto; margin: 0; min-height: 48px; }

.row-ish {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}
.row-ish .field-label { flex: 1; margin: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}
.actions .cta-pill { font-size: 1rem; min-height: 52px; }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .7rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  min-height: 48px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.btn-quiet:hover { border-color: var(--accent); }

.status {
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}
.status.good { color: #166534; }
.status.bad { color: #a12020; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* the sender's canvas — the "screen" the other phone reads */
.screen {
  margin-top: 1rem;
}
.screen canvas {
  display: block;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #101a2b;
}

.scan-pane {
  width: 100%;
  max-width: 26rem;
  margin: 1rem auto 0;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* the reader's meter */
.meter {
  position: relative;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: .9rem 0 0;
  background: var(--paper);
}
.meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .2s ease;
}
#meterLabel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .72rem;
  color: var(--ink);
}

.result {
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.result pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem;
  font-size: .95rem;
  margin: 0 0 .8rem;
}

details.fine summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}
details.fine summary::-webkit-details-marker { display: none; }
details.fine[open] summary { margin-bottom: .6rem; }
details.fine p { margin: 0 0 .6rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: #f2efe8;
  border-radius: 6px;
  padding: .1em .35em;
}

.tool[aria-disabled="true"] .t-body p,
.tool[aria-disabled="true"] h3 { color: var(--muted); }