/* ==========================================================================
   THE PRIVATE OFFICE — DESIGN SYSTEM
   components.css — buttons · cards · forms · calendar · feedback
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   Anatomy: height 48 · radius 12 · Cinzel 12 / 600 / 0.15em / uppercase
   ========================================================================== */
.btn {
  --_h: var(--btn-h-md);
  --_px: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--_h);
  padding-inline: var(--_px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sub);
  font-size: 0.75rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
  transition:
    transform var(--dur-3) var(--ease-lux),
    box-shadow var(--dur-3) var(--ease-lux),
    background-color var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard);
}
.btn .icon { width: 17px; height: 17px; }

/* Sizes */
.btn--lg { --_h: var(--btn-h-lg); --_px: 32px; font-size: 0.8125rem; }
.btn--sm { --_h: var(--btn-h-sm); --_px: 18px; font-size: 0.6875rem; gap: 8px; }
.btn--sm .icon { width: 15px; height: 15px; }
.btn--block { display: flex; width: 100%; }

/* — Primary · Royal Gold ————————————————————————————— */
.btn--primary {
  background: var(--grad-gold);
  color: var(--navy-900);
  border-color: rgba(110, 84, 38, 0.35);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--primary::before {           /* ceremonial sheen */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform var(--dur-4) var(--ease-lux);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px rgba(198, 161, 91, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:active { transform: translateY(0); transition-duration: var(--dur-1); }

/* — Secondary · Midnight Navy ———————————————————————— */
.btn--secondary {
  background: var(--navy-800);
  color: var(--ivory-100);
  border-color: rgba(5, 12, 22, 0.6);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(247, 242, 232, 0.10);
}
.btn--secondary:hover {
  background: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247, 242, 232, 0.12);
}
.btn--secondary:active { transform: translateY(0); }
[data-theme="dark"] .btn--secondary {
  background: var(--ivory-100);
  color: var(--navy-800);
  border-color: rgba(5, 12, 22, 0.25);
}
[data-theme="dark"] .btn--secondary:hover { background: var(--c-white); }

/* — Outline · Gold hairline —————————————————————————— */
.btn--outline {
  border-color: rgba(198, 161, 91, 0.55);
  color: var(--accent-ink);
  background: transparent;
}
.btn--outline:hover {
  border-color: var(--gold-500);
  background: var(--accent-wash);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn--outline { color: var(--gold-300); }

/* — Ghost ——————————————————————————————————————————— */
.btn--ghost { color: var(--ink-soft); }
.btn--ghost:hover { background: var(--ghost-hover); color: var(--ink); }

/* — Icon button ————————————————————————————————————— */
.btn--icon {
  --_h: var(--btn-h-md);
  width: var(--_h);
  padding: 0;
  border-color: var(--line-strong);
  color: var(--ink-soft);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}
.btn--icon .icon { width: 19px; height: 19px; }
.btn--icon:hover {
  border-color: rgba(198, 161, 91, 0.6);
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn--icon.btn--sm .icon { width: 16px; height: 16px; }
.btn--icon.btn--lg .icon { width: 22px; height: 22px; }
.btn--icon--gold {
  border-color: transparent;
  background: var(--grad-gold);
  color: var(--navy-900);
  box-shadow: var(--shadow-gold);
}
.btn--icon--quiet { border-color: transparent; background: transparent; box-shadow: none; }

/* States */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.42;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.65; }
.btn__spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-circle);
  opacity: 0.85;
  animation: po-spin 0.9s linear infinite;
}

/* Quiet focus ring for every control */
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   CARDS — base
   ========================================================================== */
.card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-3) var(--ease-lux),
    box-shadow var(--dur-3) var(--ease-lux),
    border-color var(--dur-2) var(--ease-standard);
}
.card--hover:hover,
.card.is-lifted {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line);
}

/* ---------------------------------------------------------------- news card */
.news-card { overflow: hidden; display: flex; flex-direction: column; }
.news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-800);
}
.news-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-lux);
}
.news-card.card--hover:hover .news-card__media img { transform: scale(1.045); }
.news-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,19,38,0) 55%, rgba(8,19,38,0.42) 100%);
  pointer-events: none;
}
.news-card__tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 1;
  height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: rgba(252, 250, 245, 0.92);
  backdrop-filter: blur(6px);
  color: var(--navy-800);
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.news-card__body { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.news-card__date {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sub);
  font-size: 0.625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.news-card__date::after { content: ""; height: 1px; width: 34px; background: var(--grad-gold-line); }
.news-card__title {
  font-family: var(--font-display);
  font-size: 1.5625rem;
  font-weight: var(--fw-semi);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.news-card__title a { text-decoration: none; }
.news-card__title a:hover { color: var(--accent-ink); }
.news-card__excerpt { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
.news-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.news-card__meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: var(--track-wide);
}
.news-card__meta .icon { width: 14px; height: 14px; }

/* ------------------------------------------------------------ business card */
.biz-card { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 20px; }
.biz-card__head { display: flex; align-items: flex-start; gap: 16px; }
.biz-card__mark {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-navy);
  color: var(--gold-400);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(247,242,232,.10);
}
.biz-card__mark .icon { width: 26px; height: 26px; }
.biz-card__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-semi);
  line-height: 1.2;
}
.biz-card__sector {
  margin-top: 3px;
  font-family: var(--font-sub);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.biz-card__head .pill { margin-left: auto; }
.biz-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-block: 1px solid var(--line-soft);
}
.biz-card__meta dt {
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.biz-card__meta dd {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.biz-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --------------------------------------------------------- verification card */
.verify-card { overflow: hidden; }
.verify-card::before {  /* gold ceremonial thread */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}
.verify-card__watermark {
  position: absolute;
  right: -34px; bottom: -34px;
  width: 160px; height: 160px;
  color: var(--gold-500);
  opacity: 0.07;
  transform: rotate(12deg);
  pointer-events: none;
}
.verify-card__inner { padding: 26px 26px 22px; position: relative; }
.verify-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.verify-card__seal {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-circle);
  background: var(--grad-emerald);
  color: var(--ivory-100);
  box-shadow: var(--shadow-emerald);
}
.verify-card__seal .icon { width: 22px; height: 22px; }
.verify-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-semi);
  line-height: 1.15;
}
.verify-card__rows { display: grid; gap: 0; }
.verify-card__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.verify-card__row dt {
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.verify-card__row dd { font-size: 0.875rem; font-weight: var(--fw-medium); text-align: right; }
.verify-card__row dd.mono { font-weight: var(--fw-regular); color: var(--ink-soft); }
.verify-card__foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 26px;
  background: var(--ivory-100);
  border-top: 1px solid var(--line-soft);
}
[data-theme="dark"] .verify-card__foot { background: rgba(5, 12, 22, 0.35); }
.verify-card__note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-2xs); color: var(--ink-mute); letter-spacing: var(--track-wide);
}
.verify-card__note .icon { width: 13px; height: 13px; color: var(--presence); }
.verify-card__qr { width: 58px; height: 58px; flex: none; border-radius: var(--r-xs); }

/* --------------------------------------------------------- information card */
.info-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.info-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(198, 161, 91, 0.5);
  border-radius: var(--r-md);
  color: var(--accent-ink);
  background: var(--accent-wash);
  margin-bottom: 6px;
}
.info-card__icon .icon { width: 21px; height: 21px; }
.info-card__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--fw-semi); }
.info-card__copy { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; flex: 1; }
.info-card__foot { padding-top: 4px; }

/* -------------------------------------------------------------- profile card */
.profile-card { padding: 34px 28px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.profile-card__avatar { position: relative; width: 104px; height: 104px; margin-bottom: 20px; }
.profile-card__avatar img {
  width: 100%; height: 100%;
  border-radius: var(--r-circle);
  object-fit: cover;
  border: 1px solid rgba(198, 161, 91, 0.5);
}
.profile-card__avatar::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: var(--r-circle);
  border: 1px solid rgba(198, 161, 91, 0.35);
}
.profile-card__presence {
  position: absolute;
  right: -1px; bottom: 4px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-circle);
  background: var(--grad-emerald);
  color: #fff;
  border: 2px solid var(--surface-raised);
}
.profile-card__presence .icon { width: 12px; height: 12px; stroke-width: 2.25; }
.profile-card__name { font-family: var(--font-display); font-size: 1.5625rem; font-weight: var(--fw-semi); line-height: 1.15; }
.profile-card__role {
  margin-top: 8px;
  font-family: var(--font-sub);
  font-size: 0.625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-ceremony);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.profile-card__rule { width: 100%; margin: 18px 0 6px; }
.profile-card__meta { width: 100%; display: grid; gap: 2px; text-align: left; }
.profile-card__meta div {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.profile-card__meta .icon { width: 16px; height: 16px; color: var(--ink-faint); }
.profile-card__foot {
  margin-top: 18px;
  display: flex; gap: 10px; justify-content: center; align-items: center;
}

/* ==========================================================================
   FORMS
   Anatomy: label Cinzel 11 · control h 52 · radius 12 · focus = gold ring
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-sub);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field__opt { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--ink-faint); letter-spacing: 0.04em; text-transform: none; }
.field__req { color: var(--error-600); font-family: var(--font-body); }
.help { font-size: var(--fs-xs); color: var(--ink-mute); line-height: 1.5; }
.error-text {
  display: none;
  align-items: center; gap: 7px;
  font-size: var(--fs-xs);
  color: var(--error-600);
  font-weight: var(--fw-medium);
}
.error-text .icon { width: 13px; height: 13px; }
.field--error .error-text { display: inline-flex; }
.field--error .help { display: none; }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 15px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover:not(:disabled), .textarea:hover:not(:disabled), .select:hover:not(:disabled) {
  border-color: rgba(13, 27, 46, 0.30);
}
[data-theme="dark"] .input:hover:not(:disabled),
[data-theme="dark"] .textarea:hover:not(:disabled) { border-color: rgba(247, 242, 232, 0.36); }
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  border-color: var(--line-soft);
  cursor: not-allowed;
  box-shadow: none;
}
.field--error .input, .field--error .textarea, .field--error .select {
  border-color: var(--error-600);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--focus-ring);
}

/* Input with icon / prefix */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-left: 44px; }
.input-wrap > .icon {
  position: absolute; left: 14px;
  width: 18px; height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
  transition: color var(--dur-2);
}
.input-wrap:focus-within > .icon { color: var(--accent-ink); }
.input-wrap--trailing .input { padding-left: 15px; padding-right: 44px; }
.input-wrap--trailing > .icon { left: auto; right: 14px; pointer-events: none; }

/* Textarea + counter */
.textarea { min-height: 132px; padding: 14px 15px; line-height: 1.65; resize: vertical; }
.textarea-wrap { position: relative; }
.textarea-wrap .counter {
  position: absolute; right: 12px; bottom: 10px;
  font-size: var(--fs-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Native select (quiet luxury) */
.select-wrap { position: relative; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Input group — phone (prefix + number) */
.input-group { display: flex; align-items: stretch; }
.input-group .group-prefix {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-theme="dark"] .input-group .group-prefix { background: rgba(5, 12, 22, 0.4); }
.input-group .input { border-radius: 0 var(--r-md) var(--r-md) 0; }
.input-group:focus-within .group-prefix { border-color: var(--gold-500); }

/* Country code chip */
.cc {
  display: inline-grid; place-items: center;
  height: 20px; min-width: 28px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ------------------------------------------------------- custom dropdown */
.cselect { position: relative; }
.cselect__btn {
  width: 100%;
  min-height: var(--field-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 15px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.cselect__btn .icon { width: 16px; height: 16px; margin-left: auto; color: var(--ink-mute); transition: transform var(--dur-2) var(--ease-standard); }
.cselect__btn:hover { border-color: rgba(13, 27, 46, 0.3); }
.cselect.is-open .cselect__btn { border-color: var(--gold-500); box-shadow: var(--focus-ring); }
.cselect.is-open .cselect__btn .icon { transform: rotate(180deg); }
.cselect__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: 264px;
  overflow: auto;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-raised);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-lux), transform var(--dur-2) var(--ease-lux);
}
.cselect.is-open .cselect__list { opacity: 1; transform: none; pointer-events: auto; }
.cselect__group {
  padding: 10px 12px 6px;
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cselect__opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-align: left;
  transition: background var(--dur-1), color var(--dur-1);
  cursor: pointer;
}
.cselect__opt small { margin-left: auto; color: var(--ink-faint); font-size: var(--fs-2xs); }
.cselect__opt:hover, .cselect__opt.is-active { background: var(--ghost-hover); color: var(--ink); }
.cselect__opt[aria-selected="true"] { color: var(--ink); font-weight: var(--fw-medium); }
.cselect__opt[aria-selected="true"] .cc { color: var(--accent-ink); border-color: rgba(198, 161, 91, 0.5); }
.cselect__opt .check { width: 15px; height: 15px; color: var(--accent-ink); opacity: 0; margin-left: auto; }
.cselect__opt[aria-selected="true"] .check { opacity: 1; }

/* ------------------------------------------------------------- file upload */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.dropzone:hover { border-color: rgba(198, 161, 91, 0.6); }
.dropzone.is-drag {
  border-color: var(--gold-500);
  background: var(--accent-wash);
}
.dropzone__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-circle);
  background: var(--accent-wash);
  color: var(--accent-ink);
  margin-bottom: 2px;
}
.dropzone__icon .icon { width: 20px; height: 20px; }
.dropzone__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.dropzone__title u { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dropzone__hint { font-size: var(--fs-xs); color: var(--ink-mute); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.file-list { display: grid; gap: 8px; margin-top: 10px; }
.file-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-xs);
}
.file-chip .icon { width: 16px; height: 16px; color: var(--accent-ink); }
.file-chip__name { font-weight: var(--fw-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip__size { color: var(--ink-mute); font-variant-numeric: tabular-nums; margin-left: auto; flex: none; }
.file-chip__x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-circle); color: var(--ink-faint); flex: none; transition: background var(--dur-1), color var(--dur-1); }
.file-chip__x:hover { background: var(--error-100); color: var(--error-600); }
.file-chip__x .icon { width: 12px; height: 12px; color: currentColor; }

/* -------------------------------------------------------- checkbox & radio */
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  user-select: none;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .box {
  position: relative;
  width: var(--control); height: var(--control);
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.choice .box .icon {
  position: absolute; inset: 0;
  width: 12px; height: 12px;
  margin: auto;
  color: var(--navy-900);
  stroke-width: 2.5;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-2) var(--ease-emphasis), transform var(--dur-2) var(--ease-emphasis);
}
.choice:hover .box { border-color: rgba(198, 161, 91, 0.7); }
.choice input:checked + .box {
  background: var(--grad-gold);
  border-color: rgba(110, 84, 38, 0.4);
  box-shadow: 0 4px 10px -4px rgba(198, 161, 91, 0.6);
}
.choice input:checked + .box .icon { opacity: 1; transform: scale(1); }
.choice input:focus-visible + .box { border-color: var(--gold-500); box-shadow: var(--focus-ring); }
.choice input:disabled ~ .box { opacity: 0.4; box-shadow: none; }
.choice input:disabled ~ .choice__text { opacity: 0.4; }
.choice--radio .box { border-radius: var(--r-circle); }
.choice--radio .box::after {
  content: "";
  position: absolute; inset: 0;
  width: 8px; height: 8px;
  margin: auto;
  border-radius: var(--r-circle);
  background: var(--navy-900);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-2) var(--ease-emphasis), transform var(--dur-2) var(--ease-emphasis);
}
.choice--radio input:checked + .box::after { opacity: 1; transform: scale(1); }
.choice__text b { color: var(--ink); font-weight: var(--fw-medium); }
.choice__note { display: block; font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 2px; }

