/* Keyedworks free tools: /free-tools/, /hometown-terrain/, /star-map/, /anniversary-gifts-by-year/, the /morse/
   generator. Uses the Workshop Paper tokens from styles.css (light and dark), mobile first, 16 px gutters. */
.tl-page { padding-bottom: var(--space-xl); }
.tl-page .page-h { margin-bottom: var(--space-m); }

/* hub */
.tl-cards { display: grid; gap: var(--space-s); grid-template-columns: 1fr; margin-bottom: var(--space-l); }
@media (min-width: 720px) { .tl-cards { grid-template-columns: 1fr 1fr; } }
.tl-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-s); align-items: center; padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.tl-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.tl-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tl-card-b { display: grid; gap: .3rem; }
.tl-card-b b { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.01em; }
.tl-card-b span { color: var(--ink-2, var(--ink)); font-size: var(--step--1); line-height: 1.45; }
.tl-card-art { width: 88px; height: 88px; border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); }
.tl-card-terrain .tl-card-art { background: repeating-radial-gradient(circle at 60% 45%, #E9E2D3 0 6px, #D6CCB7 6px 12px, #C9BFA9 12px 18px); }
.tl-card-sky .tl-card-art { background: radial-gradient(circle at 30% 35%, #F4E7C1 1.5px, transparent 2px), radial-gradient(circle at 62% 58%, #F4E7C1 2px, transparent 2.5px), radial-gradient(circle at 75% 25%, #F4E7C1 1px, transparent 1.5px), radial-gradient(circle at 45% 75%, #F4E7C1 1.2px, transparent 1.7px), #16171A; border-radius: 50%; }
.tl-card-morse .tl-card-art { background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 7px, var(--ink) 7px 17px, transparent 17px 26px); background-color: var(--paper); }
.tl-card-anniv .tl-card-art { background: linear-gradient(135deg, #C9A646 0 33%, #B87333 33% 66%, #8C8F94 66%); }

/* tool layout */
.tl-grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; margin-bottom: var(--space-l); }
@media (min-width: 900px) { .tl-grid { grid-template-columns: minmax(300px, 380px) 1fr; } }
.tl-form { display: grid; gap: .55rem; padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tl-l { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.tl-in { width: 100%; min-height: 44px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); font: inherit; }
.tl-in:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tl-row > div { display: grid; gap: .35rem; min-width: 0; }
.tl-go { margin-top: .4rem; width: 100%; justify-content: center; }
.tl-fine { font-size: var(--step--2); color: var(--moss); margin: 0; }
.tl-err { margin: 0; }
.tl-out { display: grid; gap: var(--space-s); min-width: 0; }
.tl-fig { margin: 0; }
.tl-canvas { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); image-rendering: pixelated; }
.tl-cap { font-size: var(--step--2); color: var(--moss); margin-top: .5rem; overflow-wrap: anywhere; }
.tl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem var(--space-s); margin: 0; }
.tl-stats div { border-top: 1px solid var(--line); padding-top: .4rem; }
.tl-stats dt { font-size: var(--step--2); color: var(--moss); text-transform: uppercase; letter-spacing: .1em; }
.tl-stats dd { margin: .15rem 0 0; font-family: var(--font-mono); font-size: var(--step--1); }
.tl-make { flex-wrap: wrap; }
.tl-share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tl-share-ok { font-size: var(--step--2); color: var(--ok); }
.tl-credit { font-size: var(--step--2); color: var(--moss); margin: 0; }
.tl-soon { display: grid; gap: .6rem; }
.tl-soon .btn[disabled] { opacity: .55; cursor: not-allowed; justify-self: start; }
.tl-faq { margin-top: var(--space-l); }

/* star map */
.tl-skysvg { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 1; }
.tl-sky-bg { fill: #16171A; }
.tl-sky-ring { fill: none; stroke: #C9A646; stroke-width: 1.2; }
.tl-sky-lines line { stroke: #8A8F98; stroke-width: .35; stroke-linecap: round; }
.tl-sky-stars circle { fill: #F4E7C1; }
.tl-sky-card { fill: var(--ink); font: 600 7px var(--font-mono); text-anchor: middle; dominant-baseline: middle; }

/* anniversary */
.an-form { margin-bottom: var(--space-s); }
.an-result { padding: var(--space-s); border-left: 4px solid var(--verm); background: var(--card); border-radius: 0 var(--radius-s) var(--radius-s) 0; margin-bottom: var(--space-m); }
.an-result h2 { margin-top: 0; }
.an-when { color: var(--moss); font-size: var(--step--1); }
.an-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.an-table th, .an-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.an-table thead th { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: var(--moss); }
.an-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-s); margin: 0 0 var(--space-m); }
.an-facts div { border-top: 2px solid var(--ink); padding-top: .4rem; }
.an-facts dt { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; color: var(--moss); }
.an-facts dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: var(--step-1); }
.an-ours { display: grid; gap: var(--space-s); grid-template-columns: 1fr; align-items: center; padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
@media (min-width: 640px) { .an-ours { grid-template-columns: 240px 1fr; } }
.an-ours img { width: 100%; height: auto; border-radius: var(--radius-s); }
.an-ours h2 { margin: .1rem 0 .4rem; }
.an-nav { display: flex; justify-content: space-between; gap: var(--space-s); margin: var(--space-m) 0; flex-wrap: wrap; }

/* morse generator */
.mz-gen { margin: var(--space-m) 0 var(--space-l); padding: var(--space-s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); display: grid; gap: .7rem; }
.mz-gen h2 { margin: 0; }
.mz-gen-form { display: grid; gap: .35rem; }
.mz-live { min-height: 120px; }
.mz-code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow-wrap: anywhere; margin: 0; }
.mz-copy { padding: .35rem .7rem; min-height: 36px; }
.mz-fit { margin: 0; color: var(--moss); font-size: var(--step--1); }
.mz-make { flex-wrap: wrap; }