/* SIGNAL 2002, TECH face (93.2). Same tokens, radii and LCD treatment as the home and deck. */
.tf .dk.tf__latch[aria-pressed="true"],.tf .dk.tf__here{background-image:var(--ddown)}
.tf .dk.tf__latch[aria-pressed="true"]:hover{background-image:var(--ddown)}
.tf .seg--title{font-family:"DSEG14",var(--dot);font-size:30px;position:absolute;left:14px;top:10px}
.tf .seg--title .seg__lit{left:0;right:auto;white-space:pre}
.tf .seg--clock{font-size:40px;position:absolute;right:16px;top:9px}
.tf .lcd__sub{position:absolute;left:14px;right:14px;bottom:5px;display:flex;gap:14px;font:400 9px var(--px);color:var(--lcd-dim)}
.tf .lcd__sub span:last-child{margin-left:auto;color:var(--lcd)}
.tf .lcd__sub--r{justify-content:flex-end}
.tf [data-air].is-on{color:#ff3b2f}
.tf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.tf__count{display:flex;align-items:center;gap:10px;padding:0 14px}
.tf__shown{font-size:44px}
.tf__of{align-self:flex-end;padding-bottom:12px}
.tf__tabs{margin-left:auto;display:grid;grid-template-columns:repeat(4,auto);gap:0 10px}
.tf__tabs div{border-left:1px solid #12303a;padding-left:8px}
.tf__tabs dt{font:400 9px var(--px);color:var(--lcd-dim)}
.tf__tabs dd{font-family:"DSEG7",var(--dot);font-size:20px;color:var(--amber)}

.tf__search{display:flex;align-items:center;gap:12px;padding:0 14px}
.tf__search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:400 26px var(--dot);caret-color:var(--amber);-webkit-appearance:none;appearance:none}
.tf__search input::placeholder{color:var(--lcd-dim)}
.tf__search input::-webkit-search-cancel-button{display:none}
.tf__search:focus-within{box-shadow:inset 0 0 0 1px var(--amber)}

.tf__list{padding:8px 6px;overflow-y:auto;overscroll-behavior:contain}
.tf__h,.tf__list li button{display:grid;grid-template-columns:24px 1fr 112px;column-gap:8px;align-items:baseline}
.tf__h{font:400 9px var(--px);color:var(--lcd-dim);padding:0 6px 5px;border-bottom:1px solid #12303a;margin-bottom:3px}
.tf__list ol{list-style:none}
.tf__list li button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:24px 1fr 112px;column-gap:8px;padding:4px 6px 5px;border-radius:3px;cursor:pointer;font:400 18px/1 var(--dot);color:var(--lcd)}
.tf__list .n{color:var(--amber)}
.tf__list .nm em{font:400 8px var(--px);font-style:normal;color:var(--lcd-dim);vertical-align:2px;margin-left:4px}
.tf__list .w{font-size:16px;color:var(--lcd-dim);text-align:right}
.tf__list .tbc{color:var(--amber)}
.tf__list li.sel button{background:var(--sel);color:#fff}
.tf__list li.sel .w,.tf__list li.sel em{color:#bcd0ff}
.tf__list li button:focus-visible{outline:1px dotted var(--amber)}
.tf__empty{padding:14px 8px;font-size:18px;color:var(--amber)}

.tf__viewer{cursor:grab;touch-action:none}
.tf__viewer.is-grab{cursor:grabbing}
.tf__viewer canvas{display:block}
.tf__viewer canvas:focus-visible{outline:2px dotted var(--amber);outline-offset:-4px}
.tf__vtag{position:absolute;left:14px;top:12px}
.tf__frame{display:grid;place-items:center}
.tf__frame .seg{font-size:28px}

.tf__read{padding:14px 14px}
.tf__name{font:400 16px var(--px);color:#fff;letter-spacing:1px;line-height:1.25;margin-bottom:12px;text-wrap:balance}
.tf__rows div{padding:6px 0 7px;border-top:1px solid #12303a}
.tf__rows dt{font:400 9px var(--px);color:var(--lcd-dim);margin-bottom:3px}
.tf__rows dd{font-size:19px;line-height:1.05;color:var(--lcd)}
.tf__rows dd.tbc{color:var(--amber)}
.tf__ang{font-size:34px}
.tf__entry{position:absolute;left:14px;bottom:12px}

/* handheld */
.tf.is-phone .seg--title{font-size:22px;left:10px;top:6px}
.tf.is-phone .lcd__sub{font-size:8px;left:10px;right:10px;bottom:4px;gap:8px}
.tf.is-phone .lcd__sub span:nth-child(2){display:none}
.tf.is-phone .tf__search input{font-size:22px}
.tf.is-phone .tf__read{padding:8px 12px}
.tf.is-phone .tf__name{font-size:13px;margin-bottom:4px}
.tf.is-phone .tf__rows{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:8px}
.tf.is-phone .tf__rows div{padding:4px 0}
.tf.is-phone .tf__rows dd{font-size:16px}
.tf.is-phone .tf__h,.tf.is-phone .tf__list li button{grid-template-columns:22px 1fr 92px}
.tf.is-phone .tf__list li button{font-size:17px}
.tf.is-phone .tf__list .w{font-size:15px}
.tf.is-phone .tf__vtag{left:10px;top:10px}