/* ============================================================
   sheet.css — the auth dialog and the sheet surface it sits on.

   Extracted from world.css (2026-09-05). These rules were only
   ever loaded by pages that happened to import world.css, so
   AuthUI rendered COMPLETELY UNSTYLED on companion, hub and
   index -- an unusable login form on three pages including the
   home page. The dialog is global, so its styles are too.

   Any page that loads js/auth-ui.js must load this.
   ============================================================ */

/* ---- contact sheet (in-place surface, not a page) ------ */
.sheet-scrim {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity var(--med) var(--ease);
}
.sheet-scrim[data-open] { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: calc(var(--z-sheet) + 1);
  right: var(--s5); bottom: var(--s5); width: min(420px, calc(100vw - var(--s8)));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.sheet[data-open] { transform: none; opacity: 1; pointer-events: auto; }
.sheet-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.sheet-h h3 { font-size: var(--text-sm); }
.sheet-x { border:0; background:transparent; color: var(--ink-muted); font-size:18px; line-height:1; padding:0 var(--s1); }
.sheet-b { padding: var(--s5); }
.field { margin-bottom: var(--s4); }
.field label { display:block; font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: var(--s2); font-weight: var(--weight-medium); }
.field select, .field input, .field textarea {
  /* >= 16px or iOS Safari zooms the page in when the field is focused and
     leaves the layout scaled and shifted. --text-sm is below that. */
  width: 100%; font: inherit; font-size: max(16px, var(--text-sm));
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg); color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field select:focus, .field input:focus, .field textarea:focus { outline:none; border-color: var(--ink-faint); }
.sheet-note { font-size: var(--text-xs); color: var(--ink-faint); line-height:1.5; margin-top: var(--s3); }
.sheet-sent { text-align:center; padding: var(--s8) var(--s5); }
.sheet-sent b { display:block; color: var(--ink); margin-bottom: var(--s2); }
.sheet-sent p { font-size: var(--text-sm); color: var(--ink-muted); line-height:1.55; }

@media (max-width: 640px) {
  .sheet { left: var(--s3); right: var(--s3); bottom: var(--s3); width: auto; }
}

/* ---- sign-in prompt ------------------------------------ */
.auth-sheet { right: 50%; bottom: 50%; transform: translate(50%, 50%) scale(.98); }
.auth-sheet[data-open] { transform: translate(50%, 50%) scale(1); }
.auth-reason {
  font-size: var(--text-sm); color: var(--ink-body); line-height: 1.5;
  padding: var(--s3); margin-bottom: var(--s4);
  background: var(--bg-sunken); border-radius: var(--r-md);
}
/* signed-out hint under gated controls */
.gated-note { font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--s2); line-height:1.5; }
@media (max-width: 640px) {
  .auth-sheet { right: var(--s3); left: var(--s3); bottom: var(--s3); transform: none; }
  .auth-sheet[data-open] { transform: none; }
}

/* ---- auth screens -------------------------------------- */
.auth-err {
  font-size: var(--text-sm); color: var(--scene);
  background: color-mix(in srgb, var(--scene) 10%, transparent);
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  margin-bottom: var(--s3);
}
.auth-lead { font-size: var(--text-sm); color: var(--ink-body); line-height: 1.55; text-align: center; }
.auth-icon {
  width: 44px; height: 44px; margin: var(--s2) auto var(--s4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-sunken); font-size: 20px; color: var(--ink-muted);
}
.field-hint { font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--s1); line-height: 1.4; }
.field-hint.ok  { color: var(--live); }
.field-hint.bad { color: var(--scene); }

.pw-meter { height: 3px; background: var(--line); border-radius: var(--r-full);
            margin-top: var(--s2); overflow: hidden; }
.pw-meter span { display:block; height:100%; width:0;
                 transition: width var(--med) var(--ease), background var(--med) var(--ease); }
.pw-meter .weak   { background: var(--scene); }
.pw-meter .ok     { background: var(--home); }
.pw-meter .strong { background: var(--live); }

.dev-box {
  margin-top: var(--s4); padding: var(--s3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5;
}
.sheet-note a { color: var(--ink); text-decoration: underline; }

/* unverified banner */
.verify-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); background: color-mix(in srgb, var(--home) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--home) 30%, transparent);
  font-size: var(--text-sm); color: var(--ink-body);
}
.verify-bar button { margin-left: auto; }