/* ============================================================
   myCFAOS — SHELL LAYER
   Screens built on brand.css: the sign-in screen, the app header,
   the store toggle, and the home module grid. Uses the brand tokens
   from brand.css; adds only screen-specific layout here.
   ============================================================ */

/* ── Sign-in screen ───────────────────────────────────────── */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(30,58,138,0.10), transparent 60%),
    var(--light);
}
.auth-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);
  padding:34px 30px 26px;width:100%;max-width:400px;
}
.auth-card .motion-accent{
  position:absolute;top:0;left:0;border-radius:0;height:5px;
}
.auth-logo{display:flex;justify-content:center;margin:6px 0 22px;}
.auth-logo .wordmark{font-size:26px;}
.auth-logo .mark{width:34px;height:34px;}

.auth-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:4px;}
.auth-sub{font-size:14px;color:var(--slate);text-align:center;margin-bottom:24px;}

.field{margin-bottom:16px;}
.field-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.field label{
  font-size:12px;font-weight:600;color:var(--slate);
  letter-spacing:0.01em;
}
.field .forgot{font-size:12px;font-weight:500;}

.auth-error{
  font-size:13px;color:var(--red);background:#fef2f3;
  border:1px solid #f6c6cb;border-radius:var(--radius-sm);
  padding:9px 12px;margin-bottom:16px;display:none;
}
.auth-error.show{display:block;}

.auth-btn{width:100%;padding:12px;font-size:15px;margin-top:4px;}

.auth-foot{
  font-size:12px;font-weight:600;color:var(--slate);
  text-align:center;margin-top:20px;letter-spacing:0.01em;
}
.auth-note{font-size:11px;color:var(--gray);text-align:center;margin-top:10px;line-height:1.5;}

/* ── App header (home + module pages) ─────────────────────── */
.app-header{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);
}
.app-header .logo .wordmark{font-size:20px;}
.app-header .logo .mark{width:26px;height:26px;}
.app-spacer{flex:1;}
.who{font-size:13px;color:var(--slate);font-weight:500;}

/* ── Store toggle ─────────────────────────────────────────── */
.store-toggle{display:flex;gap:4px;background:var(--light);border-radius:12px;padding:4px;}
.store-btn{
  padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;
  cursor:pointer;border:none;background:transparent;color:var(--slate);
  font-family:inherit;transition:background 0.15s,color 0.15s,box-shadow 0.15s;
}
.store-btn:hover{color:var(--navy);}
.store-btn.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm);}

/* ── Home ─────────────────────────────────────────────────── */
.home{max-width:1040px;margin:0 auto;padding:32px 22px;}
.greeting{font-size:26px;font-weight:700;margin-bottom:4px;}
.greeting-sub{font-size:15px;color:var(--slate);margin-bottom:26px;}

.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.module-tile{
  display:flex;flex-direction:column;gap:10px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.module-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#cbd5e1;
}
.module-ic{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--light);color:var(--navy);
}
.module-tile:hover .module-ic{background:var(--navy);color:#fff;}
.module-label{font-size:16px;font-weight:600;color:var(--navy);}
.module-blurb{font-size:12.5px;color:var(--slate);line-height:1.45;}

/* ── Module placeholder page ──────────────────────────────── */
.module-page{max-width:720px;margin:0 auto;padding:64px 22px;text-align:center;}
.module-page .big-ic{
  width:76px;height:76px;border-radius:20px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;
}
.module-page .big-ic svg{width:38px;height:38px;}
.module-page h1{font-size:26px;font-weight:700;margin-bottom:8px;}
.module-page p{font-size:15px;color:var(--slate);margin-bottom:26px;line-height:1.55;}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:860px){ .module-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .module-grid{grid-template-columns:1fr;} }