/* KainFit v2: the tracker, restyled to match the new site.
   Loaded LAST, after kainfit.css and the page's own styles, so it only has
   to override. Every id and behaviour underneath is unchanged.
   Priorities, in order: the meal box is the first thing a person sees and
   can use; the day's number is the reward; nothing asks twice. */

@font-face{font-family:"Big Shoulders";src:url(fonts/BigShoulders-900.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-600.woff2) format("woff2");font-weight:600 650;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-700.woff2) format("woff2");font-weight:700 750;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-800.woff2) format("woff2");font-weight:800 900;font-display:swap}

:root{
  --display:"Schibsted",system-ui,sans-serif;
  --ui:"Schibsted",system-ui,sans-serif;
  --big:"Big Shoulders","Arial Narrow",sans-serif;
  --block:#2d1b4e; --ube-deep:#211339; --ube-lift:#3a2563;
  --latik:#f0b429; --latik-deep:#dfa51e; --cream:#f6f1ea; --terra:#d9694a;
  /* Macros, same mapping as the site: protein gold, carbs lilac, fat terracotta */
  --c-protein:#f0b429; --c-carbs:#b58be0; --c-fat:#e8835f;
  --t-protein:#8a6206; --t-carbs:#6a3b8e; --t-fat:#b34a2e; --t-kcal:#2d1b4e;
  --r:14px; --r-lg:26px;
  --out:cubic-bezier(0.23,1,0.32,1);
  --expo:cubic-bezier(0.16,1,0.3,1);
  --drawer:cubic-bezier(0.32,0.72,0,1);
}
body{font-family:var(--ui);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 90% 0%,rgba(106,59,142,.55),transparent 60%),var(--block) fixed}
button,input,select{font-family:inherit}

