/* Minimal, careful theme overrides to refine layout, spacing and accessibility
   This file intentionally contains a small set of targeted rules that override
   the most problematic cascade points in hone.css without replacing it.
*/
:root{
  --site-bg-1: #0b0b0d;
  --site-bg-2: #101217;
  --card-bg: #242628;
  --muted: #cfcfe0;
  --accent: #6699ff;
  --inset: 20px;
}
.site-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
html,body{height:100%;margin:0;padding:0;font-family: "Segoe UI", system-ui, -apple-system, "Segoe UI Historic", Arial, sans-serif;background:linear-gradient(180deg,var(--site-bg-1),var(--site-bg-2));color:var(--muted);display:flex;align-items:center;justify-content:center}
.card-table{max-width:520px;width:100%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:28px;box-shadow:0 12px 32px rgba(0,0,0,0.6);margin:0 auto;transform:none !important;top:auto !important;left:auto !important}
.card-table table{width:100%;border-collapse:collapse}
.card-table .form-row td{padding:6px 8px;vertical-align:middle}
.form-input,input[type="text"],input[type="email"],input[type="password"],textarea{width:100% !important;box-sizing:border-box;background:transparent;border:1px solid rgba(102,153,255,0.12);padding:8px 10px;border-radius:6px;color:var(--muted);height:40px;line-height:24px}
.form-input:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(102,153,255,0.06)}
.prompt-cell{padding:6px 8px}
.card-title{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:28px;color:#ffcc33;font-weight:700;pointer-events:none}
.button-row{display:flex;justify-content:flex-end;gap:8px;align-items:center}
/* Keep Reset visible and unobtrusive */
#resetBtn, #btnReset{background:transparent;border:1px solid rgba(176,176,176,0.24);color:var(--muted);padding:6px 10px;border-radius:6px}
.btn-google{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(102,153,255,0.12);background:transparent}
/* Debug UI hidden by default; can be toggled with keyboard shortcut (Ctrl+Shift+D) */
#debugModal, #debugToggle{display:none}
.dev-visible #debugPanel, .dev-visible #debugModal, .dev-visible #debugToggle{display:block}

/* Borders toggle: when present, show subtle borders around table cells for layout debugging */
.show-cell-borders .card-table td, .show-cell-borders .card-table th{outline:1px dashed rgba(255,255,255,0.06);}

/* Style for the borders toggle button (top-right duplicate removed earlier) */
#bordersToggle{background:transparent;border:1px solid rgba(102,153,255,0.12);color:var(--muted);padding:6px 8px;border-radius:6px;margin-left:8px}
#bordersToggle.active{background:rgba(102,153,255,0.06)}

/* Left fixed toolbar for debug and green borders */
.left-toolbar{
  position:fixed;left:12px;top:12%;/* raised closer to top */
  transform:none;display:flex;flex-direction:column;gap:8px;z-index:12000;padding:4px}
.left-toolbar button{display:block;padding:8px 10px;border-radius:8px;min-width:80px}
.left-toolbar button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,0.10)}

/* Slightly separate the toolbar on small screens */
@media (max-width:600px){ .left-toolbar{ left:6px; top:8%; gap:8px } }

/* Compact themed style for the left debug toggle */
.left-toolbar #debugToggle,
.left-toolbar button#debugToggle {
  background: var(--btn-bg, #2f3337) !important;
  color: var(--btn-color, #6699ff) !important;
  border: 0.5px solid rgba(102,153,255,0.12) !important;
  padding: 6px 8px !important;
  height: 32px !important;
  line-height: 20px !important;
  font-size: 0.92rem !important;
  min-width: 72px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: background 140ms ease, transform 120ms ease !important;
}
.left-toolbar #debugToggle:hover,
.left-toolbar button#debugToggle:hover {
  background: var(--btn-hover-bg, rgba(255,255,255,0.02)) !important;
  color: var(--btn-hover-color, var(--muted)) !important;
  transform: translateY(-1px) !important;
}
/* Small accessibility helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:560px){
  .card-table{padding:18px;border-radius:10px}
  .card-title{font-size:22px}
  .form-input,input{height:40px}
}