/* ==========================================================================
   Amiko by AmikoLab — Competition Pack
   Design tokens + component library
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Brand */
  --teal-900:#062F31;
  --teal-800:#0A4B4E;
  --teal-700:#106E72;   /* primary */
  --teal-600:#14868B;
  --teal-300:#7EBDBF;
  --teal-100:#DCEDEE;
  --teal-50: #F0F7F7;
  --accent:#FFD34E;
  --accent-soft:#FFF5C7;
  --bright-teal:#64CDD3;

  /* Neutrals */
  --ink:      #10201F;
  --ink-2:    #3B5250;
  --ink-3:    #6E8583;
  --line:     #E2EAE9;
  --line-soft:#EFF4F3;
  --canvas:   #F4F7F6;
  --surface:  #FFFFFF;

  /* Status */
  --good:#0F7A55;  --good-bg:#E4F4EC;
  --warn:#9C6A0E;  --warn-bg:#FCF2DE;
  --bad: #A93A32;  --bad-bg: #FBEAE8;
  --info:#1C5F8C;  --info-bg:#E6F0F7;

  /* Placement (rosette) */
  --gold:#C68A21;   --gold-soft:#F7EDD6;
  --silver:#8A9699; --silver-soft:#EFF2F3;
  --bronze:#A76A3C; --bronze-soft:#F6EAE1;

  /* Type */
  --display:"Fraunces", Georgia, serif;
  --ui:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Space + shape */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-full:999px;
  --sidebar:248px;
  --shadow-1:0 1px 2px rgba(6,47,49,.06), 0 1px 3px rgba(6,47,49,.04);
  --shadow-2:0 4px 12px rgba(6,47,49,.07), 0 1px 3px rgba(6,47,49,.05);
  --shadow-3:0 18px 48px rgba(6,47,49,.16);
  --focus:0 0 0 3px rgba(16,110,114,.28);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.55;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:var(--teal-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-sm)}
::selection{background:var(--teal-100)}

/* --- 3. Typography ------------------------------------------------------- */
.display{
  font-family:var(--display); font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40;
  letter-spacing:-.015em; line-height:1.08;
}
.h1{font-size:clamp(28px,3.2vw,38px)}
.h2{font-size:22px; font-weight:700; letter-spacing:-.01em}
.h3{font-size:16px; font-weight:700; letter-spacing:-.005em}
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.tiny{font-size:12px}
.num{font-family:var(--data); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* --- 4. App shell -------------------------------------------------------- */
.shell{display:flex; min-height:100vh}

.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:linear-gradient(180deg,var(--teal-800),var(--teal-900));
  color:#CFE3E3; padding:18px 14px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:6px; z-index:40;
}
.sidebar__brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px}
.sidebar__brand img{height:30px; width:auto}
.sidebar__brand b{color:#fff; font-size:15px; letter-spacing:-.01em}
.sidebar__brand span{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-300)}
.nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.nav__label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(207,227,227,.5); padding:14px 10px 6px;
}
.nav__item{
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r-sm); color:#CFE3E3; font-size:14px; font-weight:500;
  width:100%; text-align:left; transition:background .14s, color .14s;
}
.nav__item:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.nav__item.is-active{background:var(--teal-700); color:#fff; font-weight:600}
.nav__item svg{width:17px; height:17px; flex:0 0 17px; opacity:.9}
.nav__count{
  margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,255,255,.14);
  padding:1px 7px; border-radius:var(--r-full);
}
.sidebar__foot{border-top:1px solid rgba(255,255,255,.12); padding-top:12px; margin-top:6px}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  height:64px; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  position:sticky; top:0; z-index:30;
}
.topbar__title{font-weight:700; font-size:15px; letter-spacing:-.01em}
.topbar__spacer{flex:1}
.menu-btn{display:none}

.search{
  display:flex; align-items:center; gap:8px; background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 11px;
  min-width:240px; color:var(--ink-3);
}
.search svg{width:18px; height:18px; flex:0 0 18px; opacity:.85}
.search input{border:0; background:none; outline:none; width:100%; font-size:14px}
.search kbd{
  font-family:var(--data); font-size:10px; border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; background:var(--surface);
}

.page{padding:26px 24px 64px; max-width:1360px; width:100%}
.page__head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.page__head .display{margin-bottom:4px}
.page__actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; transition:background .14s, border-color .14s, transform .1s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px; height:16px}
.btn--primary{background:var(--teal-700); color:#fff}
.btn--primary:hover{background:var(--teal-800)}
.btn--ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--teal-300); background:var(--teal-50)}
.btn--quiet{color:var(--ink-2)}
.btn--quiet:hover{background:var(--line-soft)}
.btn--danger{background:var(--bad-bg); color:var(--bad)}
.btn--danger:hover{background:#F6DBD8}
.btn--sm{height:31px; padding:0 11px; font-size:13px}
.btn--lg{height:46px; padding:0 22px; font-size:15px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}

/* --- 6. Cards + grid ----------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-1);
}
.card__head{
  display:flex; align-items:center; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line-soft);
}
.card__head .h3{margin-right:auto}
.card__body{padding:18px}
.card__foot{padding:14px 18px; border-top:1px solid var(--line-soft); display:flex; gap:8px; align-items:center}

.grid{display:grid; gap:16px}
.grid > .card,.grid > .stat{height:100%}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--main{grid-template-columns:1.55fr 1fr}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--teal-700);
  opacity:0; transition:opacity .2s;
}
.stat:hover::after{opacity:1}
.stat__value{font-family:var(--data); font-size:27px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.stat__label{font-size:12.5px; color:var(--ink-3); margin-top:5px; font-weight:600}
.stat__delta{font-size:11.5px; font-weight:700; margin-top:8px; color:var(--good)}
.stat__delta--flat{color:var(--ink-3)}

/* --- 7. Pills, badges, avatars ------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px;
  border-radius:var(--r-full); font-size:11.5px; font-weight:700; letter-spacing:.01em;
  background:var(--line-soft); color:var(--ink-2); white-space:nowrap;
}
.pill--good{background:var(--good-bg); color:var(--good)}
.pill--warn{background:var(--warn-bg); color:var(--warn)}
.pill--bad{background:var(--bad-bg); color:var(--bad)}
.pill--info{background:var(--info-bg); color:var(--info)}
.pill--teal{background:var(--teal-100); color:var(--teal-800)}
.pill--teal::before{display:none}
.pill--dot::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}

.avatar{
  width:38px; height:38px; border-radius:var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center; font-size:18px;
  background:var(--teal-50); border:1px solid var(--line);
}
.avatar--lg{width:76px; height:76px; border-radius:var(--r); font-size:36px}
.avatar--xl{width:120px; height:120px; border-radius:var(--r-lg); font-size:56px}
.avatar--sm{width:28px; height:28px; font-size:14px}
.avatar--round{border-radius:50%}

.identity{display:flex; align-items:center; gap:10px; min-width:0}
.identity__name{font-weight:650; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.identity__meta{font-size:12px; color:var(--ink-3)}

/* Signature element: the show rosette ------------------------------------- */
.rosette{
  position:relative; width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center;
}
.rosette__disc{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--data); font-weight:600;
  font-size:14px; color:#fff; background:var(--ink-3); z-index:1;
  box-shadow:0 0 0 3px #fff, 0 0 0 4px currentColor;
}
.rosette::before,.rosette::after{
  content:""; position:absolute; width:11px; height:20px; border-radius:2px 2px 6px 6px;
  background:currentColor; bottom:-6px; opacity:.85;
}
.rosette::before{transform:rotate(-16deg) translateX(-6px)}
.rosette::after{transform:rotate(16deg) translateX(6px)}
.rosette--1{color:var(--gold)}   .rosette--1 .rosette__disc{background:var(--gold)}
.rosette--2{color:var(--silver)} .rosette--2 .rosette__disc{background:var(--silver)}
.rosette--3{color:var(--bronze)} .rosette--3 .rosette__disc{background:var(--bronze)}
.rosette--x{color:var(--line)}   .rosette--x .rosette__disc{background:var(--ink-3)}