/* ---------- Header ---------- */
.top{border-bottom:0;margin-bottom:.4rem;padding:.2rem 0 .4rem}
.brand{gap:.55rem;text-decoration:none}
.brand__mark{width:auto;height:auto;background:none;border:0;box-shadow:none}
.brand__mark img{width:24px;height:auto;display:block}
.brand__word{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:var(--cream)}
.brand__word b{color:var(--latik);font-weight:800}
.offline-dot{font-size:11.5px;letter-spacing:.05em;color:#cbbbe0}
@media (max-width:420px){#netLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.install{border:0;padding:0 .8rem;font-weight:800;box-shadow:inset 0 -2px 0 rgba(26,16,35,.18);transition:transform .16s var(--out)}
.install:active{transform:scale(.96)}
.lang{border-color:rgba(246,241,234,.18)}
.lang button{font-weight:800;transition:background-color .2s ease,color .2s ease}

/* ---------- Day head ---------- */
.dayhead{align-items:flex-end;margin:.6rem 0 .8rem}
.dayhead h1{font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,2rem + 3vw,3.4rem);line-height:.85;letter-spacing:0;color:var(--cream);
  text-shadow:1px 1px 0 var(--terra),2px 2px 0 var(--terra),3px 3px 0 var(--terra),4px 4px 0 var(--terra)}
.dayhead span{font-size:13px;font-weight:700;color:#cbbbe0;padding-bottom:.25rem}

/* ---------- The meal box: first on screen, the one thing to do ---------- */
.composer{margin-top:0;padding:6px;border-radius:30px;background:rgba(246,241,234,.07);box-shadow:inset 0 0 0 1px rgba(246,241,234,.12)}
.composer > label{margin:.55rem .7rem .55rem;font-size:15px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--cream)}
.composer__box{gap:0;padding:5px;border-radius:999px;background:var(--cream);box-shadow:inset 0 2px 6px rgba(26,16,35,.12),0 18px 34px -22px rgba(0,0,0,.8)}
.composer__box:focus-within{box-shadow:inset 0 2px 6px rgba(26,16,35,.12),0 0 0 3px var(--latik)}
.composer .input{min-height:50px;border:0;background:transparent;box-shadow:none;padding:0 .6rem 0 1rem;font-size:17px;font-weight:600;color:#1a1023;outline:none}
.composer .input::placeholder{color:#5c4f6b}
#logBtn{display:inline-flex;align-items:center;gap:.5rem;min-height:50px;padding:0 .45rem 0 1.15rem;border:0;border-radius:999px;background:var(--latik);color:#1a1023;
  font-family:var(--ui);font-size:15.5px;font-weight:800;box-shadow:inset 0 -2px 0 rgba(26,16,35,.18),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s var(--out),background-color .2s ease}
#logBtn::after{content:"";width:34px;height:34px;border-radius:50%;flex:none;
  background:rgba(26,16,35,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%231a1023' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:transform .35s var(--drawer)}
#logBtn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){#logBtn:hover{background:#f6c14a}#logBtn:hover::after{transform:translateX(2px)}}
.composer__hint{margin:.55rem .8rem .35rem;font-size:13.5px;color:#cbbbe0}
.sglist{border-radius:20px;padding:6px;box-shadow:0 26px 50px -22px rgba(0,0,0,.8),0 0 0 1px rgba(45,27,78,.12)}
.sg{border-radius:14px}
/* Nothing typed, nothing suggested: the list only belongs to a half-typed word */
.composer__box:has(.input:placeholder-shown) ~ .sglist{display:none}

/* ---------- One-tap quick adds, right under the box ---------- */
.quickadd{margin-top:.9rem}
.chiprow{gap:4px;border-bottom:0;padding:4px;border-radius:999px;background:rgba(0,0,0,.18);width:max-content;max-width:100%}
.chiprow button{min-height:38px;padding:0 .95rem;border:0;border-radius:999px;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#cbbbe0;transition:background-color .25s var(--out),color .25s ease}
.chiprow button[aria-pressed='true']{background:var(--cream);color:#1a1023;border:0}
.chips{gap:.45rem;padding:.7rem 0 .2rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem 0 .55rem;border:0;border-radius:999px;background:var(--cream);color:#1a1023;font-weight:700;box-shadow:0 10px 22px -16px rgba(0,0,0,.8);transition:transform .16s var(--out)}
.chip::before{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--latik);font-weight:800;font-size:16px;line-height:1;color:#1a1023}
.chip:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:transparent;background:#fff}}

/* ---------- John's launch ask, when it shows ---------- */
.launchask{margin-top:1rem;padding:1.15rem 1.15rem 1rem;border:0;border-radius:var(--r-lg);background:var(--cream);box-shadow:0 30px 50px -34px rgba(0,0,0,.9)}
.launchask h3{font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:1.9rem;line-height:.95;color:var(--block)}
.launchask__eyebrow{color:#8a3a22}
.launchask__goal{border-radius:999px;border-color:rgba(45,27,78,.2)}
.launchask__form .input{border-radius:999px}

/* ---------- The reward: today's number ---------- */
.scalecard{margin-top:1.1rem;border:0;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--ube-lift),#26163f 70%);box-shadow:inset 0 0 0 1px rgba(246,241,234,.1),inset 0 1px 0 rgba(246,241,234,.1),0 30px 50px -34px rgba(0,0,0,.9);color:var(--cream)}
.scalecard .readout{background:none;border:0;box-shadow:none;padding:1.05rem 1.15rem .6rem}
.scalecard .readout__label{margin-bottom:.1rem;font-size:12.5px;font-weight:800;color:#cbbbe0}
.readout__row{gap:.45rem}
.scalecard .readout__num{font-family:var(--big);font-weight:900;font-size:clamp(4.6rem,3.6rem + 5vw,6rem);line-height:.82;letter-spacing:0;color:var(--cream)}
.scalecard .readout__unit{font-family:var(--big);font-weight:900;font-size:1.6rem;letter-spacing:0;color:var(--latik)}
.scalecard .readout__of{font-weight:700;color:#cbbbe0}
.scalecard .gaugewrap{background:none;padding:.35rem 1.15rem 1rem}
.scalecard .gauge{height:14px;border:0;background:rgba(246,241,234,.12);box-shadow:none}
.scalecard .gauge__fill{border:0;background:linear-gradient(90deg,var(--latik-deep),var(--latik));box-shadow:0 0 18px rgba(240,180,41,.35);transition:width .9s var(--expo)}
.scalecard .gauge--over .gauge__fill{background:var(--terra);box-shadow:none}
.scalecard__foot{background:rgba(0,0,0,.18);border-top:1px solid rgba(246,241,234,.08);border-radius:0;padding:.8rem 1.15rem .9rem;color:var(--cream)}
.scalecard__foot b{font-weight:800;color:var(--cream)}
.scalecard__foot span{color:#cbbbe0}

/* ---------- Macro dials ---------- */
.macros{margin-top:1.1rem;--dial-track:rgba(246,241,234,.12);--dial-hole:#2a1947;padding:1rem .6rem .9rem;border-radius:var(--r-lg);background:rgba(0,0,0,.14)}
.macro__ring{width:4.9rem;height:4.9rem;transition:background .6s var(--expo)}
.macro__ring::after{inset:.5rem}
.macro__in{font-family:var(--big);font-weight:900;font-size:1.45rem;letter-spacing:0;color:var(--cream)}
.macros .m-protein{color:#f6cf6e}
.macros .m-carbs{color:#d6bdf0}
.macros .m-fat{color:#f2a58d}
.macro__name{font-weight:800;letter-spacing:.05em}
.macro__goal{color:#cbbbe0}

/* ---------- Meal slots ---------- */
.meals{gap:.45rem;margin-top:1rem}
.meal{border-radius:18px;min-height:64px;border-color:rgba(246,241,234,.3);transition:transform .16s var(--out),background-color .25s ease}
.meal b{font-family:var(--big);font-weight:900;font-size:1.6rem}
.meal.is-filled{box-shadow:inset 0 -2px 0 rgba(26,16,35,.14)}

/* ---------- Coach: a note from John, not an alert ---------- */
.coach{position:relative;margin-top:1rem;padding:1rem 1.1rem 1.05rem 4.4rem;border:0;border-radius:var(--r-lg);background:var(--cream);box-shadow:0 26px 44px -34px rgba(0,0,0,.9)}
.coach::before{content:"";position:absolute;left:1rem;top:1rem;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--block) url("img/glyph.webp") center/52% no-repeat}
.coach h2,.coach h3{font-family:var(--ui);font-size:1.05rem;font-weight:800;color:var(--block);margin-bottom:.2rem}
.coach p{font-size:15.5px;line-height:1.5}

/* ---------- The day's log ---------- */
.logsec{margin-top:1.3rem;gap:.8rem}
.logsec .panel{border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);box-shadow:0 26px 44px -34px rgba(0,0,0,.9)}
.entry__name{font-size:15.5px;font-weight:800}
.entry__kcal{font-family:var(--big);font-weight:900;font-size:1.6rem;letter-spacing:0}
.entry__kcal small{font-family:var(--ui);font-size:12px}
.entry__del{border-radius:50%}

/* ---------- Tabs ---------- */
.tabs{background:rgba(24,13,42,.97);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-top:1px solid rgba(246,241,234,.1)}
.tabs button{position:relative;border-top:0;margin-top:0;align-content:start;padding-top:10px;gap:.6rem;font-weight:800;letter-spacing:.03em;color:#cbbbe0;transition:color .2s ease}
.tabs button svg{position:relative;z-index:1}
.tabs button span{position:relative;z-index:1}
.tabs button::before{content:"";position:absolute;top:4px;left:50%;width:56px;height:30px;margin-left:-28px;border-radius:999px;background:var(--latik);opacity:0;transform:scale(.6);transition:opacity .25s var(--out),transform .35s var(--drawer)}
.tabs button[aria-pressed='true']{color:var(--cream);background:none}
.tabs button[aria-pressed='true']::before{opacity:1;transform:none}
.tabs button[aria-pressed='true'] svg{color:#1a1023}

/* ---------- Views change with a short rise, not a cut ---------- */
.view.is-on{animation:viewIn .45s var(--expo) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}

.toast{border-radius:999px;font-weight:800;padding:.7rem 1.2rem}

@media (prefers-reduced-motion:reduce){
  .view.is-on{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Tabular figures space a comma like a digit ("2 , 510"); these lines are prose */
.scalecard__foot b,.scalecard__foot span,.scalecard .readout__of{font-variant-numeric:normal;font-feature-settings:normal}

/* First run said "Nothing logged yet" three times. The coach card already
   says it, and the meal box is now right at the top, so the empty log card
   under everything is the one that goes. */
#logList > .empty{display:none}

@media (max-width:360px){
  .top{gap:.35rem}
  .brand{gap:.4rem}
  .brand__word{font-size:1rem}
  .install{padding:0 .6rem}
  .install + .lang{margin-left:0}
  .lang button{min-width:44px;padding:0 .35rem}
  .chiprow{gap:2px}
  .chiprow button{padding:0 .42rem;font-size:12px;letter-spacing:0}
  #logBtn{padding:0 1rem}
  #logBtn::after{display:none}
}

/* =====================================================================
   Review sheet: the step between typing and logging. It has to feel quick,
   so the answer (the numbers) is loud and the questions are easy taps.
   ===================================================================== */
.scrim{background:rgba(12,6,24,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet,.howto{background:var(--cream);border:0;border-radius:30px 30px 0 0;padding:.7rem 1.05rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow:0 -30px 60px -20px rgba(0,0,0,.6);transition:transform .45s var(--drawer),visibility 0s linear .45s}
.sheet.is-on,.howto.is-on{transition:transform .5s var(--drawer)}
@media (min-width:46rem){
  .sheet{border-radius:30px;transition:opacity .25s var(--out),transform .35s var(--drawer),visibility 0s linear .25s;transform:translate(-50%,-48%) scale(.98)}
  .sheet.is-on{transform:translate(-50%,-50%);transition:opacity .25s var(--out),transform .35s var(--drawer)}
}
.sheet__grip{width:44px;height:5px;border-radius:9px;background:#d4c7b6;margin-bottom:1rem}
.sheet__head h2,.howto h2{font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:2.2rem;line-height:.9;letter-spacing:0;color:var(--block);margin-bottom:.45rem}
.sheet__head p,.howto__why{font-size:15.5px;line-height:1.5;color:#4a3d5c}
.sheet__said{border:0;border-radius:14px;background:#ebe2d4;font-size:13.5px;padding:.6rem .8rem;color:#4a3d5c}
.sheet__said i{color:#1a1023}

.ritem{padding:1rem 1rem .9rem;margin-bottom:.75rem;border:0;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px rgba(45,27,78,.08),0 16px 30px -26px rgba(45,27,78,.7)}
.ritem__name{font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:1.75rem;line-height:.95;letter-spacing:0;color:var(--block)}
.ritem__sub{font-size:13.5px;color:#57496a;margin-top:.2rem}
.ritem__x{border-radius:50%;background:#f3ece2}
.tagline-row{margin-top:.55rem}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em}
.tag--v{background:#e6dcf0;color:var(--block)}
.tag--r{background:#fbe6c2;color:#6b4500}
.tag--q{background:#fbe0d6;color:#8a2f16}
.amount{gap:.65rem}
.amount input{width:6.5rem;min-height:48px;border:0;border-radius:14px;background:#f6f1ea;box-shadow:inset 0 0 0 1.5px rgba(45,27,78,.18);font-family:var(--big);font-weight:900;font-size:1.6rem;text-align:center;color:var(--block)}
.amount input:focus{outline:none;box-shadow:inset 0 0 0 1.5px rgba(45,27,78,.18),0 0 0 3px var(--latik)}
.amount span{font-size:14px;color:#57496a}
.ask__label{font-size:14px;font-weight:800;color:#1a1023}
.seg{gap:4px;padding:4px;border:0;border-radius:999px;background:#efe6d9}
.seg button{min-height:40px;padding:0 1rem;border:0!important;border-radius:999px;background:none;font-weight:700;color:#3d3050;transition:background-color .2s var(--out),color .2s ease}
.seg button[aria-pressed='true']{background:var(--block);color:var(--cream);box-shadow:0 6px 14px -8px rgba(45,27,78,.8)}
.rmacros{border-top:2px dashed rgba(26,16,35,.14);padding-top:.8rem;margin-top:1rem}
.rmacro b{font-family:var(--big);font-weight:900;font-size:1.9rem;line-height:1;letter-spacing:0}
.rmacro small{font-size:11.5px;letter-spacing:.05em}
.rmacros .rmacro:nth-child(1) b{color:var(--block)}
.teach{border:0;background:#fff4ec;box-shadow:inset 0 0 0 1.5px rgba(217,105,74,.45);border-radius:22px}
.teach h3{font-weight:800;font-size:16px;color:#8a2f16}
.fieldlet label{font-size:11.5px;color:#57496a}
.fieldlet input{border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(45,27,78,.18);font-weight:800;text-align:center;color:#1a1023}
.fieldlet input:focus{outline:none;box-shadow:inset 0 0 0 1.5px rgba(45,27,78,.18),0 0 0 3px var(--latik)}
/* The action bar reaches the sheet's edges so nothing scrolls visibly under it */
/* No bottom padding on the sheet itself: a sticky bar pins to the padding edge,
   and the padding strip under it let rows show through below the buttons */
.sheet{padding-bottom:0}
.sheet__actions{margin:1rem -1.05rem 0;padding:.85rem 1.05rem calc(1rem + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(246,241,234,.88),var(--cream) 30%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);gap:.6rem}
.btn{font-family:var(--ui);font-weight:800;border-radius:999px;min-height:52px;transition:transform .16s var(--out),background-color .2s ease}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--latik);color:#1a1023;box-shadow:inset 0 -2px 0 rgba(26,16,35,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--secondary{background:transparent;border:1.5px solid rgba(45,27,78,.28);color:var(--block)}
#sheetAdd{flex:1.6}

/* ---------- Install guide ---------- */
.howto__icon{border:0;border-radius:50%;background:var(--block);color:var(--latik)}
.howto__steps li{font-size:15.5px}
.howto__go{font-family:var(--ui);font-weight:800;box-shadow:inset 0 -2px 0 rgba(26,16,35,.18)}
.howto__close{font-family:var(--ui);font-weight:800;border-radius:999px;background:transparent;border:1.5px solid rgba(45,27,78,.28)}

/* =====================================================================
   History: the week as a strip of bars, then the chosen day.
   ===================================================================== */
#view-history > .panel{padding:1rem .8rem .8rem!important;border:0;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--ube-lift),#26163f 70%);box-shadow:inset 0 0 0 1px rgba(246,241,234,.1),0 30px 50px -34px rgba(0,0,0,.9)}
.week{gap:.3rem}
.wday{border-radius:16px;padding:.45rem .1rem;transition:background-color .2s ease}
.wday small{color:#cbbbe0;font-weight:800}
.wday__col{height:84px;border:0;border-radius:10px;background:rgba(246,241,234,.1)}
.wday__fill{background:linear-gradient(0deg,var(--latik-deep),var(--latik));border-radius:10px 10px 0 0;transition:height .8s var(--expo)}
.wday b{color:var(--cream);font-family:var(--big);font-weight:900;font-size:1.05rem}
.wday[aria-pressed='true']{background:rgba(240,180,41,.16)}
.wday[aria-pressed='true'] small{color:var(--latik)}
.stats{gap:.55rem}
.stat{border:0;border-radius:22px;background:var(--cream);box-shadow:0 22px 40px -30px rgba(0,0,0,.9)}
.stat b{font-family:var(--big);font-weight:900;font-size:2.4rem;line-height:.95;color:var(--block);letter-spacing:0}
.stat small{font-size:11.5px;color:#57496a;line-height:1.25;display:block}
#histList > h2{margin:1.5rem 0 .8rem;font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:2rem;line-height:.95;color:var(--cream)}
#histList > div{display:grid;gap:.8rem}

/* Meal trays in both lists */
.tray{border:0;border-radius:var(--r-lg);background:var(--cream);box-shadow:0 26px 44px -34px rgba(0,0,0,.9)}
.tray__rail{background:#ebe2d4;border-bottom:0;padding:.7rem 1rem}
.tray__rail .label{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--block)}
.tray__rail b{font-family:var(--big);font-weight:900;font-size:1.25rem;color:var(--block)}
.tray__body > * + *{border-top:1px dashed rgba(26,16,35,.14)}

/* =====================================================================
   Profile: targets first, the form in a card, the housekeeping list last.
   ===================================================================== */
.card-pad{padding:1.1rem 1.05rem 1.2rem;border-radius:var(--r-lg);background:rgba(246,241,234,.06);box-shadow:inset 0 0 0 1px rgba(246,241,234,.12)}
.card-pad h2{font-family:var(--big);font-weight:900;text-transform:uppercase;font-size:2rem;line-height:.95;color:var(--latik);margin-bottom:.4rem}
.card-pad > p.lede{font-size:15.5px;color:#d9cce9}
.targets{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-bottom:1.1rem}
.targets .rmacro{border:0!important;border-radius:18px;background:var(--cream);padding:.75rem .3rem .65rem}
.targets .rmacro b{font-family:var(--big);font-weight:900;font-size:1.7rem;color:var(--block);font-variant-numeric:normal}
.targets .rmacro small{color:#57496a}
.tdetail{margin:0 0 1.2rem}
.tdetail div{border-bottom:1px dashed rgba(246,241,234,.16)}
.tdetail dt{color:#cbbbe0}
.tdetail dd{font-weight:800;font-variant-numeric:normal}
.profmsg{border-left:0;border-radius:16px;background:rgba(240,180,41,.14);box-shadow:inset 0 0 0 1px rgba(240,180,41,.4)}
#profForm .field label{font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--cream)}
#profForm input,#profForm select{min-height:52px;border:0;border-radius:16px;background:var(--cream);box-shadow:inset 0 2px 5px rgba(26,16,35,.12);font-weight:700;font-size:16px}
#profForm select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;
  background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232d1b4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 1rem center/16px no-repeat;text-overflow:ellipsis}
#profForm input:focus,#profForm select:focus{outline:none;box-shadow:0 0 0 3px var(--latik)}
#profForm .field__hint{color:#cbbbe0}
#profForm .btn--primary{margin-top:.4rem}
.stack{margin-top:1.2rem;border-top:0;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);box-shadow:0 26px 44px -34px rgba(0,0,0,.9)}
.rowlink{padding:.8rem 1.05rem;border-bottom:1px dashed rgba(26,16,35,.12);color:#1a1023;font-size:15px;font-weight:800;transition:background-color .2s ease}
.rowlink:last-child{border-bottom:0}
.rowlink small{color:#57496a;font-weight:500;font-size:13px}
.rowlink svg{color:var(--block)}
.rowlink--danger,.rowlink--danger svg{color:#a3341a}
@media (hover:hover) and (pointer:fine){.rowlink:hover{background:#efe6d9}}
.rowlink:active{background:#e9dfd0}
.appfoot{border-top:0}
.appfoot p{font-size:14px;color:#cbbbe0}

.teach .btn{background:var(--block);color:var(--cream);border:0;min-height:46px;padding:0 1.4rem}

/* Number boxes without the desktop spinner arrows; phones use their keypad */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Link from the install sheet to the illustrated steps on start.html */
.howto__more{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;font-weight:800;color:var(--block);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}