/* Public secure share uses the same responsive frame as sign-in. */
body > .auth-language {
  position: fixed !important;
  z-index: 30;
  top: 18px !important;
  right: 20px !important;
  left: auto !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  color: var(--color-brand) !important;
  box-shadow: var(--shadow-md);
}
body > .auth-language > span { display: grid !important; width: 18px !important; height: 18px !important; place-items: center; line-height: 1 !important; }
body > .auth-language select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; }

.public-share-shell {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: calc(100svh - 42px);
  background: var(--bg-page);
}
.public-share-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 7vw, 104px);
  background: linear-gradient(145deg, #0a2218 0%, #0f2b1e 100%);
  color: #fff;
}
.public-share-brand .brand-mark { width: 38px; height: 38px; margin-bottom: 40px; border-radius: 7px; }
.public-share-brand .eyebrow { margin: 0; color: #a8bfb3; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.public-share-brand h1 { max-width: 9ch; margin: 18px 0; color: #fff; font-size: clamp(48px, 5.2vw, 76px); font-weight: 700; letter-spacing: -.06em; line-height: .96; }
.public-share-brand > p:not(.eyebrow) { max-width: 510px; margin: 0; color: #c6d6cc; font-size: 15px; line-height: 1.65; }
.public-share-brand ul { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; color: #f3f7f4; font-size: 14px; }
.public-share-brand li { display: flex; align-items: center; gap: 10px; }
.public-share-brand li::before { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--bg-sidebar); content: '✓'; font-size: 11px; font-weight: 700; }

.public-share-panel { display: grid; place-items: center; padding: clamp(28px, 6vw, 80px); background: var(--bg-page); color: var(--color-text); }
.public-share-content { width: min(100%, 410px); }
.public-share-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.public-share-steps li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }
.public-share-steps li:not(:last-child)::after { grid-column: 1 / -1; height: 1px; margin: 5px -8px 0 29px; background: var(--color-border); content: ''; }
.public-share-steps span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; font-size: 11px; }
.public-share-steps small { font: inherit; white-space: nowrap; }
.public-share-shell[data-share-step='1'] .public-share-steps li[data-step='1'],
.public-share-shell[data-share-step='2'] .public-share-steps li[data-step='2'],
.public-share-shell[data-share-step='3'] .public-share-steps li[data-step='3'] { color: var(--color-brand); }
.public-share-shell[data-share-step='2'] .public-share-steps li[data-step='1'] span,
.public-share-shell[data-share-step='3'] .public-share-steps li[data-step='1'] span,
.public-share-shell[data-share-step='3'] .public-share-steps li[data-step='2'] span,
.public-share-shell[data-share-step='1'] .public-share-steps li[data-step='1'] span,
.public-share-shell[data-share-step='2'] .public-share-steps li[data-step='2'] span,
.public-share-shell[data-share-step='3'] .public-share-steps li[data-step='3'] span { border-color: var(--color-brand); background: var(--color-brand); color: #fff; }
.public-share-step, .public-share-result { animation: public-share-step-in .22s ease-out both; outline: none; }
.public-share-step[hidden], .public-share-result[hidden] { display: none; }
.public-share-content .form-kicker { margin: 0; color: var(--color-brand); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.public-share-content h2 { margin: 12px 0 8px; font-size: 34px; letter-spacing: -.04em; line-height: 1.1; }
.form-intro { margin: 0 0 24px; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }
.public-share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.public-share-grid label, .public-share-verification label, .public-share-result-fields > label { display: grid; gap: 7px; color: #27332e; font-size: 12px; font-weight: 700; }
.public-share-grid label span, .public-share-verification p span, .public-share-result-fields > label > span:not(.copy-control) { color: var(--color-text-muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.public-share-grid .wide { grid-column: 1 / -1; }
.public-share-grid input, .public-share-grid select, .public-share-grid textarea, .public-share-verification input { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: var(--color-text); font: inherit; }
.public-share-grid input, .public-share-grid select, .public-share-verification input { min-height: 44px; padding: 0 13px; }
.public-share-grid textarea { min-height: 126px; padding: 13px; resize: vertical; }
.public-share-grid input:focus, .public-share-grid select:focus, .public-share-grid textarea:focus, .public-share-verification input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(15,107,66,.14); outline: 0; }
.public-share-sender-grid { grid-template-columns: 1fr; }
.public-share-verification { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 18px; padding: 14px; border: 1px solid #a9d5bd; border-radius: var(--radius-md); background: #f1f9f4; }
.public-share-verification p { display: grid; gap: 3px; grid-column: 1 / -1; margin: 0; }
.public-share-actions { display: flex; align-items: center; margin-top: 20px; }
.public-share-actions button { width: 100%; min-height: 44px; border-radius: var(--radius-md); background: var(--color-brand); }
.public-share-actions button:hover { background: var(--color-brand-hover); }
.public-share-back { display: inline-flex; margin: 0 0 22px; padding: 0; border: 0; background: transparent; color: var(--color-brand); font-size: 12px; font-weight: 700; box-shadow: none; }
.public-share-back:hover { background: transparent; color: var(--color-brand-hover); }
.public-share-limit-note { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.public-share-limit-note a { color: var(--color-brand); font-weight: 700; }
.info-note { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border: 1px solid #98ada2; border-radius: 50%; color: #376255; font-family: Georgia, serif; font-size: 12px; font-weight: 800; cursor: help; }
.form-message { min-height: 18px; margin: 13px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.form-message.is-error { color: var(--color-danger); }
.public-share-result > p:not(.form-kicker):not(.form-message) { margin: 0 0 24px; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }
.public-share-result-fields { display: grid; gap: 15px; }
.copy-control { display: grid; grid-template-columns: minmax(0, 1fr) 46px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.copy-control input { min-width: 0; height: 48px; padding: 0 13px; border: 0; background: transparent; color: var(--color-text); font: 700 14px ui-monospace, SFMono-Regular, Consolas, monospace; }
.copy-control button { display: grid; width: 46px; min-height: 48px; place-items: center; border: 0; border-left: 1px solid var(--color-border); border-radius: 0; background: #f5f8f6; color: var(--color-brand); box-shadow: none; }
.copy-control button:hover, .copy-control button:focus-visible, .copy-control button.is-copied { background: var(--color-brand); color: #fff; }
.copy-control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.public-share-new { width: 100%; min-height: 44px; margin-top: 18px; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding: 8px 20px; border-top: 1px solid var(--color-border); background: #fff; color: #9ca3af; font-size: 11.5px; }
.auth-footer nav { display: flex; gap: 12px; }.auth-footer a { color: #6b7280; text-decoration: none; }.auth-footer a:hover { color: var(--color-brand); }
@keyframes public-share-step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  body > .auth-language { top: 16px !important; right: 16px !important; }
  .public-share-shell { grid-template-columns: 1fr; min-height: calc(100svh - 42px); }
  .public-share-brand { display: none; }
  .public-share-panel { min-height: calc(100svh - 42px); padding: 84px 28px 56px; }
  .public-share-grid { grid-template-columns: 1fr; }
  .public-share-grid .wide { grid-column: auto; }
  .public-share-verification { grid-template-columns: 1fr; }
  .public-share-verification button { width: 100%; }
  .auth-footer { gap: 8px; padding-inline: 12px; font-size: 10px; }.auth-footer nav { gap: 8px; }
}

/* Keep the progress rail and access-code state aligned at every width. */
.public-share-content { width: min(100%, 520px); }
.public-share-steps { gap: 0; margin-bottom: 32px; }
.public-share-steps li { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.public-share-steps li:not(:last-child)::after { position: absolute; top: 11px; left: calc(100% - 2px); display: block; width: calc(100% - 28px); height: 1px; margin: 0; background: var(--color-border); content: ''; }
.public-share-steps li > span { position: relative; z-index: 1; flex: 0 0 24px; width: 24px; height: 24px; }
.public-share-steps li > small { overflow: visible; font-size: 12px; line-height: 1; }
.public-share-steps li:last-child { justify-content: flex-end; }
.public-share-steps li:last-child > small { text-align: right; }
.public-share-limit-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--color-brand); border-radius: var(--radius-md); color: var(--color-brand); font-size: 12px; font-weight: 700; text-decoration: none; }
.public-share-limit-cta:hover { background: #eef8f2; }
.public-share-actions button:disabled, .public-share-verification button:disabled { cursor: wait; opacity: .72; }
@media (max-width: 430px) {
  .public-share-panel { padding-inline: 20px; }
  .public-share-content { width: 100%; }
  .public-share-steps { margin-bottom: 28px; }
  .public-share-steps li { gap: 6px; font-size: 10px; }
  .public-share-steps li > small { font-size: 10px; }
  .public-share-steps li:not(:last-child)::after { left: calc(100% - 3px); width: calc(100% - 26px); }
  .public-share-steps li > span { flex-basis: 22px; width: 22px; height: 22px; }
}