/* Controls, fields, the email composer, the detail panels and sign-in.
   Loaded after styles.css. */

/* ---------- buttons and controls ---------- */

.controls { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }
.btn {
  border: 1px solid var(--line); background: transparent; color: var(--foam);
  border-radius: var(--radius-sm); padding: 6px 13px; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, filter 0.15s, transform 0.15s;
}
.btn:hover:not(:disabled) { background: rgba(207, 233, 227, 0.08); border-color: rgba(62, 224, 196, 0.3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-solid {
  background: linear-gradient(180deg, var(--lagoon), var(--teal-ink));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 8px 20px -14px rgba(62, 224, 196, 0.9);
}
.btn-solid:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); background: linear-gradient(180deg, var(--lagoon), var(--teal-ink)); }
.btn-solid:disabled { filter: saturate(0.6); transform: none; }
.btn-quiet { background: var(--wash); }
.btn-small { padding: 3px 9px; font-size: 12px; }
.btn-wide { width: 100%; padding: 10px; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.button-row-tight { gap: 5px; flex-wrap: nowrap; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(6, 36, 33, 0.35); }
.seg { border: 0; background: transparent; color: var(--sea-mist); padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.seg + .seg { border-left: 1px solid var(--line); }
.seg:hover { background: rgba(207, 233, 227, 0.07); color: var(--foam); }
.seg[aria-pressed='true'] { background: rgba(62, 224, 196, 0.14); color: var(--aurora); font-weight: 600; }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sea-mist); cursor: pointer; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 34px; height: 19px; border-radius: 999px; background: rgba(207, 233, 227, 0.14); border: 1px solid var(--line); position: relative; transition: background 0.15s; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--sea-mist); transition: transform 0.15s, background 0.15s; }
.switch-input:checked + .switch-track { background: rgba(62, 224, 196, 0.32); }
.switch-input:checked + .switch-track .switch-knob { transform: translateX(15px); background: var(--aurora); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--aurora); outline-offset: 2px; }

/* ---------- fields ---------- */

/* One input treatment across the panel, matching the sign-in card: 13px corners, teal focus ring. */
.input,
.field input:not(.code-input):not([type='color']),
.field select,
.field textarea {
  width: 100%; background: rgba(6, 36, 33, 0.62); color: var(--foam);
  border: 1px solid rgba(207, 233, 227, 0.14); border-radius: var(--radius-field);
  padding: 9px 12px; font-size: 14px;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.input:hover:not(:disabled):not([readonly]),
.field input:hover:not(.code-input):not([type='color']):not([readonly]),
.field select:hover,
.field textarea:hover { border-color: rgba(207, 233, 227, 0.26); }
.input:focus-visible,
.field input:not([type='color']):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none; border-color: var(--aurora); background: rgba(6, 36, 33, 0.9); box-shadow: var(--ring);
}
.input[readonly] { color: var(--sea-mist); background: rgba(6, 36, 33, 0.4); cursor: default; }
.input[aria-invalid='true'] { border-color: rgba(255, 143, 122, 0.7); }
.input::placeholder { color: rgba(143, 183, 174, 0.6); }
.input-search { width: min(320px, 60vw); }
textarea.input { resize: vertical; min-height: 110px; }
select.input { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--sea-mist) 50%), linear-gradient(135deg, var(--sea-mist) 50%, transparent 50%); background-position: right 15px top 50%, right 10px top 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 var(--gap-3); }
.field label { font-size: 12px; color: var(--sea-mist); letter-spacing: 0.01em; }
.field .hint, .hint { font-size: 11.5px; color: var(--sea-mist); }
.field-error { font-size: 11.5px; color: var(--critical); margin: -8px 0 var(--gap-2); }

/* ---------- tabs ---------- */

.tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--gap-3); border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 36, 33, 0.4); }
.tab { border: 0; background: transparent; color: var(--sea-mist); padding: 5px 14px; font-size: 13px; border-radius: 9px; cursor: pointer; }
.tab:hover { color: var(--foam); }
.tab[aria-selected='true'] { background: rgba(62, 224, 196, 0.14); color: var(--aurora); font-weight: 600; }

/* ---------- the email composer ---------- */

.compose { display: flex; flex-direction: column; min-width: 0; }
.compose-panel { min-width: 0; }
.compose-panel:focus { outline: none; }
.compose-body { display: grid; gap: var(--gap-4); min-width: 0; align-items: start; }
/* Wide enough for both: the message and the preview of it sit side by side. */
.compose[data-layout='split'] .compose-body { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.compose-grid { display: flex; flex-direction: column; max-width: 760px; }
.compose-to { display: flex; align-items: flex-end; gap: var(--gap-2); }
.compose-to .field { flex: 1; min-width: 0; }
.compose-to .btn { margin-bottom: var(--gap-3); }
.compose-extras { border-left: 2px solid var(--line); padding-left: var(--gap-3); margin-bottom: var(--gap-2); }
.compose-extras .field:last-child { margin-bottom: 0; }
.compose-actions { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; margin-top: var(--gap-1); }
.compose-note { font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: var(--gap-3); background: rgba(62, 224, 196, 0.09); border: 1px solid var(--line); }
.compose-note[data-kind='error'] { background: rgba(255, 143, 122, 0.09); border-color: rgba(255, 143, 122, 0.36); color: var(--foam); }

.editor-wrap { display: flex; flex-direction: column; }
.editor {
  font-family: var(--ff-mono); font-size: 13px; line-height: 1.65; min-height: 240px;
  tab-size: 2; letter-spacing: 0.005em;
}
.compose-compact .editor { min-height: 130px; }
.editor-count { margin: -8px 0 var(--gap-3); text-align: right; font-size: 11px; color: var(--sea-mist); font-variant-numeric: tabular-nums; }
/* The code editor has no field wrapper, so the count needs its own room. */
.code-editor + .editor-count { margin-top: 7px; }

/* Preview: the message as it will land, on a lighter sheet so it reads as "outside". */
.preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunk); padding: var(--gap-3) var(--gap-4); margin-bottom: var(--gap-3); }
.compose[data-layout='split'] .preview { position: sticky; top: 74px; margin-bottom: 0; }
.preview-head { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 4px 14px; margin: 0 0 var(--gap-3); padding-bottom: var(--gap-3); border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.preview-head dt { color: var(--sea-mist); }
.preview-head dd { margin: 0; overflow-wrap: anywhere; }
.preview-body { font-size: 13.5px; line-height: 1.65; }
.preview-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-signature { white-space: pre-wrap; margin-top: var(--gap-4); padding-top: var(--gap-2); border-top: 1px solid var(--line-soft); color: var(--sea-mist); font-size: 12.5px; }

.sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-2); padding: var(--gap-4); border: 1px solid rgba(62, 224, 196, 0.28); border-radius: var(--radius); background: rgba(62, 224, 196, 0.06); }
.sent h3 { font-size: 16px; }
.sent-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sent-list li { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(6, 36, 33, 0.6); border: 1px solid var(--line); font-family: var(--ff-mono); }

.mail-accounts { margin-bottom: var(--gap-4); padding-bottom: var(--gap-3); border-bottom: 1px solid var(--line-soft); }
.mail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mail-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunk); font-size: 12px; }
.mail-chip strong { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; }
.mail-chip small { font-size: 10.5px; }

/* ---------- message and shop detail ---------- */

.split > .panel-detail { align-self: start; }
.detail-body { display: flex; flex-direction: column; gap: var(--gap-3); min-width: 0; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); flex-wrap: wrap; }
.detail-head h3 { font-size: 16px; }
.facts { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 13px; }
.facts dt { color: var(--sea-mist); font-size: 12px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.cv-link { display: inline-flex; align-items: center; gap: 6px; }
.cv-link::before { content: '↓'; font-size: 11px; opacity: 0.8; }
.message-body { background: rgba(6, 36, 33, 0.5); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow-y: auto; }
.internal-note { padding: 10px 13px; border-radius: var(--radius); border: 1px dashed rgba(242, 200, 121, 0.35); background: rgba(242, 200, 121, 0.05); font-size: 13px; }
.internal-note .eyebrow { color: var(--warn); }

/* ---------- sign-in (already designed; match this level of finish elsewhere) ---------- */

.signin { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 24px; overflow: hidden; }
.signin-glow {
  position: absolute; inset: -30% -10% auto; height: 70vh; pointer-events: none;
  background:
    radial-gradient(48% 55% at 28% 30%, rgba(62, 224, 196, 0.16), transparent 70%),
    radial-gradient(45% 50% at 78% 18%, rgba(19, 138, 124, 0.22), transparent 72%);
  filter: blur(6px);
}
.signin-card {
  position: relative; width: min(430px, 100%); padding: 32px 30px 26px;
  border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 69, 64, 0.92), rgba(11, 53, 49, 0.96)), var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}
