/* guest-look.css - the account home's approved look (Jordan, 2026-10-11: "I approve this new style") carried onto the
 * guest's other pages: /pay, /invoice, /receipt, /carpool and /itinerary. Each of those pages adds class="zg-look" to
 * <body> and loads this after its own styles. Looks only: no markup, ids or scripts change.
 *   - every card (event cards, form cards, panels, the closed and done cards, the invoice and receipt paper, carpool
 *     cards, itinerary days) is the home's white card with a gold thread, a rim of light and a soft warm drop;
 *   - fields are gold-framed wells; the raised gold and parchment pills come from zg-ui.css section 17.
 * On paper (invoice and receipt print) nothing here applies: screen only. Text floor 17px; nothing moves under reduced
 * motion. */
@media screen {
  body.zg-look {
    --look-gold-hi: #F4D486;
    --look-gold: #D9A645;
    --look-gold-lo: #B9842A;
    --look-gold-deep: #7E5513;
    --look-card: linear-gradient(180deg, #FFFFFF 0%, #FFFEFB 55%, #FDF9F1 100%);
    --look-line: rgb(156 105 24 / 24%);
    --look-rim: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgb(255 255 255 / 55%);
    --look-elev: 0 1px 2px rgb(64 46 14 / 6%), 0 4px 10px rgb(64 46 14 / 6%), 0 18px 36px -14px rgb(64 46 14 / 22%);
    --look-well: inset 0 1px 3px rgb(64 46 14 / 9%), inset 0 -1px 0 rgb(255 255 255 / 85%);
    --look-ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* ---- cards */
  body.zg-look :is(.event-card, .form-card, .panel, .closed-card, .done-card, .doc, .cp-card, .it-day) {
    position: relative; overflow: hidden; box-sizing: border-box;
    background: var(--look-card); border: 1px solid var(--look-line); border-radius: 22px;
    box-shadow: var(--look-rim), var(--look-elev);
  }
  body.zg-look :is(.event-card, .form-card, .panel, .closed-card, .done-card, .doc, .cp-card)::before {
    content: ""; display: block; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--look-gold), var(--look-gold-hi) 55%, rgb(255 255 255 / 0));
  }
  body.zg-look .form-card { padding: 32px 30px; }
  body.zg-look .panel { padding: 28px 28px 26px; }
  body.zg-look .doc { padding: 38px 36px; }
  body.zg-look .event-card + .event-card, body.zg-look .panel + .panel { margin-top: 20px; }
  body.zg-look :is(.form-card, .panel, .closed-card, .done-card, .cp-card) h2 { font-family: var(--serif); font-weight: 500; color: var(--burgundy); }
  body.zg-look .done-card h2::before { color: var(--look-gold); }

  /* the itinerary's days fold open; each is a card of its own */
  body.zg-look .it-day { margin: 0 0 14px; }
  body.zg-look .it-day > summary { padding: 18px 22px; cursor: pointer; }
  body.zg-look .it-day[open] { box-shadow: var(--look-rim), 0 0 0 1px rgb(185 132 42 / 30%), var(--look-elev); }

  /* the carpool's smaller pieces */
  body.zg-look :is(.cp-stat, .cp-ride) { border-color: var(--look-line); box-shadow: var(--look-rim), 0 1px 2px rgb(64 46 14 / 5%), 0 8px 16px -10px rgb(64 46 14 / 18%); }

  /* ---- fields: gold-framed wells */
  body.zg-look :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) {
    background-color: #FFFDF8; border: 2px solid rgb(185 132 42 / 55%); border-radius: 14px; box-shadow: var(--look-well);
  }
  body.zg-look :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
    outline: none; border-color: var(--look-gold) !important; box-shadow: var(--look-well), 0 0 0 4px rgb(217 166 69 / 28%);
  }

  /* ---- small things */
  body.zg-look :is(.event-card-label, .doc-label) { color: var(--gold); }
  body.zg-look .doc-lines .total td { border-top-color: var(--look-gold-lo); }
  body.zg-look .link-plain { color: var(--look-gold-deep); }
  body.zg-look .link-plain:hover { color: #5C3C0A; }
}

@media screen and (max-width: 600px) {
  body.zg-look .form-card, body.zg-look .panel { padding: 24px 18px; }
  body.zg-look .doc { padding: 26px 18px; }
}