/* ---------------------------------------------------------------- calendar */
.cal {
  width: 100%;
  max-width: 340px;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
}
.cal__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-semi); }
.cal__nav { display: flex; gap: 6px; }
.cal__nav .btn--icon { --_h: 32px; width: 32px; border-radius: var(--r-sm); box-shadow: none; }
.cal__nav .btn--icon .icon { width: 14px; height: 14px; }
.cal__week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 4px 16px 6px;
}
.cal__week span {
  text-align: center;
  font-family: var(--font-sub);
  font-size: 0.5625rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 6px 0;
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 16px 16px;
}
.cal__day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1), transform var(--dur-1);
}
.cal__day:hover:not(:disabled) { background: var(--gold-100); color: var(--gold-700); }
.cal__day:disabled { color: var(--ink-faint); opacity: 0.5; cursor: default; }
.cal__day.is-out { color: var(--ink-faint); }
.cal__day.is-today::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(198, 161, 91, 0.6);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.cal__day.is-selected {
  background: var(--grad-gold);
  color: var(--navy-900);
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 14px -6px rgba(198, 161, 91, 0.7);
}
.cal__day.is-selected:hover:not(:disabled) { background: var(--grad-gold); color: var(--navy-900); }
[data-theme="dark"] .cal__day:hover:not(:disabled) { background: rgba(198, 161, 91, 0.16); color: var(--gold-300); }

/* ==========================================================================
   FEEDBACK — toast · veil (page transition)
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--navy-900);
  color: var(--ivory-100);
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-3) var(--ease-lux), opacity var(--dur-3) var(--ease-lux);
}
.toast .icon { width: 15px; height: 15px; color: var(--gold-400); }
.toast.is-show { transform: translate(-50%, 0); opacity: 1; }

.veil {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  display: grid; place-items: center;
  background: var(--navy-950);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--dur-3)) var(--ease-standard);
}
.veil.is-on { opacity: 1; pointer-events: auto; transition-duration: var(--dur-2); }
.veil__emblem {
  width: 84px; height: 84px;
  color: var(--gold-500);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--dur-3) var(--ease-lux) 90ms, transform var(--dur-4) var(--ease-lux) 90ms;
}
.veil.is-on .veil__emblem { opacity: 1; transform: scale(1); }
.veil__line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--grad-gold-line);
  transform: scaleX(0);
  transition: transform var(--dur-5) var(--ease-lux);
}
.veil.is-on .veil__line { transform: scaleX(1); }