/* --- 8. Tables ----------------------------------------------------------- */
.table-wrap{overflow-x:auto}
.table{font-size:14px}
.table th{
  text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:10px 14px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface);
}
.table td{padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.table tbody tr:hover{background:var(--teal-50)}
.table tbody tr:last-child td{border-bottom:0}
.table .num{font-size:13.5px}
.table--clickable tbody tr{cursor:pointer}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{
  padding:10px 13px; font-size:14px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--teal-700); border-bottom-color:var(--teal-700)}
.tab .pill{margin-left:6px}

/* Pet sections are explicit destinations, not a hidden horizontal carousel. */
.pet-section-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:10px 14px 14px;border-top:1px solid var(--line-soft)}
.pet-section-tab{min-height:42px;padding:8px 7px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:700;text-align:center}
.pet-section-tab:hover{border-color:var(--teal-300);color:var(--teal-800)}
.pet-section-tab.is-active{border-color:var(--teal-700);background:var(--teal-700);color:#fff;box-shadow:0 5px 12px rgba(16,110,114,.18)}

/* Owner home: pets, entry journeys and actionable unread notices only. */
.owner-dashboard-stack{gap:16px}
.owner-section-title{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px}
.owner-notification-list{display:grid;gap:8px}
.owner-notification{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px;width:100%;padding:13px 14px;border:1px solid var(--teal-200);border-radius:15px;background:linear-gradient(135deg,var(--teal-50),#fff);color:var(--ink);text-align:left;box-shadow:var(--shadow-1)}
.owner-notification:hover{border-color:var(--teal-500);transform:translateY(-1px)}
.owner-notification__icon{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#fff;font-size:18px}
.owner-notification b,.owner-notification small{display:block}.owner-notification small{margin-top:2px;color:var(--ink-3);font-size:12px}.owner-notification time{font-size:11px;color:var(--ink-3);white-space:nowrap}
.owner-entry-list{display:grid;gap:11px;padding:14px}.owner-entry-list--page{padding:16px}
.owner-entry-card{padding:15px;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface)}
.owner-entry-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.owner-entry-card__head>div{min-width:0}.owner-entry-card__head b,.owner-entry-card__head span{display:block}.owner-entry-card__head>div>span{margin-top:3px;font-size:12px;color:var(--ink-3)}
.entry-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0 10px}
.entry-journey__step{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-3);font-size:10.5px;font-weight:700;text-align:center}
.entry-journey__step:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 14px);right:calc(-50% + 14px);top:12px;height:2px;background:var(--line)}
.entry-journey__step.is-done:not(:last-child)::after{background:var(--teal-500)}
.entry-journey__dot{position:relative;z-index:1;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:10px}.entry-journey__dot svg{width:13px;height:13px}
.entry-journey__step.is-done{color:var(--teal-800)}.entry-journey__step.is-done .entry-journey__dot{border-color:var(--teal-600);background:var(--teal-600);color:#fff}.entry-journey__step.is-bad{color:var(--bad)}.entry-journey__step.is-bad .entry-journey__dot{border-color:var(--bad);background:var(--bad);color:#fff}.entry-journey__step.is-muted{opacity:.45}
.owner-entry-card__foot{display:flex;justify-content:space-between;gap:10px;color:var(--ink-3);font-size:11px}

/* Organisation judging control. */
.assignment-map{display:grid;gap:10px}.assignment-card{padding:13px;border:1px solid var(--line-soft);border-radius:15px;background:var(--canvas)}
.assignment-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.assignment-card__entries{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft)}
.assignment-entry{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:11px}.assignment-entry>span:not(.pill){color:var(--ink-3)}.assignment-entry .pill{font-size:9px;padding:3px 6px}
.judging-review-list{display:grid}.judging-review-item{border-top:1px solid var(--line-soft)}.judging-review-item:first-child{border-top:0}.judging-review-item>summary{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,.6fr) auto auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}.judging-review-item>summary::-webkit-details-marker{display:none}.judging-review-item[open]>summary{background:var(--teal-50)}
.judging-review-item__entry b,.judging-review-item__entry span{display:block}.judging-review-item__entry span,.judging-review-item__judge{font-size:12px;color:var(--ink-3);margin-top:2px}.judging-review-item__chevron{transition:transform .18s}.judging-review-item[open] .judging-review-item__chevron{transform:rotate(90deg)}
.judging-review-item__body{padding:16px;background:var(--canvas);border-top:1px solid var(--line-soft)}.judging-review-meta{margin-bottom:14px}.assessment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.assessment-line{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid var(--line-soft);font-size:12px}.assessment-line b{color:var(--teal-800)}
.judging-review-item__actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.judging-review-item__actions>span{max-width:60ch}.reopen-sheet-modal{max-width:540px}

.segmented{display:inline-flex; background:var(--line-soft); padding:3px; border-radius:var(--r-sm); gap:2px}
.segmented button{
  padding:5px 12px; font-size:13px; font-weight:600; border-radius:6px; color:var(--ink-3);
}
.segmented button.is-active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}

/* --- 9. Forms ------------------------------------------------------------ */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field > label{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.field__hint{font-size:12px; color:var(--ink-3)}
.input,.select,.textarea{
  height:40px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:14px; width:100%; transition:border-color .14s, box-shadow .14s;
}
.textarea{height:auto; padding:10px 12px; resize:vertical; min-height:84px}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--teal-600); box-shadow:var(--focus)}
.select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236E8583' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.input-group{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.upload{
  border:1.5px dashed var(--line); border-radius:var(--r); padding:22px; text-align:center;
  color:var(--ink-3); font-size:13px; background:var(--teal-50); transition:border-color .14s;
}
.upload:hover{border-color:var(--teal-300)}
.upload b{display:block; color:var(--ink); font-size:14px; margin-bottom:2px}

.switch{
  width:40px; height:23px; border-radius:var(--r-full); background:var(--line);
  position:relative; transition:background .18s; flex:0 0 40px;
}
.switch::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform .18s;
}
.switch.is-on{background:var(--teal-700)}
.switch.is-on::after{transform:translateX(17px)}
.switch-row{display:flex; align-items:center; gap:10px; justify-content:space-between}

/* --- 10. Wizard stepper -------------------------------------------------- */
.stepper{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:26px}
.step{display:flex; align-items:center; gap:8px}
.step__dot{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--line-soft); color:var(--ink-3);
  border:1px solid var(--line);
}
.step__label{font-size:13px; font-weight:600; color:var(--ink-3)}
.step.is-done .step__dot{background:var(--teal-100); color:var(--teal-800); border-color:var(--teal-300)}
.step.is-active .step__dot{background:var(--teal-700); color:#fff; border-color:var(--teal-700)}
.step.is-active .step__label{color:var(--ink)}
.step__line{width:34px; height:1px; background:var(--line); margin:0 4px}

/* --- 11. Timeline -------------------------------------------------------- */
.timeline{position:relative; padding-left:30px}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1.5px; background:var(--line)}
.tl{position:relative; padding:0 0 22px}
.tl:last-child{padding-bottom:0}
.tl__dot{
  position:absolute; left:-30px; top:2px; width:19px; height:19px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line); display:grid; place-items:center;
  font-size:9px;
}
.tl__dot--teal{border-color:var(--teal-300); background:var(--teal-50)}
.tl__dot--gold{border-color:var(--gold); background:var(--gold-soft)}
.tl__date{font-size:11.5px; color:var(--ink-3); font-family:var(--data); margin-bottom:2px}
.tl__title{font-weight:650; font-size:14px; letter-spacing:-.005em}
.tl__body{font-size:13px; color:var(--ink-2); margin-top:2px}

