/* v7/numbers.css — the numbers editor (V7-SPEC 2, js/v7/numbers.js): one stylesheet for the studio's tab 2 and the photo page's numbers (PHOTO-FLOW 1.12, 2026-11-04). Lifted from v7/index.html; the variables (--bg, --panel, --panel2, --line, --ink, --sub, --amber) come from the page. */
.stage7 { position: relative; width: 100%; max-width: min(280px, 74vw); margin: 4px auto 0; aspect-ratio: 1; }   /* the styles sit right under the face; a sticky face hid the sheet under itself */
.stage7 canvas.big { width: 100%; height: 100%; border-radius: 50%; display: block; box-shadow: 0 0 0 6px #20262E, 0 0 0 7px var(--line); touch-action: none; }
.handle { position: absolute; transform: translate(-50%, 16px); padding: 10px 12px; border-radius: 999px; background: rgba(255,170,0,.28); border: 2px solid var(--amber); color: #fff; font-size: 12px; font-weight: 700; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; white-space: nowrap; min-height: 44px; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.handle.low { transform: translate(-50%, calc(-100% - 14px)); }   /* near the bottom edge, or right above the time: the pill sits above its number */
.handle.sideR { transform: translate(56px, -60%); }   /* right above the time AND at the top of the glass: beside the number, clear of a date's width */
.handle.sideL { transform: translate(calc(-100% - 56px), -60%); }   /* a little high: level with the date, it sat on the top of the numerals */
.handle[data-id=time] { transform: translate(-50%, -50%); }   /* the time's handle sits on its colon, dot or pill: hung under the numerals it sat on the first number, and it must not jump when pressed (2.27, 2026-09-24) */
.handle.sel { background: var(--amber); color: #14171C; }
.handle.drag { cursor: grabbing; }
/* spec 2.27: a number's handle is a dot until it is selected or dragged — the face shows the numbers, not five labels over them.
The button stays 44 px to touch; its name stays in the text for readers and tests, only hidden. The time stays a dot when chosen too: its lane names it, and a pill on the colon hid the typeface being picked. */
.handle:not(.sel):not(.drag), .handle[data-id=time]:not(.drag) { font-size: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; background: none; border: 0; box-shadow: none; }
.handle.sideR:not(.sel):not(.drag) { transform: translate(30px, -50%); } .handle.sideL:not(.sel):not(.drag) { transform: translate(calc(-100% - 30px), -50%); }   /* a dot needs less room than a pill beside the date */
.handle:not(.sel):not(.drag)::before, .handle[data-id=time]:not(.drag)::before { content: ''; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* spec 2.20-2.25: the two lanes, the list of numbers, one opened, Add */
.swatches7 { display: flex; gap: 10px; } .swatch7 { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; }
.swatch7.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.lanes7 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg); border-radius: 12px; padding: 4px; }
.lanes7 button { min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--sub); }
.lanes7 button.on { background: var(--panel2); color: var(--ink); }
.rows7 { display: flex; flex-direction: column; }
.row7 { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 54px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.row7 .rtxt { flex: 1; min-width: 0; } .row7 b { display: block; font-size: 15px; } .row7 span { display: block; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
.row7 .chev { color: var(--sub); font-size: 18px; flex: none; }
.empty7 { font-size: 14px; color: var(--sub); padding: 12px 2px 0; }
.addrow7 { min-height: 50px; margin-top: 10px; border: 1px dashed var(--amber); border-radius: 12px; color: var(--amber); font-weight: 600; font-size: 14px; }
.addrow7:disabled { border-color: var(--line); color: var(--sub); font-weight: 500; }
.shead .back7 { width: 44px; height: 44px; margin-left: -10px; font-size: 24px; color: var(--sub); flex: none; }
.shead b { flex: 1; min-width: 0; }
.shead .left7 { font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.find7 input { width: 100%; min-height: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; }
.groups7 { display: flex; flex-direction: column; gap: 8px; }
.label .strava7 { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: #FC5200; }   /* its own line: beside the label it wrapped on a phone */
.sheet7 { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.shead { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.shead b { font-size: 15px; }
.shead .rm { color: var(--sub); font-size: 13px; min-height: 44px; padding: 0 6px; }
.srow { display: flex; gap: 8px; }
.sbtn { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 13.5px; min-height: 44px; }
.undo7 { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }   /* Undo as a small icon (Jošt, 2026-11-06) */
.tiles7 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile7 { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px solid var(--line); border-radius: 10px; padding: 6px 4px; min-height: 44px; }
/* the four totals from Strava (docs/GOALS-SPEC.md): the sample tag, the connect box, the goal row, the line under it */
.sample7 { font-weight: 500; color: var(--sub); }
.goal7 { display: flex; flex-direction: column; gap: 10px; }
.goal7.ask { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 12px; }
.goal7 .gtext { font-size: 14px; line-height: 1.45; } .goal7 .gtext span { color: var(--sub); }
.stravabtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; align-self: flex-start; }   /* Strava's own button, at its own size (brand guidelines) */
.stravabtn img { display: block; width: 193px; height: 48px; }
/* connected: one card (Jošt, 2026-09-24) — where it stands, the goal, the sport, a quiet footer */
.goal7.card7 { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; gap: 12px; }
.gprog { display: flex; flex-direction: column; gap: 6px; }
.gnow { display: flex; align-items: baseline; gap: 2px; font-size: 14px; color: var(--sub); }
.gnow b { font: 400 34px/1 "Bebas Neue", Impact, sans-serif; color: var(--ink); letter-spacing: .02em; }
.gnow em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--amber); font-weight: 600; }
.gbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .gbar i { display: block; height: 100%; background: var(--amber); border-radius: 3px; }
.gpace { font-size: 13px; color: var(--sub); }
.goal7 .grow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.glab { font-size: 14px; font-weight: 600; }
.gstep { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1 1 100%; }   /* the goal on a line of its own: − the number +, the number in the middle */
.goal7 .gbtn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 18px; flex: none; }
.goal7 .gbox { display: flex; align-items: baseline; justify-content: center; gap: 4px; flex: 1; }
.sheet7 .goal7 .gbox input { width: 3.6em; min-height: 44px; text-align: right; font: 400 26px/1 "Bebas Neue", Impact, sans-serif; color: var(--ink); background: transparent; border: 0; border-radius: 8px; padding: 0 2px; letter-spacing: .02em; }
.sheet7 .goal7 .gbox input:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.goal7 .gunit { font-size: 13px; color: var(--sub); }
.gsub { font-size: 12.5px; color: var(--sub); margin-top: -6px; text-align: center; }
.seg7 { display: flex; gap: 2px; background: var(--panel); border-radius: 10px; padding: 3px; }
.seg7 .sbtn { border: 0; border-radius: 8px; padding: 0 12px; font-size: 13.5px; color: var(--sub); }
.seg7 .sbtn.on { background: var(--panel2); color: var(--ink); font-weight: 600; }
.gfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--sub); padding-top: 10px; border-top: 1px solid var(--line); }
.gfoot img { height: 10px; width: auto; }
.gfoot { gap: 8px; } .gfoot span { white-space: nowrap; }
#strava-disconnect { align-self: flex-start; background: none; border: 0; color: var(--sub); font-size: 13px; text-decoration: underline; min-height: 44px; padding: 0; }
.chips button.myyear { border-color: var(--amber); color: var(--amber); font-weight: 600; }
.tile7.on { border-color: var(--amber); }
.tile7 canvas { width: 100%; max-width: 96px; border-radius: 6px; }
.tile7 span { font-size: 11px; color: var(--sub); }
.sheet7 input[type=text], .sheet7 input[type=date] { background: var(--panel2); color-scheme: dark; }
.fonts7 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.font7 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; border: 2px solid var(--line); border-radius: 10px; }
.font7.on { border-color: var(--amber); }
.font7 .t { font-size: 22px; font-weight: 800; line-height: 1; }
.font7 small { font-size: 11px; color: var(--sub); }
.font7.f1 .t { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 26px; }
.font7.f2 .t { font-family: Righteous, "Trebuchet MS", sans-serif; font-weight: 400; }
.font7.f3 .t { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 600; }
.font7.f3l .t b { font-weight: 600; } .font7.f3l .t i { font-style: normal; font-weight: 200; }   /* Oswald light: the hours as they are, the minutes light (V7 2.36) */
.font7.f4 .t { font-family: Bungee, Impact, sans-serif; font-weight: 400; font-size: 19px; }
.font7.f5 .t { font-family: "Rubik Mono One", monospace; font-weight: 400; font-size: 17px; }
.font7.f6 .t { font-family: "FF Dot Matrix", sans-serif; font-weight: 400; font-size: 20px; }
.font7.f7 .t { font-family: "FF Chisel", sans-serif; font-weight: 400; font-size: 22px; }
.font7.f8 .t { font-family: "FF Contour", sans-serif; font-weight: 400; font-size: 19px; }
.font7.f9 .t { font-family: "Monoton", sans-serif; font-weight: 400; font-size: 16px; }
.font7.f10 .t { font-family: "Instrument Serif", sans-serif; font-weight: 400; font-size: 27px; }
.font7.f11 .t { font-family: "Unbounded", sans-serif; font-weight: 400; font-size: 15px; }
.font7.f12 .t { font-family: "Saira Stencil One", sans-serif; font-weight: 400; font-size: 20px; }
.font7.f13 .t { font-family: "Climate Crisis", sans-serif; font-weight: 400; font-size: 15px; }
.font7.f14 .t { font-family: "Major Mono Display", sans-serif; font-weight: 400; font-size: 16px; }
body.busy .handle, body.busy .sheet7 { pointer-events: none; }   /* while a save or a draw is in flight (the studio's own rule, the photo page sets the class too) */
.sheet7 .label { font-size: 12px; color: var(--sub); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }   /* the studio's .label/.note, for a page without them */
.sheet7 .note { font-size: 13px; color: var(--sub); }