:root { --bg:#fff; --fg:#18181b; --mut:#71717a; --line:#e4e4e7; --card:#fff; --soft:#fafafa; --acc:#4f46e5; --acc-soft:#eef2ff; --reach:#dc2626; --reach-bg:#fef2f2; --target:#2563eb; --target-bg:#eff6ff; --safety:#16a34a; --safety-bg:#f0fdf4; --warn:#b45309; --warn-bg:#fffbeb; --r:10px; } @media (prefers-color-scheme: dark) { :root { --bg:#0c0c0e; --fg:#f4f4f5; --mut:#a1a1aa; --line:#27272a; --card:#141417; --soft:#18181b; --acc:#818cf8; --acc-soft:#1e1b4b; --reach:#f87171; --reach-bg:#2a1416; --target:#60a5fa; --target-bg:#111c2e; --safety:#4ade80; --safety-bg:#0f2417; --warn:#fbbf24; --warn-bg:#2a2113; } } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; -webkit-font-smoothing:antialiased; } a { color:var(--acc); text-decoration:none; } .wrap { max-width:1040px; margin:0 auto; padding:0 20px; } .wide { max-width:1320px; } h1 { font-size:34px; font-weight:680; margin:0 0 10px; letter-spacing:-.025em; line-height:1.15; } h2 { font-size:23px; font-weight:640; margin:0 0 4px; letter-spacing:-.018em; } h3 { font-size:15.5px; font-weight:640; margin:0 0 5px; } p.sub { color:var(--mut); margin:0 0 24px; font-size:14px; max-width:70ch; } .micro { color:var(--mut); font-size:12.5px; } header { position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); padding:12px 0 0; margin-bottom:26px; } .bar-wrap { display:flex; align-items:center; gap:18px; padding-bottom:12px; } .brand { display:flex; align-items:center; gap:9px; color:var(--fg); font-size:15.5px; } /* logo.svg carries its own tile and colour, so this only sizes it. */ .logo { width:26px; height:26px; flex:none; display:block; } nav { display:flex; gap:18px; margin-left:8px; } nav a { color:var(--mut); font-size:14px; padding:4px 0; border-bottom:2px solid transparent; } nav a:hover { color:var(--fg); } nav a.on { color:var(--fg); border-bottom-color:var(--acc); font-weight:550; } #authBox { margin-left:auto; display:flex; align-items:center; gap:10px; } .avatar { width:28px;height:28px;border-radius:99px;background:var(--acc-soft);object-fit:cover; } .only-mobile { display:none; } .bar { height:3px; background:transparent; border-radius:2px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--acc); width:0; transition:width .3s ease; } .view { display:none; } .view.on { display:block; animation:in .2s ease; } /* One wizard step at a time. This rule was lost when the styles were moved out of index.html, and without it every step renders stacked — the Continue button only scrolls, which reads as a page that never advances. */ .step { display:none; } .step.on { display:block; animation:in .22s ease; } @keyframes in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } /* home */ .hero { padding:34px 0 30px; max-width:66ch; } .hero p { font-size:16.5px; color:var(--mut); margin:0 0 22px; } .cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:40px; } .tile { border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--card); color:var(--fg); transition:.12s; } .tile:hover { border-color:var(--acc); transform:translateY(-2px); } .tile p { color:var(--mut); font-size:13.5px; margin:0; } /* forms */ fieldset { border:0; padding:0; margin:0 0 26px; } .lbl { font-weight:600; font-size:14px; margin-bottom:2px; } .hint { color:var(--mut); font-size:13px; margin:0 0 10px; } .opts { display:grid; gap:8px; } .opts.cols2 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .opts.cols3 { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); } .opt { position:relative; } .opt input { position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; } .opt span { display:block; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); cursor:pointer; transition:.12s; font-size:14px; } .opt span b { display:block; font-weight:600; } .opt span em { display:block; font-style:normal; color:var(--mut); font-size:12.5px; margin-top:2px; line-height:1.4; } .opt input:hover + span { border-color:var(--mut); } .opt input:checked + span { border-color:var(--acc); background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--acc); } .opt input:focus-visible + span { outline:2px solid var(--acc); outline-offset:2px; } input[type=text], input[type=number], input[type=date], select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--fg); font:inherit; font-size:14px; } textarea { min-height:260px; resize:vertical; line-height:1.65; font-size:14.5px; } input:focus, select:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:-1px; border-color:var(--acc); } .row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; } .row.tight { gap:10px; } .nav { display:flex; gap:10px; justify-content:space-between; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); } button, .btn { font:inherit; font-size:14px; font-weight:500; padding:10px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; transition:.12s; display:inline-block; } button:hover, .btn:hover { border-color:var(--mut); } .primary { background:var(--acc); border-color:var(--acc); color:#fff; } .primary:hover { filter:brightness(1.08); border-color:var(--acc); } .ghost { border-color:transparent; color:var(--mut); } .sm { padding:6px 12px; font-size:13px; } .err { color:var(--reach); font-size:13px; margin-top:10px; } /* activities */ .act { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:10px; background:var(--card); } .act .top { display:flex; gap:8px; align-items:center; margin-bottom:9px; } .act .top input { flex:1; } .tierbadge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; white-space:nowrap; background:var(--soft); border:1px solid var(--line); color:var(--mut); } .tierbadge.t1 { color:var(--safety); background:var(--safety-bg); border-color:transparent; } .tierbadge.t2 { color:var(--target); background:var(--target-bg); border-color:transparent; } .tierbadge.t3 { color:var(--acc); background:var(--acc-soft); border-color:transparent; } .del { border:0; background:transparent; color:var(--mut); padding:4px 8px; font-size:18px; line-height:1; cursor:pointer; } .del:hover { color:var(--reach); } .summary { padding:12px 14px; border-radius:var(--r); background:var(--acc-soft); font-size:13.5px; margin-top:4px; } /* essay */ .lab { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; } @media (max-width:820px) { .lab { grid-template-columns:1fr; } } .lab-side { position:sticky; top:96px; } .lab-side .btn { width:100%; margin-bottom:10px; } .eitem { padding:9px 11px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:6px; cursor:pointer; font-size:13.5px; background:var(--card); } .eitem:hover { border-color:var(--mut); } .eitem.on { border-color:var(--acc); background:var(--acc-soft); } .eitem b { display:block; font-weight:580; } .dims { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:16px 0; } .dim { border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; background:var(--card); } .dim b { font-size:20px; font-weight:650; letter-spacing:-.02em; display:block; } .dim span { font-size:12px; color:var(--mut); } .dim .mtr { height:3px; background:var(--line); border-radius:2px; margin-top:7px; overflow:hidden; } .dim .mtr i { display:block; height:100%; background:var(--acc); } .flag { border-left:3px solid var(--line); padding:8px 0 8px 12px; margin-bottom:10px; font-size:13.5px; } .flag.sev2 { border-color:var(--reach); } .flag.sev1 { border-color:var(--warn); } .flag q { display:block; font-style:italic; margin-bottom:3px; } .flag em { font-style:normal; color:var(--mut); } .bigscore { display:flex; align-items:baseline; gap:12px; margin-bottom:4px; } .bigscore b { font-size:38px; font-weight:650; letter-spacing:-.03em; } /* results + explorer */ .tally { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; } .pill { padding:5px 12px; border-radius:99px; font-size:13px; font-weight:600; border:1px solid var(--line); } .pill.r { color:var(--reach); background:var(--reach-bg); border-color:transparent; } .pill.t { color:var(--target); background:var(--target-bg); border-color:transparent; } .pill.s { color:var(--safety); background:var(--safety-bg); border-color:transparent; } .notice { background:var(--warn-bg); color:var(--warn); padding:11px 14px; border-radius:var(--r); font-size:13.5px; margin-bottom:16px; } .filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:22px; padding:12px; background:var(--soft); border:1px solid var(--line); border-radius:var(--r); } .filters select, .filters input[type=text] { width:auto; min-width:120px; padding:7px 10px; font-size:13px; } .filters input[type=text] { flex:1; min-width:150px; } .filters input[type=checkbox] { width:auto; margin:0; } .filters label { font-size:13px; color:var(--mut); display:flex; align-items:center; gap:6px; cursor:pointer; } .filters button { margin-left:auto; } .cols { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; } @media (max-width:900px) { .cols { grid-template-columns:1fr; } } .col > h3 { display:flex; align-items:center; gap:8px; } .col > .desc { color:var(--mut); font-size:12.5px; margin:0 0 12px; } .dot { width:9px;height:9px;border-radius:99px;flex:none; } .col.r .dot{background:var(--reach)} .col.t .dot{background:var(--target)} .col.s .dot{background:var(--safety)} .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; } .card { border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:13px 14px; margin-bottom:8px; cursor:pointer; transition:.12s; } .card:hover { border-color:var(--acc); } .card h4 { margin:0; font-size:14.5px; font-weight:620; line-height:1.35; padding-right:52px; } .card .meta { color:var(--mut); font-size:12.5px; margin-top:3px; } .card .top { position:relative; } .odds { position:absolute; top:0; right:0; text-align:right; } .odds b { font-size:17px; font-weight:650; letter-spacing:-.02em; } .odds i { display:block; font-style:normal; font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; margin-top:-2px; } .card.r .odds b{color:var(--reach)} .card.t .odds b{color:var(--target)} .card.s .odds b{color:var(--safety)} .track { height:3px; background:var(--line); border-radius:2px; margin-top:10px; overflow:hidden; } .track i { display:block;height:100%; } .card.r .track i{background:var(--reach)} .card.t .track i{background:var(--target)} .card.s .track i{background:var(--safety)} .tag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:5px; background:var(--soft); color:var(--mut); border:1px solid var(--line); margin:8px 4px 0 0; } .tag.hot { color:var(--reach); background:var(--reach-bg); border-color:transparent; } .tag.ok { color:var(--safety); background:var(--safety-bg); border-color:transparent; } .detail { display:none; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; color:var(--mut); } .card.open .detail { display:block; } .detail ul { margin:0 0 10px; padding-left:17px; } .detail li { margin-bottom:3px; } .detail .weigh { color:var(--fg); font-weight:600; font-size:12.5px; margin-bottom:4px; } .empty { color:var(--mut); font-size:13px; padding:14px; border:1px dashed var(--line); border-radius:var(--r); text-align:center; } .foot { margin-top:44px; padding:22px 20px 60px; border-top:1px solid var(--line); color:var(--mut); font-size:12.5px; } .foot b { color:var(--fg); } /* modal */ .modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; z-index:60; padding:20px; } .modal[hidden] { display:none; } .modal-card { background:var(--bg); border:1px solid var(--line); border-radius:14px; max-width:660px; width:100%; max-height:88vh; overflow-y:auto; padding:22px 24px 26px; } .chartwrap { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:14px 0 6px; } .legend { flex:1; min-width:210px; } .lg { display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 0; } .lg i { width:10px;height:10px;border-radius:3px;flex:none; } .lg span { flex:1; } .lg b { font-variant-numeric:tabular-nums; } .lg em { font-style:normal; color:var(--mut); font-size:11.5px; min-width:88px; text-align:right; } .plist li { margin-bottom:7px; } .kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0; } .kv div { background:var(--soft); border-radius:8px; padding:9px 11px; } .kv b { display:block; font-size:16px; font-weight:640; } .kv span { font-size:11.5px; color:var(--mut); } /* list */ .litem { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:8px; background:var(--card); } .litem .lh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .litem .lh b { font-size:14.5px; } .litem .ctrl { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-top:10px; } .litem select, .litem input { padding:7px 9px; font-size:13px; } @media (max-width:720px) { nav { display:none; } nav.open { display:flex; position:absolute; top:56px; left:0; right:0; background:var(--bg); flex-direction:column; padding:12px 20px; border-bottom:1px solid var(--line); gap:12px; } .only-mobile { display:inline-block; } h1 { font-size:27px; } } /* ---------------------------------------------------- type & rhythm ---- */ body { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-feature-settings:"cv02","cv03","cv04","ss01"; letter-spacing:-0.005em; } h1, h2, .hero h1 { font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-0.02em; } h1 { font-size:40px; line-height:1.1; } .hero p { font-size:17px; line-height:1.6; max-width:56ch; } .brand b { font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-0.01em; font-size:17px; } .prose { max-width:68ch; } .prose h3 { margin:26px 0 6px; font-size:15px; } .prose p, .prose li { color:var(--mut); font-size:14.2px; line-height:1.65; } .prose ul { padding-left:18px; margin:0 0 6px; } .prose li { margin-bottom:6px; } .prose b { color:var(--fg); } /* ------------------------------------------------------ college cards -- */ .grid { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; } .ccard { border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; cursor:pointer; transition:.15s ease; display:flex; flex-direction:column; } .ccard:hover { border-color:var(--acc); transform:translateY(-3px); box-shadow:0 8px 24px rgb(0 0 0 / .08); } .cover { height:106px; background-size:cover; background-position:center; background-color:var(--soft); } .cover.blank { background:linear-gradient(135deg,var(--acc-soft),var(--soft)); } .cbody { padding:12px 14px 14px; } .chead { display:flex; gap:10px; align-items:center; margin-bottom:8px; } .chead h4 { margin:0; font-size:14.5px; font-weight:620; line-height:1.3; } .chead .meta { margin-top:2px; } .mono { flex:none; border-radius:11px; } .headline { color:var(--acc); font-weight:550; } .hero-img { height:170px; margin:-22px -24px 16px; background-size:cover; background-position:center; border-radius:14px 14px 0 0; } .credit { margin-top:10px; opacity:.75; } /* ------------------------------------------------------- consent bar --- */ .consent { position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; padding:14px 20px; background:var(--card); border-top:1px solid var(--line); font-size:13.5px; box-shadow:0 -6px 24px rgb(0 0 0 / .1); } .consent[hidden] { display:none; } .consent > div { max-width:62ch; color:var(--mut); } .consent b { color:var(--fg); } /* --------------------------------------------------------- polish ------ */ .tile { border-radius:14px; } .tile:hover { box-shadow:0 8px 24px rgb(0 0 0 / .07); } .modal-card { border-radius:16px; } .kv div { border:1px solid var(--line); background:var(--card); } .legend .lg { padding:5px 0; border-bottom:1px solid var(--line); } .legend .lg:last-child { border-bottom:0; } .chartwrap { gap:26px; } .rank { font-size:11.5px; color:var(--mut); margin-top:2px; letter-spacing:.01em; } .chead h4 { line-height:1.25; } /* ------------------------------------------------- calculator stepper -- */ .stepper { display:flex; gap:6px; margin:0 0 26px; flex-wrap:wrap; } .stp { display:flex; align-items:center; gap:8px; padding:8px 14px 8px 9px; border:1px solid var(--line); border-radius:99px; font-size:13px; color:var(--mut); background:var(--card); flex:1; min-width:130px; } .stp i { width:21px; height:21px; border-radius:99px; background:var(--soft); color:var(--mut); display:grid; place-items:center; font-style:normal; font-size:11.5px; font-weight:650; flex:none; } .stp.on { border-color:var(--acc); color:var(--fg); font-weight:550; } .stp.on i { background:var(--acc); color:#fff; } .stp.done i { background:var(--safety); color:#fff; } .stp.done { color:var(--fg); } /* ------------------------------------------------------------ panels -- */ .panel { border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; margin-bottom:16px; background:var(--card); } .phead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; } .phead h3 { margin:0; font-family:Fraunces,Georgia,serif; font-size:17px; font-weight:600; } .panel .hint { margin-bottom:14px; } /* Labels sit above the input and stay put — a placeholder vanishes the moment you start typing, which is exactly when you still need the label. */ .field { display:flex; flex-direction:column; gap:5px; } .field label { font-size:13px; font-weight:600; letter-spacing:-.005em; } .field small { color:var(--mut); font-size:12px; line-height:1.45; } .field input, .field select { margin:0; } .live { margin-top:12px; padding:10px 13px; border-radius:10px; background:var(--acc-soft); font-size:13.3px; line-height:1.5; } .live[hidden] { display:none; } .live b { font-weight:620; } .live.warn { background:var(--warn-bg); color:var(--warn); } .fallback { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; } .fallback summary { cursor:pointer; font-size:13px; color:var(--mut); } .fallback summary:hover { color:var(--fg); } .fallback[open] summary { margin-bottom:4px; color:var(--fg); } /* Logos are transparent by design — no plate, no border, nothing behind them. */ .logo-mark { flex:none; object-fit:contain; background:transparent; border-radius:0; display:block; } @media (prefers-color-scheme: dark) { /* Many college marks are dark ink meant for white paper. A light backing keeps them legible in dark mode without boxing them in. */ .logo-mark { background:rgba(255,255,255,.92); border-radius:8px; padding:3px; } } /* -------------------------------------------------- resume suggestions -- */ input[type=file] { padding:9px 11px; font-size:13px; background:var(--card); border:1px dashed var(--line); border-radius:var(--r); width:100%; cursor:pointer; } input[type=file]:hover { border-color:var(--acc); } .sugg { margin-top:14px; } .sugg h4 { margin:0 0 8px; font-size:13.5px; font-weight:620; } .sgi { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; background:var(--card); font-size:13.3px; } .sgi input { width:auto; margin:2px 0 0; flex:none; } .sgi div { flex:1; } .sgi b { font-weight:560; display:block; } .sgi em { font-style:normal; color:var(--mut); font-size:12px; } /* ================================================================ home == */ .eyebrow { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); font-weight:600; margin:0 0 12px; } .hero { padding:44px 0 34px; max-width:64ch; } .hero h1 { font-size:46px; line-height:1.06; margin-bottom:16px; } .hero p { font-size:17.5px; line-height:1.6; color:var(--mut); max-width:58ch; } .hero em { font-style:italic; color:var(--fg); } .btn.lg { padding:12px 24px; font-size:15px; } /* Numbers first — they do more for trust than any amount of prose. */ .proof { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px; } .proof > div { background:var(--bg); padding:18px 18px 16px; } .proof b { display:block; font-family:Fraunces,Georgia,serif; font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1; margin-bottom:7px; } .proof span { font-size:12.8px; color:var(--mut); line-height:1.45; display:block; } .band { padding:44px 0 8px; border-top:1px solid var(--line); margin-top:36px; } .band > h2 { font-size:27px; margin-bottom:8px; } .band > .sub { margin-bottom:24px; } .srcs { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; } .src { border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card); } .src h3 { font-family:Fraunces,Georgia,serif; font-size:17px; font-weight:600; margin-bottom:9px; } .src h3 a { border-bottom:1px solid color-mix(in srgb, var(--acc) 40%, transparent); } .src p { color:var(--mut); font-size:13.8px; line-height:1.6; margin:0 0 10px; } .src p:last-child { margin-bottom:0; } .src em { font-style:italic; color:var(--fg); } .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } .stepcard { border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card); position:relative; } .stepcard i { display:grid; place-items:center; width:28px; height:28px; border-radius:99px; background:var(--acc); color:#fff; font-style:normal; font-weight:650; font-size:13px; margin-bottom:12px; } .stepcard h3 { font-size:15px; margin-bottom:7px; line-height:1.35; } .stepcard p { color:var(--mut); font-size:13.6px; line-height:1.6; margin:0; } .stepcard em { font-style:italic; color:var(--fg); } .honest { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px 26px; } .honest h3 { font-size:14.5px; margin-bottom:6px; } .honest p { color:var(--mut); font-size:13.6px; line-height:1.6; margin:0; } .tiles { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .tile h3 { font-family:Fraunces,Georgia,serif; font-size:16.5px; font-weight:600; } .tile p { line-height:1.55; } @media (max-width:720px) { .hero { padding:28px 0 24px; } .hero h1 { font-size:32px; } .hero p { font-size:16px; } .band { padding-top:34px; margin-top:28px; } .band > h2 { font-size:23px; } } .readback { white-space:pre-wrap; word-break:break-word; max-height:240px; overflow:auto; background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:12.4px; line-height:1.5; color:var(--mut); margin:10px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } /* Saved profile: label and value, stacking to one column on a phone. */ .facts { display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:1px; margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line); } .facts dt, .facts dd { background:var(--card); margin:0; padding:11px 14px; font-size:13.8px; } .facts dt { color:var(--mut); } .facts dd { color:var(--fg); } .who { display:flex; align-items:center; gap:7px; text-decoration:none; color:inherit; } .who:hover .micro { color:var(--fg); } @media (max-width:560px) { /* One column: the label sits directly above its value, so the only rule that should show is the one between pairs. */ .facts { grid-template-columns:1fr; gap:0; background:var(--card); } .facts dt { padding:10px 14px 0; } .facts dd { padding:2px 14px 10px; border-bottom:1px solid var(--line); } .facts dd:last-child { border-bottom:0; } } /* ------------------------------------------------------- header on phones */ .signin { white-space:nowrap; } .signin-short { display:none; } @media (max-width:560px) { .signin-long { display:none; } .signin-short { display:inline; } .bar-wrap { gap:10px; } .brand b { font-size:15px; } #authBox { gap:6px; } .btn.sm { padding:6px 10px; } } /* ------------------------------------------------------------ phones */ @media (max-width:560px) { /* iOS Safari zooms the whole page when you focus a field smaller than 16px and never zooms back out. Nothing on this page is worth that, so every field a student types into goes to 16 — including the ones the filter and list rules deliberately shrink on desktop. */ input[type=text], input[type=number], input[type=date], select, textarea, .filters select, .filters input[type=text], .litem select, .litem input, input[type=file] { font-size:16px; } /* Thumbs, not cursors. `button` and `.btn` are the same thing here (see the shared rule above), so both need this or the plain