/* styles.css — shared styles for Spoon Tracker (landing, about, and app pages) */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8f4f0; color: #2d2416; min-height: 100vh; }

  header { background: #6b4f3a; color: white; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
  header h1 { font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }

  /* Public site header (landing + about) */
  .brand { color: white; text-decoration: none; font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .public-nav { display: flex; align-items: center; gap: 18px; }
  .public-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
  .public-nav a:hover { color: white; }
  .public-nav a.signin-link { background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 8px; }
  .public-nav a.signin-link:hover { background: rgba(255,255,255,0.25); }
  .public-main { padding: 32px 20px 48px; }
  /* Footer inside the signed-in app (legal/about links) */
  .app-footer { max-width: 1100px; margin: 4px auto 28px; padding: 16px 20px; text-align: center; color: #b0987a; font-size: 0.8rem; }
  .app-footer a { color: #8a7256; text-decoration: none; font-weight: 600; }
  .app-footer a:hover { text-decoration: underline; }
  @media print { .app-footer { display: none !important; } }
  /* "About" link in the app header */
  .user-link { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.82rem; font-weight: 600; }
  .user-link:hover { color: white; }

  .date-picker-wrap { display: flex; align-items: center; gap: 8px; }
  /* Date selector sits at the top of the spoons card — centered, on the parchment
     tint so it stands out against the white card. */
  .card-date-label { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a08060; margin-bottom: 6px; }
  .card-date { width: fit-content; margin: 0 auto 14px; }
  .date-nav { background: #f8f4f0; border: 1.5px solid #e0d4c8; color: #6b4f3a; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
  .date-nav:hover { background: #ece2d6; }
  #datePicker { background: #f8f4f0; border: 1.5px solid #e0d4c8; color: #2d2416; border-radius: 6px; padding: 5px 8px; font-size: 0.9rem; cursor: pointer; outline: none; }
  #datePicker::-webkit-calendar-picker-indicator { cursor: pointer; }
  .past-day-banner { background: #e07b39; color: white; text-align: center; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; display: none; }
  .past-day-banner.visible { display: block; }

  .tabs { display: flex; background: #5a4030; }
  .tab { padding: 10px 20px; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 0.9rem; border-bottom: 3px solid transparent; transition: all 0.2s; }
  /* "Learn more" pinned to the right of the menu bar. */
  .tabs-learn { align-self: center; margin-left: auto; margin-right: 16px; background: rgba(255,255,255,0.15); color: white; text-decoration: none; font-size: 0.82rem; font-weight: 600; padding: 5px 12px; border-radius: 8px; }
  .tabs-learn:hover { background: rgba(255,255,255,0.25); color: white; }
  .tab.active { color: white; border-bottom-color: #f0c070; }
  .tab:hover { color: white; }

  .page { display: none; padding: 20px; max-width: 680px; margin: 0 auto; }
  .page.active { display: block; }
  #page-today { max-width: 1100px; }

  /* TODAY */
  .spoon-bar-wrap { background: white; border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .spoon-counts { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; color: #888; }
  .spoon-counts span { font-size: 1.4rem; font-weight: 700; color: #2d2416; display: block; }
  .bar-bg { height: 18px; background: #e8ddd4; border-radius: 99px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; background: linear-gradient(90deg, #e07b39, #f0c070); }
  .bar-fill.low { background: linear-gradient(90deg, #c0392b, #e07b39); }
  .mood-adj-note { font-size: 0.8rem; color: #6b4f3a; margin-top: 8px; font-weight: 600; min-height: 0; }
  .mood-adj-note:empty { display: none; }

  /* Quick-log pills are grouped by category on the Today page. */
  .quicklog-group { margin-bottom: 12px; }
  .quicklog-group:last-child { margin-bottom: 16px; }
  .quicklog-group-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a08060; margin: 8px 0 6px; display: flex; align-items: center; gap: 6px; }
  .quicklog-group-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
  .quicklog-pills { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Native color picker used to pick a category's color in Settings. */
  .cat-color { width: 38px; height: 30px; border: 1.5px solid #e0d4c8; border-radius: 6px; cursor: pointer; padding: 2px; background: white; }
  .cat-color::-webkit-color-swatch-wrapper { padding: 0; }
  .cat-color::-webkit-color-swatch { border: none; border-radius: 4px; }
  .cat-color::-moz-color-swatch { border: none; border-radius: 4px; }
  .cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cat-name-input { flex: 2; min-width: 120px; border: 1.5px solid #e0d4c8; border-radius: 8px; padding: 7px 10px; font-size: 0.9rem; outline: none; }
  .cat-name-input:focus { border-color: #6b4f3a; }
  .cat-del { background: none; border: none; cursor: pointer; color: #c0a890; font-size: 1.1rem; padding: 2px 6px; border-radius: 4px; }
  .cat-del:hover { color: #c0392b; background: #fdf0f0; }
  .preset-cat-select { border: 1.5px solid #e0d4c8; border-radius: 6px; padding: 5px 6px; font-size: 0.8rem; outline: none; background: white; color: #6b4f3a; max-width: 110px; }
  /* Category group header in the Settings "Common activities" list. */
  .preset-group-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a08060; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
  .preset-group-label:first-child { margin-top: 0; }
  .spoon-icons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
  .spoon-icon { font-size: 1.5rem; transition: opacity 0.3s; }
  .spoon-icon.used { opacity: 0.2; }

  .section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a08060; margin: 20px 0 8px; }

  .activity-form { background: white; border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .activity-form input[type=text] { width: 100%; border: 1.5px solid #e0d4c8; border-radius: 8px; padding: 9px 12px; font-size: 0.95rem; outline: none; }
  .activity-form input[type=text]:focus { border-color: #6b4f3a; }
  .cost-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .cost-label { font-size: 0.85rem; color: #888; white-space: nowrap; }
  .cost-btns { display: flex; gap: 6px; flex-wrap: wrap; }
  .cost-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #e0d4c8; background: white; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #6b4f3a; transition: all 0.15s; }
  .cost-btn.selected, .cost-btn:hover { background: #6b4f3a; color: white; border-color: #6b4f3a; }
  .cost-mode { display: flex; gap: 6px; flex-wrap: wrap; }
  .mode-btn { padding: 6px 12px; border-radius: 8px; border: 1.5px solid #e0d4c8; background: white; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #6b4f3a; transition: all 0.15s; }
  .mode-btn:hover { background: #f0e8de; }
  .mode-btn.use.selected { background: #e07b39; color: white; border-color: #e07b39; }
  .mode-btn.gain.selected { background: #3a7a4f; color: white; border-color: #3a7a4f; }
  .add-btn { margin-top: 10px; width: 100%; background: #6b4f3a; color: white; border: none; border-radius: 8px; padding: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
  .add-btn:hover { background: #5a4030; }
  .add-btn:disabled { background: #c0a890; cursor: not-allowed; }

  .activity-list { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 16px; }
  .activity-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0e8de; border-left: 4px solid transparent; }
  .activity-item:last-child { border-bottom: none; }
  .activity-name { font-size: 0.95rem; }
  .activity-meta { display: flex; align-items: center; gap: 10px; }
  .activity-cost { font-size: 0.85rem; color: #e07b39; font-weight: 600; }
  .activity-cost.gain { color: #3a7a4f; }
  .activity-del { background: none; border: none; cursor: pointer; color: #c0a890; font-size: 1rem; padding: 2px 6px; border-radius: 4px; }
  .activity-del:hover { color: #c0392b; background: #fdf0f0; }
  .empty-state { padding: 28px; text-align: center; color: #b0987a; font-size: 0.9rem; }

  .summary-form { background: white; border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 16px; }
  .summary-form label { display: block; font-size: 0.85rem; color: #888; margin-bottom: 6px; }
  .rating-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .rating-btn { flex: 1; padding: 8px 4px; border-radius: 10px; border: 2px solid #e0d4c8; background: white; cursor: pointer; text-align: center; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .rating-btn svg { width: 36px; height: 36px; transition: transform 0.15s; }
  .rating-btn span { font-size: 0.7rem; color: #a08060; font-weight: 600; letter-spacing: 0.03em; }
  .rating-btn:hover svg { transform: scale(1.12); }
  .rating-btn[data-mood="😫"].selected { border-color: #c0392b; background: #fdf0f0; }
  .rating-btn[data-mood="😞"].selected { border-color: #e07b39; background: #fef5ee; }
  .rating-btn[data-mood="😐"].selected { border-color: #d4a017; background: #fefaee; }
  .rating-btn[data-mood="🙂"].selected { border-color: #5aaa6a; background: #f0faf2; }
  .rating-btn[data-mood="😊"].selected { border-color: #2e8b57; background: #eaf6ee; }
  .summary-form textarea { width: 100%; border: 1.5px solid #e0d4c8; border-radius: 8px; padding: 9px 12px; font-size: 0.9rem; resize: vertical; min-height: 70px; font-family: inherit; outline: none; }
  .summary-form textarea:focus { border-color: #6b4f3a; }
  .save-btn { margin-top: 10px; width: 100%; background: #3a7a4f; color: white; border: none; border-radius: 8px; padding: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
  .save-btn:hover { background: #2e6040; }

  /* SETTINGS */
  .settings-card { background: white; border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .settings-card label { display: block; font-size: 0.85rem; color: #888; margin-bottom: 8px; }
  .spoon-picker { display: flex; align-items: center; gap: 12px; }
  .spoon-picker button { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #e0d4c8; background: white; font-size: 1.2rem; cursor: pointer; font-weight: 600; color: #6b4f3a; }
  .spoon-picker button:hover { background: #f0e8de; }
  .spoon-picker .val { font-size: 1.4rem; font-weight: 700; min-width: 36px; text-align: center; }

  /* HISTORY */
  .history-list { }
  .history-day { background: white; border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
  .history-day:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.14); transform: translateY(-1px); }
  .history-day-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
  .history-date { font-weight: 600; font-size: 0.95rem; }
  .history-badge { font-size: 0.8rem; background: #f0e8de; color: #6b4f3a; border-radius: 99px; padding: 2px 10px; font-weight: 600; }
  .history-mini-bar { height: 8px; background: #e8ddd4; border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
  .history-mini-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e07b39, #f0c070); }
  .history-activities { font-size: 0.82rem; color: #888; }
  .history-note { font-size: 0.85rem; color: #6b4f3a; margin-top: 6px; font-style: italic; }
  .history-mood { font-size: 1.1rem; }

  .no-history { padding: 40px 20px; text-align: center; color: #b0987a; font-size: 0.9rem; }

  .print-bar { background: white; border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 12px; }
  .print-quick { display: flex; flex-wrap: wrap; gap: 10px; }
  .print-range-btn { background: #6b4f3a; color: white; border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
  .print-range-btn:hover { background: #5a4030; }
  .print-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #f0e8de; }
  .print-custom input[type=date] { border: 1.5px solid #e0d4c8; border-radius: 8px; padding: 7px 10px; font-size: 0.85rem; outline: none; font-family: inherit; color: #2d2416; }
  .print-custom input[type=date]:focus { border-color: #6b4f3a; }
  .print-custom span { color: #888; font-size: 0.85rem; }

  /* Printable report — hidden on screen, shown only when printing.
     Avoids a pop-up window (blocked by some browsers/sandboxes). */
  #printReport { display: none; }
  @media print {
    header, .past-day-banner, .tabs, .page, .toast { display: none !important; }
    #printReport { display: block !important; color: #1a1a1a; }
    #printReport h1 { font-size: 1.4rem; margin: 0 0 6px; }
    #printReport .meta { color: #555; font-size: 0.9rem; margin: 2px 0; }
    #printReport .summary { margin: 16px 0 18px; font-size: 0.95rem; }
    #printReport table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    #printReport th { text-align: left; border-bottom: 2px solid #333; padding: 7px 8px; }
    #printReport td { border-bottom: 1px solid #ccc; padding: 7px 8px; vertical-align: top; }
    #printReport td.num, #printReport td.date { white-space: nowrap; }
    #printReport td.notes { font-style: italic; color: #333; }
    #printReport tr { page-break-inside: avoid; }
    #printReport .empty { color: #777; font-style: italic; }
    #printReport .footer { margin-top: 24px; color: #888; font-size: 0.75rem; }
    #printReport .breakdown-title { font-size: 1rem; margin: 22px 0 8px; }
    #printReport table.breakdown { width: auto; min-width: 280px; }
    #printReport table.breakdown td.num, #printReport table.breakdown th.num { text-align: right; white-space: nowrap; }
    #printReport .cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
    @page { margin: 18mm; }
  }

  .settings-save { width: 100%; background: #6b4f3a; color: white; border: none; border-radius: 8px; padding: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-top: 8px; }
  .settings-save:hover { background: #5a4030; }

  .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #3a7a4f; color: white; padding: 10px 22px; border-radius: 99px; font-size: 0.9rem; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 999; }
  .toast.show { opacity: 1; }

  /* AUTH / LANDING PAGE */
  #authScreen { position: fixed; inset: 0; background: #f8f4f0; overflow-y: auto; z-index: 500; padding: 32px 20px 48px; }
  .landing { max-width: 640px; margin: 0 auto; }
  .landing-hero { text-align: center; margin-bottom: 22px; }
  .landing-hero .logo { font-size: 3rem; line-height: 1; }
  .landing-hero h1 { font-size: 1.8rem; color: #6b4f3a; margin: 8px 0 6px; }
  .landing-hero .tagline { color: #8a7256; font-size: 1rem; line-height: 1.5; max-width: 480px; margin: 0 auto; }
  /* Config-driven developer/notice banner above the nav buttons. */
  .dev-note { max-width: 520px; margin: 16px auto 0; background: #fef6ee; border: 1px solid #e0b07a; border-left: 4px solid #e07b39; border-radius: 10px; padding: 10px 14px; color: #7a5a3a; font-size: 0.88rem; line-height: 1.5; text-align: left; white-space: pre-line; }
  .dev-note::before { content: "🛠 "; }

  .hero-cta { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 20px; flex-wrap: wrap; }
  /* The two hero buttons act as tabs: inactive = outlined, active = filled. */
  .hero-tab { font-family: inherit; font-weight: 600; font-size: 0.95rem; padding: 11px 26px; border-radius: 10px; cursor: pointer; transition: all 0.15s; border: 1.5px solid #6b4f3a; background: white; color: #6b4f3a; }
  .hero-tab:hover { background: #f0e8de; }
  .hero-tab.active { background: #6b4f3a; color: white; }
  .hero-tab.active:hover { background: #5a4030; border-color: #5a4030; }
  .hero-panel { margin-top: 2px; }

  .auth-card { background: white; border-radius: 18px; padding: 26px 28px 22px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); max-width: 420px; width: 100%; margin: 0 auto 22px; text-align: center; }
  .auth-card h2 { font-size: 1.15rem; color: #6b4f3a; margin: 0 0 4px; }
  .auth-card p { color: #999; font-size: 0.86rem; margin-bottom: 18px; }
  .provider-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px; border-radius: 10px; border: 1.5px solid #e0d4c8; background: white; font-size: 0.95rem; font-weight: 600; color: #2d2416; cursor: pointer; margin-bottom: 10px; transition: background 0.15s; }
  .provider-btn:hover { background: #f0e8de; }
  .provider-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .auth-err { color: #c0392b; font-size: 0.82rem; margin-top: 10px; min-height: 1em; }
  .auth-note { color: #b0987a; font-size: 0.78rem; margin-top: 12px; line-height: 1.4; }
  .auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #b0987a; font-size: 0.78rem; }
  .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #ece2d6; }
  .auth-email { width: 100%; border: 1.5px solid #e0d4c8; border-radius: 10px; padding: 11px 12px; font-size: 0.95rem; outline: none; margin-bottom: 10px; font-family: inherit; }
  .auth-email:focus { border-color: #6b4f3a; }
  .auth-msg { color: #3a7a4f; font-size: 0.82rem; margin-top: 10px; min-height: 1em; line-height: 1.4; }

  .landing-section { background: white; border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 16px; }
  .landing-section h3 { font-size: 1.05rem; color: #6b4f3a; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .landing-section p { color: #5a4a38; font-size: 0.92rem; line-height: 1.55; margin-bottom: 10px; }
  .landing-section p:last-child { margin-bottom: 0; }
  .landing-section ul { list-style: none; margin: 4px 0 0; padding: 0; }
  .landing-section li { color: #5a4a38; font-size: 0.92rem; line-height: 1.5; padding: 4px 0 4px 28px; position: relative; }
  .landing-section li::before { content: '🥄'; position: absolute; left: 0; top: 4px; font-size: 0.9rem; }

  .pii-warning { background: #fef6ee; border: 1.5px solid #e0b07a; border-left: 5px solid #e07b39; border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
  .pii-warning h3 { color: #b35a1f; font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .pii-warning p { color: #7a5a3a; font-size: 0.86rem; line-height: 1.55; margin-bottom: 8px; }
  .pii-warning p:last-child { margin-bottom: 0; }
  .pii-warning strong { color: #b35a1f; }
  .landing-footer { text-align: center; color: #b0987a; font-size: 0.78rem; margin-top: 6px; }

  /* In-page "screenshot" previews used on the About page */
  .about-preview { background: #faf6f1; border: 1px dashed #ddcdba; border-radius: 10px; padding: 14px; margin: 14px 0 4px; }
  .about-preview-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b0987a; margin-bottom: 10px; }
  .header-right { display: flex; align-items: center; gap: 14px; }
  .user-label { color: rgba(255,255,255,0.85); font-size: 0.82rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .signout-btn { background: rgba(255,255,255,0.15); border: none; color: white; border-radius: 6px; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; }
  .signout-btn:hover { background: rgba(255,255,255,0.25); }

  /* Two-column layout for Today tab */
  .today-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  #page-today .spoon-bar-wrap { max-width: 100%; }
  .today-col-left { min-width: 0; }
  .today-col-right { min-width: 0; }
  .today-col-right .section-title { margin-top: 0; }
  /* End-of-day summary spans the full width below both columns, so it
     always renders last on mobile (after the activity list). */
  .today-summary { margin-top: 8px; }
  @media (max-width: 640px) {
    .today-cols { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    header h1 { font-size: 1.05rem; }
    .tabs-learn { margin-right: 10px; }
  }