/* Daily Life Doc, round 13 (zone A): the expert's Sign in (js/signin*.js), as the page "Expert Plans" draws it
   (docs/artifact/expert/index.html, section "Sign-in": .sform, .tf, .lin, .gob, .alt). The screen is the app's sage
   ground (.full in css/shell.css); one white card in the middle holds the brand, a title, the fields and the buttons.
   Three views share the card: Sign in, Enter the code, Set a password. The six code boxes are DD.ui.code6 (css/ui.css).
   Light and dark come from the tokens of css/base.css; nothing here names a colour. */
.signin { z-index: 47; display: grid; place-items: center; padding: 24px 16px 40px; }
.signin > .si-card { max-width: 380px; }
.si-card { width: 100%; margin: auto; background: var(--surface); border-radius: 22px; box-shadow: var(--lift);
  padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; animation: dd-rise 320ms var(--ease-out) both; }
.si-card.swap { animation: si-in 260ms var(--ease-out) both; }
@keyframes si-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The brand: the "D" tile and the name, in the dark sage. */
.si-brand { display: flex; align-items: center; gap: 9px; font-size: var(--t-xs); font-weight: 600; color: var(--sage-d); }
.si-brand i { width: 24px; height: 24px; border-radius: 8px; background: var(--app); display: grid; place-items: center; font-style: normal; font-size: var(--t-2xs); }
.si-card h1 { font-size: var(--t-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
/* A form only groups the fields for Enter and the browser's password keeper; its children sit in the card's column. */
.si-form { display: contents; }
.si-to { font-size: var(--t-sm); color: var(--ink2); margin-top: -8px; overflow-wrap: anywhere; }

/* A labelled field: the small grey label, then the tinted field with no line (round 13, FX-F2: the app's fields are
   tinted, never bordered; the page drew a white field with a thin line). */
.si-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.si-field > span:first-child { font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.si-lin { position: relative; display: flex; align-items: center; min-height: 44px; border-radius: 11px; background: var(--field);
  transition: box-shadow 250ms ease; }
.si-lin:focus-within { box-shadow: 0 0 0 2px var(--sage); }
.si-lin input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; padding: 0 12px; font: 400 var(--t-s) var(--font); color: var(--ink); outline: none; }
.si-lin input[type="password"] { letter-spacing: 2px; }
.si-lin input[type="password"]::placeholder { letter-spacing: normal; }
.si-show { flex: none; border: 0; background: transparent; padding: 0 12px; height: 44px; font: 500 var(--t-xs) var(--font); color: var(--sage-d); cursor: pointer; border-radius: 0 11px 11px 0; }
.si-err { font-size: var(--t-xs); font-weight: 500; color: var(--bad-d); margin: -4px 2px 0; }
.si-err.hint { font-weight: 400; color: var(--ink3); } /* Set a password's rule before a short password (FX3-A) */
.si-err.shake { animation: ac-shake 200ms ease; }

/* The main button (the app's dark pill, full width, 44 px) and the quiet sage buttons under it. */
.si-go { font: 600 var(--t-s) var(--font); border: 0; border-radius: 999px; background: var(--ink); color: var(--surface); min-height: 44px; padding: 0 16px; cursor: pointer;
  transition: transform var(--m-press) var(--ease-out), opacity 200ms ease; }
.si-go:active { transform: scale(.97); }
.si-alts { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: -2px; }
.si-alt { font: 500 var(--t-sm) var(--font); border: 0; background: transparent; color: var(--sage-d); padding: 4px 8px; cursor: pointer; border-radius: 8px;
  transition: background-color 200ms ease, transform var(--m-press) var(--ease-out); }
.si-alt:hover { background: var(--field); }
.si-alt:active { transform: scale(.97); }
.si-card button:disabled { opacity: .55; cursor: default; }
.si-card .code6 { gap: 6px; }

/* A phone: the card takes the width less the 16 px sides; fields at 16 px so the phone does not zoom into them. */
@media (max-width: 600px) {
  .signin { padding: 20px 16px 32px; align-items: start; padding-top: max(56px, 12vh); }
  .si-card { padding: 22px 18px 18px; }
  .si-lin input { font-size: var(--t-m); }
}
@media (max-width: 360px) {
  .si-card { padding: 20px 14px 16px; border-radius: 20px; }
  /* The two quiet buttons after a wrong password share one row. */
  .si-alts { flex-wrap: nowrap; gap: 0; }
  .si-alt { padding: 4px 6px; font-size: var(--t-xs); white-space: nowrap; }
  .si-card .code6 span { height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .si-card, .si-card.swap { animation: none; } }