/* The look of the sign-in pages (signin.html, denied.html): the same Aegean tokens as the tutor and the notebook, and the
   welcome card of the tutor's first screen. Nothing here is used by the app itself. */
:root {
  color-scheme: light;
  --bg: #FAF7F1; --bg-glow: rgba(45, 127, 249, .06);
  --surface: #FFFFFF; --surface-2: #F4EFE4;
  --ink: #1B2336; --ink-soft: #3F485A; --muted: #5C6475;
  --line: #E4DCCB; --line-soft: #EEE8DA;
  --primary: #1B4F8A; --primary-deep: #0E3A66; --focus: #2D7FF9;
  --warn: #7F4A00; --warn-bg: #FFF3D9; --warn-line: #EBD39B;
  --shadow-sm: 0 1px 2px rgba(14, 58, 102, .06);
  --meander: rgba(27, 79, 138, .55);
  --r-md: 10px;
  --display: "Noto Serif Display", "Noto Serif", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
  --meander-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M0 9.25H18M2 9.25V.75H14V6.25H6.5V3.5H10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  /* Google's sign-in button: white with a grey outline (light), near-black with a grey outline (dark). */
  --g-bg: #FFFFFF; --g-line: #747775; --g-ink: #1F1F1F; --g-hover: rgba(48, 48, 48, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1426; --bg-glow: rgba(60, 130, 240, .10);
    --surface: #121E36; --surface-2: #172744;
    --ink: #ECE6D8; --ink-soft: #C3CADA; --muted: #98A4BC;
    --line: #25375A; --line-soft: #1B2B49;
    --primary: #8DBBF7; --primary-deep: #BBD7FB; --focus: #7DB0FF;
    --warn: #F2C477; --warn-bg: #352A14; --warn-line: #5C4820;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --meander: rgba(141, 187, 247, .45);
    --g-bg: #131314; --g-line: #8E918F; --g-ink: #E3E3E3; --g-hover: rgba(232, 234, 237, .08);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; color: var(--ink); font: 16px/1.55 var(--sans);
       -webkit-font-smoothing: antialiased; padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
       background: radial-gradient(1100px 320px at 50% -140px, var(--bg-glow), transparent 70%) no-repeat, var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.card { position: relative; width: 100%; max-width: 440px; text-align: center; padding: 28px 24px 24px; background: var(--surface);
        border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: var(--shadow-sm); animation: rise .35s ease both; }
.meander { height: 9px; margin: 0 auto 16px; max-width: 160px; background: var(--meander); opacity: .55;
           -webkit-mask: var(--meander-mask) repeat-x left center / auto 100%; mask: var(--meander-mask) repeat-x left center / auto 100%; }
.monogram { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff;
            font: 700 22px/1 var(--display); }
.eyebrow { margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 6px 0 0; font: 600 clamp(30px, 8vw, 40px)/1.15 var(--display); color: var(--primary-deep); overflow-wrap: anywhere; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.sub b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.note { margin: 16px 0 0; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn);
        font-size: 14px; line-height: 1.4; }
.actions { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fine { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }

/* Google's button (branding guidelines): 40 px high, the multicolour G at 18 px with 12 px around it, "Sign in with Google" in Roboto Medium 14 px. */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--g-line); border-radius: 4px;
        background: var(--g-bg); color: var(--g-ink); font: 500 14px/20px "Roboto", Arial, sans-serif; letter-spacing: .25px; text-decoration: none; cursor: pointer;
        transition: background-color .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gbtn:hover { background-image: linear-gradient(var(--g-hover), var(--g-hover)); }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.linkbtn { color: var(--primary); font-size: 14px; font-weight: 550; text-decoration: none; padding: 4px 8px; border-radius: var(--r-md); }
.linkbtn:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }