/* Attic skin — loaded AFTER each app's own stylesheet so it wins on conflicts.
   ---------------------------------------------------------------------------
   These nine pages were written in 2021 against a course template, so they
   share class names (.section-center, .btn, .form-control …). That is what
   makes one skin viable: it restyles the shared vocabulary rather than each app
   individually, and touches layout as little as possible — the originals still
   position their own content, this only changes how it looks.

   Deliberately NOT touched: anything positioned absolutely, any canvas, and any
   element whose geometry the app animates. Restyling those breaks the thing the
   page exists to show.
--------------------------------------------------------------------------- */
:root{
  --at-bg:#fbfbfd; --at-raised:#fff; --at-sunken:#f2f2f5;
  --at-ink:#1d1d1f; --at-ink2:#48484a; --at-ink3:#86868b;
  --at-hair:rgba(0,0,0,.10); --at-hair-soft:rgba(0,0,0,.06);
  --at-accent:#0b66c3; --at-accent-ink:#fff;
  --at-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --at-radius:16px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{
  --at-bg:#000; --at-raised:#1c1c1e; --at-sunken:#151517;
  --at-ink:#f5f5f7; --at-ink2:#c7c7cc; --at-ink3:#8e8e93;
  --at-hair:rgba(255,255,255,.15); --at-hair-soft:rgba(255,255,255,.08);
  --at-accent:#4ea3ff; --at-accent-ink:#00131f;
  color-scheme:dark;
}}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--at-bg)!important;
  color:var(--at-ink)!important;
  font-family:var(--at-sans)!important;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:46px;              /* room for the back bar */
}

/* --------------------------------------------------------------- back bar -- */
.at-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;height:46px;
  display:flex;align-items:center;gap:12px;
  padding:0 clamp(14px,4vw,24px);
  background:color-mix(in srgb,var(--at-bg) 76%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--at-hair-soft);
  font-family:var(--at-sans);
}
.at-bar a{color:var(--at-ink2);text-decoration:none;font-size:.88rem;margin-right:auto}
.at-bar a:hover{color:var(--at-ink)}
.at-bar .at-era{
  font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--at-ink3);border:1px solid var(--at-hair);padding:3px 9px;border-radius:980px;
}

/* ----------------------------------------------------------------- type ---- */
h1,h2,h3,h4,h5{
  font-family:var(--at-sans)!important;
  color:var(--at-ink)!important;
  letter-spacing:-.024em;
  line-height:1.12;
  font-weight:620;
  text-transform:none!important;   /* the template shouted in small-caps */
}
h1{font-size:clamp(1.9rem,5vw,2.6rem)}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
p,li,label,span,article{font-family:var(--at-sans)}
p{color:var(--at-ink2);line-height:1.65}
a{color:var(--at-accent)}

/* --------------------------------------------------------------- surface -- */
/* The course template centres everything in .section-center; giving it a real
   card is the single change that makes the most of these pages look designed. */
.section-center{
  background:var(--at-raised)!important;
  border:1px solid var(--at-hair-soft);
  border-radius:var(--at-radius);
  box-shadow:0 14px 44px -26px rgba(0,0,0,.28);
  padding:clamp(22px,4vw,36px)!important;
  max-width:min(640px,92vw)!important;
  margin:clamp(26px,6vw,56px) auto!important;
  width:auto!important;
}

/* ---------------------------------------------------------------- forms --- */
input[type=text],input[type=number],input[type=email],input[type=search],select,textarea{
  font-family:var(--at-sans)!important;
  font-size:1rem!important;
  color:var(--at-ink)!important;
  background:var(--at-sunken)!important;
  border:1px solid var(--at-hair)!important;
  border-radius:11px!important;
  padding:11px 14px!important;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--at-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--at-accent) 22%,transparent);
}
::placeholder{color:var(--at-ink3);opacity:1}

button,.btn,.submit-btn,.clear-btn,input[type=submit]{
  font-family:var(--at-sans)!important;
  font-size:.93rem!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  border-radius:980px!important;
  border:1px solid var(--at-ink)!important;
  background:var(--at-ink)!important;
  color:var(--at-bg)!important;
  padding:10px 20px!important;
  cursor:pointer;
  transition:opacity .18s ease,transform .18s ease;
}
button:hover,.btn:hover,.submit-btn:hover,.clear-btn:hover{
  opacity:.86;transform:translateY(-1px);
}
button:active{transform:translateY(0)}

/* "Clear" is destructive and secondary; it should not look like the primary. */
.clear-btn{
  background:transparent!important;
  color:var(--at-ink2)!important;
  border-color:var(--at-hair)!important;
}
.clear-btn:hover{background:var(--at-hair-soft)!important;color:var(--at-ink)!important}

.form-control{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-control input{flex:1 1 180px;min-width:0}

/* ---------------------------------------------------------------- lists --- */
.task-list,.grocery-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.task,.grocery-item{
  display:flex;align-items:center;gap:12px;
  background:var(--at-sunken);
  border:1px solid var(--at-hair-soft);
  border-radius:12px;
  padding:11px 14px!important;
  margin:0!important;
  transition:border-color .18s ease;
}
.task:hover,.grocery-item:hover{border-color:var(--at-hair)}
.task p,.grocery-item p,.title{margin:0!important;color:var(--at-ink)!important;font-size:.96rem}
.edit-btn,.delete-btn{
  background:transparent!important;border:0!important;
  padding:6px!important;cursor:pointer;font-size:.95rem;
}
.edit-btn{color:var(--at-accent)!important}
.delete-btn{color:#d1495b!important}
@media(prefers-color-scheme:dark){.delete-btn{color:#ff7b8a!important}}

.alert{
  border-radius:10px;padding:8px 12px;font-size:.86rem;margin-bottom:12px!important;
  text-align:center;
}
.alert-danger{background:color-mix(in srgb,#d1495b 15%,transparent);color:#b23842}
.alert-success{background:color-mix(in srgb,#23784f 15%,transparent);color:#23784f}
@media(prefers-color-scheme:dark){
  .alert-danger{color:#ff8a95}.alert-success{color:#41c98a}
}

/* -------------------------------------------------------------- imagery --- */
img{border-radius:12px}
.at-bar img{border-radius:0}

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

/* --------------------------------------------------- 2021 habits, undone -- */

/* Underlined, italic headings were the house style of every tutorial that year.
   They are the single thing that most dates these pages, and unlike layout they
   can be reset with no risk of moving anything. */
h1,h2,h3,h4,h5{
  text-decoration:none!important;
  font-style:normal!important;
  text-shadow:none!important;
}

/* Most of these pages have exactly one <h1> loose in the body with no wrapper
   to centre it. */
body>h1{
  text-align:center;
  margin:clamp(26px,5vw,40px) auto clamp(18px,3vw,26px);
  max-width:min(760px,90vw);
}

/* Relaxer's label sits on a near-black disc and was mid-grey, which is close to
   unreadable. The disc is the app's own look and stays; the text on it does not. */
#text{
  color:#fff!important;
  font-size:1.05rem!important;
  letter-spacing:.01em;
  font-weight:500;
}

/* The memory game's score line is a loose bold-italic string under the grid. */
.score,#score{
  display:block;text-align:center;font-size:1rem!important;
  font-style:normal!important;color:var(--at-ink2)!important;
  margin-top:18px!important;
}

/* Countdown tiles: the template gave them a flat coloured block. */
.deadline-format div{
  background:var(--at-sunken)!important;
  border:1px solid var(--at-hair-soft);
  border-radius:12px;
  padding:12px 8px!important;
  min-width:76px;
}
.deadline-format h4{font-size:1.5rem!important;margin:0 0 2px!important}
.deadline-format span{font-size:.74rem;color:var(--at-ink3);letter-spacing:.06em;text-transform:uppercase}
.deadline{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px!important}