/* SMS-flyt (17.10): the first SMS, what AI answers, and «Prøv selv», as cards built from reviews.css. Only what is
   specific to this page lives here. Rules carry .sms-page so they beat the older sheets while those still load. */
/* The back link sits where it does on the Innstillinger sub-pages: 32 px down on a PC, at the top of the page on a phone. */
#account .r-page.sms-page{padding-top:32px}
/* The same column and left edge as Innstillinger and the other pages (19.10), not the wider r-page with its own gutter. */
@media (min-width:821px){#account .r-page.sms-page{width:min(1000px,calc(100% - 2 * clamp(24px,3.5vw,56px)));max-width:1000px;padding:32px 0 64px}}
@media (max-width:820px){#account .r-page.sms-page{padding-top:0}}
#account .sms-page .sms-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px}
#account .sms-page .sms-head>div{min-width:0}
#account .sms-page .sms-head .r-h1{margin:0 0 2px}
#account .sms-page .sms-head .r-note{margin:0}
/* One line under the title says whether the SMS goes, as Ny-32 and Ny-33 draw it: a dot (grey off, green on) and the
   words in ink, not a pill. */
#account .sms-page .sms-state{display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;line-height:1.4}
#account .sms-page .sms-state::before{content:'';width:10px;height:10px;flex:none;border-radius:50%;background:var(--r-grey-9)}
#account .sms-page .sms-state.on::before{background:var(--r-green-11)}
#account .sms-page .sms-head .pilot-workspace-location{flex:none}
#account .sms-page .r-tabs{margin-bottom:16px}
#account #workspace-view .sms-page h2{margin:0;color:var(--r-ink);font:650 var(--r-fs-lead)/1.4 var(--r-font);letter-spacing:-.25px}
#account #workspace-view .sms-page h3{margin:0;color:var(--r-ink);font:600 var(--r-fs-body)/1.4 var(--r-font)}
#account .sms-page .sms-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:12px;align-items:start}
#account .sms-page .sms-cards,#account .sms-page .sms-side{display:flex;flex-direction:column;gap:12px;min-width:0}
#account .sms-page .sms-empty{grid-column:1 / -1}
/* One status line (natt 3): before the setup the line under the title already says the SMS is not on, so the card only
   says what to do, with its one button. */
#account .sms-page .sms-empty .r-empty>b{display:none}
#account .sms-page .sms-empty .r-empty>b+p{margin-top:0}

/* The first SMS: the service it opens with, the text in a bubble, when it goes; a warning only when it is too long. */
#account .sms-page .sms-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;margin-bottom:10px}
#account .sms-page .sms-card-head strong{display:block;color:var(--r-ink);font-weight:600}
#account .sms-page .sms-card-head small{display:block;color:var(--r-muted);font-size:var(--r-fs-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-count{color:var(--r-muted);font-size:var(--r-fs-small);white-space:nowrap;font-variant-numeric:tabular-nums}
#account .sms-page .sms-count.long{color:var(--r-amber-11);font-weight:600}
#account .sms-page .sms-count[hidden],#account .sms-page .sms-card-head small[hidden]{display:none}
#account .sms-page .sms-when{margin:10px 0 0;color:var(--r-muted);font-size:var(--r-fs-ui);line-height:1.5}
#account .sms-page .sms-send-link{margin-top:12px}
#account .sms-page .sms-text{margin:0;padding:12px 14px;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);background:var(--r-panel);color:var(--r-ink);line-height:1.5;overflow-wrap:anywhere}

/* Åpning per tjeneste: the industry from Google, then one quiet row per service. A row shows the whole first SMS
   above when chosen; the owner edits the question in place. Small text never wraps. */
#account .sms-page .sms-openings-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:16px 18px 12px}
#account .sms-page .sms-openings-head h3{flex:1 0 100%}
#account .sms-page .sms-openings-head .r-note{flex:1 1 280px;margin:0}
#account .sms-page .sms-mode{display:flex;align-items:flex-start;gap:8px;margin:0 18px 12px;padding:10px 12px;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);color:var(--r-text);font-size:var(--r-fs-ui);line-height:1.45}
#account .sms-page .sms-mode.warn{border-color:var(--r-amber-9);background:var(--r-amber-3);color:var(--r-amber-11)}
#account .sms-page .sms-mode svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#account .sms-page .sms-open-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-top:.5px solid var(--r-line)}
#account .sms-page .sms-open-pick{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:44px;margin:0;padding:8px 10px;border:0;border-radius:var(--r-radius-s);background:none;color:var(--r-ink);font:inherit;text-align:left;cursor:pointer}
#account .sms-page .sms-open-pick:hover{background:var(--r-hover)}
#account .sms-page .sms-open-pick[aria-pressed=true]{background:var(--r-soft);box-shadow:inset 0 0 0 .5px var(--r-line-strong)}
#account .sms-page .sms-open-pick:focus-visible{outline:2px solid var(--r-ink);outline-offset:-2px}
#account .sms-page .sms-open-title{display:flex;align-items:baseline;gap:8px;min-width:0}
#account .sms-page .sms-open-title strong{font-weight:600;font-size:var(--r-fs-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-open-own{flex:none;color:var(--r-muted);font-size:13px;white-space:nowrap}
#account .sms-page .sms-open-services{color:var(--r-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-open-text{color:var(--r-text);font-size:var(--r-fs-ui);line-height:1.45;overflow-wrap:anywhere}
#account .sms-page .sms-open-edit{padding:0 14px}
#account .sms-page .sms-open-more{margin:4px 18px 0;min-height:40px}
#account .sms-page .sms-open-foot{margin:8px 0 0;padding:12px 18px;border-top:.5px solid var(--r-line);color:var(--r-muted);font-size:var(--r-fs-meta);line-height:1.45}
#account .sms-page .sms-open-row:has(.sms-open-form){grid-template-columns:minmax(0,1fr)}
#account .sms-page .sms-open-form{display:grid;gap:8px;padding:8px 10px 10px}
#account .sms-page .sms-open-form .r-field{margin:0}
#account .sms-page .sms-open-size{color:var(--r-muted);font-size:var(--r-fs-small);white-space:nowrap;font-variant-numeric:tabular-nums}
#account .sms-page .sms-open-size.long{color:var(--r-amber-11);font-weight:600}
#account .sms-page .sms-open-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#account .sms-page .sms-open-actions .r-link{min-height:40px;padding:0 6px}
#account .sms-page .sms-open-error{margin:0;color:#b3261e;font-size:var(--r-fs-ui)}
#account .sms-page .sms-open-error:empty{display:none}
#account .sms-page .sms-try-pick{width:100%;margin:0 0 10px}
#account .sms-page .sms-try-pick .customer-select-trigger{height:40px;min-height:0;padding-top:0;padding-bottom:0;border:.5px solid var(--r-line-strong);border-radius:var(--r-radius-s);font-size:var(--r-fs-ui)}

/* When the customer answers: one row per kind of reply, with the example as two bubbles. */
#account .sms-page .sms-replies-head{padding:16px 18px 12px}
#account .sms-page .sms-replies-head .r-note{margin:4px 0 0}
#account .sms-page .sms-case{padding:14px 18px;border-top:.5px solid var(--r-line)}
#account .sms-page .sms-case-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#account .sms-page .sms-case-head strong{color:var(--r-ink);font-weight:600}
/* What happens next, as a pill in the palette: green when the link goes, amber when it lands with you in Kunder, grey
   otherwise. Red is kept for what is urgent. */
#account .sms-page .sms-outcome{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 9px;border-radius:999px;background:var(--r-grey-3);color:var(--r-text);font:500 var(--r-fs-small)/22px var(--r-font);white-space:nowrap}
#account .sms-page .sms-outcome.good{background:var(--r-green-3);color:var(--r-green-11)}
#account .sms-page .sms-outcome.task,#account .sms-page .sms-outcome.bad{background:var(--r-amber-3);color:var(--r-amber-11)}
#account .sms-page .sms-example{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#account .sms-page .sms-said,#account .sms-page .sms-answer{margin:0;max-width:86%;padding:8px 12px;border-radius:14px;font-size:var(--r-fs-ui);line-height:1.45;overflow-wrap:anywhere}
#account .sms-page .sms-said{align-self:flex-end;background:var(--r-ink);color:#fff;border-bottom-right-radius:5px}
#account .sms-page .sms-answer{align-self:flex-start;border:.5px solid var(--r-line-strong);background:var(--r-panel);color:var(--r-ink);border-bottom-left-radius:5px}
/* The Google link in the example reads as words, as the customer sees a link, never as the raw address. */
#account .sms-page .sms-link{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#account .sms-page .sms-replies-foot{margin:0;padding:12px 18px;border-top:.5px solid var(--r-line);color:var(--r-muted);font-size:var(--r-fs-meta)}
#account .sms-page .sms-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
#account .sms-page .sms-rule strong{display:block;color:var(--r-ink);font-weight:600;font-size:var(--r-fs-ui)}
#account .sms-page .sms-rule span{color:var(--r-muted);font-size:var(--r-fs-meta);line-height:1.45}

/* Prøv selv: a small phone screen, the customer writes at the bottom. */
#account .sms-page .sms-try-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
#account .sms-page .sms-try-head small{display:block;margin-top:2px;color:var(--r-muted);font-size:var(--r-fs-meta)}
#account .sms-page .sms-reset svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#account .sms-page .sms-screen{display:flex;flex-direction:column;gap:8px;min-height:220px;max-height:440px;overflow-y:auto;padding:14px;border:.5px solid var(--r-line);border-radius:16px;background:var(--r-panel)}
#account .sms-page .sms-screen>*{flex:none}
#account .sms-page .sms-bubble{margin:0;max-width:86%;padding:9px 13px;border-radius:16px;font-size:var(--r-fs-ui);line-height:1.45;overflow-wrap:anywhere}
#account .sms-page .sms-bubble.them{align-self:flex-start;background:var(--r-panel);border:.5px solid var(--r-line-strong);border-bottom-left-radius:5px;color:var(--r-ink)}
#account .sms-page .sms-bubble.me{align-self:flex-end;background:var(--r-ink);color:#fff;border-bottom-right-radius:5px}
#account .sms-page .sms-bubble.typing{color:var(--r-muted)}
#account .sms-page .sms-note{align-self:flex-start;max-width:100%;margin:-2px 0 2px 4px;color:var(--r-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-note.good{color:var(--r-green-11)}
#account .sms-page .sms-note.bad{color:var(--r-amber-11)}
#account .sms-page .sms-compose{display:flex;gap:8px;margin-top:10px}
#account .sms-page .sms-compose input{flex:1;min-width:0;height:42px;min-height:0;margin:0;padding:0 14px;border:.5px solid var(--r-line-strong);border-radius:21px;background:var(--r-panel);color:var(--r-ink);font:var(--r-fs-body)/1.4 var(--r-font);box-shadow:none}
#account .sms-page .sms-compose input:focus{outline:2px solid var(--r-ink);outline-offset:-1px}
#account .sms-page .sms-send{display:grid;place-items:center;flex:none;width:42px;height:42px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--r-ink);color:#fff;cursor:pointer}
#account .sms-page .sms-send svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#account .sms-page .sms-compose input:disabled,#account .sms-page .sms-send:disabled,#account .sms-page .sms-try-chip:disabled{opacity:.45;cursor:default}
#account .sms-page .sms-tries{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#account .sms-page .sms-sender dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:8px 0 10px}
#account .sms-page .sms-sender dt{color:var(--r-muted);font-size:var(--r-fs-meta);white-space:nowrap}
#account .sms-page .sms-sender dd{margin:0;color:var(--r-ink);font-size:var(--r-fs-ui);overflow-wrap:anywhere}
#account .sms-page .sms-sender dd .r-link{font-size:var(--r-fs-ui)}

/* Innstillinger: one card per place, the saved setup above the editor. */
#account .sms-page .sms-place+.sms-place{margin-top:12px}
#account .sms-page .sms-place-head .r-note{margin:4px 0 0}
/* One status line (19.10): the line under the title says whether the SMS goes, so the card does not say it again. */
#account .sms-page .sms-place-state{display:none}
#account .sms-page .sms-place-head h2{margin-bottom:4px}
#account .sms-page .sms-setup{border-top:.5px solid var(--r-line)}
#account .sms-page .sms-setup>*+*{margin-top:14px}
/* Natt 3 (19.10): the fields and the bubbles use the card's whole width, so the card has no empty strip on the right. */
#account .sms-page .sms-setup .r-note{margin:0}
#account .sms-page .sms-setup .r-note.error{color:#b3261e}
#account .sms-page .sms-setup .r-note:empty{display:none}
#account .sms-page .sms-setup .r-form>.r-form{gap:16px}
/* Oppsett (19.10): who greets, the Google link and the reserve answer are three parts with the same air and a hairline. */
#account .sms-page .sms-setup .sms-setup-part{display:grid;gap:10px;min-width:0}
#account .sms-page .sms-setup .sms-setup-part+.sms-setup-part{padding-top:16px;border-top:.5px solid var(--r-line)}
#account .sms-page .sms-setup .sms-setup-part .r-field{margin:0}
#account .sms-page .sms-setup .r-form .r-btn{justify-self:start}
/* Oppsett: who greets with the start of the SMS under it, the Google link as the place's name, the text if AI is late. */
#account .sms-page .sms-setup .r-actions:not(:has(.r-btn:not([hidden]))){display:none}
#account .sms-page .sms-setup .sms-setup-check{margin-top:-4px}
#account .sms-page .sms-setup .sms-setup-greeting[hidden],#account .sms-page .sms-setup .sms-setup-long[hidden]{display:none}
#account .sms-page .sms-setup .sms-setup-long{margin-top:-6px;color:var(--r-amber-11);font-size:var(--r-fs-ui);font-weight:500;white-space:nowrap}
#account .sms-page .sms-setup .sms-setup-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 16px}
#account .sms-page .sms-setup .sms-setup-link[hidden]{display:none}
#account .sms-page .sms-setup .sms-setup-link-label{grid-column:1 / -1;color:var(--r-text);font-size:var(--r-fs-meta);white-space:nowrap}
#account .sms-page .sms-setup .sms-setup-link-name{min-width:0;color:var(--r-ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-setup .sms-setup-link-actions{display:flex;align-items:center;gap:16px}
#account .sms-page .sms-setup .approved-invitation-choice{display:grid;gap:4px;margin-top:2px}
#account .sms-page .sms-setup .approved-invitation-choice:empty{display:none}
#account .sms-page .sms-setup .approved-invitation-choice .sms-text{margin:0}
/* The two texts the customer would get read as the business's own SMS, as in the conversation in Kunder: an ink bubble
   on the right, never a field to type in. */
#account .sms-page .sms-setup .sms-text{justify-self:end;width:fit-content;max-width:min(560px,88%);padding:9px 12px;border:0;border-radius:14px;border-bottom-right-radius:4px;background:var(--r-ink);color:#fff;font-size:var(--r-fs-ui);line-height:1.45}
#account .sms-page .sms-setup .sms-setup-long{justify-self:end}
/* After the save: one link on to the messages, under the line that says it is saved. */
#account .sms-page .sms-setup .sms-setup-next{display:inline-flex}
#account .sms-page .sms-setup .sms-setup-next[hidden]{display:none}
#account .sms-page .sms-preview,#account .sms-page .sms-checks{display:grid;gap:8px}
#account .sms-page .sms-preview:empty,#account .sms-page .sms-checks:empty{display:none}
#account .sms-page .sms-preview h4,#account .sms-page .sms-checks h4{margin:0;color:var(--r-ink);font:600 var(--r-fs-body)/1.4 var(--r-font)}
#account .sms-page .sms-preview p,#account .sms-page .sms-checks p{margin:0;color:var(--r-text)}

@media (max-width:980px){
 #account .sms-page .sms-body{grid-template-columns:1fr}
 /* One column: «Prøv selv» comes right after the first SMS, then the opening per service, the replies and the rules. */
 #account .sms-page :is(.sms-cards,.sms-side){display:contents}
 #account .sms-page .sms-body>*{min-width:0}
 #account .sms-page :is(.sms-card,.sms-empty){order:1}
 #account .sms-page .sms-try{order:2}
 #account .sms-page .sms-openings{order:3}
 #account .sms-page .sms-replies{order:4}
 #account .sms-page :is(.sms-rules,.sms-sender){order:5}
}
/* The case heads keep their title and outcome on one line where there is room, and the outcome never breaks. */
#account .sms-page .sms-case-head{flex-wrap:wrap;row-gap:4px}
#account .sms-page .sms-case-head strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
 #account .sms-page .sms-head{flex-direction:column;align-items:stretch;gap:10px}
 #account .sms-page .sms-top{flex-wrap:wrap}
 #account .sms-page .sms-rules{grid-template-columns:1fr}
 #account .sms-page .sms-card-head{grid-template-columns:minmax(0,1fr)}
 #account .sms-page .sms-empty{flex-direction:column;align-items:flex-start}
 #account .sms-page .sms-case-head{flex-direction:column;align-items:flex-start;gap:2px}
 #account .sms-page .sms-compose input{font-size:16px}
 #account .sms-page .sms-open-row{padding:6px 10px 6px 6px;gap:8px}
 #account .sms-page .sms-open-form input{font-size:16px}
 #account .sms-page .sms-said,#account .sms-page .sms-answer,#account .sms-page .sms-bubble{max-width:92%}
 #account .sms-page .sms-setup .sms-setup-link{grid-template-columns:minmax(0,1fr)}
}

/* Before the setup (Ny-32, 19.10): three sections with the title outside the card, 32 px between them. */
#account .sms-page .sms-body.sms-intro{display:flex;flex-direction:column;gap:32px}
#account .sms-page .sms-section{min-width:0}
#account #workspace-view .sms-page .sms-section h2{margin:0;font:600 var(--r-fs-title)/1.4 var(--r-font);letter-spacing:-.25px}
#account .sms-page .sms-section-sub{margin:4px 0 0;color:var(--r-muted);font-size:var(--r-fs-body);line-height:1.5}
#account .sms-page .sms-section>.r-card{margin-top:12px}
/* Icon tiles in the palette: blue, violet, amber and green flats with an ink stroke. */
#account .sms-page .sms-tile{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--r-grey-3);color:var(--r-grey-11)}
#account .sms-page .sms-tile.blue{background:var(--r-blue-3);color:var(--r-blue-11)}
#account .sms-page .sms-tile.violet{background:var(--r-violet-3);color:var(--r-violet-11)}
#account .sms-page .sms-tile.amber{background:var(--r-amber-3);color:var(--r-amber-11)}
#account .sms-page .sms-tile.green{background:var(--r-green-3);color:var(--r-green-11)}
#account .sms-page .sms-tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* The three steps: tile, title and one line, and on the right the button, the link or the pill. */
#account .sms-page .sms-step{display:flex;align-items:center;gap:14px;padding:16px 20px}
#account .sms-page .sms-step+.sms-step{border-top:.5px solid var(--r-line)}
#account .sms-page .sms-step-copy{flex:1;min-width:0}
#account .sms-page .sms-step-copy b{display:block;color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;line-height:1.4}
#account .sms-page .sms-step-copy p{margin:2px 0 0;color:var(--r-text);font-size:var(--r-fs-body);line-height:1.45}
#account .sms-page .sms-step>.r-btn{flex:none;margin:0}
#account .sms-page .sms-step>.r-link{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0;color:var(--r-ink);font-weight:500;white-space:nowrap}
#account .sms-page .sms-step>.r-link .icon,#account .sms-page .sms-path>.icon,#account .sms-page .sms-rule-row .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#account .sms-page .sms-pill{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 9px;border-radius:999px;background:var(--r-grey-3);color:var(--r-grey-11);font:500 var(--r-fs-small)/22px var(--r-font);white-space:nowrap}
/* The conversation: ask, help, link as three columns with chevrons between, then the rules as a list. */
#account .sms-page .sms-path{display:flex;align-items:flex-start;gap:12px;padding:20px}
#account .sms-page .sms-path>.icon{flex:none;margin-top:8px;color:var(--r-grey-9)}
#account .sms-page .sms-stage{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
#account .sms-page .sms-stage b{display:block;color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;line-height:1.4}
#account .sms-page .sms-stage p{margin:4px 0 0;color:var(--r-text);font-size:var(--r-fs-body);line-height:1.45}
#account .sms-page .sms-rules-list{margin:0;padding:4px 20px 8px;border-top:.5px solid var(--r-line)}
#account .sms-page .sms-rule-row{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:16px;min-height:48px}
#account .sms-page .sms-rule-row+.sms-rule-row{border-top:.5px solid var(--r-line)}
#account .sms-page .sms-rule-row dt{display:flex;align-items:center;gap:10px;color:var(--r-ink);font-size:var(--r-fs-body);font-weight:600;white-space:nowrap}
#account .sms-page .sms-rule-row dt .icon{color:var(--r-green-11)}
#account .sms-page .sms-rule-row dd{margin:0;color:var(--r-text);font-size:var(--r-fs-body);line-height:1.45}
/* Two examples side by side: the business in ink on the right, the customer in white on the left, as in Kunder. */
#account .sms-page .sms-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#account .sms-page .sms-sample{display:flex;flex-direction:column;gap:16px;padding:20px;min-width:0}
#account .sms-page .sms-sample+.sms-sample{border-left:.5px solid var(--r-line)}
#account .sms-page .sms-sample-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
#account .sms-page .sms-sample-head b{min-width:0;color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-sample-head .sms-outcome.bad{background:var(--r-red-3);color:var(--r-red-11)}
#account .sms-page .sms-talk{display:flex;flex-direction:column;gap:8px}
#account .sms-page .sms-talk-label{align-self:flex-end;color:var(--r-muted);font-size:var(--r-fs-small);white-space:nowrap}
#account .sms-page .sms-us,#account .sms-page .sms-them{margin:0;max-width:88%;padding:10px 14px;border-radius:14px;font-size:var(--r-fs-body);line-height:1.45;overflow-wrap:anywhere}
#account .sms-page .sms-us{align-self:flex-end;background:var(--r-ink);color:#fff;border-bottom-right-radius:5px}
#account .sms-page .sms-them{align-self:flex-start;border:.5px solid var(--r-line-strong);background:var(--r-panel);color:var(--r-ink);border-bottom-left-radius:5px}
/* Oppsett (Ny-33): the place's name over the card, who greets as two cards, the name field with its hint, the receipt. */
#account #workspace-view .sms-page .sms-place-title{margin:0 0 12px;font:600 var(--r-fs-title)/1.4 var(--r-font);letter-spacing:-.25px}
#account .sms-page .sms-place .sms-setup{border-top:0}
#account .sms-page .sms-setup .sms-setup-title{margin:0;color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;line-height:1.4}
#account .sms-page .sms-setup .sms-setup-who{display:grid;gap:12px}
#account .sms-page .sms-setup .sms-setup-who-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#account .sms-page .sms-setup .sms-setup-who-card{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;border:.5px solid var(--r-line-strong);border-radius:10px;background:var(--r-panel);cursor:pointer}
#account .sms-page .sms-setup .sms-setup-who-card.chosen{border-color:var(--r-ink);box-shadow:inset 0 0 0 .5px var(--r-ink)}
#account .sms-page .sms-setup .sms-setup-who-card input{flex:none;width:16px;height:16px;margin:3px 0 0;accent-color:var(--r-ink)}
#account .sms-page .sms-setup .sms-setup-who-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
#account .sms-page .sms-setup .sms-setup-who-name{color:var(--r-ink);font-size:var(--r-fs-body);font-weight:500;line-height:1.45}
#account .sms-page .sms-setup .sms-setup-who-example{color:var(--r-muted);font-size:var(--r-fs-small);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#account .sms-page .sms-setup .r-field[hidden]{display:none}
#account .sms-page .sms-setup .r-field input[type=text]{max-width:320px}
#account .sms-page .sms-setup .sms-setup-hint{display:block;margin-top:6px;color:var(--r-muted);font-size:var(--r-fs-small);line-height:1.4;font-weight:400;white-space:normal;max-width:48ch}
#account .sms-page .sms-setup .sms-setup-done{display:flex;align-items:flex-start;gap:14px;padding-top:16px;border-top:.5px solid var(--r-line)}
#account .sms-page .sms-setup .sms-setup-done[hidden]{display:none}
#account .sms-page .sms-setup .sms-setup-done-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--r-green-3);color:var(--r-green-11)}
#account .sms-page .sms-setup .sms-setup-done-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#account .sms-page .sms-setup .sms-setup-done-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#account .sms-page .sms-setup .sms-setup-done-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:32px}
#account .sms-page .sms-setup .sms-setup-done-head b{color:var(--r-ink);font-size:var(--r-fs-lead);font-weight:600;white-space:nowrap}
#account .sms-page .sms-setup .sms-setup-done-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--r-grey-3);color:var(--r-grey-11);font:500 var(--r-fs-small)/22px var(--r-font);white-space:nowrap}
#account .sms-page .sms-setup .sms-setup-done-pill.on{background:var(--r-green-3);color:var(--r-green-11)}
#account .sms-page .sms-setup .sms-setup-done-copy>p{margin:0;color:var(--r-text);font-size:var(--r-fs-body);line-height:1.45}
#account .sms-page .sms-setup .sms-setup-done-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:6px}
#account .sms-page .sms-setup .sms-setup-done-links .r-link{display:inline-flex;align-items:center;gap:4px;min-height:24px;margin:0;color:var(--r-ink);font-weight:500;white-space:nowrap}
#account .sms-page .sms-setup .sms-setup-done-links .r-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
 /* The tile, the text and the link or pill share the row; the button fills the width under the text. */
 #account .sms-page .sms-step{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:start;gap:10px 14px;padding:14px 16px}
 #account .sms-page .sms-step>.r-btn{grid-column:1 / -1;width:100%;min-height:44px}
 #account .sms-page .sms-step>.r-link{min-height:24px}
 #account .sms-page .sms-step>.sms-pill{margin-top:1px}
 #account .sms-page .sms-path{flex-direction:column;gap:16px;padding:16px}
 #account .sms-page .sms-path>.icon{transform:rotate(90deg);margin:0 0 0 8px}
 #account .sms-page .sms-stage{flex-direction:row;align-items:flex-start}
 #account .sms-page .sms-rule-row{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
 #account .sms-page .sms-rules-list{padding:4px 16px 8px}
 #account .sms-page .sms-pair{grid-template-columns:minmax(0,1fr)}
 #account .sms-page .sms-sample{padding:16px}
 #account .sms-page .sms-sample+.sms-sample{border-left:0;border-top:.5px solid var(--r-line)}
 #account .sms-page .sms-setup .sms-setup-who-options{grid-template-columns:minmax(0,1fr)}
 #account .sms-page .sms-setup .r-field input[type=text]{max-width:none}
}

/* V3 SMS etter jobben 03.11 (SmsFlytDesktop, SmsFlytMobil): the state line as a dot and its words, the notice while it is
   off, «Slik går samtalen» with the three texts, «Slik ser kunden det» as a phone, and the rules with ticks. Every rule has
   one step more than the older ones in this sheet and in customer-app-v3.css. */
body.customer-app #account .r-page.sms-page .sms-head{margin:0 0 16px}
body.customer-app #account .r-page.sms-page .sms-state{display:flex;align-items:center;gap:7px;margin:8px 0 0;color:var(--rv-text);font:500 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-state::before{width:8px;height:8px;background:var(--rv-grey)}
body.customer-app #account .r-page.sms-page .sms-state.on::before{background:var(--rv-green)}
body.customer-app #account .r-page.sms-page .sms-notice{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:14px 16px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px rgba(16,24,40,.13),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)}
body.customer-app #account .r-page.sms-page .sms-notice[hidden]{display:none}
body.customer-app #account .r-page.sms-page .sms-notice p{flex:1;min-width:0;margin:0;color:var(--rv-text);font:400 14px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-notice b{color:var(--rv-ink);font-weight:600}
body.customer-app #account .r-page.sms-page .sms-off{display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--rv-text);font:500 13px/18px var(--r-font);white-space:nowrap}
body.customer-app #account .r-page.sms-page .sms-off::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rv-grey)}
body.customer-app #account .r-page.sms-page .sms-tile{width:32px;height:32px;border-radius:8px;box-shadow:inset 0 0 0 .5px rgba(16,24,40,.12)}
body.customer-app #account .r-page.sms-page .sms-tile.blue{background:#e6f4fe;color:#0d74ce}
body.customer-app #account .r-page.sms-page .sms-tile.amber{background:#fff7c2;color:#ab6400}
body.customer-app #account .r-page.sms-page .sms-tile.green{background:#e6f6eb;color:#218358}
body.customer-app #account .r-page.sms-page .sms-body.sms-v3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px;align-items:start}
body.customer-app #account .r-page.sms-page .sms-v3 :is(.sms-cards,.sms-side){display:flex;flex-direction:column;gap:16px;min-width:0}
body.customer-app #account .r-page.sms-page .sms-v3 .r-card{border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px rgba(16,24,40,.13),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)}
body.customer-app #account .r-page.sms-page .sms-v3 .r-card>h2{margin:0;padding:18px 18px 4px;color:var(--rv-ink);font:600 16px/22px var(--r-font)}
/* «Sett opp SMS-en» before the setup. */
body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3{display:flex;align-items:center;gap:16px;padding:16px 18px}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3>div{flex:1;min-width:0}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3 b{display:block;color:var(--rv-ink);font:600 16px/22px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3 p{margin:2px 0 0;color:var(--rv-text);font:400 14px/20px var(--r-font)}
/* The three steps. */
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-v3{display:flex;flex-direction:column;gap:12px;margin:0;padding:14px 18px 16px;border:0;border-radius:0;background:none;box-shadow:none}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-v3+.sms-step-v3{border-top:.5px solid var(--rv-line)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-head{display:flex;align-items:flex-start;gap:12px}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-head b{color:var(--rv-ink);font:500 15px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-head p{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-when-v3{color:var(--rv-muted);font:500 12px/16px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-box{padding:12px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #c3c6cd}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-text-v3{margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--rv-ink);font:400 15px/24px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-chip{display:inline-flex;align-items:center;height:22px;margin:0 2px;padding:0 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #dcdde1;color:var(--rv-text);font:500 12px/1 var(--r-font);vertical-align:1px;white-space:nowrap}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--rv-text);font:400 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-foot>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-foot .sms-count{flex:none;margin:0;color:var(--rv-text);font:400 13px/18px var(--r-font);white-space:nowrap}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-foot .sms-count.long{color:var(--rv-red-text);font-weight:500}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-send-link{align-self:flex-start}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-v3{padding:14px 18px 18px;border-top:.5px solid var(--rv-line)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-head h3{margin:0;color:var(--rv-ink);font:600 15px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-v3 dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font:400 14px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-v3 dt{color:var(--rv-muted)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-sender-v3 dd{margin:0;min-width:0;color:var(--rv-ink)}
/* «Slik ser kunden det». */
body.customer-app #account .r-page.sms-page .sms-v3 .sms-preview{display:flex;flex-direction:column;gap:14px;padding:0 18px 18px}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-preview>h2{padding:18px 0 0}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;border-radius:10px;background:#eceae4}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-seg button{height:34px;min-height:0;margin:0;padding:0 12px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--rv-text);font:500 13px/1 var(--r-font);white-space:nowrap}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-seg button[aria-pressed=true]{background:#fff;color:var(--rv-ink);box-shadow:0 .5px 2px rgba(0,0,0,.12)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-phone{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:#f3f3f2}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-phone-head{margin:0 0 2px;color:var(--rv-muted);font:500 12px/16px var(--r-font);text-align:center}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-bubble-v3{max-width:82%;margin:0;padding:10px 12px;border-radius:14px;font:400 14px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-bubble-v3.in{align-self:flex-start;border-bottom-left-radius:4px;background:#fff;color:var(--rv-ink);box-shadow:0 0 0 .5px var(--rv-line)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-bubble-v3.out{align-self:flex-end;border-bottom-right-radius:4px;background:var(--rv-ink);color:#fff;font-weight:500}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-bubble-v3 .sms-link{color:#0d74ce;text-decoration:underline;text-underline-offset:3px;white-space:normal}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-phone .sms-outcome{align-self:center;height:auto;padding:0;border-radius:0;background:none;color:var(--rv-text);font:500 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-phone .sms-outcome.bad{color:var(--rv-red-text)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-phone .sms-outcome.bad::before{background:var(--rv-red)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-preview-foot{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-rules-v3{display:flex;flex-direction:column;padding:0}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-rule-v3{display:flex;align-items:center;gap:14px;min-height:48px;margin:0;padding:0 18px;color:var(--rv-ink);font:400 14px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-rule-v3+.sms-rule-v3{border-top:.5px solid var(--rv-line)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-rule-v3 svg{flex:none;width:16px;height:16px;fill:none;stroke:#218358;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
 body.customer-app #account .r-page.sms-page .sms-body.sms-v3{display:flex;flex-direction:column;gap:16px}
 body.customer-app #account .r-page.sms-page .sms-v3 :is(.sms-cards,.sms-side){display:flex}
 body.customer-app #account .r-page.sms-page .sms-notice{align-items:flex-start;margin:0 0 16px}
 body.customer-app #account .r-page.sms-page .sms-notice .sms-off{display:none}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3{flex-direction:column;align-items:stretch}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-start-v3 .r-btn{width:100%;height:44px}
 /* On a phone the replies of step 2 and 3 are described, not written out (SmsFlytMobil #1); the first SMS stays. */
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-v3:not(.sms-card) :is(.sms-box,.sms-step-foot){display:none}
}
/* V3 runde 4 (03.11): the locked switch in the notice, «Hvem hilser» with the setup at the bottom of the card, and short
   steps with a chevron on a phone. */
body.customer-app #account .r-page.sms-page .sms-off-wrap{display:inline-flex;align-items:center;gap:10px;flex:none}
body.customer-app #account .r-page.sms-page .sms-switch{position:relative;flex:none;width:44px;height:26px;min-height:0;margin:0;padding:0;border:0;border-radius:13px;background:#c6c8cc;box-shadow:none;cursor:not-allowed;opacity:1}
body.customer-app #account .r-page.sms-page .sms-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-who{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;border-top:.5px solid var(--rv-line)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-who>h3{margin:0;color:var(--rv-ink);font:600 15px/20px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-who .sms-place{border:0;border-radius:0;background:none;box-shadow:none}
body.customer-app #account #workspace-view .r-page.sms-page .sms-v3 .sms-who .sms-place-title{margin:0;color:var(--rv-text);font:500 13px/18px var(--r-font)}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-who .sms-setup{padding:0}
body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-go{display:none}
@media (max-width:820px){
 body.customer-app #account .r-page.sms-page .sms-notice .sms-off-wrap{align-self:center}
 body.customer-app #account .r-page.sms-page .sms-notice .sms-off{display:none}
 /* SmsFlytMobil #1: each step is one short row; the first leads to where its text is changed. */
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-v3{position:relative;gap:8px;padding:12px 16px}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-v3 :is(.sms-box,.sms-step-foot,.sms-send-link,.sms-when-v3){display:none}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-go{display:grid;position:absolute;inset:0;place-items:center end;width:auto;height:auto;min-height:0;margin:0;padding:0 16px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--rv-muted);cursor:pointer}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-go:focus-visible{outline:2px solid var(--rv-ink);outline-offset:-2px}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-step-head{padding-right:24px}
 body.customer-app #account .r-page.sms-page .sms-v3 .sms-who{padding:14px 16px 16px}
}