.signin-card::before {
  content: ''; position: absolute; inset: -1px -1px auto; height: 1px; border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, transparent, rgba(62, 224, 196, 0.55), transparent);
}
.signin-head { margin-bottom: 22px; }
.signin-card .brand { margin: 0 0 20px; }
.signin-eyebrow {
  margin: 0 0 6px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--aurora);
}
.signin-card h1 { font-size: 27px; margin: 0 0 8px; letter-spacing: -0.02em; }
.signin-card h2 { font-size: 16px; margin-bottom: 4px; }
.signin-sub { font-size: 13.5px; line-height: 1.55; color: var(--sea-mist); margin: 0; max-width: 34ch; }
.signin-form { display: grid; gap: 16px; margin-top: 4px; }
.signin-form .field { margin: 0; }
.signin-form label { font-size: 12.5px; letter-spacing: 0.01em; }
.signin-form input, .signin-form .field input:not(.code-input) { height: 46px; }
.signin-form .code-input {
  font-family: var(--ff-mono); font-size: 19px; letter-spacing: 0.42em; text-indent: 0.42em; text-align: center;
}
.signin-form .btn-wide {
  height: 48px; margin-top: 4px; border-radius: var(--radius-field); font-size: 15px;
  box-shadow: 0 10px 24px -14px rgba(62, 224, 196, 0.9);
}
.signin-status {
  font-size: 13px; padding: 10px 13px; border-radius: 12px; margin: 0 0 16px;
  background: rgba(255, 143, 122, 0.12); border: 1px solid rgba(255, 143, 122, 0.4); color: var(--foam);
}
.signin-status[data-kind='ok'] { background: rgba(62, 224, 196, 0.12); border-color: var(--line); }
.signin-foot {
  display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; color: var(--sea-mist);
}
.signin-lock { color: var(--aurora); font-size: 11px; line-height: 1.6; }

.code-input {
  width: 100%; letter-spacing: 0.4em; font-size: 20px; text-align: center; font-family: var(--ff-mono);
  background: rgba(6, 36, 33, 0.62); border: 1px solid rgba(207, 233, 227, 0.14);
  border-radius: var(--radius-field); padding: 10px; color: var(--foam);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.code-input:focus-visible { outline: none; border-color: var(--aurora); box-shadow: var(--ring); }
.setup { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.qr-wrap { display: flex; justify-content: center; padding: 14px 0; }
.qr { border-radius: 8px; }
.secret-label { font-size: 12px; color: var(--sea-mist); margin-bottom: 4px; }
.secret { font-family: var(--ff-mono); font-size: 15px; letter-spacing: 0.08em; word-spacing: 0.35em; background: rgba(6, 36, 33, 0.6); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 18px; overflow-wrap: anywhere; }

/* ---------- narrow screens ---------- */

/* On a phone the address chips only repeat what the From select already says. */
@media (max-width: 720px) {
  .mail-accounts { display: none; }
}

@media (max-width: 480px) {
  .input-search { width: 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: 8px; }
  .preview-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .preview-head dd { margin-bottom: 7px; }
  .compose-to { flex-direction: column; align-items: stretch; }
  .compose-to .btn { margin: -6px 0 var(--gap-3); align-self: flex-start; }
  .tabs { width: 100%; }
  .tab { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-solid:hover:not(:disabled) { transform: none; }
}

/* ---------- checkboxes and standalone labels ---------- */

.field-label, .snippets-label { font-size: 12px; color: var(--sea-mist); letter-spacing: 0.01em; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0 0 var(--gap-3); font-size: 13px; }
.check:last-child { margin-bottom: 0; }
.check > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center;
  border: 1px solid rgba(207, 233, 227, 0.28); border-radius: 6px; background: rgba(6, 36, 33, 0.6);
  transition: background-color 0.15s, border-color 0.15s;
}
.check-input:checked + .check-box { background: var(--aurora); border-color: var(--aurora); }
.check-input:checked + .check-box::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--abyss); border-bottom: 2px solid var(--abyss); transform: rotate(-45deg);
}
.check-input:focus-visible + .check-box { outline: 2px solid var(--aurora); outline-offset: 2px; }

.format-row { display: flex; align-items: center; gap: var(--gap-3); margin: 0 0 var(--gap-3); flex-wrap: wrap; }

/* ---------- the HTML code editor ---------- */

