/* Bramble Lane Pharmacy · template pieces on top of Pebble (../../styles/pebble/template/css/pebble.css).
   Inline links, the pill and texts in the bento, promises, service cards, the send-a-script form,
   the drawn map, hours and the footer. Everything uses Pebble's tokens. */

a.inline { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
a.inline:hover { text-decoration-color: var(--ink); }
.mini-pill { position: relative; width: 30px; height: 16px; border-radius: 99px; flex: none; background: linear-gradient(90deg, var(--blush) 50%, var(--surface) 50%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 4px rgba(20, 47, 54, 0.16), 0 2px 4px -1px var(--glow); transform: rotate(-24deg); }
.sms-stack { display: grid; gap: 8px; min-height: 108px; align-content: end; }
.sms { position: relative; justify-self: start; max-width: 100%; padding: 12px 16px; border-radius: 22px 22px 22px 8px; background: var(--surface); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); box-shadow: var(--shadow-clay); }
.sms-none { background: var(--sunk); box-shadow: var(--shadow-sunk); color: var(--muted); }
.js:not(.calm) .sms.in { animation: ph-pop 0.55s var(--spring); }
@keyframes ph-pop { from { transform: scale(0.85) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-sample { font-size: var(--fs-tiny); font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }

/* clay icon pebble */
.ph-ic { width: 54px; height: 50px; border-radius: 50% 50% 46% 54% / 56% 50% 50% 44%; display: grid; place-items: center; background: var(--c); color: var(--on-pastel); box-shadow: inset 0 3px 2px rgba(255, 255, 255, 0.6), inset 0 -6px 10px -4px rgba(20, 47, 54, 0.22), 0 8px 14px -8px var(--glow); flex: none; }
.ph-ic .ic { width: 24px; height: 24px; }

/* promises (no testimonials: AHPRA) */
.ph-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ph-promises li { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-clay); }
.ph-promises h3 { font: 600 20px/1.2 var(--display); }
.ph-promises p { color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 980px) { .ph-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ph-promises { grid-template-columns: 1fr; } }

/* services */
.ph-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ph-svc { gap: 14px; scroll-margin-top: 110px; }
.ph-svc .h3 { font: 600 26px/1.15 var(--display); }
.ph-svc p { color: var(--ink-2); }
.ph-svc .ph-fee { margin-top: auto; justify-self: start; display: inline-flex; padding: 8px 14px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sunk); font-weight: 700; font-size: var(--fs-small); color: var(--ink); align-self: flex-start; }
@media (max-width: 980px) { .ph-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ph-svcs { grid-template-columns: 1fr; } }

/* send a script */
.ph-send-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: start; }
.ph-send { display: grid; gap: 20px; padding: clamp(22px, 4vw, 40px); border-radius: 36px; background: var(--surface); box-shadow: var(--shadow-clay); }
.ph-send .choices { grid-template-columns: 1fr; }
.ph-note { font-size: var(--fs-small); color: var(--muted); }
.ph-done { position: sticky; top: 110px; gap: 14px; }
.ph-done:focus { outline: none; }
@media (max-width: 900px) { .ph-send-wrap { grid-template-columns: 1fr; } .ph-done { position: static; } }

/* visit: drawn map, hours, message */
.ph-visit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: start; }
.ph-visit-side { display: grid; gap: 24px; }
.ph-map { padding: 16px; }
.ph-map svg { width: 100%; height: auto; }
.ph-road { fill: none; stroke: var(--sunk); stroke-width: 26; stroke-linecap: round; }
.ph-road.thin { stroke-width: 16; }
.ph-blk { fill: var(--c, var(--tray)); stroke: none; }
.ph-blk.me { fill: var(--bold); }
.ph-map text { font: 700 12px var(--body); fill: var(--ink-2); text-anchor: middle; }
.ph-map text.me { fill: var(--on-bold); }
.ph-map text.st { text-anchor: start; font-weight: 600; fill: var(--muted); font-size: 11px; }
.ph-msg { gap: 16px; }
.ph-msg:hover, .ph-map:hover, .ph-done:hover { transform: none; }
tr.today td { font-weight: 800; }
tr.today td:first-child::after { content: " · today"; color: var(--muted); font-weight: 600; }
@media (max-width: 900px) { .ph-visit { grid-template-columns: 1fr; } }

/* footer */
.ph-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ph-foot h2 { font: 600 18px/1.2 var(--display); margin-bottom: 10px; }
.ph-foot p, .ph-foot li { color: var(--ink-2); font-size: var(--fs-small); }
.ph-foot p + p { margin-top: 8px; }
.ph-foot a { color: var(--ink); }
.ph-hours, .ph-links { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.ph-hours li { display: flex; justify-content: space-between; gap: 10px; }
.ph-hours li.today { font-weight: 800; color: var(--ink); }
.ph-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; padding-top: 22px; border-top: 2px dashed var(--line); }
.ph-sos { display: flex; gap: 12px; align-items: center; font-size: var(--fs-small); color: var(--ink-2); max-width: 64ch; }
.ph-sos a { color: var(--ink); font-weight: 700; }
.ph-sos-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blush); color: var(--on-pastel); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.6), 0 6px 10px -6px var(--glow); }
.ph-sos-ic .ic { width: 20px; height: 20px; }
@media (max-width: 860px) { .ph-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ph-foot { grid-template-columns: 1fr; } }