/* ===========================================================
   AI Visa Process — interface styles

   Uses only fonts already on the machine, so it looks the same
   whether or not the server has internet access.
   =========================================================== */

:root{
  --paper:#eef2f6;
  --paper-2:#e4eaf1;
  --card:#ffffff;

  --ink:#152230;
  --ink-soft:#5b6b7a;
  --ink-faint:#8695a3;

  --navy:#16374f;
  --navy-2:#1e4b6b;
  --navy-light:#2f6d97;
  --navy-edge:#0f2a3d;

  --gold:#a8752c;
  --teal:#22685e;
  --teal-light:#2f8878;
  --teal-edge:#174941;
  --danger:#a13a3a;
  --danger-light:#c04c4c;
  --danger-edge:#7c2b2b;

  --line:#d3dde6;
  --line-soft:#e8eef3;

  --radius:12px;
  --radius-sm:9px;

  --shadow-1:0 1px 2px rgba(21,34,48,.06), 0 2px 6px rgba(21,34,48,.05);
  --shadow-2:0 2px 4px rgba(21,34,48,.07), 0 10px 24px -8px rgba(21,34,48,.16);
  --shadow-in:inset 0 1px 0 rgba(255,255,255,.55);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 50% -220px, #f7fafc 0%, rgba(247,250,252,0) 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--navy-light);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{color:var(--navy);margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:1.7rem;font-weight:700}
h2{font-size:1.28rem;font-weight:700}
h3{font-size:1.06rem;font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{margin:0 0 .75rem}

:focus-visible{outline:3px solid rgba(47,109,151,.45);outline-offset:2px;border-radius:6px}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;
  padding:.8rem 1.6rem;
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fa 100%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(21,34,48,.06);
  position:sticky;top:0;z-index:50;
}
.topbar .brand{
  font-weight:800;font-size:1.06rem;letter-spacing:-.02em;
  color:var(--navy);text-decoration:none;
}
.topbar .brand:hover{text-decoration:none;color:var(--navy-2)}
.topbar nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.topbar nav a:not(.btn){
  font-weight:600;font-size:.88rem;color:var(--ink-soft);
  padding:.4rem .7rem;border-radius:8px;
  transition:background .15s ease,color .15s ease;
}
.topbar nav a:not(.btn):hover{background:rgba(47,109,151,.10);color:var(--navy);text-decoration:none}
.topbar .who{color:var(--ink-faint);font-size:.8rem;padding-left:.5rem}

.shell{max-width:1020px;margin:0 auto;padding:1.9rem 1.5rem 4rem}
.shell.wide{max-width:1220px}
.shell.narrow{max-width:470px}

.site-footer{
  text-align:center;color:var(--ink-faint);font-size:.8rem;
  padding:1.6rem;border-top:1px solid var(--line);
}

/* ---------------- cards ---------------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow-1);
}
.card.tight{padding:1rem 1.15rem}
.card-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;
}
.card-head h1,.card-head h2,.card-head h3{margin:0}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.95rem}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-soft);letter-spacing:.01em}
.field input,.field select,.field textarea{
  padding:.6rem .75rem;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.93rem;font-family:inherit;
  background:#fcfdfe;color:var(--ink);width:100%;
  box-shadow:inset 0 1px 2px rgba(21,34,48,.05);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#b9c8d5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;
  border-color:var(--navy-light);
  box-shadow:inset 0 1px 2px rgba(21,34,48,.04), 0 0 0 3px rgba(47,109,151,.16);
}
.field .hint{font-size:.77rem;color:var(--ink-faint);font-weight:400}

.row{display:flex;gap:1rem;flex-wrap:wrap}
.row>*{flex:1 1 200px;min-width:0}

.check{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem}
.check input{width:auto;margin:0;accent-color:var(--navy-light);transform:scale(1.15)}
.check label{font-size:.89rem;font-weight:500;color:var(--ink)}

/* ---------------- buttons: raised and pressable ---------------- */
.btn{
  display:inline-block;
  padding:.6rem 1.15rem;
  border:1px solid var(--navy);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--navy-light) 0%, var(--navy-2) 55%, var(--navy) 100%);
  color:#fff;font-weight:700;font-size:.89rem;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.35;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 2px 0 var(--navy-edge),
    0 3px 6px rgba(21,34,48,.22);
  transform:translateY(0);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:#fff}
.btn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28),
    0 1px 2px rgba(21,34,48,.2);
}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

.btn.small{padding:.36rem .8rem;font-size:.8rem;border-radius:7px}

.btn.secondary{
  background:linear-gradient(180deg,#ffffff 0%,#eef3f7 100%);
  color:var(--navy);
  border-color:#c3d1dd;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 0 #d5dfe8,
    0 3px 6px rgba(21,34,48,.12);
}
.btn.secondary:hover{filter:none;background:linear-gradient(180deg,#ffffff 0%,#e7eef4 100%);color:var(--navy)}
.btn.secondary:active{
  box-shadow:inset 0 2px 4px rgba(21,34,48,.18), 0 1px 1px rgba(21,34,48,.1);
}

.btn.danger{
  border-color:#8a2f2f;
  background:linear-gradient(180deg, var(--danger-light) 0%, var(--danger) 60%, #8f3333 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 0 var(--danger-edge),
    0 3px 6px rgba(21,34,48,.22);
}
.btn.danger:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.3), 0 1px 2px rgba(21,34,48,.2)}

.btn.ok-btn{
  border-color:#1a5148;
  background:linear-gradient(180deg, var(--teal-light) 0%, var(--teal) 60%, #1c5a51 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 0 var(--teal-edge),
    0 3px 6px rgba(21,34,48,.22);
}
.btn.ok-btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.3), 0 1px 2px rgba(21,34,48,.2)}

/* ---------------- tables ---------------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;
}
table{width:100%;border-collapse:collapse}
th,td{
  text-align:left;padding:.65rem .8rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.89rem;vertical-align:top;
}
th{
  font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;
  color:var(--ink-soft);
  background:linear-gradient(180deg,#f5f8fa 0%,#eef3f7 100%);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fbfd}

/* ---------------- pills, flashes ---------------- */
.pill{
  display:inline-block;padding:.2rem .6rem;border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%,#f1f5f8 100%);
  box-shadow:var(--shadow-in);
  font-size:.73rem;font-weight:700;white-space:nowrap;color:var(--ink-soft);
}
.pill.ok{border-color:#a9cfc7;color:var(--teal);background:linear-gradient(180deg,#f2fbf8 0%,#e5f5f0 100%)}
.pill.warn{border-color:#e0c48f;color:var(--gold);background:linear-gradient(180deg,#fffaf1 0%,#fdf3e3 100%)}
.pill.bad{border-color:#e0b0b0;color:var(--danger);background:linear-gradient(180deg,#fdf4f4 0%,#fbeaea 100%)}

.flash{
  padding:.8rem 1.05rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.9rem;
  border:1px solid #9ec9c0;color:#1c5a51;
  background:linear-gradient(180deg,#f3fbf9 0%,#e8f6f2 100%);
  box-shadow:var(--shadow-1);
}
.flash.error{border-color:#dcaeae;color:#8f3333;background:linear-gradient(180deg,#fdf5f5 0%,#fbebeb 100%)}
.flash.info{border-color:#b4cee0;color:var(--navy);background:linear-gradient(180deg,#f4f9fc 0%,#eaf2f8 100%)}

.error-text{color:var(--danger);font-size:.85rem;margin:.4rem 0}
.muted{color:var(--ink-soft);font-size:.88rem}
.empty{color:var(--ink-faint);font-style:italic;padding:.6rem 0}

/* ---------------- status timeline ---------------- */
.timeline{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0}
.timeline .stage{
  padding:.36rem .7rem;border-radius:7px;font-size:.78rem;font-weight:600;
  background:linear-gradient(180deg,#ffffff 0%,#f2f6f9 100%);
  border:1px solid var(--line);color:var(--ink-faint);
  box-shadow:var(--shadow-in);
}
.timeline .stage.done{
  border-color:#a9cfc7;color:var(--teal);
  background:linear-gradient(180deg,#f4fbf9 0%,#e9f6f2 100%);
}
.timeline .stage.current{
  background:linear-gradient(180deg, var(--navy-light) 0%, var(--navy) 100%);
  border-color:var(--navy);color:#fff;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(21,34,48,.25);
}

.history{list-style:none;margin:0;padding:0}
.history li{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.55rem 0;border-bottom:1px solid var(--line-soft);font-size:.88rem;
}
.history li:last-child{border-bottom:none}
.history .when{color:var(--ink-faint);font-size:.8rem;white-space:nowrap}

/* ---------------- section nav ---------------- */
.section-nav{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem}
.section-nav a{
  padding:.42rem .85rem;border-radius:8px;font-size:.82rem;font-weight:700;
  background:linear-gradient(180deg,#ffffff 0%,#eef3f7 100%);
  border:1px solid #cbd8e3;color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(21,34,48,.08);
  transition:transform .08s ease, box-shadow .12s ease, color .12s ease;
}
.section-nav a:hover{color:var(--navy);border-color:var(--navy-light);text-decoration:none}
.section-nav a:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(21,34,48,.14)}

/* ---------------- sub-forms and records ---------------- */
.subform{
  background:linear-gradient(180deg,#f7fafc 0%,#f1f6fa 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:1.1rem;margin-top:.95rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.subform h4{
  margin:0 0 .75rem;font-size:.76rem;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.07em;font-weight:800;
}

.record{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);
}
.record:last-of-type{border-bottom:none}
.record .what{font-size:.93rem}
.record .meta{color:var(--ink-soft);font-size:.82rem}
.record form{margin:0}

/* ---------------- stat tiles ---------------- */
.stats{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.stat{
  flex:1 1 150px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fb 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.15rem;
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.9);
}
.stat .n{
  font-size:1.75rem;font-weight:800;color:var(--navy);line-height:1.05;
  letter-spacing:-.02em;
}
.stat .l{
  font-size:.72rem;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;margin-top:.15rem;
}

/* ---------------- landing hero ---------------- */
.hero{padding:1.5rem 0 2.2rem}
.hero h1{font-size:2.15rem;max-width:20ch;line-height:1.15}
.hero p{max-width:58ch;color:var(--ink-soft);font-size:1.02rem}
.hero .actions{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}

.steps-list{padding-left:1.2rem;color:var(--ink-soft);font-size:.92rem}
.steps-list li{margin-bottom:.35rem}

/* ---------------- decision panel ---------------- */
.card.decision{
  border:2px solid var(--navy-light);
  box-shadow:var(--shadow-2);
}
.decision-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin-top:.6rem;
}
.decide{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fb 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:1.05rem;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-1);
}
.decide h4{margin:0 0 .65rem;font-size:.96rem}
.decide .field{flex:1}
.decide.approve{border-left:5px solid var(--teal)}
.decide.approve h4{color:var(--teal)}
.decide.docs{border-left:5px solid var(--gold)}
.decide.docs h4{color:var(--gold)}
.decide.reject{border-left:5px solid var(--danger)}
.decide.reject h4{color:var(--danger)}

/* ---------------- opportunity cards ---------------- */
.card.opportunity{box-shadow:var(--shadow-1)}
.card.opportunity h3{margin:0 0 .18rem;font-size:1.07rem}
.opp-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.1rem;margin:1rem 0;
}
.opp-grid h4{
  font-size:.73rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);margin:0 0 .45rem;font-weight:800;
}
ul.tick,ul.cross{list-style:none;margin:0;padding:0;font-size:.88rem}
ul.tick li,ul.cross li{padding-left:1.4rem;position:relative;margin-bottom:.35rem}
ul.tick li::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:800}
ul.cross li::before{content:"\2192";position:absolute;left:0;color:var(--gold);font-weight:800}

table.facts{background:transparent}
table.facts th{
  width:1%;white-space:nowrap;background:transparent;text-transform:none;
  letter-spacing:0;font-size:.77rem;color:var(--ink-faint);padding-right:.6rem;font-weight:700;
}
table.facts td{font-size:.86rem}

p.source{font-size:.79rem;color:var(--ink-faint);margin:.7rem 0 0;word-break:break-word}
p.source a{word-break:break-all}

/* ---------------- inbox ---------------- */
.card.message.unread{
  border-left:5px solid var(--navy-light);
  box-shadow:var(--shadow-2);
}
.message-body{font-size:.92rem;white-space:pre-wrap;color:var(--ink)}

/* ---------------- goal chooser ---------------- */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem}
.goal{
  display:flex;gap:.65rem;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9fb 100%);
  box-shadow:var(--shadow-1);cursor:pointer;
  transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.goal:hover{border-color:var(--navy-light);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.goal:active{transform:translateY(0)}
.goal input{margin:.2rem 0 0;width:auto;accent-color:var(--navy-light);transform:scale(1.15)}
.goal strong{display:block;font-size:.93rem;color:var(--navy)}
.goal span{font-size:.8rem;color:var(--ink-soft)}

/* ---------------- motion preferences ---------------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .btn:active,.goal:hover,.section-nav a:active{transform:none}
}

/* ---------------- print ---------------- */
@media print{
  .topbar,.site-footer,.section-nav{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}

/* ---------------- opportunity type accents ---------------- */
.card.opportunity{position:relative;overflow:hidden}
.card.opportunity::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--navy-light),var(--navy));
}
.card.opportunity.study::before{background:linear-gradient(180deg,#4a8fbf,#1e4b6b)}
.card.opportunity.job::before{background:linear-gradient(180deg,var(--teal-light),var(--teal))}
.card.opportunity.visa::before{background:linear-gradient(180deg,#c99a49,var(--gold))}
.card.opportunity{padding-left:1.7rem}

/* ---------------- country + type chips ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .6rem;border-radius:7px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%,#eef3f7 100%);
  border:1px solid #cbd8e3;color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.chip.country{border-color:#bcd0e0;color:var(--navy)}
.chip.study{border-color:#a9c8dd;color:#1e4b6b;background:linear-gradient(180deg,#f5fafd,#e9f2f8)}
.chip.job{border-color:#a9cfc7;color:var(--teal);background:linear-gradient(180deg,#f3fbf9,#e7f5f1)}
.chip.visa{border-color:#e0c48f;color:var(--gold);background:linear-gradient(180deg,#fffaf1,#fdf3e3)}

/* ---------------- section titles with a rule ---------------- */
.section-title{
  display:flex;align-items:center;gap:.75rem;
  margin:2rem 0 1rem;
}
.section-title h2{margin:0;white-space:nowrap}
.section-title .line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.section-title .count{
  font-size:.75rem;font-weight:800;color:var(--ink-faint);
  background:var(--card);border:1px solid var(--line);
  padding:.18rem .55rem;border-radius:999px;
}

/* ---------------- landing page ---------------- */
.hero-wrap{
  background:linear-gradient(160deg,#ffffff 0%,#f2f7fb 60%,#e9f0f6 100%);
  border:1px solid var(--line);border-radius:16px;
  padding:2.4rem 2.2rem;margin-bottom:1.5rem;
  box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
}
.hero-wrap::after{
  content:"";position:absolute;right:-90px;top:-90px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,109,151,.10),rgba(47,109,151,0) 70%);
}
.hero-wrap h1{font-size:2.3rem;line-height:1.12;max-width:18ch;margin-bottom:.7rem}
.hero-wrap .lede{font-size:1.05rem;color:var(--ink-soft);max-width:56ch}
.hero-wrap .actions{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}

.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem}
.route{
  background:linear-gradient(180deg,#fff 0%,#f6f9fb 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem;box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .15s ease;
}
.route:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.route h3{font-size:1rem;margin-bottom:.35rem}
.route p{font-size:.86rem;color:var(--ink-soft);margin:0}
.route .tagline{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;
}

/* ---------------- passport photograph ---------------- */
.photo-block{
  display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start;
  padding:1.1rem;margin:1rem 0 1.6rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,#ffffff 0%,#f2f6f9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(21,34,48,.06);
}
.photo-frame{
  flex:0 0 auto;width:140px;height:180px;              /* 35x45mm at 4px/mm */
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 6px rgba(21,34,48,.14);
}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-empty{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.3rem;text-align:center;
  background:repeating-linear-gradient(135deg,#f6f9fb 0 8px,#eef3f7 8px 16px);
  color:var(--ink-faint);
}
.photo-empty span{font-weight:700;font-size:.82rem;letter-spacing:.02em}
.photo-empty small{font-size:.74rem}
.photo-side{flex:1 1 260px;min-width:0}
.photo-side h4{margin:0 0 .4rem;font-size:1rem;color:var(--navy)}
.photo-side .muted{margin:.2rem 0 .7rem}
.photo-form{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.7rem 0 .4rem}
.photo-form input[type=file]{flex:0 1 300px;min-width:0;margin:0;font-size:.85rem}
.photo-side form{display:inline-block;margin:0 .5rem 0 0;vertical-align:middle}

/* Small photo shown next to a client's name on the review screen. */
.photo-thumb{
  width:64px;height:82px;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:5px;background:#fff;
  box-shadow:0 1px 4px rgba(21,34,48,.16);
}
.photo-thumb.missing{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.66rem;line-height:1.2;color:var(--ink-faint);
  background:repeating-linear-gradient(135deg,#f6f9fb 0 6px,#eef3f7 6px 12px);
}
.id-row{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}

/* ---------------- fetched-photo check grid (admin settings) ---------------- */
/* Small enough to scan the whole set at once, big enough to see that the
   picture is of the right thing. */
.photo-grid{
  display:grid;gap:.9rem;margin-top:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.photo-check{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:#fff;box-shadow:var(--shadow-1);
}
.photo-check .shot{aspect-ratio:16/10;background:#eef3f7}
.photo-check .shot img{width:100%;height:100%;object-fit:cover;display:block}
.photo-check .shot .none{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--ink-faint);
  background:repeating-linear-gradient(135deg,#f6f9fb 0 8px,#eef3f7 8px 16px);
}
.photo-check figcaption{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.25rem}
.photo-check figcaption strong{font-size:.9rem;color:var(--navy)}
.photo-check .meta{font-size:.76rem;color:var(--ink-faint);line-height:1.4}
.photo-check .pill{align-self:flex-start}

/* ===========================================================
   Client ↔ office conversation

   The thread scrolls inside a fixed-height panel rather than
   growing the page: a year of messages should not push the
   composer below the fold, and "scroll to the newest" has to
   mean something.
   =========================================================== */
.chat-layout{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
/* minmax(0,1fr), never a bare 1fr: a grid column's default minimum is its
   content's width, so a wide table inside one pushes the whole column — and
   with it the page — past the viewport instead of scrolling inside its own
   wrapper. This is what put 41px of sideways scroll on the enquiry page at
   phone width. */
@media (max-width:900px){.chat-layout{grid-template-columns:minmax(0,1fr)}}
.chat-layout>*{min-width:0}

.chat-card{padding:0;overflow:hidden}
.chat{display:flex;flex-direction:column}

.chat-search{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#f7fafc;
}
.chat-search input[type=search],.chat-search select{
  flex:1 1 200px;min-width:0;padding:.5rem .7rem;font:inherit;font-size:.9rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.chat-results{padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#fffdf6}
.hitlist{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.hitlist a{
  display:flex;gap:.6rem;align-items:baseline;padding:.4rem .55rem;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);font-size:.86rem;
}
.hitlist a:hover{border-color:var(--navy-light);text-decoration:none}
.hitlist .who{font-weight:700;color:var(--navy);white-space:nowrap}
.hitlist .when{color:var(--ink-faint);font-size:.78rem;white-space:nowrap}
.hitlist .what{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat-thread{
  height:min(58vh,520px);overflow-y:auto;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem;
  background:linear-gradient(180deg,#f4f8fb 0%,#eef3f7 100%);
}
.chat-thread:focus{outline:2px solid var(--navy-light);outline-offset:-2px}

.chat-day{display:flex;align-items:center;justify-content:center;margin:.5rem 0 .2rem}
.chat-day span{
  font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-faint);background:#fff;border:1px solid var(--line);
  padding:.2rem .7rem;border-radius:999px;
}

.bubble{
  max-width:min(78%,560px);padding:.6rem .8rem .45rem;border-radius:13px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);
  scroll-margin-top:1rem;
}
.bubble.mine{
  align-self:flex-end;
  background:linear-gradient(180deg,#e8f2fa 0%,#dcebf7 100%);
  border-color:#bcd6e9;border-bottom-right-radius:4px;
}
.bubble.theirs{align-self:flex-start;border-bottom-left-radius:4px}
.bubble:target{outline:2px solid var(--gold);outline-offset:2px}

.bubble header{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.2rem}
.bubble .who{font-size:.78rem;font-weight:700;color:var(--navy)}
.bubble .case{
  font-size:.7rem;font-weight:700;color:var(--gold);
  border:1px solid #e0c48f;border-radius:999px;padding:0 .45rem;background:#fffaf1;
}
.bubble .text{margin:0;font-size:.93rem;line-height:1.5;color:var(--ink);white-space:normal;
  overflow-wrap:anywhere}
.bubble footer{
  display:flex;gap:.5rem;align-items:center;justify-content:flex-end;
  margin-top:.3rem;font-size:.72rem;color:var(--ink-faint);
}
.bubble time{white-space:nowrap}

/* sent → delivered → read. Colour alone never carries it; the word is there. */
.ticks{
  font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:0 .35rem;border-radius:999px;border:1px solid transparent;
}
.ticks.sent{color:var(--ink-faint);border-color:#d3dde6;background:#f4f7fa}
.ticks.delivered{color:var(--navy-2);border-color:#bcd6e9;background:#eaf3fa}
.ticks.read{color:var(--teal);border-color:#a9cfc7;background:#eef8f5}

/* ---- attachments ---- */
.attach{display:block;margin-top:.45rem;text-decoration:none}
.attach .meta{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:.25rem;
  overflow-wrap:anywhere}
.attach.image img{
  display:block;max-width:100%;max-height:220px;border-radius:9px;
  border:1px solid var(--line);background:#fff;
}
.attach.doc{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:9px;background:#fff;
}
.attach.doc:hover{border-color:var(--navy-light);text-decoration:none}
.attach.doc .ext{
  flex:0 0 auto;font-size:.68rem;font-weight:800;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
  padding:.25rem .4rem;border-radius:5px;
}
.attach.doc .meta{margin:0}
.attach.voice{display:flex;flex-direction:column;gap:.25rem}
.attach.voice audio{width:100%;max-width:320px;height:38px}

/* ---- composer ---- */
.chat-compose{padding:.85rem 1rem 1rem;border-top:1px solid var(--line);background:#fff}
.chat-compose textarea{
  width:100%;padding:.6rem .75rem;font:inherit;font-size:.93rem;line-height:1.5;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fbfdfe;
  color:var(--ink);resize:vertical;min-height:2.9rem;
}
.chat-compose textarea:focus{
  outline:none;border-color:var(--navy-light);background:#fff;
  box-shadow:0 0 0 3px rgba(47,109,151,.14);
}
.chat-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.chat-tools select{
  padding:.35rem .5rem;font:inherit;font-size:.83rem;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink);max-width:100%;
}
.chat-tools .btn{margin-left:auto}
.chat-tools .btn#rec-btn{margin-left:0}
.filepick{position:relative;overflow:hidden;display:inline-flex}
.filepick input[type=file]{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;
}
.filepick span{
  display:inline-block;padding:.36rem .8rem;font-size:.8rem;font-weight:700;
  border:1px solid var(--line);border-radius:7px;
  background:linear-gradient(180deg,#ffffff 0%,#eef3f7 100%);color:var(--navy);
}
.filepick:hover span{border-color:var(--navy-light)}
#rec-btn.recording{
  background:linear-gradient(180deg,var(--danger-light) 0%,var(--danger) 100%);
  border-color:var(--danger-edge);color:#fff;
}
.rec-state{font-size:.79rem;color:var(--ink-soft)}
.chat-hint{margin:.55rem 0 0;font-size:.76rem;color:var(--ink-faint)}

/* ---- the side column ---- */
.chat-side{display:flex;flex-direction:column;gap:1rem}
.chat-side h3{margin:0 0 .5rem;font-size:.95rem}
.filelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.filelist li{display:flex;flex-direction:column;gap:.2rem}
.filelist a{display:flex;align-items:center;gap:.5rem;font-size:.87rem}
.filelist .ext{
  flex:0 0 auto;font-size:.64rem;font-weight:800;color:#fff;padding:.15rem .35rem;border-radius:4px;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
}
.filelist .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .meta{font-size:.75rem;color:var(--ink-faint)}
.filelist audio{width:100%;height:34px}

.notelist{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.notelist li{border-left:3px solid var(--gold);padding-left:.65rem}
.notelist p{margin:0;font-size:.87rem;line-height:1.5}
.notelist .meta{font-size:.74rem;color:var(--ink-faint)}

.statusrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:0}
.unread-row{background:#fffaf1}
.snippet{color:var(--ink-soft);font-size:.87rem;max-width:34ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.when{white-space:nowrap;color:var(--ink-faint);font-size:.83rem}

/* ===========================================================
   Enquiry conversation

   Not the same shape as the client chat: this is a record of
   what was sent to someone who has no account and cannot reply
   in the app, so it reads as a file rather than a thread.
   =========================================================== */
.replylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.reply{
  border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius-sm);
  padding:.75rem .9rem;background:#fff;
}
.reply.outbound{border-left-color:var(--navy-light);background:linear-gradient(180deg,#f7fbfd 0%,#f1f7fb 100%)}
.reply.inbound{border-left-color:var(--teal-light)}
.reply.note{border-left-color:var(--gold);background:#fffdf6}
.reply header{display:flex;gap:.7rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.reply .who{font-size:.8rem;font-weight:700;color:var(--navy)}
.reply .when{font-size:.76rem;color:var(--ink-faint);white-space:nowrap}
.reply .subject{margin:.35rem 0 0;font-size:.87rem;font-weight:700;color:var(--ink)}
.reply .body{margin-top:.4rem;font-size:.92rem;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.reply footer{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.reply footer .why{font-size:.76rem;color:var(--ink-faint)}
.reply .pill{font-size:.7rem}

/* ===========================================================
   Opportunity guidance

   Two visual languages on one page, kept apart on purpose:
   navy for what the university, employer or embassy said, and
   gold for what this agency advises. A client has to be able
   to tell them apart at a glance, so they never share a
   colour, a border or a heading style.

   Urdu sets dir="rtl" on .guide. Everything below that needs
   to flip is written with logical properties (inline-start /
   inline-end) rather than left/right, so one rule serves both
   directions instead of a mirrored copy that drifts.
   =========================================================== */
.guide{max-width:900px;margin:0 auto}

/* Urdu: fonts that Windows and most phones already have, so
   the page reads correctly with no network and no web font. */
.guide.rtl{
  font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting',
              'Segoe UI',Tahoma,'Arial Unicode MS',sans-serif;
  line-height:2.05;           /* Nastaliq needs the room or it collides */
}
.guide.rtl p,.guide.rtl li{font-size:1.02rem}
.guide.rtl h1{line-height:1.7}
.guide.rtl .btn3d,.guide.rtl .tag{line-height:1.6}

.guide-top{
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:.9rem;
}
.guide-top h1{margin:.2rem 0 .3rem;font-size:1.7rem}
.guide .crumb{margin:0;font-size:.85rem}
.guide-sub{margin:0;color:var(--ink-soft);font-size:.93rem}

/* ---- language picker ---- */
.langpick{display:flex;gap:.35rem;flex:0 0 auto}
.langpick .lang{
  display:inline-block;padding:.4rem .75rem;border-radius:9px;font-size:.85rem;font-weight:700;
  border:1px solid var(--line);color:var(--ink-soft);
  background:linear-gradient(180deg,#ffffff 0%,#eef3f7 100%);
  box-shadow:0 2px 0 #cbd8e3,0 3px 6px rgba(21,34,48,.10);
}
.langpick .lang:hover{text-decoration:none;color:var(--navy);border-color:var(--navy-light)}
.langpick .lang.on{
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
  border-color:var(--navy-edge);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 var(--navy-edge);
}

/* ---- the official / ours legend ---- */
.legend{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  padding:.8rem 1rem;margin-bottom:1.1rem;
  border:1px dashed var(--line);border-radius:var(--radius-sm);background:#fbfdfe;
}
.legend-text{font-size:.82rem;color:var(--ink-soft);flex:1 1 220px;min-width:0}

.tag{
  display:inline-block;padding:.18rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;
}
.guide.rtl .tag{text-transform:none;letter-spacing:0;font-size:.78rem}
.tag.official{background:linear-gradient(180deg,#e8f2fa 0%,#d7e9f6 100%);
  border:1px solid #a9c9e2;color:var(--navy)}
.tag.ours{background:linear-gradient(180deg,#fff8ec 0%,#fdeed6 100%);
  border:1px solid #e0c48f;color:var(--gold)}

.guide-intro p{margin:0 0 .7rem;font-size:.95rem;line-height:1.65}
.guide-intro p:last-child{margin-bottom:0}

/* ---- progress ---- */
.progress-card{margin:1.1rem 0}
.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.progress-head h2{margin:0;font-size:1.05rem}
.progress-head .pct{font-size:1.5rem;font-weight:800;color:var(--teal)}
.bar{
  height:12px;border-radius:999px;background:#e3ebf2;overflow:hidden;
  margin:.6rem 0 .5rem;box-shadow:inset 0 1px 3px rgba(21,34,48,.16);
}
.bar span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(180deg,var(--teal-light) 0%,var(--teal) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:width .4s ease;
}

/* ---- the 3D step strip ---- */
.steps-title{margin:1.6rem 0 .8rem;font-size:1.15rem}
.stepstrip{
  display:grid;gap:.7rem;margin-bottom:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.step3d{
  position:relative;display:flex;flex-direction:column;gap:.3rem;
  padding:.85rem .8rem .8rem;border-radius:12px;text-decoration:none;
  border:1px solid #c6d5e1;
  background:linear-gradient(180deg,#ffffff 0%,#eaf1f7 100%);
  box-shadow:0 4px 0 #c2d1de,0 6px 12px rgba(21,34,48,.12);
  transition:transform .12s ease,box-shadow .12s ease;
}
.step3d:hover{
  text-decoration:none;transform:translateY(-2px);
  box-shadow:0 6px 0 #c2d1de,0 10px 18px rgba(21,34,48,.16);
}
.step3d:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #c2d1de,0 2px 5px rgba(21,34,48,.18);
}
.step3d .num{font-size:1.4rem;line-height:1;color:var(--navy-light)}
.step3d .label{font-size:.85rem;font-weight:700;color:var(--navy);line-height:1.35}
.step3d .tick{
  position:absolute;top:.5rem;inset-inline-end:.6rem;
  font-size:.85rem;font-weight:800;color:var(--teal);
}
.step3d.done{
  border-color:#a9cfc7;
  background:linear-gradient(180deg,#f3fbf8 0%,#e3f4ef 100%);
  box-shadow:0 4px 0 #b9d9d1,0 6px 12px rgba(21,34,48,.10);
}
.step3d.done .num{color:var(--teal)}
.step3d.on{
  border-color:var(--navy-edge);
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 var(--navy-edge),
             0 8px 16px rgba(21,34,48,.24);
}
.step3d.on .num,.step3d.on .label,.step3d.on .tick{color:#fff}

/* ---- 3D buttons ---- */
.btn3d{
  display:inline-block;padding:.6rem 1.1rem;border-radius:10px;
  font-size:.92rem;font-weight:800;letter-spacing:.01em;text-decoration:none;
  border:1px solid var(--navy-edge);cursor:pointer;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 0 var(--navy-edge),
             0 6px 12px rgba(21,34,48,.2);
  transition:transform .1s ease,box-shadow .1s ease,filter .1s ease;
}
.btn3d:hover{filter:brightness(1.07);text-decoration:none;color:#fff}
.btn3d:active{
  transform:translateY(4px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 0 0 var(--navy-edge);
}
.btn3d.small{padding:.42rem .85rem;font-size:.83rem;border-radius:8px}
.btn3d.go{
  background:linear-gradient(180deg,var(--teal-light) 0%,var(--teal) 100%);
  border-color:var(--teal-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 0 var(--teal-edge),
             0 6px 12px rgba(21,34,48,.2);
}
.btn3d.go:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 0 0 var(--teal-edge)}
.btn3d.plain{
  background:linear-gradient(180deg,#ffffff 0%,#e7eef4 100%);
  border-color:#c2d1de;color:var(--navy);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #c2d1de,0 6px 12px rgba(21,34,48,.14);
}
.btn3d.plain:hover{color:var(--navy);filter:none;background:linear-gradient(180deg,#fff 0%,#dfe9f1 100%)}
.btn3d.plain:active{box-shadow:inset 0 2px 5px rgba(21,34,48,.2),0 0 0 #c2d1de}

/* ---- the steps ---- */
.steplist{display:flex;flex-direction:column;gap:.8rem}
.step{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.step[open]{border-color:#b4cee0;box-shadow:0 3px 10px rgba(21,34,48,.12)}
.step summary{
  display:flex;gap:.8rem;align-items:center;cursor:pointer;
  padding:.9rem 1.1rem;list-style:none;
  background:linear-gradient(180deg,#fbfdfe 0%,#f2f7fa 100%);
}
.step summary::-webkit-details-marker{display:none}
.step summary:hover{background:linear-gradient(180deg,#f6fafc 0%,#eaf2f7 100%)}
.step summary .num{font-size:1.35rem;color:var(--navy-light);flex:0 0 auto}
.step[open] summary .num{color:var(--navy)}
.step summary .head{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto;min-width:0}
.step summary .title{font-weight:800;color:var(--navy);font-size:1rem}
.step summary .sum{font-size:.85rem;color:var(--ink-soft);line-height:1.45}
.stepbody{padding:.3rem 1.1rem 1.1rem}

.block{
  margin-top:.9rem;padding:.85rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);border-inline-start-width:4px;
}
.block h4{margin:0 0 .5rem;font-size:.9rem}
.block p{margin:0 0 .65rem;font-size:.93rem;line-height:1.62}
.block p:last-child{margin-bottom:0}
.block.official{border-inline-start-color:var(--navy-light);background:#f6fafd}
.block.ours{border-inline-start-color:var(--gold);background:#fffdf6}
.block.docs{border-inline-start-color:var(--teal-light);background:#f5fbf9}
.block.docs ul{margin:0;padding-inline-start:1.2rem}
.block.docs li{font-size:.92rem;line-height:1.6;margin-bottom:.2rem}
.block.fee{border-inline-start-color:var(--danger-light);background:#fdf7f7}

.steplink{margin:.9rem 0 0}
.tickform{margin-top:1rem}

/* ---- official information panel ---- */
.officialcard{margin-top:1.6rem}
.officialcard tr.blank td{background:#fcfdfe}
.officialcard .notyet{
  color:var(--ink-faint);font-style:italic;font-size:.86rem;
}
.officialcard ul.tight{margin:0;padding-inline-start:1.1rem}
.officialcard ul.tight li{margin-bottom:.15rem}

.guide-cta{margin-top:1.4rem}
.guide-cta h3{margin:0 0 .5rem}
.guide-cta p{margin:0 0 .8rem;font-size:.94rem;line-height:1.6}
.guide-cta p:last-child{margin-bottom:0;display:flex;gap:.6rem;flex-wrap:wrap}
.guide-foot{margin-top:1.4rem;font-size:.83rem}

@media (max-width:620px){
  .stepstrip{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .step3d .label{font-size:.79rem}
  .guide-top h1{font-size:1.4rem}
}

/* Someone who asks for less movement gets the depth without the travel. */
@media (prefers-reduced-motion:reduce){
  .step3d,.btn3d{transition:none}
  .step3d:hover,.step3d:active,.btn3d:active{transform:none}
  .bar span{transition:none}
}

/* The link from an opportunity card into its step-by-step guide. */
.guidelink{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  margin:1rem 0 .4rem;padding-top:.9rem;border-top:1px solid var(--line-soft);
}
.guidelink .muted{font-size:.83rem;flex:1 1 240px;min-width:0}

/* ===========================================================
   Deadlines

   Red on purpose, and only while it still matters. A date that
   has already passed goes grey — shouting about something
   nobody can act on is just noise, and it teaches people to
   ignore the red ones that do matter.
   =========================================================== */
.deadline{
  display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.28rem .7rem;border-radius:999px;
  font-size:.84rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  border:1px solid var(--danger);color:var(--danger);
  background:linear-gradient(180deg,#fdf4f4 0%,#fbe9e9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.deadline .dl-left{font-size:.75rem;font-weight:700;opacity:.85}
.deadline.urgent,.deadline.today{
  color:#fff;border-color:var(--danger-edge);
  background:linear-gradient(180deg,var(--danger-light) 0%,var(--danger) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 var(--danger-edge);
}
.deadline.today{animation:dl-pulse 2.4s ease-in-out infinite}
@keyframes dl-pulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 var(--danger-edge),
                                    0 0 0 5px rgba(192,76,76,.16)}}
.deadline.closed{
  color:var(--ink-faint);border-color:var(--line);
  background:linear-gradient(180deg,#fafcfd 0%,#f1f5f8 100%);box-shadow:none;
}
.deadline.none{
  color:var(--ink-faint);border:1px dashed var(--line);background:#fbfdfe;
  font-weight:600;font-style:italic;
}
@media (prefers-reduced-motion:reduce){.deadline.today{animation:none}}

/* ===========================================================
   Contact the institution
   =========================================================== */
.contactcard .muted{margin-bottom:.9rem}
.contactgrid{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.contactbtn{
  display:flex;gap:.65rem;align-items:center;text-decoration:none;
  padding:.7rem .85rem;border-radius:11px;
  border:1px solid #c6d5e1;
  background:linear-gradient(180deg,#ffffff 0%,#eef4f9 100%);
  box-shadow:0 3px 0 #c8d6e2,0 5px 10px rgba(21,34,48,.11);
  transition:transform .12s ease,box-shadow .12s ease;
}
.contactbtn:hover{
  text-decoration:none;transform:translateY(-2px);
  box-shadow:0 5px 0 #c8d6e2,0 9px 16px rgba(21,34,48,.15);
}
.contactbtn:active{
  transform:translateY(3px);box-shadow:0 1px 0 #c8d6e2,0 2px 4px rgba(21,34,48,.16);
}
.contactbtn .ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.contactbtn .what{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.contactbtn .what .k{font-size:.73rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-faint)}
.contactbtn .what .v{font-size:.88rem;font-weight:700;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contactbtn .what .n{font-size:.75rem;color:var(--ink-soft);font-weight:400}
.contactbtn.dead{box-shadow:none;background:#fbfdfe;cursor:default}
.contactbtn.dead:hover{transform:none;box-shadow:none}
.contactbtn.dead .ico{background:linear-gradient(180deg,#9fb2c2 0%,#7d90a1 100%)}
.contactbtn.ours .ico{background:linear-gradient(180deg,#c8963f 0%,var(--gold) 100%)}
.guide.rtl .contactbtn .what .k{text-transform:none;letter-spacing:0}

/* YouTube gets its own colour: people recognise it faster than they read. */
.contactbtn.yt .ico{background:linear-gradient(180deg,#e8483f 0%,#c0271f 100%)}
.contactbtn.wa .ico{background:linear-gradient(180deg,#43c464 0%,#1f9d47 100%)}

/* The deadline banner sits above the steps, where it is seen before
   anything is decided rather than after. */
.deadlinebar{
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  padding:.85rem 1.1rem;margin:1.1rem 0;
  border:1px solid #e2b7b7;border-inline-start-width:4px;
  border-inline-start-color:var(--danger);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fdf6f6 0%,#fbeeee 100%);
}
.deadlinebar.closed{
  border-color:var(--line);border-inline-start-color:#9fb2c2;
  background:linear-gradient(180deg,#fafcfd 0%,#f2f6f9 100%);
}
.deadlinebar .dl-label{
  font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--danger);
}
.deadlinebar.closed .dl-label{color:var(--ink-faint)}
.deadlinebar .dl-note{font-size:.83rem;color:var(--ink-soft);flex:1 1 200px;min-width:0}
.guide.rtl .deadlinebar .dl-label{text-transform:none;letter-spacing:0;font-size:.85rem}

/* ===========================================================
   Ranked country preferences

   Drawn as a path rather than a list: the client asked for
   "first choice, then second", and a numbered row of steps
   says that better than bullet points do.
   =========================================================== */
.preflist{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.preflist li{
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#ffffff 0%,#f6fafc 100%);
}
.preflist .rank{
  flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:.24rem .6rem;border-radius:999px;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
}
.preflist li:first-child .rank{
  background:linear-gradient(180deg,var(--teal-light) 0%,var(--teal) 100%);
}
.preflist .what{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.preflist .what .meta{font-size:.8rem;color:var(--ink-soft)}
.preflist .acts{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.preflist .acts form{display:flex;gap:.25rem;margin:0}

.prefcard .muted{margin-bottom:.9rem}
.prefstrip{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.prefstep{
  display:flex;flex-direction:column;gap:.22rem;
  padding:.7rem .8rem;border-radius:11px;border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fa 100%);
  box-shadow:0 3px 0 #d7e2ea,0 5px 10px rgba(21,34,48,.09);
}
.prefstep .rank{font-size:.68rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint)}
.prefstep .country{font-size:.98rem;font-weight:800;color:var(--navy)}
.prefstep .how{font-size:.8rem;color:var(--ink-soft)}

/* The one to start with. Everything else is visibly still there — a client
   who asked for Canada first must see that Canada was checked, not guess. */
.prefstep.active{
  border-color:var(--teal-edge);
  background:linear-gradient(180deg,var(--teal-light) 0%,var(--teal) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 var(--teal-edge),
             0 7px 14px rgba(21,34,48,.2);
}
.prefstep.active .rank,.prefstep.active .country,.prefstep.active .how{color:#fff}
.prefstep.active .rank{opacity:.85}
.prefstep.empty{background:linear-gradient(180deg,#fbfcfd 0%,#f0f4f7 100%);box-shadow:none}
.prefstep.empty .country{color:var(--ink-soft)}
.prefstep.other{border-style:dashed;box-shadow:none;background:#fbfdfe}

/* ===========================================================
   Applying — the opportunity inbox, cards and review screen
   =========================================================== */

/* ---- the top bar: Apply all | Manual | Automatic ---- */
.applybar{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding:.85rem 1rem;margin:0 0 .5rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,#ffffff 0%,#eef4f8 100%);
  box-shadow:var(--shadow-1);
}
.applybar-group{display:inline;margin:0}
.applybar .btn3d[disabled]{
  opacity:.45;cursor:not-allowed;filter:grayscale(.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 var(--navy-edge);
}
.applybar-note{margin:.1rem 0 1rem}

/* ---- eligibility summary ---- */
.elig-summary{margin-bottom:1rem}
.elig-figures{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:.6rem}
.elig-figures .figure{display:flex;flex-direction:column;line-height:1.15}
.elig-figures .n{font-size:1.7rem;font-weight:800;color:var(--navy)}
.elig-figures .l{font-size:.8rem;color:var(--ink-soft)}

.chiprow{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:.45rem}
.chiplabel{font-size:.75rem;font-weight:700;text-transform:uppercase;
           letter-spacing:.04em;color:var(--ink-faint);margin-inline-end:.2rem}
.chip{
  display:inline-flex;gap:.35rem;align-items:center;
  padding:.2rem .55rem;border-radius:999px;font-size:.82rem;
  border:1px solid var(--line);background:#fff;color:var(--navy);
}
.chip:hover{text-decoration:none;border-color:#a9c4d6;background:#f4f9fc}
.chip .n{font-size:.72rem;font-weight:700;color:var(--ink-faint)}
.chip.on{background:var(--navy);border-color:var(--navy-edge);color:#fff}
.chip.on .n{color:rgba(255,255,255,.7)}
.chip.flat{background:#f5f8fa;cursor:default}
.chip.flat:hover{border-color:var(--line)}

/* ---- filters ---- */
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.filterbar input[type=search]{flex:1 1 16rem;min-width:0}
.filterbar label.inline{display:inline-flex;gap:.35rem;align-items:center;
                        font-size:.85rem;color:var(--ink-soft);margin:0}

/* ---- the card grid ----
   minmax(0,…) rather than 1fr: a grid column's default minimum is its
   content width, so a long university name pushed the whole grid wider
   than the phone it was on. */
.oppgrid{
  display:grid;gap:1rem;margin-bottom:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}
.oppcard{display:flex;flex-direction:column;min-width:0;position:relative}
.oppcard h3{padding-inline-end:5.5rem}
.oppcard .orgline{margin:0 0 .55rem;font-size:.88rem;color:var(--ink-soft)}
.oppcard .orgline .sep{margin:0 .3rem;color:var(--line)}

.rankflag{
  position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.16rem .45rem;border-radius:5px;
  background:var(--navy);color:#fff;
}

.matchrow{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.tag.ok{background:#e4f2ee;color:var(--teal);border-color:#bcdbd3}
.tag.warn{background:#fbf1de;color:var(--gold);border-color:#e6d0aa}
.tag.no{background:#f7e9e9;color:var(--danger);border-color:#e3c3c3}

/* ---- the match bar ----
   The number sits beside the bar rather than on top of it: inside, a full
   green bar put dark text on a dark fill and the figure disappeared at
   exactly the scores worth reading.

   And it is never shown alone — .matchnote under it says what the percentage
   counted, because "72%" on its own invites a client to read it as a chance
   of success, which it is not. */
.matchline{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem}
.matchbar{
  flex:1 1 auto;min-width:0;
  height:1.1rem;border-radius:7px;overflow:hidden;
  background:#e9eff4;border:1px solid var(--line);
}
.matchbar .fill{
  height:100%;
  background:linear-gradient(180deg,var(--teal-light) 0%,var(--teal) 100%);
}
.matchline .pct{
  flex:0 0 auto;font-size:.8rem;font-weight:800;color:var(--navy);
  min-width:2.6rem;text-align:end;
}
.matchnote{margin:0 0 .6rem;font-size:.78rem;color:var(--ink-soft)}

.oppfacts{display:grid;grid-template-columns:auto minmax(0,1fr);
          gap:.15rem .7rem;margin:0 0 .8rem;font-size:.85rem}
.oppfacts dt{font-weight:700;color:var(--ink-soft)}
.oppfacts dd{margin:0;min-width:0}

.oppactions{
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  margin-block-start:auto;padding-block-start:.5rem;
}
.inline-form{display:inline;margin:0}
.cantsend{
  font-size:.8rem;color:var(--ink-faint);font-style:italic;
  border-inline-start:3px solid var(--line);padding-inline-start:.5rem;
}

/* ---- the review screen ---- */
.reviewhead{display:flex;gap:1rem;align-items:flex-start}
.reviewhead h2{margin:0 0 .3rem;font-size:1.05rem}
.reviewstep{
  flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(180deg,var(--navy-light) 0%,var(--navy) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 var(--navy-edge);
}
.recipient{
  margin:.1rem 0 .4rem;font-family:ui-monospace,Consolas,"Courier New",monospace;
  font-size:.95rem;font-weight:700;color:var(--navy);
  background:#f2f7fa;border:1px solid var(--line);border-radius:7px;
  padding:.4rem .6rem;display:inline-block;max-width:100%;overflow-wrap:anywhere;
}
.sentnote{border-inline-start:4px solid var(--teal)}
.sendbox{border-inline-start:4px solid var(--gold)}

.blockers{margin:.4rem 0 .6rem;padding-inline-start:1.1rem}
.blockers li{color:var(--danger);font-size:.88rem;margin-bottom:.2rem}
.error-text{color:var(--danger)}

.doclist{border:1px solid var(--line);border-radius:var(--radius-sm);
         padding:.6rem .8rem;margin:.6rem 0}
.doclist legend{font-size:.82rem;font-weight:700;color:var(--ink-soft);padding:0 .3rem}
.docpick{display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline;
         padding:.3rem 0;border-block-end:1px solid var(--line-soft);font-size:.87rem}
.docpick:last-child{border-block-end:none}
.docpick.iscv{opacity:.75}
.docpick.iscv .docname{font-weight:700}
.docname{font-weight:600}
.docfile{color:var(--ink-soft);font-size:.8rem;overflow-wrap:anywhere}
.docsize{color:var(--ink-faint);font-size:.76rem;margin-inline-start:auto}
.tag.tiny{font-size:.68rem;padding:.05rem .3rem}

.permtick{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0;line-height:1.5}
.permtick input{margin-block-start:.25rem;flex:0 0 auto}
.card.permission{border-inline-start:4px solid var(--gold)}
.card.permission.given{border-inline-start-color:var(--teal)}
.fieldrow{display:flex;flex-wrap:wrap;gap:1rem}
.fieldrow .field{flex:1 1 12rem;min-width:0}

/* ---- the history rows ---- */
.approw{margin-bottom:1rem}
.apphead{display:flex;gap:.8rem;align-items:flex-start;justify-content:space-between}
.apphead h3{margin:0 0 .15rem;font-size:1.02rem}
.statusfilter{margin-bottom:1rem}
.sentcopy{margin:.5rem 0}
.sentcopy summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--navy-light)}
.letter{
  white-space:pre-wrap;overflow-wrap:anywhere;
  background:#f7fafc;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .9rem;font-size:.83rem;line-height:1.55;margin:.4rem 0 0;
  max-height:26rem;overflow:auto;
}