Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493/* ======================================== utilities.css — Utility Classes ======================================== Every Tailwind utility class in use, hand-written as plain CSS. ======================================== */
/* ── Section 1: Display & Layout ── */
/* Display */.block { display: block;}.inline-block { display: inline-block;}
.flex { display: flex;}.inline-flex { display: inline-flex;}.grid { display: grid;}.hidden { display: none;}
/* Flex direction */
.flex-col { flex-direction: column;}
/* Flex wrap */.flex-wrap { flex-wrap: wrap;}
/* Flex */.flex-1 { flex: 1 1 0%;}.grow { flex-grow: 1;}.flex-shrink-0 { flex-shrink: 0;}.shrink-0 { flex-shrink: 0;}
/* Align items */.items-start { align-items: flex-start;}.items-center { align-items: center;}.items-end { align-items: flex-end;}.items-baseline { align-items: baseline;}
/* Justify content */
.justify-center { justify-content: center;}.justify-end { justify-content: flex-end;}.justify-between { justify-content: space-between;}
/* Self */.self-start { align-self: flex-start;}
/* Grid */.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr));}.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr));}.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}
.col-span-2 { grid-column: span 2 / span 2;}
/* ── Section 2: Spacing (ScaleUtility) ── */
/* Margin — all sides */.m-0 { margin: 0;}.mx-auto { margin-left: auto; margin-right: auto;}.mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem;}.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem;}
.mt-0 { margin-top: 0;}.mt-0\.5 { margin-top: 0.125rem;}.mt-1 { margin-top: 0.25rem;}.mt-2 { margin-top: 0.5rem;}.mt-3 { margin-top: 0.75rem;}.mt-4 { margin-top: 1rem;}.mt-5 { margin-top: 1.25rem;}.mt-6 { margin-top: 1.5rem;}.mt-8 { margin-top: 2rem;}.mt-12 { margin-top: 3rem;}.mt-auto { margin-top: auto;}
.mr-1 { margin-right: 0.25rem;}
.mb-0 { margin-bottom: 0;}.mb-1 { margin-bottom: 0.25rem;}.mb-1\.5 { margin-bottom: 0.375rem;}.mb-2 { margin-bottom: 0.5rem;}.mb-3 { margin-bottom: 0.75rem;}.mb-4 { margin-bottom: 1rem;}.mb-5 { margin-bottom: 1.25rem;}.mb-6 { margin-bottom: 1.5rem;}.mb-8 { margin-bottom: 2rem;}
.ml-1 { margin-left: 0.25rem;}.ml-1\.5 { margin-left: 0.375rem;}.ml-2 { margin-left: 0.5rem;}.ml-3 { margin-left: 0.75rem;}.ml-auto { margin-left: auto;}
/* Padding */.p-0 { padding: 0;}.p-2 { padding: 0.5rem;}.p-3 { padding: 0.75rem;}.p-4 { padding: 1rem;}.p-6 { padding: 1.5rem;}.p-8 { padding: 2rem;}
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem;}.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem;}.px-2 { padding-left: 0.5rem; padding-right: 0.5rem;}.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem;}.px-3 { padding-left: 0.75rem; padding-right: 0.75rem;}.px-4 { padding-left: 1rem; padding-right: 1rem;}.px-5 { padding-left: 1.25rem; padding-right: 1.25rem;}.px-6 { padding-left: 1.5rem; padding-right: 1.5rem;}.px-8 { padding-left: 2rem; padding-right: 2rem;}
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem;}.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem;}.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem;}.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem;}.py-4 { padding-top: 1rem; padding-bottom: 1rem;}.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem;}.py-8 { padding-top: 2rem; padding-bottom: 2rem;}.py-12 { padding-top: 3rem; padding-bottom: 3rem;}
.pt-1 { padding-top: 0.25rem;}.pt-2 { padding-top: 0.5rem;}.pt-3 { padding-top: 0.75rem;}.pt-4 { padding-top: 1rem;}
.pr-2 { padding-right: 0.5rem;}.pl-2 { padding-left: 0.5rem;}.pl-3 { padding-left: 0.75rem;}.pl-11 { padding-left: 2.75rem;}
/* Gap */.gap-1 { gap: 0.25rem;}.gap-1\.5 { gap: 0.375rem;}.gap-2 { gap: 0.5rem;}.gap-3 { gap: 0.75rem;}.gap-4 { gap: 1rem;}.gap-6 { gap: 1.5rem;}.gap-x-2 { column-gap: 0.5rem;}.gap-x-4 { column-gap: 1rem;}.gap-x-6 { column-gap: 1.5rem;}.gap-y-1 { row-gap: 0.25rem;}.gap-y-2 { row-gap: 0.5rem;}
/* Space — lobotomized owl selector */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem;}.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem;}.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem;}.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem;}.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem;}
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem;}.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: -0.375rem;}
/* ── Section 3: Sizing ── */
.h-2 { height: 0.5rem;}.h-3 { height: 0.75rem;}.h-3\.5 { height: 0.875rem;}.h-4 { height: 1rem;}.h-5 { height: 1.25rem;}.h-6 { height: 1.5rem;}.h-7 { height: 1.75rem;}.h-8 { height: 2rem;}.h-10 { height: 2.5rem;}.h-12 { height: 3rem;}.h-16 { height: 4rem;}.h-full { height: 100%;}.h-\[18px\] { height: 18px;}.min-h-full { min-height: 100%;}.max-h-48 { max-height: 12rem;}
.w-2 { width: 0.5rem;}.w-3 { width: 0.75rem;}.w-3\.5 { width: 0.875rem;}.w-4 { width: 1rem;}.w-5 { width: 1.25rem;}.w-6 { width: 1.5rem;}.w-7 { width: 1.75rem;}.w-8 { width: 2rem;}.w-10 { width: 2.5rem;}.w-12 { width: 3rem;}.w-14 { width: 3.5rem;}.w-16 { width: 4rem;}.w-20 { width: 5rem;}.w-24 { width: 6rem;}.w-28 { width: 7rem;}.w-36 { width: 9rem;}.w-52 { width: 13rem;}.w-1\/2 { width: 50%;}.w-1\/3 { width: 33.333333%;}.w-2\/3 { width: 66.666667%;}.w-1\/4 { width: 25%;}.w-3\/4 { width: 75%;}.w-1\/6 { width: 16.666667%;}.w-2\/5 { width: 40%;}.w-3\/5 { width: 60%;}.w-full { width: 100%;}
.min-w-0 { min-width: 0;}.min-w-\[18px\] { min-width: 18px;}.max-w-none { max-width: none;}.max-w-\[200px\] { max-width: 200px;}.max-w-xl { max-width: 36rem;}.max-w-md { max-width: 28rem;}
/* ── Section 4: Typography ── */
/* Font family */.font-sans { font-family: "Iosevka Patrick", system-ui, sans-serif;}.font-mono { font-family: "Iosevka Patrick", ui-monospace, monospace;}
/* Font size */.text-xs { font-size: 0.75rem; line-height: 1rem;}.text-sm { font-size: 0.875rem; line-height: 1.25rem;}.text-base { font-size: 1rem; line-height: 1.5rem;}.text-lg { font-size: 1.125rem; line-height: 1.75rem;}.text-xl { font-size: 1.25rem; line-height: 1.75rem;}.text-2xl { font-size: 1.5rem; line-height: 2rem;}.text-3xl { font-size: 1.875rem; line-height: 2.25rem;}.text-4xl { font-size: 2.25rem; line-height: 2.5rem;}.text-6xl { font-size: 3.75rem; line-height: 1;}.text-\[10px\] { font-size: 10px;}.text-\[0\.9375rem\] { font-size: 0.9375rem;}
/* Font weight */.font-medium { font-weight: 500;}.font-semibold { font-weight: 600;}.font-bold { font-weight: 700;}
/* Letter spacing */.tracking-wide { letter-spacing: 0.025em;}.tracking-wider { letter-spacing: 0.05em;}
/* Line height */.leading-none { line-height: 1;}.leading-relaxed { line-height: 1.625;}
/* Text decoration */.underline { text-decoration-line: underline;}
.italic { font-style: italic;}.uppercase { text-transform: uppercase;}
.underline-offset-2 { text-underline-offset: 2px;}
/* Text alignment */.text-left { text-align: left;}.text-center { text-align: center;}
/* Whitespace */.whitespace-nowrap { white-space: nowrap;}.whitespace-pre-wrap { white-space: pre-wrap;}.break-all { word-break: break-all;}.wrap-break-word { overflow-wrap: break-word;}
/* Truncate */.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* Line clamp */.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
/* ── Section 5: Colors (ColorUtility) ── */
/* --- Brown palette --- The full text-brown-{X} family has been migrated to semantic tokens (text-primary/secondary/emphasis/muted/faint/placeholder in 12-text-utilities.css). A few rare 50/100/300 variants remain for cases where the brown shade IS the intent (e.g. inverse text on dark headers). */.text-brown-50 { color: var(--brand-brown-50);}.text-brown-100 { color: var(--brand-brown-100);}.text-brown-300 { color: var(--brand-brown-300);}
.bg-brown-50 { background-color: var(--brand-brown-50);}.bg-brown-100 { background-color: var(--brand-brown-100);}.bg-brown-200 { background-color: var(--brand-brown-200);}.bg-brown-300 { background-color: var(--brand-brown-300);}
.bg-brown-800 { background-color: var(--brand-brown-800);}
.border-brown-200 { border-color: var(--brand-brown-200);}.border-brown-300 { border-color: var(--brand-brown-300);}
.decoration-brown-400 { text-decoration-color: var(--brand-brown-400);}
.accent-brown-700 { accent-color: var(--brand-brown-700);}
/* Brown opacity variants */.bg-brown-50\/60 { background-color: color-mix(in srgb, var(--brand-brown-50) 60%, transparent);}
.border-brown-200\/60 { border-color: color-mix(in srgb, var(--brand-brown-200) 60%, transparent);}
/* --- Amber palette --- */.text-amber-500 { color: var(--brand-amber-500);}.text-amber-600 { color: var(--brand-amber-600);}.text-amber-700 { color: var(--brand-amber-700);}.text-amber-800 { color: var(--brand-amber-800);}
.bg-amber-50 { background-color: var(--brand-amber-50);}.bg-amber-100 { background-color: var(--brand-amber-100);}
.bg-amber-400 { background-color: var(--brand-amber-400);}
.border-amber-200 { border-color: var(--brand-amber-200);}
/* Amber opacity variants */
/* --- Red palette --- */.text-red-400 { color: var(--brand-red-400);}.text-red-500 { color: var(--brand-red-500);}.text-red-600 { color: var(--brand-red-600);}.text-red-700 { color: var(--brand-red-700);}.text-red-800 { color: var(--brand-red-800);}.text-red-900 { color: var(--brand-red-900);}
.bg-red-50 { background-color: var(--brand-red-50);}.bg-red-100 { background-color: var(--brand-red-100);}
.bg-red-700 { background-color: var(--brand-red-700);}
.border-red-200 { border-color: var(--brand-red-200);}.border-red-300 { border-color: var(--brand-red-300);}
/* --- Green palette --- */.text-green-500 { color: var(--brand-green-500);}.text-green-600 { color: var(--brand-green-600);}.text-green-700 { color: var(--brand-green-700);}.text-green-800 { color: var(--brand-green-800);}
.bg-green-100 { background-color: var(--brand-green-100);}
/* --- Blue palette --- */.text-blue-400 { color: var(--brand-blue-400);}.text-blue-700 { color: var(--brand-blue-700);}.text-blue-800 { color: var(--brand-blue-800);}
.bg-blue-100 { background-color: var(--brand-blue-100);}
/* --- Purple palette --- */.text-purple-700 { color: var(--brand-purple-700);}.text-purple-800 { color: var(--brand-purple-800);}
.bg-purple-100 { background-color: var(--brand-purple-100);}
/* --- Gray palette --- */.text-gray-800 { color: var(--brand-gray-800);}.bg-gray-100 { background-color: var(--brand-gray-100);}
/* --- Utility colors --- */.text-white { color: var(--btn-primary-text);}.bg-white { background-color: var(--card-bg);}.border-white { border-color: var(--btn-primary-text);}
/* --- Gradient (from output.css) --- */.bg-linear-to-br { --tw-gradient-position: to bottom right; background-image: linear-gradient(var(--tw-gradient-stops));}.from-brown-50 { --tw-gradient-from: var(--brand-brown-50); --tw-gradient-stops: var( --tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position) );}.to-brown-100 { --tw-gradient-to: var(--brand-brown-100); --tw-gradient-stops: var( --tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position) );}
/* Orange and yellow (used in oolong/suggestions) */.bg-orange-100 { background-color: #ffedd5;}.text-orange-400 { color: #fb923c;}.text-orange-800 { color: #9a3412;}.bg-yellow-100 { background-color: #fef9c3;}.text-yellow-800 { color: #854d0e;}
/* Semantic color classes */.text-secondary { color: var(--text-secondary);}.text-muted { color: var(--text-muted);}.text-faint { color: var(--text-faint);}.text-danger { color: var(--text-danger);}.text-success { color: var(--text-success);}
/* ── Section 6: Border & Radius ── */
/* Border width */.border { border-width: 1px; border-style: solid;}.border-0 { border-width: 0;}
.border-t { border-top-width: 1px; border-top-style: solid;}.border-b { border-bottom-width: 1px; border-bottom-style: solid;}.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid;}
/* Border radius */.rounded { border-radius: 0.25rem;}.rounded-sm { border-radius: 0.125rem;}.rounded-md { border-radius: 0.375rem;}.rounded-lg { border-radius: 0.5rem;}.rounded-xl { border-radius: 0.75rem;}.rounded-full { border-radius: 9999px;}
/* Ring (simplified — matches Tailwind's ring-2 pattern) */
/* ── Section 7: Effects ── */
/* Shadows — reference SemanticToken */.shadow-xs { box-shadow: var(--shadow-sm);}.shadow-md { box-shadow: var(--shadow-md);}.shadow-lg { box-shadow: var(--shadow-lg);}
/* Opacity */
.opacity-60 { opacity: 0.6;}
/* Transitions */.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}.transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
/* ── Section 8: Positioning ── */
.relative { position: relative;}.absolute { position: absolute;}.fixed { position: fixed;}.sticky { position: sticky;}
/* Z-index */.z-10 { z-index: 10;}.z-50 { z-index: 50;}
/* Top / Right / Bottom / Left */.top-0 { top: 0;}.top-1\/2 { top: 50%;}.-top-1 { top: -0.25rem;}.-right-1 { right: -0.25rem;}
.bottom-6 { bottom: 1.5rem;}.bottom-full { bottom: 100%;}.right-2 { right: 0.5rem;}.right-6 { right: 1.5rem;}
/* Transforms */
.-translate-y-1\/2 { transform: translateY(-50%);}
/* ── Section 9: Overflow & Misc ── */
/* Container */.container { width: 100%;}@media (min-width: 640px) { .container { max-width: 640px; }}@media (min-width: 768px) { .container { max-width: 768px; }}@media (min-width: 1024px) { .container { max-width: 1024px; }}@media (min-width: 1280px) { .container { max-width: 1280px; }}@media (min-width: 1536px) { .container { max-width: 1536px; }}
/* List styles */.list-disc { list-style-type: disc;}.list-decimal { list-style-type: decimal;}.list-inside { list-style-position: inside;}
/* HTMX indicator */.htmx-indicator { display: none;}.htmx-request .htmx-indicator { display: inline;}
/* Animation pulse (defined in components.css with @keyframes) */.animate-pulse { animation: enhanced-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
/* Form checkbox (native-style appearance reset) */.form-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; border: 1px solid var(--input-border); border-radius: 0.25rem; background: var(--input-bg); cursor: pointer; flex-shrink: 0;}.form-checkbox:checked { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23fff'/%3e%3c/svg%3e");}
/* Prose — for rich text content (atproto pages, about, terms) */.prose { max-width: 65ch; color: var(--text-primary); line-height: 1.75;}.prose p { margin-bottom: 1em;}.prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em;}.prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.25em; margin-bottom: 0.5em;}.prose ul,.prose ol { margin: 0.5em 0; padding-left: 1.5em;}.prose li { margin: 0.25em 0;}.prose a { color: var(--text-muted); text-decoration: underline;}.prose a:hover { color: var(--text-primary);}.prose blockquote { border: 1px solid var(--card-border); border-radius: 0.75rem; padding: 1em; margin: 1em 0; background: var(--surface-bg); color: var(--text-secondary);}.prose code { font-family: "Iosevka Patrick", ui-monospace, monospace; font-size: 0.875em; background: var(--surface-bg); padding: 0.2em 0.4em; border-radius: 0.25rem;}.prose pre { background: var(--surface-bg); border: 1px solid var(--card-border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto;}.prose pre code { background: none; padding: 0;}.prose-lg { font-size: 1.0625rem;}.prose-lg p { margin-bottom: 1.25em;}.prose-lg h2 { font-size: 1.375rem;}
/* Cursor */.cursor-pointer { cursor: pointer;}
.overflow-x-auto { overflow-x: auto;}.overflow-y-auto { overflow-y: auto;}
.object-cover { object-fit: cover;}.cursor-pointer { cursor: pointer;}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}
/* ── Section 10: State Variants ── */
/* Hover — colors (brown) */.hover\:bg-brown-50:hover { background-color: var(--brand-brown-50);}.hover\:bg-brown-100:hover { background-color: var(--brand-brown-100);}.hover\:bg-brown-200:hover { background-color: var(--brand-brown-200);}.hover\:bg-brown-400:hover { background-color: var(--brand-brown-400);}.hover\:bg-brown-700:hover { background-color: var(--brand-brown-700);}
/* Semantic hover variants — derive from --text-* tokens so they swap automatically in dark mode without needing an explicit override. */.hover\:text-primary:hover { color: var(--text-primary);}.hover\:text-secondary:hover { color: var(--text-secondary);}.hover\:text-emphasis:hover { color: var(--text-emphasis);}.hover\:text-muted:hover { color: var(--text-muted);}.hover\:text-faint:hover { color: var(--text-faint);}.hover\:text-placeholder:hover { color: var(--text-placeholder);}
/* Brown-palette hover variants kept for the few remaining non-semantic call sites (hover:text-brown-950, etc.). Prefer the semantic variants above. */.hover\:text-brown-950:hover { color: var(--brand-brown-950);}
.hover\:text-white:hover { color: var(--btn-primary-text);}
.hover\:border-brown-400:hover { border-color: var(--brand-brown-400);}.hover\:underline:hover { text-decoration-line: underline;}.hover\:decoration-brown-700:hover { text-decoration-color: var(--brand-brown-700);}
.hover\:opacity-80:hover { opacity: 0.8;}.hover\:opacity-90:hover { opacity: 0.9;}
.hover\:shadow-md:hover { box-shadow: var(--shadow-md);}.hover\:shadow-md:hover { box-shadow: var(--shadow-md);}.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);}
/* Hover — amber */.hover\:text-amber-700:hover { color: var(--brand-amber-700);}.hover\:text-amber-800:hover { color: var(--brand-amber-800);}.hover\:bg-amber-200:hover { background-color: var(--brand-amber-200);}
/* Hover — red */.hover\:text-red-800:hover { color: var(--brand-red-800);}.hover\:bg-red-200:hover { background-color: var(--brand-red-200);}.hover\:bg-red-800:hover { background-color: var(--brand-red-800);}
/* Hover — blue, green, purple */.hover\:bg-blue-200:hover { background-color: var(--brand-blue-200);}.hover\:bg-green-200:hover { background-color: var(--brand-green-200);}.hover\:bg-purple-200:hover { background-color: var(--brand-purple-200);}
/* Focus */.focus\:border-amber-500:focus { border-color: var(--brand-amber-500);}.focus\:border-red-500:focus { border-color: var(--brand-red-500);}.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, currentColor);}.focus\:ring-amber-500:focus { --ring-color: var(--brand-amber-500);}.focus\:ring-brown-500:focus { --ring-color: var(--brand-brown-500);}.focus\:ring-red-500:focus { --ring-color: var(--brand-red-500);}
/* Focus-visible */.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--ring-color, currentColor);}
.focus-visible\:ring-amber-400\/50:focus-visible { --ring-color: color-mix(in srgb, var(--brand-amber-400) 50%, transparent);}
/* Outline hidden */
/* Disabled */.disabled\:opacity-50:disabled { opacity: 0.5;}.disabled\:cursor-wait:disabled { cursor: wait;}
/* ── Section 11: Group Variants ── */
/* Group hover / author — named group. Semantic targets derive from --text-* tokens so they swap automatically in dark mode. */.group\/author:hover .group-hover\/author\:text-primary { color: var(--text-primary);}.group\/author:hover .group-hover\/author\:text-secondary { color: var(--text-secondary);}.group\/author:hover .group-hover\/author\:underline { text-decoration-line: underline;}
/* ── Section 12: Responsive Variants ── */
/* sm: @media (min-width: 640px) */@media (min-width: 640px) { .sm\:block { display: block; } .sm\:inline { display: inline; } .sm\:flex-row { flex-direction: row; } .sm\:items-end { align-items: flex-end; } .sm\:gap-3 { gap: 0.75rem; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:rounded-lg { border-radius: 0.5rem; } .sm\:p-6 { padding: 1.5rem; } .sm\:px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }}
/* md: @media (min-width: 768px) */@media (min-width: 768px) { .md\:flex-row { flex-direction: row; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }}
/* lg: @media (min-width: 1024px) */@media (min-width: 1024px) { .lg\:block { display: block; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }}