/* Coil & Clutch styles.
   COLORS LIVE HERE. Change a value in this block and the whole site follows.
   Palette is taken from the charcoal and copper logo. */
:root {
  --charcoal: #171818;      /* logo charcoal: primary buttons, summary tiles */
  --cream: #fcf7ea;         /* logo cream: text on charcoal */
  --paper: #fbf6e9;         /* page background */
  --card: #fffdf7;          /* cards and panels */
  --tint: #f0e6d0;          /* soft sand: detail fact bar, tags */
  --sand: #ece2cb;          /* secondary buttons */
  --line: #e4dac5;          /* borders and dividers */
  --ink: #171818;           /* body text */
  --muted: #6a6158;         /* secondary text */
  --copper: #b45f2b;        /* logo copper: borders, focus rings (too light for small text) */
  --copper-deep: #93491c;   /* copper for text and hover, passes contrast on cream */
  --copper-soft: #ce8b60;   /* light copper: labels on charcoal, card hover border */
  --alert: #a3261c;         /* warnings: feeding due, refusals. Kept red so it never reads as decoration */
  --alert-bg: #f8e1d8;
  --alert-tag-bg: #f3d3cc;
  --alert-tag-text: #8f1f16;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; }
header, main { max-width: 1080px; margin: auto; }
header { padding: 42px 24px 25px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.05em; margin-bottom: 0; }
.brand-name { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 2.9rem); letter-spacing: .03em; }
.brand-name .amp { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; color: var(--copper-deep); }
.brand-mark { flex: none; }
/* keeper's own business name and logo, under the app name */
.keeper { display: flex; width: 100%; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 700 1.25rem Georgia, serif; text-align: left; cursor: pointer; }
.keeper.hidden { display: none; }
.keeper:hover span { color: var(--copper-deep); }
.keeper img, .keeper .initials { width: 44px; height: 44px; flex: none; }
.keeper img { object-fit: contain; }
.initials { border-radius: 50%; background: var(--sand); border: 1px solid var(--copper-soft); color: var(--copper-deep); display: flex; align-items: center; justify-content: center; font: 700 .85rem Georgia, serif; }
.keeper-logo-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.keeper-logo-box { width: 84px; height: 84px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.keeper-logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.keeper-logo-box .initials { width: 56px; height: 56px; font-size: 1rem; }
.keeper-logo-row .pattern { margin: 6px 0 0; }
.file-btn { display: inline-flex; align-items: center; font: 600 .9rem system-ui; border-radius: 8px; padding: 11px 15px; cursor: pointer; color: var(--ink); }
#keeper-form label.check { display: flex; align-items: center; gap: 10px; font: 400 .95rem system-ui; color: var(--ink); margin: 14px 0; }
#keeper-form label.check input { width: 20px; height: 20px; accent-color: var(--copper-deep); }
.keeper-preview { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 14px 16px; }
.keeper-preview .keeper { cursor: default; font-size: 1.05rem; }
.keeper-preview .keeper img, .keeper-preview .keeper .initials { width: 32px; height: 32px; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font: 700 .7rem system-ui; color: var(--copper-deep); margin-bottom: 8px; }

/* buttons */
button { font: 600 .9rem system-ui; border: 0; border-radius: 8px; padding: 11px 15px; cursor: pointer; }
.primary { background: var(--charcoal); color: var(--cream); }
.primary:hover { background: var(--copper-deep); color: #fff; }
.secondary { background: var(--sand); color: var(--ink); }
.secondary:hover { background: var(--tint); }
.icon { background: transparent; color: var(--ink); font-size: 1.6rem; padding: 0; }
:is(button, input, select, textarea, a, summary):focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* summary tiles: the one bold element on the page */
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 24px; }
.summary article { background: var(--charcoal); color: var(--cream); border-radius: 13px; padding: 19px; }
.summary span { display: block; font-size: 2rem; font-weight: bold; }
.summary small { font: 600 .78rem system-ui; text-transform: uppercase; letter-spacing: .08em; color: var(--copper-soft); }

/* sections and search */
.collection { padding: 44px 24px; }
.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.section-head h2 { margin: 0 0 6px; font-size: 1.55rem; }
.section-head p { color: var(--muted); margin: 0; }
.search { background: #fff; border: 1px solid var(--line); padding: 9px 12px; border-radius: 8px; color: var(--muted); font-family: system-ui; display: flex; align-items: center; gap: 8px; }
.search input { border: 0; outline: 0; font: inherit; width: 180px; }

/* animal and pairing cards */
.snake-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.snake-card { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 19px; text-align: left; min-height: 165px; transition: .15s; color: var(--ink); }
.snake-card:hover { transform: translateY(-2px); border-color: var(--copper-soft); }
.snake-card h3 { font-size: 1.45rem; margin: 0 0 3px; }
.snake-card .morph { color: var(--copper-deep); font: 600 .82rem system-ui; margin: 0 0 21px; }
.card-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font: .78rem system-ui; }
.due { color: var(--alert); font-weight: bold; }
.empty { border: 1px dashed #cbbd9c; border-radius: 13px; padding: 48px; text-align: center; background: var(--card); }
.hidden { display: none; }
#pairs { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#pairs .card-footer { flex-wrap: wrap; gap: 4px 12px; }
#pairs .card-footer span:last-child { white-space: nowrap; margin-left: auto; }

/* feeding watch and alerts */
.insights { margin: 14px 24px 8px; padding: 16px 19px; border-radius: 13px; background: var(--alert-bg); border-left: 4px solid var(--alert); font: .88rem/1.5 system-ui; }
.insights h3 { margin: 0 0 6px; font: 700 .95rem system-ui; }
.insights p { margin: 0; }
/* today checklist for daily feeders */
.today { margin: 14px 24px 8px; padding: 16px 19px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); font: .88rem/1.5 system-ui; }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.today-head h3 { margin: 0 0 8px; font: 700 .95rem system-ui; }
.today-head span { color: var(--muted); font-size: .8rem; }
.today-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; }
.today-list label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; cursor: pointer; font: .9rem/1.4 system-ui; color: var(--ink); text-transform: none; letter-spacing: 0; }
.today-list b { font-size: .95rem; color: var(--ink); }
.today-list input { accent-color: var(--copper); width: 17px; height: 17px; align-self: center; }
.today-list small { color: var(--muted); font-size: .8rem; }
.today-list small.due { color: var(--alert); }
.today-list li.done b { color: var(--muted); text-decoration: line-through; }
.today .pattern { margin: 8px 0 0; }
.alert { background: var(--alert-bg); border-left: 4px solid var(--alert); border-radius: 10px; padding: 12px 14px; font: .85rem/1.5 system-ui; margin: 10px 0; }
.pattern { font: .85rem/1.5 system-ui; color: var(--muted); margin: 10px 0; }

/* dialogs and forms */
dialog { border: 0; border-radius: 15px; padding: 0; width: min(640px, calc(100% - 28px)); box-shadow: 0 18px 55px #17181855; background: var(--card); color: var(--ink); }
dialog::backdrop { background: #171818aa; }
dialog form, #detail-content, #pair-content, #abbr-content { padding: 25px; }
#abbr-content form { padding: 0; }
.morph-read { font: 400 .78rem/1.4 system-ui; color: var(--muted); }
/* Dialogs: never scroll sideways, and scroll up and down only if the screen is short */
dialog { overflow-x: hidden; max-height: calc(100dvh - 28px); overflow-y: auto; }
#pair-dialog, #animal-dialog { width: min(760px, calc(100% - 28px)); }
/* Let form columns shrink so long dropdown entries (animal name, type, morph) are trimmed, not pushed past the edge */
.form-grid > label { min-width: 0; }
.form-grid :is(input, select, textarea) { width: 100%; min-width: 0; text-overflow: ellipsis; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.modal-head h2 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: 6px; font: 600 .77rem system-ui; color: var(--muted); }
input, select, textarea { font: 1rem system-ui; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 9px; background: #fff; }
textarea { resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }

/* animal and pairing detail */
.detail-top { display: flex; justify-content: space-between; gap: 15px; }
.detail-top h2 { font-size: 2rem; margin-bottom: 4px; }
.detail-top p { color: var(--copper-deep); font: 600 .88rem system-ui; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--tint); border-radius: 10px; margin: 20px 0; }
.facts div { padding: 13px; }
.facts b { display: block; font: .7rem system-ui; text-transform: uppercase; color: var(--muted); letter-spacing: .07em; margin-bottom: 5px; }
.record-section { margin-top: 25px; }
.record-section h3 { margin-bottom: 10px; }
.event-list { list-style: none; padding: 0; margin: 0; }
.event-list li { border-top: 1px solid var(--line); padding: 11px 0; font: .9rem system-ui; display: flex; justify-content: space-between; gap: 10px; }
.event-list li .icon { font-size: 1.2rem; color: var(--muted); }
.event-list small { color: var(--muted); display: block; margin-top: 3px; }
.tag { display: inline-block; font: 700 .7rem system-ui; padding: 2px 7px; border-radius: 99px; background: var(--tint); color: var(--copper-deep); margin-right: 6px; }
.tag.bad { background: var(--alert-tag-bg); color: var(--alert-tag-text); }
.quick-form { display: flex; gap: 8px; flex-wrap: wrap; background: #f6efdd; padding: 12px; border-radius: 10px; }
.quick-form input, .quick-form select { flex: 1; min-width: 110px; }
.detail-actions { margin-top: 23px; display: flex; justify-content: space-between; }
.clutch { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 12px; background: var(--paper); }
details summary { cursor: pointer; font: 600 .9rem system-ui; }
details label { margin: 6px 0; }

@media (max-width: 550px) {
  header { padding-top: 25px; }
  .summary { gap: 8px; padding: 0 16px; }
  .summary article { padding: 12px; }
  .summary span { font-size: 1.5rem; }
  .summary small { font-size: .62rem; letter-spacing: .05em; }
  .insights, .today { margin-left: 16px; margin-right: 16px; }
  .section-head { align-items: start; flex-direction: column; }
  .form-grid, .facts { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .search { width: 100%; }
  .search input { flex: 1; width: auto; min-width: 0; }
}

/* colonies (isopods) */
.form-grid .hidden { display: none; }
.quick-form label.inline-check { display: flex; align-items: center; gap: 6px; font: 400 .85rem system-ui; color: var(--ink); }
.quick-form label.inline-check input { flex: none; min-width: 0; width: 18px; height: 18px; accent-color: var(--copper-deep); }
.tag.good { background: #dfe9d6; color: #34502a; }
.linkish { background: none; border: 0; padding: 0; color: var(--copper-deep); text-decoration: underline; font: inherit; cursor: pointer; }

/* species dropdown beside search */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.species-pick select { height: 100%; min-height: 44px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: 600 .9rem system-ui; color: var(--ink); }
.species-pick.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 680px) { .filters { width: 100%; } .species-pick, .species-pick select { width: 100%; } }

/* tarantulas */
.size-row { display: flex; gap: 8px; }
.size-row input { flex: 1; }
.size-row select { width: auto !important; flex: none; }
.size-row .hidden { display: none; }
.tag.molt { background: #e3dcef; color: #4a3570; }
.safety { background: #f3ead2; border-radius: 10px; padding: 10px 14px; font: .85rem/1.5 system-ui; margin: 10px 0; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

/* supplements & UVB */
.tag.supp { background: #e6eedb; color: #3d5527; }
.tag.uvb { background: #f6e6c6; color: #7a4a10; }
.quick-form label.months-field { display: flex; align-items: center; gap: 6px; font: 400 .85rem system-ui; color: var(--ink); white-space: nowrap; }
.quick-form label.months-field input { flex: none; width: 64px; min-width: 0; }

/* Settings dialog */
#settings-dialog { width: min(560px, calc(100% - 28px)); }
.settings-body { padding: 25px; }
.setting-row { display: grid; justify-items: start; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.setting-name { font: 700 .95rem system-ui; color: var(--ink); }
.setting-help { margin: 0; color: var(--muted); font: .82rem/1.5 system-ui; }
#settings-dialog select { padding: 9px 10px; min-width: 160px; }

.breeding-hint { margin: 0; padding: 0 24px 40px; color: var(--muted); font: .85rem/1.5 system-ui; }

/* ---------- species icons on cards ---------- */
.snake-card { position: relative; }
.snake-card h3 { padding-right: 46px; }
.card-icon { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--copper-deep); transition: background .15s, color .15s; }
.card-icon .sp-icon { width: 22px; height: 22px; }
.snake-card:hover .card-icon { background: var(--charcoal); color: var(--copper-soft); }

/* ---------- Coming up strip ---------- */
.upcoming { margin: 14px 24px 8px; padding: 16px 19px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); font: .88rem/1.5 system-ui; }
.upcoming .pattern { margin: 0; }
.up-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.up-head h3 { margin: 0; font: 700 .95rem system-ui; }
.link { background: none; padding: 0; color: var(--copper-deep); font: 600 .8rem system-ui; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }
.up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.up-chip { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; color: var(--ink); transition: border-color .15s, transform .15s; }
.up-chip:hover { border-color: var(--copper-soft); transform: translateY(-1px); }
.up-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--copper-deep); }
.up-icon .sp-icon { width: 19px; height: 19px; }
.up-text { display: grid; min-width: 0; }
.up-text b { font: 700 .86rem/1.3 system-ui; overflow-wrap: anywhere; }
.up-text small { font: .78rem/1.3 system-ui; color: var(--muted); }
.up-chip.late { border-color: #e0b3a7; background: var(--alert-bg); }
.up-chip.late .up-icon { background: var(--alert-tag-bg); color: var(--alert-tag-text); }
.up-chip.late small { color: var(--alert-tag-text); font-weight: 600; }

/* ---------- weight trend ---------- */
.trend { margin: 4px 0 12px; padding: 10px 12px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.trend svg { display: block; width: 100%; height: 72px; overflow: visible; }
.trend-area { fill: var(--copper); opacity: .12; }
.trend-line { fill: none; stroke: var(--copper-deep); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend-dot { fill: var(--card); stroke: var(--copper-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend p { margin: 6px 0 0; font: .8rem/1.4 system-ui; color: var(--muted); }
.trend p b { color: var(--ink); }
.trend p .down { color: var(--alert); }

/* ---------- finishing touches: depth, warmth, a little life ---------- */
body { background-image: radial-gradient(ellipse 900px 380px at 50% -60px, #f3e0c4 0%, rgba(243, 224, 196, 0) 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 4c9 0 15 6 15 15s-6 15-15 15S8 28 8 19 14 4 23 4z' fill='none' stroke='%2393491c' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-attachment: scroll; }
.summary article { background: linear-gradient(160deg, #232424 0%, var(--charcoal) 60%); border-top: 2px solid var(--copper); box-shadow: 0 6px 16px -10px #171818; }
.snake-card { box-shadow: 0 1px 0 #fff inset, 0 2px 8px -6px #17181866; }
.snake-card:hover { box-shadow: 0 10px 22px -14px #171818aa; }
.today, .upcoming { box-shadow: 0 2px 8px -7px #17181866; }
@media (prefers-reduced-motion: reduce) { .snake-card, .up-chip, .card-icon { transition: none; } .snake-card:hover, .up-chip:hover { transform: none; } }
@media (max-width: 550px) { .upcoming { margin-left: 16px; margin-right: 16px; } .up-list { grid-template-columns: 1fr; } }

.feed-older { display: block; margin: 10px 0 2px; }

/* folding sections on the animal page */
.fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 2px 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--copper-deep); border-bottom: 2px solid var(--copper-deep); transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary h3 { margin: 0; }
.fold > summary small { color: var(--muted); font: .8rem system-ui; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold > summary small.fold-flag { color: var(--alert); font-weight: 700; }
.fold[open] > summary { margin-bottom: 12px; }
.fold { border-top: 1px solid var(--line); padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }

/* footer */
.site-foot { max-width: 1080px; margin: 0 auto; padding: 8px 24px 44px; text-align: center; color: var(--muted); font: .85rem/1.5 system-ui; }
.site-foot p { margin: 0; }
.site-foot a { color: var(--copper-deep); font-weight: 600; text-underline-offset: 3px; }
.site-foot a:hover { color: var(--ink); }