.editor-tools { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.snippets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.snippets-chips { padding-top: 2px; }
.chip {
  font-family: var(--ff-mono); font-size: 11.5px; padding: 3px 9px; cursor: pointer;
  border: 1px dashed rgba(62, 224, 196, 0.4); border-radius: 999px;
  background: rgba(62, 224, 196, 0.08); color: var(--aurora);
}
.chip:hover { background: rgba(62, 224, 196, 0.16); border-style: solid; }

.code-editor {
  position: relative; display: grid; height: 340px; overflow: hidden;
  border: 1px solid rgba(207, 233, 227, 0.14); border-radius: var(--radius-field);
  background: rgba(6, 36, 33, 0.62); transition: border-color 0.18s, box-shadow 0.18s;
}
.code-editor:focus-within { border-color: var(--aurora); box-shadow: var(--ring); }
.code-editor[data-readonly='true'] { background: rgba(6, 36, 33, 0.4); }
.compose-compact .code-editor { height: 220px; }
.code-layer, .code-input {
  grid-area: 1 / 1; margin: 0; padding: 12px 14px; border: 0; overflow: auto;
  font: 400 13px/1.65 var(--ff-mono); letter-spacing: 0; tab-size: 2;
  white-space: pre; word-break: normal; overflow-wrap: normal;
}
.code-layer { pointer-events: none; color: var(--foam); }
.code-input { background: transparent; color: transparent; caret-color: var(--aurora); resize: none; outline: none; }
.code-input::selection { background: rgba(62, 224, 196, 0.3); }

.tok-tag { color: #3ee0c4; }
.tok-punct { color: #6f9a93; }
.tok-attr { color: #7fb2ff; }
.tok-value { color: #f2c879; }
.tok-comment { color: #5f8f87; font-style: italic; }
.tok-doctype { color: #c6a8ff; }
.tok-entity { color: #c6a8ff; }

/* ---------- the rendered preview ---------- */

.mail-preview { display: flex; flex-direction: column; min-width: 0; }
.mail-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); flex-wrap: wrap; }
.mail-preview-head .tabs { margin-bottom: var(--gap-2); }
.mail-preview-status { font-size: 11px; color: var(--sea-mist); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.mail-preview-body { min-width: 0; }
.mail-frame-wrap {
  display: flex; justify-content: center; overflow: auto; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(6, 36, 33, 0.5);
}
.mail-frame {
  width: var(--frame-w, 620px); max-width: 100%; height: var(--preview-h, 520px);
  border: 0; border-radius: 10px; background: #fff; flex: none;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
.mail-text {
  margin: 0; padding: 14px 16px; height: var(--preview-h, 520px); overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(6, 36, 33, 0.5);
  font: 400 12.5px/1.7 var(--ff-mono); color: var(--foam); white-space: pre-wrap; overflow-wrap: anywhere;
}
.mail-source { display: flex; flex-direction: column; gap: 8px; }
.mail-source-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); flex-wrap: wrap; }
.mail-source .code-editor { height: var(--preview-h, 520px); }

/* ---------- the template screen ---------- */

.split-template { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
/* The form is long; keep the preview in view while it is scrolled. */
.split-template > .panel:last-child { position: sticky; top: 74px; }
.template-form { display: flex; flex-direction: column; gap: var(--gap-3); }
.template-form .panel-inset .field:last-of-type { margin-bottom: 0; }
.colour-field { margin-bottom: var(--gap-2); }
.colour-row { display: flex; align-items: center; gap: 8px; }
.colour-row .colour-well {
  flex: 0 0 auto; width: 46px; min-width: 46px; height: 38px; padding: 3px; cursor: pointer;
  border: 1px solid rgba(207, 233, 227, 0.18); border-radius: var(--radius-sm); background: rgba(6, 36, 33, 0.6);
}
.colour-row .colour-text { flex: 1 1 auto; min-width: 0; }
.colour-row .colour-well:focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; }
.colour-well::-webkit-color-swatch-wrapper { padding: 0; }
.colour-well::-webkit-color-swatch { border: 0; border-radius: 6px; }
.colour-text { font-family: var(--ff-mono); font-size: 13px; text-transform: lowercase; }
.colour-text[data-bad='true'] { border-color: rgba(255, 143, 122, 0.6); }

.links { display: flex; flex-direction: column; gap: 8px; margin-top: var(--gap-2); }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.warn-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid rgba(242, 200, 121, 0.32); background: rgba(242, 200, 121, 0.06); }
.warn-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.contrast-warnings .hint { margin-top: 2px; }

/* ---------- sub-tabs ---------- */

.tabs-sub { align-self: flex-start; }
a.tab { text-decoration: none; display: inline-block; }

@media (max-width: 1100px) {
  .split-template { grid-template-columns: minmax(0, 1fr); }
  /* Once the columns stack there is nothing to stay beside, so let it scroll away. */
  .split-template > .panel:last-child { position: static; }
}

@media (max-width: 600px) {
  .link-row { grid-template-columns: minmax(0, 1fr); }
  .code-editor { height: 260px; }
  .mail-frame-wrap { padding: 6px; }
  .snippets { gap: 4px; }
}

.preview-blocked {
  font-size: 11.5px; line-height: 1.5; color: var(--warn); margin-bottom: 8px;
  padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid rgba(242, 200, 121, 0.3); background: rgba(242, 200, 121, 0.06);
}