/* SmudgyFace Design Intake — styles
   Tokens reused verbatim from design/DESIGN-TOKENS.md (Willa), whose contrast ledger already
   verifies every pair below at AA. No new color combination is introduced here that isn't in
   that ledger — see the comment above each rule that cites its ledger row. */

:root {
  color-scheme: light;

  --color-ink:            #1A1A1F;
  --color-muted:          #5B5866;
  --color-canvas:         #FAF7FC;
  --color-surface:        #FFFFFF;
  --color-border:         #8C8579;
  --color-border-subtle:  #DDD7CE;

  --color-primary:        #C21575;
  --color-primary-hover:  #A01062;
  --color-primary-active: #7D0C4C;

  --color-accent:         #0B7A93;
  --color-accent-hover:   #085F73;

  --color-danger:         #A61B4A;

  --color-focus:          #1A1A1F;

  --color-tag-bg:         #F4EFE8;

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.3125rem;

  --space-2xs: 0.25rem;
  --space-xs:  0.375rem;
  --space-sm:  0.5rem;
  --space-md:  0.75rem;
  --space-lg:  1rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;

  --radius-sm: 6px;
  --radius-md: 8px;

  --touch-min: 2.75rem; /* 44px */
}

* { box-sizing: border-box; }

/* The UA stylesheet's [hidden] { display: none } loses to any element rule below that sets
   its own `display` (e.g. .submit-btn/.retry-btn set display:block) — re-assert it here so
   toggling the `hidden` attribute in app.js always actually hides the element. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
  color: var(--color-ink); /* ledger row 2 — ink on canvas, 16.4:1 */
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: 1.45;
}

/* Focus ring — ledger row 21, passes by construction against any background */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--color-focus);
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 2px 10px rgba(36, 31, 26, 0.08);
}

.topbar-logo {
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.topbar h1 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-ink); /* ledger row 1 */
}

.topbar-sub {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-muted); /* ledger row 3 */
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

.banner {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

/* ledger row 15 — color-danger text on white, 7.3:1, reused here for the warning banner */
.banner-warning {
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.banner code {
  background: var(--color-tag-bg);
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.connect-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(36, 31, 26, 0.12);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.connect-panel h2 {
  margin: 0 0 var(--space-sm);
}

.connect-panel .text-input {
  margin-bottom: var(--space-sm);
}

.connect-panel .submit-btn {
  margin-top: var(--space-sm);
}

.connected-bar {
  font-size: var(--text-sm);
  color: var(--color-muted); /* ledger row 4 */
  margin-bottom: var(--space-lg);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent); /* ledger row 12 */
  font-weight: 800;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.field-group {
  margin-bottom: var(--space-xl);
}

.field-label {
  display: block;
  font-weight: 800;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  color: var(--color-ink); /* ledger row 1 */
}

.required {
  color: var(--color-danger); /* ledger row 15 */
}

.field-hint {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted); /* ledger row 4 */
}

.text-input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border); /* ledger row 16, 3.65:1 */
  border-radius: var(--radius-md);
}

select.text-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
    linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.photo-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.photo-preview {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}

.photo-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); /* ledger row 16 */
  border-radius: var(--radius-md);
  color: var(--color-ink); /* ledger row 1 */
  background: var(--color-surface);
  font-weight: 800;
  cursor: pointer;
}

/* Defense-in-depth, not the primary fix: app.js never puts a raw filename in here anymore
   (see app.js's photo-change handler), but nothing should ever be able to spill out of this
   box regardless of what text ends up here later. */
#photo-button-text {
  /* min-width: 0 overrides the flex-item default of min-width: auto, which otherwise
     refuses to shrink below the text's natural width and defeats text-overflow entirely. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-button:hover {
  background: var(--color-tag-bg);
}

#photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-tag-bg);
  color: var(--color-ink); /* ledger row 5, 15.2:1 */
  font-size: var(--text-xs);
  font-weight: 800;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.tag-chip.tag-chip-new {
  outline: 1px dashed var(--color-accent);
}

.tag-chip-new-label {
  color: var(--color-accent); /* ledger row 12, on white/tag-bg card context, 4.98:1 */
  font-size: 0.65rem;
  text-transform: uppercase;
}

.tag-chip button {
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-weight: 900;
  cursor: pointer;
  padding: 0 var(--space-2xs);
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.tag-search-wrap {
  position: relative;
}

.tag-results {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs);
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(36, 31, 26, 0.18);
  max-height: 260px;
  overflow-y: auto;
}

.tag-result-item button {
  width: 100%;
  text-align: left;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--color-ink); /* ledger row 1 */
  font-size: var(--text-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.tag-result-item button:hover {
  background: var(--color-tag-bg);
}

.tag-result-item.tag-result-create button {
  color: var(--color-accent); /* ledger row 12 */
  font-weight: 800;
}

.submit-status {
  min-height: 1.5rem;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 800;
}

.submit-status.status-error {
  color: var(--color-danger); /* ledger row 15 */
}

.submit-status.status-ok {
  color: var(--color-accent); /* ledger row 12 */
}

.submit-btn,
.retry-btn {
  display: block;
  width: 100%;

  min-height: var(--touch-min);
  padding: var(--space-md);
  font-size: var(--text-base);
  font-weight: 900;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* ledger row 6 — white on primary, 5.74:1 */
.submit-btn {
  background: var(--color-primary);
  color: var(--color-surface);
}

.submit-btn:hover { background: var(--color-primary-hover); } /* row 7 */
.submit-btn:active { background: var(--color-primary-active); } /* row 8 */

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.retry-btn {
  margin-top: var(--space-sm);
  background: var(--color-surface);
  color: var(--color-danger); /* ledger row 15 */
  border: 1px solid var(--color-danger);
}