/* --- 12. Score sheet ----------------------------------------------------- */
.sheet__section{border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden}
.sheet__section-head{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:var(--teal-50); font-weight:700; font-size:14px; width:100%; text-align:left;
}
.sheet__section-head .num{margin-left:auto; font-size:13px; color:var(--teal-800)}
.criterion{
  display:grid; grid-template-columns:1fr 62px 74px 62px 68px; gap:10px; align-items:center;
  padding:9px 14px; border-top:1px solid var(--line-soft); font-size:13.5px;
}
.criterion__name b{display:block; font-weight:600}
.criterion__name span{font-size:11.5px; color:var(--ink-3)}
.criterion input{
  height:34px; text-align:center; border:1px solid var(--line); border-radius:6px;
  width:100%; font-family:var(--data); font-size:14px; background:var(--surface);
}
.criterion input:focus{outline:none; border-color:var(--teal-600); box-shadow:var(--focus)}
.criterion__total{text-align:right; font-family:var(--data); font-weight:600}
.criterion__head{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; border-top:0; padding-top:11px; padding-bottom:6px;
}
.criterion__head > *{text-align:center}
.criterion__head > *:first-child{text-align:left}
.criterion__head > *:last-child{text-align:right}
.score-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:16px 18px; background:var(--teal-800); color:#fff; border-radius:var(--r);
}
.score-total__value{font-family:var(--data); font-size:34px; font-weight:600; letter-spacing:-.03em}
.score-total__value small{font-size:16px; opacity:.6}

/* Qualitative judging keeps the judge's task human and tap-friendly. Numeric
   values remain an internal ranking mechanism and are never typed here. */
.criterion--ratings{
  display:block; padding:14px; font-size:13.5px;
}
.criterion--ratings .criterion__name{margin-bottom:11px}
.rating-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rating-choice{
  min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:750;
  transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;
}
.rating-choice:hover{border-color:var(--teal-300);background:var(--teal-50)}
.rating-choice:active{transform:scale(.98)}
.rating-choice.is-selected{color:var(--ink);box-shadow:inset 0 0 0 2px rgba(16,110,114,.18)}
.rating-choice--bad.is-selected{background:var(--bad-bg);border-color:#D47A73;color:var(--bad)}
.rating-choice--good.is-selected{background:var(--accent-soft);border-color:#D9A918;color:#664B00}
.rating-choice--very-good.is-selected{background:#DDF7F8;border-color:var(--bright-teal);color:var(--teal-800)}
.rating-choice--excellent.is-selected{background:var(--teal-700);border-color:var(--teal-700);color:#fff;box-shadow:none}
.rating-choice[disabled]{cursor:default;opacity:.68}
.rating-choice[disabled].is-selected{opacity:1}

/* Ownership transfers are cards, not wide data tables. Every decision stays
   visible without sideways scrolling on a phone. */
.transfer-list{padding:8px 16px 16px;display:grid;gap:10px}
.transfer-list__empty{margin:6px 2px 2px;padding:16px;text-align:center;background:var(--canvas);border-radius:14px}
.transfer-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface)}
.transfer-item__icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:var(--teal-50);font-size:20px}
.transfer-item__body{flex:1;min-width:0}
.transfer-item__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.transfer-item__actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* Found-pet inbox -------------------------------------------------------- */
.pet-message-preview{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px;text-align:left;
  border:1px solid #bfd4e2;border-radius:16px;background:var(--info-bg);color:var(--info);
  transition:border-color .14s,box-shadow .14s,transform .1s;
}
.pet-message-preview:hover{border-color:var(--teal-300);box-shadow:var(--shadow-1)}
.pet-message-preview:active{transform:scale(.995)}
.pet-message-preview.is-read{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.pet-message-preview__pin{font-size:19px;align-self:flex-start}
.pet-message-preview__body{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.45}
.pet-message-preview__body b{font-size:15px;color:inherit}
.pet-message-preview__body .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pet-message-preview__body .tiny{margin-top:4px;opacity:.8}
.pet-message-preview__arrow{display:grid;place-items:center;flex:0 0 28px}
.pet-message-preview__arrow svg{width:18px;height:18px}
.pet-message-modal{width:min(540px,100%);overflow:hidden}
.pet-message-modal__pin{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--info-bg);font-size:20px}
.pet-message-modal__close{display:grid;place-items:center;margin-left:auto;width:42px;height:42px;border-radius:50%;color:var(--ink-2)}
.pet-message-modal__close:hover{background:var(--line-soft)}
.pet-message-modal__text{padding:16px;border-radius:16px;background:var(--info-bg);font-size:16px;line-height:1.65}
.pet-message-modal__details{margin-top:18px}
.pet-message-modal__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.pet-message-modal__foot{justify-content:space-between}

/* --- 13. Misc ------------------------------------------------------------ */
.empty{text-align:center; padding:48px 20px; color:var(--ink-3)}
.empty__icon{font-size:34px; margin-bottom:10px}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}

.checklist li{display:flex; gap:9px; align-items:flex-start; padding:7px 0; font-size:13.5px}
.checklist svg{width:16px; height:16px; flex:0 0 16px; margin-top:2px}
.check-ok{color:var(--good)} .check-miss{color:var(--warn)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:13.5px; align-items:baseline}
.kv dt{color:var(--ink-3); font-weight:600; font-size:12.5px}
.kv dd{margin:0; font-weight:550}

.activity li{display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.activity li:last-child{border-bottom:0}
.activity time{margin-left:auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.gallery div{
  aspect-ratio:1; border-radius:var(--r-sm); background:var(--teal-50);
  border:1px solid var(--line); display:grid; place-items:center; font-size:34px;
}

.podium{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:14px; align-items:end}
.podium__slot{text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 12px}
.podium__slot--1{border-color:var(--gold); background:linear-gradient(180deg,var(--gold-soft),var(--surface))}
.podium__name{font-weight:700; margin-top:8px; letter-spacing:-.01em}
.podium__score{font-family:var(--data); font-size:20px; font-weight:600; margin-top:2px}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--r-full);
  font-size:14px; font-weight:600; box-shadow:var(--shadow-3); z-index:90;
  opacity:0; transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s;
}
.toast.is-up{transform:translateX(-50%) translateY(0); opacity:1}

.overlay{
  position:fixed; inset:0; background:rgba(6,47,49,.42); backdrop-filter:blur(2px);
  display:grid; place-items:center; padding:20px; z-index:80;
}
.modal{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  width:min(560px,100%); max-height:88vh; overflow:auto;
}

.divider{height:1px; background:var(--line); margin:18px 0}
.hide{display:none !important}

/* --- 14. Marketing page -------------------------------------------------- */
.mk-nav{
  display:flex; align-items:center; gap:24px; padding:18px 32px; max-width:1240px;
  margin:0 auto; position:relative; z-index:5;
}
.mk-nav img{height:34px}
.mk-nav__links{display:flex; gap:22px; margin-left:auto; align-items:center; font-size:14px; font-weight:600}
.mk-nav__links a:not(.btn){color:var(--ink-2)}
.mk-nav__links a:not(.btn):hover{color:var(--teal-700); text-decoration:none}

.hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  max-width:1240px; margin:0 auto; padding:56px 32px 76px;
}
.hero__title{font-size:clamp(38px,5vw,60px)}
.hero__title em{font-style:normal; color:var(--teal-700)}
.hero__sub{font-size:17px; color:var(--ink-2); margin-top:18px; max-width:48ch}
.hero__cta{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap}
.hero__proof{display:flex; gap:26px; margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.hero__proof b{display:block; font-family:var(--data); font-size:21px; font-weight:600}
.hero__proof span{font-size:12px; color:var(--ink-3)}

.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-2);
}
.role-picker{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:16px}
.role-picker button{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px; text-align:left;
  font-size:12.5px; font-weight:650; line-height:1.3; transition:.14s;
}
.role-picker button span{display:block; font-size:10.5px; color:var(--ink-3); font-weight:600; margin-top:2px}
.role-picker button:hover{border-color:var(--teal-300)}
.role-picker button.is-active{border-color:var(--teal-700); background:var(--teal-50); box-shadow:inset 0 0 0 1px var(--teal-700)}
.or-divider{display:flex; align-items:center; gap:12px; margin:14px 0; color:var(--ink-3); font-size:12px; font-weight:600}
.or-divider::before,.or-divider::after{content:""; flex:1; height:1px; background:var(--line)}

.band{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band__inner{max-width:1240px; margin:0 auto; padding:64px 32px}
.feature{padding:22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.feature__icon{
  width:38px; height:38px; border-radius:10px; background:var(--teal-50);
  display:grid; place-items:center; font-size:18px; margin-bottom:12px; border:1px solid var(--teal-100);
}
.feature h3{font-size:15px; font-weight:700; margin-bottom:5px; letter-spacing:-.01em}
.feature p{font-size:13.5px; color:var(--ink-2)}

.mk-foot{max-width:1240px; margin:0 auto; padding:40px 32px; display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.mk-foot img{height:112px; width:auto}

/* --- 15. Responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--main{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr; gap:36px; padding-top:24px}
}
@media (max-width:860px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.2,.8,.3,1); box-shadow:var(--shadow-3);
  }
  .sidebar.is-open{transform:none}
  .menu-btn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--line)}
  .search{min-width:0; flex:1}
  .search kbd{display:none}
  .page{padding:18px 14px 56px}
  .topbar{padding:0 14px}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .criterion{grid-template-columns:1fr 54px 60px; row-gap:4px}
  .criterion > :nth-child(4),.criterion > :nth-child(5){display:none}
  .criterion__head{display:none}
  .podium{grid-template-columns:1fr}
  .mk-nav__links a:not(.btn){display:none}
}
@media (max-width:520px){
  .grid--4{grid-template-columns:1fr}
  .page__actions{width:100%}
  .page__actions .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

@media print{
  .sidebar,.topbar,.page__actions,.btn{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; break-inside:avoid}
}

/* --- Inline notice ---------------------------------------------------------
   A message that must stay on screen. Toasts fade; when a save fails the
   person needs to still be able to read why after they look back up.
--------------------------------------------------------------------------- */
.notice{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); font-size:14px; line-height:1.5;
}
.notice svg{flex:none; margin-top:1px}
.notice--bad{background:var(--bad-bg); border-color:var(--bad); color:var(--bad)}
.notice--warn{background:var(--warn-bg); border-color:var(--warn); color:var(--warn)}
.notice--good{background:var(--good-bg); border-color:var(--good); color:var(--good)}
.notice--info{background:var(--info-bg); border-color:#bfd4e2; color:var(--info)}

/* --- Global search results -------------------------------------------------- */
.search__results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-3); overflow:hidden; max-height:60vh; overflow-y:auto;
}
.search__hit{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; background:none; border:0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; font:inherit; color:var(--ink);
}
.search__hit:last-child{border-bottom:0}
.search__hit:hover,.search__hit:focus-visible{background:var(--teal-50)}
.search__icon{font-size:17px; flex:none}
.search__text{display:flex; flex-direction:column; min-width:0; line-height:1.35}
.search__text b{font-size:14px}
.search__empty{padding:14px; font-size:13.5px; color:var(--ink-3)}

/* --- 16. Making the layout actually shrink ---------------------------------
   .table-wrap already had overflow-x:auto, but it never scrolled: a grid or
   flex child defaults to min-width:auto, which is its *content* width. A wide
   table therefore pushed its card, its stack and finally the page wider than
   the phone, and the browser expanded the layout viewport to match — 390px of
   screen rendering a 703px page. Letting these containers shrink to zero is
   what hands the overflow back to the element that knows how to scroll.
--------------------------------------------------------------------------- */
.card,
.stack,
.stack > *,
.grid > *,
.row > *,
.main,
.page{min-width:0}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (max-width:860px){
  /* Fingers are not cursors. Anything tappable gets a proper target. */
  .btn{min-height:42px}
  .btn--sm{min-height:38px; padding:9px 13px}
  .nav__item{min-height:44px}
  .input,.select,.textarea{min-height:44px; font-size:16px}  /* 16px stops iOS zooming on focus */
  .tab{min-height:40px}

  /* Page furniture that assumed a desktop */
  .page__head{flex-wrap:wrap; gap:12px}
  .page__actions{width:100%; margin-left:0}
  .page__actions .btn{flex:1 1 auto}
  .card__head{flex-wrap:wrap; row-gap:8px}
  .card__foot{flex-wrap:wrap; row-gap:10px}
  .stepper{overflow-x:auto; padding-bottom:6px}
  .step__label{white-space:nowrap}
  .segmented{width:100%; overflow-x:auto}
  .kv{grid-template-columns:1fr}
  .kv dt{padding-bottom:0}

  /* A table that scrolls should look like one */
  .table-wrap{
    border-radius:var(--r);
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,0) 12px) 100% 0;
    background-repeat:no-repeat; background-size:40px 100%, 14px 100%;
    background-attachment:local, scroll;
  }
  .table th,.table td{white-space:nowrap}
}

@media (max-width:640px){
  body:not(.mk){
    background:
      radial-gradient(circle at 100% 0,var(--accent-soft) 0,transparent 210px),
      #fbfcfa;
  }
  .topbar{height:60px;border-bottom:0;box-shadow:0 5px 22px rgba(6,47,49,.07);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
  .page__head{padding:17px 16px;border-radius:22px;background:linear-gradient(135deg,var(--teal-100),#fff 68%,var(--accent-soft));box-shadow:0 9px 24px rgba(6,47,49,.06)}
  .page__head .display{font-size:27px}
  .card,.stat{border-color:rgba(226,234,233,.7);border-radius:20px;box-shadow:0 8px 24px rgba(6,47,49,.07)}
  .card__head{border-radius:20px 20px 0 0}
  .btn{border-radius:12px}
  .btn--primary{box-shadow:0 5px 14px rgba(16,110,114,.18)}
  .rating-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .criterion--ratings{display:block;padding:15px 13px}
  .sheet__section{border-radius:18px;margin-bottom:14px;background:#fff;box-shadow:0 6px 18px rgba(6,47,49,.055)}
  .sheet__section-head{padding:13px 14px;background:linear-gradient(90deg,var(--teal-100),#f8fcfc)}
  .score-total{border-radius:20px;background:linear-gradient(135deg,var(--teal-800),var(--teal-700));box-shadow:0 10px 24px rgba(6,47,49,.18)}
  .score-total__value{font-size:27px}
  .transfer-list{padding:8px 12px 13px}
  .transfer-item{align-items:flex-start;flex-wrap:wrap;padding:14px;border-radius:18px;box-shadow:0 5px 15px rgba(6,47,49,.045)}
  .transfer-item__body{min-width:calc(100% - 60px)}
  .transfer-item__actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-left:56px}
  .transfer-item__actions .btn{width:100%;min-width:0}
  .transfer-item__actions .btn:only-child{grid-column:1/-1}
  .pet-message-overlay{padding:12px;align-items:end}
  .pet-message-modal{width:100%;max-height:88vh;border-radius:24px 24px 18px 18px}
  .pet-message-modal__actions{display:grid;grid-template-columns:1fr 1fr}
  .pet-message-modal__actions .btn:first-child{grid-column:1/-1}
  .pet-message-modal__foot{display:grid;grid-template-columns:1fr 1fr}
  .pet-message-modal__foot .btn{width:100%;min-width:0}
}

@media (min-width:641px) and (max-width:860px){
  .criterion--ratings{display:block}
}

@media (max-width:520px){
  .page{padding:16px 12px 56px}
  .display.h1{font-size:26px}
  .avatar--xl{width:64px; height:64px; font-size:28px}
}

/* The topbar assumed a desktop: title, search, role pill, bell and a labelled
   sign-out button do not fit across a phone, and the row pushed the page
   sideways. Drop to what is actually needed at each width. */
@media (max-width:860px){
  .topbar{gap:8px; padding:0 12px}
  .topbar__label{display:none}
  .topbar__title{
    max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}
@media (max-width:640px){
  .topbar .pill{display:none}          /* the role is on the sidebar profile anyway */
  .search input{font-size:16px}
}
@media (max-width:420px){
  .topbar__title{display:none}         /* the page heading repeats it directly below */
  .search{flex:1 1 auto}
}

/* Four stat cards stacked one per screen meant four screens of scrolling before
   reaching anything you could act on. Two up, and much less air inside. */
@media (max-width:520px){
  .grid--4{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat{padding:14px}
  .stat__value{font-size:26px}
  .stat__label{font-size:11.5px; margin-top:2px}
  .stat__delta{font-size:10.5px}
  .grid{gap:12px}
}

/* ==========================================================================
   17. Marketing page accents  —  Saad's palette, Aug 2026
   --------------------------------------------------------------------------
   EVERYTHING here is scoped to body.mk, which only index.html carries.
   app.html has a bare <body>, so the signed-in application keeps the exact
   styling that was tested and signed off. Do not remove the body.mk prefix
   from any rule below without re-running the visual and mobile checks.
   ========================================================================== */
/* ONE teal, product-wide.

   Saad's file carried a second teal (#008C8C). Two teals two degrees apart in
   hue do not read as a system, they read as a mistake — and that one also
   failed contrast twice: 4.09:1 behind white button text, and 3.51:1 for the
   small "01" label on the CREATE card. So --mk-teal now points at the single
   brand teal and #008C8C is gone from the product entirely.

   Navy, amber and coral stay, but only as ILLUSTRATION fills — the 4 Cs and
   the role tiles. They must never become buttons or status colours, because
   amber sits 3-4 degrees from both the first-place gold and the pending
   warning, and coral sits 4 degrees from the rejected-entry red. Those three
   already carry meaning a judge relies on. Do not spend them on decoration. */
body.mk{
  --mk-teal:var(--teal-700);   /* #106E72 — same teal as every button */
  --mk-navy:#1F3A4D;
  --mk-amber:#F6AB00;
  --mk-coral:#FF5A5A;
}

/* Hero headline: the italic half picks up the brand teal */
body.mk .hero__title em{color:var(--mk-teal)}

/* Buttons deliberately carry NO marketing override. Every primary button in
   the product — landing page and app alike — is the one --teal-700 (#106E72),
   which clears WCAG AA at 6.01:1 against white. Saad's brighter #008C8C only
   reaches 4.09:1 and fails for button text, so it is used for large display
   type and block fills only, never behind a white label. Do not re-introduce
   a per-page button colour here. */

/* Four roles, four colours — the same coding used across the app's user types */
body.mk .feature__icon{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  font-size:22px; line-height:1;
  background:var(--teal-100);
}
body.mk .feature__icon--1{background:var(--mk-teal)}
body.mk .feature__icon--2{background:var(--mk-navy)}
body.mk .feature__icon--3{background:var(--mk-amber)}
body.mk .feature__icon--4{background:var(--mk-coral)}

/* Mascot, tucked into the top-right of the sign-in card.
   Absolutely placed so it never reflows when the card switches between
   sign-in, sign-up and the confirmation panel. */
body.mk .login-card{position:relative}
body.mk .mk-mascot{
  position:absolute; top:14px; right:16px;
  width:118px; pointer-events:none; user-select:none;
}
body.mk .mk-mascot img{width:100%; height:auto; display:block}

/* The card's heading must not run under the mascot */
body.mk #authTitle, body.mk #authSub{padding-right:126px}

/* On a phone the card is too narrow to carry it */
@media (max-width:860px){
  body.mk .mk-mascot{display:none}
  body.mk #authTitle, body.mk #authSub{padding-right:0}
}

/* The 4 Cs — Create, Configure, Compete, Celebrate.
   Same four colours as the roles above, so the palette means one thing
   consistently across the page. */
body.mk .cflow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
body.mk .c-card{
  border-radius:24px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(19,39,47,.06);
}
body.mk .c-top{color:#fff; padding:20px}
body.mk .c-top span{display:block; font-size:12px; font-weight:800; opacity:.88; letter-spacing:.04em}
body.mk .c-top strong{font-size:22px; letter-spacing:.02em}
body.mk .c-body{padding:20px}
body.mk .c-body p{margin:0; color:var(--ink-3)}

body.mk .c-card:nth-child(1) .c-top{background:var(--mk-teal)}
body.mk .c-card:nth-child(2) .c-top{background:var(--mk-navy)}
body.mk .c-card:nth-child(3) .c-top{background:var(--mk-amber)}
body.mk .c-card:nth-child(4) .c-top{background:var(--mk-coral)}

@media (max-width:980px){ body.mk .cflow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ body.mk .cflow{grid-template-columns:1fr} }
body.mk #how > .pill{
  text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  color:var(--mk-teal); font-size:11.5px; padding:7px 14px;
}

/* ==========================================================================
   18. Touch devices  —  tablet judging, Aug 2026
   --------------------------------------------------------------------------
   The sizing in section 15 is keyed to max-width:860px, which is a proxy for
   "phone". An iPad in landscape is 1024–1194px wide, so it fell through every
   one of those rules and got desktop-sized controls — on a touchscreen, in a
   judging ring, held in one hand.

   Two concrete faults this fixes:
     1. Score inputs were 34px tall. Apple's own minimum is 44px, and a judge
        is tapping these hundreds of times per show.
     2. Score inputs were 14px. iOS Safari zooms the whole page whenever a
        focused input is under 16px, so every tap on a score box would have
        jumped the layout and the judge would have had to pinch back out.

   Keyed to (pointer:coarse) — the input device, not the screen width — so it
   covers every tablet in any orientation and never touches a mouse-driven
   desktop.
   ========================================================================== */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn--sm{min-height:44px}   /* 'Back to ring' is tapped on every entry */
  .input,.select,.textarea{min-height:44px; font-size:16px}

  /* The score boxes themselves: the single most-tapped control in the app */
  .criterion input[type="number"],
  .criterion input[type="text"],
  input[data-score]{
    min-height:48px;
    font-size:18px;
    font-weight:600;
    text-align:center;
    padding:6px 8px;
  }


  /* Table rows carrying an action button need the height to match */
  .table td .btn{min-height:40px}

  /* Sidebar links and the menu button are touch targets too */
  .menu-btn{width:44px; height:44px}
  .nav__item{min-height:44px}
}

/* Widen only the score column, keeping all five. Restricted to min-width:861px
   so it cannot fight the phone layout in section 15, which drops to three
   columns and hides weight/total — phones are pointer:coarse as well. */
@media (pointer:coarse) and (min-width:861px){
  .criterion{grid-template-columns:1fr 62px 92px 62px 68px}
}

/* The two light fills carry dark text instead of white.
   White on the amber is 1.95:1 — effectively unreadable, and it fails at any
   text size. White on the coral is 3.06:1, which scrapes past for the big
   label but fails for the small number above it. Dark ink takes them to
   7.91:1 and 5.05:1 while keeping Saad's four colours exactly as specified.
   Teal and navy keep white text (4.09:1 large, 11.86:1). */
body.mk .c-card:nth-child(3) .c-top,
body.mk .c-card:nth-child(4) .c-top{color:var(--ink)}
/* .88 not .72 — at .72 the "04" on the coral only reached 3.74:1. This gives
   6.88:1 on the amber and 4.80:1 on the coral, both clear of 4.5:1, and still
   reads as quieter than the label beneath it. */
body.mk .c-card:nth-child(3) .c-top span,
body.mk .c-card:nth-child(4) .c-top span{opacity:.88}

/* Score sheet: where the submit button lives.
   On a wide screen it sits in the page header, which is always in view. On a
   phone — or a tablet held upright, which is how a judge holds one at a table —
   the header scrolls away as soon as scoring starts, leaving the judge with no
   visible way to submit. Below 860px the header copy is hidden and a full-width
   copy at the end of the sheet takes over, which is where a judge's thumb
   already is once the last criterion is entered. */
.sheet-lock--bottom{display:none}

@media (max-width:860px){
  .sheet-lock--top{display:none}
  .sheet-lock--bottom{
    display:block;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .sheet-lock--bottom .btn{width:100%}
}

/* ==========================================================================
   19. Winner's certificate
   --------------------------------------------------------------------------
   Rendered on screen and printed through the browser's own print dialogue,
   which gives the owner a real PDF via "Save as PDF" with no library and no
   server. The print block hides the whole application chrome so the sheet
   comes out alone on the page.
   ========================================================================== */
.cert-actions{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap}

.cert{
  max-width:820px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2, 0 18px 48px rgba(19,39,47,.10));
  padding:10px;
}
.cert__inner{
  border:2px solid var(--teal-700); border-radius:calc(var(--r-lg) - 4px);
  padding:44px 40px 36px; text-align:center; position:relative;
}
.cert__crest{font-size:40px; line-height:1; margin-bottom:10px}
.cert__eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-700); margin-bottom:18px;
}
.cert__title{
  font-family:var(--display); font-weight:600; font-size:34px;
  letter-spacing:-.02em; margin:0 0 22px; color:var(--ink);
}
.cert__lead{font-size:13.5px; color:var(--ink-3); margin:0 0 6px}
.cert__pet{
  font-family:var(--display); font-size:44px; font-weight:600;
  letter-spacing:-.02em; color:var(--teal-700); line-height:1.1; margin-bottom:4px;
}
.cert__breed{font-size:13px; color:var(--ink-3); margin-bottom:20px}
.cert__place{
  font-size:26px; font-weight:800; letter-spacing:.01em;
  color:var(--ink); margin:2px 0 4px;
}
.cert__class{font-size:14px; color:var(--ink-2); margin-bottom:24px}
.cert__rule{height:1px; background:var(--line); margin:0 auto 22px; max-width:340px}

.cert__meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px; text-align:left; margin:0 0 30px;
}
.cert__meta dt{
  font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px;
}
.cert__meta dd{margin:0; font-size:14px; font-weight:600; color:var(--ink)}

.cert__foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; text-align:left; flex-wrap:wrap;
}
.cert__sig-line{width:190px; border-bottom:1px solid var(--ink-3); margin-bottom:6px}
.cert__sig-label{font-size:12px; color:var(--ink-3)}
.cert__mark{text-align:right}
.cert__mark-name{font-family:var(--display); font-size:17px; font-weight:600; color:var(--teal-700)}
.cert__mark-note{font-size:10.5px; color:var(--ink-3)}

@media (max-width:640px){
  .cert__inner{padding:30px 20px 26px}
  .cert__title{font-size:25px}
  .cert__pet{font-size:33px}
  .cert__foot{flex-direction:column; align-items:flex-start}
  .cert__mark{text-align:left}
}

/* Print: the sheet only. */
@media print{
  .sidebar, .topbar, .cert-actions, .menu-btn, .toast, .nav__item{display:none !important}
  .main, .page, body, html{margin:0 !important; padding:0 !important; background:#fff !important}
  .cert{
    border:none; box-shadow:none; max-width:none;
    margin:0; padding:0; page-break-inside:avoid;
  }
  .cert__inner{border:2px solid #106E72; padding:38px 34px}
  @page{margin:14mm}
}

/* ==========================================================================
   20. Public foundation — screenshot-led landing and dedicated auth
   ========================================================================== */
body.mk{background:#fbfdfc}
.brand-lockup{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-lockup:hover{text-decoration:none}
.brand-lockup > span{display:block}
.brand-lockup b{display:block; color:var(--ink); font-size:19px; line-height:1; letter-spacing:-.02em}
.brand-lockup .eyebrow{display:block; margin-top:3px; font-size:9.5px}

.hero--public{padding-top:42px; align-items:stretch}
.hero--public .hero__copy{align-self:center}
.story-board{
  position:relative; min-height:590px; overflow:hidden;
  background:linear-gradient(160deg,#fff 15%,#f2f9f8 100%);
  border:1px solid var(--line); border-radius:28px; padding:28px;
  box-shadow:0 22px 70px rgba(6,47,49,.12);
}
.story-board::before{
  content:""; position:absolute; width:310px; height:310px; border-radius:50%;
  border:1px solid rgba(16,110,114,.13); right:42px; top:155px;
  box-shadow:0 0 0 46px rgba(16,110,114,.035),0 0 0 92px rgba(16,110,114,.025);
}
.story-board__head{position:relative; z-index:2; max-width:290px}
.story-board__head h2{font-size:38px; color:var(--teal-700); margin:1px 0 7px}
.story-board__head p{font-size:13.5px; color:var(--ink-2)}
.role-map{position:relative; z-index:2; height:300px; margin-top:10px}
.role-node{
  position:absolute; display:flex; align-items:flex-start; gap:10px; width:200px;
  padding:14px; background:rgba(255,255,255,.96); border:1px solid var(--line);
  border-radius:15px; box-shadow:0 7px 20px rgba(19,39,47,.08);
}
.role-node b{display:block; font-size:13.5px}
.role-node small{display:block; margin-top:3px; color:var(--ink-3); font-size:10.5px; line-height:1.4}
.role-node__icon{display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; color:#fff}
.role-node--association{right:8px; top:0}.role-node--association .role-node__icon{background:#17658a}
.role-node--judge{left:36px; top:118px}.role-node--judge .role-node__icon{background:#1f3a4d}
.role-node--pet{right:0; top:164px}.role-node--pet .role-node__icon{background:#ff6a62}
.role-map__mark{
  position:absolute; top:110px; left:55%; display:grid; place-items:center;
  width:70px; height:70px; border-radius:50%; background:var(--teal-700);
  box-shadow:0 8px 24px rgba(16,110,114,.25); transform:translateX(-50%);
}
.role-map__mark img{width:42px}
.story-mascot{position:absolute; z-index:3; left:-12px; bottom:56px; width:190px}
.story-mascot img{width:100%; height:auto}
.flow-strip{
  position:absolute; z-index:4; left:26px; right:26px; bottom:24px;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:13px 14px 13px 170px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-2); font-size:9.5px; font-weight:700;
}
.flow-strip span{display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.2}
.flow-strip i{font-style:normal; display:grid; place-items:center; width:28px; height:28px; margin-bottom:4px; border-radius:50%; background:var(--teal-50)}
.flow-strip b{color:var(--teal-300)}

.record-band{
  max-width:1180px; margin:12px auto 72px; padding:44px;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:46px; align-items:center;
  background:linear-gradient(145deg,#f0f8f7,#fff); border:1px solid var(--teal-100);
  border-radius:30px;
}
.record-band__copy h2{margin:8px 0 13px}
.record-band__copy p{margin-bottom:20px}
.pet-record-preview{
  overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 18px 42px rgba(6,47,49,.1); padding:22px 22px 0;
}
.pet-record-preview__top{display:flex; align-items:center; gap:12px}
.pet-record-preview__top > .pill{margin-left:auto}
.pet-record-preview__top h3{font-size:20px}.pet-record-preview__top p{font-size:11.5px; color:var(--ink-3)}
.preview-pet{display:grid; place-items:center; width:55px; height:55px; border-radius:50%; background:var(--teal-50); font-size:27px}
.preview-tabs{display:flex; gap:19px; overflow:hidden; margin:18px 0 10px; border-bottom:1px solid var(--line); font-size:10.5px; color:var(--ink-3)}
.preview-tabs > *{padding:0 0 8px; white-space:nowrap}.preview-tabs b{color:var(--teal-700); border-bottom:2px solid var(--teal-700)}
.preview-result{display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line-soft)}
.preview-result > div{flex:1}.preview-result b,.preview-result small{display:block}.preview-result b{font-size:12px}.preview-result small{font-size:10px; color:var(--ink-3)}
.preview-nav{display:grid; grid-template-columns:repeat(4,1fr); margin:18px -22px 0; padding:12px 16px; background:var(--teal-700); color:#fff}
.preview-nav span{display:flex; flex-direction:column; align-items:center; font-size:16px}.preview-nav small{font-size:8.5px; margin-top:2px}
.section-wrap{max-width:1240px; margin:0 auto; padding:64px 32px}
.section-pill{display:inline-block; margin-bottom:14px; text-transform:uppercase; letter-spacing:.08em; font-weight:800}
.section-intro{max-width:62ch; margin:8px 0 32px}
.public-cta{
  max-width:1180px; margin:72px auto; padding:36px 42px; display:flex; gap:24px;
  justify-content:space-between; align-items:center; color:#fff;
  background:linear-gradient(125deg,var(--teal-800),var(--teal-700)); border-radius:26px;
}
.public-cta .eyebrow,.public-cta p{color:#cfe3e3}.public-cta h2{margin:5px 0}
.public-cta .btn{background:#fff; color:var(--teal-800)}
.mk-foot__copy{margin-left:auto; text-align:right}

.auth-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 25%,rgba(126,189,191,.22),transparent 32%),
    linear-gradient(150deg,#f7fbfa,#fff 52%,#eff7f6);
}
.auth-nav{max-width:1120px}
.auth-layout{
  width:min(1080px,calc(100% - 40px)); min-height:calc(100vh - 98px);
  margin:0 auto; padding:34px 0 64px; display:grid; grid-template-columns:1fr 440px;
  gap:72px; align-items:center;
}
.auth-welcome{position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-height:600px; padding:40px 0 165px}
.auth-welcome h1{font-size:clamp(40px,5.2vw,66px); margin:10px 0 18px; max-width:10ch}
.auth-welcome > p{max-width:48ch; color:var(--ink-2)}
.auth-benefits{display:grid; gap:9px; margin-top:25px; color:var(--ink-2); font-size:13.5px; font-weight:600}
.auth-benefits span{display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:50%; background:var(--good-bg); color:var(--good)}
.auth-mascot{position:absolute; left:-5px; bottom:-2px; width:245px}
.auth-mascot img{width:100%; height:auto}
.auth-card{position:relative; padding:34px; border-radius:24px; box-shadow:0 22px 70px rgba(6,47,49,.14)}
.auth-card__mark{display:grid; place-items:center; width:54px; height:54px; margin-bottom:17px; border-radius:16px; background:var(--teal-50)}
.auth-card__mark img{width:38px}.auth-card #authSub{margin:5px 0 22px}
.auth-card #optionsRow{justify-content:space-between; margin:3px 0 16px}
.auth-toggle{text-align:center; margin-top:16px}
.auth-note{margin-top:14px; padding:11px 12px; border-radius:10px; background:var(--teal-50); line-height:1.55}
.auth-message{margin:2px 0 12px; padding:10px 12px; border-radius:9px; background:var(--bad-bg); color:var(--bad)}
.auth-message--good{background:var(--good-bg); color:var(--good)}
.auth-done{text-align:center; padding:8px 0 2px}
.auth-done__icon{display:grid; place-items:center; width:54px; height:54px; margin:0 auto 15px; border-radius:50%; background:var(--good-bg); color:var(--good); font-size:24px; font-weight:800}
.auth-done #doneBody{margin:8px 0 18px; line-height:1.6}
.auth-done__hint{text-align:left; margin-bottom:18px; padding:12px 14px; border-radius:10px; background:var(--canvas); color:var(--ink-2)}
.context-select{width:auto; min-width:160px; height:34px; padding-top:0; padding-bottom:0}
.owner-tabbar{display:none}
.result-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}

.public-results-page{min-height:100vh;background:linear-gradient(180deg,#f6fbfa 0,#fff 440px)}
.public-results-shell{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:64px 0 90px}
.public-results-hero{max-width:720px;margin-bottom:38px}
.public-results-hero h1{font-size:clamp(42px,6vw,72px);margin:8px 0 12px}
.public-results-hero p{color:var(--ink-2);font-size:16px;line-height:1.7}
.public-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.public-result-card{display:block;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 9px 28px rgba(6,47,49,.07);color:var(--ink);transition:.2s ease}
.public-result-card:hover{transform:translateY(-2px);border-color:var(--teal-300);box-shadow:0 14px 32px rgba(6,47,49,.11)}
.public-result-card h2{margin:15px 0 4px;font-size:21px}.public-result-card p{color:var(--ink-2)}
.public-result-card__meta{display:flex;justify-content:space-between;gap:12px;margin:20px 0;font-size:12px;color:var(--ink-3)}
.public-result-card>b{color:var(--teal-700);font-size:13px}
.empty-public{text-align:center;padding:58px 24px;background:#fff;border:1px solid var(--line);border-radius:20px}
.empty-public>span{font-size:38px}.empty-public h2{margin:12px 0 6px}.empty-public p{color:var(--ink-3)}
.back-link{display:inline-block;margin-bottom:24px;color:var(--teal-700);font-weight:800}
.public-result-title{margin-bottom:26px}.public-result-title h2{font-size:clamp(34px,5vw,54px);margin:10px 0 3px}
.public-result-title p{color:var(--ink-2)}.public-category{margin-bottom:16px}
.public-placement{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:15px 18px;border-top:1px solid var(--line-soft)}
.public-placement:first-child{border-top:0}.public-placement__medal{font-size:25px}
.public-placement b,.public-placement small{display:block}.public-placement small{margin-top:2px;color:var(--ink-3)}
.public-placement strong{font-family:var(--mono);color:var(--teal-700)}
.public-results-foot{max-width:1080px;margin:0 auto}.public-results-foot p{margin-left:auto}
.pet-finder-shell{max-width:980px}
.pet-search-card{margin:-8px 0 28px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1)}
.pet-search-card>label{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pet-search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.public-pet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.public-pet-card{display:flex;align-items:center;gap:15px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1);color:var(--ink)}
.public-pet-card:hover{text-decoration:none;border-color:var(--teal-300);box-shadow:var(--shadow-2)}
.public-pet-card h2{font-size:18px}.public-pet-card p{margin:2px 0 8px;font-size:12px;color:var(--ink-3)}.public-pet-card span{font-size:12px;font-weight:700;color:var(--teal-700)}
.public-pet-avatar{display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;overflow:hidden;border-radius:50%;background:var(--teal-50);font-size:30px;border:1px solid var(--line)}
.public-pet-avatar img{width:100%;height:100%;object-fit:cover}.public-pet-avatar--xl{width:118px;height:118px;flex-basis:118px;font-size:52px}
.public-pet-profile{overflow:hidden}.public-pet-profile__hero{display:flex;align-items:center;gap:22px;padding:28px;background:linear-gradient(135deg,var(--teal-50),#fff)}
.public-pet-profile__hero h1{margin:8px 0 4px;font-size:42px}.public-pet-profile__hero p{color:var(--ink-3)}
.public-pet-profile__body{display:grid;grid-template-columns:1fr 210px;gap:32px;padding:26px}
.qr-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:16px;border-radius:14px;background:var(--canvas)}
.qr-panel small{font-size:10.5px;color:var(--ink-3)}#petQr{padding:8px;background:#fff;border-radius:8px}
.contact-owner-card{margin-top:16px}.contact-owner-card .card__body{max-width:720px}

@media (max-width:1100px){
  .record-band,.public-cta{margin-left:24px; margin-right:24px}
}
@media (max-width:900px){
  .auth-layout{grid-template-columns:1fr; gap:16px; padding-top:12px}
  .auth-welcome{min-height:auto; padding:30px 0 0; text-align:center; align-items:center}
  .auth-welcome h1{max-width:14ch}.auth-welcome > p{max-width:56ch}
  .auth-benefits{display:none}.auth-mascot{display:none}
  .auth-card{width:min(480px,100%); margin:0 auto}
}
@media (max-width:760px){
  .story-board{min-height:560px}
  .record-band{grid-template-columns:1fr; padding:30px; gap:30px}
  .public-cta{align-items:flex-start; flex-direction:column}
}
@media (max-width:560px){
  .mk-nav{padding:14px 16px}.mk-nav__links{gap:8px}.mk-nav__links .nav-create{display:none}
  .hero--public{padding:24px 16px 54px}.hero__proof{gap:14px}.hero__proof b{font-size:17px}
  .story-board{padding:22px 18px; min-height:530px}
  .story-board::before{right:-50px}
  .story-board__head{max-width:240px}.story-board__head h2{font-size:32px}
  .role-node{width:172px;padding:10px}.role-node--judge{left:0}.role-node--association{right:0}
  .role-node--pet{right:-4px}.role-map__mark{left:50%; top:110px; width:58px; height:58px}
  .role-map__mark img{width:34px}.story-mascot{width:150px; left:-15px}
  .flow-strip{left:12px;right:12px;padding-left:122px;gap:4px;font-size:8px}
  .flow-strip i{width:24px;height:24px}.flow-strip b{display:none}
  .record-band{margin:0 14px 48px; padding:23px 16px; border-radius:22px}
  .section-wrap{padding:50px 16px}.public-cta{margin:50px 14px;padding:28px 22px}
  .pet-record-preview{padding:17px 14px 0}.preview-tabs{gap:14px}.preview-nav{margin-left:-14px;margin-right:-14px}
  .mk-foot{padding:28px 16px}.mk-foot img{height:86px}.mk-foot__copy{margin-left:0;text-align:left}
  .auth-layout{width:calc(100% - 24px); padding-bottom:32px}.auth-welcome{padding-top:14px}
  .auth-welcome h1{font-size:36px}.auth-welcome > p{font-size:13.5px}
  .auth-card{padding:24px 18px}.auth-nav .btn{padding:0 11px}
  .context-select{min-width:0;max-width:135px}
  .result-flow{gap:5px}.result-flow .pill{font-size:9px}.result-flow .muted{display:none}
  .public-results-shell{width:calc(100% - 28px);padding:42px 0 64px}
  .public-result-grid{grid-template-columns:1fr}.public-results-hero{margin-bottom:25px}
  .public-results-foot{padding-left:16px;padding-right:16px}.public-results-foot p{margin-left:0}
  .pet-search-row{grid-template-columns:1fr}.public-pet-grid{grid-template-columns:1fr}
  .public-pet-profile__hero{padding:20px 16px;align-items:flex-start}.public-pet-avatar--xl{width:82px;height:82px;flex-basis:82px;font-size:38px}
  .public-pet-profile__hero h1{font-size:31px}.public-pet-profile__body{grid-template-columns:1fr;padding:18px 14px}.input-group{grid-template-columns:1fr}
}

@media print{
  body.public-results-page>*{display:none !important}
  body.public-results-page .public-pet-profile,body.public-results-page .public-pet-profile *{display:block !important}
  body.public-results-page .public-pet-profile{position:absolute;inset:0;border:0;box-shadow:none}
  body.public-results-page .public-pet-profile__body>div{display:none !important}
  body.public-results-page .qr-panel{width:280px;margin:30px auto}
}

/* Mobile marketing composition: the reference artwork becomes a clean card
   stack instead of overlapping absolute-positioned blocks. */
@media (max-width:760px){
  .story-board{min-height:auto;padding:24px 18px}
  .story-board::before{display:none}
  .story-board__head{max-width:none;text-align:left}
  .role-map{height:auto;display:grid;gap:10px;margin-top:20px}
  .role-node{position:static;width:100%;min-height:70px}
  .role-map__mark{display:none}
  .story-mascot{position:relative;left:auto;bottom:auto;width:150px;margin:14px auto -5px}
  .flow-strip{position:static;justify-content:center;flex-wrap:wrap;margin-top:10px;padding:13px;gap:8px}
  .flow-strip b{display:inline}
}

/* Tablet cards stay balanced in two columns; phones collapse to one. */
@media (min-width:641px) and (max-width:860px){
  .grid--2,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .page{padding:18px 14px 124px}
  .card__head,.card__body,.card__foot{padding-left:14px;padding-right:14px}
  .page__head{margin-bottom:16px}
  .page__actions{width:100%}
  .page__actions .btn{flex:1 1 auto}
  .pet-profile-head{align-items:center !important}
  .pet-profile-head > .avatar{width:86px;height:86px;font-size:42px}
  .pet-profile-head > .page__actions{margin-left:0}
  .pet-profile-head .page__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pet-profile-head .page__actions .btn{width:100%;margin:0;white-space:normal;line-height:1.25}
  .pet-profile-head .page__actions .btn--primary{grid-column:1/-1}
  .pet-section-nav{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px;gap:7px}
  .pet-section-tab{min-height:45px;font-size:11px;padding:7px 4px}
  .owner-notification{grid-template-columns:auto minmax(0,1fr) auto;padding:12px}.owner-notification time{display:none}.owner-notification>svg{width:16px}
  .owner-entry-list,.owner-entry-list--page{padding:11px}.owner-entry-card{padding:13px}.owner-entry-card__head{align-items:flex-start}.owner-entry-card__head>.pill{font-size:9.5px;padding:4px 7px;white-space:nowrap}
  .entry-journey{margin-left:-4px;margin-right:-4px}.entry-journey__step{font-size:9.5px}.owner-entry-card__foot{flex-wrap:wrap}
  .assignment-card__head{align-items:flex-start;flex-wrap:wrap}.assignment-entry{width:100%;display:grid;grid-template-columns:auto 1fr auto}
  .judging-review-item>summary{grid-template-columns:minmax(0,1fr) auto auto}.judging-review-item__judge{grid-column:1/2}.judging-review-item__chevron{grid-column:3;grid-row:1/3}.assessment-grid{grid-template-columns:1fr}.judging-review-item__actions{align-items:stretch;flex-direction:column}.judging-review-item__actions .btn{width:100%}
  .topbar{padding:0 12px;gap:8px}
  .topbar > .search{display:none}
  .topbar__title{display:block;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:860px){
  .owner-tabbar{
    position:fixed; z-index:55; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(5,1fr); min-height:62px; padding:7px 8px;
    border-radius:20px; background:linear-gradient(135deg,var(--teal-800),var(--teal-700));
    box-shadow:0 12px 34px rgba(6,47,49,.3); color:#cfe3e3;
  }
  .owner-tabbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:13px; font-size:9.5px; font-weight:700; color:inherit}
  .owner-tabbar button svg{width:19px;height:19px}
  .owner-tabbar button.is-active{background:rgba(255,255,255,.16);color:#fff}
  .owner-tabbar + .toast{bottom:84px}
  body:has(.owner-tabbar) .page{padding-bottom:124px}
}